# 协议管理页面实现计划

## 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 属性绑定语法