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-22 12:24:44 +02:00
parent 2d1a3d3e37
commit 04900eef55
23 changed files with 53 additions and 1076 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
frontend/package-lock.json generated
View File

@@ -8,8 +8,6 @@
"name": "frontend",
"version": "0.0.0",
"dependencies": {
"@dagrejs/dagre": "^3.0.0",
"@vue-flow/core": "^1.48.2",
"dompurify": "^3.4.7",
"highlight.js": "^11.11.1",
"katex": "^0.17.0",
@@ -481,21 +479,6 @@
"node": ">=6.9.0"
}
},
"node_modules/@dagrejs/dagre": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-3.0.0.tgz",
"integrity": "sha512-ZzhnTy1rfuoew9Ez3EIw4L2znPGnYYhfn8vc9c4oB8iw6QAsszbiU0vRhlxWPFnmmNSFAkrYeF1PhM5m4lAN0Q==",
"license": "MIT",
"dependencies": {
"@dagrejs/graphlib": "4.0.1"
}
},
"node_modules/@dagrejs/graphlib": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-4.0.1.tgz",
"integrity": "sha512-IvcV6FduIIAmLwnH+yun+QtV36SC7mERqa86aClNqmMN09WhmPPYU8ckHrZBozErf+UvHPWOTJYaGYiIcs0DgA==",
"license": "MIT"
},
"node_modules/@emnapi/core": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -897,12 +880,6 @@
"license": "MIT",
"optional": true
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
"license": "MIT"
},
"node_modules/@vitejs/plugin-vue": {
"version": "6.0.7",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.7.tgz",
@@ -920,22 +897,6 @@
"vue": "^3.2.25"
}
},
"node_modules/@vue-flow/core": {
"version": "1.48.2",
"resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.48.2.tgz",
"integrity": "sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==",
"license": "MIT",
"dependencies": {
"@vueuse/core": "^10.5.0",
"d3-drag": "^3.0.0",
"d3-interpolate": "^3.0.1",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0"
},
"peerDependencies": {
"vue": "^3.3.0"
}
},
"node_modules/@vue/babel-helper-vue-transform-on": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",
@@ -1123,94 +1084,6 @@
"integrity": "sha512-24uqU4OIiX29ryC3MeWid/Xf2fa2EFRUVLb77nRhk+UrTVrh/XiGtFAFmJBAtBRbjwNdsPRP+jj/OL27Eg1NDA==",
"license": "MIT"
},
"node_modules/@vueuse/core": {
"version": "10.11.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
"integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "10.11.1",
"@vueuse/shared": "10.11.1",
"vue-demi": ">=0.14.8"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "10.11.1",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
"integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "10.11.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
"integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
"license": "MIT",
"dependencies": {
"vue-demi": ">=0.14.8"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/ansis": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansis/-/ansis-4.3.0.tgz",
@@ -1337,111 +1210,6 @@
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
"license": "MIT"
},
"node_modules/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-dispatch": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-drag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
"license": "ISC",
"dependencies": {
"d3-dispatch": "1 - 3",
"d3-selection": "3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-ease": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
"license": "BSD-3-Clause",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"license": "ISC",
"dependencies": {
"d3-color": "1 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-selection": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-timer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-transition": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
"license": "ISC",
"dependencies": {
"d3-color": "1 - 3",
"d3-dispatch": "1 - 3",
"d3-ease": "1 - 3",
"d3-interpolate": "1 - 3",
"d3-timer": "1 - 3"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"d3-selection": "2 - 3"
}
},
"node_modules/d3-zoom": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
"license": "ISC",
"dependencies": {
"d3-dispatch": "1 - 3",
"d3-drag": "2 - 3",
"d3-interpolate": "1 - 3",
"d3-selection": "2 - 3",
"d3-transition": "2 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/debug": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",

2
frontend/package.json
View File

@@ -9,8 +9,6 @@
"preview": "vite preview"
},
"dependencies": {
"@dagrejs/dagre": "^3.0.0",
"@vue-flow/core": "^1.48.2",
"dompurify": "^3.4.7",
"highlight.js": "^11.11.1",
"katex": "^0.17.0",

4
frontend/src/App.vue
View File

@@ -181,7 +181,7 @@ async function loadBausteine() {
}
}
const FORMAT_ORDER = ['Guide', 'FullGuide', 'Roadmap', 'Rest']
const FORMAT_ORDER = ['Guide', 'FullGuide', 'Rest']
function autoPreview() {
const map = doneByFormat.value
@@ -202,7 +202,7 @@ function selectTopic(topic) {
elementsView.value = false
bausteineView.value = false
elementOpenId.value = null
ansichtModus.value = localStorage.getItem('ansicht_' + topic) || 'kompakt'
ansichtModus.value = localStorage.getItem('ansicht_' + topic) === 'erklärend' ? 'erklärend' : 'kompakt'
localStorage.setItem('lastTopic', topic)
loadBausteine()
nextTick(autoPreview)

5
frontend/src/api.js
View File

@@ -94,11 +94,6 @@ export async function fetchFrageMuster(topic, baustein) {
return jsonOrThrow(res)
}
export async function fetchGrafiken(topic) {
const res = await fetch(`${BASE}/bausteine/grafiken?topic=${encodeURIComponent(topic)}`)
return jsonOrThrow(res)
}
export async function fetchTopicFortschritt(topic) {
const res = await fetch(`${BASE}/topics/fortschritt?topic=${encodeURIComponent(topic)}`)
return res.json()

5
frontend/src/components/BausteinFokus.vue
View File

@@ -1,11 +1,9 @@
<script setup>
import BausteinPanel from './BausteinPanel.vue'
import GraphView from './GraphView.vue'
import { renderMarkdown } from '../markdown.js'
const props = defineProps({
baustein: { type: Object, required: true }, // { title, md, num }
graph: { type: Object, default: null }, // {knoten,kanten,richtung} aus dem Grafik-Sidecar
topic: { type: String, required: true },
provider: { type: String, default: 'claude' },
status: { type: Object, default: null },
@@ -91,8 +89,7 @@ const standFarbe = computed(() => {
</div>
<div class="fokus-body">
<div ref="guideEl" class="fokus-col left">
<GraphView v-if="ansicht === 'grafik'" :graph="graph" height="70vh" />
<div v-else class="markdown" v-html="renderMarkdown(ansicht === 'kompakt' ? (baustein.kompakt || baustein.md) : baustein.md)"></div>
<div class="markdown" v-html="renderMarkdown(ansicht === 'kompakt' ? (baustein.kompakt || baustein.md) : baustein.md)"></div>
</div>
<div ref="rightEl" class="fokus-col right">
<BausteinPanel

6
frontend/src/components/BausteinPanel.vue
View File

@@ -629,8 +629,7 @@ function onPruefKey(e) {
}
if (e.code === 'KeyQ') {
e.preventDefault()
const r = ['kompakt', 'erklärend', 'grafik']
emit('setAnsicht', r[(r.indexOf(props.ansicht) + 1) % 3])
emit('setAnsicht', props.ansicht === 'kompakt' ? 'erklärend' : 'kompakt')
return
}
if (e.code === 'KeyE') { e.preventDefault(); variantWechseln(); return }
@@ -648,7 +647,6 @@ function onPruefKey(e) {
<div v-if="mode === 'full'" class="bp-ansicht">
<button :class="{ active: ansicht === 'kompakt' }" title="Merksätze" @click="emit('setAnsicht', 'kompakt')">Kompakt</button>
<button :class="{ active: ansicht === 'erklärend' }" title="Ausführliche Erklärung" @click="emit('setAnsicht', 'erklärend')">Erklärend</button>
<button :class="{ active: ansicht === 'grafik' }" title="Diagramm" @click="emit('setAnsicht', 'grafik')">Grafik</button>
</div>
<button :class="{ active: activeTab === 'chat' }" @click="tabKlick('chat')">
Chat
@@ -848,7 +846,7 @@ function onPruefKey(e) {
.bp-toggles button:hover { border-color: var(--border-strong); color: var(--text); }
.bp-toggles button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Ansicht-Umschalter (Kompakt/Erklärend/Grafik) — segmentiert, links vor den Tabs */
/* Ansicht-Umschalter (Kompakt/Erklärend) — segmentiert, links vor den Tabs */
.bp-ansicht { display: inline-flex; margin-right: 0.5rem; }
.bp-ansicht button {
padding: 0.25rem 0.6rem;

137
frontend/src/components/GraphView.vue
View File

@@ -1,137 +0,0 @@
<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { VueFlow, useVueFlow, Handle, Position, MarkerType } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css'
import dagre from '@dagrejs/dagre'
import { renderMarkdownInline } from '../markdown.js'
// Grafik = {knoten:[{id,text}], kanten:[{von,nach,text?}], richtung:'TB'|'LR'}.
// KI liefert nur die Semantik; Layout macht dagre, Mathe rendert KaTeX im Knoten.
const props = defineProps({
graph: { type: Object, default: null },
height: { type: String, default: '380px' },
})
let _seq = 0
const flowId = `gv-${++_seq}-${Math.floor(performance.now())}`
const { findNode, fitView, onNodesInitialized } = useVueFlow(flowId)
const nodes = ref([])
const edges = ref([])
const bereit = ref(false) // erst nach dem Layout sichtbar (sonst kurz bei 0,0 gestapelt)
const fehler = ref(false)
const richtung = computed(() => (props.graph?.richtung === 'LR' ? 'LR' : 'TB'))
const istLR = computed(() => richtung.value === 'LR')
const targetPos = computed(() => (istLR.value ? Position.Left : Position.Top))
const sourcePos = computed(() => (istLR.value ? Position.Right : Position.Bottom))
function build() {
bereit.value = false
const g = props.graph
const kn = g && Array.isArray(g.knoten) ? g.knoten : []
if (!kn.length) {
fehler.value = true
nodes.value = []
edges.value = []
return
}
fehler.value = false
const ids = new Set(kn.map((k) => String(k.id)))
nodes.value = kn.map((k) => ({
id: String(k.id),
type: 'math',
position: { x: 0, y: 0 },
data: { text: String(k.text || '') },
}))
edges.value = (g.kanten || [])
.filter((e) => ids.has(String(e.von)) && ids.has(String(e.nach)))
.map((e, i) => ({
id: `e${i}`,
source: String(e.von),
target: String(e.nach),
label: e.text ? String(e.text) : undefined,
type: 'smoothstep',
markerEnd: MarkerType.ArrowClosed,
}))
}
// Two-Pass: Vue Flow misst die Knoten (KaTeX!), erst dann rechnet dagre das Layout.
function layout() {
const g = new dagre.graphlib.Graph()
g.setDefaultEdgeLabel(() => ({}))
g.setGraph({ rankdir: richtung.value, nodesep: 40, ranksep: 55 })
for (const n of nodes.value) {
const dim = findNode(n.id)?.dimensions
g.setNode(n.id, { width: dim?.width || 160, height: dim?.height || 40 })
}
for (const e of edges.value) g.setEdge(e.source, e.target)
dagre.layout(g)
nodes.value = nodes.value.map((n) => {
const p = g.node(n.id)
return { ...n, position: { x: p.x - p.width / 2, y: p.y - p.height / 2 } }
})
}
onNodesInitialized(async () => {
if (!nodes.value.length) return
await document.fonts.ready // sonst misst der Browser Fallback-Font → falsche Breite
layout()
bereit.value = true
await nextTick()
fitView({ padding: 0.2 })
})
watch(() => props.graph, build, { immediate: true })
</script>
<template>
<div class="graph-view" :style="{ height }">
<p v-if="fehler" class="graph-fallback">Grafik nicht verfügbar — Bausteine ab „Grafiken" neu bauen.</p>
<VueFlow
v-else
:id="flowId"
:nodes="nodes"
:edges="edges"
:style="{ opacity: bereit ? 1 : 0 }"
:nodes-draggable="false"
:nodes-connectable="false"
:elements-selectable="false"
:zoom-on-scroll="false"
:zoom-on-double-click="false"
:min-zoom="0.2"
:max-zoom="2"
fit-view-on-init
>
<template #node-math="{ data }">
<Handle type="target" :position="targetPos" />
<div class="gv-node markdown" v-html="renderMarkdownInline(data.text)"></div>
<Handle type="source" :position="sourcePos" />
</template>
</VueFlow>
</div>
</template>
<style scoped>
.graph-view { width: 100%; position: relative; }
.graph-fallback { color: var(--text-muted); font-size: 0.85rem; padding: 1rem 0; }
.gv-node {
padding: 0.4rem 0.65rem;
border: 1px solid var(--border-strong, #999);
border-radius: 8px;
background: var(--panel, #fff);
color: var(--text, #111);
font-size: 0.8rem;
line-height: 1.35;
text-align: center;
max-width: 300px;
/* Langer Text/Formel umbricht, statt im Knoten abgeschnitten zu werden. */
white-space: normal;
overflow-wrap: anywhere;
}
/* KaTeX im Knoten umbrechen lassen + geerbtes Klippen (markdown .katex-display) neutralisieren. */
.gv-node :deep(.katex) { white-space: normal; }
.gv-node :deep(.katex-display) { overflow: visible; margin: 0; }
.graph-view :deep(.vue-flow__edge-text) { font-size: 0.72rem; fill: var(--text-muted, #666); }
.graph-view :deep(.vue-flow__edge-textbg) { fill: var(--panel, #fff); }
</style>

146
frontend/src/components/RoadmapView.vue
View File

@@ -1,146 +0,0 @@
<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { VueFlow, useVueFlow, Handle, Position, MarkerType } from '@vue-flow/core'
import '@vue-flow/core/dist/style.css'
import dagre from '@dagrejs/dagre'
import { renderMarkdownInline } from '../markdown.js'
// Roadmap = read-only Übersichts-Graph: {knoten:[{id,title,text,prioritaet}],
// kanten:[{von,nach,typ}], richtung}. Layout via dagre, Knoten-Text via KaTeX.
const props = defineProps({
graph: { type: Object, default: null },
height: { type: String, default: '78vh' },
})
let _seq = 0
const flowId = `rm-${++_seq}-${Math.floor(performance.now())}`
const { findNode, fitView, onNodesInitialized } = useVueFlow(flowId)
const nodes = ref([])
const edges = ref([])
const bereit = ref(false)
const fehler = ref(false)
const richtung = computed(() => (props.graph?.richtung === 'LR' ? 'LR' : 'TB'))
const istLR = computed(() => richtung.value === 'LR')
const targetPos = computed(() => (istLR.value ? Position.Left : Position.Top))
const sourcePos = computed(() => (istLR.value ? Position.Right : Position.Bottom))
function build() {
bereit.value = false
const g = props.graph
const kn = g && Array.isArray(g.knoten) ? g.knoten : []
if (!kn.length) {
fehler.value = true
nodes.value = []
edges.value = []
return
}
fehler.value = false
const ids = new Set(kn.map((k) => String(k.id)))
nodes.value = kn.map((k) => ({
id: String(k.id),
type: 'roadmap',
position: { x: 0, y: 0 },
data: {
title: String(k.title || ''),
text: String(k.text || ''),
prioritaet: ['grund', 'kern', 'vertiefung'].includes(k.prioritaet) ? k.prioritaet : 'kern',
},
}))
edges.value = (g.kanten || [])
.filter((e) => ids.has(String(e.von)) && ids.has(String(e.nach)))
.map((e, i) => {
const optional = e.typ === 'optional'
return {
id: `e${i}`,
source: String(e.von),
target: String(e.nach),
type: 'smoothstep',
markerEnd: MarkerType.ArrowClosed,
style: optional ? { strokeDasharray: '6 4', opacity: 0.7 } : {},
}
})
}
// Two-Pass: Vue Flow misst die Knoten, dann rechnet dagre das Layout.
function layout() {
const g = new dagre.graphlib.Graph()
g.setDefaultEdgeLabel(() => ({}))
g.setGraph({ rankdir: richtung.value, nodesep: 50, ranksep: 70 })
for (const n of nodes.value) {
const dim = findNode(n.id)?.dimensions
g.setNode(n.id, { width: dim?.width || 180, height: dim?.height || 56 })
}
for (const e of edges.value) g.setEdge(e.source, e.target)
dagre.layout(g)
nodes.value = nodes.value.map((n) => {
const p = g.node(n.id)
return { ...n, position: { x: p.x - p.width / 2, y: p.y - p.height / 2 } }
})
}
onNodesInitialized(async () => {
if (!nodes.value.length) return
await document.fonts.ready
layout()
bereit.value = true
await nextTick()
fitView({ padding: 0.2 })
})
watch(() => props.graph, build, { immediate: true })
</script>
<template>
<div class="roadmap-view" :style="{ height }">
<p v-if="fehler" class="rm-fallback">Roadmap nicht verfügbar — neu generieren.</p>
<VueFlow
v-else
:id="flowId"
:nodes="nodes"
:edges="edges"
:style="{ opacity: bereit ? 1 : 0 }"
:nodes-draggable="false"
:nodes-connectable="false"
:elements-selectable="false"
:zoom-on-scroll="false"
:zoom-on-double-click="false"
:min-zoom="0.2"
:max-zoom="2"
fit-view-on-init
>
<template #node-roadmap="{ data }">
<Handle type="target" :position="targetPos" />
<div class="rm-node" :class="'prio-' + data.prioritaet">
<div class="rm-title">{{ data.title }}</div>
<div v-if="data.text" class="rm-text markdown" v-html="renderMarkdownInline(data.text)"></div>
</div>
<Handle type="source" :position="sourcePos" />
</template>
</VueFlow>
</div>
</template>
<style scoped>
.roadmap-view { width: 100%; position: relative; }
.rm-fallback { color: var(--text-muted); font-size: 0.85rem; padding: 1rem 0; }
.rm-node {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-strong, #999);
border-left: 4px solid var(--rm-accent, #8b5cf6);
border-radius: 8px;
background: color-mix(in srgb, var(--rm-accent, #8b5cf6) 7%, var(--panel, #fff));
color: var(--text, #111);
max-width: 260px;
white-space: normal;
overflow-wrap: anywhere;
}
.rm-title { font-weight: 600; font-size: 0.85rem; line-height: 1.25; }
.rm-text { font-size: 0.74rem; color: var(--text-muted, #555); line-height: 1.3; margin-top: 0.2rem; }
.rm-text :deep(.katex) { white-space: normal; }
/* Prioritäts-Farben: grund=grün (Fundament), kern=lila (Hauptstoff), vertiefung=grau (später). */
.prio-grund { --rm-accent: #22c55e; }
.prio-kern { --rm-accent: #8b5cf6; }
.prio-vertiefung { --rm-accent: #94a3b8; }
</style>

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

@@ -1,12 +1,10 @@
<script setup>
import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { fetchGuideContent, chatGuide, fetchBausteinLernstand, fetchGrafiken } from '../api.js'
import { fetchGuideContent, chatGuide, fetchBausteinLernstand } from '../api.js'
import { renderMarkdown } from '../markdown.js'
import { useChat } from '../composables/useChat.js'
import BausteinPanel from './BausteinPanel.vue'
import BausteinFokus from './BausteinFokus.vue'
import GraphView from './GraphView.vue'
import RoadmapView from './RoadmapView.vue'
const props = defineProps({
previewGuide: { type: Object, default: null },
@@ -20,8 +18,6 @@ const props = defineProps({
const emit = defineEmits(['progressChanged', 'setAnsicht'])
const isRoadmap = computed(() => props.previewGuide?.format === 'Roadmap')
// Rotierende Kapitel-Akzentfarben (ohne Rot)
const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366f1']
@@ -29,7 +25,6 @@ const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366
const content = ref(null)
const loadError = ref(null)
const scrollEl = ref(null)
const grafiken = ref({}) // Baustein-Titel → {knoten,kanten,richtung} (Sidecar, von allen Guides geteilt)
const lernstand = ref({}) // Prüfungs-Stand pro Baustein-Titel — VOR dem immediate-Watch (loadContent nutzt es)
watch(() => props.previewGuide?.id, loadContent, { immediate: true })
@@ -38,7 +33,6 @@ async function loadContent() {
content.value = null
loadError.value = null
lernstand.value = {}
grafiken.value = {}
const g = props.previewGuide
if (!g || g.status !== 'done') return
try {
@@ -48,14 +42,9 @@ async function loadContent() {
loadError.value = 'Inhalt nicht verfügbar — die Datei fehlt. Guide neu generieren (▶).'
return
}
if (g.format !== 'Roadmap') {
try {
lernstand.value = (await fetchBausteinLernstand(g.topic)).bausteine || {}
} catch { /* offline → leer */ }
try {
grafiken.value = (await fetchGrafiken(g.topic)).grafiken || {}
} catch { /* keine Grafiken → Fallback */ }
}
try {
lernstand.value = (await fetchBausteinLernstand(g.topic)).bausteine || {}
} catch { /* offline → leer */ }
}
// --- Baustein-Lernen: Prüfungs-Stand pro Baustein-Titel (lernstand oben deklariert) ---
@@ -69,7 +58,7 @@ function onBausteinStatus(baustein, status) {
const fokusIndex = ref(null) // Index in der flachen Baustein-Liste; null = zu
const fokusTab = ref('pruefung')
const bausteine = computed(() =>
isRoadmap.value || !content.value ? [] : content.value.chapters.flatMap((ch) => ch.sections),
!content.value ? [] : content.value.chapters.flatMap((ch) => ch.sections),
)
const fokusBaustein = computed(() => (fokusIndex.value === null ? null : bausteine.value[fokusIndex.value]))
@@ -191,18 +180,15 @@ function extractContext() {
<template>
<div class="detail">
<div v-if="previewGuide && content" ref="scrollEl" class="guide-scroll">
<div class="guide-content" :class="{ roadmap: isRoadmap }">
<div class="guide-content">
<header class="guide-head">
<h1>{{ previewGuide.topic }}</h1>
<span class="guide-format">{{ previewGuide.format }}</span>
<span v-if="themaAbgeschlossen" class="thema-done" title="Alle Bausteine gemeistert (18/18)">✓ Thema abgeschlossen</span>
</header>
<RoadmapView v-if="isRoadmap" :graph="content.graph || null" height="100%" />
<section
v-for="(ch, ci) in content.chapters"
v-else
:key="ch.title"
class="chapter"
:style="{ '--ch-accent': CH_COLORS[ci % CH_COLORS.length] }"
@@ -222,8 +208,7 @@ function extractContext() {
<span v-else-if="lernstand[s.title]?.absolviert" class="baustein-done" title="Prüfung bestanden">✓ Absolviert</span>
</template>
</h3>
<GraphView v-if="ansichtModus === 'grafik'" :graph="grafiken[s.title] || null" />
<div v-else class="section-body markdown" v-html="renderMarkdown(ansichtModus === 'kompakt' ? (s.kompakt || s.md) : s.md)"></div>
<div class="section-body markdown" v-html="renderMarkdown(ansichtModus === 'kompakt' ? (s.kompakt || s.md) : s.md)"></div>
<BausteinPanel
v-if="istPruefbar(s)"
mode="trigger"
@@ -250,7 +235,6 @@ function extractContext() {
<BausteinFokus
v-if="fokusBaustein"
:baustein="fokusBaustein"
:graph="grafiken[fokusBaustein.title] || null"
:topic="previewGuide.topic"
:provider="provider"
:fortschritt="fortschritt"
@@ -412,7 +396,7 @@ function extractContext() {
}
/* Absolvierte Bausteine: Karte kippt sichtbar auf Grün */
.guide-content:not(.roadmap) .section-card.absolviert {
.guide-content .section-card.absolviert {
border-color: var(--success-border);
border-top: 3px solid var(--success);
background: color-mix(in srgb, var(--success) 5%, var(--panel));
@@ -424,7 +408,7 @@ function extractContext() {
border-color: #8b5cf6;
color: #6d28d9;
}
.guide-content:not(.roadmap) .section-card.verstanden {
.guide-content .section-card.verstanden {
border-color: #8b5cf6;
border-top: 3px solid #8b5cf6;
background: color-mix(in srgb, #8b5cf6 7%, var(--panel));
@@ -436,14 +420,14 @@ function extractContext() {
border-color: #d4af37;
color: #8a6d12;
}
.guide-content:not(.roadmap) .section-card.gemeistert {
.guide-content .section-card.gemeistert {
border-color: #d4af37;
border-top: 3px solid #d4af37;
background: color-mix(in srgb, #d4af37 8%, var(--panel));
}
/* Guides: Karten tragen die Kapitel-Akzentfarbe */
.guide-content:not(.roadmap) .section-card {
.guide-content .section-card {
border-top: 3px solid color-mix(in srgb, var(--ch-accent, var(--accent)) 65%, transparent);
background: color-mix(in srgb, var(--ch-accent, var(--accent)) 3%, var(--panel));
}
@@ -460,20 +444,6 @@ function extractContext() {
.section-card h3.baustein-klick { cursor: pointer; width: fit-content; }
.section-card h3.baustein-klick:hover { color: var(--accent); }
/* Roadmap: read-only Übersichts-Graph über die volle Fläche, kein Lese-Zoom. */
.guide-content.roadmap {
max-width: none;
height: 100%;
zoom: 1;
padding: 0.9rem 1rem;
display: flex;
flex-direction: column;
}
.guide-content.roadmap .roadmap-view {
flex: 1;
min-height: 0;
}
.empty-preview {
display: flex;
align-items: center;

20
frontend/src/components/TopicSidebar.vue
View File

@@ -52,7 +52,6 @@ const trackerItems = computed(() => {
})
const formats = [
{ key: 'Roadmap', label: 'Roadmap' },
{ key: 'Guide', label: 'Guide' },
{ key: 'FullGuide', label: 'FullGuide' },
{ key: 'Rest', label: 'Rest' },
@@ -119,14 +118,13 @@ function guideStatus(format) {
return latest.status
}
// Schritt-Kugeln der Guide-Pipelines
// Schritt-Kugeln der Guide-Pipeline
const GUIDE_STEPS = ['Auswahl', 'Gliederung', 'Inhalte', 'Inhalts-Check', 'Schreiben', 'Lese-Prüfung']
const ROADMAP_STEPS = ['Bauen', 'Prüfung']
// Kugeln werden wie bei den Bausteinen immer angezeigt:
// fertig = alle grün, laufend = live, abgebrochen = Teilfortschritt, sonst grau
function guideSteps(format) {
const labels = format === 'Roadmap' ? ROADMAP_STEPS : GUIDE_STEPS
const labels = GUIDE_STEPS
const st = guideStatus(format)
if (st === 'generating' || st === 'queued') {
// Clamp: alte DB-Läufe können step-Werte oberhalb der neuen Listen haben
@@ -308,14 +306,6 @@ function saveQuelle() {
<rect x="2" y="12.9" width="8" height="1.4" rx="0.7" />
</svg>
</button>
<button :class="{ active: ansichtModus === 'grafik' }" title="Grafik (Diagramm)" @click="emit('setAnsicht', 'grafik')">
<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
<circle cx="4" cy="4" r="2" />
<circle cx="12" cy="4" r="2" />
<circle cx="8" cy="12" r="2" />
<path d="M4 6 L8 10 M12 6 L8 10" stroke="currentColor" stroke-width="1.3" fill="none" />
</svg>
</button>
</div>
<button class="new-topic-toggle" :class="{ active: dlg }" title="Thema erstellen" @click="toggleErstellen">+</button>
</div>
@@ -411,8 +401,8 @@ function saveQuelle() {
<span class="format-error-text">{{ bausteine.error }}</span>
</div>
</div>
<!-- Roadmap (Überblick zuerst lesen) steht per CSS-order vor der Bausteine-Zeile -->
<div v-for="f in formats" :key="f.key" :style="{ order: f.key === 'Roadmap' ? 1 : 3 }">
<!-- Formate stehen per CSS-order nach der Bausteine-Zeile (order 2) -->
<div v-for="f in formats" :key="f.key" :style="{ order: 3 }">
<div :class="['format-row', 'fmt-' + guideStatus(f.key), { 'fmt-paused': abgebrochen(f.key), 'row-open': isOpen('fmt-' + f.key) }]">
<button class="format-name" @click="handleFormatClick(f.key)">
<span class="format-label">{{ f.label }}</span>
@@ -790,7 +780,7 @@ function saveQuelle() {
max-height: 60vh;
overflow-y: auto;
padding: 0.5rem 0;
/* flex + order: Roadmap (order 1) vor Bausteine (order 2) vor den restlichen Formaten (order 3) */
/* flex + order: Bausteine (order 2) vor den Formaten (order 3) */
display: flex;
flex-direction: column;
}