marek/creator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Team3
2026-06-06 02:26:42 +02:00
parent a8fbf83059
commit 18bb18bf4a
30 changed files with 1184 additions and 4880 deletions
Download Patch File Download Diff File Expand all files Collapse all files

577
frontend/src/components/TopicDetail.vue
View File

@@ -2,7 +2,7 @@
import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import { htmlUrl, chatGuide, fetchProgress, setProgress } from '../api.js'
import { fetchGuideContent, chatGuide, fetchProgress, setProgress } from '../api.js'
marked.setOptions({ breaks: true, gfm: true })
@@ -16,200 +16,56 @@ const props = defineProps({
provider: { type: String, default: 'claude' },
})
const LANDSCAPE_FORMATS = ['OnePager']
const isLandscape = computed(() => LANDSCAPE_FORMATS.includes(props.previewGuide?.format))
const isOnePager = computed(() => props.previewGuide?.format === 'OnePager')
const frameEl = ref(null)
// --- Inhalt laden ---
const content = ref(null)
const doneChapters = ref(new Set())
const scrollEl = ref(null)
watch(() => props.previewGuide?.id, loadContent, { immediate: true })
async function loadContent() {
content.value = null
doneChapters.value = new Set()
const g = props.previewGuide
if (!g || g.status !== 'done') return
try {
content.value = await fetchGuideContent(g.id)
} catch (e) {
console.error('Fehler beim Laden des Guides:', e)
return
}
try {
const res = await fetchProgress(g.id)
doneChapters.value = new Set(res.chapters || [])
} catch { /* offline → leer */ }
nextTick(scrollToFirstOpen)
}
// Zum ersten noch offenen Kapitel springen — aber nur, wenn schon etwas erledigt ist.
function scrollToFirstOpen() {
if (!doneChapters.value.size || !content.value) return
const chapters = Array.from(scrollEl.value?.querySelectorAll('section.chapter') || [])
const firstOpen = chapters.find((el) => !el.classList.contains('ch-complete'))
if (firstOpen && firstOpen !== chapters[0]) firstOpen.scrollIntoView({ block: 'start' })
}
// --- Kapitel-Fortschritt ---
function onFrameLoad(e) {
const doc = e.target.contentDocument
if (!doc) return
injectStyles(doc)
applyIframeTheme(doc)
setupProgress(doc)
// Klicks im iframe blubbern nicht zum Eltern-document → eigener Listener (same-origin)
doc.addEventListener('mousedown', onFrameMouseDown)
}
// Guide-Dokument folgt dem App-Theme über das data-theme-Attribut.
// Guides definieren :root-Variablen (--ink, --muted, --line, --bg-soft);
// der injizierte Dark-Block (s. injectStyles) greift nur mit gesetztem Attribut.
function applyIframeTheme(doc) {
if (props.dark) doc.documentElement.setAttribute('data-theme', 'dark')
else doc.documentElement.removeAttribute('data-theme')
}
watch(() => props.dark, () => {
const doc = frameEl.value?.contentDocument
if (doc) applyIframeTheme(doc)
})
function onFrameMouseDown() {
if (chatOpen.value) closeChat()
}
function injectStyles(doc) {
// Ohne viewport-meta rendert das iframe-Dokument mit Desktop-Breite und greift unsere max-width-Query nicht.
if (!doc.querySelector('meta[name="viewport"]')) {
const meta = doc.createElement('meta')
meta.name = 'viewport'
meta.content = 'width=device-width, initial-scale=1'
doc.head?.appendChild(meta)
}
const style = doc.createElement('style')
const portrait = !isLandscape.value
? `html { background: #f0f1f4; }
body {
zoom: 1.15;
max-width: 1000px;
margin: 0 auto;
padding: 2.5rem 3.5rem;
background: #fff;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}`
: ''
// Generischer Dark-Override: greift nur, wenn die App data-theme="dark" setzt.
// Entfällt, wenn der Guide eigene Dark-Regeln mitbringt (neuere Templates).
const hasOwnDark = (doc.head?.innerHTML || '').includes('data-theme="dark"')
const darkOverride = hasOwnDark
? ''
: `html[data-theme="dark"] {
--ink: #e6e8ee;
--muted: #9aa3b2;
--line: #2c3038;
--bg-soft: #23262e;
background: #0e1014;
}
html[data-theme="dark"] body {
background: #1c1f26;
color: var(--ink, #e6e8ee);
}
/* Callouts haben hartkodierte helle Hintergründe (#e8f4ea u. ä.) */
html[data-theme="dark"] .callout {
background: var(--bg-soft, #23262e);
}`
style.textContent = `@media screen {
${portrait}
${darkOverride}
.ch-toggle {
display: block;
width: 100%;
margin: 2.5rem 0 0.5rem;
padding: 0.9rem 1rem;
border: 1.5px dashed var(--line, #c7ccd6);
border-radius: 10px;
background: var(--bg-soft, #f8f9fb);
color: var(--muted, #4b5563);
font: 600 0.95rem/1.2 -apple-system, "Segoe UI", Roboto, sans-serif;
text-align: center;
cursor: pointer;
transition: all 0.12s;
}
.ch-toggle:hover { border-color: #6366f1; color: #6366f1; background: transparent; }
.ch-toggle.is-done {
border-style: solid;
border-color: #34d399;
background: #d1fae5;
color: #065f46;
}
html[data-theme="dark"] .ch-toggle.is-done {
border-color: #0f805e;
background: #0f3a2e;
color: #34d399;
}
section.chapter.ch-complete > :not(.ch-toggle) { opacity: 0.4; }
}
@media screen and (max-width: 700px) {
html { background: #fff; }
body {
zoom: 1 !important;
max-width: 100% !important;
padding: 1.25rem 1rem !important;
box-shadow: none !important;
}
/* Cover/Part-Divider: feste mm-Höhen + flex-center fürs Print-A4. Auf Mobile läuft
zentrierter Inhalt über die Box hinaus und überlappt das nächste Element.
→ als normale Blöcke von oben fließen lassen. */
.cover, .part-divider {
height: auto !important;
min-height: 0 !important;
justify-content: flex-start !important;
padding: 2.5rem 1.25rem !important;
overflow: hidden;
}
.cover h1 { font-size: 30pt !important; }
.cover h1 .light { font-size: 22pt !important; }
.cover .sub { font-size: 12pt !important; max-width: 100% !important; margin-bottom: 1.5rem !important; }
.cover .meta-row { flex-wrap: wrap; gap: 0.75rem 1.5rem !important; }
.cover-deco { font-size: 60pt !important; right: 1rem !important; }
.part-divider h1 { font-size: 26pt !important; }
.part-divider .part-desc { max-width: 100% !important; }
.chapter-head h1 { font-size: 22pt !important; }
/* Print schneidet Code hart ab (overflow: hidden) → auf Mobile umbrechen + scrollbar */
pre {
white-space: pre-wrap !important;
word-break: break-word;
overflow-x: auto !important;
}
/* Blocksatz erzeugt riesige Wortlücken in schmalen Spalten */
p { text-align: left !important; }
/* Breite Tabellen horizontal scrollbar statt überlaufend */
table { display: block; width: 100%; overflow-x: auto; }
}`
doc.head?.appendChild(style)
}
async function setupProgress(doc) {
const guideId = props.previewGuide?.id
const chapters = Array.from(doc.querySelectorAll('section.chapter'))
if (!guideId || !chapters.length) return
let done = new Set()
async function toggleChapter(title) {
const newState = !doneChapters.value.has(title)
const optimistic = new Set(doneChapters.value)
if (newState) optimistic.add(title)
else optimistic.delete(title)
doneChapters.value = optimistic
try {
const res = await fetchProgress(guideId)
done = new Set(res.chapters || [])
} catch { /* offline → leer */ }
chapters.forEach((section, i) => {
if (section.querySelector(':scope > .ch-toggle')) return // Guard gegen Doppel-Inject
const numEl = section.querySelector('.chapter-num')
const key = (numEl?.textContent.match(/\d+/)?.[0]) || String(i + 1)
const toggle = doc.createElement('div')
toggle.className = 'ch-toggle'
const apply = (isDone) => {
toggle.classList.toggle('is-done', isDone)
section.classList.toggle('ch-complete', isDone)
toggle.textContent = isDone ? '✓ Erledigt – rückgängig' : 'Kapitel als erledigt markieren'
}
apply(done.has(key))
toggle.addEventListener('click', async () => {
const newState = !section.classList.contains('ch-complete')
apply(newState)
try {
await setProgress(guideId, key, newState)
} catch {
apply(!newState) // Rollback bei Fehler
}
})
section.appendChild(toggle)
})
// Zum ersten noch offenen Kapitel springen — aber nur, wenn davor schon was erledigt ist.
// Frischer Guide (nichts erledigt) bleibt oben beim Cover.
const firstOpen = chapters.find((s) => !s.classList.contains('ch-complete'))
if (firstOpen && firstOpen !== chapters[0]) {
firstOpen.scrollIntoView({ block: 'start' })
const res = await setProgress(props.previewGuide.id, title, newState)
doneChapters.value = new Set(res.chapters || [])
} catch {
const rollback = new Set(doneChapters.value)
if (newState) rollback.delete(title)
else rollback.add(title)
doneChapters.value = rollback
}
}
@@ -233,7 +89,6 @@ function closeChat() {
input.value = ''
}
// Klicks außerhalb des iframes (Sidebar, Ränder) — mousedown vermeidet die Open/Close-Race beim FAB
function onDocMouseDown(e) {
if (!chatOpen.value) return
if (panelEl.value && panelEl.value.contains(e.target)) return
@@ -264,35 +119,23 @@ onUnmounted(() => {
})
function extractContext() {
try {
const doc = frameEl.value?.contentDocument
if (!doc) return { section: '', outline: '' }
const headings = Array.from(doc.querySelectorAll('h1, h2, h3'))
if (!headings.length) return { section: '', outline: '' }
if (!content.value) return { section: '', outline: '' }
const outline = content.value.chapters
.map((ch) => [ch.title, ...ch.sections.map((s) => ' ' + s.title)].join('\n'))
.join('\n')
.slice(0, 7000)
const outline = headings.map((h) => h.innerText.trim()).filter(Boolean).join('\n')
// Aktuelle Überschrift = letzte, die oben im sichtbaren Bereich oder darüber liegt
let current = headings[0]
for (const h of headings) {
if (h.getBoundingClientRect().top <= 100) current = h
else break
}
const level = Number(current.tagName[1])
const idx = headings.indexOf(current)
let end = null
for (let i = idx + 1; i < headings.length; i++) {
if (Number(headings[i].tagName[1]) <= level) { end = headings[i]; break }
}
const range = doc.createRange()
range.setStartBefore(current)
if (end) range.setEndBefore(end)
else range.setEndAfter(doc.body.lastElementChild || doc.body)
const section = range.toString().trim().slice(0, 18000)
return { section, outline: outline.slice(0, 7000) }
} catch {
return { section: '', outline: '' }
// Aktuelle Section = letzte Karte, deren Oberkante oben im Viewport oder darüber liegt
let section = ''
const cards = Array.from(scrollEl.value?.querySelectorAll('.section-card') || [])
let current = null
for (const el of cards) {
if (el.getBoundingClientRect().top <= 120) current = el
else break
}
if (!current && cards.length) current = cards[0]
if (current) section = current.innerText.trim().slice(0, 18000)
return { section, outline }
}
async function scrollToBottom() {
@@ -328,8 +171,37 @@ async function send() {
<template>
<div class="detail">
<div class="preview" :class="{ landscape: isLandscape }" v-if="previewGuide">
<iframe ref="frameEl" :src="htmlUrl(previewGuide.id)" class="preview-frame" :class="{ landscape: isLandscape }" title="Guide-Vorschau" @load="onFrameLoad"></iframe>
<div v-if="previewGuide && content" ref="scrollEl" class="guide-scroll">
<div class="guide-content" :class="{ onepager: isOnePager }">
<header class="guide-head">
<h1>{{ previewGuide.topic }}</h1>
<span class="guide-format">{{ previewGuide.format }}</span>
</header>
<section
v-for="ch in content.chapters"
:key="ch.title"
class="chapter"
:class="{ 'ch-complete': doneChapters.has(ch.title) }"
>
<h2 class="chapter-title">{{ ch.title }}</h2>
<div class="sections">
<article v-for="s in ch.sections" :key="s.num" class="section-card">
<h3>{{ s.title }}</h3>
<div class="section-body markdown" v-html="renderMarkdown(s.md)"></div>
</article>
</div>
<button
v-if="!isOnePager"
class="ch-toggle"
:class="{ 'is-done': doneChapters.has(ch.title) }"
@click="toggleChapter(ch.title)"
>{{ doneChapters.has(ch.title) ? '✓ Erledigt – rückgängig' : 'Kapitel als erledigt markieren' }}</button>
</section>
</div>
</div>
<div v-else-if="previewGuide" class="empty-preview">
<p>Lade Inhalt…</p>
</div>
<div class="empty-preview" v-else>
@@ -368,58 +240,114 @@ async function send() {
.detail {
flex: 1;
height: 100vh;
position: relative;
}
.preview {
.guide-scroll {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
background: var(--bg-preview);
}
.preview.landscape {
padding: 2rem;
.guide-content {
max-width: 880px;
margin: 0 auto;
padding: 2rem 2.5rem 5rem;
}
.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 1rem;
background: var(--bg);
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
flex-shrink: 0;
}
.preview-actions {
.guide-head {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1.5rem;
h1 {
font-size: 1.7rem;
}
}
.preview-link {
color: var(--accent);
text-decoration: none;
font-size: 0.8rem;
.guide-format {
color: var(--text-faint);
font-size: 0.9rem;
font-weight: 600;
}
.preview-link:hover {
text-decoration: underline;
.chapter {
margin-bottom: 2.5rem;
}
.preview-frame {
.chapter-title {
font-size: 1.25rem;
margin-bottom: 0.9rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--accent-border);
}
.chapter.ch-complete .sections {
opacity: 0.4;
}
.section-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
h3 {
font-size: 1.02rem;
margin-bottom: 0.5rem;
}
}
/* OnePager: dichtes Karten-Grid */
.guide-content.onepager .sections {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 0.6rem;
}
.guide-content.onepager .section-card {
margin-bottom: 0;
padding: 0.7rem 0.9rem;
h3 {
font-size: 0.88rem;
margin-bottom: 0.3rem;
}
.section-body {
font-size: 0.82rem;
}
}
.ch-toggle {
display: block;
width: 100%;
flex: 1;
border: none;
background: var(--bg-preview);
}
margin-top: 0.5rem;
padding: 0.8rem 1rem;
border: 1.5px dashed var(--border-strong);
border-radius: 10px;
background: var(--panel-soft);
color: var(--text-muted);
font: 600 0.9rem/1.2 inherit;
font-family: inherit;
text-align: center;
cursor: pointer;
transition: all 0.12s;
.preview-frame.landscape {
max-width: 1180px;
box-shadow: 0 1px 8px var(--shadow);
&:hover {
border-color: var(--accent);
color: var(--accent);
background: transparent;
}
&.is-done {
border-style: solid;
border-color: var(--success-border);
background: var(--success-soft);
color: var(--success);
}
}
.empty-preview {
@@ -430,6 +358,77 @@ async function send() {
color: var(--text-muted);
}
/* --- Markdown (Sections + Chat) --- */
.markdown :deep(p) {
margin: 0 0 0.5em;
}
.markdown :deep(p:last-child) {
margin-bottom: 0;
}
.markdown :deep(ul),
.markdown :deep(ol) {
margin: 0.3em 0;
padding-left: 1.2em;
}
.markdown :deep(li) {
margin: 0.15em 0;
}
.markdown :deep(code) {
background: var(--border);
padding: 1px 4px;
border-radius: 4px;
font-family: "SF Mono", Consolas, monospace;
font-size: 0.85em;
}
.markdown :deep(pre) {
background: var(--code-bg, #1e2330);
color: var(--code-fg, #e6e8ee);
padding: 10px 12px;
border-radius: 8px;
overflow-x: auto;
margin: 0.5em 0;
}
.markdown :deep(pre code) {
background: none;
padding: 0;
color: inherit;
font-size: 0.85em;
}
.markdown :deep(h1),
.markdown :deep(h2),
.markdown :deep(h3) {
font-size: 0.95em;
margin: 0.6em 0 0.3em;
}
.markdown :deep(a) {
color: var(--accent-hover);
}
.markdown :deep(table) {
border-collapse: collapse;
font-size: 0.95em;
}
.markdown :deep(th),
.markdown :deep(td) {
border: 1px solid var(--border-strong);
padding: 2px 6px;
}
.section-body {
font-size: 0.92rem;
line-height: 1.55;
}
/* --- Chat --- */
.chat-fab {
position: fixed;
right: 1.5rem;
@@ -528,75 +527,15 @@ async function send() {
border-bottom-left-radius: 3px;
}
.chat-msg.markdown {
white-space: normal;
}
.chat-typing {
color: var(--text-faint);
font-style: italic;
}
.chat-msg.markdown :deep(p) {
margin: 0 0 0.5em;
}
.chat-msg.markdown :deep(p:last-child) {
margin-bottom: 0;
}
.chat-msg.markdown :deep(ul),
.chat-msg.markdown :deep(ol) {
margin: 0.3em 0;
padding-left: 1.2em;
}
.chat-msg.markdown :deep(li) {
margin: 0.15em 0;
}
.chat-msg.markdown :deep(code) {
background: var(--border);
padding: 1px 4px;
border-radius: 4px;
font-family: "SF Mono", Consolas, monospace;
font-size: 0.8em;
}
.chat-msg.markdown :deep(pre) {
background: #1e2330;
color: #e6e8ee;
padding: 8px 10px;
border-radius: 8px;
overflow-x: auto;
margin: 0.5em 0;
}
.chat-msg.markdown :deep(pre code) {
background: none;
padding: 0;
color: inherit;
font-size: 0.78em;
}
.chat-msg.markdown :deep(h1),
.chat-msg.markdown :deep(h2),
.chat-msg.markdown :deep(h3) {
font-size: 0.95em;
margin: 0.4em 0 0.2em;
}
.chat-msg.markdown :deep(a) {
color: var(--accent-hover);
}
.chat-msg.markdown :deep(table) {
border-collapse: collapse;
font-size: 0.95em;
}
.chat-msg.markdown :deep(th),
.chat-msg.markdown :deep(td) {
border: 1px solid var(--border-strong);
padding: 2px 6px;
}
.chat-input {
display: flex;
gap: 6px;