| name | Step4-layout-interaction-versioned-布局与交互规范 |
| description | [Step4] 前端页面布局与交互规范检查与代码生成工具（多版本适配）。根据工程package.json中的version自动选择对应版本的规范规则。支持3.6.0-SNAPSHOT、3.6.1-SNAPSHOT、3.7.0-SNAPSHOT等多版本。执行链路：Step1→Step2→Step3→Step4（当前）→Step5。当用户提到'页面布局规范'、'交互规范'、'页面层级'、'弹窗规范'、'抽屉规范'、'滚动条规范'、'生成页面'、'页面模板'时使用。 |
前端页面布局与交互规范检查与代码生成（多版本适配）
概述
本技能是前端页面布局与交互规范检查与代码生成的多版本适配版本。基于《一体化系统界面规范》文档，对前端页面的布局结构、页面层级、弹窗/抽屉尺寸、滚动条、悬浮反馈、提示消息等进行标准化约束与检查。同时提供页面级代码模板和标准样例，支持快速生成符合规范的页面代码。
支持的版本
版本检测与路由流程
Step 0: 自动检测工程版本
此步骤在所有其他步骤之前执行，不可跳过。
- 读取当前工程根目录的
package.json 文件
- 提取
version 字段的值
- 如果无法提取版本号，则使用
3.6.0-SNAPSHOT 版本
- 将提取到的版本号与下方版本映射表匹配
版本映射规则
提取到的版本号 → 匹配规则 → 加载的版本规则目录
───────────────────────────────────────────────
3.6.0-SNAPSHOT → 精确匹配 → versions/3.6.0-SNAPSHOT/
3.6.1-SNAPSHOT → 精确匹配 → versions/3.6.1-SNAPSHOT/
3.7.0-SNAPSHOT → 精确匹配 → versions/3.7.0-SNAPSHOT/
3.6.x-SNAPSHOT → 模糊匹配 3.6 → versions/3.6.1-SNAPSHOT/ (取3.6系列最新)
3.7.x-SNAPSHOT → 模糊匹配 3.7 → versions/3.7.0-SNAPSHOT/ (取3.7系列最新)
其他版本 → 降级到默认 → versions/3.6.0-SNAPSHOT/ (基线版本)
Step 1: 加载版本规则
根据 Step 0 确定的版本目录，读取该目录下的 REFERENCE.md 文件，获取该版本的完整检查与生成规则。
Step 2: 执行检查或生成
按照加载的版本规则执行具体的布局与交互规范检查或页面代码生成操作。
使用场景
| 场景 | 触发关键词 | 调用功能 |
|---|
| 检查页面布局是否符合规范 | "页面布局规范"、"页面层级"、"弹窗规范"、"抽屉规范" | 版本检测 → 布局规范检查 |
| 检查交互行为是否符合规范 | "交互规范"、"滚动条规范"、"悬浮反馈"、"提示消息" | 版本检测 → 交互规范检查 |
| 查看页面布局标准样例 | "页面样例"、"布局样例"、"弹窗样例"、"卡片样例" | 版本检测 → 展示样例 |
| 使用模板生成页面 | "生成页面"、"页面模板"、"一级页面"、"全屏页面"、"抽屉页面" | 版本检测 → 模板生成 |
前置条件
- 建议先执行 Step 1 至 Step 3，确保项目结构、模块划分和组件规范已就绪
- 工程为 Vue 3 + TypeScript 前端项目
- 项目根目录存在
package.json（用于版本检测）
目录结构
Step4-layout-interaction-versioned-布局与交互规范/
├── SKILL.md # 本文件 - 版本检测与路由入口
└── versions/
├── 3.6.0-SNAPSHOT/ # 基线版本
│ ├── REFERENCE.md # 该版本完整规则
│ ├── examples/ # 页面布局样例（E08-E14）
│ ├── templates/ # 页面级模板（T01-T04）
│ └── scripts/ # 检查规则（S06-S07）
├── 3.6.1-SNAPSHOT/ # 增量修订版本
│ ├── REFERENCE.md
│ ├── examples/
│ ├── templates/
│ └── scripts/
└── 3.7.0-SNAPSHOT/ # 新特性版本
├── REFERENCE.md
├── examples/
├── templates/
└── scripts/
添加新版本
如需支持新的工程版本：
- 在
versions/ 下创建新的版本目录，如 versions/3.8.0-SNAPSHOT/
- 复制最接近的版本目录内容作为基础
- 修改
REFERENCE.md 中该版本特有的规则差异
- 在本文件（SKILL.md）的「支持的版本」表格中添加新条目
- 更新版本映射规则中的匹配逻辑
