update
This commit is contained in:
Team3
39
frontend/.gitignore
vendored
Normal file
39
frontend/.gitignore
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
|
||||
# Vite
|
||||
*.timestamp-*-*.mjs
|
||||
3
frontend/.vscode/extensions.json
vendored
Normal file
3
frontend/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
38
frontend/README.md
Normal file
38
frontend/README.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# frontend
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Recommended Browser Setup
|
||||
|
||||
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||
- Firefox:
|
||||
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
779
frontend/package-lock.json
generated
779
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -9,6 +9,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"dompurify": "^3.4.7",
|
||||
"marked": "^18.0.4",
|
||||
"vue": "^3.5.32"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
BIN
frontend/public/favicon.ico
Normal file
BIN
frontend/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -1,13 +1,42 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { fetchHealth } from './api.js'
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { fetchGuides, createGuide as apiCreate, deleteGuide, cancelGuide as apiCancel, fetchProjects, deleteProject as apiDeleteProject, fetchProviders } from './api.js'
|
||||
import TopicSidebar from './components/TopicSidebar.vue'
|
||||
import TopicDetail from './components/TopicDetail.vue'
|
||||
|
||||
const backendOk = ref(false)
|
||||
const guides = ref([])
|
||||
const projects = ref([])
|
||||
const manualTopics = ref([])
|
||||
const selectedTopic = ref(null)
|
||||
const previewGuide = ref(null)
|
||||
const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false')
|
||||
const sidebarSticky = ref(false)
|
||||
const darkMode = ref(
|
||||
localStorage.getItem('darkMode') === null
|
||||
? window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
: localStorage.getItem('darkMode') === 'true',
|
||||
)
|
||||
const provider = ref(localStorage.getItem('provider') || 'claude')
|
||||
const providers = ref([])
|
||||
|
||||
function setProvider(id) {
|
||||
provider.value = id
|
||||
localStorage.setItem('provider', id)
|
||||
}
|
||||
|
||||
async function loadProviders() {
|
||||
try {
|
||||
providers.value = await fetchProviders()
|
||||
const current = providers.value.find((p) => p.id === provider.value)
|
||||
if (current && !current.available) {
|
||||
const fallback = providers.value.find((p) => p.available)
|
||||
if (fallback) setProvider(fallback.id)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Laden der Provider:', e)
|
||||
}
|
||||
}
|
||||
let pollTimer = null
|
||||
|
||||
function applyTheme() {
|
||||
document.documentElement.classList.toggle('dark', darkMode.value)
|
||||
@@ -21,49 +50,286 @@ function toggleDark() {
|
||||
|
||||
applyTheme()
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await fetchHealth()
|
||||
backendOk.value = res.ok === true
|
||||
} catch (e) {
|
||||
console.error('Backend nicht erreichbar:', e)
|
||||
function toggleSidebarPin() {
|
||||
sidebarPinned.value = !sidebarPinned.value
|
||||
localStorage.setItem('sidebarPinned', sidebarPinned.value ? 'true' : 'false')
|
||||
if (sidebarPinned.value) sidebarSticky.value = false
|
||||
}
|
||||
|
||||
function clickHoverZone() {
|
||||
sidebarSticky.value = !sidebarSticky.value
|
||||
}
|
||||
|
||||
function onSidebarLeave() {
|
||||
if (!sidebarPinned.value) sidebarSticky.value = false
|
||||
}
|
||||
|
||||
const projectNames = computed(() => projects.value.map((p) => p.name))
|
||||
|
||||
const topics = computed(() => {
|
||||
const isProject = new Set(projectNames.value)
|
||||
const topicDates = {}
|
||||
for (const g of guides.value) {
|
||||
if (isProject.has(g.topic)) continue
|
||||
if (!topicDates[g.topic] || g.created_at > topicDates[g.topic]) {
|
||||
topicDates[g.topic] = g.created_at
|
||||
}
|
||||
}
|
||||
for (const t of manualTopics.value) {
|
||||
if (isProject.has(t)) continue
|
||||
if (!topicDates[t]) topicDates[t] = new Date().toISOString()
|
||||
}
|
||||
return Object.keys(topicDates).sort((a, b) => topicDates[b].localeCompare(topicDates[a]))
|
||||
})
|
||||
|
||||
const doneByFormat = computed(() => {
|
||||
const map = {}
|
||||
for (const g of guides.value) {
|
||||
if (g.topic !== selectedTopic.value) continue
|
||||
if (g.status !== 'done') continue
|
||||
if (!map[g.format] || g.created_at > map[g.format].created_at) {
|
||||
map[g.format] = g
|
||||
}
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
const latestByFormat = computed(() => {
|
||||
const map = {}
|
||||
for (const g of guides.value) {
|
||||
if (g.topic !== selectedTopic.value) continue
|
||||
if (!map[g.format] || g.created_at > map[g.format].created_at) {
|
||||
map[g.format] = g
|
||||
}
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
const hasActiveGuides = computed(() =>
|
||||
guides.value.some((g) => g.status === 'queued' || g.status === 'generating'),
|
||||
)
|
||||
|
||||
async function loadGuides() {
|
||||
try {
|
||||
guides.value = await fetchGuides()
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Laden:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadProjects() {
|
||||
try {
|
||||
projects.value = await fetchProjects()
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Laden der Projekte:', e)
|
||||
}
|
||||
}
|
||||
|
||||
const FORMAT_ORDER = ['OnePager', 'MiniGuide', 'Guide']
|
||||
|
||||
function autoPreview() {
|
||||
const map = doneByFormat.value
|
||||
for (const f of FORMAT_ORDER) {
|
||||
if (map[f]) {
|
||||
previewGuide.value = map[f]
|
||||
return
|
||||
}
|
||||
}
|
||||
previewGuide.value = null
|
||||
}
|
||||
|
||||
function selectTopic(topic) {
|
||||
selectedTopic.value = topic
|
||||
previewGuide.value = null
|
||||
sidebarSticky.value = false
|
||||
nextTick(autoPreview)
|
||||
}
|
||||
|
||||
function createTopic(topic) {
|
||||
if (!manualTopics.value.includes(topic)) {
|
||||
manualTopics.value.push(topic)
|
||||
}
|
||||
selectedTopic.value = topic
|
||||
previewGuide.value = null
|
||||
}
|
||||
|
||||
async function handleFormatClick({ format, instructions }) {
|
||||
if (!selectedTopic.value) return
|
||||
await apiCreate(selectedTopic.value, format, instructions, provider.value)
|
||||
await loadGuides()
|
||||
startPolling()
|
||||
}
|
||||
|
||||
async function handleDeleteProject(name) {
|
||||
await apiDeleteProject(name)
|
||||
if (selectedTopic.value === name) {
|
||||
selectedTopic.value = null
|
||||
previewGuide.value = null
|
||||
}
|
||||
await loadProjects()
|
||||
}
|
||||
|
||||
function handlePreview(guide) {
|
||||
previewGuide.value = guide
|
||||
}
|
||||
|
||||
async function handleDeleteGuide(guideId) {
|
||||
await deleteGuide(guideId)
|
||||
if (previewGuide.value?.id === guideId) {
|
||||
previewGuide.value = null
|
||||
}
|
||||
await loadGuides()
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
stopPolling()
|
||||
pollTimer = setInterval(async () => {
|
||||
await loadGuides()
|
||||
if (!hasActiveGuides.value) stopPolling()
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel(guideId) {
|
||||
await apiCancel(guideId)
|
||||
await loadGuides()
|
||||
}
|
||||
|
||||
async function handleDeleteTopic(topic) {
|
||||
const topicGuides = guides.value.filter((g) => g.topic === topic)
|
||||
for (const g of topicGuides) {
|
||||
await deleteGuide(g.id)
|
||||
}
|
||||
manualTopics.value = manualTopics.value.filter((t) => t !== topic)
|
||||
if (selectedTopic.value === topic) {
|
||||
selectedTopic.value = null
|
||||
previewGuide.value = null
|
||||
}
|
||||
await loadGuides()
|
||||
}
|
||||
|
||||
function onVisibility() {
|
||||
if (document.hidden) {
|
||||
stopPolling()
|
||||
} else {
|
||||
loadGuides()
|
||||
if (hasActiveGuides.value) startPolling()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadGuides(), loadProjects(), loadProviders()])
|
||||
if (!selectedTopic.value && topics.value.length) {
|
||||
selectTopic(topics.value[0])
|
||||
}
|
||||
document.addEventListener('visibilitychange', onVisibility)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling()
|
||||
document.removeEventListener('visibilitychange', onVisibility)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<header class="topbar">
|
||||
<h1>Creator</h1>
|
||||
<button class="theme-toggle" @click="toggleDark">{{ darkMode ? '☀' : '☾' }}</button>
|
||||
</header>
|
||||
<main class="main">
|
||||
<p>Backend: <span :class="backendOk ? 'ok' : 'err'">{{ backendOk ? 'verbunden' : 'nicht erreichbar' }}</span></p>
|
||||
</main>
|
||||
<div class="layout" :class="{ 'sidebar-floating': !sidebarPinned, 'sidebar-open': sidebarSticky }">
|
||||
<div v-if="!sidebarPinned" class="hover-zone" @click="clickHoverZone"></div>
|
||||
<div v-if="!sidebarPinned && sidebarSticky" class="sidebar-backdrop" @click="sidebarSticky = false"></div>
|
||||
<TopicSidebar
|
||||
:topics="topics"
|
||||
:projects="projectNames"
|
||||
:selectedTopic="selectedTopic"
|
||||
:doneByFormat="doneByFormat"
|
||||
:latestByFormat="latestByFormat"
|
||||
:allGuides="guides"
|
||||
:pinned="sidebarPinned"
|
||||
:dark="darkMode"
|
||||
:provider="provider"
|
||||
:providers="providers"
|
||||
@setProvider="setProvider"
|
||||
@toggleDark="toggleDark"
|
||||
@select="selectTopic"
|
||||
@create="createTopic"
|
||||
@formatClick="handleFormatClick"
|
||||
@deleteTopic="handleDeleteTopic"
|
||||
@deleteProject="handleDeleteProject"
|
||||
@cancelGuide="handleCancel"
|
||||
@deleteGuide="handleDeleteGuide"
|
||||
@preview="handlePreview"
|
||||
@togglePin="toggleSidebarPin"
|
||||
@sidebarLeave="onSidebarLeave"
|
||||
/>
|
||||
<TopicDetail
|
||||
v-if="selectedTopic"
|
||||
:previewGuide="previewGuide"
|
||||
:dark="darkMode"
|
||||
:provider="provider"
|
||||
/>
|
||||
<div v-else class="empty-main">
|
||||
<p>Thema in der Sidebar anlegen oder auswählen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f8f9fb;
|
||||
--bg-preview: #f0f1f4;
|
||||
--panel: #ffffff;
|
||||
--panel-soft: #f4f5f7;
|
||||
--border: #e2e5e9;
|
||||
--border-strong: #d8dde3;
|
||||
--text: #1a1a1a;
|
||||
--text-muted: #4b5563;
|
||||
--text-faint: #9ca3af;
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #4f46e5;
|
||||
--accent-soft: #ede9fe;
|
||||
--accent-border: #a5b4fc;
|
||||
--on-accent: #ffffff;
|
||||
--success: #065f46;
|
||||
--success-soft: #d1fae5;
|
||||
--success-soft-hover: #a7f3d0;
|
||||
--success-border: #34d399;
|
||||
--warning: #92400e;
|
||||
--warning-soft: #fef3c7;
|
||||
--warning-border: #fbbf24;
|
||||
--danger: #991b1b;
|
||||
--code-bg: #1e2a3a;
|
||||
--code-fg: #e6e6e6;
|
||||
--shadow: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bg: #15171c;
|
||||
--bg-preview: #0e1014;
|
||||
--panel: #1c1f26;
|
||||
--panel-soft: #23262e;
|
||||
--border: #2c3038;
|
||||
--border-strong: #3a3f4a;
|
||||
--text: #e6e8ee;
|
||||
--text-muted: #9aa3b2;
|
||||
--text-faint: #6b7280;
|
||||
--accent: #6366f1;
|
||||
--accent-hover: #818cf8;
|
||||
--accent-soft: #2a2350;
|
||||
--accent-border: #4f46e5;
|
||||
--on-accent: #ffffff;
|
||||
--success: #34d399;
|
||||
--success-soft: #0f3a2e;
|
||||
--success-soft-hover: #155e45;
|
||||
--success-border: #0f805e;
|
||||
--warning: #fbbf24;
|
||||
--warning-soft: #3a2c0a;
|
||||
--warning-border: #a06a12;
|
||||
--danger: #f87171;
|
||||
--shadow: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -78,50 +344,66 @@ body {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
.hover-zone {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 100vh;
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Unsichtbare Fläche hinter der offenen Floating-Sidebar.
|
||||
Tipp/Klick daneben schließt sie — ohne sie gibt es auf Touch keinen Ausweg. */
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.layout.sidebar-floating > .sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 16px var(--shadow);
|
||||
}
|
||||
|
||||
.layout.sidebar-floating .hover-zone:hover ~ .sidebar,
|
||||
.layout.sidebar-floating > .sidebar:hover,
|
||||
.layout.sidebar-floating.sidebar-open > .sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.empty-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 1.25rem;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
|
||||
.ok {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.err {
|
||||
color: var(--danger);
|
||||
}
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,64 @@
|
||||
const BASE = '/api'
|
||||
|
||||
export async function fetchHealth() {
|
||||
const res = await fetch(`${BASE}/health`)
|
||||
export async function fetchGuides() {
|
||||
const res = await fetch(`${BASE}/guides`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function createGuide(topic, format, instructions = '', provider = 'claude') {
|
||||
const res = await fetch(`${BASE}/guides`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ topic, format, instructions, provider }),
|
||||
})
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchProviders() {
|
||||
const res = await fetch(`${BASE}/providers`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function fetchProjects() {
|
||||
const res = await fetch(`${BASE}/projects`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function deleteProject(name) {
|
||||
await fetch(`${BASE}/projects/${encodeURIComponent(name)}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
export async function cancelGuide(id) {
|
||||
await fetch(`${BASE}/guides/${id}/cancel`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export async function deleteGuide(id) {
|
||||
await fetch(`${BASE}/guides/${id}`, { method: 'DELETE' })
|
||||
}
|
||||
|
||||
export function htmlUrl(id) {
|
||||
return `${BASE}/guides/${id}/html`
|
||||
}
|
||||
|
||||
export async function fetchProgress(id) {
|
||||
const res = await fetch(`${BASE}/guides/${id}/progress`)
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function setProgress(id, chapter, done) {
|
||||
const res = await fetch(`${BASE}/guides/${id}/progress`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ chapter, done }),
|
||||
})
|
||||
return res.json()
|
||||
}
|
||||
|
||||
export async function chatGuide(id, { section, outline, messages, provider = 'claude' }) {
|
||||
const res = await fetch(`${BASE}/guides/${id}/chat`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ section, outline, messages, provider }),
|
||||
})
|
||||
return res.json()
|
||||
}
|
||||
|
||||
637
frontend/src/components/TopicDetail.vue
Normal file
637
frontend/src/components/TopicDetail.vue
Normal file
@@ -0,0 +1,637 @@
|
||||
<script setup>
|
||||
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'
|
||||
|
||||
marked.setOptions({ breaks: true, gfm: true })
|
||||
|
||||
function renderMarkdown(text) {
|
||||
return DOMPurify.sanitize(marked.parse(text || ''))
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
previewGuide: { type: Object, default: null },
|
||||
dark: { type: Boolean, default: false },
|
||||
provider: { type: String, default: 'claude' },
|
||||
})
|
||||
|
||||
const LANDSCAPE_FORMATS = ['OnePager']
|
||||
const isLandscape = computed(() => LANDSCAPE_FORMATS.includes(props.previewGuide?.format))
|
||||
|
||||
const frameEl = ref(null)
|
||||
|
||||
// --- 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()
|
||||
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' })
|
||||
}
|
||||
}
|
||||
|
||||
// --- Chat ---
|
||||
const chatOpen = ref(false)
|
||||
const messages = ref([])
|
||||
const input = ref('')
|
||||
const loading = ref(false)
|
||||
const messagesEl = ref(null)
|
||||
const inputEl = ref(null)
|
||||
const panelEl = ref(null)
|
||||
|
||||
function openChat() {
|
||||
chatOpen.value = true
|
||||
nextTick(() => inputEl.value?.focus())
|
||||
}
|
||||
|
||||
function closeChat() {
|
||||
chatOpen.value = false
|
||||
messages.value = []
|
||||
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
|
||||
closeChat()
|
||||
}
|
||||
|
||||
// Enter öffnet den Chat (wenn zu, nicht in Eingabefeld); ESC schließt ihn
|
||||
function onDocKeyDown(e) {
|
||||
if (e.key === 'Escape' && chatOpen.value) {
|
||||
e.preventDefault()
|
||||
closeChat()
|
||||
return
|
||||
}
|
||||
if (e.key !== 'Enter' || chatOpen.value || !props.previewGuide) return
|
||||
const tag = document.activeElement?.tagName
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA') return
|
||||
e.preventDefault()
|
||||
openChat()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousedown', onDocMouseDown, true)
|
||||
document.addEventListener('keydown', onDocKeyDown)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', onDocMouseDown, true)
|
||||
document.removeEventListener('keydown', onDocKeyDown)
|
||||
})
|
||||
|
||||
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: '' }
|
||||
|
||||
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: '' }
|
||||
}
|
||||
}
|
||||
|
||||
async function scrollToBottom() {
|
||||
await nextTick()
|
||||
if (messagesEl.value) messagesEl.value.scrollTop = messagesEl.value.scrollHeight
|
||||
}
|
||||
|
||||
async function send() {
|
||||
const text = input.value.trim()
|
||||
if (!text || loading.value || !props.previewGuide) return
|
||||
messages.value.push({ role: 'user', content: text })
|
||||
input.value = ''
|
||||
loading.value = true
|
||||
scrollToBottom()
|
||||
try {
|
||||
const { section, outline } = extractContext()
|
||||
const res = await chatGuide(props.previewGuide.id, {
|
||||
section,
|
||||
outline,
|
||||
messages: messages.value,
|
||||
provider: props.provider,
|
||||
})
|
||||
messages.value.push({ role: 'assistant', content: res.reply || '…' })
|
||||
} catch {
|
||||
messages.value.push({ role: 'assistant', content: 'Fehler bei der Anfrage.' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
scrollToBottom()
|
||||
nextTick(() => inputEl.value?.focus())
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="empty-preview" v-else>
|
||||
<p>Guide-Format anklicken um zu generieren oder Vorschau zu öffnen.</p>
|
||||
</div>
|
||||
|
||||
<button v-if="previewGuide && !chatOpen" class="chat-fab" title="Fragen zum Guide" @click="openChat">💬</button>
|
||||
|
||||
<div v-if="previewGuide && chatOpen" ref="panelEl" class="chat-panel">
|
||||
<header class="chat-header">
|
||||
<span>Fragen zum Guide</span>
|
||||
<button class="chat-close" title="Chat beenden" @click="closeChat">×</button>
|
||||
</header>
|
||||
<div ref="messagesEl" class="chat-messages">
|
||||
<p v-if="!messages.length" class="chat-hint">Stell eine Frage zum aktuellen Abschnitt.</p>
|
||||
<template v-for="(m, i) in messages" :key="i">
|
||||
<div v-if="m.role === 'assistant'" class="chat-msg assistant markdown" v-html="renderMarkdown(m.content)"></div>
|
||||
<div v-else class="chat-msg user">{{ m.content }}</div>
|
||||
</template>
|
||||
<div v-if="loading" class="chat-msg assistant chat-typing">Denkt…</div>
|
||||
</div>
|
||||
<div class="chat-input">
|
||||
<textarea
|
||||
ref="inputEl"
|
||||
v-model="input"
|
||||
placeholder="Frage stellen…"
|
||||
@keydown.enter.exact.prevent="send"
|
||||
></textarea>
|
||||
<button :disabled="!input.trim() || loading" @click="send">➤</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail {
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.preview {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: var(--bg-preview);
|
||||
}
|
||||
|
||||
.preview.landscape {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.preview-link {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.preview-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.preview-frame {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: var(--bg-preview);
|
||||
}
|
||||
|
||||
.preview-frame.landscape {
|
||||
max-width: 1180px;
|
||||
box-shadow: 0 1px 8px var(--shadow);
|
||||
}
|
||||
|
||||
.empty-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.chat-fab {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 12px var(--shadow);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.chat-fab:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
width: 360px;
|
||||
height: 500px;
|
||||
max-height: calc(100vh - 3rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px var(--shadow);
|
||||
z-index: 20;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 0.9rem;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chat-close {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--on-accent);
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.9rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chat-hint {
|
||||
color: var(--text-faint);
|
||||
font-size: 0.82rem;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.chat-msg {
|
||||
max-width: 85%;
|
||||
padding: 7px 11px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.chat-msg.user {
|
||||
align-self: flex-end;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-msg.assistant {
|
||||
align-self: flex-start;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text);
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 0.6rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.chat-input textarea {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
height: 38px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.chat-input textarea:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.chat-input button {
|
||||
width: 38px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.chat-input button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
574
frontend/src/components/TopicSidebar.vue
Normal file
574
frontend/src/components/TopicSidebar.vue
Normal file
@@ -0,0 +1,574 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
topics: { type: Array, required: true },
|
||||
projects: { type: Array, default: () => [] },
|
||||
selectedTopic: { type: String, default: null },
|
||||
doneByFormat: { type: Object, default: () => ({}) },
|
||||
latestByFormat: { type: Object, default: () => ({}) },
|
||||
allGuides: { type: Array, default: () => [] },
|
||||
pinned: { type: Boolean, default: true },
|
||||
dark: { type: Boolean, default: false },
|
||||
provider: { type: String, default: 'claude' },
|
||||
providers: { type: Array, default: () => [] },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'deleteProject', 'cancelGuide', 'deleteGuide', 'preview', 'togglePin', 'sidebarLeave', 'toggleDark', 'setProvider'])
|
||||
|
||||
function providerAvailable(id) {
|
||||
const p = props.providers.find((x) => x.id === id)
|
||||
return p ? p.available : true
|
||||
}
|
||||
|
||||
const PROVIDER_LABELS = { claude: 'Claude', minimax: 'MiniMax' }
|
||||
|
||||
const formats = [
|
||||
{ key: 'OnePager', label: 'OnePager' },
|
||||
{ key: 'MiniGuide', label: 'MiniGuide' },
|
||||
{ key: 'Guide', label: 'Guide' },
|
||||
]
|
||||
|
||||
const activeGenerations = computed(() => {
|
||||
return props.allGuides
|
||||
.filter((g) => g.status === 'generating' || g.status === 'queued')
|
||||
.map((g) => `${g.topic} – ${g.format}: ${g.progress || 'Wartend…'}`)
|
||||
})
|
||||
|
||||
function guideStatus(format) {
|
||||
if (props.doneByFormat[format]) return 'done'
|
||||
const latest = props.latestByFormat[format]
|
||||
if (!latest) return 'none'
|
||||
if (latest.status === 'error') return 'none'
|
||||
return latest.status
|
||||
}
|
||||
|
||||
function errorMsg(format) {
|
||||
const latest = props.latestByFormat[format]
|
||||
if (latest?.status === 'error') return latest.error_msg || 'Fehler bei der Generierung'
|
||||
return ''
|
||||
}
|
||||
|
||||
function handleFormatClick(format) {
|
||||
const guide = props.doneByFormat[format]
|
||||
if (guide) {
|
||||
emit('preview', guide)
|
||||
}
|
||||
}
|
||||
|
||||
const activeInput = ref(null)
|
||||
const inputText = ref('')
|
||||
|
||||
function toggleInput(format) {
|
||||
if (activeInput.value === format) {
|
||||
activeInput.value = null
|
||||
inputText.value = ''
|
||||
} else {
|
||||
activeInput.value = format
|
||||
inputText.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function handlePlay(format) {
|
||||
const text = activeInput.value === format ? inputText.value.trim() : ''
|
||||
emit('formatClick', { format, instructions: text })
|
||||
activeInput.value = null
|
||||
inputText.value = ''
|
||||
}
|
||||
|
||||
function dismissError(format) {
|
||||
const latest = props.latestByFormat[format]
|
||||
if (latest?.status === 'error') {
|
||||
emit('deleteGuide', latest.id)
|
||||
}
|
||||
}
|
||||
|
||||
function handleDelete(format) {
|
||||
const guide = props.latestByFormat[format]
|
||||
if (!guide) return
|
||||
if (guide.status === 'generating' || guide.status === 'queued') {
|
||||
if (!confirm('Generierung abbrechen?')) return
|
||||
emit('cancelGuide', guide.id)
|
||||
} else {
|
||||
if (!confirm('Guide löschen?')) return
|
||||
emit('deleteGuide', guide.id)
|
||||
}
|
||||
}
|
||||
|
||||
const newTopic = ref('')
|
||||
|
||||
function submit() {
|
||||
const t = newTopic.value.trim()
|
||||
if (!t) return
|
||||
emit('create', t)
|
||||
newTopic.value = ''
|
||||
}
|
||||
|
||||
function confirmDeleteTopic(topic) {
|
||||
if (!confirm(`Thema "${topic}" und alle zugehörigen Guides löschen?`)) return
|
||||
emit('deleteTopic', topic)
|
||||
}
|
||||
|
||||
function confirmDeleteProject(name) {
|
||||
if (!confirm(`Projekt "${name}" entfernen?\n\nAchtung: Der Quellordner ./projects/${name} wird gelöscht.`)) return
|
||||
emit('deleteProject', name)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar" @mouseleave="emit('sidebarLeave')">
|
||||
<div class="new-topic">
|
||||
<button
|
||||
class="pin-btn"
|
||||
:title="pinned ? 'Sidebar ausblenden' : 'Sidebar fixieren'"
|
||||
@click="emit('togglePin')"
|
||||
>{{ pinned ? '⇤' : '⇥' }}</button>
|
||||
<button
|
||||
class="theme-btn"
|
||||
:title="dark ? 'Hellmodus' : 'Dunkelmodus'"
|
||||
@click="emit('toggleDark')"
|
||||
>{{ dark ? '☀' : '🌙' }}</button>
|
||||
<input
|
||||
v-model="newTopic"
|
||||
placeholder="Neues Thema…"
|
||||
@keyup.enter="submit"
|
||||
/>
|
||||
<button @click="submit" :disabled="!newTopic.trim()">+</button>
|
||||
</div>
|
||||
<div class="provider-toggle" v-if="providers.length">
|
||||
<button
|
||||
v-for="p in providers"
|
||||
:key="p.id"
|
||||
:class="{ active: p.id === provider }"
|
||||
:disabled="!p.available"
|
||||
:title="p.available ? '' : 'Nicht konfiguriert (CLI/Key fehlt)'"
|
||||
@click="emit('setProvider', p.id)"
|
||||
>{{ PROVIDER_LABELS[p.id] || p.id }}</button>
|
||||
</div>
|
||||
<div class="format-section" v-if="selectedTopic">
|
||||
<div class="progress-info" v-if="activeGenerations.length">
|
||||
<div v-for="(line, i) in activeGenerations" :key="i">{{ line }}</div>
|
||||
</div>
|
||||
<div v-for="f in formats" :key="f.key">
|
||||
<div :class="['format-row', 'fmt-' + guideStatus(f.key)]">
|
||||
<button class="format-name" @click="handleFormatClick(f.key)">
|
||||
<span class="format-label">{{ f.label }}</span>
|
||||
<span
|
||||
v-if="guideStatus(f.key) !== 'none'"
|
||||
class="format-x"
|
||||
@click.stop="handleDelete(f.key)"
|
||||
:title="guideStatus(f.key) === 'generating' || guideStatus(f.key) === 'queued' ? 'Abbrechen' : 'Löschen'"
|
||||
>×</span>
|
||||
</button>
|
||||
<div class="format-actions">
|
||||
<template v-if="guideStatus(f.key) !== 'generating' && guideStatus(f.key) !== 'queued'">
|
||||
<button class="action-btn play" title="Generieren" @click="handlePlay(f.key)">▶</button>
|
||||
<button
|
||||
class="action-btn pencil"
|
||||
:class="{ active: activeInput === f.key }"
|
||||
title="Anweisungen"
|
||||
@click="toggleInput(f.key)"
|
||||
>✎</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="errorMsg(f.key)" class="format-error">
|
||||
<span class="format-error-text">{{ errorMsg(f.key) }}</span>
|
||||
<button class="format-error-x" title="Fehler entfernen" @click="dismissError(f.key)">×</button>
|
||||
</div>
|
||||
<div v-if="activeInput === f.key" class="format-input">
|
||||
<input
|
||||
v-model="inputText"
|
||||
placeholder="Anweisungen (optional)…"
|
||||
@keyup.enter="handlePlay(f.key)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="topic-list">
|
||||
<li
|
||||
v-for="t in topics"
|
||||
:key="t"
|
||||
:class="{ active: t === selectedTopic }"
|
||||
@click="emit('select', t)"
|
||||
>
|
||||
<span>{{ t }}</span>
|
||||
<button class="delete-topic" @click.stop="confirmDeleteTopic(t)" title="Löschen">×</button>
|
||||
</li>
|
||||
<template v-if="projects.length">
|
||||
<li class="projects-divider">Projekte</li>
|
||||
<li
|
||||
v-for="p in projects"
|
||||
:key="'project-' + p"
|
||||
:class="{ active: p === selectedTopic, 'project-item': true }"
|
||||
@click="emit('select', p)"
|
||||
>
|
||||
<span>{{ p }}</span>
|
||||
<button class="delete-topic" @click.stop="confirmDeleteProject(p)" title="Projekt entfernen">×</button>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
background: var(--panel);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.new-topic {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.new-topic input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.new-topic input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.new-topic button {
|
||||
padding: 6px 10px;
|
||||
border: none;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.new-topic button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.new-topic .pin-btn {
|
||||
background: var(--bg);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-strong);
|
||||
font-weight: 600;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.new-topic .pin-btn:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-hover);
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
|
||||
.new-topic .theme-btn {
|
||||
background: var(--bg);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-strong);
|
||||
font-weight: 600;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.new-topic .theme-btn:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-hover);
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
|
||||
.provider-toggle {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: 0.5rem 0.75rem 0;
|
||||
}
|
||||
|
||||
.provider-toggle button {
|
||||
flex: 1;
|
||||
padding: 5px 8px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border-strong);
|
||||
background: var(--bg);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.provider-toggle button:first-child {
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.provider-toggle button:last-child {
|
||||
border-radius: 0 6px 6px 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.provider-toggle button.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--on-accent);
|
||||
}
|
||||
|
||||
.provider-toggle button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.topic-list li {
|
||||
padding: 0.6rem 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text);
|
||||
transition: background 0.15s;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.topic-list li:hover {
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
.topic-list li.active {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-hover);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delete-topic {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger);
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.topic-list li:hover .delete-topic {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.projects-divider {
|
||||
cursor: default;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-faint);
|
||||
font-weight: 700;
|
||||
padding: 0.6rem 1rem 0.3rem;
|
||||
margin-top: 0.4rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.projects-divider:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.topic-list li.project-item span::before {
|
||||
content: '📁 ';
|
||||
}
|
||||
|
||||
/* Format section */
|
||||
.format-section {
|
||||
flex-shrink: 0;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--warning);
|
||||
background: var(--warning-soft);
|
||||
margin-bottom: 0.25rem;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.format-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.75rem;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.format-row:hover {
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.format-name {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
font-size: 0.85rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
color: var(--text-faint);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.format-x {
|
||||
display: none;
|
||||
color: var(--danger);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.format-name:hover .format-x {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.fmt-done .format-name {
|
||||
color: var(--success);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
background: var(--success-soft);
|
||||
border: 1px solid var(--success-border);
|
||||
}
|
||||
|
||||
.fmt-done .format-name:hover {
|
||||
background: var(--success-soft-hover);
|
||||
}
|
||||
|
||||
.fmt-generating .format-name,
|
||||
.fmt-queued .format-name {
|
||||
color: var(--warning);
|
||||
background: var(--warning-soft);
|
||||
border: 1px solid var(--warning-border);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.format-error {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
padding: 2px 0.75rem 6px calc(0.75rem + 8px);
|
||||
font-size: 0.72rem;
|
||||
color: var(--danger);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.format-error-text {
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.format-error-x {
|
||||
flex: 0 0 auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.format-error-x:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.format-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.action-btn.play {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.action-btn.play:hover {
|
||||
background: var(--success-soft);
|
||||
border-color: var(--success-border);
|
||||
}
|
||||
|
||||
.action-btn.pencil {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.action-btn.pencil:hover,
|
||||
.action-btn.pencil.active {
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
|
||||
.format-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 0.75rem 8px;
|
||||
}
|
||||
|
||||
.format-input input {
|
||||
flex: 1;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.format-input input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn:disabled:hover {
|
||||
background: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.65; }
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user