feat(prompt): AI 提示词优化双栏交互

新增 prompt API 模块调用后端 /api/v1/prompt/optimize,PromptEditor
重构为左右双栏布局支持原始/优化提示词对比编辑,默认开启 AI 优化,
用户可关闭开关或手动编辑优化结果后再提交生成。
This commit is contained in:
2026-05-24 21:16:15 +08:00
parent eac64105de
commit c177cbaf82
6 changed files with 304 additions and 22 deletions
+51 -7
View File
@@ -13,7 +13,7 @@ const ASSET_TYPES: { value: AssetType; label: string }[] = [
]
interface GenerateFormProps {
onSubmit: () => void
onSubmit: (prompt: string) => void
submitting: boolean
}
@@ -24,13 +24,32 @@ export default function GenerateForm({ onSubmit, submitting }: GenerateFormProps
assetType,
taskStyle,
params,
enableAI,
optimizedPrompt,
isOptimizing,
setPrompt,
setAssetType,
toggleTaskStyle,
setParams,
setEnableAI,
setOptimizedPrompt,
runOptimize,
} = useTaskStore()
const mergedStyle = mergeStyles(projectStyle, taskStyle)
const finalPrompt = enableAI && optimizedPrompt ? optimizedPrompt : prompt
const handleOptimize = async () => {
try {
await runOptimize(projectStyle)
} catch {
// error handled in store
}
}
const handleSubmit = () => {
onSubmit(finalPrompt)
}
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
@@ -62,16 +81,41 @@ export default function GenerateForm({ onSubmit, submitting }: GenerateFormProps
<StyleSelector value={taskStyle} onChange={toggleTaskStyle} compact />
</div>
{/* 提示词 */}
{/* 提示词(含 AI 优化) */}
<div>
<h3 style={{ marginBottom: 12, fontSize: 14, color: 'var(--text-secondary)' }}>
提示词
</h3>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 12,
}}
>
<h3 style={{ fontSize: 14, color: 'var(--text-secondary)' }}>
提示词
</h3>
{enableAI && (
<button
type="button"
className="btn-secondary"
onClick={handleOptimize}
disabled={isOptimizing || !prompt.trim()}
style={{ padding: '6px 16px', fontSize: 13 }}
>
{isOptimizing ? '优化中...' : '优化提示词'}
</button>
)}
</div>
<PromptEditor
prompt={prompt}
onPromptChange={setPrompt}
style={mergedStyle}
params={{ resolution: params.resolution, format: params.format }}
enableAI={enableAI}
onEnableAIToggle={setEnableAI}
optimizedPrompt={optimizedPrompt}
isOptimizing={isOptimizing}
onOptimizedPromptChange={setOptimizedPrompt}
/>
</div>
@@ -113,8 +157,8 @@ export default function GenerateForm({ onSubmit, submitting }: GenerateFormProps
<button
type="button"
className="btn-primary"
onClick={onSubmit}
disabled={submitting || !prompt.trim()}
onClick={handleSubmit}
disabled={submitting || !finalPrompt.trim()}
style={{ alignSelf: 'flex-start', padding: '12px 32px', fontSize: 16 }}
>
{submitting ? '提交中...' : '开始生成'}