feat(short-drama-agent-front): 新增项目标题输入

src/features/projects/components/CreateProjectDialog.vue

@@ -11,12 +11,16 @@ import { errorMessage } from '../../../lib/http'
 
 /** 新建剧本表单，202 成功后交由父级跳转，不在前端模拟生成。 */
 const emit = defineEmits<{ created: [projectId: string] }>()
+/** 新建剧本弹窗是否打开。 */
 const open = ref(false)
+/** 创建请求是否正在提交。 */
 const busy = ref(false)
+/** 创建请求的错误提示。 */
 const error = ref('')
-const form = reactive({ topic: '', style: '', episodeCount: 1 })
+/** 与后端 POST /projects 入参一致的创建表单。 */
+const form = reactive({ title: '', topic: '', style: '', episodeCount: 1 })
 
-/** 校验正整数集数和主题，禁止双击产生重复项目。 */
+/** 校验项目标题、主题与正整数集数，禁止双击产生重复项目。 */
 async function submit() {
     if (busy.value) return
     error.value = ''
@@ -24,10 +28,12 @@ async function submit() {
     try {
         const result = await projectsApi.create({
             ...form,
+            title: form.title.trim(),
             topic: form.topic.trim(),
             style: form.style.trim()
         })
         open.value = false
+        form.title = ''
         form.topic = ''
         emit('created', result.projectId)
     } catch (cause) {
@@ -36,7 +42,12 @@ async function submit() {
         busy.value = false
     }
 }
-const rules = { topic: requiredTextRule('故事主题'), episodeCount: integerRule('计划集数') }
+/** 创建项目表单校验规则。 */
+const rules = {
+    title: requiredTextRule('项目标题'),
+    topic: requiredTextRule('故事主题'),
+    episodeCount: integerRule('计划集数')
+}
 </script>
 
 <template>
@@ -57,6 +68,15 @@ const rules = { topic: requiredTextRule('故事主题'), episodeCount: integerRu
             class="mt-7 space-y-4"
             @submit="submit"
         >
+            <!-- 以下是项目基本信息模块 -->
+            <NFormItem path="title" label="项目标题" :label-props="{ for: 'title' }"
+                ><NInput
+                    v-model:value="form.title"
+                    placeholder="例如：记忆当铺"
+                    :disabled="busy"
+                    :input-props="{ id: 'title', autocomplete: 'off' }"
+                ></NInput
+            ></NFormItem>
             <NFormItem path="topic" label="故事主题" :label-props="{ for: 'topic' }"
                 ><NInput
                     placeholder="描述主角、故事背景，以及你希望展开的核心冲突……"
@@ -68,6 +88,7 @@ const rules = { topic: requiredTextRule('故事主题'), episodeCount: integerRu
                     :autosize="{ minRows: 3, maxRows: 12 }"
                 ></NInput
             ></NFormItem>
+            <!-- 以下是生成参数模块 -->
             <div class="grid grid-cols-1 gap-4">
                 <NFormItem path="style" label="剧本风格" :label-props="{ for: 'style' }"
                     ><NInput

src/features/projects/types.ts

@@ -1,10 +1,15 @@
 /** 后端 DramaProject.status 的原始取值。 */
 export type ProjectStatus = 'draft' | 'generating' | 'completed' | 'need_review' | 'failed'
 
-/** 创建请求不包含标题，标题由后端在工作流收尾时更新。 */
+/** 创建请求参数，与后端 POST /projects 入参保持一致。 */
 export interface CreateProjectInput {
+    /** 项目标题 */
+    title: string
+    /** 故事主题 */
     topic: string
+    /** 剧本风格 */
     style: string
+    /** 计划生成集数 */
     episodeCount: number
 }