# 消息模板管理-开放普通用户访问 PRD 与改动说明

---

## 一、PRD 文档

### 1. 需求背景

当前消息模板管理功能仅对管理员开放，普通用户无法查看和使用消息模板。为提升用户体验和工作效率，需要开放消息模板管理功能给普通用户，允许他们查看和使用模板，但限制编辑权限。

### 2. 功能概述

| 功能点 | 描述 | 优先级 |
| :--- | :--- | :--- |
| 权限开放 | 允许普通用户查看消息模板列表 | 高 |
| 模板预览 | 提供模板内容预览功能 | 高 |
| 模板使用 | 允许用户复制和使用模板内容 | 高 |
| 权限分级 | 根据用户角色展示不同操作权限 | 中 |
| 模板分类 | 支持按类型筛选模板 | 中 |

### 3. 业务流程

```mermaid
flowchart TD
    A[访问消息模板管理页面] --> B{用户角色?}
    B -->|管理员| C[展示完整功能]
    B -->|普通用户| D[展示受限功能]
    C --> E[支持查看/编辑/删除]
    D --> F[仅支持查看/复制]
```

### 4. 页面设计

#### 4.1 消息模板列表页

| 元素 | 设计说明 |
| :--- | :--- |
| 模板列表 | 展示所有可用模板 |
| 搜索框 | 支持按模板名称搜索 |
| 分类筛选 | 支持按类型筛选 |
| 操作列 | 根据权限显示不同按钮 |
| 预览按钮 | 普通用户可见 |
| 编辑/删除按钮 | 仅管理员可见 |

#### 4.2 模板预览弹窗

| 元素 | 设计说明 |
| :--- | :--- |
| 模板标题 | 显示模板名称 |
| 模板内容 | 显示模板完整内容 |
| 复制按钮 | 一键复制模板内容 |
| 关闭按钮 | 关闭弹窗 |

### 5. 权限说明

| 用户类型 | 权限 |
| :--- | :--- |
| 系统管理员 | 完整权限（查看/编辑/删除） |
| 普通用户 | 查看和复制权限 |

### 6. 数据结构

```json
{
  "template": {
    "id": "MT001",
    "name": "疑点处理通知",
    "type": "通知类",
    "content": "您好，您有新的疑点需要处理：${doubtNo}",
    "creator": "管理员",
    "createdAt": "2025-01-15",
    "updatedAt": "2025-02-10"
  }
}
```

### 7. 交互说明

1. **访问页面**：根据权限展示对应功能
2. **搜索模板**：输入关键词实时过滤
3. **预览模板**：点击预览按钮查看详情
4. **复制模板**：一键复制模板内容到剪贴板

---

## 二、页面改动说明

### 1. 改动概述

为支持消息模板管理开放普通用户访问功能，需对以下页面进行改动：

| 页面 | 改动类型 | 说明 |
| :--- | :--- | :--- |
| 消息模板管理.html | 修改 | 添加权限控制和预览功能 |
| 左侧菜单 | 修改 | 添加消息模板管理菜单入口 |

### 2. 具体改动

#### 2.1 消息模板管理.html

**改动内容**：

1. **权限控制逻辑**：
   ```javascript
   function checkUserPermission() {
       const role = getCurrentUserRole();
       if (role === 'admin') {
           showAdminButtons();
       } else {
           hideAdminButtons();
       }
   }
   ```

2. **新增预览功能**：
   ```html
   <button class="btn btn-info btn-sm" onclick="previewTemplate('{templateId}')">
       <i class="fa fa-eye"></i> 预览
   </button>
   ```

3. **模板预览弹窗**：
   ```html
   <div class="modal-overlay" id="templatePreviewModal">
       <div class="modal-content">
           <div class="modal-header">
               <h4 class="modal-title">模板预览</h4>
               <button class="modal-close">&times;</button>
           </div>
           <div class="modal-body">
               <div id="previewContent"></div>
           </div>
           <div class="modal-footer">
               <button class="btn btn-secondary" onclick="closePreview()">关闭</button>
               <button class="btn btn-primary" onclick="copyTemplate()">复制内容</button>
           </div>
       </div>
   </div>
   ```

#### 2.2 左侧菜单

**改动内容**：

```html
<li class="tree-node level-3">
    <a href="消息模板管理.html">消息模板管理</a>
</li>
```

### 3. CSS样式改动

新增样式：

```css
.btn-copy {
    background-color: #67C23A;
    border-color: #67C23A;
}

.btn-copy:hover {
    background-color: #5EB838;
}

.preview-content {
    white-space: pre-wrap;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 4px;
    min-height: 100px;
}
```

### 4. JavaScript改动

新增函数：

```javascript
// 预览模板
function previewTemplate(templateId) {
    // 加载模板内容并显示
    $('#templatePreviewModal').show();
}

// 关闭预览
function closePreview() {
    $('#templatePreviewModal').hide();
}

// 复制模板内容
function copyTemplate() {
    const content = $('#previewContent').text();
    navigator.clipboard.writeText(content);
    showToast('复制成功');
}
```

### 5. 兼容性说明

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

### 6. 测试要点

| 测试项 | 说明 |
| :--- | :--- |
| 权限控制 | 确认普通用户看不到编辑按钮 |
| 预览功能 | 确认预览弹窗正常显示 |
| 复制功能 | 确认复制功能正常工作 |
| 搜索功能 | 确认搜索过滤正常 |