# 制度正文规则联动 - 页面改动说明
## 1. 文档信息
| 项目 | 内容 |
|------|------|
| 文档名称 | 制度详情正文规则显示功能-页面改动说明 |
| 关联PRD | 制度正文规则联动-PRD.md |
| 涉及页面 | zhidufenxi/制度详情页.html |
| 创建日期 | 2026-07-29 |
---
## 2. 改动概述
对制度详情页的"正文"TAB进行全面改版，采用左右分栏布局，支持已关联规则和AI候选规则的展示、交互和管理。
---
## 3. 布局改动
### 3.1 改动前
```
┌─────────────────────────────────────────┐
│ [基本信息] [正文] [附件] [评价] │
├─────────────────────────────────────────┤
│ 提示条：点击右侧视图打开文档... │
├─────────────────────────────────────────┤
│ │
│ 规则标签区域（卡片网格，4列） │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │规则1│ │规则2│ │规则3│ │规则4│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
│ │
├─────────────────────────────────────────┤
│ 右侧切换按钮 [展开文档] │
├─────────────────────────────────────────┤
│ 正文内容区域 │
│ （需要点击按钮才能显示） │
└─────────────────────────────────────────┘
```
### 3.2 改动后
```
┌─────────────────────────────────────────────────────────────────┐
│ [基本信息] [正文] [附件] [评价] │
├─────────────────────────────────────────────────────────────────┤
│ 工具栏：🔍放大 🔍缩小 💾保存 ⚠️绑定风险规则 [收起规则面板] │
├───────────────────────────────────────┬─────────────────────────┤
│ │ [已关联规则] [AI候选规则]│
│ ├─────────────────────────┤
│ │ [状态统计] │
│ │ 🔍搜索 [筛选▼] │
│ 正文内容 ├─────────────────────────┤
│ （左侧区域） │ # │规则名称│等级│操作│
│ │ 1 │xxx │重大│ ▶ │
│ │ 2 │xxx │重要│ ▶ │
│ │...│... │... │... │
│ ├─────────────────────────┤
│ │ 规则详情 │
│ │ （点击规则后显示） │
└───────────────────────────────────────┴─────────────────────────┘
```
---
## 4. HTML结构改动
### 4.1 删除的元素
| 元素ID/Class | 说明 |
|--------------|------|
| `#documentToggle` | 右侧竖型切换按钮 |
| `#alertTip` | 提示信息条 |
| `#ruleTagsSection` | 规则标签区域（卡片网格） |
| `#documentSection` | 原正文区域（带目录树） |
| `.pdf-sidebar` | 左侧目录树 |
| `.pdf-canvas` | PDF画布区域 |
### 4.2 新增的元素
#### 4.2.1 工具栏
```html
```
#### 4.2.2 左右分栏布局
```html
```
#### 4.2.3 Tab切换头部
```html
```
#### 4.2.4 已关联规则视图
```html
```
#### 4.2.5 AI候选规则视图
```html
```
#### 4.2.6 反馈弹窗
```html
```
---
## 5. CSS样式新增
### 5.1 左右分栏布局
```css
.split-layout {
display: flex;
height: calc(100vh - 260px);
min-height: 500px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
}
.split-left {
flex: 1;
overflow: auto;
min-width: 300px;
}
.split-right {
width: 40%;
min-width: 300px;
display: flex;
flex-direction: column;
border-left: 1px solid var(--border-color);
}
```
### 5.2 拖拽分隔线
```css
.split-resizer {
width: 4px;
cursor: col-resize;
background: var(--border-color);
transition: background 0.2s;
}
.split-resizer:hover,
.split-resizer.active {
background: var(--primary-color);
}
```
### 5.3 规则Tab切换
```css
.rule-tab-item {
transition: all 0.2s;
position: relative;
}
.rule-tab-item:hover {
color: var(--primary-color);
background: #f5f7fa;
}
.rule-tab-item.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color) !important;
}
```
### 5.4 规则表格
```css
.rule-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.rule-table th {
background: var(--bg-light);
padding: 8px 10px;
text-align: left;
font-weight: 600;
position: sticky;
top: 0;
}
.rule-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border-color);
}
.rule-table tbody tr {
cursor: pointer;
transition: background 0.15s;
}
.rule-table tbody tr:hover {
background: var(--bg-hover);
}
.rule-table tbody tr.active {
background: #e6f7ff;
}
```
### 5.5 进入图标
```css
.enter-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 10px;
color: var(--primary-color);
cursor: pointer;
border-radius: var(--radius);
transition: all 0.2s;
}
.enter-icon:hover {
background: #e6f7ff;
color: var(--primary-hover);
}
```
### 5.6 AI候选规则状态标签
```css
.ai-status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.ai-status-pending {
background: #fff7e6;
color: #d48806;
}
.ai-status-adopted {
background: #f6ffed;
color: #52c41a;
}
```
### 5.7 置信度进度条
```css
.confidence-bar {
width: 60px;
height: 6px;
background: #f0f0f0;
border-radius: 3px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-left: 4px;
}
.confidence-fill {
height: 100%;
border-radius: 3px;
}
.confidence-high { background: #52c41a; }
.confidence-medium { background: #faad14; }
.confidence-low { background: #ff4d4f; }
```
### 5.8 右键菜单
```css
.context-menu {
position: fixed;
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 4px 0;
z-index: 9999;
display: none;
min-width: 160px;
}
.context-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
}
.context-menu-item:hover {
background: var(--bg-hover);
color: var(--primary-color);
}
```
---
## 6. JavaScript功能新增
### 6.1 数据结构
#### 6.1.1 已关联规则数据
```javascript
var rulesData = [
{
id: 'R1',
name: '规则名称',
code: 'FEE-001',
status: '已上线',
riskLevel: '重大',
domain: '财务域',
creator: '甲一',
createTime: '2026-01-15',
monitorTarget: '监控目标',
monitorLogic: '监控逻辑',
policyContent: '绑定的制度条款内容'
}
// ...
];
```
#### 6.1.2 AI候选规则数据
```javascript
var aiCandidateRules = [
{
id: 'AI-001',
name: 'AI生成的规则名称',
riskLevel: '重大',
confidence: 92,
status: '待确认',
monitorTarget: '监控目标',
monitorLogic: '监控逻辑',
policyContent: 'AI标注的制度条款',
aiReason: 'AI推理说明',
relatedRuleId: null
}
// ...
];
```
### 6.2 核心函数
#### 6.2.1 Tab切换
```javascript
function switchTab(tab) {
if (tab === 'bound') {
$('#tabBoundRules').addClass('active');
$('#tabAiCandidates').removeClass('active');
$('#boundRuleView').css('display', 'flex');
$('#aiCandidateView').hide();
} else {
$('#tabAiCandidates').addClass('active');
$('#tabBoundRules').removeClass('active');
$('#aiCandidateView').css('display', 'flex');
$('#boundRuleView').hide();
renderAiCandidateList('', '', '');
}
}
```
#### 6.2.2 渲染已关联规则列表
```javascript
function renderRuleList(keyword, statusFilter, levelFilter, creatorFilter) {
var filtered = rulesData.filter(function(r) {
if (keyword && r.name.indexOf(keyword) === -1 && r.code.indexOf(keyword) === -1) return false;
if (statusFilter && r.status !== statusFilter) return false;
if (levelFilter && r.riskLevel !== levelFilter) return false;
if (creatorFilter && r.creator !== creatorFilter) return false;
return true;
});
var tbody = $('#ruleTableBody');
tbody.empty();
filtered.forEach(function(rule, index) {
// 渲染表格行
});
}
```
#### 6.2.3 渲染AI候选规则列表
```javascript
function renderAiCandidateList(keyword, statusFilter, levelFilter) {
var filtered = aiCandidateRules.filter(function(r) {
if (keyword && r.name.indexOf(keyword) === -1) return false;
if (statusFilter && r.status !== statusFilter) return false;
if (levelFilter && r.riskLevel !== levelFilter) return false;
return true;
});
var tbody = $('#aiRuleTableBody');
tbody.empty();
filtered.forEach(function(rule, index) {
// 渲染表格行
});
}
```
#### 6.2.4 高亮已关联规则正文
```javascript
function highlightPolicyContent(ruleId) {
var rule = rulesData.find(function(r) { return r.id === ruleId; });
if (!rule) return;
clearHighlight('bound');
// 提取关键词
var keyword = rule.policyContent;
var match = rule.policyContent.match(/第[一二三四五六七八九十]+条\s*(.+)/);
if (match && match[1]) {
keyword = match[1].substring(0, 25);
}
// 在正文中查找并高亮
var paragraphs = document.getElementById('policyTextViewer').querySelectorAll('p');
paragraphs.forEach(function(p) {
if (p.textContent.indexOf(keyword) !== -1) {
$(p).css({
'background-color': '#fff3cd',
'border-left': '4px solid #ffc107',
'padding': '8px 12px',
'border-radius': '0 4px 4px 0'
}).addClass('policy-highlight-wrapper');
p.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}
```
#### 6.2.5 高亮AI候选规则正文
```javascript
function highlightAiRuleContent(ruleId) {
var rule = aiCandidateRules.find(function(r) { return r.id === ruleId; });
if (!rule) return;
clearHighlight('ai');
// 提取关键词
var keyword = rule.policyContent;
var regexResult = keyword.match(/第[一二三四五六七八九十百千]+条\s+([\s\S]*?)(?=第[一二三四五六七八九十百千]+条|$)/);
if (regexResult && regexResult[1]) {
keyword = regexResult[1].trim().substring(0, 30);
}
// 在正文中查找并高亮
var paragraphs = document.getElementById('policyTextViewer').querySelectorAll('p');
paragraphs.forEach(function(p) {
if (p.textContent.indexOf(keyword) !== -1) {
if ($(p).hasClass('policy-highlight-wrapper')) {
// 已有黄色高亮，改变背景为绿色调
$(p).css({
'background-color': '#e8f4e8',
'border-left': '4px solid #1890ff'
}).addClass('ai-highlight-wrapper');
} else {
// 添加蓝色高亮
$(p).css({
'background-color': '#e6f7ff',
'border-left': '4px solid #1890ff',
'padding': '8px 12px',
'border-radius': '0 4px 4px 0'
}).addClass('ai-highlight-wrapper');
}
p.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}
```
#### 6.2.6 清除高亮
```javascript
function clearHighlight(type) {
if (type === 'ai') {
// 只清除AI高亮（蓝色）
$('.ai-highlight-wrapper').each(function() {
$(this).css({
'background-color': '',
'border-left': '',
'padding': '',
'border-radius': ''
}).removeClass('ai-highlight-wrapper');
});
} else if (type === 'bound') {
// 只清除已关联高亮（黄色）
$('.policy-highlight-wrapper').each(function() {
$(this).css({
'background-color': '',
'border-left': '',
'padding': '',
'border-radius': '',
'cursor': ''
}).removeClass('policy-highlight-wrapper').removeAttr('data-rule-id');
});
} else {
// 清除所有高亮
$('.policy-highlight-wrapper').each(function() {
$(this).css({...}).removeClass('policy-highlight-wrapper');
});
$('.ai-highlight-wrapper').each(function() {
$(this).css({...}).removeClass('ai-highlight-wrapper');
});
}
}
```
#### 6.2.7 左右拖拽功能
```javascript
var isResizing = false;
var startX = 0;
var startLeftWidth = 0;
$('#splitResizer').on('mousedown', function(e) {
isResizing = true;
startX = e.clientX;
startLeftWidth = $('#splitLeft').outerWidth();
$(this).addClass('active');
$('body').css('cursor', 'col-resize');
e.preventDefault();
});
$(document).on('mousemove', function(e) {
if (!isResizing) return;
var dx = e.clientX - startX;
var newWidth = startLeftWidth + dx;
var containerWidth = $('#splitLayout').width();
var minWidth = 300;
var maxWidth = containerWidth - 300 - 4;
if (newWidth < minWidth) newWidth = minWidth;
if (newWidth > maxWidth) newWidth = maxWidth;
var leftPercent = (newWidth / containerWidth * 100) + '%';
$('#splitLeft').css('flex', 'none').css('width', leftPercent);
$('#splitRight').css('flex', '1');
});
$(document).on('mouseup', function() {
if (isResizing) {
isResizing = false;
$('#splitResizer').removeClass('active');
$('body').css('cursor', '');
}
});
```
#### 6.2.8 右键菜单
```javascript
// 监听正文区域的右键事件
$('#policyTextViewer').on('contextmenu', function(e) {
var selection = window.getSelection();
var selectedText = selection.toString().trim();
if (!selectedText || selectedText.length < 3) return;
e.preventDefault();
// 判断是否已绑定规则
var matchedRule = findMatchedRule(selectedText);
// 更新菜单项显示
if (matchedRule) {
$('#menuDivider').show();
$('#menuJumpToRule').show();
} else {
$('#menuDivider').hide();
$('#menuJumpToRule').hide();
}
// 显示菜单
$('#contextMenu').css({
left: e.clientX + 'px',
top: e.clientY + 'px',
display: 'block'
});
});
// 绑定风险规则菜单项点击
$('#menuBindRule').on('click', function() {
$('#contextMenu').hide();
$('#btnBindRiskRule').trigger('click');
});
// 跳转关联规则菜单项点击
$('#menuJumpToRule').on('click', function() {
$('#contextMenu').hide();
if (matchedRule) {
selectAndScrollToRule(matchedRule.id);
}
});
```
#### 6.2.9 忽略AI候选规则
```javascript
function ignoreAiRule(ruleId) {
if (confirm('确定要忽略这条AI候选规则吗？')) {
aiCandidateRules = aiCandidateRules.filter(function(r) { return r.id !== ruleId; });
selectedAiRuleId = null;
$('#aiDetailView').hide();
$('#aiListView').css('display', 'flex');
clearHighlight('ai');
applyAiFilters();
alert('已忽略该候选规则');
}
}
```
#### 6.2.10 提交反馈
```javascript
$('#submitFeedback').on('click', function() {
var types = [];
$('#feedbackDialog input[type="checkbox"]:checked').each(function() {
types.push($(this).val());
});
var detail = $('#feedbackDetail').val().trim();
if (types.length === 0 && !detail) {
alert('请选择问题类型或填写详细说明');
return;
}
alert('反馈已提交，感谢您的意见！');
$('#feedbackDialog').hide();
$('#feedbackDialog input[type="checkbox"]').prop('checked', false);
$('#feedbackDetail').val('');
});
```
---
## 7. 事件绑定汇总
| 选择器 | 事件 | 处理函数 |
|--------|------|----------|
| `#tabBoundRules` | click | switchTab('bound') |
| `#tabAiCandidates` | click | switchTab('ai') |
| `.rule-row` | click | 选中规则，高亮正文 |
| `.rule-row` | dblclick | 打开规则详情 |
| `.enter-icon` | click | 打开规则详情 |
| `.ai-rule-row` | click | 选中AI规则，高亮正文 |
| `.ai-rule-row` | dblclick | 打开AI规则详情 |
| `.ai-enter-icon` | click | 打开AI规则详情 |
| `#backToList` | click | 返回已关联规则列表 |
| `#closeDetail` | click | 返回已关联规则列表 |
| `#backToAiList` | click | 返回AI候选规则列表 |
| `#closeAiDetail` | click | 返回AI候选规则列表 |
| `#splitResizer` | mousedown | 开始拖拽 |
| `#toggleRightPanel` | click | 收起/展开右侧面板 |
| `#policyTextViewer` | contextmenu | 显示右键菜单 |
| `.btn-open-feedback` | click | 打开反馈弹窗 |
| `.btn-ignore-ai` | click | 忽略AI候选规则 |
| `#submitFeedback` | click | 提交反馈 |
| `.policy-highlight-wrapper` | click | 跳转到对应规则 |
| `.ai-highlight-wrapper` | click | 跳转到对应规则 |
---
## 8. 测试用例
### 8.1 布局测试
| 测试项 | 预期结果 |
|--------|----------|
| 进入正文TAB | 显示左右分栏布局，左侧正文，右侧规则 |
| 拖拽中间分隔线 | 左右区域宽度可调整 |
| 点击"收起规则面板" | 右侧隐藏，左侧占满 |
| 点击"展开规则面板" | 右侧恢复显示 |
### 8.2 已关联规则测试
| 测试项 | 预期结果 |
|--------|----------|
| 进入正文TAB | 自动高亮所有已关联规则对应的正文（黄色） |
| 单击规则行 | 选中该行，正文高亮并滚动到对应位置 |
| 双击规则行 | 打开规则详情视图 |
| 点击 ▶ 图标 | 打开规则详情视图 |
| 点击高亮段落 | 右侧选中对应规则 |
| 使用搜索筛选 | 规则列表实时过滤 |
### 8.3 AI候选规则测试
| 测试项 | 预期结果 |
|--------|----------|
| 切换到AI候选规则Tab | 显示AI候选规则列表 |
| 单击待确认规则 | 正文高亮对应内容（蓝色） |
| 双击待确认规则 | 打开详情，显示操作按钮 |
| 点击"基于此生成规则" | 跳转到新建规则页面 |
| 点击"提交反馈意见" | 弹出反馈弹窗 |
| 点击"忽略" | 规则从列表移除 |
| 查看已采纳规则详情 | 显示采纳的正式规则信息 |
### 8.4 高亮测试
| 测试项 | 预期结果 |
|--------|----------|
| 已关联规则高亮 | 黄色背景 + 黄色左边框 |
| AI候选规则高亮 | 蓝色背景 + 蓝色左边框 |
| 两者重叠 | 绿色调背景 + 蓝色左边框 |
| 切换Tab | 保留当前高亮状态 |
### 8.5 右键菜单测试
| 测试项 | 预期结果 |
|--------|----------|
| 选中未绑定文字，右键 | 显示"绑定风险规则" |
| 选中已绑定文字，右键 | 显示"绑定风险规则"和"跳转关联规则" |
| 点击"绑定风险规则" | 触发绑定按钮功能 |
| 点击"跳转关联规则" | 右侧选中对应规则 |