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

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

Browse Source
This commit is contained in:
GJ
2026-09-21 14:32:59 +08:00
parent c1ec88daf9
commit 227db5450d
5 changed files with 58 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/projects/components/CreateProjectDialog.vue
+24 -3
View File
@@ -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
+6 -1
View File
@@ -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
}
tests/components/ui/form.test.ts
+22
View File
@@ -40,6 +40,27 @@ async function submit() {
}
describe('统一的 Naive UI 表单校验', () => {
it('新建剧本要求填写项目标题，并将清理后的标题提交给后端', async () => {
const fetcher = vi
.fn<typeof fetch>()
.mockResolvedValue(new Response('{"projectId":"created","status":"generating"}', { status: 202 }))
vi.stubGlobal('fetch', fetcher)
wrapper = mount(CreateProjectDialog, { attachTo: document.body })
button('新建剧本').click()
await flushPromises()
expect(document.querySelector('#title')).toBeInstanceOf(HTMLInputElement)
await input('#topic', '雨夜来信')
await submit()
expect(feedback()).toContain('请填写项目标题')
expect(fetcher).not.toHaveBeenCalled()
await input('#title', ' 记忆当铺 ')
await submit()
expect(JSON.parse(fetcher.mock.calls[0]![1]!.body as string)).toMatchObject({
title: '记忆当铺',
topic: '雨夜来信'
})
})
it('新建剧本使用字段反馈拦截空白主题和小数集数，修正后只发送一次请求', async () => {
const fetcher = vi
.fn<typeof fetch>()
@@ -50,6 +71,7 @@ describe('统一的 Naive UI 表单校验', () => {
await flushPromises()
expect(document.querySelector('form')!.noValidate).toBe(true)
expect(document.querySelector('[required]')).toBeNull()
await input('#title', '测试剧本')
await input('#topic', ' ')
const focus = vi.spyOn(HTMLTextAreaElement.prototype, 'focus')
await submit()
tests/features/workflows/pages.test.ts
+4
View File
@@ -1452,6 +1452,9 @@ describe('工作台页面交互', () => {
wrapper = mount(CreateProjectDialog, { attachTo: document.body })
button('新建剧本').click()
await flushPromises()
const title = document.querySelector<HTMLInputElement>('#title')!
title.value = ' 记忆当铺 '
title.dispatchEvent(new Event('input', { bubbles: true }))
const topic = document.querySelector<HTMLTextAreaElement>('#topic')!
topic.value = ' 雨夜来信 '
topic.dispatchEvent(new Event('input', { bubbles: true }))
@@ -1462,6 +1465,7 @@ describe('工作台页面交互', () => {
await flushPromises()
expect(wrapper.emitted('created')).toEqual([['created']])
expect(JSON.parse(fetcher.mock.calls[0]![1]!.body as string)).toEqual({
title: '记忆当铺',
topic: '雨夜来信',
style: '',
episodeCount: 6
tests/lib/http.test.ts
+2 -1
View File
@@ -110,11 +110,12 @@ describe('后端 API 契约', () => {
)
vi.stubGlobal('fetch', fetcher)
expect(await projectsApi.list()).toEqual([{ id: 'p1' }])
expect(await projectsApi.create({ topic: '故事', style: '悬疑', episodeCount: 3 })).toEqual({
expect(await projectsApi.create({ title: '测试剧本', topic: '故事', style: '悬疑', episodeCount: 3 })).toEqual({
projectId: 'p2',
status: 'generating'
})
expect(JSON.parse(fetcher.mock.calls[1]![1].body as string)).toEqual({
title: '测试剧本',
topic: '故事',
style: '悬疑',
episodeCount: 3