# 规则组运营看板与权限优化 - 页面改动说明

## 1. 文档目的

本文档用于记录本次"规则组运营看板与权限优化"在原型 Demo 中涉及的页面范围、具体改动点、交互变化与复用关系，便于后续在其他对话中继续讨论、回溯或扩展修改。

---

## 2. 本次改动概述

本次优化目标是：

- 放开规则组添加规则的状态限制（支持上线中、已上线、已下线）
- 新增规则组运营看板，提供全面的数据分析和可视化展示
- 规则分组管理页对普通用户开放只读权限

本次方案当前覆盖：

1. 规则分组管理页优化
2. 新增规则组运营看板页面
3. 侧边导航更新

本次明确不包含：

- 疑点相关的数据分析
- 真实后端接口对接

---

## 3. 涉及页面范围

本次实际改动的页面文件如下：

- `规则分组管理.html`（修改）
- `规则组运营看板.html`（新增）
- `风险监控入口.html`（修改）

本次未纳入当前有效改动范围的页面：

- 其他风控模块页面

说明：

- 其他页面的侧边导航未统一更新，后续可按需补充

---

## 4. 各页面改动说明

### 4.1 规则分组管理页

#### 文件

- `规则分组管理.html`

#### 改动目的

1. 放开添加规则的状态限制
2. 添加"查看看板"入口
3. 支持普通用户只读模式
4. 规则表格增加新字段

#### 具体改动

##### 4.1.1 组内规则表格字段更新

原字段：
- 拖拽手柄、序号、规则编号、规则名称、风险等级、业务域、操作

新字段：
- 拖拽手柄、序号、规则编号、规则名称、**状态**、风险等级、**规则类型**、业务域、**提交人**、**提出单位**、**提交时间**、**上线时间**、操作

新增字段说明：
- 状态：显示规则当前状态（上线中/已上线/已下线）
- 规则类型：显示普通规则或AI规则
- 提交人：规则提交人姓名
- 提出单位：规则提出所属单位（单位A、单位B等，非部门）
- 提交时间：规则提交进入上线流程的时间
- 上线时间：规则上线时间（已上线规则显示，其他状态显示"-"）

页面宽度自适应：
- 页面整体自适应浏览器宽度，无需左右拖动
- 左侧规则分组面板宽度调整为280px
- 规则表格宽度自适应容器，不设固定最小宽度
- 表格单元格禁止换行（`white-space: nowrap`）
- 当页面宽度不足以显示所有列时，表格容器自身出现水平滚动条
- 操作列固定在最右侧，不受水平滚动影响

##### 4.1.2 分组详情头部新增按钮

原按钮：
- 删除分组、保存

新按钮：
- **查看看板**、删除分组、保存

新增按钮说明：
- "查看看板"按钮：点击后跳转到该规则组的运营看板页面
- 按钮样式：`btn-info`（实心蓝色按钮），提升视觉突出度

##### 4.1.3 普通用户只读模式

通过URL参数 `readonly=true` 控制：

隐藏的元素：
- 新建分组按钮
- 删除分组按钮
- 保存按钮
- 添加规则按钮
- 移除规则按钮
- 拖拽手柄

禁用的元素：
- 所有 `form-control` 输入框
- 所有 `form-select` 下拉框

保留的元素：
- 查看看板按钮
- 所有只读展示内容

##### 4.1.4 规则分组面板折叠功能

- 左侧"规则分组"面板支持折叠/展开
- 折叠后面板宽度缩小为50px，只显示折叠按钮图标
- 折叠/展开按钮位于面板头部右侧（`<i class="fa fa-chevron-left toggle-panel-btn">`）
- 折叠后右侧分组详情区域显示空间增大
- 过渡动画：`transition: width 0.3s ease`

##### 4.1.5 分组规则收缩功能

- 每个分组下的规则列表支持收缩/展开
- 收起按钮（`<i class="fa fa-caret-down toggle-children-btn">`）位于分组节点右侧
- 收起后规则列表隐藏，只显示分组名称和规则数量
- 按钮旋转动画：收缩时旋转-90度

##### 4.1.6 添加规则弹窗优化

新增筛选条件：
- 状态筛选下拉框（全部状态/上线中/已上线/已下线）

规则列表字段调整：
- 新增"状态"列：显示规则当前状态
- 新增"提交人"列：显示规则提交人
- 新增"提交单位"列：显示提交所属单位
- 新增"监控目标"列：显示规则监控目标
- 新增"监控逻辑"列：显示规则监控逻辑
- 移除"当前分组"列

新增提示文案：
- "可添加'上线中'、'已上线'、'已下线'状态的规则，草稿状态不可添加"

##### 4.1.7 分组数据更新

规则数据新增字段：
```javascript
{
  id: 'GZ2025010100001',
  name: '住宿天数超标',
  status: '已上线',           // 新增
  level: 'critical',
  type: '普通规则',           // 新增
  domain: '领域1',
  submitter: '张三',           // 新增
  submitUnit: '单位A',        // 新增（原creatorUnit改为submitUnit，值改为单位A/B/C）
  submitTime: '2025-06-15',   // 新增
  onlineTime: '2025-07-01'    // 新增
}
```

##### 4.1.8 新增方法

```javascript
// 查看看板
function viewDashboard() {
  window.location.href = '规则组运营看板.html?groupId=' + currentGroupId + '&name=' + encodeURIComponent(groupData[currentGroupId].name);
}

// 折叠/展开规则分组面板
function togglePanel() {
  document.querySelector('.group-tree-panel').classList.toggle('collapsed');
}

// 折叠/展开分组内规则列表
function toggleChildren(event, btn) {
  event.stopPropagation();
  const children = btn.closest('.group-tree-item').querySelector('.group-children');
  children.classList.toggle('collapsed');
  btn.classList.toggle('collapsed');
}
```

##### 4.1.9 URL参数处理

```javascript
// 获取URL参数判断是否为只读模式
const urlParams = new URLSearchParams(window.location.search);
const isReadOnly = urlParams.get('readonly') === 'true';
```

---

### 4.2 规则组运营看板页（新增）

#### 文件

- `规则组运营看板.html`

#### 页面定位

- 规则组的专属运营看板
- 从规则分组管理页点击"查看看板"进入
- 展示该规则组的全面数据分析

#### 页面结构

##### 4.2.1 顶部区域

面包屑导航：
- 首页 > 风险监控 > 规则分组管理 > 规则组运营看板

页面标题：
- "规则组运营看板 - {规则组名称}"

操作区：
- 返回分组管理链接

##### 4.2.2 KPI卡片区域

5个KPI卡片（不受时间范围选择影响），按网格排列：

| 卡片 | 数据 | 样式 |
|------|------|------|
| 规则总数 | 组内规则总量 | 蓝色 |
| 已上线 | 已上线规则数 | 绿色 |
| 上线中 | 上线中规则数 | 橙色 |
| 已下线 | 已下线规则数 | 灰色 |
| 建设完成率 | 已上线/总数×100% | 蓝色 |

##### 4.2.3 图表区域

3个图表卡片，按3列网格排列：

1. **规则状态分布**（环形图）
   - 标签：已上线、上线中、已下线
   - 颜色：绿色、橙色、灰色

2. **风险等级分布**（柱状图）
   - 标签：重大、重要、一般
   - 颜色：红色、橙色、绿色

3. **规则类型分布**（环形图）
   - 标签：普通规则、AI规则
   - 颜色：蓝色、紫色

##### 4.2.4 趋势区域

2个趋势卡片，按2列网格排列：

1. **规则新增趋势**（折线图）
   - X轴：月份
   - Y轴：新增规则数
   - 颜色：蓝色
   - 卡片标题栏内含独立时间范围选择（近7天/近30天/近90天/近一年）

2. **状态流转趋势**（堆叠面积图）
   - X轴：月份
   - Y轴：规则数量
   - 数据集：已上线（绿）、上线中（橙）、已下线（灰）
   - 卡片标题栏内含独立时间范围选择（近7天/近30天/近90天/近一年）

说明：
- 两个趋势图表共享同一时间范围选择，修改任一选择器会同步更新另一个
- 时间范围选择不影响KPI卡片和分布图表
- 当前为静态原型，时间范围切换仅弹出提示

##### 4.2.5 URL参数

| 参数 | 说明 | 示例 |
|------|------|------|
| groupId | 规则组ID | G1 |
| name | 规则组名称（URL编码） | 差旅费报销 |

---

### 4.3 风险监控入口页

#### 文件

- `风险监控入口.html`

#### 改动目的

侧边导航中"风控运营管理"子菜单无需新增额外入口，"规则分组管理"本身已支持普通用户只读访问。

#### 具体改动

##### 4.3.1 侧边导航说明

"风控运营管理"子菜单保持原有菜单项，不额外新增入口：
- 规则统计分析
- 疑点统计分析
- 规则分组管理
- 消息模板管理

说明：
- 规则分组管理页通过 `?readonly=true` 参数支持普通用户只读模式
- 侧边导航三个页面（风险监控入口、规则分组管理、规则组运营看板）均已同步移除"规则组看板"菜单项

---

## 5. 复用关系说明

### 5.1 复用的页面

本次复用了以下页面的结构和组件：

- `common-styles.css`：项目统一UI规范
- Bootstrap 5：基础样式和组件
- Font Awesome：图标库

### 5.2 新增的页面

本次新增了以下页面：

- `规则组运营看板.html`：规则组专属运营看板

### 5.3 使用的第三方库

- Chart.js：图表库，用于绘制环形图、柱状图、折线图、堆叠面积图

---

## 6. 交互变化总结

### 6.1 规则分组管理页

#### 管理员模式

- 新增"查看看板"按钮（实心蓝色 `btn-info` 样式）
- 添加规则弹窗新增状态筛选及多列字段
- 规则表格新增提交人、提出单位等字段
- 页面宽度自适应，表格容器自身支持水平滚动，操作列固定右侧

#### 普通用户模式（readonly=true）

- 隐藏所有操作按钮
- 禁用所有表单输入
- 隐藏拖拽手柄
- 保留"查看看板"按钮

#### 面板折叠交互

- 左侧规则分组面板支持折叠/展开，折叠后宽度缩小为50px
- 每个分组的规则列表支持收缩/展开，便于浏览大量规则

### 6.2 新增交互

- 点击"查看看板"跳转到运营看板页面
- 运营看板两个趋势图表共享时间范围选择，修改任一会同步更新另一个

---

## 7. 影响范围说明

### 7.1 页面视觉影响

本次改动对视觉层的影响：
- 规则分组管理页：表格列数增加，新增按钮（实心蓝色），面板可折叠，分组规则可收缩，页面宽度自适应
- 新增运营看板页面：全新的数据可视化界面
- 侧边导航：无新增菜单项（规则分组管理本身支持只读模式）

### 7.2 交互逻辑影响

本次改动对交互逻辑的影响：
- 添加规则弹窗：新增状态筛选逻辑，规则列表字段调整
- 只读模式：通过URL参数控制页面元素显示/隐藏
- 页面跳转：新增从分组管理到运营看板的跳转
- 面板折叠：规则分组面板和分组内规则列表的折叠/展开交互
- 表格自适应：页面宽度自适应，表格容器自身水平滚动与操作列固定
- 趋势图表时间范围联动：两个趋势图表共享时间范围选择

### 7.3 不影响部分

本次不影响以下内容：
- 其他风控模块页面的主体逻辑
- 风险场景、疑点派发、疑点处置等模块
- 真实后端接口
- 规则分组的数据结构

---

## 8. 当前实现口径说明

由于当前 Demo 仍为静态原型，本次实现基于前端页面级逻辑，具有以下特点：

- 所有数据为 mock 数据
- 图表数据为静态预置值
- 只读模式通过URL参数和前端逻辑控制
- 不依赖真实后端接口

因此，本次改动的重点在于：

- 验证规则组运营看板的展示方案
- 验证普通用户只读模式的交互方案
- 优化添加规则的状态限制
- 演示规则组的数据分析能力

而不是代表后端已经支持真实联动。

---

## 9. 验收检查点

可按以下方式验证：

### 9.1 规则分组管理页

- 规则表格是否显示新字段（状态、规则类型、提交人、提出单位、提交时间、上线时间）
- 页面宽度是否自适应浏览器宽度，无需左右拖动
- 当宽度不足时，表格容器自身是否出现水平滚动条，操作列是否固定右侧
- 是否有"查看看板"按钮（实心蓝色样式）
- 点击"查看看板"是否正确跳转到运营看板页面
- 左侧规则分组面板是否可折叠/展开
- 分组内规则列表是否可收缩/展开

### 9.2 添加规则弹窗

- 是否有状态筛选下拉框
- 规则列表是否显示状态、提交人、提交单位、监控目标、监控逻辑列
- 是否已移除"当前分组"列
- 是否有提示文案说明可添加的规则状态

### 9.3 规则组运营看板

- 页面是否正确显示规则组名称
- KPI卡片是否正确显示数据
- 图表是否正常渲染
- 趋势图表的时间范围选择是否联动生效（修改任一选择器同步更新另一个）
- 无导出报表按钮
- 无规则明细列表

### 9.4 普通用户只读模式

- 通过 `规则分组管理.html?readonly=true` 进入
- 操作按钮是否隐藏
- 表单输入是否禁用
- 拖拽手柄是否隐藏
- "查看看板"按钮是否保留

### 9.5 侧边导航

- "风控运营管理"下无额外新增菜单项
- 规则分组管理页本身支持普通用户只读访问

---

## 10. 一句话总结

本次原型改动通过放开规则状态限制、新增规则组运营看板、开放普通用户只读权限，并优化了页面宽度自适应、面板折叠、表格自滚动、添加规则弹窗字段、趋势图表时间范围联动等交互细节，使运营方能够全面了解每个业务场景的规则建设情况，提升了规则分组管理的数据可视化和权限灵活性。