# 协议管理页面实现计划

## 1. 需求分析
根据 `index.js` 中的 API 功能，需要实现以下功能：
- 协议列表展示
- 协议状态修改
- 协议删除
- 协议详情查看
- 协议创建
- 协议更新

## 2. 页面设计
遵循 Element Plus 企业级管理系统设计风格，页面包含：
- 卡片式布局
- 表格展示协议列表
- 状态标签显示协议状态
- 操作按钮（编辑、删除、启用/禁用）
- 表单用于创建/编辑协议
- 弹窗用于详情查看和表单操作

## 3. 实现步骤

### 3.1 页面结构设计
- 使用 `el-card` 包裹主要内容
- 卡片头部包含标题和创建按钮
- 表格展示协议列表，包含协议类型、版本、状态、语言、创建时间等字段
- 操作列包含查看详情、编辑、删除、启用/禁用按钮

### 3.2 功能实现
- **列表查询**：调用 `getAgreementList` API 获取协议列表
- **状态修改**：点击启用/禁用按钮，调用 `updateAgreementStatus` API
- **删除协议**：点击删除按钮，调用 `deleteAgreement` API，带确认提示
- **查看详情**：点击详情按钮，弹窗展示协议详情
- **创建协议**：点击创建按钮，弹窗显示表单，调用 `createAgreement` API
- **编辑协议**：点击编辑按钮，弹窗显示表单，调用 `updateAgreement` API

### 3.3 路由配置
在 `permissionRoutes` 数组中添加协议管理路由：
- 路径：`agreement-management`
- 名称：`AdminAgreement`
- 组件：`AdminAgreement`
- 标题：`admin.layout.agreementManagement`
- 图标：`Document`
- 菜单顺序：合理位置

### 3.4 响应式设计
- 表格在移动端自动调整布局
- 弹窗在移动端自适应宽度
- 表单元素在不同屏幕尺寸下保持良好的用户体验

## 4. 代码实现

### 4.1 创建 `index.vue` 文件
- 使用 Composition API
- 导入必要的组件和 API 类
- 实现数据响应式
- 实现方法逻辑
- 实现模板结构
- 添加样式

### 4.2 Vue3 属性绑定语法
所有属性绑定严格使用 Vue3 语法：
- 错误：`label="{{label}}"`
- 正确：`:label="label"`
- 示例：
  - `:data="tableData"`
  - `:loading="loading"`
  - `:visible.sync="dialogVisible"`
  - `:type="scope.row.status === 1 ? 'success' : 'warning'"`
  - `@click="handleEdit(scope.row)"`

### 4.3 具体实现细节
- **表格配置**：使用 `:data` 绑定表格数据，`:loading` 绑定加载状态
- **弹窗配置**：使用 `:visible.sync` 控制弹窗显示/隐藏
- **表单配置**：使用 `v-model` 绑定表单数据，`:rules` 绑定验证规则
- **按钮配置**：使用 `@click` 绑定点击事件，`:type` 绑定按钮类型
- **状态标签**：使用 `:type` 绑定标签类型，动态根据状态值变化

### 4.4 更新路由配置
在 `router/index.js` 中添加协议管理路由

## 5. 预期效果
- 页面布局符合设计风格指南
- 所有功能正常工作
- 响应式设计适配不同设备
- 交互流畅，反馈清晰
- 严格遵循 Vue3 属性绑定语法

## 6. 技术要点
- Vue3 Composition API
- Element Plus 组件库
- API 异步调用
- 响应式设计
- 中英文切换支持
- 严格的 Vue3 属性绑定语法