修复前端页面问题
This commit is contained in:
parent
1f10bb4406
commit
482fd2d292
@ -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>
|
||||
|
||||
{/* 快捷操作：选择创作方式后显示 */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user