From dc98671544a64b4bc4d063901a0953de65f2b430 Mon Sep 17 00:00:00 2001
From: Agions <1051736049@qq.com>
Date: Thu, 4 Jun 2026 16:21:56 +0800
Subject: [PATCH] fix(form): drop AntD Form/FormItem/useForm bridge, use native
 state instead
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User direction: project doesn't need AntD compat, doesn't need AntD
structural config. The <Form>/<FormItem>/useForm shim in
shared/components/ui/ui-components.tsx was fake AntD (neither real AntD
nor real RHF) and a source of confusion — Phase 2 dead-code cleanup
exposed it via broken jest-skipped ProjectEdit/ProjectDetail tests that
depended on this shim.

Removed from ui-components.tsx:
  - <Form> component (97 lines, fake AntD onFinish bridge)
  - <FormItem> component + FormWithItem compound pattern
  - useForm re-export (was useRhfForm as useForm)
  - FormValues type
  - ValidationRule/FormProps/FormItemProps interfaces
  - useRhfForm import

Replaced in 4 call sites with native React:

1. pages/project-edit/ProjectEditPage.tsx
   - useForm() bridge → useState for 2 fields (name, description)
   - setFieldsValue/validateFields/getFieldsValue/getFieldValue all gone
   - form.handleSubmit gone, validation is one if (!name.trim()) check
   - The page never rendered <Form> anyway — form lib was a value holder

2. features/script/components/ScriptGenerator.tsx
   - 8 useState hooks (topic/keywords/style/tone/length/audience/language/requirements)
   - buildFormValues() helper for handleGenerate payload
   - <Form onFinish> → native <form onSubmit>
   - 8 <FormItem> → direct <label> + controlled <Input>/<Select>/<RadioGroup>
   - 2 form.handleSubmit callsites → void handleGenerate()
   - Submit button onClick → htmlType=submit

3. shared/components/business/CompositionStudio/GlobalSettingsForm.tsx
   - Was a dead shell (Slider/InputNumber/Select had no value/onChange)
   - Now functional: 4 useState (frameDuration/effect/duration/easing) +
     onSave wire-up

4. shared/components/business/CompositionStudio/FrameEditForm.tsx
   - Same dead-shell pattern, now 12 useState + save/reset buttons
   - CameraMotion null → undefined (Select doesn't accept null value)

5. shared/components/business/CompositionStudio/index.tsx
   - 3 <FormItem label=> → plain <label> (no form state needed for skeleton)

Verification: lint 0 / tsc 0 / 1596 tests pass / build OK
react-vendor bundle dropped 311 KB → 287 KB (react-hook-form no longer
pulled into vendor chunk).
---
 .../script/components/ScriptGenerator.tsx     | 194 +++++++-------
 src/pages/project-edit/ProjectEditPage.tsx    |  35 +--
 .../CompositionStudio/FrameEditForm.tsx       | 244 ++++++++++--------
 .../CompositionStudio/GlobalSettingsForm.tsx  |  98 ++++---
 .../business/CompositionStudio/index.tsx      |  82 +++---
 src/shared/components/ui/ui-components.tsx    | 108 +-------
 6 files changed, 361 insertions(+), 400 deletions(-)

diff --git a/src/features/script/components/ScriptGenerator.tsx b/src/features/script/components/ScriptGenerator.tsx
index 6526793d..9cb4a048 100644
--- a/src/features/script/components/ScriptGenerator.tsx
+++ b/src/features/script/components/ScriptGenerator.tsx
@@ -22,21 +22,17 @@ import { Alert } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card as CardBase } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
 import { Progress } from '@/components/ui/progress';
 import { Tag } from '@/components/ui/tag';
 import { Text, Title, Paragraph } from '@/components/ui/typography';
 import {
-  Form,
-  FormItem,
-  useForm,
-  Input,
   Select,
   Space,
   Divider,
   RadioGroup,
   Radio,
   RadioButton,
-  type FormValues,
 } from '@/components/ui/ui-components';
 import { useModel, useModelCost } from '@/core/hooks/useModel';
 import { useProject } from '@/core/hooks/useProject';
@@ -111,7 +107,30 @@ export function ScriptGenerator({
   const { selectedModel, isConfigured } = useModel();
   const { estimateScriptCost, formatCost } = useModelCost();
 
-  const form = useForm();
+  // form refactor 2026-06-04: removed <Form>/<FormItem>/useForm AntD-style bridge.
+  // The script generator config is a flat bag of 8 primitive fields with no
+  // cross-field validation, so plain useState is the simplest correct form
+  // library here. The handleGenerate callback already received a FormValues
+  // dict from <Form> onFinish — rewrap the 8 fields into the same shape.
+  const [topic, setTopic] = useState('');
+  const [keywords, setKeywords] = useState<string[]>([]);
+  const [style, setStyle] = useState('professional');
+  const [tone, setTone] = useState('friendly');
+  const [length, setLength] = useState('medium');
+  const [audience, setAudience] = useState('general');
+  const [language, setLanguage] = useState('zh');
+  const [requirements, setRequirements] = useState('');
+
+  const buildFormValues = () => ({
+    topic,
+    keywords,
+    style,
+    tone,
+    length,
+    audience,
+    language,
+    requirements,
+  });
   const [isGenerating, setIsGenerating] = useState(false);
   const [progress, setProgress] = useState(0);
   const [generatedScript, setGeneratedScript] = useState<ScriptData | null>(null);
@@ -119,16 +138,16 @@ export function ScriptGenerator({
 
   // 估算成本
   const estimatedCost = useCallback(() => {
-    const length = form.getValues?.()?.length || 'medium';
-    const wordCount = LENGTH_OPTIONS.find((l) => l.value === length)?.words || '500-800字';
+    const currentLength = buildFormValues().length;
+    const wordCount = LENGTH_OPTIONS.find((l) => l.value === currentLength)?.words || '500-800字';
     const avgWords = parseInt(wordCount.split('-')[0]) + 200;
     return formatCost(estimateScriptCost(avgWords));
-  }, [form, estimateScriptCost, formatCost]);
+  }, [buildFormValues, estimateScriptCost, formatCost]);
 
   // 生成脚本
   const handleGenerate = useCallback(
-    async (values: FormValues) => {
-      const formData = values as ScriptFormValues;
+    async (values?: ScriptFormValues) => {
+      const formData = values ?? (buildFormValues() as unknown as ScriptFormValues);
       if (!selectedModel) {
         toast.warning('请先选择 AI 模型');
         setShowModelSelector(true);
@@ -203,8 +222,8 @@ export function ScriptGenerator({
 
   // 重新生成
   const handleRegenerate = useCallback(() => {
-    form.handleSubmit(handleGenerate)();
-  }, [form, handleGenerate]);
+    void handleGenerate();
+  }, [handleGenerate]);
 
   return (
     <div className={styles.container}>
@@ -260,84 +279,81 @@ export function ScriptGenerator({
         </AnimatePresence>
       </CardBase>
 
-      {/* 生成表单 */}
-      <Form
-        form={form}
-        layout="vertical"
-        onFinish={handleGenerate}
-        initialValues={{
-          style: 'professional',
-          tone: 'friendly',
-          length: 'medium',
-          audience: 'general',
-          language: 'zh',
+      {/* 生成表单 — 原 <Form>/<FormItem> 桥接被移除，改为原生 <form> + 受控 state */}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          void handleGenerate();
         }}
         className={styles.form}
       >
         <CardBase title="脚本设置" className={styles.settingsCard}>
-          <FormItem
-            name="topic"
-            label="脚本主题"
-            rules={[{ required: true, message: '请输入脚本主题' }]}
-          >
-            <Input placeholder="例如：如何制作一杯完美的拿铁咖啡" prefix={<FileText />} />
-          </FormItem>
-
-          <FormItem name="keywords" label="关键词（可选）">
-            <Select mode="tags" placeholder="输入关键词，按回车添加" style={{ width: '100%' }} />
-          </FormItem>
-
-          <FormItem name="style" label="脚本风格">
-            <RadioGroup optionType="button" buttonStyle="solid">
-              {STYLE_OPTIONS.map((opt) => (
-                <RadioButton key={opt.value} value={opt.value}>
-                  <span title={opt.desc}>{opt.label}</span>
-                </RadioButton>
-              ))}
-            </RadioGroup>
-          </FormItem>
-
-          <FormItem name="tone" label="语气语调">
-            <RadioGroup optionType="button">
-              {TONE_OPTIONS.map((opt) => (
-                <RadioButton key={opt.value} value={opt.value}>
-                  {opt.label}
-                </RadioButton>
-              ))}
-            </RadioGroup>
-          </FormItem>
-
-          <FormItem name="length" label="脚本长度">
-            <RadioGroup optionType="button">
-              {LENGTH_OPTIONS.map((opt) => (
-                <RadioButton key={opt.value} value={opt.value}>
-                  <span title={`${opt.desc}，约${opt.words}`}>{opt.label}</span>
-                </RadioButton>
-              ))}
-            </RadioGroup>
-          </FormItem>
-
-          <FormItem name="audience" label="目标受众">
-            <Select
-              placeholder="选择目标受众"
-              options={AUDIENCE_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label }))}
-            />
-          </FormItem>
-
-          <FormItem name="language" label="语言">
-            <RadioGroup>
-              <Radio value="zh">中文</Radio>
-              <Radio value="en">English</Radio>
-            </RadioGroup>
-          </FormItem>
-
-          <FormItem name="requirements" label="特殊要求（可选）">
-            <textarea
-              rows={3}
-              className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-              placeholder="例如：需要包含产品介绍、使用步骤、注意事项等"
-            />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">脚本主题</label>
+          <Input
+            value={topic}
+            onChange={(e) => setTopic(e.target.value)}
+            placeholder="例如：如何制作一杯完美的拿铁咖啡"
+            prefix={<FileText />}
+          />
+
+          <label className="block text-sm font-medium mb-1">关键词（可选）</label>
+          <Select
+            value={keywords}
+            mode="tags"
+            placeholder="输入关键词，按回车添加"
+            style={{ width: '100%' }}
+            onChange={(v) => setKeywords(v as string[])}
+          />
+
+          <label className="block text-sm font-medium mb-1">脚本风格</label>
+          <RadioGroup optionType="button" buttonStyle="solid" value={style} onChange={setStyle}>
+            {STYLE_OPTIONS.map((opt) => (
+              <RadioButton key={opt.value} value={opt.value}>
+                <span title={opt.desc}>{opt.label}</span>
+              </RadioButton>
+            ))}
+          </RadioGroup>
+
+          <label className="block text-sm font-medium mb-1">语气语调</label>
+          <RadioGroup optionType="button" value={tone} onChange={setTone}>
+            {TONE_OPTIONS.map((opt) => (
+              <RadioButton key={opt.value} value={opt.value}>
+                {opt.label}
+              </RadioButton>
+            ))}
+          </RadioGroup>
+
+          <label className="block text-sm font-medium mb-1">脚本长度</label>
+          <RadioGroup optionType="button" value={length} onChange={setLength}>
+            {LENGTH_OPTIONS.map((opt) => (
+              <RadioButton key={opt.value} value={opt.value}>
+                <span title={`${opt.desc}，约${opt.words}`}>{opt.label}</span>
+              </RadioButton>
+            ))}
+          </RadioGroup>
+
+          <label className="block text-sm font-medium mb-1">目标受众</label>
+          <Select
+            value={audience}
+            placeholder="选择目标受众"
+            options={AUDIENCE_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label }))}
+            onChange={(v) => setAudience(v as string)}
+          />
+
+          <label className="block text-sm font-medium mb-1">语言</label>
+          <RadioGroup value={language} onChange={setLanguage}>
+            <Radio value="zh">中文</Radio>
+            <Radio value="en">English</Radio>
+          </RadioGroup>
+
+          <label className="block text-sm font-medium mb-1">特殊要求（可选）</label>
+          <textarea
+            rows={3}
+            value={requirements}
+            onChange={(e) => setRequirements(e.target.value)}
+            className="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            placeholder="例如：需要包含产品介绍、使用步骤、注意事项等"
+          />
         </CardBase>
 
         {/* 生成按钮 */}
@@ -347,7 +363,7 @@ export function ScriptGenerator({
               type="primary"
               size="large"
               icon={isGenerating ? <Loader /> : <Zap />}
-              onClick={() => form.handleSubmit(handleGenerate)()}
+              htmlType="submit"
               disabled={isGenerating || !selectedModel || !isConfigured}
               block
             >
@@ -359,7 +375,7 @@ export function ScriptGenerator({
             <Alert>预估成本: {estimatedCost()}</Alert>
           </Space>
         </div>
-      </Form>
+      </form>
 
       {/* 生成结果 */}
       <AnimatePresence>
diff --git a/src/pages/project-edit/ProjectEditPage.tsx b/src/pages/project-edit/ProjectEditPage.tsx
index 7ec37725..2236e00a 100644
--- a/src/pages/project-edit/ProjectEditPage.tsx
+++ b/src/pages/project-edit/ProjectEditPage.tsx
@@ -20,7 +20,6 @@ import CostDashboard from '@/components/business/CostDashboard';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { useForm } from '@/components/ui/ui-components';
 import {
   aiService,
   tauriService,
@@ -89,10 +88,12 @@ const ProjectEdit = () => {
   const { projectId } = useParams();
   const location = useLocation();
   const navigate = useNavigate();
-  // NOTE: useForm from RHF, but component uses Antd-style API (setFieldsValue/getFieldsValue/validateFields).
-  // The form instance bridges both libraries. Cast to any is intentional until form refactor.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [form] = useForm() as any;
+  // The project name/description used to live behind a RHF useForm()
+  // instance, but ProjectEditPage never rendered a <Form> — the form
+  // library was only used as a value holder. Replaced with plain state
+  // since there are only 2 fields and no validation needs.
+  const [name, setName] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
 
   const [currentStep, setCurrentStep] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -193,10 +194,8 @@ const ProjectEdit = () => {
         .then((projectText) => {
           const projectData = JSON.parse(projectText) as ProjectData;
           setProject(projectData);
-          form.setFieldsValue({
-            name: projectData.name,
-            description: projectData.description,
-          });
+          setName(projectData.name);
+          setDescription(projectData.description ?? '');
 
           if (projectData.content) setContent(projectData.content);
           if (projectData.novelMetadata) setNovelMetadata(projectData.novelMetadata);
@@ -258,7 +257,7 @@ const ProjectEdit = () => {
           setInitialLoading(false);
         });
     }
-  }, [projectId, form, location.search]);
+  }, [projectId, name, description, location.search]);
 
   // --- 事件处理函数 ---
 
@@ -469,18 +468,20 @@ const ProjectEdit = () => {
 
   const handleSaveProject = async () => {
     try {
-      await form.validateFields();
+      if (!name.trim()) {
+        toast.error('请填写项目名称');
+        return;
+      }
       if (!content) {
         toast.error('请先导入小说/剧本内容');
         return;
       }
       setSaving(true);
-      const formData = form.getFieldsValue();
       const now = new Date().toISOString();
       const projectData: ProjectData = {
         id: project?.id ?? uuid(),
-        name: formData.name,
-        description: formData.description,
+        name: name.trim(),
+        description: description.trim(),
         content: content,
         createdAt: project?.createdAt ?? now,
         updatedAt: now,
@@ -529,7 +530,7 @@ const ProjectEdit = () => {
       const mdContent = reviewExportService.toMarkdown({
         project: {
           id: project.id,
-          name: form.getFieldValue('name') ?? project.name ?? '未命名项目',
+          name: name || project.name || '未命名项目',
           storyboardFrameCount: storyboardFrames.length,
         },
         comments: projectComments,
@@ -543,7 +544,7 @@ const ProjectEdit = () => {
         mdContent,
         {
           projectId: project.id,
-          projectName: form.getFieldValue('name') ?? project.name ?? '未命名项目',
+          projectName: name || project.name || '未命名项目',
           source: 'project_edit',
         }
       );
@@ -701,7 +702,7 @@ const ProjectEdit = () => {
             exportPreset={exportPreset}
             exportSettings={exportSettings}
             projectId={project?.id}
-            projectName={form.getFieldValue('name') ?? '未命名项目'}
+            projectName={name || project?.name || '未命名项目'}
             storyboardFrameCount={storyboardFrames.length}
             qualityGateIssues={exportQualityGate.issues}
             qualityGatePassed={exportQualityGate.passed}
diff --git a/src/shared/components/business/CompositionStudio/FrameEditForm.tsx b/src/shared/components/business/CompositionStudio/FrameEditForm.tsx
index 8b37f902..8f5848a6 100644
--- a/src/shared/components/business/CompositionStudio/FrameEditForm.tsx
+++ b/src/shared/components/business/CompositionStudio/FrameEditForm.tsx
@@ -1,21 +1,18 @@
 /**
  * 帧编辑表单组件
+ *
+ * form refactor 2026-06-04: 原 <Form>/<FormItem> 桥接被移除。
+ * 原实现是死壳：Slider/InputNumber/Select 全未绑 value/onChange，
+ * 纯展示骨架。改成原生受控 state + 显式 save 按钮调用 onSave。
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useState } from 'react';
 
-import {
-  Divider,
-  Form,
-  FormItem,
-  InputNumber,
-  Row,
-  Col,
-  Select,
-} from '@/components/ui/ui-components';
+import { Button } from '@/components/ui/button';
 import { SelectItem } from '@/components/ui/select';
 import { Slider } from '@/components/ui/slider';
-import type { FrameAnimation, CameraMotionConfig } from '@/shared/types/composition';
+import { Divider, InputNumber, Row, Col, Select } from '@/components/ui/ui-components';
+import type { CameraMotionConfig, FrameAnimation } from '@/shared/types/composition';
 
 const CAMERA_MOTION_OPTIONS = [
   { value: 'static', label: '静止' },
@@ -41,143 +38,170 @@ const FrameEditForm = ({
   frameId: _frameId,
   initialValues,
   onSave,
-  onReset: _onReset,
+  onReset,
 }: FrameEditFormProps) => {
-  const handleFinish = useCallback(
-    (values: {
-      cameraMotion: string | null;
-      cameraDuration?: number;
-      cameraIntensity?: number;
-      zoom?: number;
-      panX?: number;
-      panY?: number;
-      rotation?: number;
-      opacity?: number;
-      blur?: number;
-      brightness?: number;
-      contrast?: number;
-      saturation?: number;
-    }) => {
-      onSave({
-        cameraMotion: values.cameraMotion
-          ? {
-              type: values.cameraMotion as CameraMotionConfig['type'],
-              duration: values.cameraDuration ?? 1,
-              intensity: values.cameraIntensity ?? 0.5,
-            }
-          : null,
-        zoom: values.zoom,
-        pan: { x: values.panX ?? 0, y: values.panY ?? 0 },
-        rotation: values.rotation ?? 0,
-        opacity: values.opacity ?? 1,
-        filters: {
-          blur: values.blur ?? 0,
-          brightness: values.brightness ?? 100,
-          contrast: values.contrast ?? 100,
-          saturation: values.saturation ?? 100,
-        },
-      });
-    },
-    [onSave]
+  const [cameraMotion, setCameraMotion] = useState<CameraMotionConfig['type'] | undefined>(
+    initialValues?.cameraMotion?.type
   );
-
-  const formInitialValues = useMemo(
-    () => ({
-      cameraMotion: initialValues?.cameraMotion?.type ?? null,
-      cameraDuration: initialValues?.cameraMotion?.duration ?? 1,
-      cameraIntensity: initialValues?.cameraMotion?.intensity ?? 0.5,
-      zoom: initialValues?.zoom ?? 1,
-      panX: initialValues?.pan?.x ?? 0,
-      panY: initialValues?.pan?.y ?? 0,
-      rotation: initialValues?.rotation ?? 0,
-      opacity: initialValues?.opacity ?? 1,
-      blur: initialValues?.filters?.blur ?? 0,
-      brightness: initialValues?.filters?.brightness ?? 100,
-      contrast: initialValues?.filters?.contrast ?? 100,
-      saturation: initialValues?.filters?.saturation ?? 100,
-    }),
-    [initialValues]
+  const [cameraDuration, setCameraDuration] = useState<number>(
+    initialValues?.cameraMotion?.duration ?? 1
+  );
+  const [cameraIntensity, setCameraIntensity] = useState<number>(
+    initialValues?.cameraMotion?.intensity ?? 0.5
   );
+  const [zoom, setZoom] = useState<number>(initialValues?.zoom ?? 1);
+  const [panX, setPanX] = useState<number>(initialValues?.pan?.x ?? 0);
+  const [panY, setPanY] = useState<number>(initialValues?.pan?.y ?? 0);
+  const [rotation, setRotation] = useState<number>(initialValues?.rotation ?? 0);
+  const [opacity, setOpacity] = useState<number>(initialValues?.opacity ?? 1);
+  const [blur, setBlur] = useState<number>(initialValues?.filters?.blur ?? 0);
+  const [brightness, setBrightness] = useState<number>(initialValues?.filters?.brightness ?? 100);
+  const [contrast, setContrast] = useState<number>(initialValues?.filters?.contrast ?? 100);
+  const [saturation, setSaturation] = useState<number>(initialValues?.filters?.saturation ?? 100);
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({
+      cameraMotion: cameraMotion
+        ? { type: cameraMotion, duration: cameraDuration, intensity: cameraIntensity }
+        : null,
+      zoom,
+      pan: { x: panX, y: panY },
+      rotation,
+      opacity,
+      filters: { blur, brightness, contrast, saturation },
+    });
+  };
 
   return (
-    <Form layout="vertical" initialValues={formInitialValues} onFinish={handleFinish as (values: unknown) => void}>
+    <form onSubmit={handleSave}>
       <Divider orientation="left">镜头运动</Divider>
       <Row gutter={16}>
         <Col span={12}>
-          <FormItem name="cameraMotion" label="运动类型">
-            <Select placeholder="选择镜头运动">
-              {CAMERA_MOTION_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </Select>
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">运动类型</label>
+          <Select
+            value={cameraMotion}
+            onChange={(v) => {
+              if (typeof v === 'string') setCameraMotion(v as CameraMotionConfig['type']);
+            }}
+            placeholder="选择镜头运动"
+          >
+            {CAMERA_MOTION_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </Select>
         </Col>
         <Col span={12}>
-          <FormItem name="cameraDuration" label="持续时间 (秒)">
-            <InputNumber min={0.1} max={10} style={{ width: '100%' }} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">持续时间 (秒)</label>
+          <InputNumber
+            min={0.1}
+            max={10}
+            style={{ width: '100%' }}
+            value={cameraDuration}
+            onChange={(v) => setCameraDuration(v as number)}
+          />
         </Col>
       </Row>
       <Row gutter={16}>
         <Col span={12}>
-          <FormItem name="cameraIntensity" label="运动强度">
-            <Slider min={0} max={1} step={0.1} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">运动强度</label>
+          <Slider
+            min={0}
+            max={1}
+            step={0.1}
+            value={cameraIntensity}
+            onChange={(v) => setCameraIntensity(v as number)}
+          />
         </Col>
         <Col span={12}>
-          <FormItem name="zoom" label="缩放">
-            <Slider min={0.1} max={3} step={0.1} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">缩放</label>
+          <Slider
+            min={0.1}
+            max={3}
+            step={0.1}
+            value={zoom}
+            onChange={(v) => setZoom(v as number)}
+          />
         </Col>
       </Row>
 
       <Divider orientation="left">几何变换</Divider>
       <Row gutter={16}>
         <Col span={8}>
-          <FormItem name="panX" label="平移 X">
-            <InputNumber min={-100} max={100} style={{ width: '100%' }} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">平移 X</label>
+          <InputNumber
+            min={-100}
+            max={100}
+            style={{ width: '100%' }}
+            value={panX}
+            onChange={(v) => setPanX(v as number)}
+          />
         </Col>
         <Col span={8}>
-          <FormItem name="panY" label="平移 Y">
-            <InputNumber min={-100} max={100} style={{ width: '100%' }} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">平移 Y</label>
+          <InputNumber
+            min={-100}
+            max={100}
+            style={{ width: '100%' }}
+            value={panY}
+            onChange={(v) => setPanY(v as number)}
+          />
         </Col>
         <Col span={8}>
-          <FormItem name="rotation" label="旋转角度">
-            <InputNumber min={-180} max={180} style={{ width: '100%' }} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">旋转角度</label>
+          <InputNumber
+            min={-180}
+            max={180}
+            style={{ width: '100%' }}
+            value={rotation}
+            onChange={(v) => setRotation(v as number)}
+          />
         </Col>
       </Row>
-      <FormItem name="opacity" label="透明度">
-        <Slider min={0} max={1} step={0.05} />
-      </FormItem>
+      <label className="block text-sm font-medium mb-1">透明度</label>
+      <Slider
+        min={0}
+        max={1}
+        step={0.05}
+        value={opacity}
+        onChange={(v) => setOpacity(v as number)}
+      />
 
       <Divider orientation="left">滤镜</Divider>
       <Row gutter={16}>
         <Col span={8}>
-          <FormItem name="blur" label="模糊">
-            <Slider min={0} max={10} step={0.5} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">模糊</label>
+          <Slider min={0} max={10} step={0.5} value={blur} onChange={(v) => setBlur(v as number)} />
         </Col>
         <Col span={8}>
-          <FormItem name="brightness" label="亮度">
-            <Slider min={0} max={200} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">亮度</label>
+          <Slider
+            min={0}
+            max={200}
+            value={brightness}
+            onChange={(v) => setBrightness(v as number)}
+          />
         </Col>
         <Col span={8}>
-          <FormItem name="contrast" label="对比度">
-            <Slider min={0} max={200} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">对比度</label>
+          <Slider min={0} max={200} value={contrast} onChange={(v) => setContrast(v as number)} />
         </Col>
       </Row>
-      <FormItem name="saturation" label="饱和度">
-        <Slider min={0} max={200} />
-      </FormItem>
-    </Form>
+      <label className="block text-sm font-medium mb-1">饱和度</label>
+      <Slider min={0} max={200} value={saturation} onChange={(v) => setSaturation(v as number)} />
+
+      <div className="flex gap-2 mt-4">
+        <Button type="primary" htmlType="submit">
+          保存
+        </Button>
+        <Button type="default" onClick={onReset}>
+          重置
+        </Button>
+      </div>
+    </form>
   );
 };
 
-export default FrameEditForm;
\ No newline at end of file
+export default FrameEditForm;
diff --git a/src/shared/components/business/CompositionStudio/GlobalSettingsForm.tsx b/src/shared/components/business/CompositionStudio/GlobalSettingsForm.tsx
index 6571cdbb..f1e8f90a 100644
--- a/src/shared/components/business/CompositionStudio/GlobalSettingsForm.tsx
+++ b/src/shared/components/business/CompositionStudio/GlobalSettingsForm.tsx
@@ -1,20 +1,16 @@
 /**
  * 合成全局设置表单组件
+ *
+ * form refactor 2026-06-04: 原 <Form>/<FormItem> 桥接被移除。
+ * 该组件原本就只是表单骨架的占位实现 (Slider/InputNumber/Select 都未绑
+ * value/onChange 双向绑定)，改成原生受控 state 即可，无功能损失。
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
-import {
-  Divider,
-  Form,
-  FormItem,
-  InputNumber,
-  Row,
-  Col,
-  Select,
-} from '@/components/ui/ui-components';
 import { SelectItem } from '@/components/ui/select';
 import { Slider } from '@/components/ui/slider';
+import { Divider, InputNumber, Row, Col, Select } from '@/components/ui/ui-components';
 import type { TransitionConfig, TransitionEffect } from '@/core/types';
 
 interface GlobalSettingsFormProps {
@@ -46,50 +42,74 @@ const TRANSITION_OPTIONS = [
 ];
 
 function GlobalSettingsForm({ initialValues, onSave }: GlobalSettingsFormProps) {
+  const [frameDuration, setFrameDuration] = useState<number>(initialValues.frameDuration);
+  const [effect, setEffect] = useState<TransitionEffect>(initialValues.defaultTransition.effect);
+  const [transitionDuration, setTransitionDuration] = useState<number>(
+    initialValues.defaultTransition.duration
+  );
+  const [easing, setEasing] = useState<string | undefined>(initialValues.defaultTransition.easing);
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave({
+      frameDuration,
+      defaultTransition: { effect, duration: transitionDuration, easing },
+      transitions: initialValues.transitions,
+    });
+  };
+
   return (
-    <Form layout="vertical" initialValues={initialValues} onFinish={onSave as (values: unknown) => void}>
-      <FormItem name="frameDuration" label="默认帧时长 (秒)">
-        <Slider min={1} max={10} step={0.5} />
-      </FormItem>
+    <form onSubmit={handleSave}>
+      <label className="block text-sm font-medium mb-1">默认帧时长 (秒)</label>
+      <Slider
+        min={1}
+        max={10}
+        step={0.5}
+        value={frameDuration}
+        onChange={(v) => setFrameDuration(v as number)}
+      />
 
       <Divider orientation="left">默认转场</Divider>
       <Row gutter={16}>
         <Col span={12}>
-          <FormItem name="defaultTransition.effect" label="转场效果">
-            <Select>
-              {TRANSITION_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </Select>
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">转场效果</label>
+          <Select value={effect} onChange={(v) => setEffect(v as TransitionEffect)}>
+            {TRANSITION_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </Select>
         </Col>
         <Col span={12}>
-          <FormItem name="defaultTransition.duration" label="转场时长 (秒)">
-            <InputNumber min={0.1} max={5} step={0.1} style={{ width: '100%' }} />
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">转场时长 (秒)</label>
+          <InputNumber
+            min={0.1}
+            max={5}
+            step={0.1}
+            style={{ width: '100%' }}
+            value={transitionDuration}
+            onChange={(v) => setTransitionDuration(v as number)}
+          />
         </Col>
       </Row>
       <Row gutter={16}>
         <Col span={24}>
-          <FormItem name="defaultTransition.easing" label="缓动函数">
-            <Select>
-              <SelectItem value="linear">线性</SelectItem>
-              <SelectItem value="ease-in">渐快</SelectItem>
-              <SelectItem value="ease-out">渐慢</SelectItem>
-              <SelectItem value="ease-in-out">先慢后快再慢</SelectItem>
-            </Select>
-          </FormItem>
+          <label className="block text-sm font-medium mb-1">缓动函数</label>
+          <Select value={easing} onChange={(v) => setEasing(v as string)}>
+            <SelectItem value="linear">线性</SelectItem>
+            <SelectItem value="ease-in">渐快</SelectItem>
+            <SelectItem value="ease-out">渐慢</SelectItem>
+            <SelectItem value="ease-in-out">先慢后快再慢</SelectItem>
+          </Select>
         </Col>
       </Row>
 
       <Divider orientation="left">逐段转场配置（可选）</Divider>
-      <FormItem name="transitions" label="分镜间转场">
-        <div />
-      </FormItem>
-    </Form>
+      {/* 预留：分镜间转场配置，暂无 UI 需求 */}
+      <div />
+    </form>
   );
 }
 
-export default GlobalSettingsForm;
\ No newline at end of file
+export default GlobalSettingsForm;
diff --git a/src/shared/components/business/CompositionStudio/index.tsx b/src/shared/components/business/CompositionStudio/index.tsx
index eef2623b..cae326a5 100644
--- a/src/shared/components/business/CompositionStudio/index.tsx
+++ b/src/shared/components/business/CompositionStudio/index.tsx
@@ -31,8 +31,6 @@ import { Timeline, TimelineItem } from '@/components/ui/timeline';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
 import { Text } from '@/components/ui/typography';
 import {
-  Form,
-  FormItem,
   Select,
   InputNumber,
   Space,
@@ -51,10 +49,9 @@ import type {
 } from '@/core/types';
 import { generatePrefixedId } from '@/shared/utils';
 
-import styles from './index.module.less';
-
-import GlobalSettingsForm from './GlobalSettingsForm';
 import FrameEditForm from './FrameEditForm';
+import GlobalSettingsForm from './GlobalSettingsForm';
+import styles from './index.module.less';
 
 // PreviewArea subcomponent
 interface PreviewAreaProps {
@@ -249,30 +246,22 @@ const KeyframeEditorContent: React.FC<KeyframeEditorContentProps> = ({
     <Divider orientation="left">添加关键帧</Divider>
     <Row gutter={16}>
       <Col span={8}>
-        <FormItem label="时间点 (秒)">
-          <InputNumber
-            min={0}
-            max={frameDuration}
-            style={{ width: '100%' }}
-            placeholder="0-3"
-          />
-        </FormItem>
+        <label className="block text-sm font-medium mb-1">时间点 (秒)</label>
+        <InputNumber min={0} max={frameDuration} style={{ width: '100%' }} placeholder="0-3" />
       </Col>
       <Col span={8}>
-        <FormItem label="属性">
-          <Select placeholder="选择属性">
-            <SelectItem value="zoom">缩放</SelectItem>
-            <SelectItem value="rotation">旋转</SelectItem>
-            <SelectItem value="opacity">透明度</SelectItem>
-            <SelectItem value="pan-x">水平平移</SelectItem>
-            <SelectItem value="pan-y">垂直平移</SelectItem>
-          </Select>
-        </FormItem>
+        <label className="block text-sm font-medium mb-1">属性</label>
+        <Select placeholder="选择属性">
+          <SelectItem value="zoom">缩放</SelectItem>
+          <SelectItem value="rotation">旋转</SelectItem>
+          <SelectItem value="opacity">透明度</SelectItem>
+          <SelectItem value="pan-x">水平平移</SelectItem>
+          <SelectItem value="pan-y">垂直平移</SelectItem>
+        </Select>
       </Col>
       <Col span={8}>
-        <FormItem label="值">
-          <InputNumber style={{ width: '100%' }} placeholder="数值" />
-        </FormItem>
+        <label className="block text-sm font-medium mb-1">值</label>
+        <InputNumber style={{ width: '100%' }} placeholder="数值" />
       </Col>
     </Row>
     <Button type="dashed" block icon={<Plus />}>
@@ -508,27 +497,30 @@ const CompositionStudio = ({ frames, projectId, onCompositionChange }: Compositi
   }, []);
 
   // 保存全局设置
-  const handleSaveGlobalSettings = useCallback((values: {
-    frameDuration: number;
-    defaultTransition: { effect: TransitionEffect; duration: number; easing?: string };
-    transitions?: TransitionConfig[];
-  }) => {
-    setComposition((prev) => ({
-      ...prev,
-      masterSettings: {
-        ...prev.masterSettings,
-        frameDuration: values.frameDuration,
-        defaultTransition: {
-          ...values.defaultTransition,
-          effect: values.defaultTransition.effect as TransitionEffect,
+  const handleSaveGlobalSettings = useCallback(
+    (values: {
+      frameDuration: number;
+      defaultTransition: { effect: TransitionEffect; duration: number; easing?: string };
+      transitions?: TransitionConfig[];
+    }) => {
+      setComposition((prev) => ({
+        ...prev,
+        masterSettings: {
+          ...prev.masterSettings,
+          frameDuration: values.frameDuration,
+          defaultTransition: {
+            ...values.defaultTransition,
+            effect: values.defaultTransition.effect as TransitionEffect,
+          },
         },
-      },
-      transitions: values.transitions ?? [],
-      updatedAt: new Date().toISOString(),
-    }));
-    setGlobalModalVisible(false);
-    toast.success('全局设置已保存');
-  }, []);
+        transitions: values.transitions ?? [],
+        updatedAt: new Date().toISOString(),
+      }));
+      setGlobalModalVisible(false);
+      toast.success('全局设置已保存');
+    },
+    []
+  );
 
   // 预览转场效果
   const handlePreviewTransition = useCallback((_transition: TransitionConfig) => {
diff --git a/src/shared/components/ui/ui-components.tsx b/src/shared/components/ui/ui-components.tsx
index 6a41adb1..f537ad17 100644
--- a/src/shared/components/ui/ui-components.tsx
+++ b/src/shared/components/ui/ui-components.tsx
@@ -14,7 +14,6 @@
 // ============================================================
 
 import * as React from 'react';
-import { useForm as useRhfForm, type UseFormReturn as RhfUseFormReturn } from 'react-hook-form';
 
 import { Alert as LegacyAlert } from '@/components/ui/alert';
 import {
@@ -79,102 +78,14 @@ import { Upload, type UploadProps } from '@/components/ui/upload';
 import { cn } from '@/shared/utils/class-names';
 
 // ============================================================
-// AntD-compatible Form (wraps react-hook-form + shadcn)
-// ============================================================
-
-// Form values type
-export type FormValues = Record<string, unknown>;
-
-// Validation rule type (simplified)
-interface ValidationRule {
-  required?: boolean;
-  message?: string;
-  min?: number;
-  max?: number;
-  pattern?: RegExp;
-  validator?: (value: unknown) => boolean | Promise<boolean>;
-}
-
-interface FormProps {
-  form?: RhfUseFormReturn<FormValues>;
-  layout?: 'vertical' | 'horizontal' | 'inline';
-  onFinish?: (values: FormValues) => void;
-  initialValues?: FormValues;
-  className?: string;
-  children?: React.ReactNode;
-  Item?: typeof FormItem;
-}
-
-function Form({
-  form,
-  layout = 'vertical',
-  onFinish,
-  initialValues,
-  className,
-  children,
-}: FormProps) {
-  return (
-    <form
-      className={className}
-      onSubmit={(e) => {
-        e.preventDefault();
-        if (form) {
-          form.handleSubmit((data) => {
-            onFinish?.(data as FormValues);
-          })();
-        }
-        if (onFinish) {
-          const formData = new FormData(e.currentTarget);
-          const values: Record<string, any> = {};
-          formData.forEach((v, k) => {
-            values[k] = v;
-          });
-          // Merge with initialValues if form has them
-          if (form && initialValues) {
-            Object.assign(values, initialValues);
-          }
-          onFinish(values);
-        }
-      }}
-      style={{
-        display: 'flex',
-        flexDirection: layout === 'vertical' ? 'column' : 'row',
-        gap: layout === 'horizontal' ? '1rem' : 0,
-      }}
-    >
-      {/* react-hook-form needs special handling, fall through for now */}
-      {children}
-    </form>
-  );
-}
-
-// Form.Item as a property on Form - defined after FormItem declaration
-interface FormItemProps {
-  name?: string | string[];
-  label?: React.ReactNode;
-  rules?: ValidationRule[];
-  dependencies?: string[];
-  children: React.ReactNode;
-  className?: string;
-}
-
-function FormItem({ label, children, className }: FormItemProps) {
-  return (
-    <div className={cn('flex flex-col gap-1', className)}>
-      {label && <label className="text-sm font-medium">{label}</label>}
-      {children}
-    </div>
-  );
-}
-
-// Form with Item property using compound component pattern
-interface FormWithItem extends React.FC<FormProps> {
-  Item: typeof FormItem;
-}
-
-const FormWithItem: FormWithItem = Object.assign(Form as FormWithItem, {
-  Item: FormItem,
-});
+// AntD Form 兼容层已废弃 (2026-06-04 form refactor)：
+// - <Form>/<FormItem>/useForm 桥接 react-hook-form 的设计是过度工程
+// - 项目不需要 AntD 兼容 + 不需要 AntD 结构配置
+// - 替代方案：ScriptGenerator / GlobalSettingsForm / FrameEditForm / ProjectEdit
+//   改用原生受控 state (useState) 或 shadcn 原生 <form> + useForm 直接从 react-hook-form
+// - 保留的非 Form 组件（Modal/Spin/Space/Empty/Button/Card/Input 等）继续 re-export
+//
+// 如未来需要表单能力，直接从 'react-hook-form' 导入 useForm，不要再过此桥接层。
 
 // ============================================================
 // AntD-compatible Select with options prop
@@ -502,8 +413,6 @@ function LegacyTable({
 // ============================================================
 
 export {
-  FormWithItem as Form,
-  FormItem,
   LegacySelect as Select,
   RadioGroup,
   Radio,
@@ -530,7 +439,6 @@ export {
   ShadcnText as Text,
   ShadcnTitle as Title,
   ShadcnParagraph as Paragraph,
-  useRhfForm as useForm,
   Button,
   ListWrapper as ListWithItem,
   ListItem,