SKILL.md 5.2 KB
name: pc-admin-style-governance
description: PC 管理后台风格统一与模块治理专家。用于把已有后台模块改造成指定基准模块的设计风格和操作逻辑，并约束后续新增模块持续保持一致。当用户提到"风格统一"、"操作逻辑统一"、"对齐权益管理"、"活动管理改造"、"新增模块规范"、"后台模块治理"、"页面规范沉淀"、"统一后台设计"时，必须使用此 skill。
PC 管理后台风格统一与模块治理专家
适用场景
本 skill 解决两类问题：
- 现有模块改造：例如活动管理和权益管理风格不同，需要把活动管理改成权益管理的设计风格和操作逻辑。
- 新增模块约束：之后新增后台模块时，必须沿用已确认的页面结构、组件模式、交互流程和文案规范。
本 skill 不替代具体技术栈构建 skill。实际编码时，应结合项目现有技术栈执行；如果项目是 Vue 3 + Element Plus，就不能混入 React/antd 规范。
核心原则
- 以已被确认的基准模块为准，不凭空创造另一套设计。
- 只保留业务差异，统一页面结构、操作位置、状态展示、弹窗/抽屉和反馈逻辑。
- 同一结构出现两次以上，优先抽公共组件、配置或页面模板。
- 新增模块先套模板，再补业务字段和业务流程。
- 规范必须能被代码执行，不停留在抽象描述。
工作流程
1. 确定基准模块
优先使用用户明确指定的基准模块，例如：
- 权益管理
- 已验收的列表页
- 已验收的详情页
- 已验收的新增/编辑页
如果用户没有指定基准模块，先在项目中查找最完整、最新、风格最统一的后台模块作为候选，并说明选择依据。
2. 读取基准模块
必须阅读基准模块的相关代码，而不是只看截图或凭记忆判断。重点读取：
- 列表页
- 详情页
- 新增/编辑页
- 搜索筛选区
- 表格列和操作列
- 状态标签
- 弹窗、抽屉、确认框
- 菜单和路由配置
- 公共组件和公共样式
3. 读取目标模块
对要改造的模块做同样梳理，例如活动管理：
- 页面结构是否一致
- 筛选区字段、按钮和展开逻辑是否一致
- 操作按钮位置和层级是否一致
- 表格操作列是否一致
- 状态展示是否一致
- 新增/编辑/详情入口是否一致
- 删除、停用、审核等危险操作是否有统一确认
4. 输出差异清单
改造前先形成差异清单，按两类归因：
| 类型 | 处理方式 |
|---|---|
| 业务差异 | 保留，例如字段、状态流转、业务规则 |
| 风格/交互差异 | 必须对齐基准模块 |
差异清单应具体到页面区域和组件，不写泛泛的"样式不同"。
5. 实施改造
改造顺序：
- 统一页面外层容器和布局。
- 统一筛选区结构、按钮位置、查询/重置逻辑。
- 统一操作按钮区和按钮层级。
- 统一表格密度、列操作、分页和空状态。
- 统一状态标签、金额/日期/枚举格式化。
- 统一弹窗、抽屉、确认框和消息提示。
- 抽取或复用公共组件。
6. 固化新增模块规范
完成现有模块改造后，应把复用规则沉淀到以下位置之一：
- 公共组件
- 页面模板
- 配置文件
- 样式变量
- 项目文档
- 本 skill 的 references
后续新增模块必须先匹配页面类型，再套对应模板。
页面一致性检查表
列表页
- 页面标题、面包屑、菜单高亮一致。
- 筛选区默认展示项数量和布局一致。
- 查询、重置、更多筛选按钮位置一致。
- 操作按钮区位置一致，主按钮样式一致。
- 表格表头、行高、操作列位置一致。
- 分页位置、默认页大小和页大小选项一致。
- 空状态、加载态、错误提示一致。
详情页
- 返回入口位置一致。
- 顶部操作按钮位置一致。
- 基础信息展示方式一致。
- Tab 或分组结构一致。
- 明细表格样式一致。
表单页
- 新增和编辑尽量复用同一表单组件。
- 表单分组、字段间距、必填标识一致。
- 提交、取消按钮位置一致。
- 校验文案风格一致。
- 保存成功、失败提示一致。
弹窗和抽屉
- 简单确认使用确认框。
- 复杂筛选或侧滑详情使用抽屉。
- 新增/编辑弹窗宽度、标题、按钮顺序一致。
- 危险操作必须二次确认。
输出要求
执行本 skill 时，最终说明应包含：
- 使用哪个模块作为基准。
- 改造了哪些页面或组件。
- 哪些差异被保留为业务差异。
- 新增了哪些公共组件、模板或规范。
- 验证方式和结果。
禁止事项
- 不允许在没有读取基准模块代码的情况下直接改造目标模块。
- 不允许为了统一风格删除必要业务字段。
- 不允许同一后台系统中混用两套组件库规范。
- 不允许新增模块绕开公共模板独立实现完整页面结构。
- 不允许只改颜色和间距，却不统一操作逻辑。