# xxLink入口产品 - 页面改动说明

## 1. 文档信息

| 项目 | 内容 |
|------|------|
| 文档名称 | xxLink入口产品 - 页面改动说明 |
| 所属模块 | xxx平台 / xxLink入口 |
| 文档类型 | 页面改动说明 |
| 版本 | v1.0 |
| 编写日期 | 2026-07-07 |
| 关联PRD | xxLink入口产品PRD.md |

---

## 2. 本次改动概述

### 2.1 改动目标

在xxLink办公IM中增加xxx平台入口，让用户可以在xxLink工作台上直接访问系统核心功能，实现移动端和PC端的统一访问体验。

### 2.2 改动范围

本次改动分为两个阶段：

**第一阶段：流程驱动（本次实现）**
- 首页-待办工作台
- 待办/已办列表
- 红灯疑点处置
- 规则审核
- AI小助手悬浮入口

**第二阶段：信息浏览（后续迭代）**
- 公共规则库
- 规则详情（只读）
- 业务场景列表
- 场景详情与看板

### 2.3 本次不做

- 消息功能（xxLink自身已具备）
- 个人设置（在Web端完成）
- 跳转到Web端的功能（xxLink技术限制）

---

## 3. 涉及页面范围

### 3.1 新建页面文件

**第一阶段：**
- `index.html` - 首页-待办工作台
- `todo-list.html` - 待办列表（完整版）
- `done-list.html` - 已办列表
- `doubt-detail.html` - 红灯疑点处置
- `rule-audit.html` - 规则审核
- `ai-assistant.html` - AI小助手对话页

**第二阶段：**
- `rule-library.html` - 公共规则库
- `rule-detail.html` - 规则详情（只读）
- `scene-list.html` - 业务场景列表
- `scene-detail.html` - 场景详情与看板

### 3.2 配套文件

- `common-styles.css` - xxLink端统一UI规范
- `common.js` - 公共交互逻辑

---

## 4. 设计规范说明

### 4.1 设计原则

| 原则 | 说明 |
|------|------|
| 响应式一套方案 | 移动端和PC端共用同一套设计方案 |
| 复用现有设计规范 | 保持与xxx平台Web端一致的视觉风格 |
| 聚焦核心流程 | 以待办任务处理为核心 |
| AI悬浮入口 | 智能AI小助手悬浮显示 |
| 无Web端跳转 | 所有功能在xxLink内闭环完成 |

### 4.2 视觉规范

复用Web端的CSS变量定义：

```css
:root {
  /* 主色调 */
  --color-primary: #409EFF;
  --color-primary-hover: #66b1ff;
  --color-primary-dark: #142F5F;
  --color-primary-light: #ECF5FF;

  /* 功能色 */
  --color-success: #67C23A;
  --color-warning: #E6A23C;
  --color-danger: #F56C6C;

  /* 文字色 */
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;

  /* 背景色 */
  --bg-page: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-hover: #E6F0FE;

  /* 边框色 */
  --border-color: #DCDFE6;
  --border-light: #EBEEF5;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* 字体大小 */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 16px;
  --font-lg: 18px;
}
```

### 4.3 布局规范

**移动端布局（375px）：**
```
┌─────────────────────────┐
│  顶部导航栏              │
├─────────────────────────┤
│                         │
│      主内容区域         │
│                         │
├─────────────────────────┤
│  底部Tab导航            │
└─────────────────────────┘
```

**PC端布局（1024px+）：**
```
┌─────────────────────────────────────────┐
│  顶部导航栏                              │
├─────────────────────────────────────────┤
│                                         │
│            主内容区域                    │
│                                         │
├─────────────────────────────────────────┤
│  底部Tab导航                            │
└─────────────────────────────────────────┘
```

---

## 5. 各页面改动说明

### 5.1 首页-待办工作台（第一阶段）

#### 文件
- `index.html`（新建）

#### 页面用途

首页作为用户进入xxLink入口的默认页面，展示风险监控概览和待办任务列表，帮助用户快速了解当前工作状态并进入处理流程。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀xxx平台                             │
├─────────────────────────────────────────┤
│                                         │
│  ───── 风险监控概览 ─────              │
│  ┌─────────────────────────────────┐   │
│  │ ⚠️待分派疑点                    │   │
│  │    12 条                         │   │
│  │    需要及时分派处理              │   │
│  ├─────────────────────────────────┤   │
│  │ 🔴 待处理疑点（红灯）            │   │
│  │    8 条                          │   │
│  │    响应等级"限期整改"            │   │
│  │    已派发待处置                  │   │
│  ├─────────────────────────────────┤   │
│  │ 🟡 待处理疑点（黄灯）            │   │
│  │    5 条                          │   │
│  │    响应等级"核查反馈"            │   │
│  │    已派发待核查                  │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 我的待办 ─────                  │
│  [ 待办(17) ] [ 已办(45) ]             │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 序号 │ 任务单号      │ 业务类型 │   │
│  │  1   │ FYC-20260706  │ 风险疑点 │   │
│  │      │ -000001       │ 处置     │   │
│  │      │ 风险规则：费用报销单附件  │   │
│  │      │ 校验数据核查              │   │
│  │      │ 参与节点：风险处置        │   │
│  │      │ 到达时间：2小时前         │   │
│  │      │ [ 详情 ]                  │   │
│  └─────────────────────────────────┘   │
│                                         │
│         查看全部待办 →                  │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋待办  📊概览                 │
│                                         │
│              🤖 (悬浮AI小助手)          │
└─────────────────────────────────────────┘
```

#### 具体改动

##### 5.1.1 顶部导航栏

```html
<header class="xxlink-header">
  <div class="header-left">
    <button class="back-btn"><i class="fa fa-angle-left"></i></button>
    <h1 class="header-title">xxx平台</h1>
  </div>
</header>
```

说明：
- 简洁的顶部导航，显示返回按钮和标题
- 移动端适配，高度44px

##### 5.1.2 风险监控概览卡片

```html
<div class="alert-cards">
  <div class="alert-card urgent">
    <div class="alert-icon">⚠️</div>
    <div class="alert-content">
      <div class="alert-title">待分派疑点</div>
      <div class="alert-count">12 条</div>
      <div class="alert-desc">需要及时分派处理</div>
    </div>
  </div>
  <div class="alert-card danger">
    <div class="alert-icon">🔴</div>
    <div class="alert-content">
      <div class="alert-title">待处理疑点（红灯）</div>
      <div class="alert-count">8 条</div>
      <div class="alert-desc">响应等级"限期整改"，已派发待处置</div>
    </div>
  </div>
  <div class="alert-card warning">
    <div class="alert-icon">🟡</div>
    <div class="alert-content">
      <div class="alert-title">待处理疑点（黄灯）</div>
      <div class="alert-count">5 条</div>
      <div class="alert-desc">响应等级"核查反馈"，已派发待核查</div>
    </div>
  </div>
</div>
```

卡片样式：

```css
.alert-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.alert-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-primary);
}

.alert-card.urgent {
  border-left-color: var(--color-warning);
}

.alert-card.danger {
  border-left-color: var(--color-danger);
}

.alert-card.warning {
  border-left-color: var(--color-warning);
}

.alert-icon {
  font-size: 24px;
}

.alert-title {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.alert-count {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.alert-desc {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}
```

说明：
- 3个卡片纵向排列，移动端友好
- 红色左边框表示紧急，黄色表示警告
- 显示数量和简要说明

##### 5.1.3 待办列表区域

```html
<div class="section">
  <div class="section-header">
    <div class="tabs">
      <button class="tab active">待办(17)</button>
      <button class="tab">已办(45)</button>
    </div>
  </div>
  <div class="todo-list">
    <div class="todo-item" onclick="location.href='doubt-detail.html'">
      <div class="todo-header">
        <span class="task-no">FYC-20260706-000001</span>
        <span class="task-type risk">风险疑点处置</span>
      </div>
      <div class="todo-body">
        <div class="rule-name">风险规则：费用报销单附件校验数据核查</div>
        <div class="todo-meta">
          <span>参与节点：风险处置</span>
          <span>到达时间：2小时前</span>
        </div>
      </div>
      <div class="todo-action">
        <button class="btn-detail">详情</button>
      </div>
    </div>
    <!-- 更多待办项... -->
  </div>
  <div class="view-all">
    <a href="todo-list.html">查看全部待办 →</a>
  </div>
</div>
```

列表样式：

```css
.section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  overflow: hidden;
}

.section-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
}

.tabs {
  display: flex;
  gap: 0;
}

.tab {
  flex: 1;
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: var(--font-base);
  color: var(--text-regular);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 500;
}

.todo-list {
  padding: 0;
}

.todo-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.2s;
}

.todo-item:hover {
  background: var(--bg-hover);
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.task-no {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.task-type {
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.task-type.risk {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.task-type.rule {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.rule-name {
  font-size: var(--font-base);
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 500;
}

.todo-meta {
  display: flex;
  gap: 16px;
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.todo-action {
  margin-top: 8px;
  text-align: right;
}

.btn-detail {
  padding: 4px 12px;
  font-size: var(--font-xs);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-regular);
  cursor: pointer;
}

.view-all {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--border-light);
}

.view-all a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--font-sm);
}
```

说明：
- Tab切换待办/已办
- 卡片式列表，移动端友好
- 显示任务单号、业务类型、规则名称、参与节点、到达时间
- 点击可跳转到详情页

##### 5.1.4 底部Tab导航

```html
<nav class="bottom-nav">
  <a href="index.html" class="nav-item active">
    <i class="fa fa-home"></i>
    <span>首页</span>
  </a>
  <a href="todo-list.html" class="nav-item">
    <i class="fa fa-list"></i>
    <span>待办</span>
  </a>
  <a href="#" class="nav-item disabled">
    <i class="fa fa-bar-chart"></i>
    <span>概览</span>
  </a>
</nav>
```

导航样式：

```css
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  border-top: 1px solid var(--border-light);
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--font-xs);
  padding: 4px 12px;
}

.nav-item.active {
  color: var(--color-primary);
}

.nav-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.nav-item i {
  font-size: 20px;
}
```

说明：
- 固定在底部，3个Tab
- 概览Tab在第二阶段实现
- AI小助手悬浮在右下角

##### 5.1.5 AI小助手悬浮入口

```html
<div class="ai-float-btn" onclick="location.href='ai-assistant.html'">
  <i class="fa fa-robot"></i>
</div>
```

悬浮按钮样式：

```css
.ai-float-btn {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  cursor: pointer;
  z-index: 99;
  transition: transform 0.2s;
}

.ai-float-btn:hover {
  transform: scale(1.1);
}

.ai-float-btn i {
  font-size: 24px;
  color: white;
}
```

说明：
- 悬浮在页面右下角
- 渐变紫色背景
- 点击跳转到AI对话页

---

### 5.2 待办列表（完整版）（第一阶段）

#### 文件
- `todo-list.html`（新建）

#### 页面用途

展示当前用户需要处理的所有待办任务，支持筛选和分页。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀待办事项                            │
├─────────────────────────────────────────┤
│  [ 待办(17) ] [ 已办(45) ]             │
├─────────────────────────────────────────┤
│                                         │
│  筛选：[全部类型 ▼][全部状态 ▼]      │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  1   │ FYC-20260706  │ 风险疑点 │   │
│  │      │ -000001       │ 处置     │   │
│  │      │ 风险规则：费用报销单附件  │   │
│  │      │ 校验数据核查              │   │
│  │      │ 参与节点：风险处置        │   │
│  │      │ 创建人：张三             │   │
│  │      │ 创建单位：财务部       │   │
│  │      │ 到达时间：2026-07-06      │   │
│  │      │           09:30          │   │
│  │      │ [ 详情 ]                  │   │
│  ├─────────────────────────────────┤   │
│  │  2   │ FGS-20260706  │ 风险规则 │   │
│  │      │ -000001       │ 上线     │   │
│  │      │ ...                        │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ─────────── 加载更多 ───────────       │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋待办  📊概览                 │
└─────────────────────────────────────────┘
```

#### 具体改动

##### 5.2.1 筛选区域

```html
<div class="filter-bar">
  <select class="filter-select">
    <option value="">全部类型</option>
    <option value="risk">风险疑点处置</option>
    <option value="rule">风险规则上线</option>
  </select>
  <select class="filter-select">
    <option value="">全部状态</option>
    <option value="pending">待处理</option>
    <option value="processing">处理中</option>
  </select>
</div>
```

筛选样式：

```css
.filter-bar {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

.filter-select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  background: var(--bg-card);
}
```

说明：
- 两个筛选项：全部类型、全部状态
- 移动端使用原生select，体验更好

##### 5.2.2 待办列表项

```html
<div class="todo-item" onclick="location.href='doubt-detail.html'">
  <div class="todo-header">
    <span class="task-no">FYC-20260706-000001</span>
    <span class="task-type risk">风险疑点处置</span>
  </div>
  <div class="todo-body">
    <div class="rule-name">风险规则：费用报销单附件校验数据核查</div>
    <div class="todo-info">
      <div class="info-item">
        <span class="label">参与节点：</span>
        <span class="value">风险处置</span>
      </div>
      <div class="info-item">
        <span class="label">创建人：</span>
        <span class="value">张三</span>
      </div>
      <div class="info-item">
        <span class="label">创建单位：</span>
        <span class="value">财务部</span>
      </div>
      <div class="info-item">
        <span class="label">到达时间：</span>
        <span class="value">2026-07-06 09:30</span>
      </div>
    </div>
  </div>
  <div class="todo-footer">
    <button class="btn-detail">详情</button>
  </div>
</div>
```

说明：
- 卡片式布局，显示完整信息
- 包含创建人、创建单位等详细信息
- 点击可跳转到详情页

---

### 5.3 红灯疑点处置（第一阶段）

#### 文件
- `doubt-detail.html`（新建）

#### 页面用途

展示红灯疑点的详细信息，支持处置人提交处置结果或退回重新分派。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀返回          疑点处置               │
├─────────────────────────────────────────┤
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 🔴 红灯 ·待处置                 │   │
│  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │   │
│  │ 差旅报销金额超出标准              │   │
│  │ 任务单号：FYC-20260706-000001   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 疑点描述 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 该笔差旅报销金额¥12,580.00超出  │   │
│  │ 公司规定标准¥8,000.00，超标      │   │
│  │ ¥4,580.00。请核实是否存在特殊    │   │
│  │ 情况或需要补充审批。              │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 疑点信息 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 单据号      CW202607001          │   │
│  │ 报销人      张三                  │   │
│  │ 报销金额    ¥12,580.00           │   │
│  │ 标准限额    ¥8,000.00            │   │
│  │ 超标金额    ¥4,580.00            │   │
│  │ 报销日期    2026-07-05           │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 基本信息 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 风险规则    费用报销单附件校验    │   │
│  │ 规则编号    R202607001            │   │
│  │ 参与节点    风险处置              │   │
│  │ 派发人      张三                 │   │
│  │ 派发单位    财务部             │   │
│  │ 到达时间    2026-07-06 09:30     │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 处置操作 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 处置结果 *                       │   │
│  │ ○ 已完成                         │   │
│  │ ○ 退回重新分派                   │   │
│  │                                  │   │
│  │ 处置备注 *                       │   │
│  │ ┌─────────────────────────────┐ │   │
│  │ │                             │ │   │
│  │ │ 请输入处置备注...            │ │   │
│  │ │                             │ │   │
│  │ └─────────────────────────────┘ │   │
│  │                                  │   │
│  │ 📎 附件（可选）                  │   │
│  │ [ + 添加附件 ]                   │   │
│  │                                  │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │            提交处置               │   │
│  └─────────────────────────────────┘   │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋待办  📊概览                 │
└─────────────────────────────────────────┘
```

#### 具体改动

##### 5.3.1 疑点标题卡片

```html
<div class="doubt-header">
  <div class="doubt-status">
    <span class="status-tag red">🔴 红灯</span>
    <span class="status-dot">·待处置</span>
  </div>
  <div class="doubt-title">差旅报销金额超出标准</div>
  <div class="doubt-task-no">任务单号：FYC-20260706-000001</div>
</div>
```

标题样式：

```css
.doubt-header {
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  border-left: 4px solid var(--color-danger);
}

.doubt-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.status-tag {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
}

.status-tag.red {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.status-dot {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.doubt-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.doubt-task-no {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
```

说明：
- 红色左边框和渐变背景，突出紧急状态
- 显示响应等级、状态、标题、任务单号

##### 5.3.2 信息区块

```html
<div class="info-section">
  <div class="section-title">
    <i class="fa fa-file-text-o"></i>
    <span>疑点描述</span>
  </div>
  <div class="section-content">
    <p>该笔差旅报销金额¥12,580.00超出公司规定标准¥8,000.00，超标¥4,580.00。请核实是否存在特殊情况或需要补充审批。</p>
  </div>
</div>

<div class="info-section">
  <div class="section-title">
    <i class="fa fa-database"></i>
    <span>疑点信息</span>
  </div>
  <div class="info-grid">
    <div class="info-item">
      <span class="label">单据号</span>
      <span class="value">CW202607001</span>
    </div>
    <div class="info-item">
      <span class="label">报销人</span>
      <span class="value">张三</span>
    </div>
    <div class="info-item">
      <span class="label">报销金额</span>
      <span class="value highlight">¥12,580.00</span>
    </div>
    <div class="info-item">
      <span class="label">标准限额</span>
      <span class="value">¥8,000.00</span>
    </div>
    <div class="info-item">
      <span class="label">超标金额</span>
      <span class="value danger">¥4,580.00</span>
    </div>
    <div class="info-item">
      <span class="label">报销日期</span>
      <span class="value">2026-07-05</span>
    </div>
  </div>
</div>
```

信息区块样式：

```css
.info-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.section-title i {
  color: var(--color-primary);
}

.section-content p {
  font-size: var(--font-base);
  color: var(--text-regular);
  line-height: 1.6;
  margin: 0;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item .label {
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.info-item .value {
  font-size: var(--font-base);
  color: var(--text-primary);
}

.info-item .value.highlight {
  font-weight: 600;
}

.info-item .value.danger {
  color: var(--color-danger);
}
```

说明：
- 疑点描述放在最前面（用户要求）
- 信息区块使用网格布局，移动端自动变为单列
- 重要数值高亮显示

##### 5.3.3 处置操作表单

```html
<div class="dispose-section">
  <div class="section-title">
    <i class="fa fa-edit"></i>
    <span>处置操作</span>
  </div>
  <div class="form-group">
    <label class="form-label">处置结果 <span class="required">*</span></label>
    <div class="radio-group">
      <label class="radio-item">
        <input type="radio" name="result" value="completed">
        <span class="radio-mark"></span>
        <span>已完成</span>
      </label>
      <label class="radio-item">
        <input type="radio" name="result" value="return">
        <span class="radio-mark"></span>
        <span>退回重新分派</span>
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="form-label">处置备注 <span class="required">*</span></label>
    <textarea class="form-textarea" placeholder="请输入处置备注..." rows="4"></textarea>
  </div>
  <div class="form-group">
    <label class="form-label">附件（可选）</label>
    <div class="upload-area">
      <i class="fa fa-plus"></i>
      <span>添加附件</span>
    </div>
  </div>
</div>
```

表单样式：

```css
.dispose-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.required {
  color: var(--color-danger);
}

.radio-group {
  display: flex;
  gap: 24px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  resize: vertical;
  min-height: 100px;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.upload-area {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.upload-area i {
  font-size: 24px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.upload-area span {
  display: block;
  font-size: var(--font-sm);
  color: var(--text-secondary);
}
```

说明：
- 处置结果为单选：已完成 / 退回重新分派
- 处置备注为必填项
- 附件为可选，支持点击上传

##### 5.3.4 提交按钮

```html
<div class="submit-bar">
  <button class="btn-submit" onclick="submitDispose()">提交处置</button>
</div>
```

提交按钮样式：

```css
.submit-bar {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  z-index: 98;
}

.btn-submit {
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-submit:hover {
  background: var(--color-primary-hover);
}
```

说明：
- 固定在底部，方便操作
- 全宽按钮，点击提交处置

---

### 5.4 规则审核（第一阶段）

#### 文件
- `rule-audit.html`（新建）

#### 页面用途

展示规则的详细信息，支持审核人对规则进行审核通过或驳回操作。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀返回          规则审核               │
├─────────────────────────────────────────┤
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 📋 待审核 ·业务审核             │   │
│  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │   │
│  │ 费用报销单附件校验数据核查        │   │
│  │ 任务单号：FGS-20260706-000001   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 任务信息 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 参与节点    业务审核              │   │
│  │ 创建人      张三                 │   │
│  │ 创建单位    财务部             │   │
│  │ 到达时间    2026-07-06 09:30     │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 规则基本信息 ─────              │
│  ┌─────────────────────────────────┐   │
│  │ 业务域      财务域              │   │
│  │ 风险类型    合规风险              │   │
│  │ 风险等级    高                    │   │
│  │ 规则状态    待业务审核            │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 规则描述 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 监控目标：                       │   │
│  │ 校验费用报销单的附件完整性        │   │
│  │                                  │   │
│  │ 判断标准：                       │   │
│  │ 报销金额 > 500元 且 无附件       │   │
│  │                                  │   │
│  │ 制度依据：                       │   │
│  │ 《公司费用报销管理办法》第8条    │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 审核操作 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 审核结果 *                       │   │
│  │ ○ 审核通过                       │   │
│  │ ○ 驳回                           │   │
│  │                                  │   │
│  │ 审核备注 *                       │   │
│  │ ┌─────────────────────────────┐ │   │
│  │ │                             │ │   │
│  │ │ 请输入审核备注...            │ │   │
│  │ │                             │ │   │
│  │ └─────────────────────────────┘ │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │            提交审核               │   │
│  └─────────────────────────────────┘   │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋待办  📊概览                 │
└─────────────────────────────────────────┘
```

#### 具体改动

##### 5.4.1 任务标题卡片

```html
<div class="rule-header">
  <div class="rule-status">
    <span class="status-tag blue">📋 待审核</span>
    <span class="status-dot">·业务审核</span>
  </div>
  <div class="rule-title">费用报销单附件校验数据核查</div>
  <div class="rule-task-no">任务单号：FGS-20260706-000001</div>
</div>
```

说明：
- 蓝色左边框，表示规则审核
- 显示审核状态、节点、标题、任务单号

##### 5.4.2 规则描述区块

```html
<div class="info-section">
  <div class="section-title">
    <i class="fa fa-book"></i>
    <span>规则描述</span>
  </div>
  <div class="rule-desc">
    <div class="desc-item">
      <div class="desc-label">监控目标：</div>
      <div class="desc-content">校验费用报销单的附件完整性</div>
    </div>
    <div class="desc-item">
      <div class="desc-label">判断标准：</div>
      <div class="desc-content">报销金额 > 500元 且 无附件</div>
    </div>
    <div class="desc-item">
      <div class="desc-label">制度依据：</div>
      <div class="desc-content">《公司费用报销管理办法》第8条</div>
    </div>
  </div>
</div>
```

说明：
- 展示规则的监控目标、判断标准、制度依据
- 使用标签+内容的布局方式

##### 5.4.3 审核操作表单

```html
<div class="audit-section">
  <div class="section-title">
    <i class="fa fa-check-square"></i>
    <span>审核操作</span>
  </div>
  <div class="form-group">
    <label class="form-label">审核结果 <span class="required">*</span></label>
    <div class="radio-group">
      <label class="radio-item">
        <input type="radio" name="result" value="approve">
        <span class="radio-mark"></span>
        <span>审核通过</span>
      </label>
      <label class="radio-item">
        <input type="radio" name="result" value="reject">
        <span class="radio-mark"></span>
        <span>驳回</span>
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="form-label">审核备注 <span class="required">*</span></label>
    <textarea class="form-textarea" placeholder="请输入审核备注..." rows="4"></textarea>
  </div>
</div>
```

说明：
- 审核结果为单选：审核通过 / 驳回
- 审核备注为必填项
- 复用疑点处置的表单样式

---

### 5.5 AI小助手（第一阶段）

#### 文件
- `ai-assistant.html`（新建）

#### 页面用途

提供AI对话入口，用户可以随时咨询问题。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀返回      智能AI小助手               │
├─────────────────────────────────────────┤
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  🤖 您好！我是智能AI小助手，    │   │
│  │     可以帮您：                   │   │
│  │                                 │   │
│  │     • 查询风险规则信息           │   │
│  │     • 解答疑点处置问题           │   │
│  │     • 提供操作指引               │   │
│  │     • 查询业务场景               │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  快捷问题：                      │   │
│  │  [如何处置红灯疑点？]            │   │
│  │  [查询规则 R202607001]           │   │
│  │  [待办任务有哪些？]              │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  👤 用户：                       │   │
│  │     如何处置红灯疑点？           │   │
│  │                                 │   │
│  │  🤖 AI助手：                     │   │
│  │     红灯疑点的处置流程如下：     │   │
│  │     1. 进入待办列表              │   │
│  │     2. 找到红灯疑点任务          │   │
│  │     3. 点击"详情"查看详情       │   │
│  │     4. 填写处置说明              │   │
│  │     5. 提交处置                  │   │
│  └─────────────────────────────────┘   │
│                                         │
├─────────────────────────────────────────┤
│  ┌─────────────────────────────────┐   │
│  │  [请输入您的问题...]  [ 发送 ]  │   │
│  └─────────────────────────────────┘   │
└─────────────────────────────────────────┘
```

#### 具体改动

##### 5.5.1 欢迎语区域

```html
<div class="welcome-section">
  <div class="ai-avatar">
    <i class="fa fa-robot"></i>
  </div>
  <div class="welcome-text">
    <p>您好！我是智能AI小助手，可以帮您：</p>
    <ul>
      <li>查询风险规则信息</li>
      <li>解答疑点处置问题</li>
      <li>提供操作指引</li>
      <li>查询业务场景</li>
    </ul>
  </div>
</div>
```

欢迎语样式：

```css
.welcome-section {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.ai-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-avatar i {
  font-size: 20px;
  color: white;
}

.welcome-text p {
  font-size: var(--font-base);
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.welcome-text ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--font-sm);
  color: var(--text-regular);
}

.welcome-text li {
  margin-bottom: 4px;
}
```

##### 5.5.2 快捷问题

```html
<div class="quick-questions">
  <div class="quick-title">快捷问题：</div>
  <div class="quick-list">
    <button class="quick-btn" onclick="askQuestion('如何处置红灯疑点？')">如何处置红灯疑点？</button>
    <button class="quick-btn" onclick="askQuestion('查询规则 R202607001')">查询规则 R202607001</button>
    <button class="quick-btn" onclick="askQuestion('待办任务有哪些？')">待办任务有哪些？</button>
  </div>
</div>
```

快捷问题样式：

```css
.quick-questions {
  margin-bottom: 16px;
}

.quick-title {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.quick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-btn {
  padding: 8px 12px;
  font-size: var(--font-sm);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.quick-btn:hover {
  background: var(--color-primary);
  color: white;
}
```

##### 5.5.3 对话区域

```html
<div class="chat-messages" id="chatMessages">
  <div class="message user">
    <div class="message-content">如何处置红灯疑点？</div>
  </div>
  <div class="message ai">
    <div class="message-avatar">
      <i class="fa fa-robot"></i>
    </div>
    <div class="message-content">
      <p>红灯疑点的处置流程如下：</p>
      <ol>
        <li>进入待办列表</li>
        <li>找到红灯疑点任务</li>
        <li>点击"详情"查看详情</li>
        <li>填写处置说明</li>
        <li>提交处置</li>
      </ol>
    </div>
  </div>
</div>
```

对话样式：

```css
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.message {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}

.message.user {
  justify-content: flex-end;
}

.message.ai {
  justify-content: flex-start;
}

.message-content {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: var(--font-base);
  line-height: 1.5;
}

.message.user .message-content {
  background: var(--color-primary);
  color: white;
  border-bottom-right-radius: 4px;
}

.message.ai .message-content {
  background: var(--bg-card);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-avatar i {
  font-size: 16px;
  color: white;
}
```

##### 5.5.4 输入区域

```html
<div class="chat-input">
  <input type="text" class="input-field" placeholder="请输入您的问题..." id="messageInput">
  <button class="send-btn" onclick="sendMessage()">发送</button>
</div>
```

输入区域样式：

```css
.chat-input {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
}

.input-field {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--font-base);
}

.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
}

.send-btn {
  padding: 10px 20px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--font-base);
  cursor: pointer;
}

.send-btn:hover {
  background: var(--color-primary-hover);
}
```

---

### 5.6 公共规则库（第二阶段）

#### 文件
- `rule-library.html`（新建）

#### 页面用途

展示公共规则库，支持搜索、筛选和查看规则详情。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀公共规则库              🔍 搜索     │
├─────────────────────────────────────────┤
│                                         │
│  筛选：[全部业务域 ▼][全部状态 ▼]    │
│                                         │
│  ───── 已上线规则 ─────                │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 📋 费用报销单附件校验数据核查    │   │
│  │ R202607001 ·财务域            │   │
│  │ 风险等级：高 ·已上线            │   │
│  │ 版本：V3 ·准确率：92%           │   │
│  │ [ 查看详情 →]                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 📋 合同审批流程合规性检查        │   │
│  │ R202607002 ·合同域            │   │
│  │ 风险等级：中 ·已上线            │   │
│  │ 版本：V2 ·准确率：88%           │   │
│  │ [ 查看详情 →]                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ─────────── 加载更多 ───────────       │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋规则  📋场景  📊概览         │
└─────────────────────────────────────────┘
```

#### 具体改动

##### 5.6.1 搜索栏

```html
<div class="search-bar">
  <div class="search-input">
    <i class="fa fa-search"></i>
    <input type="text" placeholder="搜索规则名称或编号...">
  </div>
</div>
```

搜索栏样式：

```css
.search-bar {
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

.search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
}

.search-input i {
  color: var(--text-secondary);
}

.search-input input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-sm);
}
```

##### 5.6.2 规则卡片

```html
<div class="rule-card" onclick="location.href='rule-detail.html'">
  <div class="rule-icon">
    <i class="fa fa-file-text-o"></i>
  </div>
  <div class="rule-info">
    <div class="rule-name">费用报销单附件校验数据核查</div>
    <div class="rule-meta">
      <span class="rule-code">R202607001</span>
      <span class="rule-domain">财务域</span>
    </div>
    <div class="rule-tags">
      <span class="tag risk-high">高风险</span>
      <span class="tag status-online">已上线</span>
    </div>
    <div class="rule-stats">
      <span>版本：V3</span>
      <span>准确率：92%</span>
    </div>
  </div>
  <div class="rule-arrow">
    <i class="fa fa-angle-right"></i>
  </div>
</div>
```

规则卡片样式：

```css
.rule-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.2s;
}

.rule-card:hover {
  background: var(--bg-hover);
}

.rule-card:last-child {
  border-bottom: none;
}

.rule-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rule-icon i {
  font-size: 20px;
  color: var(--color-primary);
}

.rule-info {
  flex: 1;
  min-width: 0;
}

.rule-name {
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-meta {
  display: flex;
  gap: 8px;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.rule-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.tag {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
}

.tag.risk-high {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.tag.status-online {
  background: var(--color-success-light);
  color: var(--color-success);
}

.rule-stats {
  display: flex;
  gap: 12px;
  font-size: var(--font-xs);
  color: var(--text-secondary);
}

.rule-arrow {
  color: var(--text-secondary);
}
```

---

### 5.7 规则详情（只读）（第二阶段）

#### 文件
- `rule-detail.html`（新建）

#### 页面用途

展示规则的详细信息（只读），包括基本信息、规则描述、版本历史。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀返回          规则详情               │
├─────────────────────────────────────────┤
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 📋 费用报销单附件校验数据核查    │   │
│  │ R202607001 ·已上线 ·V3        │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 基本信息 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 业务域      财务域              │   │
│  │ 风险类型    合规风险              │   │
│  │ 风险等级    高                    │   │
│  │ 创建人      张三                 │   │
│  │ 创建时间    2026-01-15           │   │
│  │ 当前版本    V3                    │   │
│  │ 准确率      92%                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 规则描述 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 监控目标：                       │   │
│  │ 校验费用报销单的附件完整性        │   │
│  │                                  │   │
│  │ 判断标准：                       │   │
│  │ 报销金额 > 500元 且 无附件       │   │
│  │                                  │   │
│  │ 处置建议：                       │   │
│  │ 要求补充相关附件材料              │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 版本历史 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ V3 (当前) ·2026-06-15          │   │
│  │ 优化判断标准，提升准确率          │   │
│  │                                  │   │
│  │ V2 ·2026-03-20                 │   │
│  │ 调整阈值参数                     │   │
│  │                                  │   │
│  │ V1 ·2026-01-15                 │   │
│  │ 初始版本                         │   │
│  └─────────────────────────────────┘   │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋规则  📋场景  📊概览         │
└─────────────────────────────────────────┘
```

---

### 5.8 业务场景列表（第二阶段）

#### 文件
- `scene-list.html`（新建）

#### 页面用途

展示业务场景列表，支持搜索、筛选和查看场景详情。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀业务场景                🔍 搜索     │
├─────────────────────────────────────────┤
│                                         │
│  筛选：[全部业务域 ▼][全部状态 ▼]    │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 📊 差旅费合规检查        运行中  │   │
│  │ 场景编号：S202601001             │   │
│  │ 业务域：财务域                  │   │
│  │ 关联规则：5 条                   │   │
│  │ 累计疑点：45 条                  │   │
│  │ 创建人：张三                    │   │
│  │ [ 查看详情 →]                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 📊 合同审批合规检查      运行中  │   │
│  │ 场景编号：S202601002             │   │
│  │ 业务域：合同域                  │   │
│  │ 关联规则：3 条                   │   │
│  │ 累计疑点：28 条                  │   │
│  │ 创建人：李四                    │   │
│  │ [ 查看详情 →]                   │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ─────────── 加载更多 ───────────       │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋规则  📋场景  📊概览         │
└─────────────────────────────────────────┘
```

---

### 5.9 场景详情与看板（第二阶段）

#### 文件
- `scene-detail.html`（新建）

#### 页面用途

展示场景的详细信息和运营看板，包括场景信息、运营看板、关联规则、疑点概览。

#### 页面布局

```
┌─────────────────────────────────────────┐
│  ◀返回          场景详情               │
├─────────────────────────────────────────┤
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 📊 差旅费合规检查        运行中  │   │
│  │ 场景编号：S202601001             │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 场景信息 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 业务域      财务域              │   │
│  │ 创建人      张三                 │   │
│  │ 创建时间    2026-01-15           │   │
│  │ 运行频率    每日                  │   │
│  │ 关联规则    5 条                  │   │
│  │ 协作人      李四、王五          │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 运营看板 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 疑点总览                         │   │
│  │                                  │   │
│  │ 处置完成率                       │   │
│  │ 87.9%                            │   │
│  │ ████████████████████░░░░░░░░░░  │   │
│  │ 已处置 1,130 / 累计 1,286       │   │
│  │                                  │   │
│  │ ┌─────────┐ ┌─────────┐         │   │
│  │ │关联规则数│ │待处理疑点│         │   │
│  │ │   12    │ │  156    │         │   │
│  │ └─────────┘ └─────────┘         │   │
│  │                                  │   │
│  │ ┌─────────┐ ┌─────────┐         │   │
│  │ │累计疑点 │ │近30天新增│         │   │
│  │ │ 1,286  │ │  243    │         │   │
│  │ └─────────┘ └─────────┘         │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │ 风控指标                         │   │
│  │                                  │   │
│  │ 风险识别准确率    72.5%          │   │
│  │ 决策自动化率      68.3%          │   │
│  │ 无效告警减少比例  65.1%          │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 关联规则 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │ 📋 费用报销单附件校验            │   │
│  │    高风险 ·准确率 92%           │   │
│  │                                  │   │
│  │ 📋 差旅住宿标准检测              │   │
│  │    中风险 ·准确率 88%           │   │
│  │                                  │   │
│  │ 📋 差旅交通费用检测              │   │
│  │    中风险 ·准确率 85%           │   │
│  │                                  │   │
│  │ [ 查看全部规则 →]               │   │
│  └─────────────────────────────────┘   │
│                                         │
│  ───── 疑点概览 ─────                  │
│  ┌─────────────────────────────────┐   │
│  │                                  │   │
│  │  ┌─────────┐ ┌─────────┐        │   │
│  │  │新增疑点 │ │待分派疑点│        │   │
│  │  │   5    │ │   42    │        │   │
│  │  └─────────┘ └─────────┘        │   │
│  │                                  │   │
│  │  ┌─────────┐ ┌─────────┐        │   │
│  │  │待处置审核│ │待处理疑点│        │   │
│  │  │   28    │ │  156    │        │   │
│  │  └─────────┘ └─────────┘        │   │
│  │                                  │   │
│  └─────────────────────────────────┘   │
│                                         │
├─────────────────────────────────────────┤
│  🏠首页  📋规则  📋场景  📊概览         │
└─────────────────────────────────────────┘
```

---

## 6. 公共组件说明

### 6.1 底部Tab导航

**第一阶段（2个Tab）：**
```
🏠 首页  📋 待办
```

**第二阶段（2个Tab）：**
```
🏠 首页（含规则库、场景列表入口）  📋 待办
```

### 6.2 AI小助手悬浮入口

- 位置：右下角，底部导航上方
- 样式：圆形渐变紫色按钮
- 图标：机器人图标
- 行为：点击跳转到AI对话页

### 6.3 页面头部

```html
<header class="xxlink-header">
  <div class="header-left">
    <button class="back-btn"><i class="fa fa-angle-left"></i></button>
    <h1 class="header-title">页面标题</h1>
  </div>
</header>
```

---

## 7. 交互变化总结

### 7.1 页面跳转

| 从 | 到 | 触发方式 |
|------|------|----------|
| 首页 | 待办列表 | 点击"查看全部待办" |
| 首页 | 疑点处置 | 点击待办项"详情" |
| 首页 | 规则审核 | 点击待办项"详情" |
| 待办列表 | 疑点处置 | 点击待办项"详情" |
| 待办列表 | 规则审核 | 点击待办项"详情" |
| 任意页面 | AI对话 | 点击悬浮AI按钮 |
| 底部Tab | 对应页面 | 点击Tab |

### 7.2 表单交互

| 页面 | 操作 | 说明 |
|------|------|------|
| 疑点处置 | 提交处置 | 选择处置结果 + 填写备注 + 提交 |
| 规则审核 | 提交审核 | 选择审核结果 + 填写备注 + 提交 |
| AI对话 | 发送消息 | 输入问题 + 点击发送 |

### 7.3 筛选交互

| 页面 | 筛选项 | 说明 |
|------|------|------|
| 待办列表 | 全部类型、全部状态 | 选择后自动筛选 |
| 已办列表 | 全部类型、全部时间 | 选择后自动筛选 |
| 公共规则库 | 全部业务域、全部状态 | 选择后自动筛选 |
| 业务场景列表 | 全部业务域、全部状态 | 选择后自动筛选 |

---

## 8. 复用关系说明

### 8.1 复用的页面和组件

本次复用了以下页面的结构和组件：

- `common-styles.css`：项目统一UI规范（颜色、字体、间距等）
- Bootstrap 5：基础样式和组件
- Font Awesome：图标库
- `风险监控入口.html`：疑点提醒卡片设计
- `疑点处置-疑点详情.html`：疑点处置表单设计
- `规则详情.html`：规则信息展示设计

### 8.2 新增的组件

- 底部Tab导航组件
- AI小助手悬浮入口组件
- 移动端适配的卡片式列表组件

---

## 9. 影响范围说明

### 9.1 页面视觉影响

本次为新建页面，不影响其他已有页面。

### 9.2 交互逻辑影响

本次为新建页面，不影响其他已有页面的交互逻辑。

### 9.3 不影响部分

- Web端所有页面
- 其他风控模块页面
- 真实后端接口

---

## 10. 当前实现口径说明

由于当前Demo仍为静态原型，本次实现基于前端页面级逻辑，具有以下特点：

- 所有数据为mock数据
- 页面跳转使用静态链接
- 表单提交使用alert提示
- 并不代表真实后端已经具备完整联动能力

因此，本次改动的重点在于：

- 验证xxLink入口的页面结构和布局
- 验证移动端适配效果
- 验证核心流程的交互体验
- 验证与Web端的视觉一致性

而不是代表后端已经支持真实联动。

---

## 11. 验收检查点

### 11.1 页面结构

- [ ] 所有页面可正常访问
- [ ] 页面布局与PRD一致
- [ ] 底部Tab导航正常工作
- [ ] AI悬浮入口正常显示

### 11.2 第一阶段功能

- [ ] 首页显示风险监控概览卡片
- [ ] 首页显示待办列表（最近5条）
- [ ] 待办列表支持筛选和分页
- [ ] 疑点处置页面显示完整信息
- [ ] 疑点处置表单可正常填写和提交
- [ ] 规则审核页面显示完整信息
- [ ] 规则审核表单可正常填写和提交
- [ ] AI对话页面可正常输入和发送

### 11.3 第二阶段功能

- [ ] 公共规则库支持搜索和筛选
- [ ] 规则详情页显示完整信息
- [ ] 业务场景列表支持搜索和筛选
- [ ] 场景详情页显示运营看板

### 11.4 响应式适配

- [ ] 移动端（375px）显示正常
- [ ] PC端（1024px+）显示正常
- [ ] 卡片式布局在移动端友好
- [ ] 表单在移动端可正常操作

---

## 12. 一句话总结

本次新建xxLink入口产品，包含第一阶段（首页待办工作台、待办/已办列表、红灯疑点处置、规则审核、AI小助手）和第二阶段（公共规则库、规则详情、业务场景列表、场景详情与看板）共10个页面，采用响应式设计适配移动端和PC端，复用Web端设计规范保持视觉一致性，聚焦核心流程提升用户处理效率。