Files
wecom_it_smart_desk/docs/01-产品文档/01-02产品设计/快速回复规则后台管理-原型图.html
T
Simon 44e77dcb0e chore(docs): docs/ 目录全面重新编号 + 重组
**重构前**(旧编号 02-11):
- docs/02-产品需求/      → 00 产品规划/PRD
- docs/03-技术架构/      → 01-05 子目录散落
- docs/04-原型设计/      → 01-02 产品设计(HTML 原型)
- docs/05-原型设计/      → screens/
- docs/06-测试素材/      → 02-E2E / 03-功能 / 04-版本测试
- docs/07-项目管理/      → 任务说明书/日报/计划
- docs/08-安全审计/      → 审计报告
- docs/09-堡垒运维/      → toolbox / deploy
- docs/10-项目管理/      → 任务说明书(重复)
- docs/11-历史归档/      → deploy-nas-archived

**重构后**(新编号 00-07,语义化):
- docs/00-产品开发流程与文档管理规范.md
- docs/00-版本迭代总览.md
- docs/01-产品文档/      (PRD/原型/认证/会话/AI 服务/坐席/集成)
- docs/02-技术文档/      (技术方案/架构图/重构记录/前端改造/实现配置)
- docs/03-测试文档/      (E2E/功能用例/版本报告/缺陷单)
- docs/04-运维文档/      (部署运维/运维指南)
- docs/05-运营文档/      (品牌推广/用户手册)
- docs/06-安全审计/      (审计报告)
- docs/07-项目管理/      (任务说明书/日报/计划/看板)

**净收益**:
- 目录编号与产品文档管理规范对齐(按文档阶段 01-07 编号)
- 消除 02-产品需求 与 10-项目管理 的编号重叠
- 子目录按文档类型分组(如 01-产品文档/00-产品规划、01-产品文档/01-认证与登录)
- 把运维/安全/项目管理从 0X 散落改为 04/06/07

合计 494 文件 + 78495 行 / - 14076 行
2026-08-03 18:46:55 +08:00

1017 lines
46 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速回复规则后台管理 - 原型图</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f7fa;
padding: 20px;
color: #333;
}
.prototype-container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 24px;
margin-bottom: 8px;
color: #1a1a1a;
}
.subtitle {
color: #666;
margin-bottom: 24px;
font-size: 14px;
}
.page-section {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin-bottom: 24px;
overflow: hidden;
}
.page-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 24px;
}
.page-header h2 {
font-size: 18px;
margin-bottom: 4px;
}
.page-header .path {
font-size: 13px;
opacity: 0.9;
}
.page-content {
padding: 24px;
}
.feature-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.feature-card {
flex: 1;
background: #f8f9fc;
border: 1px solid #e8eaf0;
border-radius: 8px;
padding: 16px;
transition: all 0.2s;
}
.feature-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.feature-card h3 {
font-size: 15px;
color: #1a1a1a;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.feature-card .icon {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.feature-card .icon.greeting { background: #e8f5e9; color: #4caf50; }
.feature-card .icon.contact { background: #fff3e0; color: #ff9800; }
.feature-card .icon.routing { background: #e3f2fd; color: #2196f3; }
.feature-card .icon.target { background: #fce4ec; color: #e91e63; }
.feature-card p {
font-size: 13px;
color: #666;
line-height: 1.5;
}
.table-container {
border: 1px solid #e8eaf0;
border-radius: 8px;
overflow: hidden;
margin-top: 20px;
}
.table-header {
background: #f8f9fc;
padding: 12px 16px;
border-bottom: 1px solid #e8eaf0;
display: flex;
justify-content: space-between;
align-items: center;
}
.table-header h4 {
font-size: 14px;
color: #333;
}
.btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
border: none;
transition: all 0.2s;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5a6fd6;
}
.btn-success {
background: #4caf50;
color: white;
}
.btn-danger {
background: #f44336;
color: white;
}
.btn-sm {
padding: 4px 12px;
font-size: 12px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e8eaf0;
font-size: 13px;
}
th {
background: #fafbfc;
font-weight: 500;
color: #666;
}
tr:hover {
background: #f8f9fc;
}
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.tag-active {
background: #e8f5e9;
color: #2e7d32;
}
.tag-inactive {
background: #ffebee;
color: #c62828;
}
.actions {
display: flex;
gap: 8px;
}
.nav-tabs {
display: flex;
border-bottom: 2px solid #e8eaf0;
margin-bottom: 20px;
}
.nav-tab {
padding: 12px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 14px;
color: #666;
transition: all 0.2s;
}
.nav-tab:hover {
color: #667eea;
}
.nav-tab.active {
color: #667eea;
border-bottom-color: #667eea;
font-weight: 500;
}
.form-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.form-group {
flex: 1;
}
.form-group label {
display: block;
font-size: 13px;
color: #666;
margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #667eea;
}
.form-group textarea {
min-height: 80px;
resize: vertical;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.checkbox-wrapper input {
width: auto;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal {
background: white;
border-radius: 12px;
width: 500px;
max-height: 80vh;
overflow: auto;
}
.modal-header {
padding: 16px 20px;
border-bottom: 1px solid #e8eaf0;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
font-size: 16px;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 16px 20px;
border-top: 1px solid #e8eaf0;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.info-box {
background: #f0f4ff;
border-left: 4px solid #667eea;
padding: 12px 16px;
margin-bottom: 20px;
border-radius: 0 6px 6px 0;
}
.info-box p {
font-size: 13px;
color: #333;
line-height: 1.6;
}
.empty-state {
text-align: center;
padding: 40px;
color: #999;
}
.empty-state p {
margin-top: 8px;
}
</style>
</head>
<body>
<div class="prototype-container">
<h1>快速回复规则后台管理</h1>
<p class="subtitle">REQ-通用-002 · 快速回复规则后台管理 · v1.2</p>
<p class="subtitle">2026-07-28 v1.2:已删除顶部 3 张统计卡片,仅保留标签导航。</p>
<!-- 页面1: 主入口 - 规则列表 -->
<div class="page-section">
<div class="page-header">
<h2>页面1: 规则管理主页</h2>
<div class="path">路由: /quick-rules</div>
</div>
<div class="page-content">
<div class="info-box">
<p><strong>功能说明:</strong>展示四种规则类型的概览卡片,点击可进入对应子页面进行管理。支持搜索过滤和快速操作。</p>
</div>
<div class="feature-row">
<div class="feature-card">
<h3><span class="icon greeting">👋</span> 打招呼配置</h3>
<p>管理用户首次问候时的自动回复关键词,支持多条配置</p>
</div>
<div class="feature-card">
<h3><span class="icon contact">👥</span> 业务联系人</h3>
<p>管理非IT业务部门联系人,支持启用/禁用</p>
</div>
<div class="feature-card">
<h3><span class="icon routing">🔀</span> 路由关键词</h3>
<p>管理业务路由预过滤关键词,控制路由触发时机</p>
</div>
<div class="feature-card">
<h3><span class="icon target">📋</span> 路由目标</h3>
<p>管理各类业务路由的目标配置(kfid客服窗口)</p>
</div>
</div>
<div class="table-container">
<div class="table-header">
<h4>最近修改的规则</h4>
<div>
<button class="btn btn-default btn-sm" style="background:#67c23a;color:#fff">📥 导入</button>
<button class="btn btn-default btn-sm" style="background:#909399;color:#fff">📤 导出</button>
<button class="btn btn-default btn-sm" style="background:#e6a23c;color:#fff">📊 统计</button>
<button class="btn btn-primary btn-sm">刷新缓存</button>
</div>
</div>
<table>
<thead>
<tr>
<th>规则类型</th>
<th>关键词/名称</th>
<th>分类</th>
<th>优先级</th>
<th>状态</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="tag" style="background:#e8f5e9;color:#2e7d32">打招呼</span></td>
<td>你好</td>
<td>-</td>
<td>10</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-27 14:30</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td><span class="tag" style="background:#fff3e0;color:#e65100">联系人</span></td>
<td>谢聪利</td>
<td>云盘权限</td>
<td>-</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-26 10:00</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td><span class="tag" style="background:#e3f2fd;color:#1565c0">路由</span></td>
<td>打印机</td>
<td>IT服务</td>
<td>5</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-25 16:20</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 页面2: 打招呼配置子页面 -->
<div class="page-section">
<div class="page-header" style="background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);">
<h2>页面2: 打招呼配置</h2>
<div class="path">路由: /quick-rules/greeting</div>
</div>
<div class="page-content">
<div class="info-box">
<p><strong>功能说明:</strong>管理打招呼规则。用户发送包含这些关键词的消息时,系统自动回复问候语。此类规则不增加AI回复计数。</p>
</div>
<div style="margin-bottom: 16px;">
<button class="btn btn-primary">+ 新增打招呼关键词</button>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>关键词</th>
<th>优先级</th>
<th>状态</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>你好</td>
<td>10</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-01</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>您好</td>
<td>9</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-01</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>hi</td>
<td>8</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-01</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>hello</td>
<td>7</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-01</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>在吗</td>
<td>6</td>
<td><span class="tag tag-inactive">禁用</span></td>
<td>2026-07-01</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 页面3: 业务联系人子页面 -->
<div class="page-section">
<div class="page-header" style="background: linear-gradient(135deg, #ff9800 0%, #e65100 100%);">
<h2>页面3: 业务联系人配置</h2>
<div class="path">路由: /quick-rules/contacts</div>
</div>
<div class="page-content">
<div class="info-box">
<p><strong>功能说明:</strong>管理非IT业务部门联系人。当用户咨询相关业务时,可推荐对应联系人。</p>
</div>
<div style="margin-bottom: 16px;">
<button class="btn btn-primary">+ 新增联系人</button>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>姓名</th>
<th>部门</th>
<th>业务类型</th>
<th>联系方式</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>谢聪利</td>
<td>IT支持组</td>
<td>云盘权限</td>
<td>企微/电话</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>张财务</td>
<td>财务部</td>
<td>报销咨询</td>
<td>企微/电话</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 页面4: 路由关键词配置 -->
<div class="page-section">
<div class="page-header" style="background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);">
<h2>页面4: 业务路由关键词配置</h2>
<div class="path">路由: /quick-rules/routing</div>
</div>
<div class="page-content">
<div class="info-box">
<p><strong>功能说明:</strong>管理业务路由预过滤关键词。用户消息命中这些关键词时,触发业务路由流程。不同分类对应不同业务部门。</p>
</div>
<div style="margin-bottom: 16px;">
<button class="btn btn-primary">+ 新增路由关键词</button>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>关键词</th>
<th>业务分类</th>
<th>优先级</th>
<th>状态</th>
<th>更新时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>打印机</td>
<td><span class="tag" style="background:#e3f2fd;color:#1565c0">IT服务</span></td>
<td>10</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-20</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>复印机</td>
<td><span class="tag" style="background:#fff3e0;color:#e65100">行政</span></td>
<td>8</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-20</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>考勤</td>
<td><span class="tag" style="background:#fce4ec;color:#c2185b">人力资源</span></td>
<td>9</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-18</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>报销</td>
<td><span class="tag" style="background:#e8f5e9;color:#2e7d32">财务</span></td>
<td>10</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-18</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>合同</td>
<td><span class="tag" style="background:#f3e5f5;color:#7b1fa2">法务</span></td>
<td>10</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-15</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
<tr>
<td>空调</td>
<td><span class="tag" style="background:#fff8e1;color:#ff8f00">行政-物业</span></td>
<td>8</td>
<td><span class="tag tag-active">启用</span></td>
<td>2026-07-15</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
<button class="btn btn-danger btn-sm">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 页面5: 路由目标配置 -->
<div class="page-section">
<div class="page-header" style="background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%);">
<h2>页面5: 路由目标配置</h2>
<div class="path">路由: /quick-rules/targets</div>
</div>
<div class="page-content">
<div class="info-box">
<p><strong>功能说明:</strong>管理各类业务路由的目标配置。每个分类对应一个企微客服(kfid)窗口,用户点击名片卡片时可跳转。</p>
</div>
<div style="margin-bottom: 16px;">
<button class="btn btn-primary">+ 新增路由目标</button>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>业务分类</th>
<th>服务名称</th>
<th>服务描述</th>
<th>kfid链接</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="tag" style="background:#fff3e0;color:#e65100">行政</span></td>
<td>机票酒店前台</td>
<td>受理和咨询机票、酒店、快递、访客、失物招领及行政办公相关事宜</td>
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">https://work.weixin.qq.com/...</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
</div>
</td>
</tr>
<tr>
<td><span class="tag" style="background:#fce4ec;color:#c2185b">人力资源</span></td>
<td>人力资源共享服务咨询</td>
<td>咨询和处理人力资源相关问题(工牌/考勤/入离职/社保公积金等)</td>
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">https://work.weixin.qq.com/...</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
</div>
</td>
</tr>
<tr>
<td><span class="tag" style="background:#e8f5e9;color:#2e7d32">财务</span></td>
<td>总部报销服务台</td>
<td>咨询和处理总部报销系统相关问题</td>
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">https://work.weixin.qq.com/...</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
</div>
</td>
</tr>
<tr>
<td><span class="tag" style="background:#f3e5f5;color:#7b1fa2">法务</span></td>
<td>行政法务团队</td>
<td>可咨询合同、合规、劳动争议、法律案件纠纷、外部检查、其他法律问题</td>
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">https://work.weixin.qq.com/...</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
</div>
</td>
</tr>
<tr>
<td><span class="tag" style="background:#fff8e1;color:#ff8f00">行政-物业</span></td>
<td>物业服务</td>
<td>咨询和处理物业相关问题(空调/照明/门禁卡/车位/维修等)</td>
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">https://work.weixin.qq.com/...</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
</div>
</td>
</tr>
<tr>
<td><span class="tag" style="background:#e3f2fd;color:#1565c0">IT服务</span></td>
<td>IT人工坐席</td>
<td>IT支持组人工服务(打印机/电脑/网络/软件安装等)</td>
<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;">(特殊标记)</td>
<td><span class="tag tag-active">启用</span></td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">编辑</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 页面6: 编辑弹窗 -->
<div class="page-section">
<div class="page-header" style="background: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%);">
<h2>页面6: 编辑/新增弹窗</h2>
<div class="path">通用组件</div>
</div>
<div class="page-content">
<div class="modal-overlay">
<div class="modal">
<div class="modal-header">
<h3>编辑规则</h3>
<span style="cursor:pointer;"></span>
</div>
<div class="modal-body">
<div class="form-row">
<div class="form-group">
<label>规则类型</label>
<select disabled>
<option>打招呼</option>
<option>联系人</option>
<option>路由关键词</option>
<option>路由目标</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>关键词 / 名称 *</label>
<input type="text" placeholder="请输入关键词">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>业务分类</label>
<select>
<option value="">请选择</option>
<option>IT服务</option>
<option>行政</option>
<option>人力资源</option>
<option>财务</option>
<option>法务</option>
<option>行政-物业</option>
</select>
</div>
<div class="form-group">
<label>优先级</label>
<input type="number" value="0">
</div>
</div>
<div class="form-row" id="kfid-field" style="display:none;">
<div class="form-group">
<label>kfid客服链接</label>
<input type="text" placeholder="https://work.weixin.qq.com/...">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>回复模板(可选)</label>
<textarea placeholder="自定义回复内容..."></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group">
<div class="checkbox-wrapper">
<input type="checkbox" id="is_active" checked>
<label for="is_active">启用此规则</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" style="background:#f5f5f5;">取消</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</div>
<!-- 页面7: 智能体审计日志与统计 -->
<div class="page-section">
<div class="page-header" style="background: linear-gradient(135deg, #07C160 0%, #06A050 100%);">
<h2>页面7: 智能体审计日志与规则统计 (v2.0)</h2>
<div class="path">路由: /quick-rules/audit</div>
</div>
<div class="page-content">
<div class="info-box" style="background:#e6f7ec;border-left:4px solid #07C160;">
<p><strong>v2.0 新功能:</strong>支持智能体自动优化规则。所有规则修改都会记录审计日志,包括操作人(人工/智能体)、修改前后值、置信度等。</p>
</div>
<!-- 统计卡片 -->
<div class="feature-row">
<div class="feature-card" style="background:#f0f9ff;">
<h3 style="color:#185fa5">总规则数</h3>
<p style="font-size:32px;font-weight:500;color:#185fa5">45</p>
</div>
<div class="feature-card" style="background:#f0fdf4;">
<h3 style="color:#16a34a">命中率</h3>
<p style="font-size:32px;font-weight:500;color:#16a34a">78%</p>
</div>
<div class="feature-card" style="background:#fef2f2;">
<h3 style="color:#dc2626">误判率</h3>
<p style="font-size:32px;font-weight:500;color:#dc2626">5%</p>
</div>
<div class="feature-card" style="background:#fffbeb;">
<h3 style="color:#d97706">待审核</h3>
<p style="font-size:32px;font-weight:500;color:#d97706">3</p>
</div>
</div>
<!-- 按类型分布 -->
<h4 style="margin: 20px 0 12px;">按类型分布</h4>
<div class="table-container">
<table>
<thead>
<tr>
<th>规则类型</th>
<th>总数</th>
<th>启用</th>
<th>命中率</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="tag" style="background:#e8f5e9;color:#2e7d32">打招呼</span></td>
<td>6</td>
<td>6</td>
<td>85%</td>
<td><button class="btn btn-primary btn-sm">详情</button></td>
</tr>
<tr>
<td><span class="tag" style="background:#e3f2fd;color:#1565c0">路由</span></td>
<td>25</td>
<td>22</td>
<td>72%</td>
<td><button class="btn btn-primary btn-sm">详情</button></td>
</tr>
<tr>
<td><span class="tag" style="background:#fce4ec;color:#c2185b">目标</span></td>
<td>14</td>
<td>14</td>
<td>--</td>
<td><button class="btn btn-primary btn-sm">详情</button></td>
</tr>
</tbody>
</table>
</div>
<!-- 待审核智能体建议 -->
<h4 style="margin: 20px 0 12px;">待审核智能体建议(置信度 0.5-0.85)</h4>
<div class="table-container">
<table>
<thead>
<tr>
<th>规则类型</th>
<th>关键词</th>
<th>分类</th>
<th>置信度</th>
<th>建议依据</th>
<th>提交时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="tag" style="background:#e3f2fd;color:#1565c0">路由</span></td>
<td>投影仪</td>
<td>IT服务</td>
<td><span class="tag" style="background:#fef3c7;color:#d97706">0.78</span></td>
<td>近30天5条相关消息被误判为闲聊</td>
<td>2026-07-27 10:00</td>
<td>
<div class="actions">
<button class="btn btn-success btn-sm">采纳</button>
<button class="btn btn-danger btn-sm">拒绝</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 审计日志 -->
<h4 style="margin: 20px 0 12px;">最近修改审计日志</h4>
<div class="table-container">
<table>
<thead>
<tr>
<th>时间</th>
<th>操作人</th>
<th>类型</th>
<th>规则</th>
<th>置信度</th>
<th>原因</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026-07-27 14:30</td>
<td><span class="tag" style="background:#e6f7ec;color:#07C160">agent</span> rule_optimizer_v1</td>
<td><span class="tag" style="background:#e8f5e9;color:#2e7d32">创建</span></td>
<td>你好</td>
<td>0.95</td>
<td>高频问候模式</td>
</tr>
<tr>
<td>2026-07-27 13:15</td>
<td><span class="tag" style="background:#e3f2fd;color:#185fa5">human</span> sxn</td>
<td><span class="tag" style="background:#e3f2fd;color:#1565c0">更新</span></td>
<td>报销</td>
<td>--</td>
<td>添加财务分类</td>
</tr>
<tr>
<td>2026-07-27 11:00</td>
<td><span class="tag" style="background:#e6f7ec;color:#07C160">agent</span> rule_optimizer_v1</td>
<td><span class="tag" style="background:#fff3e0;color:#e65100">批量</span></td>
<td>5条规则</td>
<td>0.88</td>
<td>月度优化建议</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>