adjust-list-layout

name	adjust-list-layout
description	根据vlm_result.json识别 JSON 文件中的列表控件，并调整 HTML 代码中的布局结构，使其更符合语义化和响应式布局要求。

调整列表布局层级

根据 JSON 布局描述文件识别列表控件类型（横向、纵向、网格），并自动调整 HTML 代码中的布局结构。

When to Use

• 当需要将设计稿转换后的 HTML 代码进行布局优化时
• 当 HTML 中的列表元素层级结构不合理时
• 当需要将平铺的元素转换为语义化的列表、表格或 Flex 布局时
• 当存在 vlm_result.json 等布局描述文件，需要据此调整代码结构时

Instructions

参数说明

参数名	类型	默认值	说明
json_file	string	vlm_result.json	JSON 布局描述文件路径
code_file	string	index.html	需要调整的 HTML 代码文件路径

前置条件

• 检查 ${json_file} 是否存在（可选，不存在则跳过 JSON 相关步骤）

第 1 步：识别列表控件

从 ${json_file} 中找出列表控件，判断条件如下：

列表类型	判断条件
横向列表	子元素的 y 和 height 一致；或者两组交错 y 和 height 一致的元素交错排列
纵向列表	子元素的 width 和 x 坐标都一致；或者局部连续的元素 width 和 x 坐标相同，且子元素的结构相似
网格列表	子元素 height 相同，存在多行，同行 y 坐标相同

第 2 步：控件匹配

遍历列表控件，在 ${code_file} 中进行控件匹配：

• 横向列表匹配：找到 ${code_file} 中一个容器，其包含的文本大部分都能与横向列表元素匹配成功
• 纵向列表匹配：找到 ${code_file} 中一个容器，其包含的文本大部分都能与纵向列表元素匹配成功
• 网格列表匹配：将网格拆成多行，逐行文本匹配，每行中的文字大部分都能匹配成功

第 3 步：调整布局

将原始 ${code_file} 备份为 ${code_file}.backup，然后修改 ${code_file} 调整布局。

3.1 横向列表调整

子类型	处理方式
交错列表	将 ${code_file} 中相邻的交错元素用一个新容器进行包裹和分组，变成标准横向列表
带分割线列表	如果横向列表元素中包含垂直分割线，且分割线和其他元素间隔分布，则将分割线提取出来，剩余的元素包裹容器宽度进行等分，内部元素垂直居中

3.2 局部纵向列表调整

如果 ${code_file} 中的局部纵向列表元素未被包裹，用一个新容器将这些元素包裹起来。

3.3 网格列表调整

⚠️ 必须按顺序判断

如果 ${code_file} 中每一行的文本匹配到的容器都不一样，将这些容器合并成一个大的网格布局：

判断顺序	类型	条件	处理方式
1	表格	行列元素间距都 ≤ 2px，且同一列的元素宽度相同（误差 ≤ 1px）	不要用flex-wrap: wrap布局，改成 <table> 结构
2	折行布局	不满足表格条件（不同列元素宽度不一致）	采用 display: flex; flex-wrap: wrap，并计算设置 row-gap 和 column-gap