# 权限管理

> 模块编码：permission
> 端侧：Web专属（仅超级管理员）
> 关联文档：01-模块划分 §8 / 02-功能清单-超级管理员 §2 / 03-业务流转逻辑-超级管理员 §4~6 / 05-接口规范 §4.2~4.3 / 06-项目技术要求 §4.2
> 强制规范遵循 `07-前端界面开发规范.md`

## 功能概览

| 项目 | 说明 |
|------|------|
| 菜单名称 | 权限管理 |
| 子菜单 | 角色管理、权限配置注册、权限审计日志 |
| 功能编号 | SA-P-01 ~ SA-P-10 |
| 权限编码前缀 | permission:role:* / permission:config:* |

---

## 页面1：角色管理列表页

**页面编号**：SA-P-01-P01
**端侧归属**：Web专属
**页面路径**：/permission/roles

### 界面布局

```
┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 权限管理 > 角色管理                                       │
├──────────────────────────────────────────────────────────────────┤
│ [查询条件区]                                                      │
│ 角色名称[____] 适用范围[▼] 状态[▼]                  [查询] [重置]  │
├──────────────────────────────────────────────────────────────────┤
│ [操作栏]  [新增角色]                                              │
├──────────────────────────────────────────────────────────────────┤
│ [列表区]                                                          │
│ 序号 | 角色名称 | 适用范围 | 预设模板 | 关联账号数 | 状态 | 操作    │
│ 1    | 医院查看   | 医院    | 是       | 5         | 启用 | 编辑 停用│
│ 2    | 巡检主管   | 物业下属| 否       | 8         | 启用 | 编辑 停用│
│ 3    | 维修员     | 物业下属| 是       | 23        | 启用 | 编辑 停用│
├──────────────────────────────────────────────────────────────────┤
│ [分页]  共15条  每页[20▼]  < 1 >                                  │
└──────────────────────────────────────────────────────────────────┘
```

### 查询条件

| 字段名 | 控件类型 | 必填 | 默认值 | 说明 |
|--------|----------|------|--------|------|
| 角色名称 | 文本输入 | 否 | — | 模糊匹配 |
| 适用范围 | 下拉单选 | 否 | 全部 | 医院账号/物业管理员/物业下属 |
| 状态 | 下拉单选 | 否 | 全部 | 启用/停用 |

### 列表字段

| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 序号 | 60px | — | 自增 |
| 2 | 角色名称 | 150px | 是 | — |
| 3 | 适用范围 | 120px | 否 | 医院账号/物业管理员/物业下属 |
| 4 | 预设模板 | 80px | 否 | 是/否标签 |
| 5 | 关联账号数 | 100px | 是 | 点击查看关联账号列表 |
| 6 | 状态 | 80px | 是 | 启用/停用 |
| 7 | 操作 | 220px | — | 编辑/权限预览/停用/删除 |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 新增角色 | permission:role:create | 操作栏 | 始终 | 跳转新增页 |
| 编辑 | permission:role:update | 行操作 | 始终 | 跳转编辑页 |
| 权限预览 | permission:role:view | 行操作 | 始终 | 弹窗展示完整权限清单 |
| 停用 | permission:role:update | 行操作 | 状态=启用 | 二次确认 |
| 删除 | permission:role:delete | 行操作 | 关联账号数=0 | 二次确认 |

### 角色差异化视图

| 角色 | 可见按钮 | 数据范围 | 备注 |
|------|----------|----------|------|
| 超级管理员 | 全部按钮 | 全部角色 | — |

### API端点

| 页面操作 | API路径 | 方法 | 说明 |
|----------|---------|------|------|
| 列表查询 | /api/v1/roles | GET | 分页查询 |
| 停用角色 | /api/v1/roles/{id}/disable | PUT | — |
| 删除角色 | /api/v1/roles/{id} | DELETE | 仅无关联账号时可删 |

### 交互流程要求

1. **页面加载流程**
   - 进入页面 → 调用 `GET /api/v1/roles` 加载列表（默认第1页，创建时间倒序）
   - 并行加载下拉选项：适用范围、状态
   - 列表为空时显示空状态插图 + "暂无角色"

2. **查询交互流程**
   - 填写查询条件 → 点击"查询"→ 调用API → 重置到第1页
   - 点击"重置"→ 清空条件 → 重新加载

3. **行内操作流程**
   - **编辑**：点击"编辑"→ 路由跳转 `/permission/roles/:id/edit`
   - **权限预览**：点击"权限预览"→ 弹窗展示该角色的完整权限清单（调用 `GET /api/v1/roles/{id}/permissions`）
   - **停用**：二次确认（"确认停用角色XX？停用后关联账号将失去该角色的权限"）→ 调用 `PUT /api/v1/roles/{id}/disable` → 成功提示 → 刷新列表
   - **删除**：仅关联账号数=0时显示 → 二次确认（"确认删除角色XX？此操作不可恢复"）→ 调用 `DELETE /api/v1/roles/{id}` → 成功提示 → 刷新列表

4. **联动交互**
   - "关联账号数"可点击 → 弹窗展示使用该角色的账号列表

5. **异常处理**
   - 删除角色失败（存在关联账号）→ 提示"该角色下存在关联账号，无法删除"
   - 停用角色失败 → 提示具体原因
   - API失败 → 通用错误提示

6. **权限控制交互**
   - 无 `permission:role:create` → "新增角色"按钮不渲染
   - 无 `permission:role:update` → "编辑""停用"按钮不渲染
   - 无 `permission:role:delete` → "删除"按钮不渲染
   - 无 `permission:role:view` → "权限预览"按钮不渲染

7. **[H1]防重复请求**
   - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
   - 行内操作（停用/删除等）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复
   - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
   - 页面初始化并行请求之间互不阻塞

8. **[H2]超时与加载反馈**
   - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
   - 停用/删除等写操作API：timeout=30秒；操作按钮:loading态
   - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
   - 列表加载超过2秒时显示全局ElLoading进度提示

9. **[H3]操作确认机制**
   - 停用角色：ElMessageBox.confirm("确定要停用「{角色名}」吗？停用后关联账号将失去该角色的权限", "操作确认", { type: 'warning' })
   - 删除角色：ElMessageBox.confirm("确定要删除「{角色名}」吗？此操作不可恢复", "删除确认", { type: 'error' })
   - 确认弹窗期间底层页面不可点击

10. **[H8]操作结果反馈**
    - 成功：ElMessage.success(duration=2000ms) → silent刷新列表
    - 失败：ElMessage.error(duration=0手动关闭)
    - 网络异常：提示"网络连接异常"+ 重试按钮

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 查询条件区 | el-form | inline, label-width="auto" |
| 适用范围下拉 | el-select | clearable, placeholder="请选择" |
| 状态标签 | el-tag | 启用:type="success", 停用:type="danger" |
| 预设模板标签 | el-tag | 是:type="primary", 否:type="info" |
| 关联账号数 | el-link | type="primary", underline=false, @click="showRelatedAccounts" |
| 操作按钮 | el-button | type="primary", link, size="small" |
| 删除按钮 | el-button | type="danger", link, size="small" |
| 分页 | el-pagination | layout="total, sizes, prev, pager, next" |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 角色名称（查询） | 最大30字符 | — |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 查询条件一行排列；列表完整展示所有列 |
| 1024-1279px（Pad横屏） | 查询条件一行排列；"预设模板"列隐藏 |
| 768-1023px（Pad竖屏） | 查询条件两行排列；列表仅显示：序号、角色名称、适用范围、状态、操作 |

---

## 页面2：角色新增/编辑页

**页面编号**：SA-P-01-P02
**端侧归属**：Web专属
**页面路径**：/permission/roles/create 或 /permission/roles/:id/edit

### 界面布局

```
┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 权限管理 > 角色管理 > 新增角色                              │
├──────────────────────────────────────────────────────────────────┤
│ ── 基本信息 ──                                                    │
│ 角色名称：[____________]                                          │
│ 角色描述：[____________________________]                          │
│ 适用范围：[▼] (医院账号/物业管理员/物业下属)                        │
│ 选择预设模板：[▼可选]  选择后自动填充权限，可微调                    │
├──────────────────────────────────────────────────────────────────┤
│ ── 权限分配（四级树形勾选）──                                       │
│ ☑ 功能菜单：在线报修                                               │
│   ├── ☑ 页面：工单列表                                             │
│   │     ├── ☑ 功能点：工单管理                                      │
│   │     │     ├── ☑ 查看  ☑ 新增  ☑ 编辑                          │
│   │     │     ├── ☐ 删除  ☐ 审批  ☑ 导出  ☑ 分配                  │
│   │     └── ☑ 功能点：批量操作                                      │
│   │           ├── ☑ 查看  ☐ 新增  ☐ 编辑                          │
│   │           └── ☐ 删除  ☐ 审批  ☐ 导出  ☐ 分配                  │
│   ├── ☑ 页面：工单详情                                             │
│   │     ├── ☑ 功能点：延期审批                                      │
│   │     │     ├── ☑ 查看  ☐ 新增  ☐ 编辑                          │
│   │     │     └── ☐ 删除  ☑ 审批  ☐ 导出  ☐ 分配                  │
│   │     └── ☑ 功能点：工单验收                                      │
│   │           ├── ☑ 查看  ☐ 新增  ☐ 编辑                          │
│   │           └── ☐ 删除  ☑ 审批  ☐ 导出  ☐ 分配                  │
│   └── ☐ 页面：报修类型管理                                          │
│         ...                                                       │
│ ☐ 功能菜单：巡检管理                                               │
│   ...                                                             │
├──────────────────────────────────────────────────────────────────┤
│                              [取消]  [权限预览]  [保存]            │
└──────────────────────────────────────────────────────────────────┘
```

### 表单字段（基本信息）

| 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 |
|--------|----------|------|--------|----------|----------|
| 角色名称 | 文本输入 | 是 | — | 自填 | 最大30字，全局唯一 |
| 角色描述 | 多行文本 | 否 | — | 自填 | 最大200字 |
| 适用范围 | 下拉单选 | 是 | — | 固定选项 | 医院账号/物业管理员/物业下属 |
| 预设模板 | 下拉单选 | 否 | — | 预设模板列表 | 选择后自动填充权限 |

### 预设模板选项

| 模板名称 | 适用对象 | 典型权限 | 文档来源 |
|----------|----------|----------|----------|
| 物业管理员模板 | 物业公司管理员 | 全部日常业务管理权限 | 01 §8.4 |
| 主管模板 | 主管 | 本班组管理+审批+查看+导出 | 01 §8.4 |
| 班组长模板 | 班组长 | 本班组查看+分配+导出 | 01 §8.4 |
| 维修员模板 | 维修人员 | 接单+完工+延期申请 | 01 §8.4 |
| 巡检员模板 | 巡检人员 | 巡检执行+打卡+异常上报 | 01 §8.4 |
| 保洁员模板 | 保洁人员 | 保洁执行+打卡确认 | 01 §8.4 |
| 医院查看模板 | 医院账号 | 全部日常数据查看+合同+招标 | 01 §8.4 |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 权限预览 | permission:role:view | 底部操作栏 | 始终 | 弹窗展示已勾选的完整权限清单 |
| 保存 | permission:role:create/update | 底部操作栏 | 始终 | 保存后权限审计日志+实时生效 |

### 通知触发

| 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 |
|----------|----------|----------|----------|----------|
| 权限变更 | 关联账号用户 | Redis Pub/Sub | 毫秒级刷新权限缓存，无需重新登录 | 03-超级管理员 §6 |
| 权限变更 | 关联账号用户 | 小程序 | 下次接口请求时返回新权限集 | 03-超级管理员 §6 |

### API端点

| 页面操作 | API路径 | 方法 | 说明 |
|----------|---------|------|------|
| 新增角色 | /api/v1/roles | POST | — |
| 编辑角色 | /api/v1/roles/{id} | PUT | — |
| 获取权限树 | /api/v1/permissions/tree | GET | 四级权限树结构 |
| 权限预览 | /api/v1/roles/{id}/permissions | GET | 已分配的完整权限列表 |

### 交互流程要求

1. **页面加载流程**
   - 新增模式：空白表单 + 调用 `GET /api/v1/permissions/tree` 加载权限树
   - 编辑模式：并行调用权限树 + 角色详情（`GET /api/v1/roles/{id}`）→ 回填表单 + 勾选已有权限
   - 权限树加载中显示加载动画

2. **表单填写与提交流程**
   - 填写基本信息 → 选择预设模板（可选）→ 自动填充权限树勾选 → 微调权限 → 点击"保存"
   - 保存前校验：角色名称必填、适用范围必选、至少勾选一个权限项
   - 保存成功 → 记录权限审计日志 → 权限实时生效（Redis Pub/Sub）→ 返回列表页

3. **权限树交互**
   - 四级展开：功能菜单→页面→功能点→动作
   - 勾选父节点 → 自动勾选所有子节点
   - 取消父节点 → 自动取消所有子节点
   - 子节点全选 → 父节点自动勾选
   - 子节点部分选 → 父节点半选（indeterminate）
   - 支持搜索过滤权限名称

4. **预设模板联动**
   - 选择预设模板 → 弹出确认（"选择模板将覆盖当前权限配置，是否继续？"）→ 确认后自动勾选模板权限
   - 模板填充后仍可手动微调

5. **权限预览交互**
   - 点击"权限预览"→ 弹窗展示当前已勾选的权限清单（非保存后的，而是实时的）
   - 权限预览弹窗同页面3格式

6. **异常处理**
   - 角色名称重复 → 提示"该角色名称已存在"
   - 权限树加载失败 → 提示"权限配置加载失败"，提供"重试"按钮
   - 保存失败 → 提示错误信息，表单数据不丢失

7. **权限控制交互**
   - 无保存权限 → "保存"按钮禁用

8. **[H1]防重复请求**
   - 点击"保存"按钮后：:loading=true + 文案"保存中..." + disabled；API返回后恢复

9. **[H2]超时与加载反馈**
   - 提交API（POST/PUT）：timeout=30秒；回填API（GET）：timeout=15秒
   - 超时处理：中断 → 提示"保存超时..." → 按钮恢复

10. **[H3]操作确认机制**
    - 选择预设模板时：ElMessageBox.confirm("选择模板将覆盖当前权限配置，是否继续？", { type: 'warning' })

11. **[H4]脏数据检测**
    - 编辑模式进入时deep clone初始数据为快照
    - 修改任意字段→isDirty=true
    - 取消/路由离开时：isDirty则ElMessageBox.confirm("当前修改尚未保存...")
    - beforeRouteLeave导航守卫拦截
    - 保存成功后重置快照和isDirty

12. **[H8]操作结果反馈**
    - 成功：ElMessage.success("保存成功") → 延迟300ms返回列表页
    - 失败：ElMessage.error(duration=0)；表单数据保持不丢失

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 表单 | el-form | label-width="100px", :model, :rules |
| 角色名称 | el-input | maxlength=30, show-word-limit, clearable |
| 角色描述 | el-input | type="textarea", maxlength=200, show-word-limit, :rows=3 |
| 适用范围 | el-select | clearable, placeholder="请选择适用范围" |
| 预设模板 | el-select | clearable, placeholder="可选，选择后自动填充权限" |
| 权限树 | el-tree | show-checkbox, check-strictly=false, default-expand-all=false, :data="permissionTree", node-key="code", :filter-node-method |
| 权限搜索 | el-input | placeholder="搜索权限名称", clearable, prefix-icon="Search" |
| 权限预览按钮 | el-button | type="info", plain |
| 保存按钮 | el-button | type="primary", :loading |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 角色名称 | 必填, 2-30字符, 全局唯一 | "请输入角色名称" / "角色名称长度2-30字符" / "该角色名称已存在" |
| 适用范围 | 必填 | "请选择适用范围" |
| 权限勾选 | 至少勾选一个 | "请至少分配一项权限" |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 基本信息两列排列；权限树区域宽度100%，高度500px可滚动 |
| 1024-1279px（Pad横屏） | 基本信息两列排列；权限树区域高度400px |
| 768-1023px（Pad竖屏） | 基本信息单列排列；权限树区域高度350px，默认折叠到第二级 |

---

## 页面3：权限预览弹窗

**页面编号**：SA-P-06-P01
**端侧归属**：Web专属
**页面路径**：弹窗形式

### 界面布局

```
┌──────────────────────────────────────────────────────────────────┐
│ 权限预览 — 巡检主管                                        [×]    │
├──────────────────────────────────────────────────────────────────┤
│ ☑ 在线报修                                                       │
│   ├─ ☑ 工单列表                                                   │
│   │   ├─ ☑ 工单管理：查看 ✓ 新增 ✗ 编辑 ✓ 删除 ✗ 审批 ✓ 导出 ✓ 分配 ✗│
│   │   └─ ☐ 批量操作                                               │
│   ├─ ☑ 工单详情                                                   │
│   │   ├─ ☑ 延期审批：查看 ✓ 审批 ✓                                │
│   │   └─ ☑ 工单验收：查看 ✓ 审批 ✓                                │
│   └─ ☐ 报修类型管理                                               │
│ ☑ 巡检管理                                                       │
│   ├─ ☑ 巡检计划：查看 ✓ 新增 ✓ 编辑 ✓                             │
│   ...                                                             │
├──────────────────────────────────────────────────────────────────┤
│                                                         [关闭]    │
└──────────────────────────────────────────────────────────────────┘
```

### 说明

- 展示角色当前已分配的完整权限清单
- 四级展开：功能菜单→页面→功能点→动作
- 每个动作用 ✓/✗ 标识是否有权限
- 支持搜索功能菜单/页面名称

### 交互流程要求

1. **弹窗打开流程**
   - 从角色列表页或角色编辑页触发 → 调用 `GET /api/v1/roles/{id}/permissions` 加载权限数据 → 渲染权限树
   - 加载中弹窗内显示loading

2. **弹窗内交互**
   - 搜索框输入关键词 → 实时过滤权限树，高亮匹配项
   - 点击展开/折叠节点
   - 只读模式，不可修改勾选状态

3. **弹窗关闭**
   - 点击"关闭"按钮或右上角× → 关闭弹窗
   - 支持ESC键关闭

4. **[H1]防重复请求**
   - 弹窗打开时：调用API期间"关闭"按钮禁用 + 弹窗内显示v-loading遮罩；数据返回后恢复

5. **[H2]超时与加载反馈**
   - 权限查询API（GET）：timeout=15秒；加载中弹窗内显示loading骨架屏
   - 超时处理：中断 → ElMessage.error("权限数据加载超时") → 提供"重试"按钮

6. **[H8]操作结果反馈**
   - 加载失败：ElMessage.error(duration=0手动关闭) + 弹窗内展示重试按钮
   - 网络异常：提示"网络连接异常"+ 重试按钮

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 弹窗 | el-dialog | width="600px", :close-on-click-modal=true, title="权限预览" |
| 权限树 | el-tree | :data, default-expand-all, :props, :filter-node-method |
| 搜索框 | el-input | placeholder="搜索权限名称", clearable, prefix-icon="Search" |
| 权限标识 | el-tag | 有权限:type="success", ✓; 无权限:type="info", ✗ |
| 关闭按钮 | el-button | @click="dialogVisible=false" |

### 校验规则

无表单校验（只读展示页）

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 弹窗宽度600px |
| 1024-1279px（Pad横屏） | 弹窗宽度550px |
| 768-1023px（Pad竖屏） | 弹窗宽度90vw，最大500px |

---

## 页面4：权限配置注册页

**页面编号**：SA-P-10-P01
**端侧归属**：Web专属
**页面路径**：/permission/registry

### 界面布局

```
┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 权限管理 > 权限配置注册                                    │
├──────────────────────────────────────────────────────────────────┤
│ [说明] 此页面展示系统自动注册的权限配置（来源：IModulePlugin），      │
│        开发新增功能时自动同步，超级管理员可查看但不可手动编辑          │
├──────────────────────────────────────────────────────────────────┤
│ [查询条件区]                                                      │
│ 模块名称[____] 页面名称[____]                       [查询] [重置]  │
├──────────────────────────────────────────────────────────────────┤
│ [列表区]                                                          │
│ 模块编码 | 模块名称 | 页面编码 | 页面名称 | 功能点 | 可用动作        │
│ repair   | 在线报修 | repair_list| 工单列表 | 工单管理 | 查看,新增..│
│ repair   | 在线报修 | repair_detail|工单详情| 延期审批| 查看,审批   │
│ ...                                                               │
├──────────────────────────────────────────────────────────────────┤
│ [分页]  共120条  每页[20▼]  < 1 2 3 ... 6 >                       │
└──────────────────────────────────────────────────────────────────┘
```

### 查询条件

| 字段名 | 控件类型 | 必填 | 默认值 | 说明 |
|--------|----------|------|--------|------|
| 模块名称 | 文本输入 | 否 | — | 模糊匹配 |
| 页面名称 | 文本输入 | 否 | — | 模糊匹配 |

### 列表字段

| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 模块编码 | 100px | 否 | — |
| 2 | 模块名称 | 100px | 否 | — |
| 3 | 页面编码 | 130px | 否 | — |
| 4 | 页面名称 | 120px | 否 | — |
| 5 | 功能点编码 | 140px | 否 | — |
| 6 | 功能点名称 | 120px | 否 | — |
| 7 | 可用动作 | 200px | 否 | view,create,update,delete,approve,export,assign |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| — | — | — | — | 此页面只读，数据由IModulePlugin自动注册 |

### API端点

| 页面操作 | API路径 | 方法 | 说明 |
|----------|---------|------|------|
| 列表查询 | /api/v1/permissions/registry | GET | 查看已注册的权限配置 |
| 刷新 | /api/v1/permissions/registry/refresh | POST | 手动触发权限重新扫描 |

### 交互流程要求

1. **页面加载流程**
   - 进入页面 → 调用 `GET /api/v1/permissions/registry` 加载权限配置列表
   - 页面顶部显示说明提示条（el-alert），说明此页面为只读

2. **查询交互流程**
   - 填写查询条件 → 点击"查询"→ 筛选列表 → 重置到第1页

3. **操作流程**
   - **刷新**：点击"刷新"按钮 → 二次确认（"确认重新扫描权限配置？可能需要数秒"）→ 调用 `POST /api/v1/permissions/registry/refresh` → 成功提示 → 重新加载列表
   - 无其他操作按钮（只读页面）

4. **异常处理**
   - 刷新失败 → 提示"权限扫描失败，请稍后重试"

5. **权限控制交互**
   - 此页面仅超级管理员可见

6. **[H1]防重复请求**
   - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
   - 刷新操作：点击"刷新"按钮后:loading=true + disabled；API返回后恢复
   - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
   - 页面初始化并行请求之间互不阻塞

7. **[H2]超时与加载反馈**
   - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
   - 刷新操作API（POST）：timeout=30秒；操作按钮:loading态
   - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
   - 列表加载超过2秒时显示全局ElLoading进度提示

8. **[H3]操作确认机制**
   - 刷新权限配置：ElMessageBox.confirm("确认重新扫描权限配置？可能需要数秒", "操作确认", { type: 'warning' })
   - 确认弹窗期间底层页面不可点击

9. **[H8]操作结果反馈**
   - 成功：ElMessage.success(duration=2000ms) → silent刷新列表
   - 失败：ElMessage.error(duration=0手动关闭)
   - 网络异常：提示"网络连接异常"+ 重试按钮

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 说明提示条 | el-alert | type="info", :closable=false, show-icon |
| 列表 | el-table | stripe, border, v-loading |
| 可用动作 | el-tag | v-for 循环渲染, type="info", size="small" |
| 刷新按钮 | el-button | type="warning", icon="Refresh", plain |
| 分页 | el-pagination | layout="total, sizes, prev, pager, next" |

### 校验规则

无表单校验（只读页面）

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 列表完整展示所有列 |
| 1024-1279px（Pad横屏） | "功能点编码"列隐藏 |
| 768-1023px（Pad竖屏） | 列表仅显示：模块名称、页面名称、功能点名称、可用动作 |

---

## 页面5：权限审计日志页

**页面编号**：SA-P-08-P01
**端侧归属**：Web专属
**页面路径**：/permission/audit-log

### 界面布局

```
┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 权限管理 > 权限审计日志                                    │
├──────────────────────────────────────────────────────────────────┤
│ [查询条件区]                                                      │
│ 操作人[____] 操作类型[▼] 角色[____] 日期[起始]~[结束] [查询] [重置]│
├──────────────────────────────────────────────────────────────────┤
│ [列表区]                                                          │
│ 序号 | 操作时间 | 操作人 | 操作类型 | 目标角色 | 变更详情 | 操作    │
│ 1    | 14:00   | admin  | 权限修改 | 巡检主管 | [+2项][-1项]| 查看│
│ 2    | 11:30   | admin  | 角色创建 | 保洁主管 | —          | 查看│
├──────────────────────────────────────────────────────────────────┤
│ [分页]  共80条  每页[20▼]  < 1 2 3 4 >                            │
└──────────────────────────────────────────────────────────────────┘
```

### 查询条件

| 字段名 | 控件类型 | 必填 | 默认值 | 说明 |
|--------|----------|------|--------|------|
| 操作人 | 文本输入 | 否 | — | 模糊匹配 |
| 操作类型 | 下拉单选 | 否 | 全部 | 角色创建/权限修改/角色分配/角色移除 |
| 角色 | 文本输入 | 否 | — | 模糊匹配角色名称 |
| 日期范围 | 日期范围 | 否 | — | 操作时间范围 |

### 列表字段

| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 序号 | 60px | — | 自增 |
| 2 | 操作时间 | 150px | 是 | 默认倒序 |
| 3 | 操作人 | 100px | 否 | — |
| 4 | 操作类型 | 100px | 否 | 标签样式 |
| 5 | 目标角色 | 120px | 否 | — |
| 6 | 变更详情 | 120px | 否 | [+N项][-M项]，简洁展示 |
| 7 | 操作 | 80px | — | 查看详情 |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 查看详情 | audit-log:permission:view | 行操作 | 始终 | 弹窗展示变更前后对比 |

### 审计日志详情弹窗

```
┌──────────────────────────────────────────────────────────────────┐
│ 权限变更详情                                               [×]    │
├──────────────────────────────────────────────────────────────────┤
│ 角色：巡检主管                                                     │
│ 操作人：超级管理员(admin)                                          │
│ 操作时间：2026-04-16 14:00:00                                     │
│ 操作类型：权限修改                                                  │
├──────────────────────────────────────────────────────────────────┤
│ 变更对比：                                                         │
│  [+新增] 在线报修 → 工单详情 → 延期审批 → 审批                     │
│  [+新增] 在线报修 → 工单列表 → 工单管理 → 导出                     │
│  [-移除] 巡检管理 → 巡检计划 → 计划管理 → 删除                     │
├──────────────────────────────────────────────────────────────────┤
│                                                         [关闭]    │
└──────────────────────────────────────────────────────────────────┘
```

### API端点

| 页面操作 | API路径 | 方法 | 说明 |
|----------|---------|------|------|
| 列表查询 | /api/v1/audit-logs/permission | GET | 分页查询 |
| 详情查询 | /api/v1/audit-logs/permission/{id} | GET | 含变更前后对比 |

### 交互流程要求

1. **页面加载流程**
   - 进入页面 → 调用 `GET /api/v1/audit-logs/permission` 加载列表（默认倒序）
   - 并行加载下拉选项：操作类型
   - 列表为空时显示空状态

2. **查询交互流程**
   - 填写条件 → 点击"查询"→ 调用API → 重置到第1页
   - 日期范围选择器限制最多查询90天

3. **行内操作流程**
   - **查看详情**：点击"查看"→ 弹窗展示变更前后对比（调用 `GET /api/v1/audit-logs/permission/{id}`）
   - 新增权限用绿色 `[+新增]` 标记，移除权限用红色 `[-移除]` 标记

4. **异常处理**
   - 详情加载失败 → 提示错误信息
   - 日期范围超限 → 提示"查询时间范围不能超过90天"

5. **权限控制交互**
   - 无 `audit-log:permission:view` → 页面不可见

6. **[H1]防重复请求**
   - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
   - 行内操作（查看详情）：点击"查看"按钮后该行操作按钮禁用 + 按钮显示loading旋转图标；弹窗打开后恢复
   - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
   - 页面初始化并行请求之间互不阻塞

7. **[H2]超时与加载反馈**
   - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
   - 详情查询API：timeout=15秒；加载中弹窗内显示v-loading遮罩
   - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
   - 列表加载超过2秒时显示全局ElLoading进度提示

8. **[H8]操作结果反馈**
   - 成功：ElMessage.success(duration=2000ms) → silent刷新列表
   - 失败：ElMessage.error(duration=0手动关闭)
   - 网络异常：提示"网络连接异常"+ 重试按钮

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 日期范围选择 | el-date-picker | type="daterange", value-format="YYYY-MM-DD", :disabled-date |
| 操作类型标签 | el-tag | 角色创建:type="success", 权限修改:type="warning", 角色分配:type="primary", 角色移除:type="danger" |
| 变更摘要 | span | [+N项] color=green, [-M项] color=red |
| 详情弹窗 | el-dialog | width="650px", :close-on-click-modal=false |
| 新增权限 | div | color=var(--el-color-success), 前缀"[+新增]" |
| 移除权限 | div | color=var(--el-color-danger), 前缀"[-移除]" |
| 关闭按钮 | el-button | @click="dialogVisible=false" |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 日期范围 | 最多90天 | "查询时间范围不能超过90天" |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 查询条件一行排列；列表完整展示所有列；详情弹窗650px |
| 1024-1279px（Pad横屏） | 查询条件两行排列；"目标角色"列隐藏；详情弹窗600px |
| 768-1023px（Pad竖屏） | 查询条件两行排列；列表仅显示：序号、操作时间、操作人、操作类型、操作；详情弹窗90vw |

---

## 需求追溯

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| SA-P-01 | 角色定义 | 02-超级管理员 §2 / 03-超级管理员 §4 | 创建角色→权限分配 | 账号管理(角色绑定) |
| SA-P-02 | 角色权限分配 | 02-超级管理员 §2 / 03-超级管理员 §4 / 01 §8.1 | 权限变更→审计日志+实时生效 | 权限审计日志 / 权限实时生效 |
| SA-P-03 | 角色管理 | 02-超级管理员 §2 | 停用→关联账号权限失效 | 账号管理(角色绑定) |
| SA-P-04 | 权限预设模板 | 02-超级管理员 §2 / 01 §8.4 | 选择模板→自动填充权限 | 角色新增页(模板选择) |
| SA-P-05 | 账号角色绑定 | 02-超级管理员 §2 / 03-超级管理员 §4 | 在账号管理中操作 | 账号管理 / 物业组织架构(下属角色分配) |
| SA-P-06 | 权限预览 | 02-超级管理员 §2 | 预览→确认权限分配 | 角色新增/编辑页 |
| SA-P-07 | 权限自动同步 | 02-超级管理员 §2 / 03-超级管理员 §5 / 01 §8.2 | IModulePlugin注册→权限树自动更新 | 权限配置注册页 |
| SA-P-08 | 权限审计日志 | 02-超级管理员 §2 / 03-超级管理员 §8.2 / 01 §8.5 | 权限变更→自动记录 | 操作日志 |
| SA-P-09 | 权限实时生效 | 02-超级管理员 §2 / 03-超级管理员 §6 / 01 §8.3 | Redis Pub/Sub毫秒级生效 | — |
| SA-P-10 | 权限配置注册 | 02-超级管理员 §2 / 03-超级管理员 §5 | 查看IModulePlugin注册的权限 | 05-接口规范 §4.2 |

## 业务规则

1. **四级权限粒度**：功能菜单→页面→功能点→动作，7种动作类型（view/create/update/delete/approve/export/assign）（来源：01 §8.1 / 06 §4.2）
2. **权限自动同步**：新模块通过IModulePlugin.getPermissionDefinitions()自动注册，权限管理页面自动渲染新可勾选项（来源：01 §8.2 / 05 §4.2）
3. **权限实时生效**：权限变更后通过Redis Pub/Sub毫秒级生效，无需重新登录（来源：01 §8.3 / 03-超级管理员 §6 / 06 §3.1）
4. **权限审计日志**：记录操作人、时间、类型、变更前后对比（来源：01 §8.5 / 03-超级管理员 §8.2）
5. **角色删除条件**：仅关联账号数为0时才可删除（来源：02-超级管理员 SA-P-03）
6. **预设模板使用**：创建角色时选择模板→系统自动填充权限→管理员微调后保存（来源：01 §8.4）
7. **权限配置表只读**：权限配置注册页数据来源于IModulePlugin自动注册，超管只可查看不可手动编辑（来源：03-超级管理员 §5）