From 482fd2d29286a890685f90dc43316fa7215d6678 Mon Sep 17 00:00:00 2001
From: hjjjj <1311711287@qq.com>
Date: Mon, 26 Jan 2026 16:45:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=89=8D=E7=AB=AF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ProjectCreateEnhanced.tsx | 535 ++++++++++---------
 1 file changed, 273 insertions(+), 262 deletions(-)

diff --git a/frontend/src/pages/ProjectCreateEnhanced.tsx b/frontend/src/pages/ProjectCreateEnhanced.tsx
index a60a5eb..488a93b 100644
--- a/frontend/src/pages/ProjectCreateEnhanced.tsx
+++ b/frontend/src/pages/ProjectCreateEnhanced.tsx
@@ -302,16 +302,6 @@ export const ProjectCreateEnhanced = () => {
     return false // 阻止自动上传
   }
 
-  // 选择"从头创作"模式
-  const handleSelectCreateMode = () => {
-    setCreationMode('create')
-    setUploadedScript('')
-    // 重置子模式
-    setCreateSubMode(null)
-    setDirectTextInput('')
-    setInspirationFile(null)
-  }
-
   // 选择从头创作的子模式
   const handleSelectCreateSubMode = (mode: 'text' | 'file') => {
     setCreateSubMode(mode)
@@ -323,7 +313,7 @@ export const ProjectCreateEnhanced = () => {
     }
   }
 
-  // 清除创作方式选择
+  // 清除创作方式选择（取消所有选择）
   const handleClearCreationMode = () => {
     setCreationMode(null)
     setCreateSubMode(null)
@@ -934,266 +924,287 @@ export const ProjectCreateEnhanced = () => {
 
               {/* 创作方式选择 */}
               <Card title="选择创作方式" extra={<SettingOutlined />}>
-                <Space direction="vertical" size="middle" style={{ width: '100%' }}>
-                  {/* 上传剧本选项 */}
-                  <Card
-                    size="small"
-                    title="上传剧本"
-                    style={{
-                      cursor: 'pointer',
-                      border: creationMode === 'upload' ? '2px solid #1677ff' : undefined,
-                      backgroundColor: creationMode === 'upload' ? '#f0f5ff' : undefined
-                    }}
-                    onClick={() => setCreationMode('upload')}
-                  >
-                    <div onClick={(e) => e.stopPropagation()}>
-                      <Upload.Dragger
-                        name="script"
-                        multiple={false}
-                        accept=".txt,.md,.docx"
-                        showUploadList={false}
-                        beforeUpload={handleUpload}
-                        style={{ padding: '20px' }}
-                      >
-                        <p className="ant-upload-drag-icon">
-                          <UploadOutlined style={{ fontSize: '32px', color: '#1677ff' }} />
-                        </p>
-                        <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
-                        <p className="ant-upload-hint">支持 .txt, .md, .docx 格式的剧本</p>
-                      </Upload.Dragger>
-
-                      {uploadedScript && (
-                        <div style={{ marginTop: '12px' }}>
-                          <Tag color="success" icon={<CheckCircleOutlined />}>
-                            已上传 ({uploadedScript.length} 字符)
-                          </Tag>
-                          <Button
-                            type="link"
-                            size="small"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              handleClearCreationMode()
-                            }}
-                            style={{ marginLeft: '8px' }}
-                          >
-                            重新选择
-                          </Button>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* 剧本内容预览 */}
-                    {uploadedScript && (
-                      <div style={{ marginTop: '16px' }}>
-                        <Divider style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                          <span>剧本预览</span>
-                          {uploadedScript.length > 500 && (
-                            <Button
-                              type="link"
-                              size="small"
-                              onClick={(e) => {
-                                e.stopPropagation()
-                                setScriptExpanded(!scriptExpanded)
-                              }}
-                              style={{ padding: 0, height: 'auto' }}
-                            >
-                              {scriptExpanded ? '收起' : '展开全部'}
-                            </Button>
-                          )}
-                        </Divider>
-                        <div
-                          style={{
-                            maxHeight: scriptExpanded ? '60vh' : '150px',
-                            overflowY: 'auto',
-                            background: '#f5f5f5',
-                            padding: '12px',
-                            borderRadius: '4px',
-                            fontSize: '12px',
-                            whiteSpace: 'pre-wrap',
-                            wordBreak: 'break-word',
-                            border: '1px solid #d9d9d9',
-                            lineHeight: '1.6'
-                          }}
-                        >
-                          {uploadedScript}
-                        </div>
-                        {!scriptExpanded && uploadedScript.length > 500 && (
-                          <div style={{ marginTop: '8px', textAlign: 'center' }}>
-                            <Button
-                              type="link"
-                              size="small"
-                              onClick={(e) => {
-                                e.stopPropagation()
-                                setScriptExpanded(true)
-                              }}
-                            >
-                              查看完整剧本 ({uploadedScript.length} 字符)
-                            </Button>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </Card>
-
-                  {/* 从头创作选项 */}
-                  <Card
-                    size="small"
-                    title={
-                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                        <span>从头创作</span>
-                        {creationMode !== 'create' && (
-                          <Button type="primary" size="small" onClick={handleSelectCreateMode}>
-                            选择此方式
-                          </Button>
-                        )}
-                        {creationMode === 'create' && (
-                          <Button size="small" onClick={handleClearCreationMode}>
-                            取消选择
-                          </Button>
-                        )}
-                      </div>
+                <Radio.Group
+                  value={creationMode}
+                  onChange={(e) => {
+                    const mode = e.target.value
+                    setCreationMode(mode)
+                    // 切换模式时清空相关状态
+                    if (mode === 'upload') {
+                      setCreateSubMode(null)
+                      setDirectTextInput('')
+                      setInspirationFile(null)
+                    } else if (mode === 'create') {
+                      setUploadedScript('')
                     }
-                    style={{
-                      border: creationMode === 'create' ? '2px solid #1677ff' : undefined,
-                      backgroundColor: creationMode === 'create' ? '#f0f5ff' : undefined
-                    }}
-                  >
-                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
-                      <p style={{ margin: 0, color: '#666' }}>
-                        让 AI 根据你的创意完整生成人物设定和剧情大纲
-                      </p>
-
-                      {creationMode === 'create' && (
-                        <>
-                          <Divider style={{ margin: '12px 0' }} />
-
-                          {/* 子模式选择 */}
-                          <div>
-                            <div style={{ marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>
-                              选择输入方式：
-                            </div>
-                            <Radio.Group
-                              value={createSubMode}
-                              onChange={(e) => handleSelectCreateSubMode(e.target.value)}
-                              style={{ width: '100%' }}
-                            >
-                              <Space direction="vertical" style={{ width: '100%' }}>
-                                <Radio value="text">
-                                  <Space>
-                                    <EditOutlined />
-                                    <span>直接输入创作文字</span>
-                                  </Space>
-                                </Radio>
-                                <Radio value="file">
-                                  <Space>
-                                    <UploadOutlined />
-                                    <span>上传灵感文件</span>
-                                  </Space>
-                                </Radio>
-                              </Space>
-                            </Radio.Group>
+                  }}
+                  style={{ width: '100%' }}
+                >
+                  <Space direction="vertical" style={{ width: '100%' }} size="middle">
+                    {/* 上传剧本选项 */}
+                    <Radio value="upload">
+                      <Card
+                        size="small"
+                        style={{
+                          width: '100%',
+                          border: creationMode === 'upload' ? '2px solid #1677ff' : '1px solid #d9d9d9',
+                          backgroundColor: creationMode === 'upload' ? '#f0f5ff' : undefined
+                        }}
+                      >
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                            <UploadOutlined style={{ fontSize: '20px', color: '#1677ff' }} />
+                            <span style={{ fontWeight: 500 }}>上传完整剧本</span>
                           </div>
+                          <p style={{ margin: '8px 0', color: '#666' }}>
+                            上传已有剧本，AI 将分析提取人物、世界观和剧情大纲
+                          </p>
 
-                          {/* 直接输入文字 */}
-                          {createSubMode === 'text' && (
-                            <div style={{ marginTop: '12px' }}>
-                              <TextArea
-                                value={directTextInput}
-                                onChange={(e) => setDirectTextInput(e.target.value)}
-                                placeholder="请输入您的创作文字、故事大纲、角色设定等内容..."
-                                rows={6}
-                                maxLength={10000}
-                                showCount
-                              />
-                              {directTextInput && (
-                                <div style={{ marginTop: '8px' }}>
-                                  <Tag color="success" icon={<CheckCircleOutlined />}>
-                                    已输入 {directTextInput.length} 个字符
-                                  </Tag>
-                                </div>
-                              )}
-                            </div>
-                          )}
-
-                          {/* 上传灵感文件 */}
-                          {createSubMode === 'file' && (
-                            <div style={{ marginTop: '12px' }}>
-                              <div style={{ marginBottom: '8px' }}>
-                                <span style={{ fontSize: '14px', fontWeight: 500 }}>灵感类型：</span>
-                                <Select
-                                  value={inspirationFileType}
-                                  onChange={setInspirationFileType}
-                                  style={{ width: '200px', marginLeft: '8px' }}
-                                >
-                                  <Select.Option value="story">故事灵感</Select.Option>
-                                  <Select.Option value="character">角色设定</Select.Option>
-                                  <Select.Option value="scene">场景描述</Select.Option>
-                                  <Select.Option value="dialogue">对话片段</Select.Option>
-                                </Select>
-                              </div>
-                              <Upload
-                                accept=".txt,.md,.doc,.docx"
-                                maxCount={1}
-                                fileList={inspirationFile ? [inspirationFile] : []}
-                                beforeUpload={handleInspirationUpload}
-                                onRemove={() => setInspirationFile(null)}
+                          {creationMode === 'upload' && (
+                            <>
+                              <Upload.Dragger
+                                name="script"
+                                multiple={false}
+                                accept=".txt,.md,.docx"
+                                showUploadList={false}
+                                beforeUpload={handleUpload}
+                                style={{ padding: '20px' }}
                               >
-                                <Button icon={<UploadOutlined />} disabled={inspirationFile !== null}>
-                                  {inspirationFile ? '已选择文件' : '选择文件（支持 .txt, .md, .doc, .docx）'}
-                                </Button>
-                              </Upload>
-                              {inspirationFile && (
-                                <div style={{ marginTop: '8px', fontSize: '12px', color: '#52c41a' }}>
-                                  ✓ 已选择: {inspirationFile.name}
+                                <p className="ant-upload-drag-icon">
+                                  <UploadOutlined style={{ fontSize: '32px', color: '#1677ff' }} />
+                                </p>
+                                <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+                                <p className="ant-upload-hint">支持 .txt, .md, .docx 格式的剧本</p>
+                              </Upload.Dragger>
+
+                              {uploadedScript && (
+                                <div style={{ marginTop: '12px' }}>
+                                  <Tag color="success" icon={<CheckCircleOutlined />}>
+                                    已上传 ({uploadedScript.length} 字符)
+                                  </Tag>
+                                  <Button
+                                    type="link"
+                                    size="small"
+                                    onClick={(e) => {
+                                      e.stopPropagation()
+                                      setUploadedScript('')
+                                    }}
+                                    style={{ marginLeft: '8px' }}
+                                  >
+                                    重新上传
+                                  </Button>
                                 </div>
                               )}
-                            </div>
-                          )}
 
-                          {createSubMode && (
-                            <Tag color="blue">
-                              {createSubMode === 'text' && '已选择：直接输入'}
-                              {createSubMode === 'file' && '已选择：文件上传'}
-                            </Tag>
+                              {/* 剧本内容预览 */}
+                              {uploadedScript && (
+                                <>
+                                  <Divider style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                                    <span>剧本预览</span>
+                                    {uploadedScript.length > 500 && (
+                                      <Button
+                                        type="link"
+                                        size="small"
+                                        onClick={(e) => {
+                                          e.stopPropagation()
+                                          setScriptExpanded(!scriptExpanded)
+                                        }}
+                                        style={{ padding: 0, height: 'auto' }}
+                                      >
+                                        {scriptExpanded ? '收起' : '展开全部'}
+                                      </Button>
+                                    )}
+                                  </Divider>
+                                  <div
+                                    style={{
+                                      maxHeight: scriptExpanded ? '60vh' : '150px',
+                                      overflowY: 'auto',
+                                      background: '#f5f5f5',
+                                      padding: '12px',
+                                      borderRadius: '4px',
+                                      fontSize: '12px',
+                                      whiteSpace: 'pre-wrap',
+                                      wordBreak: 'break-word',
+                                      border: '1px solid #d9d9d9',
+                                      lineHeight: '1.6'
+                                    }}
+                                  >
+                                    {uploadedScript}
+                                  </div>
+                                  {!scriptExpanded && uploadedScript.length > 500 && (
+                                    <div style={{ marginTop: '8px', textAlign: 'center' }}>
+                                      <Button
+                                        type="link"
+                                        size="small"
+                                        onClick={(e) => {
+                                          e.stopPropagation()
+                                          setScriptExpanded(true)
+                                        }}
+                                      >
+                                        查看完整剧本 ({uploadedScript.length} 字符)
+                                      </Button>
+                                    </div>
+                                  )}
+                                </>
+                              )}
+                            </>
                           )}
-                        </>
-                      )}
-                    </Space>
-                  </Card>
+                        </Space>
+                      </Card>
+                    </Radio>
 
-                  {/* 已选择提示 */}
-                  {creationMode && (
-                    <Alert
-                      message={
-                        creationMode === 'upload'
-                          ? '已选择：上传剧本模式'
-                          : creationMode === 'create' && createSubMode === 'text'
-                            ? '已选择：从头创作 - 直接输入文字'
-                            : creationMode === 'create' && createSubMode === 'file'
-                              ? '已选择：从头创作 - 上传灵感文件'
-                              : '已选择：从头创作模式'
-                      }
-                      description={
-                        creationMode === 'upload' && uploadedScript
-                          ? `已上传剧本 (${uploadedScript.length} 字符)`
-                          : creationMode === 'create' && createSubMode === 'text' && directTextInput
-                            ? `已输入 ${directTextInput.length} 个字符`
-                            : creationMode === 'create' && createSubMode === 'file' && inspirationFile
-                              ? `已上传文件: ${inspirationFile.name}`
-                              : creationMode === 'create' && !createSubMode
-                                ? '请选择输入方式'
-                                : undefined
-                      }
-                      type="success"
-                      showIcon
-                      action={
-                        <Button size="small" type="link" onClick={handleClearCreationMode}>
-                          重新选择
-                        </Button>
-                      }
-                    />
-                  )}
-                </Space>
+                    {/* 从头创作选项 */}
+                    <Radio value="create">
+                      <Card
+                        size="small"
+                        style={{
+                          width: '100%',
+                          border: creationMode === 'create' ? '2px solid #1677ff' : '1px solid #d9d9d9',
+                          backgroundColor: creationMode === 'create' ? '#f0f5ff' : undefined
+                        }}
+                      >
+                        <Space direction="vertical" style={{ width: '100%' }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                            <EditOutlined style={{ fontSize: '20px', color: '#1677ff' }} />
+                            <span style={{ fontWeight: 500 }}>从头创作</span>
+                          </div>
+                          <p style={{ margin: '8px 0', color: '#666' }}>
+                            让 AI 根据你的创意完整生成人物设定和剧情大纲
+                          </p>
+
+                          {creationMode === 'create' && (
+                            <>
+                              <Divider style={{ margin: '12px 0' }} />
+
+                              {/* 子模式选择 */}
+                              <div>
+                                <div style={{ marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>
+                                  选择输入方式：
+                                </div>
+                                <Radio.Group
+                                  value={createSubMode}
+                                  onChange={(e) => handleSelectCreateSubMode(e.target.value)}
+                                  style={{ width: '100%' }}
+                                >
+                                  <Space direction="vertical" style={{ width: '100%' }}>
+                                    <Radio value="text">
+                                      <Space>
+                                        <EditOutlined />
+                                        <span>直接输入创作文字</span>
+                                      </Space>
+                                    </Radio>
+                                    <Radio value="file">
+                                      <Space>
+                                        <UploadOutlined />
+                                        <span>上传灵感文件</span>
+                                      </Space>
+                                    </Radio>
+                                  </Space>
+                                </Radio.Group>
+                              </div>
+
+                              {/* 直接输入文字 */}
+                              {createSubMode === 'text' && (
+                                <div style={{ marginTop: '12px' }}>
+                                  <TextArea
+                                    value={directTextInput}
+                                    onChange={(e) => setDirectTextInput(e.target.value)}
+                                    placeholder="请输入您的创作文字、故事大纲、角色设定等内容..."
+                                    rows={6}
+                                    maxLength={10000}
+                                    showCount
+                                  />
+                                  {directTextInput && (
+                                    <div style={{ marginTop: '8px' }}>
+                                      <Tag color="success" icon={<CheckCircleOutlined />}>
+                                        已输入 {directTextInput.length} 个字符
+                                      </Tag>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+
+                              {/* 上传灵感文件 */}
+                              {createSubMode === 'file' && (
+                                <div style={{ marginTop: '12px' }}>
+                                  <div style={{ marginBottom: '8px' }}>
+                                    <span style={{ fontSize: '14px', fontWeight: 500 }}>灵感类型：</span>
+                                    <Select
+                                      value={inspirationFileType}
+                                      onChange={setInspirationFileType}
+                                      style={{ width: '200px', marginLeft: '8px' }}
+                                    >
+                                      <Select.Option value="story">故事灵感</Select.Option>
+                                      <Select.Option value="character">角色设定</Select.Option>
+                                      <Select.Option value="scene">场景描述</Select.Option>
+                                      <Select.Option value="dialogue">对话片段</Select.Option>
+                                    </Select>
+                                  </div>
+                                  <Upload
+                                    accept=".txt,.md,.doc,.docx"
+                                    maxCount={1}
+                                    fileList={inspirationFile ? [inspirationFile] : []}
+                                    beforeUpload={handleInspirationUpload}
+                                    onRemove={() => setInspirationFile(null)}
+                                  >
+                                    <Button icon={<UploadOutlined />} disabled={inspirationFile !== null}>
+                                      {inspirationFile ? '已选择文件' : '选择文件（支持 .txt, .md, .doc, .docx）'}
+                                    </Button>
+                                  </Upload>
+                                  {inspirationFile && (
+                                    <div style={{ marginTop: '8px', fontSize: '12px', color: '#52c41a' }}>
+                                      ✓ 已选择: {inspirationFile.name}
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+
+                              {createSubMode && (
+                                <Tag color="blue">
+                                  {createSubMode === 'text' && '已选择：直接输入'}
+                                  {createSubMode === 'file' && '已选择：文件上传'}
+                                </Tag>
+                              )}
+                            </>
+                          )}
+                        </Space>
+                      </Card>
+                    </Radio>
+                  </Space>
+                </Radio.Group>
+
+                {/* 已选择提示 */}
+                {creationMode && (
+                  <Alert
+                    message={
+                      creationMode === 'upload'
+                        ? '已选择：上传剧本模式'
+                        : creationMode === 'create' && createSubMode === 'text'
+                          ? '已选择：从头创作 - 直接输入文字'
+                          : creationMode === 'create' && createSubMode === 'file'
+                            ? '已选择：从头创作 - 上传灵感文件'
+                            : '已选择：从头创作模式'
+                    }
+                    description={
+                      creationMode === 'upload' && uploadedScript
+                        ? `已上传剧本 (${uploadedScript.length} 字符)`
+                        : creationMode === 'create' && createSubMode === 'text' && directTextInput
+                          ? `已输入 ${directTextInput.length} 个字符`
+                          : creationMode === 'create' && createSubMode === 'file' && inspirationFile
+                            ? `已上传文件: ${inspirationFile.name}`
+                            : creationMode === 'create' && !createSubMode
+                              ? '请选择输入方式'
+                              : undefined
+                    }
+                    type="success"
+                    showIcon
+                    action={
+                      <Button size="small" type="link" onClick={handleClearCreationMode}>
+                        重新选择
+                      </Button>
+                    }
+                  />
+                )}
               </Card>
 
               {/* 快捷操作：选择创作方式后显示 */}