` 中，新增"制度绑定状态"列。
**建议位置**：在"规则状态"列之后、"操作"列之前。
| 新增列 | 宽度 | 说明 |
|--------|------|------|
| 制度绑定状态 | 120px | 显示规则绑定的制度是否有效 |
##### 4.2.2 数据行新增一列
每行数据新增一个 `` 单元格，展示制度绑定状态标签。
**状态标签样式**：
| 状态 | 样式 | 说明 |
|------|------|------|
| 正常 | 绿色标签 `background:#F0F9F0;color:#67C23A;` | 绑定的制度有效 |
| 制度已废止，待更新 | 橙色标签 `background:#FFF7E8;color:#E6A23C;` | 绑定的制度已废止 |
**示例数据**：
| 规则编号 | 规则名称 | 制度绑定状态 |
|----------|----------|--------------|
| GZ177019905698527 | 差旅费报销中伙食补助人数校验 | 制度已废止，待更新 |
| GZ1716607905340192 | 差旅费报销中伙食补助期限重叠校验 | 正常 |
| GZ1716699105975444 | 报销单据中的交通费是否符合报销标准 | 制度已废止，待更新 |
##### 4.2.3 筛选功能
- 新增"制度绑定状态"筛选下拉框（值：全部 / 正常 / 待更新）
- 支持从工作台告警卡片跳转时自动带上 `filter=regUpdate` 筛选条件
##### 4.2.4 标签点击交互
橙色标签可点击，点击后跳转到该规则的详情页：
```javascript
// 点击橙色标签跳转规则详情页
$('.reg-update-tag').on('click', function() {
var ruleCode = $(this).data('rule-code');
window.location.href = '规则详情.html?code=' + ruleCode;
});
```
---
### 4.3 规则详情.html
#### 文件
- `规则详情.html`（修改）
#### 改动位置
1. 基本信息tab上方：新增告警条
2. 暂不处理后：显示小角标提示
#### 具体改动
##### 4.3.1 新增顶部告警条
在 tab 导航（`#ruleDetailTabs`）上方，新增一条告警条。仅当该规则绑定的制度已废止时显示。
**新增HTML结构**：
```html
该规则的对应制度《》（）已废止，新制度《》（）已生效，请及时更新。
```
**交互逻辑**：
- 点击「去更新」→ 跳转到新制度正文页（携带 `regId`、`ruleId`、`mode=update` 参数）
- 点击「暂不处理」→ 告警条收起，显示小角标提示
**跳转URL示例**：
```
../zhidufenxi/制度详情页.html?regId=新制度ID&ruleId=当前规则ID&mode=update
```
##### 4.3.2 暂不处理后的小角标
点击「暂不处理」后，告警条收起，在页面右上角显示一个小角标：
```html
制度待更新
```
点击小角标可重新展开告警条。
##### 4.3.3 Mock数据扩展
在 `ruleDatabase` 中，为需要展示告警的规则新增 `regUpdate` 字段：
```javascript
'regUpdate': {
oldRegName: '示例实业公司日常报销管理办法',
oldRegCode: 'Q/DEMO-REG212002-2024',
newRegId: 'REG-NEW-001',
newRegName: '示例实业公司支出管理细则',
newRegCode: 'Q/DEMO REG217001-2026'
}
```
##### 4.3.4 绑定变更历史说明
绑定变更历史由后端记录，当前阶段前端暂不展示。后端数据表设计参见PRD文档第6节。
---
### 4.4 制度详情页.html
#### 文件
- `制度详情页.html`（修改）
#### 改动位置
1. PDF工具栏下方：新增引导提示条
2. 正文区域下方：新增"待更新规则"弹窗
3. "关联风险规则"弹窗：增加更新模式识别
#### 具体改动
##### 4.4.1 功能按钮移至文本框外 + 新增引导提示条
功能按钮（放大、缩小、文件保存、关联风险规则、跳转到标签等）从侧边栏移至文档区域顶部（文本框外面）。引导提示条放在功能按钮下方，仅当URL中携带 `mode=update` 参数时显示。
**新增HTML结构**：
```html
请在正文中找到对应制度内容，选中文字后点击「关联风险规则」按钮完成更新。
```
**交互逻辑**：
- 页面加载时检测URL参数，如果 `mode=update`，显示引导提示条
- 更新成功后，引导条变为成功提示，显示"查看待更新规则"按钮
- 如果有待更新的其他规则，引导条数字动态更新
##### 4.4.2 新增"待更新规则"弹窗
在页面底部新增一个轻量弹窗，展示当前旧制度下剩余待更新的规则列表：
```html
```
**每条待更新规则的展示结构**：
```html
差旅费报销中伙食补助人数校验
规则编号：GZ177019905698527 状态：草稿
旧对应制度内容："伙食补助费按照公司规定标准报销"
```
**交互**：点击「去更新」→ 刷新页面URL中的 `ruleId` 参数 → 用户继续在正文中选中文字更新。
##### 4.4.3 "关联风险规则"弹窗增加更新模式
现有的"关联风险规则"流程（`#bindChoiceDialog` → `#existingRuleDialog`）需要增加更新模式识别。
**判断逻辑**：
```javascript
// 页面加载时检测URL参数
var urlParams = new URLSearchParams(window.location.search);
var updateMode = urlParams.get('mode') === 'update';
var updateRuleId = urlParams.get('ruleId');
```
**更新模式下的弹窗调整**：
当 `updateMode=true` 时，用户选中文字并点击「关联风险规则」后：
1. **跳过选择关联方式弹窗**（`#bindChoiceDialog`），直接弹出更新确认弹窗
2. 更新确认弹窗中展示：
- 规则名称、规则编号、规则状态
- 旧制度：对应制度来源、对应制度名称+对应制度编号（同行）、对应制度内容
- 新制度：对应制度来源、对应制度名称+对应制度编号（同行）、对应制度内容（用户选中的文字）
**新增更新确认弹窗**：
```html
```
**确认更新后的逻辑**：
```javascript
$('#confirmUpdateBtn').click(function() {
// 1. 更新规则的制度绑定字段
// 2. 保留旧绑定历史记录
// 3. 更新提醒状态为"已更新"
// 4. 弹窗关闭，显示成功提示
alert('规则绑定更新成功！');
closeDialog('updateConfirmDialog');
// 5. 更新引导提示条
updateGuideBarAfterSuccess();
// 6. 检查是否还有其他待更新规则
checkRemainingPendingRules();
});
```
##### 4.4.4 关联风险规则按钮逻辑调整
现有 `#btnBindRiskRule` 的点击事件需要增加模式判断：
```javascript
$('#btnBindRiskRule').click(function(e) {
e.stopPropagation();
var sel = window.getSelection();
var text = sel ? sel.toString().trim() : '';
if (!text) {
alert('请先在正文中选中一段制度文本，再点击"关联风险规则"。');
return;
}
lastSelectedText = text;
if (updateMode) {
// 更新模式：直接弹出更新确认弹窗
$('#updateNewContent').text(text.length > 120 ? text.substring(0, 120) + '...' : text);
openDialog('updateConfirmDialog');
} else {
// 正常模式：弹出选择关联方式弹窗
$('#selectedTextPreview').text(text.length > 120 ? text.substring(0, 120) + '...' : text);
openDialog('bindChoiceDialog');
}
});
```
##### 4.4.5 页面初始化逻辑
页面加载时需要根据URL参数初始化：
```javascript
$(function() {
var urlParams = new URLSearchParams(window.location.search);
var updateMode = urlParams.get('mode') === 'update';
var updateRuleId = urlParams.get('ruleId');
var regId = urlParams.get('regId');
if (updateMode) {
// 显示引导提示条
$('#updateGuideBar').show();
// 加载待更新规则信息
loadUpdateRuleInfo(updateRuleId);
// 加载待更新规则列表（同一旧制度下的其他规则）
loadPendingRules(regId, updateRuleId);
}
});
```
---
## 5. 复用关系说明
### 5.1 复用的模式
- 通知横幅：复用 `.alert` 横幅样式和收起/展开交互模式
- 状态标签：复用现有的 `background/color` 内联样式标签模式
- 弹窗结构：复用 `.dialog` 弹窗结构（`.dialog-header`、`.dialog-body`、`.dialog-footer`）
- 表格样式：复用 `.table .table-hover` 样式
### 5.2 使用的第三方库
无新增第三方库。
---
## 6. 交互变化总结
### 6.1 视觉变化
- 工作台新增通知横幅（可收起为小角标）
- 我的规则列表新增一列状态标签
- 规则详情页顶部新增告警条
- 制度详情页PDF工具栏下方新增引导提示条
### 6.2 交互逻辑
- 工作台横幅「立即处理」跳转到带筛选参数的规则列表
- 橙色标签点击跳转规则详情页
- 告警条「去更新」跳转新制度正文页
- 制度详情页更新模式下，关联风险规则按钮直接弹出更新确认弹窗
- 更新成功后引导继续处理剩余规则
---
## 7. 影响范围说明
### 7.1 页面视觉影响
- 工作台页面头部下方新增通知横幅高度
- 我的规则列表表格列数增加
- 规则详情页新增告警条高度
- 制度详情页新增引导提示条高度
### 7.2 不影响部分
- 规则编辑弹窗
- 已关联规则列表展示
- 区块链信息tab
- 疑点描述tab
- 其他页面
---
## 8. 当前实现口径说明
当前 Demo 为静态原型，新增数据为预置的 mock 数据，不涉及后端接口。
---
## 9. 验收检查点
### 9.1 工作台通知横幅
- 确认通知横幅正确显示待更新数量和文案
- 点击「立即处理」后跳转到"我的规则"列表页并自动筛选
- 确认「收起」按钮可收起横幅并显示小角标
- 确认小角标点击可重新展开横幅
### 9.2 我的规则列表
- 确认表头包含"制度绑定状态"列
- 确认每行数据中状态标签正确显示（正常/待更新）
- 确认橙色标签可点击并跳转规则详情页
- 确认筛选功能正常
### 9.3 规则详情页
- 确认绑定制度废止时告警条正确显示旧制度和新制度信息
- 确认「去更新」跳转到新制度正文页
- 确认「暂不处理」收起告警条并显示小角标
### 9.4 制度详情页
- 确认更新模式下引导提示条正确显示
- 确认选中文字后点击「关联风险规则」弹出更新确认弹窗
- 确认更新确认弹窗中新旧制度各正确展示4个字段（对应制度来源、编号、名称、内容）
- 确认更新成功后引导条变化和待更新规则列表正确
---
## 10. 一句话总结
本次原型改动在工作台、我的规则列表、规则详情页、制度详情页四个页面新增制度废止提醒和绑定更新功能，支持用户从提醒到完成更新的完整链路。
|