refactor: 精简导航并扩大工作区内容显示面积
This commit is contained in:
@@ -1,32 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, provide } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { NScrollbar, NAlert, NButton, NPageHeader, NSpin, NTab, NTabs, NEllipsis } from 'naive-ui'
|
||||
import { NScrollbar, NAlert, NButton, NPageHeader, NSpin, NEllipsis } from 'naive-ui'
|
||||
import { RefreshCw } from '@lucide/vue'
|
||||
import { StatusBadge } from '../../components/ui'
|
||||
import { projectContextKey, useProjectData } from './context'
|
||||
import { getOperation } from '../workflows/operations'
|
||||
|
||||
/** 项目共享查询保持不变,标题与导航固定,子工作区负责内容滚动。 */
|
||||
/** 项目仅保留紧凑标题与刷新;工作流统一由左侧导航切换,子工作区负责内容滚动。 */
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const id = computed(() => String(route.params.projectId))
|
||||
const context = useProjectData(id)
|
||||
provide(projectContextKey, context)
|
||||
const operation = computed(() => getOperation(id.value))
|
||||
const tabs = [
|
||||
['create-drama', '剧本创作'],
|
||||
['breakdown', '剧本拆解'],
|
||||
['visual-style', '视觉风格'],
|
||||
['subject-identity', '主体身份'],
|
||||
['subject-images', '形态图片'],
|
||||
['storyboard', '分镜设计'],
|
||||
['production', '镜头生产']
|
||||
] as const
|
||||
/** 路由控制当前工作流,不额外缓存一份可能失步的标签状态。 */
|
||||
function switchWorkflow(path: string) {
|
||||
void router.push('/projects/' + id.value + '/' + path)
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<section class="project-frame">
|
||||
@@ -48,16 +35,6 @@ function switchWorkflow(path: string) {
|
||||
</div></template
|
||||
>
|
||||
</NPageHeader>
|
||||
<NTabs
|
||||
:value="String(route.path.split('/').at(-1))"
|
||||
type="line"
|
||||
size="small"
|
||||
class="project-tabs"
|
||||
aria-label="项目工作流"
|
||||
@update:value="switchWorkflow"
|
||||
>
|
||||
<NTab v-for="[path, label] in tabs" :key="path" :name="path">{{ label }}</NTab>
|
||||
</NTabs>
|
||||
</header>
|
||||
<NScrollbar
|
||||
v-if="context.error.value || operation.pending || operation.error || operation.notice"
|
||||
|
||||
Reference in New Issue
Block a user