short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 统一主体与镜头目录并优化筛选工具栏布局

Browse Source
This commit is contained in:
GouJ
2026-09-01 17:21:13 +08:00
parent a35f5fe82d
commit 70ab4ba48f
12 changed files with 496 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/production/ProductionPage.vue
+52 -42
View File
@@ -13,7 +13,7 @@ import {
} from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { ArrowLeft, CheckCircle2, CircleAlert, Film, Image, MessageSquareText, RefreshCw } from '@lucide/vue'
import { EmptyState, StatusBadge } from '../../components/ui'
import { DirectoryItem, EmptyState, StatusBadge } from '../../components/ui'
import ConfirmAction from '../workflows/ConfirmAction.vue'
import { issueLabel, productionStatusLabel } from './model'
import { useProduction } from './useProduction'
@@ -344,55 +344,65 @@ watch(
<span class="text-xs text-muted">{{ shots.length }} 个正式镜头</span>
</div>
<div v-if="shot" class="panel production-workspace">
<nav class="production-shot-list" aria-label="本集生产镜头">
<NScrollbar class="panel-scroll" content-class="production-shot-list-content" x-scrollable>
<NButton
<nav class="production-shot-list directory-panel" aria-label="本集生产镜头">
<div class="directory-heading">
<h3>
生产镜头 <span>{{ shots.length }} 镜</span>
</h3>
</div>
<NScrollbar
class="panel-scroll directory-scroll"
content-class="directory-list-content production-shot-list-content"
x-scrollable
>
<DirectoryItem
v-for="item in shots"
:key="item.shotId"
:aria-current="item.shotId === shot.shotId ? 'true' : undefined"
:active="item.shotId === shot.shotId"
@click="selectedShot = item.shotId"
class="production-shot-link"
:class="{ selected: item.shotId === shot.shotId }"
><span class="font-mono text-[10px] text-muted">B{{ item.beatNo }} / S{{ item.shotNo }}</span
><span class="mt-1 block truncate text-xs font-medium">{{ item.title }}</span
><span
v-if="
query.data.value?.keyframes.items.find(row => row.shotId === item.shotId)
?.primaryKeyframeStale
"
class="mt-2 flex items-center gap-2 text-[10px]"
>
<CircleAlert :size="12" />主首帧已过期 </span
><span
v-else-if="
query.data.value?.videos.items.find(row => row.shotId === item.shotId)
?.primaryVideoStale
"
class="mt-2 flex items-center gap-2 text-[10px]"
>
<CircleAlert :size="12" />主视频已过期 </span
><span v-else class="mt-2 flex items-center gap-2 text-[10px] text-muted">
<CheckCircle2
>{{ item.title }}
<template #eyebrow>BEAT {{ item.beatNo }} / SHOT {{ item.shotNo }}</template>
<template #meta
><span
v-if="
query.data.value?.videos.items.find(row => row.shotId === item.shotId)?.status ===
'skipped'
query.data.value?.keyframes.items.find(row => row.shotId === item.shotId)
?.primaryKeyframeStale
"
:size="12"
/>
<CircleAlert
class="directory-status"
>
<CircleAlert :size="12" />主首帧已过期 </span
><span
v-else-if="
query.data.value?.videos.items.find(row => row.shotId === item.shotId)?.status ===
'blocked'
query.data.value?.videos.items.find(row => row.shotId === item.shotId)
?.primaryVideoStale
"
:size="12"
/>
{{
productionStatusLabel(
query.data.value?.videoStatus.items.find(row => row.shotId === item.shotId)
?.status || 'not_started'
)
}}
</span></NButton
class="directory-status"
>
<CircleAlert :size="12" />主视频已过期 </span
><span v-else class="directory-status">
<CheckCircle2
v-if="
query.data.value?.videos.items.find(row => row.shotId === item.shotId)
?.status === 'skipped'
"
:size="12"
/>
<CircleAlert
v-else-if="
query.data.value?.videos.items.find(row => row.shotId === item.shotId)
?.status === 'blocked'
"
:size="12"
/>
{{
productionStatusLabel(
query.data.value?.videoStatus.items.find(row => row.shotId === item.shotId)
?.status || 'not_started'
)
}}
</span></template
></DirectoryItem
>
</NScrollbar>
</nav>