# 已上线规则编辑功能 - 页面改动说明

## 文档信息

- 文档名称：已上线规则编辑功能 - 页面改动说明
- 所属模块：全知平台 / 风控模块 / 规则详情
- 编写目的：说明已上线规则详情页增加编辑功能的改动内容，为前端开发提供指引
- 优化背景：已上线规则仍需修改详情信息，但当前页面无编辑入口。管理员和规则提交人应有编辑权限。

---

## 涉及页面

| 序号 | 页面文件 | 改动类型 | 说明 |
|------|----------|----------|------|
| 1 | `规则详情.html` | 修改 | 增加编辑模式，支持修改基本信息和技术信息 |

---

## 改动内容

### 1. 编辑入口

**位置**：页面右上角，返回链接同一行右侧。

**显示条件**：仅当当前用户为管理员或规则提交人时显示。

```html
<div class="page-header-bar">
    <a href="风险规则-我的规则.html" class="back-link">
        <i class="fa fa-arrow-left"></i> 返回我的规则
    </a>
    <button class="btn-edit-rule" id="btnEditRule" style="display:none;">
        <i class="fa fa-pencil"></i> 编辑
    </button>
</div>
```

**权限判断逻辑**：

```javascript
function canEditRule(basic) {
    if (currentUserRole === '管理员') return true;
    if (basic.submitter && basic.submitter === getCurrentUserName()) return true;
    return false;
}
```

### 2. 编辑模式提示条

进入编辑模式后，TAB区域顶部显示醒目提示条：

```html
<div class="edit-mode-banner" id="editModeBanner">
    <i class="fa fa-pencil"></i> 当前处于编辑模式 — 您正在修改已上线规则的基本信息，
    保存后将生成新版本并上链。
</div>
```

### 3. 基本信息编辑模式

`renderBasicInfo(data)` 函数根据 `isEditMode` 全局变量切换渲染模式：

#### 可编辑字段（变为输入框/下拉框）

| 字段 | 视图模式 | 编辑模式 | 必填 |
|------|---------|---------|------|
| 规则名称 | 静态文本 | `<input type="text">` | 是 |
| 业务域/业务能力 | `<select disabled>` | `<select>` | 是 |
| 监控目标 | 静态文本 | `<textarea>` | 是 |
| 监控逻辑 | 静态文本 | `<textarea>` | 是 |
| 风险等级 | `<select disabled>` | `<select>` | 是 |
| 处置类型 | `<select disabled>` | `<select>` | 是 |
| 备注 | `<textarea disabled>` | `<textarea>` | 否 |

#### 制度相关字段（带"重新关联"按钮）

| 字段 | 编辑模式行为 |
|------|------------|
| 对应制度来源 | 保持只读，标签旁显示"重新关联"按钮 |
| 对应制度编号 | 保持只读（由制度模块回填） |
| 对应制度名称 | 保持只读（由制度模块回填） |
| 对应制度内容 | 保持只读（由制度模块回填） |

**"重新关联"按钮**：

```html
<button type="button" class="btn-reg-rebind" onclick="rebindRegulation()">
    <i class="fa fa-link"></i> 重新关联
</button>
```

点击后跳转到制度分析模块（`有效制度库列表.html`）。用户在制度模块中找到新制度，打开正文，圈选文字，点击"关联风险规则"，在弹窗中选择当前规则完成关联。关联完成后，旧制度的绑定关系在后台保留历史记录，前端不展示。

> 后端改动：关联弹窗中的规则列表需放开"已上线"状态规则的筛选限制。

#### 始终只读字段

- 规则编码
- 规则提出人
- 规则提出单位

### 4. 技术信息编辑模式

`renderTechInfo(data)` 函数同样根据 `isEditMode` 切换：

| 字段 | 视图模式 | 编辑模式 |
|------|---------|---------|
| 规则类型 | `<select disabled>` | `<select>` |
| 模块名称 | 静态文本 | `<input>` |
| 数据系统 | `<select disabled>` | `<select>` |
| 登录用户名 | 静态文本 | `<input>` |
| 系统模块路径 | 静态文本 | `<input>` |
| 系统截图 | 上传按钮 disabled | 上传按钮可用 |
| 详情描述 | `<textarea disabled>` | `<textarea>` |
| 疑点数据展示字段 | 静态文本 | `<input>` |

### 5. 疑点描述模板编辑统一纳入编辑模式

**设计变更**：疑点描述模板的编辑不再独立于主编辑模式，统一由页面右上角"编辑"按钮控制，与基本信息/技术信息同步进入和退出编辑模式。

**权限逻辑**：

```javascript
const isAdmin = data.currentUserRole === '管理员';
const isSubmitter = currentSubmitter && currentSubmitter === getCurrentUserName();
const hasPermission = isOnline && (isAdmin || isSubmitter);
const canEdit = hasPermission && isEditMode;
```

**交互变化**：

| 状态 | 模板区域表现 |
|------|------------|
| 查看模式（有权限） | textarea 只读，显示提示"点击右上角编辑按钮可编辑疑点描述模板" |
| 编辑模式（有权限） | textarea 可编辑，变量可点击插入，"立即验证"按钮可用 |
| 无权限 | textarea 只读，显示"当前仅管理员或规则提交人可编辑" |

**保存流程变更**：
- 移除模板区域的独立"保存"按钮
- 模板修改统一由底部操作栏的"保存"按钮处理
- 保存时检查模板验证状态：若模板已修改但未验证，弹出确认"疑点描述模板尚未验证，是否继续保存？"
- 模板修改纳入变更摘要和编辑日志

### 6. 保存流程

#### 6.1 前端校验

保存时校验必填字段（带 `*` 标记的字段）：

```javascript
function validateForm() {
    const requiredFields = [
        { selector: '[data-field="ruleName"]', name: '规则名称' },
        { selector: '[data-field="monitoringObjective"]', name: '监控目标' },
        { selector: '[data-field="monitoringLogic"]', name: '监控逻辑' }
    ];
    // 校验不通过时，字段边框变红
}
```

#### 6.2 疑点描述模板验证检查

在生成变更摘要之前，检查模板验证状态：

```javascript
// 在 saveRule() 中，collectFormData() 之后
const templateTextarea = document.getElementById('doubtTemplateContent');
if (templateTextarea && currentRuleContext) {
    currentRuleContext.doubtTemplateConfig.content = templateTextarea.value;
}
if (currentRuleContext && currentRuleContext.doubtTemplateConfig.content &&
    !currentRuleContext.doubtTemplateConfig.validated) {
    if (!confirm('疑点描述模板尚未验证，是否继续保存？\n\n建议先点击"立即验证"检查变量是否匹配。')) {
        return; // 用户取消，返回编辑模式
    }
}
```

#### 6.3 变更摘要

保存前对比原始数据快照和当前表单数据，按分组生成变更摘要：

```javascript
function buildChangeSummary() {
    // 分三组比较：基本信息、技术信息、疑点描述模板
    // 每组独立展示，用颜色区分：
    //   蓝色(#409EFF) — 基本信息变更
    //   橙色(#E6A23C) — 技术信息变更
    //   绿色(#67C23A) — 疑点描述模板变更
    // 格式：字段名：旧值 → 新值
}
```

当同时修改了多个分类时，弹窗中会分组显示所有变更，每组有独立标题和分隔线，便于用户确认。

#### 6.4 二次确认弹窗

弹窗标题带警告色（橙色），内容包含：
- 提示文字："您正在修改已上线的规则，保存后将立即生效并生成新版本上链。"
- 变更摘要列表

#### 6.5 保存后处理

1. 记录编辑日志到 `localStorage`（操作人、角色、规则编号、时间戳、变更内容，含模板变更）
2. 同步疑点描述模板内容到 `ruleDatabase` 和 `localStorage`
3. 更新 `lastSubmitTime`（用于并发冲突检测）
4. 提示"规则已保存成功，新版本已生成并提交上链"
5. 退出编辑模式，重新渲染只读视图
6. 刷新区块链信息面板（显示新版本记录）

### 7. 未保存离开检测

两种场景触发检测：

| 场景 | 行为 |
|------|------|
| 点击"返回"链接 | 阻止跳转，弹出确认弹窗 |
| 关闭浏览器/刷新页面 | 浏览器原生 `beforeunload` 提示 |

> TAB切换（基本信息/技术信息/区块链）不触发未保存检测，因为TAB切换只是同一页面内浏览不同区块，不是离开页面。

确认弹窗提供两个选项：
- "继续编辑" — 关闭弹窗，留在编辑模式
- "放弃修改" — 恢复原始数据，退出编辑模式，执行离开操作

### 8. 编辑日志格式

```javascript
{
    "operator": "张三",
    "operatorRole": "管理员",
    "ruleCode": "GZ177019905698527",
    "timestamp": "2026-05-12T10:30:00.000Z",
    "changes": "<div>规则名称：旧值 → 新值</div>..."
}
```

---

## CSS样式说明

### 新增样式

| 类名 | 用途 |
|------|------|
| `.page-header-bar` | 页面头部栏（返回链接 + 编辑按钮的flex布局） |
| `.btn-edit-rule` | 编辑按钮样式 |
| `.edit-mode-banner` | 编辑模式提示条 |
| `.edit-action-bar` | 底部操作栏（保存/取消，sticky定位） |
| `.btn-reg-rebind` | 制度重新关联按钮 |
| `.edit-field-highlight` | 编辑模式下可编辑字段的高亮边框 |
| `.field-error` | 必填校验失败时的红色边框 |

---

## 交互流程图

```
[查看模式]
    │
    ├── 点击"编辑"按钮
    │       ├── 权限校验（管理员 或 提交人）
    │       └── 进入编辑模式
    │
[编辑模式]
    │
    ├── 显示：编辑提示条、底部操作栏、可编辑表单
    ├── 制度字段旁显示"重新关联"按钮
    ├── 疑点描述模板 textarea 可编辑，"立即验证"按钮可用
    │
    ├── 点击"保存"
    │       ├── 前端校验必填字段
    │       ├── 检查疑点描述模板验证状态
    │       │       └── 模板已修改但未验证 → 确认"模板尚未验证，是否继续保存？"
    │       ├── 生成变更摘要（含模板修改）
    │       ├── 弹出二次确认弹窗
    │       ├── 确认 → 记录日志 → 保存 → 退出编辑模式
    │       └── 取消 → 返回编辑模式
    │
    ├── 点击"取消"
    │       ├── 有修改 → 弹出未保存确认弹窗
    │       └── 无修改 → 直接退出编辑模式
    │
    └── 离开页面（返回链接/关闭浏览器）
            └── 有未保存修改 → 弹出确认弹窗
```

---

## 验证清单

### 权限控制

- [ ] 管理员角色：编辑按钮显示，可进入编辑模式
- [ ] 规则提交人：编辑按钮显示，可进入编辑模式
- [ ] 其他用户：编辑按钮不显示
- [ ] 疑点描述模板：管理员在编辑模式下可修改
- [ ] 疑点描述模板：提交人在编辑模式下可修改
- [ ] 疑点描述模板：其他用户只读，显示"当前仅管理员或规则提交人可编辑"

### 编辑模式

- [ ] 点击编辑后，基本信息可编辑字段变为输入框/下拉框
- [ ] 点击编辑后，技术信息可编辑字段变为输入框/下拉框
- [ ] 编辑提示条正确显示
- [ ] 底部操作栏（保存/取消）正确显示
- [ ] 制度字段旁"重新关联"按钮正确显示
- [ ] 只读字段（规则编码、提出人、提出单位）不可编辑
- [ ] 疑点描述模板 textarea 在编辑模式下可编辑，"立即验证"按钮可用
- [ ] 疑点描述模板在查看模式下只读，有权限用户看到编辑引导提示

### 保存流程

- [ ] 必填字段为空时，保存失败，字段标红
- [ ] 无修改时保存，提示"未检测到修改"
- [ ] 有修改时保存，弹出确认弹窗，显示变更摘要（含模板修改）
- [ ] 模板已修改但未验证时，保存前弹出确认"模板尚未验证，是否继续保存？"
- [ ] 确认保存后，退出编辑模式，页面恢复只读
- [ ] 编辑日志正确记录到 localStorage（含模板变更）

### 未保存离开检测

- [ ] 编辑后点击返回链接，弹出确认弹窗
- [ ] 选择"放弃修改"后，数据恢复原始状态
- [ ] 选择"继续编辑"后，留在编辑模式