mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai创建修改

Browse Source
This commit is contained in:
孙佳艺
2026-06-23 15:29:50 +08:00
parent 242030c50b
commit da056ea64b
16 changed files with 786 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/components/VideoPromptSchemaEditor.tsx
+47 -19
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { Alert, Input, Space, Tag, Typography } from 'antd';
import { Alert, Input, Radio, Space, Tag, Typography } from 'antd';
import type {
JsonValue,
VideoPromptSchemaFieldConfig,
@@ -54,10 +54,24 @@ function EditableInput({ value, maxLength, onChange }: { value: JsonValue; maxLe
return <Input {...commonProps} />;
}
function renderFieldTag(field: VideoPromptSchemaFieldConfig) {
return field.editable ? <Tag color="processing">可编辑</Tag> : <Tag color="default">只读</Tag>;
function BooleanRadio({ value, onChange }: { value: JsonValue; onChange: (nextValue: JsonValue) => void }) {
const boolValue = value === true || value === 'true';
return (
<Radio.Group
value={boolValue}
onChange={(e) => onChange(e.target.value)}
style={{ display: 'flex', gap: 24 }}
>
<Radio value={true} style={{ fontSize: 14, color: '#475569' }}>是</Radio>
<Radio value={false} style={{ fontSize: 14, color: '#475569' }}>否</Radio>
</Radio.Group>
);
}
// function renderFieldTag(field: VideoPromptSchemaFieldConfig) {
// return field.editable ? <Tag color="processing">可编辑</Tag> : <Tag color="default">只读</Tag>;
// }
const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value, schemaConfigSnapshot, onChange }) => {
const safeValue = isRecord(value) ? value : {};
const sections = normalizeSchemaSections(schemaConfigSnapshot);
@@ -93,21 +107,28 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
<div key={section.key} style={{ marginBottom: 18 }}>
<Space style={{ marginBottom: 8 }}>
<Text strong style={{ color: '#334155', fontSize: 13 }}>{section.label}</Text>
{renderFieldTag(section)}
{/* {renderFieldTag(section)} */}
</Space>
<div style={{ borderLeft: '3px solid #6366f1', paddingLeft: 12, marginLeft: 4 }}>
{fields.map((field) => (
<div key={field.key} style={{ marginBottom: 12 }}>
<Space style={{ marginBottom: 4 }}>
<Text style={{ color: '#64748b', fontSize: 12 }}>{field.label}</Text>
{renderFieldTag(field)}
{/* {renderFieldTag(field)} */}
</Space>
{field.editable ? (
<EditableInput
value={sectionValue[field.key]}
maxLength={field.maxLength}
onChange={(nextText) => onChange(setObjectField(safeValue, section.key, field.key, nextText))}
/>
field.type === 'boolean' ? (
<BooleanRadio
value={sectionValue[field.key]}
onChange={(nextValue) => onChange(setObjectField(safeValue, section.key, field.key, nextValue))}
/>
) : (
<EditableInput
value={sectionValue[field.key]}
maxLength={field.maxLength}
onChange={(nextText) => onChange(setObjectField(safeValue, section.key, field.key, nextText))}
/>
)
) : (
<ReadonlyBlock value={sectionValue[field.key]} />
)}
@@ -142,14 +163,21 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
<div key={field.key} style={{ marginBottom: 10 }}>
<Space style={{ marginBottom: 4 }}>
<Text style={{ color: '#64748b', fontSize: 12 }}>{field.label}</Text>
{renderFieldTag(field)}
{/* {renderFieldTag(field)} */}
</Space>
{field.editable ? (
<EditableInput
value={row[field.key]}
maxLength={field.maxLength}
onChange={(nextText) => onChange(setArrayObjectField(safeValue, section.key, index, field.key, nextText))}
/>
field.type === 'boolean' ? (
<BooleanRadio
value={row[field.key]}
onChange={(nextValue) => onChange(setArrayObjectField(safeValue, section.key, index, field.key, nextValue))}
/>
) : (
<EditableInput
value={row[field.key]}
maxLength={field.maxLength}
onChange={(nextText) => onChange(setArrayObjectField(safeValue, section.key, index, field.key, nextText))}
/>
)
) : (
<ReadonlyBlock value={row[field.key]} />
)}
@@ -170,7 +198,7 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
<div key={section.key} style={{ marginBottom: 18 }}>
<Space style={{ marginBottom: 8 }}>
<Text strong style={{ color: '#334155', fontSize: 13 }}>{section.label}</Text>
{renderFieldTag(section)}
{/* {renderFieldTag(section)} */}
</Space>
{section.editable ? (
<EditableInput
@@ -191,13 +219,13 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
return (
<div>
<Alert
{/* <Alert
type="info"
showIcon
style={{ marginBottom: 14 }}
message="仅可修改后台 Schema 配置允许编辑的字段"
description="视频规格、时间段、流程条目数量、输出规格、质量控制、合规控制等锁定内容由服务端最终校验。"
/>
/> */}
{sections.map((section) => {
if (!(section.key in safeValue)) return null;
if (section.type === 'object') return renderObjectSection(section);