short-drama-agent-front/src/App.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import {
    Clapperboard,
    Camera,
    Images,
    Palette,
    Fingerprint,
    FolderOpen,
    FileText,
    Layers,
    PanelLeftClose,
    PanelLeftOpen,
    Settings2
} from '@lucide/vue'
import { DialogTrigger } from 'reka-ui'
import { AppDialog } from './components/ui'

/** 应用框架只承载导航与连接说明，不混入 graph 业务。 */
const route = useRoute()
const collapsed = ref(false)
const settingsOpen = ref(false)
const projectId = computed(() => (route.params.projectId ? String(route.params.projectId) : ''))
const apiBase = import.meta.env.VITE_API_BASE_URL || '/api'
</script>

<template>
    <div class="app-shell" :class="{ 'sidebar-collapsed': collapsed }">
        <a href="#main-content" class="skip-link">跳到主要内容</a>
        <aside class="sidebar">
            <RouterLink to="/projects" class="brand"
                ><span class="brand-mark"><Clapperboard :size="21" :stroke-width="1.5" /></span
                ><span class="sidebar-label"
                    ><strong>短剧工作台</strong><small>SHORT DRAMA STUDIO</small></span
                ></RouterLink
            >
            <div class="sidebar-section-label sidebar-label">工作空间</div>
            <nav aria-label="主导航">
                <RouterLink to="/projects" class="side-link" :class="{ selected: !projectId }" title="我的剧本"
                    ><FolderOpen :size="18" /><span class="sidebar-label">我的剧本</span></RouterLink
                >
            </nav>
            <template v-if="projectId"
                ><div class="sidebar-section-label sidebar-label mt-8">当前项目</div>
                <nav aria-label="工作流导航">
                    <RouterLink
                        :to="`/projects/${projectId}/create-drama`"
                        class="side-link"
                        active-class="selected"
                        title="剧本创作"
                        ><FileText :size="18" /><span class="sidebar-label">剧本创作</span
                        ><span class="sidebar-label ml-auto text-[10px] text-stone-500">01</span></RouterLink
                    ><RouterLink
                        :to="`/projects/${projectId}/breakdown`"
                        class="side-link"
                        active-class="selected"
                        title="剧本拆解"
                        ><Layers :size="18" /><span class="sidebar-label">剧本拆解</span
                        ><span class="sidebar-label ml-auto text-[10px] text-stone-500">02</span></RouterLink
                    ><RouterLink
                        :to="`/projects/${projectId}/visual-style`"
                        class="side-link"
                        active-class="selected"
                        title="视觉风格"
                        ><Palette :size="18" /><span class="sidebar-label">视觉风格</span
                        ><span class="sidebar-label ml-auto text-[10px] text-stone-500">03</span></RouterLink
                    ><RouterLink
                        :to="`/projects/${projectId}/subject-identity`"
                        class="side-link"
                        active-class="selected"
                        title="主体身份"
                        ><Fingerprint :size="18" /><span class="sidebar-label">主体身份</span
                        ><span class="sidebar-label ml-auto text-[10px] text-stone-500">04</span></RouterLink
                    ><RouterLink
                        :to="`/projects/${projectId}/subject-images`"
                        class="side-link"
                        active-class="selected"
                        title="形态图片"
                        ><Images :size="18" /><span class="sidebar-label">形态图片</span
                        ><span class="sidebar-label ml-auto text-[10px] text-stone-500">05</span></RouterLink
                    ><RouterLink
                        :to="`/projects/${projectId}/storyboard`"
                        class="side-link"
                        active-class="selected"
                        title="分镜设计"
                        ><Camera :size="18" /><span class="sidebar-label">分镜设计</span
                        ><span class="sidebar-label ml-auto text-[10px] text-stone-500">06</span></RouterLink
                    >
                </nav></template
            >
            <div class="sidebar-footer">
                <AppDialog
                    v-model:open="settingsOpen"
                    title="后端连接"
                    description="页面直接使用现有后端接口，所有生成操作都会真实提交。"
                    ><template #trigger
                        ><DialogTrigger class="side-link w-full" title="后端连接"
                            ><Settings2 :size="17" /><span class="sidebar-label">连接说明</span></DialogTrigger
                        ></template
                    >
                    <dl class="detail-grid mt-7">
                        <dt>API 地址</dt>
                        <dd>
                            <code>{{ apiBase }}</code>
                        </dd>
                        <dt>开发环境</dt>
                        <dd>复制 .env.example 为 .env，将 API_PROXY_TARGET 指向你的后端服务，然后重启 Vite。</dd>
                        <dt>生产环境</dt>
                        <dd>为 /api 和 /storage 配置反向代理，并为生成、拆解和恢复接口设置足够长的读取超时。</dd>
                        <dt>状态更新</dt>
                        <dd>项目详情每 6 秒刷新一次；checkpoint 只在节点或批次结束后更新。</dd>
                    </dl></AppDialog
                >
                <div class="sidebar-divider"></div>
                <button
                    class="side-link w-full"
                    :aria-label="collapsed ? '展开侧栏' : '折叠侧栏'"
                    @click="collapsed = !collapsed"
                >
                    <PanelLeftOpen v-if="collapsed" :size="17" /><PanelLeftClose v-else :size="17" /><span
                        class="sidebar-label"
                        >收起侧栏</span
                    >
                </button>
                <p class="sidebar-label mt-3 px-3 text-[10px] text-stone-500">创作 · 整理 · 逐镜成形</p>
            </div>
        </aside>
        <div class="app-main">
            <header class="topbar">
                <span class="text-xs text-muted"
                    >短剧制作 / <span class="text-ink">{{ route.meta.title || '工作空间' }}</span></span
                ><span class="topbar-note"
                    >创作工作区 <span class="ml-2 font-mono text-[10px] text-faint">v0.1</span></span
                >
            </header>
            <main id="main-content" tabindex="-1"><RouterView /></main>
        </div>
    </div>
</template>