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-21 22:53:54 +02:00
parent b4c686f74f
commit 2e33fa5c47
23 changed files with 442 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ 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 },
@@ -19,9 +20,9 @@ const props = defineProps({
const emit = defineEmits(['progressChanged', 'setAnsicht'])
const isOnePager = computed(() => props.previewGuide?.format === 'OnePager')
const isRoadmap = computed(() => props.previewGuide?.format === 'Roadmap')
// Rotierende Kapitel-Akzentfarben (passend zum OnePager-Cheat-Sheet, ohne Rot)
// Rotierende Kapitel-Akzentfarben (ohne Rot)
const CH_COLORS = ['#3b82f6', '#8b5cf6', '#14b8a6', '#f59e0b', '#22c55e', '#6366f1']
// --- Inhalt laden ---
@@ -47,7 +48,7 @@ async function loadContent() {
loadError.value = 'Inhalt nicht verfügbar — die Datei fehlt. Guide neu generieren (▶).'
return
}
if (g.format !== 'OnePager') {
if (g.format !== 'Roadmap') {
try {
lernstand.value = (await fetchBausteinLernstand(g.topic)).bausteine || {}
} catch { /* offline → leer */ }
@@ -68,7 +69,7 @@ function onBausteinStatus(baustein, status) {
const fokusIndex = ref(null) // Index in der flachen Baustein-Liste; null = zu
const fokusTab = ref('pruefung')
const bausteine = computed(() =>
isOnePager.value || !content.value ? [] : content.value.chapters.flatMap((ch) => ch.sections),
isRoadmap.value || !content.value ? [] : content.value.chapters.flatMap((ch) => ch.sections),
)
const fokusBaustein = computed(() => (fokusIndex.value === null ? null : bausteine.value[fokusIndex.value]))
@@ -178,14 +179,18 @@ function extractContext() {
<template>
<div class="detail">
<div v-if="previewGuide && content" ref="scrollEl" class="guide-scroll">
<div class="guide-content" :class="{ onepager: isOnePager }">
<div class="guide-content" :class="{ roadmap: isRoadmap }">
<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] }"
@@ -195,19 +200,17 @@ function extractContext() {
<article
v-for="s in ch.sections"
:key="s.num"
:class="['section-card', isOnePager && s.key ? 'op-card op-' + s.key : '', lernstand[s.title]?.gemeistert ? 'gemeistert' : (lernstand[s.title]?.verstanden ? 'verstanden' : (lernstand[s.title]?.absolviert ? 'absolviert' : ''))]"
:style="isOnePager && s.key ? { gridArea: s.key } : null"
:class="['section-card', lernstand[s.title]?.gemeistert ? 'gemeistert' : (lernstand[s.title]?.verstanden ? 'verstanden' : (lernstand[s.title]?.absolviert ? 'absolviert' : ''))]"
>
<h3 :class="{ 'baustein-klick': !isOnePager }" @click="!isOnePager && openFokus(s, 'pruefung')">
<h3 class="baustein-klick" @click="openFokus(s, 'pruefung')">
{{ s.title }}
<span v-if="lernstand[s.title]?.gemeistert" class="baustein-done gemeistert" title="Gemeistert (25/25)">✓✓✓ Gemeistert</span>
<span v-else-if="lernstand[s.title]?.verstanden" class="baustein-done verstanden" title="Vollständig verstanden (10/10)">✓✓ Verstanden</span>
<span v-else-if="lernstand[s.title]?.absolviert" class="baustein-done" title="Prüfung bestanden">✓ Absolviert</span>
</h3>
<GraphView v-if="!isOnePager && ansichtModus === 'grafik'" :graph="grafiken[s.title] || null" />
<div v-else class="section-body markdown" v-html="renderMarkdown(!isOnePager && ansichtModus === 'kompakt' ? (s.kompakt || s.md) : s.md)"></div>
<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>
<BausteinPanel
v-if="!isOnePager"
mode="trigger"
:baustein="s.title"
:status="lernstand[s.title]"
@@ -394,7 +397,7 @@ function extractContext() {
}
/* Absolvierte Bausteine: Karte kippt sichtbar auf Grün */
.guide-content:not(.onepager) .section-card.absolviert {
.guide-content:not(.roadmap) .section-card.absolviert {
border-color: var(--success-border);
border-top: 3px solid var(--success);
background: color-mix(in srgb, var(--success) 5%, var(--panel));
@@ -406,7 +409,7 @@ function extractContext() {
border-color: #8b5cf6;
color: #6d28d9;
}
.guide-content:not(.onepager) .section-card.verstanden {
.guide-content:not(.roadmap) .section-card.verstanden {
border-color: #8b5cf6;
border-top: 3px solid #8b5cf6;
background: color-mix(in srgb, #8b5cf6 7%, var(--panel));
@@ -418,14 +421,14 @@ function extractContext() {
border-color: #d4af37;
color: #8a6d12;
}
.guide-content:not(.onepager) .section-card.gemeistert {
.guide-content:not(.roadmap) .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 (OnePager hat eigene op-card-Farben) */
.guide-content:not(.onepager) .section-card {
/* Guides: Karten tragen die Kapitel-Akzentfarbe */
.guide-content:not(.roadmap) .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));
}
@@ -442,9 +445,8 @@ function extractContext() {
.section-card h3.baustein-klick { cursor: pointer; width: fit-content; }
.section-card h3.baustein-klick:hover { color: var(--accent); }
/* OnePager: festes 3×3-Raster über volle Breite und Höhe.
Kein Lese-Zoom (bricht 100%-Höhen) — stattdessen sind die Schriften unten 1.2× skaliert. */
.guide-content.onepager {
/* Roadmap: read-only Übersichts-Graph über die volle Fläche, kein Lese-Zoom. */
.guide-content.roadmap {
max-width: none;
height: 100%;
zoom: 1;
@@ -452,96 +454,9 @@ function extractContext() {
display: flex;
flex-direction: column;
}
.guide-content.onepager .guide-head,
.guide-content.onepager .chapter-title {
display: none; /* Thema steht in der Info-Karte — Platz fürs Raster */
}
.guide-content.onepager .chapter {
.guide-content.roadmap .roadmap-view {
flex: 1;
min-height: 0;
margin-bottom: 0;
}
.guide-content.onepager .sections {
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"info beispiel voraussetzungen"
"eigenschaften beispiel modern"
"eigenschaften zusammenhaenge veraltet";
gap: 0.6rem;
}
.guide-content.onepager .section-card {
margin-bottom: 0;
padding: 0.7rem 0.9rem;
min-height: 0;
overflow-y: auto;
h3 {
font-size: 1.06rem;
margin-bottom: 0.3rem;
}
.section-body {
font-size: 0.98rem;
}
}
/* Farbkodiertes Cheat-Sheet: feste Akzentfarbe + Icon pro Karte */
.op-info { --op-accent: #3b82f6; }
.op-eigenschaften { --op-accent: #8b5cf6; --op-icon: "☰"; }
.op-beispiel { --op-accent: #64748b; --op-icon: "❯"; }
.op-zusammenhaenge { --op-accent: #14b8a6; --op-icon: "⇄"; }
.op-voraussetzungen { --op-accent: #f59e0b; --op-icon: "✓"; }
.op-modern { --op-accent: #22c55e; --op-icon: "✦"; }
.op-veraltet { --op-accent: #ef4444; --op-icon: "⚠"; }
.guide-content.onepager .section-card.op-card {
border-top: 3px solid var(--op-accent);
background: color-mix(in srgb, var(--op-accent) 5%, var(--panel));
h3 {
color: var(--op-accent);
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
h3::before {
content: var(--op-icon, "");
margin-right: 7px;
}
}
/* Info-Karte: Thema als große Headline statt Uppercase-Label */
.guide-content.onepager .op-card.op-info h3 {
font-size: 1.5rem;
text-transform: none;
letter-spacing: 0;
color: var(--text);
}
/* Mobil: eine Spalte in Quellreihenfolge (info → … → veraltet) */
@media (max-width: 900px) {
.guide-content.onepager {
height: auto;
}
.guide-content.onepager .sections {
height: auto;
display: flex;
flex-direction: column;
}
.guide-content.onepager .section-card {
overflow-y: visible;
}
}
.empty-preview {
@@ -583,12 +498,6 @@ function extractContext() {
max-width: 70ch;
}
.onepager .section-card .markdown :deep(p),
.onepager .section-card .markdown :deep(ul),
.onepager .section-card .markdown :deep(ol) {
max-width: none; /* OnePager-Zellen sind selbst schmal genug */
}
/* --- Chat --- */
.chat-fab {
position: fixed;