diff --git a/apps/web/src/pages/generate/GeneratePage.tsx b/apps/web/src/pages/generate/GeneratePage.tsx
index d655967cf..c98632d25 100644
--- a/apps/web/src/pages/generate/GeneratePage.tsx
+++ b/apps/web/src/pages/generate/GeneratePage.tsx
@@ -1,367 +1,869 @@
 /**
- * 一键生成页面
- * 流程：选择模板 → 选择素材 → 选择标题 → 选择配音 → 批量生成
+ * 一键生成页面（V21 改造）
+ * 功能：标题/描述输入 → 素材选择 → 配音选择 → 标题/文案 → 高级设置 → 生成 → 结果
+ * 使用 Task 1.5 UI 组件 + V21 CSS 变量，Mock 数据
  */
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import React, { useState, useRef, useCallback } from "react";
 import {
-  Card,
-  Button,
-  Typography,
-  Space,
-  Steps,
-  Checkbox,
-  message,
-  Result,
-  Spin,
   Row,
   Col,
-  Tag,
-  Alert,
+  Typography,
+  Collapse,
+  Progress,
+  Slider,
+  Radio,
+  Switch,
+  Upload,
+  message,
 } from "antd";
+import type { UploadFile } from "antd";
 import {
-  CheckCircleOutlined,
-  VideoCameraOutlined,
   FileTextOutlined,
-  AudioOutlined,
   PictureOutlined,
+  AudioOutlined,
+  SettingOutlined,
+  ThunderboltOutlined,
+  CheckCircleFilled,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  DownloadOutlined,
+  ShareAltOutlined,
+  ReloadOutlined,
+  InboxOutlined,
+  SoundOutlined,
+  FormOutlined,
 } from "@ant-design/icons";
-import { getTemplates } from "@/api/templates";
-import { getAssetLibraries, getAssets, type AssetItem } from "@/api/assets";
-import { getTitles } from "@/api/titles";
-import { getVoices } from "@/api/voices";
-import { createGenerationTask } from "@/api/tasks";
-import PageHead from "@/components/layout/PageHead";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import Card from "@/components/ui/Card";
+import Tag from "@/components/ui/Tag";
+import Form, { FormItem } from "@/components/ui/Form";
+import type { AssetItem } from "@/api/assets";
+import type { VoiceItem } from "@/api/voices";
+import "./generate.css";
 
+const { TextArea } = Input;
 const { Text } = Typography;
 
+/* ================================================================
+   Mock 数据
+   ================================================================ */
+
+const MOCK_MATERIALS: AssetItem[] = [
+  {
+    id: "m1",
+    library_id: "lib1",
+    name: "产品展示视频.mp4",
+    storage_key: "",
+    mime_type: "video/mp4",
+    metadata: { duration: 30 },
+    file_size: 15_000_000,
+    status: "active",
+  },
+  {
+    id: "m2",
+    library_id: "lib1",
+    name: "品牌宣传片.mp4",
+    storage_key: "",
+    mime_type: "video/mp4",
+    metadata: { duration: 60 },
+    file_size: 42_000_000,
+    status: "active",
+  },
+  {
+    id: "m3",
+    library_id: "lib1",
+    name: "用户访谈片段.mp4",
+    storage_key: "",
+    mime_type: "video/mp4",
+    metadata: { duration: 45 },
+    file_size: 28_000_000,
+    status: "active",
+  },
+  {
+    id: "m4",
+    library_id: "lib2",
+    name: "Logo 动画.png",
+    storage_key: "",
+    mime_type: "image/png",
+    metadata: {},
+    file_size: 500_000,
+    status: "active",
+  },
+  {
+    id: "m5",
+    library_id: "lib2",
+    name: "背景音乐.mp3",
+    storage_key: "",
+    mime_type: "audio/mpeg",
+    metadata: { duration: 120 },
+    file_size: 3_500_000,
+    status: "active",
+  },
+  {
+    id: "m6",
+    library_id: "lib1",
+    name: "功能演示录屏.mp4",
+    storage_key: "",
+    mime_type: "video/mp4",
+    metadata: { duration: 90 },
+    file_size: 55_000_000,
+    status: "active",
+  },
+];
+
+const MOCK_VOICES: VoiceItem[] = [
+  {
+    id: "v1",
+    name: "小晓 · 温柔女声",
+    text: "",
+    voice_type: "female_gentle",
+    duration_seconds: 0,
+    audio_url: "",
+  },
+  {
+    id: "v2",
+    name: "小宇 · 磁性男声",
+    text: "",
+    voice_type: "male_magnetic",
+    duration_seconds: 0,
+    audio_url: "",
+  },
+  {
+    id: "v3",
+    name: "小雅 · 专业播音",
+    text: "",
+    voice_type: "female_professional",
+    duration_seconds: 0,
+    audio_url: "",
+  },
+  {
+    id: "v4",
+    name: "小杰 · 活力男声",
+    text: "",
+    voice_type: "male_energetic",
+    duration_seconds: 0,
+    audio_url: "",
+  },
+];
+
+/* ── 常量 ── */
+
+interface RatioOption {
+  label: string;
+  value: string;
+  desc: string;
+}
+
+const RATIO_OPTIONS: RatioOption[] = [
+  { label: "16:9", value: "16:9", desc: "横屏" },
+  { label: "9:16", value: "9:16", desc: "竖屏" },
+  { label: "1:1", value: "1:1", desc: "方形" },
+  { label: "4:3", value: "4:3", desc: "经典" },
+];
+
+interface StyleOption {
+  label: string;
+  value: string;
+  icon: React.ReactNode;
+  desc: string;
+}
+
+const STYLE_OPTIONS: StyleOption[] = [
+  {
+    label: "商务",
+    value: "business",
+    icon: <ThunderboltOutlined />,
+    desc: "专业正式",
+  },
+  { label: "活泼", value: "lively", icon: <SoundOutlined />, desc: "轻松有趣" },
+  {
+    label: "温馨",
+    value: "warm",
+    icon: <FormOutlined />,
+    desc: "温暖感人",
+  },
+  {
+    label: "科技",
+    value: "tech",
+    icon: <SettingOutlined />,
+    desc: "未来科技",
+  },
+  {
+    label: "简约",
+    value: "minimal",
+    icon: <FileTextOutlined />,
+    desc: "简洁大气",
+  },
+  {
+    label: "国潮",
+    value: "chinese",
+    icon: <PictureOutlined />,
+    desc: "中国风",
+  },
+];
+
+/* ================================================================
+   组件
+   ================================================================ */
+
 const GeneratePage: React.FC = () => {
-  const navigate = useNavigate();
-  const [currentStep, setCurrentStep] = useState(0);
-  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
-  const [selectedAssets, setSelectedAssets] = useState<string[]>([]);
-  const [selectedTitles, setSelectedTitles] = useState<string[]>([]);
-  const [selectedVoices, setSelectedVoices] = useState<string[]>([]);
+  /* ── 基本信息 ── */
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  /* ── 素材 ── */
+  const [selectedMaterials, setSelectedMaterials] = useState<string[]>([]);
+
+  /* ── 配音 ── */
+  const [selectedVoice, setSelectedVoice] = useState<string>("");
+  const [playingVoice, setPlayingVoice] = useState<string | null>(null);
+  const [voiceMode, setVoiceMode] = useState<"preset" | "custom">("preset");
+  const [customVoiceText, setCustomVoiceText] = useState("");
+
+  /* ── 标题/文案 ── */
+  const [titleMode, setTitleMode] = useState<"ai" | "manual">("ai");
+  const [manualCopy, setManualCopy] = useState("");
+
+  /* ── 高级设置 ── */
+  const [videoRatio, setVideoRatio] = useState("16:9");
+  const [duration, setDuration] = useState(30);
+  const [style, setStyle] = useState("business");
+  const [autoSubtitles, setAutoSubtitles] = useState(true);
+  const [bgm, setBgm] = useState(true);
+
+  /* ── 生成状态 ── */
   const [generating, setGenerating] = useState(false);
+  const [progress, setProgress] = useState(0);
   const [generated, setGenerated] = useState(false);
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
 
-  // 获取模板列表
-  const {
-    data: templates = [],
-    isLoading: tplLoading,
-    isError: tplError,
-  } = useQuery({
-    queryKey: ["templates"],
-    queryFn: getTemplates,
-  });
+  const progressTimer = useRef<ReturnType<typeof setInterval>>(undefined);
 
-  // 获取素材库和素材
-  const {
-    data: libraries = [],
-    isLoading: libLoading,
-    isError: libError,
-  } = useQuery({
-    queryKey: ["asset-libraries"],
-    queryFn: getAssetLibraries,
-  });
+  /* ── 事件 ── */
 
-  // 获取标题
-  const {
-    data: titles = [],
-    isLoading: titleLoading,
-    isError: titleError,
-  } = useQuery({
-    queryKey: ["titles"],
-    queryFn: getTitles,
-  });
+  const toggleMaterial = useCallback((id: string) => {
+    setSelectedMaterials((prev) =>
+      prev.includes(id) ? prev.filter((m) => m !== id) : [...prev, id],
+    );
+  }, []);
 
-  // 获取配音
-  const {
-    data: voices = [],
-    isLoading: voiceLoading,
-    isError: voiceError,
-  } = useQuery({
-    queryKey: ["voices"],
-    queryFn: getVoices,
-  });
-
-  // 获取所有素材（跨库）
-  const {
-    data: allAssets = [],
-    isLoading: assetsLoading,
-    isError: assetsError,
-  } = useQuery({
-    queryKey: ["all-assets"],
-    queryFn: async () => {
-      const all: AssetItem[] = [];
-      for (const lib of libraries) {
-        const items = await getAssets(lib.id);
-        all.push(...items);
+  const toggleVoicePlay = useCallback((id: string) => {
+    setPlayingVoice((prev) => {
+      if (prev === id) {
+        message.info("Mock：停止播放");
+        return null;
       }
-      return all;
-    },
-    enabled: libraries.length > 0,
-  });
+      message.info("Mock：开始播放配音预览");
+      return id;
+    });
+  }, []);
 
-  const pageLoading =
-    tplLoading || libLoading || titleLoading || voiceLoading || assetsLoading;
-  const pageError =
-    tplError || libError || titleError || voiceError || assetsError;
-
-  // 创建生成任务
-  const generateMutation = useMutation({
-    mutationFn: createGenerationTask,
-    onSuccess: () => {
-      message.success("生成任务已提交");
-      setGenerated(true);
-      setGenerating(false);
-    },
-    onError: (err: unknown) => {
-      if (!(err as { __msgShown?: boolean })?.__msgShown)
-        message.error("生成失败");
-      setGenerating(false);
-    },
-  });
-
-  /** 开始生成 */
-  const handleGenerate = async () => {
-    if (!selectedTemplate) {
-      message.warning("请选择模板");
+  const handleGenerate = useCallback(() => {
+    if (!title.trim()) {
+      message.warning("请输入视频标题");
       return;
     }
+    if (selectedMaterials.length === 0) {
+      message.warning("请至少选择一个素材");
+      return;
+    }
+
     setGenerating(true);
-    generateMutation.mutate({
-      template_id: selectedTemplate,
-      asset_ids: selectedAssets,
-      title_ids: selectedTitles,
-      voice_ids: selectedVoices,
-    });
+    setProgress(0);
+    setGenerated(false);
+
+    progressTimer.current = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(progressTimer.current);
+          setGenerating(false);
+          setGenerated(true);
+          message.success("视频生成完成！");
+          return 100;
+        }
+        return prev + Math.random() * 12 + 3;
+      });
+    }, 600);
+  }, [title, selectedMaterials]);
+
+  /* ── 字数统计 ── */
+  const titleCount = title.length;
+  const descCount = description.length;
+  const TITLE_MAX = 50;
+  const DESC_MAX = 300;
+
+  /** 字数颜色 */
+  const countClass = (count: number, max: number) => {
+    if (count > max) return "xx-word-count-over";
+    if (count > max * 0.8) return "xx-word-count-warn";
+    return "";
   };
 
-  const steps = [
-    {
-      title: "选择模板",
-      icon: <VideoCameraOutlined />,
-      content: (
-        <Row gutter={[16, 16]}>
-          {templates.length === 0 ? (
-            <Col span={24}>
-              <Alert message="暂无可用模板，请先在模板库中添加" type="info" />
-            </Col>
-          ) : (
-            templates.map((t) => (
-              <Col xs={24} sm={12} md={8} key={t.id}>
-                <Card
-                  hoverable
-                  size="small"
-                  onClick={() => setSelectedTemplate(t.id)}
-                  style={{
-                    border:
-                      selectedTemplate === t.id
-                        ? "2px solid #1890ff"
-                        : undefined,
-                  }}
-                >
-                  <Card.Meta
-                    title={t.name}
-                    description={
-                      <Space>
-                        {t.category && <Tag>{t.category}</Tag>}
-                        {t.target_duration && <Tag>{t.target_duration}s</Tag>}
-                      </Space>
-                    }
-                  />
-                </Card>
-              </Col>
-            ))
-          )}
-        </Row>
-      ),
-    },
-    {
-      title: "选择素材",
-      icon: <PictureOutlined />,
-      content: (
-        <div>
-          {allAssets.length === 0 ? (
-            <Alert message="暂无素材，请先上传" type="info" />
-          ) : (
-            <Checkbox.Group
-              value={selectedAssets}
-              onChange={(vals) => setSelectedAssets(vals as string[])}
-              style={{ width: "100%" }}
-            >
-              <Row gutter={[12, 12]}>
-                {allAssets.map((a) => (
-                  <Col xs={24} sm={12} md={8} key={a.id}>
-                    <Checkbox value={a.id} style={{ width: "100%" }}>
-                      {a.name}
-                    </Checkbox>
-                  </Col>
-                ))}
-              </Row>
-            </Checkbox.Group>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: "选择标题",
-      icon: <FileTextOutlined />,
-      content: (
-        <div>
-          {titles.length === 0 ? (
-            <Alert message="暂无标题，请先在标题库中添加" type="info" />
-          ) : (
-            <Checkbox.Group
-              value={selectedTitles}
-              onChange={(vals) => setSelectedTitles(vals as string[])}
-              style={{ width: "100%" }}
-            >
-              <Row gutter={[12, 12]}>
-                {titles.map((t) => (
-                  <Col xs={24} sm={12} md={8} key={t.id}>
-                    <Checkbox value={t.id} style={{ width: "100%" }}>
-                      <Text ellipsis>{t.content}</Text>
-                    </Checkbox>
-                  </Col>
-                ))}
-              </Row>
-            </Checkbox.Group>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: "选择配音",
-      icon: <AudioOutlined />,
-      content: (
-        <div>
-          {voices.length === 0 ? (
-            <Alert message="暂无配音，请先在配音库中添加" type="info" />
-          ) : (
-            <Checkbox.Group
-              value={selectedVoices}
-              onChange={(vals) => setSelectedVoices(vals as string[])}
-              style={{ width: "100%" }}
-            >
-              <Row gutter={[12, 12]}>
-                {voices.map((v) => (
-                  <Col xs={24} sm={12} md={8} key={v.id}>
-                    <Checkbox value={v.id} style={{ width: "100%" }}>
-                      {v.name}
-                    </Checkbox>
-                  </Col>
-                ))}
-              </Row>
-            </Checkbox.Group>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: "生成",
-      icon: <CheckCircleOutlined />,
-      content: generated ? (
-        <Result
-          status="success"
-          title="生成任务已提交"
-          subTitle="您可以在任务历史中查看生成进度"
-          extra={
-            <Button type="primary" onClick={() => navigate("/history")}>
-              查看任务
-            </Button>
-          }
-        />
-      ) : (
-        <div style={{ textAlign: "center", padding: 40 }}>
-          {generating ? (
-            <Spin size="large" tip="正在生成..." />
-          ) : (
-            <Space direction="vertical" size={16}>
-              <Text>
-                已选择：{selectedAssets.length} 个素材，{selectedTitles.length}{" "}
-                个标题，{selectedVoices.length} 个配音
-              </Text>
-              <Button
-                type="primary"
-                size="large"
-                icon={<VideoCameraOutlined />}
-                onClick={handleGenerate}
-                disabled={!selectedTemplate}
-              >
-                开始生成
-              </Button>
-            </Space>
-          )}
-        </div>
-      ),
-    },
-  ];
+  /* ── 素材图标 ── */
+  const materialIcon = (mime: string) => {
+    if (mime.startsWith("video/")) return <PlayCircleOutlined />;
+    if (mime.startsWith("image/")) return <PictureOutlined />;
+    if (mime.startsWith("audio/")) return <AudioOutlined />;
+    return <FileTextOutlined />;
+  };
 
-  if (pageLoading) {
-    return (
-      <div style={{ textAlign: "center", padding: 80 }}>
-        <Spin size="large" />
-      </div>
-    );
-  }
+  /** 文件大小格式化 */
+  const formatSize = (bytes?: number) => {
+    if (!bytes) return "";
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+  };
 
-  if (pageError) {
-    return (
-      <div style={{ padding: "24px", maxWidth: 1200, margin: "0 auto" }}>
-        <Alert
-          type="error"
-          message="加载数据失败"
-          description="部分数据获取失败，请刷新页面重试。"
-          showIcon
-          action={
-            <Button onClick={() => window.location.reload()}>刷新页面</Button>
-          }
-        />
-      </div>
-    );
-  }
+  /* ================================================================
+     渲染
+     ================================================================ */
 
   return (
-    <div style={{ padding: "24px", maxWidth: 1200, margin: "0 auto" }}>
-      <PageHead title="一键生成" />
+    <div className="xx-generate-page">
+      {/* ── 页头 ── */}
+      <div className="xx-generate-header">
+        <Typography.Title className="xx-generate-title">
+          <ThunderboltOutlined style={{ marginRight: 8 }} />
+          一键生成
+        </Typography.Title>
+        <Text className="xx-generate-subtitle">
+          快速生成短视频，支持多种风格和素材组合
+        </Text>
+      </div>
 
-      <Steps
-        current={currentStep}
-        onChange={setCurrentStep}
-        items={steps.map((s) => ({ title: s.title, icon: s.icon }))}
-        style={{ marginBottom: 32 }}
-        responsive
-      />
+      <div className="xx-generate-layout">
+        {/* ════════════ 左侧：主内容 ════════════ */}
+        <div>
+          {/* ── 1. 基本信息 ── */}
+          <div className="xx-generate-section">
+            <div className="xx-section-header">
+              <div className="xx-section-icon">
+                <FileTextOutlined />
+              </div>
+              <Typography.Title level={5} className="xx-section-title">
+                基本信息
+              </Typography.Title>
+            </div>
+            <div className="xx-section-body">
+              <Form layout="vertical">
+                <FormItem
+                  label="视频标题"
+                  required
+                  help={`${titleCount}/${TITLE_MAX} 字`}
+                  validateStatus={
+                    titleCount > TITLE_MAX ? "error" : undefined
+                  }
+                >
+                  <Input
+                    placeholder="请输入视频标题"
+                    maxLength={TITLE_MAX}
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    error={titleCount > TITLE_MAX}
+                  />
+                </FormItem>
 
-      <Card>{steps[currentStep].content}</Card>
+                <FormItem label="视频描述">
+                  <TextArea
+                    placeholder="请描述视频内容和目标（可选）"
+                    rows={3}
+                    maxLength={DESC_MAX}
+                    showCount
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                  />
+                  <div
+                    className={`xx-word-count ${countClass(descCount, DESC_MAX)}`}
+                  >
+                    {descCount}/{DESC_MAX}
+                  </div>
+                </FormItem>
+              </Form>
+            </div>
+          </div>
 
-      {/* 步骤导航 */}
-      {!generated && (
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            marginTop: 24,
-          }}
-        >
-          <Button
-            disabled={currentStep === 0 || generating}
-            onClick={() => setCurrentStep((s) => s - 1)}
-          >
-            上一步
-          </Button>
-          <Button
-            type="primary"
-            disabled={currentStep === steps.length - 1 || generating}
-            onClick={() => setCurrentStep((s) => s + 1)}
-          >
-            下一步
-          </Button>
+          {/* ── 2. 素材选择 ── */}
+          <div className="xx-generate-section">
+            <div className="xx-section-header">
+              <div className="xx-section-icon">
+                <PictureOutlined />
+              </div>
+              <Typography.Title level={5} className="xx-section-title">
+                素材选择
+              </Typography.Title>
+              <Text className="xx-section-desc">
+                已选 {selectedMaterials.length} 个
+              </Text>
+            </div>
+            <div className="xx-section-body">
+              <div className="xx-material-grid">
+                {MOCK_MATERIALS.map((m) => {
+                  const selected = selectedMaterials.includes(m.id);
+                  return (
+                    <div
+                      key={m.id}
+                      className={`xx-material-card ${selected ? "xx-material-card-selected" : ""}`}
+                      onClick={() => toggleMaterial(m.id)}
+                      role="button"
+                      tabIndex={0}
+                      aria-pressed={selected}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          toggleMaterial(m.id);
+                        }
+                      }}
+                    >
+                      <div className="xx-material-thumb">
+                        {materialIcon(m.mime_type)}
+                      </div>
+                      <div className="xx-material-info">
+                        <Typography.Paragraph className="xx-material-name">
+                          {m.name}
+                        </Typography.Paragraph>
+                        <Typography.Paragraph className="xx-material-meta">
+                          {m.mime_type.split("/")[1].toUpperCase()}
+                          {m.file_size ? ` · ${formatSize(m.file_size)}` : ""}
+                        </Typography.Paragraph>
+                      </div>
+                      <div className="xx-material-check">
+                        <CheckCircleFilled />
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* 上传入口 */}
+              <Upload.Dragger
+                multiple
+                fileList={fileList}
+                onChange={({ fileList: fl }) => setFileList(fl)}
+                beforeUpload={() => false}
+                style={{ marginTop: 16 }}
+              >
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">点击或拖拽素材到此区域上传</p>
+                <p className="ant-upload-hint">
+                  支持视频、图片、音频格式
+                </p>
+              </Upload.Dragger>
+            </div>
+          </div>
+
+          {/* ── 3. 配音选择 ── */}
+          <div className="xx-generate-section">
+            <div className="xx-section-header">
+              <div className="xx-section-icon">
+                <AudioOutlined />
+              </div>
+              <Typography.Title level={5} className="xx-section-title">
+                配音选择
+              </Typography.Title>
+            </div>
+            <div className="xx-section-body">
+              <Radio.Group
+                value={voiceMode}
+                onChange={(e) => setVoiceMode(e.target.value)}
+                style={{ marginBottom: 16 }}
+              >
+                <Radio.Button value="preset">系统预设</Radio.Button>
+                <Radio.Button value="custom">自定义录制</Radio.Button>
+              </Radio.Group>
+
+              {voiceMode === "preset" ? (
+                <div className="xx-voice-grid">
+                  {MOCK_VOICES.map((v) => {
+                    const selected = selectedVoice === v.id;
+                    return (
+                      <div
+                        key={v.id}
+                        className={`xx-voice-card ${selected ? "xx-voice-card-selected" : ""}`}
+                        onClick={() => setSelectedVoice(v.id)}
+                        role="button"
+                        tabIndex={0}
+                        aria-pressed={selected}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            setSelectedVoice(v.id);
+                          }
+                        }}
+                      >
+                        <div className="xx-voice-header">
+                          <div className="xx-voice-avatar">
+                            <AudioOutlined />
+                          </div>
+                          <div>
+                            <Typography.Paragraph className="xx-voice-name">
+                              {v.name}
+                            </Typography.Paragraph>
+                            <Typography.Paragraph className="xx-voice-desc">
+                              {v.voice_type}
+                            </Typography.Paragraph>
+                          </div>
+                        </div>
+                        <Button
+                          buttonType="text"
+                          buttonSize="sm"
+                          icon={
+                            playingVoice === v.id ? (
+                              <PauseCircleOutlined />
+                            ) : (
+                              <PlayCircleOutlined />
+                            )
+                          }
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleVoicePlay(v.id);
+                          }}
+                        >
+                          {playingVoice === v.id ? "停止" : "试听"}
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div>
+                  <TextArea
+                    placeholder="输入配音文案，系统将自动合成语音…"
+                    rows={4}
+                    maxLength={500}
+                    showCount
+                    value={customVoiceText}
+                    onChange={(e) => setCustomVoiceText(e.target.value)}
+                  />
+                  <div style={{ marginTop: 12 }}>
+                    <Button buttonType="ghost" icon={<AudioOutlined />}>
+                      上传录音文件
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* ── 4. 标题/文案设置 ── */}
+          <div className="xx-generate-section">
+            <div className="xx-section-header">
+              <div className="xx-section-icon">
+                <FormOutlined />
+              </div>
+              <Typography.Title level={5} className="xx-section-title">
+                标题 / 文案设置
+              </Typography.Title>
+            </div>
+            <div className="xx-section-body">
+              <Radio.Group
+                value={titleMode}
+                onChange={(e) => setTitleMode(e.target.value)}
+                style={{ marginBottom: 16 }}
+              >
+                <Radio.Button value="ai">AI 智能生成</Radio.Button>
+                <Radio.Button value="manual">手动输入</Radio.Button>
+              </Radio.Group>
+
+              {titleMode === "ai" ? (
+                <div>
+                  <Text
+                    type="secondary"
+                    style={{ display: "block", marginBottom: 12 }}
+                  >
+                    根据视频标题和描述，AI 将自动生成视频文案和字幕
+                  </Text>
+                  <Button buttonType="ghost" icon={<ThunderboltOutlined />}>
+                    预览 AI 生成结果
+                  </Button>
+                </div>
+              ) : (
+                <TextArea
+                  placeholder="手动输入视频文案内容…"
+                  rows={4}
+                  maxLength={1000}
+                  showCount
+                  value={manualCopy}
+                  onChange={(e) => setManualCopy(e.target.value)}
+                />
+              )}
+            </div>
+          </div>
+
+          {/* ── 5. 高级设置 ── */}
+          <div className="xx-generate-section">
+            <Collapse
+              ghost
+              items={[
+                {
+                  key: "advanced",
+                  label: (
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                      }}
+                    >
+                      <SettingOutlined />
+                      <span
+                        style={{
+                          fontWeight: 600,
+                          fontSize: "var(--font-size-md)",
+                          color: "var(--text-primary)",
+                        }}
+                      >
+                        高级设置
+                      </span>
+                      <Text type="secondary" style={{ marginLeft: 8 }}>
+                        （可选，适合高级用户）
+                      </Text>
+                    </div>
+                  ),
+                  children: (
+                    <Form layout="vertical">
+                      {/* 视频比例 */}
+                      <FormItem label="视频比例">
+                        <div className="xx-radio-card-group">
+                          {RATIO_OPTIONS.map((opt) => (
+                            <div
+                              key={opt.value}
+                              className={`xx-radio-card ${videoRatio === opt.value ? "xx-radio-card-selected" : ""}`}
+                              onClick={() => setVideoRatio(opt.value)}
+                              role="radio"
+                              aria-checked={videoRatio === opt.value}
+                              tabIndex={0}
+                              onKeyDown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  setVideoRatio(opt.value);
+                                }
+                              }}
+                            >
+                              <Typography.Paragraph className="xx-radio-card-label">
+                                {opt.label}
+                              </Typography.Paragraph>
+                              <Typography.Paragraph className="xx-radio-card-desc">
+                                {opt.desc}
+                              </Typography.Paragraph>
+                            </div>
+                          ))}
+                        </div>
+                      </FormItem>
+
+                      {/* 视频时长 */}
+                      <FormItem label={`目标时长：${duration} 秒`}>
+                        <Slider
+                          min={10}
+                          max={180}
+                          step={5}
+                          value={duration}
+                          onChange={(val) => setDuration(val)}
+                          marks={{
+                            10: "10s",
+                            60: "60s",
+                            120: "2min",
+                            180: "3min",
+                          }}
+                        />
+                      </FormItem>
+
+                      {/* 视频风格 */}
+                      <FormItem label="视频风格">
+                        <div className="xx-style-grid">
+                          {STYLE_OPTIONS.map((opt) => (
+                            <div
+                              key={opt.value}
+                              className={`xx-style-card ${style === opt.value ? "xx-style-card-selected" : ""}`}
+                              onClick={() => setStyle(opt.value)}
+                              role="radio"
+                              aria-checked={style === opt.value}
+                              tabIndex={0}
+                              onKeyDown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  setStyle(opt.value);
+                                }
+                              }}
+                            >
+                              <div className="xx-style-icon">{opt.icon}</div>
+                              <Typography.Paragraph className="xx-style-name">
+                                {opt.label}
+                              </Typography.Paragraph>
+                              <Typography.Paragraph className="xx-style-desc">
+                                {opt.desc}
+                              </Typography.Paragraph>
+                            </div>
+                          ))}
+                        </div>
+                      </FormItem>
+
+                      {/* 附加选项 */}
+                      <FormItem label="字幕与配乐">
+                        <div
+                          style={{
+                            display: "flex",
+                            gap: 32,
+                            flexWrap: "wrap",
+                          }}
+                        >
+                          <div
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 8,
+                            }}
+                          >
+                            <Switch
+                              checked={autoSubtitles}
+                              onChange={setAutoSubtitles}
+                            />
+                            <Text>自动添加字幕</Text>
+                          </div>
+                          <div
+                            style={{
+                              display: "flex",
+                              alignItems: "center",
+                              gap: 8,
+                            }}
+                          >
+                            <Switch checked={bgm} onChange={setBgm} />
+                            <Text>添加背景音乐</Text>
+                          </div>
+                        </div>
+                      </FormItem>
+                    </Form>
+                  ),
+                },
+              ]}
+            />
+          </div>
+
+          {/* ── 6. 生成按钮 ── */}
+          {!generated && (
+            <div className="xx-generate-action">
+              {generating ? (
+                <div style={{ maxWidth: 400, margin: "0 auto" }}>
+                  <Progress
+                    percent={Math.min(Math.round(progress), 100)}
+                    status="active"
+                    strokeColor={{
+                      "0%": "var(--color-primary-500)",
+                      "100%": "var(--color-primary-600)",
+                    }}
+                  />
+                  <Text type="secondary" style={{ marginTop: 8 }}>
+                    正在生成视频，请稍候…
+                  </Text>
+                </div>
+              ) : (
+                <Button
+                  buttonType="primary"
+                  buttonSize="lg"
+                  icon={<ThunderboltOutlined />}
+                  onClick={handleGenerate}
+                >
+                  开始生成视频
+                </Button>
+              )}
+            </div>
+          )}
         </div>
-      )}
+
+        {/* ════════════ 右侧：结果面板 ════════════ */}
+        <div>
+          <Card className="xx-generate-section" style={{ marginBottom: 0 }}>
+            <div
+              className="xx-section-header"
+              style={{ padding: "16px 24px" }}
+            >
+              <Typography.Title level={5} className="xx-section-title">
+                生成结果
+              </Typography.Title>
+              {generated && <Tag variant="success">已完成</Tag>}
+            </div>
+            <div className="xx-section-body">
+              {generated ? (
+                <>
+                  <div className="xx-result-preview">
+                    <PlayCircleOutlined />
+                  </div>
+
+                  <Row gutter={[8, 8]} style={{ marginBottom: 16 }}>
+                    <Col span={12}>
+                      <Text type="secondary">标题</Text>
+                      <br />
+                      <Text strong>{title || "未设置"}</Text>
+                    </Col>
+                    <Col span={12}>
+                      <Text type="secondary">比例</Text>
+                      <br />
+                      <Text strong>{videoRatio}</Text>
+                    </Col>
+                    <Col span={12}>
+                      <Text type="secondary">时长</Text>
+                      <br />
+                      <Text strong>{duration}s</Text>
+                    </Col>
+                    <Col span={12}>
+                      <Text type="secondary">素材</Text>
+                      <br />
+                      <Text strong>{selectedMaterials.length} 个</Text>
+                    </Col>
+                  </Row>
+
+                  <div className="xx-result-actions">
+                    <Button
+                      buttonType="primary"
+                      icon={<DownloadOutlined />}
+                      block
+                    >
+                      下载视频
+                    </Button>
+                    <Button
+                      buttonType="ghost"
+                      icon={<ShareAltOutlined />}
+                      block
+                    >
+                      分享
+                    </Button>
+                    <Button
+                      buttonType="text"
+                      icon={<ReloadOutlined />}
+                      block
+                      onClick={() => {
+                        setGenerated(false);
+                        setProgress(0);
+                      }}
+                    >
+                      重新生成
+                    </Button>
+                  </div>
+                </>
+              ) : (
+                <div
+                  style={{
+                    textAlign: "center",
+                    padding: "40px 0",
+                    color: "var(--text-tertiary)",
+                  }}
+                >
+                  <ThunderboltOutlined
+                    style={{ fontSize: 48, marginBottom: 16, opacity: 0.4 }}
+                  />
+                  <br />
+                  <Text type="secondary">
+                    {generating ? "视频生成中…" : "配置参数后点击生成"}
+                  </Text>
+                </div>
+              )}
+            </div>
+          </Card>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
new file mode 100644
index 000000000..17d0740eb
--- /dev/null
+++ b/apps/web/src/pages/generate/generate.css
@@ -0,0 +1,436 @@
+/**
+ * 一键生成页面 - V21 设计系统样式
+ * 统一使用 CSS 变量，支持深色/浅色主题
+ */
+@import "../../styles/global.css";
+
+/* ============================================================
+   页面容器
+   ============================================================ */
+.xx-generate-page {
+  min-height: 100%;
+  padding: var(--space-xl);
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.xx-generate-header {
+  margin-bottom: var(--space-xl);
+}
+
+.xx-generate-title {
+  font-size: var(--font-size-3xl) !important;
+  font-weight: var(--font-weight-bold) !important;
+  color: var(--text-primary) !important;
+  margin-bottom: var(--space-xs) !important;
+}
+
+.xx-generate-subtitle {
+  color: var(--text-secondary) !important;
+  font-size: var(--font-size-base) !important;
+}
+
+/* ============================================================
+   主内容布局（左主右侧）
+   ============================================================ */
+.xx-generate-layout {
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: var(--space-xl);
+  align-items: start;
+}
+
+/* ============================================================
+   区块卡片
+   ============================================================ */
+.xx-generate-section {
+  background: var(--bg-primary) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: var(--radius-xl) !important;
+  box-shadow: var(--shadow-card) !important;
+  margin-bottom: var(--space-lg);
+  overflow: hidden;
+  transition: var(--transition-all);
+}
+
+.xx-generate-section:hover {
+  box-shadow: var(--shadow-md) !important;
+}
+
+.xx-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-lg) var(--space-xl);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.xx-section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: var(--primary-soft);
+  color: var(--primary-color);
+  font-size: var(--font-size-lg);
+  flex-shrink: 0;
+}
+
+.xx-section-title {
+  font-size: var(--font-size-md) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  color: var(--text-primary) !important;
+  margin: 0 !important;
+  flex: 1;
+}
+
+.xx-section-desc {
+  color: var(--text-tertiary) !important;
+  font-size: var(--font-size-sm) !important;
+  margin: 0 !important;
+}
+
+.xx-section-body {
+  padding: var(--space-xl);
+}
+
+/* ============================================================
+   字数统计
+   ============================================================ */
+.xx-word-count {
+  text-align: right;
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  margin-top: var(--space-xs);
+  transition: var(--transition-colors);
+}
+
+.xx-word-count-warn {
+  color: var(--warning-color);
+}
+
+.xx-word-count-over {
+  color: var(--error-color);
+}
+
+/* ============================================================
+   素材选择
+   ============================================================ */
+.xx-material-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-md);
+}
+
+.xx-material-card {
+  position: relative;
+  border-radius: var(--radius-md);
+  border: 2px solid var(--border-color);
+  overflow: hidden;
+  cursor: pointer;
+  transition: var(--transition-all);
+  background: var(--bg-primary);
+}
+
+.xx-material-card:hover {
+  border-color: var(--primary-color);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
+}
+
+.xx-material-card-selected {
+  border-color: var(--primary-color) !important;
+  box-shadow: var(--shadow-primary) !important;
+}
+
+.xx-material-thumb {
+  height: 100px;
+  background: var(--bg-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-3xl);
+  overflow: hidden;
+}
+
+.xx-material-info {
+  padding: var(--space-sm) var(--space-md);
+}
+
+.xx-material-name {
+  font-size: var(--font-size-sm) !important;
+  font-weight: var(--font-weight-medium) !important;
+  color: var(--text-primary) !important;
+  margin: 0 !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.xx-material-meta {
+  font-size: var(--font-size-xs) !important;
+  color: var(--text-tertiary) !important;
+  margin: 0 !important;
+}
+
+.xx-material-check {
+  position: absolute;
+  top: var(--space-sm);
+  right: var(--space-sm);
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--gradient-primary);
+  color: var(--text-inverse);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  opacity: 0;
+  transform: scale(0.6);
+  transition: var(--transition-all);
+}
+
+.xx-material-card-selected .xx-material-check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ============================================================
+   配音卡片
+   ============================================================ */
+.xx-voice-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-md);
+}
+
+.xx-voice-card {
+  border-radius: var(--radius-md);
+  border: 2px solid var(--border-color);
+  padding: var(--space-md);
+  cursor: pointer;
+  transition: var(--transition-all);
+  background: var(--bg-primary);
+}
+
+.xx-voice-card:hover {
+  border-color: var(--primary-color);
+}
+
+.xx-voice-card-selected {
+  border-color: var(--primary-color) !important;
+  background: var(--primary-soft) !important;
+}
+
+.xx-voice-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-sm);
+}
+
+.xx-voice-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: var(--gradient-primary);
+  color: var(--text-inverse);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-md);
+  flex-shrink: 0;
+}
+
+.xx-voice-name {
+  font-size: var(--font-size-base) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  color: var(--text-primary) !important;
+  margin: 0 !important;
+}
+
+.xx-voice-desc {
+  font-size: var(--font-size-xs) !important;
+  color: var(--text-tertiary) !important;
+  margin: 0 !important;
+}
+
+/* ============================================================
+   单选卡片组（比例 / 风格）
+   ============================================================ */
+.xx-radio-card-group {
+  display: flex;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.xx-radio-card {
+  flex: 1;
+  min-width: 100px;
+  border-radius: var(--radius-md);
+  border: 2px solid var(--border-color);
+  padding: var(--space-md);
+  cursor: pointer;
+  text-align: center;
+  transition: var(--transition-all);
+  background: var(--bg-primary);
+}
+
+.xx-radio-card:hover {
+  border-color: var(--primary-color);
+}
+
+.xx-radio-card-selected {
+  border-color: var(--primary-color) !important;
+  background: var(--primary-soft) !important;
+}
+
+.xx-radio-card-label {
+  font-size: var(--font-size-base) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  color: var(--text-primary) !important;
+  margin: 0 !important;
+}
+
+.xx-radio-card-desc {
+  font-size: var(--font-size-xs) !important;
+  color: var(--text-tertiary) !important;
+  margin: 0 !important;
+  margin-top: 2px !important;
+}
+
+/* ============================================================
+   风格卡片
+   ============================================================ */
+.xx-style-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-md);
+}
+
+.xx-style-card {
+  border-radius: var(--radius-md);
+  border: 2px solid var(--border-color);
+  padding: var(--space-md);
+  cursor: pointer;
+  transition: var(--transition-all);
+  background: var(--bg-primary);
+  text-align: center;
+}
+
+.xx-style-card:hover {
+  border-color: var(--primary-color);
+}
+
+.xx-style-card-selected {
+  border-color: var(--primary-color) !important;
+  background: var(--primary-soft) !important;
+}
+
+.xx-style-icon {
+  font-size: var(--font-size-2xl);
+  color: var(--primary-color);
+  margin-bottom: var(--space-xs);
+}
+
+.xx-style-name {
+  font-size: var(--font-size-sm) !important;
+  font-weight: var(--font-weight-semibold) !important;
+  color: var(--text-primary) !important;
+  margin: 0 !important;
+}
+
+.xx-style-desc {
+  font-size: var(--font-size-xs) !important;
+  color: var(--text-tertiary) !important;
+  margin: 0 !important;
+}
+
+/* ============================================================
+   生成区域
+   ============================================================ */
+.xx-generate-action {
+  text-align: center;
+  padding: var(--space-xl) 0;
+}
+
+/* ============================================================
+   结果区域
+   ============================================================ */
+.xx-result-preview {
+  border-radius: var(--radius-lg);
+  background: var(--bg-tertiary);
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-4xl);
+  margin-bottom: var(--space-md);
+  overflow: hidden;
+}
+
+.xx-result-actions {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+/* ============================================================
+   响应式
+   ============================================================ */
+@media (max-width: 1200px) {
+  .xx-generate-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .xx-generate-page {
+    padding: var(--space-md);
+  }
+
+  .xx-material-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .xx-voice-grid,
+  .xx-style-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .xx-section-header {
+    padding: var(--space-md);
+  }
+
+  .xx-section-body {
+    padding: var(--space-md);
+  }
+
+  .xx-generate-title {
+    font-size: var(--font-size-2xl) !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .xx-generate-page {
+    padding: var(--space-sm);
+  }
+
+  .xx-material-grid,
+  .xx-voice-grid,
+  .xx-style-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .xx-radio-card-group {
+    flex-direction: column;
+  }
+
+  .xx-result-actions {
+    flex-direction: column;
+  }
+}