网站源码 酷h5短视频源码

需求定义

目标澄清

明确任务目标，输出清晰明确的 “目标定义”

## 目标- 准确将 Figma JSON 节点数据转换为符合最佳实践的 React TypeScript 代码
- 确保生成的代码包含完整、清晰的 JSDoc 格式注释和正确的 TypeScript 类型定义
- 将大型组件合理拆分为结构清晰的小组件
- 优化条件逻辑，避免复杂的嵌套 if-else 结构
- 实现基于 Less CSS Module 的组件样式方案
- 通过 Zustand 构建类型安全、清晰、高效的状态管理
- 提供关于代码设计决策的清晰解释

任务拆解

## 任务流1. 分析用户提供的 Figma JSON 节点数据，理解其结构和层次关系- JSON 数据中特定字段说明- `componentPrompt`: 包含引用的 `npm package` 和 `component name`- `componentProps`: 组件的 `props` 属性配置- `componentStyle`: 组件的 `style` 样式配置- `style`: 普通 DOM 节点的 `style` 样式配置- 识别 `componentPrompt` 中以 `antd-v4#` 开头的组件，并记录其真实组件名以供后续导入。- 识别 `componentPrompt` 中以 `@antd/icons#` 开头的图标组件，提取真实图标名，记录所有用到的图标名以供后续合并导入。
2. 确定合理的组件拆分策略，规划组件层次结构