feat: 实现剧本创作与拆解前端工作台
This commit is contained in:
GouJ
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ArrowUpRight, Search, RefreshCw, Clapperboard } from '@lucide/vue'
|
||||
import { usePolling } from '../../composables/usePolling'
|
||||
import { EmptyState, StatusBadge } from '../../components/ui'
|
||||
import { formatDate } from '../../lib/format'
|
||||
import { projectsApi } from './api'
|
||||
import CreateProjectDialog from './components/CreateProjectDialog.vue'
|
||||
|
||||
/** 项目索引：真实查询、客户端筛选，以及进入两条 graph 的入口。 */
|
||||
const router = useRouter()
|
||||
const query = usePolling(ref('projects'), (_, signal) => projectsApi.list(signal), 12_000)
|
||||
const search = ref('')
|
||||
const filter = ref('all')
|
||||
const projects = computed(() => query.data.value ?? [])
|
||||
const filtered = computed(() =>
|
||||
projects.value.filter(item => {
|
||||
const matches = `${item.title ?? ''} ${item.topic} ${item.style ?? ''}`
|
||||
.toLowerCase()
|
||||
.includes(search.value.toLowerCase().trim())
|
||||
return matches && (filter.value === 'all' || item.status === filter.value)
|
||||
})
|
||||
)
|
||||
|
||||
/** 202 后直接打开工作流，后续刷新由项目布局负责。 */
|
||||
function openProject(id: string) {
|
||||
void router.push(`/projects/${encodeURIComponent(id)}/create-drama`)
|
||||
}
|
||||
|
||||
/** 多项筛选的重置放在函数中，避免格式化后产生无效模板表达式。 */
|
||||
function clearFilters() {
|
||||
search.value = ''
|
||||
filter.value = 'all'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page-container">
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">工作空间 / 项目</p>
|
||||
<h1>我的剧本</h1>
|
||||
<p class="page-description">从故事到镜头，在这里继续你的创作。</p>
|
||||
</div>
|
||||
<CreateProjectDialog @created="openProject" />
|
||||
</div>
|
||||
<div class="workspace-note">
|
||||
<Clapperboard :size="20" :stroke-width="1.5" /><span
|
||||
>剧本创作 <span class="mx-3 text-faint">/</span> 主体拆解
|
||||
<span class="mx-3 text-faint">/</span> 分镜规划</span
|
||||
><span class="ml-auto hidden text-xs text-muted sm:block">两个工作流，一个项目</span>
|
||||
</div>
|
||||
<div class="toolbar mt-7">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<button
|
||||
v-for="item in [
|
||||
{ value: 'all', label: '全部项目' },
|
||||
{ value: 'generating', label: '生成中' },
|
||||
{ value: 'completed', label: '已完成' },
|
||||
{ value: 'need_review', label: '待审核' },
|
||||
{ value: 'failed', label: '失败' }
|
||||
]"
|
||||
:key="item.value"
|
||||
class="filter-button"
|
||||
:class="{ active: filter === item.value }"
|
||||
:aria-pressed="filter === item.value"
|
||||
@click="filter = item.value"
|
||||
>
|
||||
{{ item.label
|
||||
}}<span v-if="item.value === 'all'" class="ml-2 text-muted">{{ projects.length }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="search-field">
|
||||
<Search :size="15" /><input v-model="search" aria-label="搜索项目" placeholder="搜索剧本" />
|
||||
</div>
|
||||
<button
|
||||
class="icon-button"
|
||||
aria-label="刷新项目"
|
||||
:disabled="query.loading.value"
|
||||
@click="query.refresh"
|
||||
>
|
||||
<RefreshCw :size="16" :class="{ 'animate-spin': query.loading.value }" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="query.error.value" class="alert alert-error mt-4" role="alert">
|
||||
{{ query.error.value }}<button class="ml-3 underline" @click="query.refresh">重新连接</button>
|
||||
</div>
|
||||
<div class="panel mt-4 overflow-hidden" :aria-busy="query.loading.value">
|
||||
<div v-if="!query.data.value && query.loading.value" class="p-10 text-sm text-muted" role="status">
|
||||
正在读取项目……
|
||||
</div>
|
||||
<div v-else-if="filtered.length" class="table-scroll">
|
||||
<table class="project-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>剧本名称</th>
|
||||
<th>风格</th>
|
||||
<th>创作状态</th>
|
||||
<th>最近更新</th>
|
||||
<th><span class="sr-only">打开项目</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="project in filtered" :key="project.id">
|
||||
<td>
|
||||
<RouterLink :to="`/projects/${project.id}/create-drama`" class="project-name"
|
||||
><span class="project-monogram">{{
|
||||
(project.title || project.topic).slice(0, 1)
|
||||
}}</span
|
||||
><span class="min-w-0"
|
||||
><strong class="block truncate font-medium">{{
|
||||
project.title || project.topic
|
||||
}}</strong
|
||||
><span class="mt-1 block max-w-md truncate text-xs text-muted">{{
|
||||
project.topic
|
||||
}}</span></span
|
||||
></RouterLink
|
||||
>
|
||||
</td>
|
||||
<td class="text-muted">{{ project.style || '未设置' }}</td>
|
||||
<td><StatusBadge :status="project.status" /></td>
|
||||
<td class="whitespace-nowrap text-xs text-muted">{{ formatDate(project.updatedAt) }}</td>
|
||||
<td>
|
||||
<RouterLink
|
||||
:to="`/projects/${project.id}/create-drama`"
|
||||
class="icon-button"
|
||||
:aria-label="`打开 ${project.title || project.topic}`"
|
||||
><ArrowUpRight :size="17"
|
||||
/></RouterLink>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<EmptyState
|
||||
v-else-if="query.data.value"
|
||||
:title="projects.length ? '没有匹配的剧本' : '第一部故事，从这里开始'"
|
||||
:description="
|
||||
projects.length
|
||||
? '试试其他关键词，或切换项目状态。'
|
||||
: '新建一个剧本，生成角色与剧集；完成后，再将故事拆解为主体和分镜。'
|
||||
"
|
||||
><button v-if="projects.length" class="button button-secondary" @click="clearFilters">
|
||||
清除筛选
|
||||
</button></EmptyState
|
||||
>
|
||||
<EmptyState
|
||||
v-else
|
||||
title="等待连接后端"
|
||||
description="启动后端服务并检查 API_PROXY_TARGET，连接成功后会显示你已有的项目。"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-4 text-xs text-muted">
|
||||
项目数据来自后端数据库<span v-if="query.updatedAt.value">
|
||||
· 更新于 {{ formatDate(query.updatedAt.value) }}</span
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
Reference in New Issue
Block a user