# 规则统计分析页面开放优化 - 页面改动说明

## 1. 改动概述

为支持规则统计分析页面开放优化功能，需对以下页面进行改动：

| 页面 | 改动类型 | 说明 |
| :--- | :--- | :--- |
| 规则统计分析.html | 修改 | 优化权限控制和数据展示 |
| 左侧菜单 | 修改 | 调整菜单可见性 |

## 2. 具体改动

### 2.1 规则统计分析.html

**改动位置**：页面整体

**改动内容**：

1. **权限控制逻辑**：
   ```javascript
   function checkPermission() {
       const userRole = getCurrentUserRole();
       if (userRole === 'admin') {
           showFullData();
       } else {
           showRestrictedData();
       }
   }
   ```

2. **数据展示优化**：
   - 新增统计概览卡片区域
   - 新增趋势图表组件
   - 新增规则排行列表
   - 管理员显示导出按钮

3. **敏感数据脱敏**：
   ```html
   <div class="stat-value" data-sensitive="true">***</div>
   ```

### 2.2 左侧菜单

**改动位置**：风控运营管理菜单

**改动内容**：

```html
<li class="tree-node level-3">
    <a href="规则统计分析.html">规则统计分析</a>
</li>
```

移除原有权限限制，对所有登录用户可见。

## 3. CSS样式改动

新增样式：

```css
.stat-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #409EFF;
}

.stat-label {
    font-size: 14px;
    color: #606266;
    margin-top: 8px;
}

.chart-container {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
```

## 4. JavaScript改动

新增函数：

```javascript
// 检查用户权限
function checkPermission() {
    const role = localStorage.getItem('userRole') || 'user';
    return role;
}

// 显示完整数据（管理员）
function showFullData() {
    $('.admin-only').show();
    loadAllStatistics();
}

// 显示受限数据（普通用户）
function showRestrictedData() {
    $('.admin-only').hide();
    loadRestrictedStatistics();
}

// 加载统计数据
function loadStatistics() {
    // 发起API请求加载数据
}
```

## 5. 兼容性说明

- 不影响现有管理员功能
- 保持原有页面布局结构
- 新增元素使用Bootstrap标准样式

## 6. 测试要点

| 测试项 | 说明 |
| :--- | :--- |
| 权限控制 | 确认不同角色看到不同数据 |
| 数据展示 | 确认统计卡片和图表正常显示 |
| 导出功能 | 确认仅管理员可见导出按钮 |
| 脱敏处理 | 确认敏感数据正确脱敏 |