fix: 完善剧本完成状态限制并优化表单对齐与配色

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, h, ref } from 'vue'
+import { computed, h, provide, ref, shallowRef } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import {
     NButton,
@@ -31,6 +31,7 @@ import {
 import { AppDialog } from './components/ui'
 import { useTheme } from './composables/useTheme'
 import ThemeToggle from './components/ui/ThemeToggle.vue'
+import { projectAccessKey, type ProjectAccess } from './features/projects/access'
 
 /** 应用外壳固定在视口内，业务数据仍由各工作区自行加载。 */
 const route = useRoute()
@@ -38,6 +39,11 @@ const collapsed = ref(window.matchMedia('(max-width: 800px)').matches)
 const settingsOpen = ref(false)
 const { preference, theme, overrides } = useTheme()
 const projectId = computed(() => String(route.params.projectId || ''))
+const projectAccess = shallowRef<ProjectAccess | null>(null)
+provide(projectAccessKey, projectAccess)
+const workflowsUnlocked = computed(
+    () => projectAccess.value?.projectId === projectId.value && projectAccess.value.completed
+)
 const apiBase = import.meta.env.VITE_API_BASE_URL || '/api'
 const workflowItems = [
     ['create-drama', '剧本创作', FileText],
@@ -58,11 +64,18 @@ const menuOptions = computed<MenuOption[]>(() => [
     ...(projectId.value
         ? [
               { type: 'divider' as const, key: 'divider' },
-              ...workflowItems.map(([path, label, icon]) => ({
-                  key: '/projects/' + projectId.value + '/' + path,
-                  label: () => h(RouterLink, { to: '/projects/' + projectId.value + '/' + path }, () => label),
-                  icon: () => h(icon, { size: 18 })
-              }))
+              ...workflowItems.map(([path, label, icon]) => {
+                  const disabled = path !== 'create-drama' && !workflowsUnlocked.value
+                  return {
+                      key: '/projects/' + projectId.value + '/' + path,
+                      disabled,
+                      label: () =>
+                          disabled
+                              ? h('span', { title: '剧本完成后可用', 'aria-disabled': 'true' }, label)
+                              : h(RouterLink, { to: '/projects/' + projectId.value + '/' + path }, () => label),
+                      icon: () => h(icon, { size: 18 })
+                  }
+              })
           ]
         : [])
 ])