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

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;