name	react-vue-H5-convert
description	将设计稿转换后的 index.html 文件转换为目标平台代码（H5/React/Vue），包括样式抽离、语义化命名、交互实现和循环渲染支持。

U2C 代码转换

将 UI2Code 工具生成的 index.html 转换为规范的前端代码，支持 H5、React、Vue 平台。

When to Use

当需要将设计稿转换后的 index.html 转换为目标平台代码时
当需要进行样式抽离和语义化 class 命名时
当需要识别并实现交互组件（选中态、按钮等）时
当需要实现循环渲染（React/Vue 平台）时

Instructions

参数说明

参数名	类型	默认值	说明
`source_dir`	string	-	ZIP 包解压后的目录路径
`target_dir`	string	`${source_dir}/target_code`	代码输出目录
`platform`	string	`H5`	目标平台：H5、React、Vue

步骤 0：创建代码文件夹

如果用户指定了代码保存位置，则以用户指定的位置创建代码文件夹
否则在 ${source_dir} 中创建子文件夹 target_code 存储代码

步骤 1：读取 index.html 并分析结构

完整读取：读取 ${source_dir}/index.html 文件
结构分析：
- 记录每个元素的层级关系（父子关系）
- 记录同级元素的顺序
- 记录每个元素的类型（div、span、img 等）
- 记录每个元素的行内样式和属性
样式提取：提取所有行内样式属性，包括：
- 尺寸：width、height
- 间距：margin、padding、margin-top、margin-left 等
- 定位：position、top、left、right、bottom
- 字体：font-family、font-size、font-weight、line-height
- 颜色：color、background-color、border-color
- 边框：border、border-radius、border-width 等
- 布局：display、flex-direction、justify-content、align-items 等
图片路径提取：提取所有 <img src> 和 background-image 路径
文本内容提取：提取所有文本内容，特别注意需要精确宽度的文本元素

步骤 2：处理资源（图片和字体）

2.1 判断资源目录

检查 ${source_dir} 下是否包含 images/ 目录（图片资源）
检查 ${source_dir} 下是否包含 fonts/ 目录（字体资源）
如果包含则执行后续流程，如果不包含则跳过对应步骤

2.2 图片语义化命名规则

⚠️ 强制要求

优先级	命名来源
1	附近文本内容
2	用途功能
3	位置作用

命名格式：

使用小写字母、数字、连字符（-）
多个单词用连字符连接
示例：favorite-driver-icon.png、back-arrow-icon.png、user-avatar.png

禁止：使用 UUID、随机字符串、image_{序号} 或中文命名

2.3 复制资源

资源类型	源目录	目标目录	命名规则
图片	`${source_dir}/images/`	`${target_dir}/images/`	语义化命名
字体	`${source_dir}/fonts/`	`${target_dir}/fonts/`	保持原有文件名

⚠️ 强制要求：更新所有代码文件中的路径引用

步骤 3：代码文件结构生成

默认文件结构：

平台	文件结构
H5	`index.html`、`styles.css`、`script.js`
React	`index.jsx`、`styles.css`
Vue	`index.vue`

如果用户指定了文件结构，以用户要求为准。

步骤 4：样式抽离和语义化 class 命名

4.1 语义化 class 命名

组件类型	命名规则	示例
文本组件	根据文本内容	`nav-title`、`driver-name`
容器组件	根据功能	`nav-bar`、`driver-card`
图片组件	根据用途	`back-icon`、`driver-avatar`

禁止：container-{ID} 或 comp-{ID} 格式

4.2 提取公共样式

找出相同语义化名称的组件
分类：
- 公共样式：字体、颜色、边框（非位置相关）
- 单独样式：布局、尺寸、间距、定位
多 class 组合：class="driver-name driver-name-common"

4.3 精确样式匹配

⚠️ 强制要求

属性类型	要求
数值属性	width、height、margin、padding、font-size、line-height 等必须精确匹配原始值（包括小数）
定位属性	position、top、left、right、bottom 必须精确匹配
颜色值	rgba 颜色值必须完全一致

4.4 样式完整性验证

⚠️ 强制要求：公共样式 + 单独样式 = 原始行内样式的完整集合

常见遗漏属性：flex-direction、justify-content、align-items、align-self、flex-wrap、column-gap 等 flexbox 属性

步骤 5：识别交互组件并实现状态切换

5.1 选中态组件识别

查找相同结构的容器（Tab 项、筛选选项）
检查样式差异：背景色、边框、文本颜色
添加状态 class：filter-tab-active、filter-tab-inactive

5.2 样式分类规则

样式类型	位置 class	状态 class
圆角位置	✓	-
布局/尺寸/间距/定位	✓	-
默认边框	✓	-
选中态背景色	-	✓
选中态边框处理	-	✓
文本颜色变化	-	✓

5.3 边框处理规则

场景	位置 class	状态 class
未选中有边框，选中无边框	设置默认边框	`border: none`
未选中无边框，选中有边框	不设置边框	添加边框
边框颜色不同	设置默认颜色	覆盖边框颜色

5.4 交互逻辑实现

平台	实现方式
H5	`addEventListener` + `classList.add/remove`
React	`onClick` + 组件状态管理
Vue	`@click` + `methods`

步骤 6：循环渲染支持

6.1 H5 平台

⚠️ 不支持循环渲染

禁止使用 document.createElement() 或 innerHTML 创建 DOM 元素
所有重复结构必须在 HTML 中完整写出

6.2 React 平台

循环组件识别条件（必须全部满足）：

组件结构完全相同：类型、数量、层级完全一致
样式基本相同：公共样式相同，单独样式差异 ≤ 3 个属性
在 HTML 中连续出现

实现方式：

{items.map((item, index) => (
  <div key={index} className="item">
    <img src={item.icon} alt={item.name} />
    <span>{item.name}</span>
  </div>
))}

⚠️ 强制要求：必须为每个循环项添加 key 属性

6.3 Vue 平台

实现方式：

<div v-for="(item, index) in items" :key="index" class="item">
  <img :src="item.icon" :alt="item.name" />
  <span>{{ item.name }}</span>
</div>

⚠️ 强制要求：必须为每个循环项添加 :key 属性

步骤 7：验证

7.1 验证项

验证项	说明
结构一致性	HTML 结构必须与原始 index.html 完全一致
语义化命名	class 和图片名称都是语义化的
样式完整性	所有行内样式已抽离，公共+单独样式组合正确
资源完整性	图片/字体路径正确，文件存在
交互功能	识别了选中态组件和按钮，添加了交互样式和逻辑
循环渲染	React/Vue 平台正确使用循环渲染（H5 忽略）

7.2 验证输出格式

✅ 代码转换验证：
- 结构一致性：通过/失败
- 语义化命名：通过/失败
- 样式完整性：通过/失败
- 资源完整性：通过/失败
- 交互功能：通过/失败
- 循环渲染：通过/失败（H5 平台忽略）
- 验证结果：通过/失败
- 问题列表：[如果有问题，列出所有问题]

7.3 验证失败处理

识别问题：明确哪个验证项失败
分析原因：为什么会出现
修复问题：根据具体问题修复
重新验证：修复后完整验证
确认通过：所有验证项通过后才能继续