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-14 22:43:54 +02:00
parent 6e5d673ca7
commit 08dd0ccd69
6 changed files with 107 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,15 +9,17 @@ const props = defineProps({
baustein: { type: String, required: true },
section: { type: String, default: '' },
provider: { type: String, default: 'claude' },
status: { type: Object, default: null }, // {gute_antworten, absolviert, verstanden, vertiefung}
tier2: { type: Boolean, default: false }, // Mastery frei (ganzer Guide absolviert)
status: { type: Object, default: null }, // {gute_antworten, absolviert, verstanden, gemeistert, vertiefung}
tier2: { type: Boolean, default: false }, // Tier 2 frei (ganzer Guide absolviert)
tier3: { type: Boolean, default: false }, // Meisterpfad frei (ganzer Guide verstanden)
})
const emit = defineEmits(['statusChanged'])
const NOETIG = 3 // absolviert
const MAX = 10 // verstanden
const st = computed(() => props.status || { gute_antworten: 0, absolviert: false, verstanden: false, vertiefung: false, deepdive: false })
const NOETIG = 3 // absolviert
const MAX = 10 // verstanden
const MEISTERN = 25 // gemeistert (Maximum)
const st = computed(() => props.status || { gute_antworten: 0, absolviert: false, verstanden: false, gemeistert: false, vertiefung: false, deepdive: false })
// --- Toggle-Bereich ---
const activeTab = ref(null) // null | 'vertiefung' | 'deepdive' | 'chat' | 'pruefung'
@@ -88,7 +90,7 @@ function onPruefScroll() {
}
function applyPruefung(res) {
emit('statusChanged', { ...st.value, gute_antworten: res.gute_antworten, absolviert: res.absolviert, verstanden: res.verstanden })
emit('statusChanged', { ...st.value, gute_antworten: res.gute_antworten, absolviert: res.absolviert, verstanden: res.verstanden, gemeistert: res.gemeistert })
}
async function pruefScroll() {
@@ -158,12 +160,12 @@ function antwortAbgeben() {
if (!text || pruefLoading.value) return
pruefMessages.value.push({ role: 'user', kind: 'antwort', content: text })
pruefInput.value = ''
pruefSenden({ aktion: 'antwort', frage: aktuelleFrage.value, score_vor_frage: scoreVorFrage.value, tier2: props.tier2 }, bewerten)
pruefSenden({ aktion: 'antwort', frage: aktuelleFrage.value, score_vor_frage: scoreVorFrage.value, tier2: props.tier2, tier3: props.tier3 }, bewerten)
}
function neuBewerten() {
if (pruefLoading.value) return
pruefSenden({ aktion: 'antwort', frage: aktuelleFrage.value, score_vor_frage: scoreVorFrage.value, tier2: props.tier2 }, bewerten)
pruefSenden({ aktion: 'antwort', frage: aktuelleFrage.value, score_vor_frage: scoreVorFrage.value, tier2: props.tier2, tier3: props.tier3 }, bewerten)
}
</script>
@@ -181,7 +183,9 @@ function neuBewerten() {
</button>
<button :class="{ active: activeTab === 'pruefung' }" @click="toggle('pruefung')">
Prüfung
<span v-if="st.verstanden" class="bp-chip gold" title="Verstanden (10/10)">✓✓</span>
<span v-if="st.gemeistert" class="bp-chip gold" title="Gemeistert (25/25)">✓✓✓ Max</span>
<span v-else-if="st.verstanden && tier3" class="bp-chip lila" title="Meisterpfad">✓✓ {{ st.gute_antworten }}/{{ MEISTERN }}</span>
<span v-else-if="st.verstanden" class="bp-chip lila" title="Verstanden (10/10)">✓✓</span>
<span v-else-if="st.absolviert && tier2" class="bp-chip done">✓ {{ st.gute_antworten }}/{{ MAX }}</span>
<span v-else-if="st.absolviert" class="bp-chip done">✓</span>
<span v-else-if="st.gute_antworten" class="bp-chip">{{ Math.min(st.gute_antworten, NOETIG) }}/{{ NOETIG }}</span>
@@ -232,7 +236,9 @@ function neuBewerten() {
<!-- Prüfung: gesteuerter Dialog -->
<div v-else>
<p class="bp-hint">
<template v-if="st.verstanden">✓✓ Verstanden ({{ st.gute_antworten }}/{{ MAX }}) — Gold bleibt dir.</template>
<template v-if="st.gemeistert">✓✓✓ Gemeistert ({{ MEISTERN }}/{{ MEISTERN }}) — Max. Du kannst dich weiter prüfen, ohne Punkte.</template>
<template v-else-if="st.verstanden && tier3">Meisterpfad: {{ st.gute_antworten }}/{{ MEISTERN }}. Richtig = +1, falsch = −2 (nicht unter {{ MAX }}). Bei {{ MEISTERN }} gemeistert.</template>
<template v-else-if="st.verstanden">✓✓ Verstanden. Der Meisterpfad ({{ MAX }}→{{ MEISTERN }}) öffnet, sobald der ganze Guide verstanden ist.</template>
<template v-else-if="st.absolviert && tier2">Mastery: {{ st.gute_antworten }}/{{ MAX }}. Richtig = +1, falsch = −1 (nicht unter {{ NOETIG }}). Bei {{ MAX }} verstanden.</template>
<template v-else-if="st.absolviert">✓ Absolviert. Mehr ({{ NOETIG }}→{{ MAX }}) gibt's, sobald der ganze Guide absolviert ist.</template>
<template v-else>{{ Math.min(st.gute_antworten, NOETIG) }}/{{ NOETIG }} guten Antworten. Frag nach, wenn etwas unklar ist — diskutieren ist erlaubt.</template>
@@ -306,6 +312,7 @@ function neuBewerten() {
color: var(--text-muted);
}
.bp-chip.done { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.bp-chip.lila { background: color-mix(in srgb, #8b5cf6 16%, var(--panel)); border-color: #8b5cf6; color: #6d28d9; }
.bp-chip.gold { background: color-mix(in srgb, #d4af37 20%, var(--panel)); border-color: #d4af37; color: #8a6d12; }
.bp-panel {

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

@@ -55,11 +55,16 @@ function onBausteinStatus(baustein, status) {
if (status.absolviert && !warAbsolviert) emit('progressChanged') // Locks/Stats neu laden
}
// Tier 2 (Mastery, Score 3→10) ist frei, sobald ALLE Bausteine des Guides absolviert sind.
// Tier 2 (Score 3→10) frei, sobald ALLE Bausteine absolviert; Tier 3 (Meisterpfad 10→25) frei, sobald ALLE verstanden.
const guideSections = computed(() => (content.value?.chapters || []).flatMap((ch) => ch.sections))
const guideAbsolviert = computed(() => {
const secs = (content.value?.chapters || []).flatMap((ch) => ch.sections)
const secs = guideSections.value
return secs.length > 0 && secs.every((s) => lernstand.value[s.title]?.absolviert)
})
const guideVerstanden = computed(() => {
const secs = guideSections.value
return secs.length > 0 && secs.every((s) => lernstand.value[s.title]?.verstanden)
})
// --- Chat (Mechanik in useChat; Kontext-Extraktion bleibt hier) ---
const chat = useChat((msgs) => {
@@ -159,12 +164,13 @@ 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]?.verstanden ? 'verstanden' : (lernstand[s.title]?.absolviert ? 'absolviert' : '')]"
: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"
>
<h3>
{{ s.title }}
<span v-if="lernstand[s.title]?.verstanden" class="baustein-done verstanden" title="Vollständig verstanden (10/10)">✓✓ Verstanden</span>
<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>
<div class="section-body markdown" v-html="renderMarkdown(s.md)"></div>
@@ -176,6 +182,7 @@ function extractContext() {
:provider="provider"
:status="lernstand[s.title]"
:tier2="guideAbsolviert"
:tier3="guideVerstanden"
@status-changed="(st) => onBausteinStatus(s.title, st)"
/>
</article>
@@ -333,16 +340,28 @@ function extractContext() {
background: color-mix(in srgb, var(--success) 5%, var(--panel));
}
/* Verstandene Bausteine (Mastery 10/10): Gold */
/* Verstandene Bausteine (10/10): Lila */
.baustein-done.verstanden {
background: color-mix(in srgb, #d4af37 18%, var(--panel));
background: color-mix(in srgb, #8b5cf6 16%, var(--panel));
border-color: #8b5cf6;
color: #6d28d9;
}
.guide-content:not(.onepager) .section-card.verstanden {
border-color: #8b5cf6;
border-top: 3px solid #8b5cf6;
background: color-mix(in srgb, #8b5cf6 7%, var(--panel));
}
/* Gemeisterte Bausteine (Meisterpfad 25/25): Gold */
.baustein-done.gemeistert {
background: color-mix(in srgb, #d4af37 20%, var(--panel));
border-color: #d4af37;
color: #8a6d12;
}
.guide-content:not(.onepager) .section-card.verstanden {
.guide-content:not(.onepager) .section-card.gemeistert {
border-color: #d4af37;
border-top: 3px solid #d4af37;
background: color-mix(in srgb, #d4af37 7%, var(--panel));
background: color-mix(in srgb, #d4af37 8%, var(--panel));
}
/* Guides: Karten tragen die Kapitel-Akzentfarbe (OnePager hat eigene op-card-Farben) */