拆镜复刻

video-gen-app/src/components/VideoPromptSchemaEditor.tsx

@@ -20,6 +20,12 @@ const LOCKED_TOP_LEVEL_KEYS = new Set([
   '质量控制',
 ]);
 
+const HIDDEN_TOP_LEVEL_KEYS = new Set([
+  'schemaUsage',
+  'schemaVersion',
+  '输出规格限制',
+]);
+
 const LOCKED_FRAME_KEYS = new Set([
   '视频时长',
   '视频比例',
@@ -174,7 +180,7 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
             <Space>
               <Text strong style={{ color: '#334155', fontSize: 13 }}>{fieldTitle(key)}</Text>
-              {!editableArray && <Tag color="default">锁定结构</Tag>}
+              {/* {!editableArray && <Tag color="default">锁定结构</Tag>} */}
             </Space>
             {editableArray && (
               <Button size="small" type="link" onClick={() => onChange(addArrayItem(safeValue, path, sample))}>
@@ -211,11 +217,11 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
             )}
           </div>
 
-          {(rootKey === '动作流程' || rootKey === '镜头流程') && (
+          {/* {(rootKey === '动作流程' || rootKey === '镜头流程') && (
             <Text style={{ display: 'block', marginTop: 6, color: '#94a3b8', fontSize: 12 }}>
               时间段和条目数量由后端锁定，只允许编辑每段里的动作、镜头、说明等内容。
             </Text>
-          )}
+          )} */}
         </div>
       );
     }
@@ -226,7 +232,7 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
         <div key={path.join('.')} style={{ marginBottom: 18 }}>
           <Space style={{ marginBottom: 8 }}>
             <Text strong style={{ color: '#334155', fontSize: 13 }}>{fieldTitle(key)}</Text>
-            {lockedSection && <Tag color="default">只读</Tag>}
+            {/* {lockedSection && <Tag color="default">只读</Tag>} */}
           </Space>
           <div
             style={{
@@ -246,10 +252,11 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
       <div key={path.join('.')} style={{ marginBottom: 12 }}>
         <Space style={{ marginBottom: 4 }}>
           <Text style={{ color: '#64748b', fontSize: 12 }}>{fieldTitle(key)}</Text>
-          {locked && <Tag color="default">只读</Tag>}
+          {/* {locked && <Tag color="default">只读12312</Tag>} */}
         </Space>
         {locked ? (
           <ReadonlyBlock value={nodeValue} />
+          // <></>
         ) : (
           <EditableInput value={nodeValue} onChange={(nextText) => updatePath(path, nextText)} />
         )}
@@ -263,10 +270,12 @@ const VideoPromptSchemaEditor: React.FC<VideoPromptSchemaEditorProps> = ({ value
 
   return (
     <div>
-      <div style={{ marginBottom: 14, padding: 12, borderRadius: 10, background: '#f8fafc', color: '#64748b', fontSize: 13, lineHeight: 1.7 }}>
+      {/* <div style={{ marginBottom: 14, padding: 12, borderRadius: 10, background: '#f8fafc', color: '#64748b', fontSize: 13, lineHeight: 1.7 }}>
         视频时长、比例、清晰度、帧率、推荐分辨率、动态时间规划、输出规格、质量控制、合规控制、schema 协议字段为只读；动作/镜头流程保留原时间段和条目数量，只允许编辑内容描述。
-      </div>
-      {Object.entries(safeValue).map(([key, childValue]) => renderNode(key, childValue, [key]))}
+      </div> */}
+      {Object.entries(safeValue)
+        .filter(([key]) => !HIDDEN_TOP_LEVEL_KEYS.has(key))
+        .map(([key, childValue]) => renderNode(key, childValue, [key]))}
     </div>
   );
 };

video-gen-app/src/components/VideoTrimPicker.tsx

@@ -599,6 +599,27 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
                 onChangeComplete={handleRangeChangeComplete}
                 tooltip={{ formatter: (value) => `${toIntegerSecond(Number(value || 0))}s` }}
                 disabled={!integerDuration || disabledByDuration}
+                styles={{
+                  track: {
+                    background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                    height: 6,
+                    borderRadius: 3,
+                  },
+                  rail: {
+                    background: '#e2e8f0',
+                    height: 6,
+                    borderRadius: 3,
+                  },
+                  handle: {
+                    width: 18,
+                    height: 18,
+                    marginTop: 0,
+                    // backgroundColor: '#fff',
+                    // border: '3px solid #6366f1',
+                    boxShadow: '0 2px 8px rgba(99, 102, 241, 0.3)',
+                    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+                  },
+                }}
               />
             </div>
           </div>
@@ -606,7 +627,7 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
           <div style={{ marginTop: 30, textAlign: 'center', color: '#64748b', fontSize: 16 }}>
             已选取 {selectedDuration}s
             <span style={{ marginLeft: 12, fontSize: 13, color: '#94a3b8' }}>
-              最小 {minDuration}s，最大 {maxDuration}s，开始/结束秒数均为整数
+              最小 {minDuration}s，最大 {maxDuration}s
             </span>
           </div>