Wan Animate 动画工具组件规划

竞品 UI 核心观察

双列布局: 左侧是输入表单，右侧提供实时预览、生成状态与后续操作。整体宽度约 1200px，使用深色渐变背景分出舞台感。
分组表单结构: 每个输入区域（角色图片、参考视频、提示词、分辨率、进阶设置）都有标题、副说明与文件上传控件，存在状态标签（NEW、No Filter）。
信用点付费路径: 表单底部突出紫色 CTA（Purchase Credit），旁边有成本估算提示与高级设置折叠。
生成结果卡片: 右侧卡片展示示例视频缩略图、生成 ID、视频操作（添加音频、放大）。采用卡片化深色背景与细分割线。
信号强调: 多处使用 Badge 表示模型版本、功能状态，图标+文本的方式提升可扫描性。

设计对齐原则

延续站点视觉语言: 使用现有 shadcn UI 组件（Card、Badge、Button、Tabs 等）以及 Tailwind 配色（深色基底、品牌渐变、霓虹 CTA）。
信息层次清晰: 表单分块、标题 + 描述、辅助提示（文件格式限制、时长限制等）。
状态驱动: 使用本地 state 模拟上传、生成进度、错误提示，以后可接入实际 API。
可扩展性: 预留 api 调用与队列轮询接口的占位符，避免纯静态演示后续改造困难。

组件模块划分

WanAnimateExperience
├── WanAnimateHeader（徽标/标签/简介）
├── WanAnimateLayout (两列布局 + 响应式)
│   ├── WanAnimateFormPanel
│   │   ├── UploadField (角色图片)
│   │   ├── UploadField (参考视频)
│   │   ├── PromptField
│   │   ├── ResolutionSelect
│   │   ├── AdvancedSettingsAccordion
│   │   └── ActionFooter（信用点状态 + CTA）
│   └── WanAnimatePreviewPanel
│       ├── PreviewPlayerCard
│       ├── GenerationMetaCard（生成 ID、跳转按钮）
│       └── VideoActionsCard（加音频 / 放大）
└── WanAnimateFeatureHighlights（可选：列出模型能力或 FAQ）

上述子组件保持文件内分段实现，不额外拆目录；通过内部小型函数与对象常量保留清晰语义。

状态与数据结构

characterImage: File | null — 角色图片上传。
referenceVideo: File | null — 参考视频上传，加入时长校验（≤ 120s）。
prompt: string — 可选提示词，提供预设模板按钮。
resolution: '480p' | '720p' | '1080p' — 选择不同信用消耗。
advanced — 包含布尔设置（开启表情增强、自动配音等），以对象存储。
isGenerating: boolean & progress: number — 模拟生成状态；未来可替换为后端 Job 轮询。
generationId: string | null — 成功后展示，默认 N/A。

所有 state 使用 React useState；当引入真实 API 时可根据需要切换到 useReducer 或 Zustand。

交互流程

用户上传角色图片与参考视频；若数据缺失则禁用“立即生成功能”。
修改提示词或切换分辨率时更新成本提示（静态映射 resolutionCostMap）。
点击“生成 Wan 动画”后触发 handleGenerate：
- 重置进度为 0，启动 setInterval 模拟进度条。
- 生成完成后展示示例预览（随机占位图片/视频），刷新 generationId。
Add Audio / Upscale 按钮目前跳转到占位链接，供后续接入路由。

实现步骤建议

新建组件 src/components/ai-tool/wan-animate-experience.tsx，导出主组件与必要的辅助常量。
装配布局：复用 Card、Badge、Button，并通过 grid lg:grid-cols-[7fr_5fr] 创建宽屏布局；移动端堆叠。
实现上传控件：使用隐藏的 input + 自定义面板；留出错误信息区域。
模拟进度与预览：构建 useEffect 清理定时器；预览区使用占位视频图 + 操作按钮。
集成首页：在 AiToolHomepage 中于 WanAnimateStudioSection 之前插入，以新段落分隔。
文案本地化：暂用英文/中文混合静态文本，待后期整合 next-intl 时抽离。

注意事项

文件上传目前仅存内存 URL，不落盘；部署后需接入 R2 或其他存储。
付费逻辑与信用点消耗仅展示文案；后端接口完成前需禁掉真实扣费。
组件应保持 use client，并检查在 SSR 中的可用性（window/document 访问需守护）。
在 next-intl 体系中，若要翻译需添加命名空间 WanAnimateTool 的语言包。

后续扩展点

接入真实生成 API：调用后端任务创建接口，返回 generationId，并通过 SSE 或轮询追踪进度。
视频预览改为 <video> 元素，支持播放/暂停与封面截图。
将高级设置拆分成 Collapsible，并提供工具提示解释信用点差异。
添加生成历史时间线，与 WanAnimateStudioSection 的相册保持一致体验。

Table of Contents