# 钥匙管理组件 - 任务拆分文档

## 任务依赖图

```mermaid
graph TD
    T1[创建文件夹结构] --> T2[创建KeyInfo组件]
    T2 --> T3[实现钥匙柜选择功能]
    T2 --> T4[实现钥匙矩阵展示]
    T2 --> T5[实现钥匙状态显示]
    T2 --> T6[实现操作历史Dialog]
    T3 --> T7[集成API获取钥匙数据]
    T5 --> T7
    T6 --> T8[集成API获取操作记录]
    T7 --> T9[更新路由配置]
    T8 --> T9
    T9 --> T10[更新Main.vue]
```

## 子任务详细信息

### T1: 创建文件夹结构

**输入契约**：
- 项目根目录：`h:/Code/仓库管理系统/warehouse`

**输出契约**：
- 创建文件夹：`src/view/key`

**实现约束**：
- 使用标准的文件夹创建命令
- 确保文件夹结构与项目其他功能模块保持一致

### T2: 创建KeyInfo组件

**输入契约**：
- 已创建的`src/view/key`文件夹
- 参考项目中其他组件的结构和样式

**输出契约**：
- 创建文件：`src/view/key/KeyInfo.vue`
- 组件基本结构完整

**实现约束**：
- 使用Vue 3 Composition API
- 遵循项目现有的组件开发规范

### T3: 实现钥匙柜选择功能

**输入契约**：
- `KeyInfo.vue`组件
- 三个钥匙柜的配置信息

**输出契约**：
- 完整的钥匙柜选择下拉框
- 选择事件处理逻辑

**实现约束**：
- 使用ElementPlus的`<el-select>`组件
- 提供默认选中项

### T4: 实现钥匙矩阵展示

**输入契约**：
- `KeyInfo.vue`组件
- 钥匙柜选择功能

**输出契约**：
- 根据选中钥匙柜动态生成方格矩阵
- 矩阵中格子显示正确的序号

**实现约束**：
- 矩阵布局合理，美观
- 序号从左上角1号开始，按从左到右、从上到下的顺序排列

### T5: 实现钥匙状态显示

**输入契约**：
- `KeyInfo.vue`组件
- 钥匙矩阵展示功能
- 钥匙数据

**输出契约**：
- 在对应位置显示钥匙图标
- 根据KeyState属性设置图标颜色

**实现约束**：
- "在位"状态显示绿色
- "离位"状态显示红色
- 图标清晰可见

### T6: 实现操作历史Dialog

**输入契约**：
- `KeyInfo.vue`组件
- 钥匙状态显示功能

**输出契约**：
- 点击钥匙图标显示Dialog
- Dialog中包含操作历史表格
- 正确处理Dialog的显示和隐藏

**实现约束**：
- 使用ElementPlus的`<el-dialog>`和`<el-table>`组件
- Dialog内容布局合理

### T7: 集成API获取钥匙数据

**输入契约**：
- `KeyInfo.vue`组件
- 项目中的http.js
- API接口：`/api/warehouse_keys/GetPageData`

**输出契约**：
- 成功从API获取钥匙数据
- 正确处理和存储数据
- 错误处理机制

**实现约束**：
- 使用项目现有的http.js进行请求
- 处理API返回的数据格式
- 添加适当的加载状态

### T8: 集成API获取操作记录

**输入契约**：
- `KeyInfo.vue`组件
- 项目中的http.js
- API接口：`/api/warehouse_keylog/GetPageData`

**输出契约**：
- 成功从API获取钥匙操作记录
- 正确显示在Dialog中
- 错误处理机制

**实现约束**：
- 使用项目现有的http.js进行请求
- 动态传递KeyId参数
- 添加适当的加载状态

### T9: 更新路由配置

**输入契约**：
- `src/router/index.ts`文件
- `KeyInfo.vue`组件

**输出契约**：
- 在路由配置中添加KeyInfo组件的路由
- 设置正确的路径和参数

**实现约束**：
- 路由路径：`/index/key/info`
- 设置`meta.requiresAuth: true`

### T10: 更新Main.vue

**输入契约**：
- `src/view/Main.vue`文件
- 新增的KeyInfo组件
- 更新后的路由配置

**输出契约**：
- 在Main.vue中导入KeyInfo组件
- 在handleMenuSelect函数中添加对新路由的处理

**实现约束**：
- 导入路径正确
- 处理逻辑与其他组件保持一致