---
name: pc-admin-style-governance
description: PC 管理后台风格统一与模块治理专家。用于把已有后台模块改造成指定基准模块的设计风格和操作逻辑，并约束后续新增模块持续保持一致。当用户提到"风格统一"、"操作逻辑统一"、"对齐权益管理"、"活动管理改造"、"新增模块规范"、"后台模块治理"、"页面规范沉淀"、"统一后台设计"时，必须使用此 skill。
---
# PC 管理后台风格统一与模块治理专家

## 适用场景

本 skill 解决两类问题：

1.  **现有模块改造**：例如活动管理和权益管理风格不同，需要把活动管理改成权益管理的设计风格和操作逻辑。
2.  **新增模块约束**：之后新增后台模块时，必须沿用已确认的页面结构、组件模式、交互流程和文案规范。

本 skill 不替代具体技术栈构建 skill。实际编码时，应结合项目现有技术栈执行；如果项目是 Vue 3 + Element Plus，就不能混入 React/antd 规范。

## 核心原则

- 以已被确认的**基准模块**为准，不凭空创造另一套设计。
- 只保留业务差异，统一页面结构、操作位置、状态展示、弹窗/抽屉和反馈逻辑。
- 同一结构出现两次以上，优先抽公共组件、配置或页面模板。
- 新增模块先套模板，再补业务字段和业务流程。
- 规范必须能被代码执行，不停留在抽象描述。

## 工作流程

### 1. 确定基准模块

优先使用用户明确指定的基准模块，例如：

- 权益管理
- 已验收的列表页
- 已验收的详情页
- 已验收的新增/编辑页

如果用户没有指定基准模块，先在项目中查找最完整、最新、风格最统一的后台模块作为候选，并说明选择依据。

### 2. 读取基准模块

必须阅读基准模块的相关代码，而不是只看截图或凭记忆判断。重点读取：

- 列表页
- 详情页
- 新增/编辑页
- 搜索筛选区
- 表格列和操作列
- 状态标签
- 弹窗、抽屉、确认框
- 菜单和路由配置
- 公共组件和公共样式

### 3. 读取目标模块

对要改造的模块做同样梳理，例如活动管理：

- 页面结构是否一致
- 筛选区字段、按钮和展开逻辑是否一致
- 操作按钮位置和层级是否一致
- 表格操作列是否一致
- 状态展示是否一致
- 新增/编辑/详情入口是否一致
- 删除、停用、审核等危险操作是否有统一确认

### 4. 输出差异清单

改造前先形成差异清单，按两类归因：

| 类型 | 处理方式 |
| --- | --- |
| 业务差异 | 保留，例如字段、状态流转、业务规则 |
| 风格/交互差异 | 必须对齐基准模块 |

差异清单应具体到页面区域和组件，不写泛泛的"样式不同"。

### 5. 实施改造

改造顺序：

1.  统一页面外层容器和布局。
2.  统一筛选区结构、按钮位置、查询/重置逻辑。
3.  统一操作按钮区和按钮层级。
4.  统一表格密度、列操作、分页和空状态。
5.  统一状态标签、金额/日期/枚举格式化。
6.  统一弹窗、抽屉、确认框和消息提示。
7.  抽取或复用公共组件。

### 6. 固化新增模块规范

完成现有模块改造后，应把复用规则沉淀到以下位置之一：

- 公共组件
- 页面模板
- 配置文件
- 样式变量
- 项目文档
- 本 skill 的 references

后续新增模块必须先匹配页面类型，再套对应模板。

## 页面一致性检查表

### 列表页

- 页面标题、面包屑、菜单高亮一致。
- 筛选区默认展示项数量和布局一致。
- 查询、重置、更多筛选按钮位置一致。
- 操作按钮区位置一致，主按钮样式一致。
- 表格表头、行高、操作列位置一致。
- 分页位置、默认页大小和页大小选项一致。
- 空状态、加载态、错误提示一致。

### 详情页

- 返回入口位置一致。
- 顶部操作按钮位置一致。
- 基础信息展示方式一致。
- Tab 或分组结构一致。
- 明细表格样式一致。

### 表单页

- 新增和编辑尽量复用同一表单组件。
- 表单分组、字段间距、必填标识一致。
- 提交、取消按钮位置一致。
- 校验文案风格一致。
- 保存成功、失败提示一致。

### 弹窗和抽屉

- 简单确认使用确认框。
- 复杂筛选或侧滑详情使用抽屉。
- 新增/编辑弹窗宽度、标题、按钮顺序一致。
- 危险操作必须二次确认。

## 输出要求

执行本 skill 时，最终说明应包含：

- 使用哪个模块作为基准。
- 改造了哪些页面或组件。
- 哪些差异被保留为业务差异。
- 新增了哪些公共组件、模板或规范。
- 验证方式和结果。

## 禁止事项

- 不允许在没有读取基准模块代码的情况下直接改造目标模块。
- 不允许为了统一风格删除必要业务字段。
- 不允许同一后台系统中混用两套组件库规范。
- 不允许新增模块绕开公共模板独立实现完整页面结构。
- 不允许只改颜色和间距，却不统一操作逻辑。

## 参考文件

- [references/style-audit.md](./references/style-audit.md)
- [references/module-template.md](./references/module-template.md)
- [references/review-checklist.md](./references/review-checklist.md)