# 前端代码视觉还原与重构规范

## 1. 核心目标与视觉红线

- **适用场景**：本规则用于 `get_frontend_code` 导出的 `html`、`vue`、`react`、`angular`、`wxml` 代码优化；其中第 4 节仅适用于已落盘 HTML 的截图复核与后续增量修补。
- **1:1 还原底线**：以设计稿截图为最终视觉基准。重构必须保证当前视口下布局、间距、裁切与层级 1:1 还原。
- **零重新设计**：绝对禁止私自替换或修改颜色（Hex/rgba）、字体层级、字重、行高、文案、图片裁切比例、圆角及阴影。

## 2. 多框架全局基础样式重置

- **执行范围**：`html`、`vue`、`react`、`angular`、`wxml` 必须执行本节；`android` 与 `json` 不执行。已有等价的全局规则时保留原实现，不要重复添加。
- **HTML**：最终可运行文档必须包含 `*,*::before,*::after { box-sizing: border-box }`、`body { padding: 0; margin: 0 }`、`p { margin: 0 }`。
- **Vue**：将上述 Web reset 放在非 `scoped` 的全局 `<style>` 或项目全局样式入口中，禁止只写入 `<style scoped>`。
- **React**：将上述 Web reset 写入应用的全局 CSS 入口（如 `index.css`、`global.css`）；禁止只写入 CSS Modules 或组件局部样式。需要时可创建并导入配套全局样式文件。
- **Angular**：将上述 Web reset 写入工作区全局 `styles.css` / `styles.scss`；禁止只写入组件样式或 `:host`。需要时可创建配套全局样式文件。
- **WXML**：不得原样使用 Web 的 `body`、`p` 或 `*::before` / `*::after`。必须在配套 WXSS 中实现等价效果：使用 `page` 清零页面 `margin` / `padding`，并针对本次实际使用的 WXML 根容器、文本及布局节点设置 `box-sizing: border-box` 和必要的默认间距清零。需要时创建同名 `.wxss` 文件。

## 3. D2C 结构重构原则（Absolute 转 Flex）

1. **消除绝对定位**：D2C 导出的全屏 `position: absolute` 仅作为初始参考。必须主动将页面骨架（header, nav, sidebar, main, card, section）重构为正常文档流与 `flex` 弹性布局。
2. **Flex 优先原则**：优先使用 `flex` + `gap` + `padding` + `align-items` + `justify-content` 表达横向与纵向排列。只有显式二维网格才使用 `grid`。
3. **最小必要 Absolute**：仅有叠层装饰、悬浮角标、覆盖层或无法用 flex 表达的重叠图形允许保留 `position: absolute`。
4. **自适应与保真平衡**：合理使用 `width: 100%`、`flex-1`、`self-stretch` 表达自适应关系，但绝不能为了响应式破坏截图中的准确对齐与裁切。

## 4. 已落盘 HTML 的修改流程与增量修补机制

1. **落盘文件直接编辑**：读取落盘 HTML，对照截图从大到小（画布比例 ➜ 主布局 ➜ 区块尺寸 ➜ 间距对齐 ➜ 文本换行 ➜ 图片裁切）定位偏差并**直接编辑落盘文件**。
2. **增量修补防覆盖（硬红线）**：
   - 当用户后续反馈“还原度不高”、“继续优化”时，**必须直接基于已落盘修改的文件进行增量修补**。
   - **严禁重新调用 `get_frontend_code`**（重新拉取会全量覆盖上一轮已修正的代码）；若需重新比对截图，仅调用 `get_screenshot`。
3. **独立可运行**：已落盘 HTML 必须保留完整 document 结构，并遵守第 2 节的 HTML 全局基础样式重置规则。