# 截图页面还原与实现

基于截图生成可维护的页面代码资产。

**核心方法**：看图 → 写代码 → 交付。

## 默认目标与可选优化

- **默认目标**：在用户未提出额外要求时，尽量 1:1 像素级还原截图的视觉与布局（不主动“改版”）。
- **可选优化**：如需我同时做“优化设计/交互”（信息结构调整、视觉升级、交互补全、可用性优化等），请在需求里明确说明；否则仅做还原与基础走查修复。

## 核心流程

1. **确认前置条件**
   - 确认模型支持视觉识别（不支持则立即告知用户）
   - 确认可以直接读取图片内容（不需要转换，不支持则立即告知用户）
   - 生成页面名称（规范：小写字母、数字、连字符）

2. **获取截图**
   - 使用用户提供的截图（本地路径或对话中上传）
   - 如仅提供外链或不可读路径，需请用户提供可读的本地文件或重新上传

3. **验证图片读取能力**
   - 尝试读取已提供的截图文件
   - **如果无法直接读取本地图片**（工具不支持或返回错误），必须：
     - 立即停止流程
     - 告知用户："无法读取本地图片，请将 `[图片绝对路径]` 复制到对话框后提交"
     - 等待用户提交图片后再继续
   - 禁止假设或猜测图片内容
   - 禁止通过 Base64 编码读取图片内容

4. **生成页面代码**

   - 直接基于截图生成页面代码
   - 在代码生成过程中内部完成：
     - 识别布局结构（Header/Sidebar/Content 等）
     - 识别组件（Button/Input/Table/Card 等）
     - 提取样式（颜色、字体、间距、圆角、阴影等）
     - 识别交互（点击、悬停、状态切换等）

   **输出文件**：
   - `src/pages/<page-name>/index.tsx`
   - `src/pages/<page-name>/style.css`（必须包含 `@import "tailwindcss";`）
   - `src/pages/<page-name>/components/`（根据需要）

   **核心代码规范**（必须遵守）：
   ```typescript
   // index.tsx 结构
   /**
    * @name 页面显示名称
    */
   import './style.css';
   import React from 'react';

   const Component = function PageName() {
     return <div>...</div>;
   };

   export default Component;
   ```
   ```css
   /* style.css 必须以此开头 */
   @import "tailwindcss";
   ```
   - 变量名必须是 `Component`，使用 `export default Component`
   - 详细规范见 `rules/development-standards.md`

5. **验收页面还原**
   - 运行验收命令：`node scripts/check-app-ready.mjs /pages/[页面名]`
   - 提供预览 URL
   - 确认页面基础功能正常（无编译错误、可正常访问）

6. **生成规格文档**
   - 基于已验收通过的页面代码生成规格文档
   - 输出文件：`src/pages/<page-name>/spec.md`
   - 文档内容应包括：
     - 页面结构说明
     - 组件清单
     - 样式规范（颜色、字体、间距等）
     - 交互说明
     - 数据需求（如有）

7. **最终交付**
   - 告知用户页面还原和规格文档已完成
   - 说明可进行二次生成（修复问题或优化重构）