# 规则分组管理 - 页面改动说明

## 1. 背景

规则分组管理页面原为管理员专用页面，需要对普通用户开放只读访问，并与其他风控运营管理页面保持一致的视图切换体验。

---

## 2. 改动概述

本次改动包括：

1. 开放普通用户只读访问
2. 添加管理员/普通用户视图切换功能
3. 优化页面布局，消除水平滚动条
4. 优化左侧面板收起/展开交互

---

## 3. 操作权限

| 操作 | 管理员 | 普通用户 |
|------|--------|----------|
| 查看分组树 | 可以 | 可以 |
| 查看分组详情 | 可以 | 可以 |
| 查看组内规则列表 | 可以 | 可以 |
| 查看看板 | 可以 | 可以 |
| 新建分组 | 可以 | 不可（按钮隐藏） |
| 删除分组 | 可以 | 不可（按钮隐藏） |
| 保存分组 | 可以 | 不可（按钮隐藏） |
| 添加规则 | 可以 | 不可（按钮隐藏） |
| 移除规则 | 可以 | 不可（按钮隐藏） |

---

## 4. 页面改动说明

### 4.1 视图标识与切换

页面标题区域采用左右布局：左侧标题，右侧视图标识 + 切换按钮，与其他风控运营管理页面一致。

```html
<div class="page-header" style="display:flex; justify-content:space-between; align-items:center;">
  <h1 class="page-title">规则分组管理</h1>
  <div class="d-flex align-items-center gap-2">
    <span class="scope-indicator scope-admin" id="scopeIndicator">
      <i class="fa fa-shield"></i>
      <span id="scopeText">管理员视图</span>
    </span>
    <button class="btn btn-outline-primary btn-sm" id="toggleRoleBtn" title="切换视图">
      <i class="fa fa-exchange"></i> 切换
    </button>
  </div>
</div>
```

### 4.2 提示区域

页面标题下方新增蓝色提示框：

```html
<div class="tip-box" id="scopeTipBox">
  <i class="fa fa-info-circle me-1"></i>
  <span id="adminTip">当前为管理员视图，可管理规则分组。</span>
  <span id="userTip" style="display:none;">当前为普通用户视图，仅可查看规则分组信息。</span>
</div>
```

### 4.3 角色切换逻辑

页面复用已有的 `admin-only` class 和 `readonly` 机制，通过切换按钮控制：

```javascript
let currentUserRole = 'admin'; // 'admin' | 'user'

function updateRoleUI() {
  const isAdmin = currentUserRole === 'admin';

  // 视图标识
  indicator.className = 'scope-indicator ' + (isAdmin ? 'scope-admin' : 'scope-user');
  scopeText.textContent = isAdmin ? '管理员视图' : '普通用户视图';

  // admin-only 按钮
  document.querySelectorAll('.admin-only').forEach(el => {
    el.style.display = isAdmin ? '' : 'none';
  });

  // 表单输入（分组编码始终只读，其他字段普通用户禁用）
  document.querySelectorAll('.form-control, .form-select').forEach(el => {
    if (isAdmin) {
      el.removeAttribute('readonly');
      el.removeAttribute('disabled');
    } else {
      if (el.id === 'groupCode') {
        el.setAttribute('readonly', true);
      } else {
        el.setAttribute('disabled', true);
      }
    }
  });

  // 拖拽手柄
  document.querySelectorAll('.drag-handle').forEach(el => {
    el.style.display = isAdmin ? '' : 'none';
  });

  // 规则表格操作列
  ruleTable.querySelectorAll('thead tr th:last-child, tbody tr td:last-child').forEach(el => {
    el.style.display = isAdmin ? '' : 'none';
  });
}
```

### 4.4 页面布局优化

**问题**：右侧主内容区域出现水平滚动条。

**解决方案**：

```css
/* 主内容区域禁止水平溢出 */
.main-content {
  overflow-x: hidden;
}

/* 表单字段可自适应收缩 */
.form-row .form-group {
  flex: 1;
  min-width: 0;
}

.form-row .form-group .form-control,
.form-row .form-group .form-select {
  flex: 1;
  min-width: 0;
}

/* 分组详情面板不超出容器 */
.group-detail-panel {
  overflow: hidden;
}

.group-detail-body {
  overflow-y: auto;
  overflow-x: hidden;
}

/* 组内规则列表独立滚动 */
.rule-table-wrapper {
  overflow-x: auto;
}

.rule-table {
  min-width: 1000px;
}

/* 操作列固定在最右侧 */
.rule-table th:last-child,
.rule-table td:last-child {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 2;
}
```

### 4.5 左侧面板收起/展开优化

**问题**：原有的收起按钮是标题栏内的小箭头图标，不够明显。

**解决方案**：改为面板右边缘的展开条，更直观。

```html
<div class="panel-collapse-bar" onclick="togglePanel()" title="收起/展开规则分组面板">
  <i class="fa fa-angle-left" id="collapseBarIcon"></i>
</div>
```

```css
.panel-collapse-bar {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 48px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-left: none;
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #909399;
  font-size: 12px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  z-index: 5;
}

.panel-collapse-bar:hover {
  color: #409EFF;
  background: #ecf5ff;
  width: 24px;
  right: -24px;
}
```

展开状态显示左箭头（`←`），收起状态显示右箭头（`→`），点击可切换。

---

## 5. 功能边界

### 5.1 本次做了

- 页面对普通用户开放（只读）
- 新增视图标识和角色切换按钮（右侧，与其他页面一致）
- 新增提示区域
- 普通用户隐藏管理按钮、表单禁用、操作列隐藏
- 消除右侧主内容区域的水平滚动条
- 组内规则列表超宽时独立滚动，操作列固定
- 左侧面板收起/展开改为边缘展开条

### 5.2 本次不做

- 不实现普通用户编辑分组
- 不实现普通用户添加/移除规则
- 不新增后端接口

---

## 6. 验收检查点

- 普通用户可访问规则分组管理页面
- 普通用户可查看分组树、分组详情、组内规则列表
- 普通用户可查看运营看板
- 普通用户看不到新建/删除/保存/添加规则/移除规则按钮
- 普通用户表单字段为禁用状态
- 点击"切换"按钮可切换管理员/普通用户视图
- 视图标识在右侧，与风控运营管理其他页面一致
- 右侧主内容区域无水平滚动条
- 组内规则列表超宽时独立滚动，操作列固定在最右侧
- 左侧面板收起/展开条清晰可见，交互正常