# 实现智能体设备管理功能

## 1. 修改智能体卡片

* 在 `AgentManagement.vue` 中，为每个智能体卡片添加设备数量展示

* 根据 `device_count` 字段是否大于零，条件显示已绑设备数量

* 添加点击设备数量跳转到设备列表页面的功能

## 2. 创建设备列表页面

* 新建 `DeviceList.vue` 页面，用于展示与智能体绑定的设备列表

* 使用模拟数据填充设备列表

* 支持从 URL 参数中获取智能体 ID

* 添加设备列表的基本样式和交互

## 3. 更新路由配置

* 在 `router/index.js` 中添加设备列表页面的路由

* 路由路径为 `/device-list/:agentId`，支持带参数访问

## 4. 添加国际化支持

* 在 `locales/index.js` 中添加设备列表相关的中英文翻译

## 5. 实现跳转逻辑

* 在 `AgentManagement.vue` 中添加跳转到设备列表页面的方法

* 确保跳转时携带正确的智能体 ID 参数

## 6. 测试与优化

* 测试智能体卡片的设备数量展示

* 测试点击设备数量跳转功能

* 测试设备列表页面的模拟数据展示

* 确保多端适配和响应式设计

## 实现步骤

1. 首先修改 `AgentManagement.vue` 中的智能体卡片组件
2. 创建新的 `DeviceList.vue` 页面
3. 更新路由配置
4. 添加国际化支持
5. 测试功能完整性

## 技术要点

* 使用 Vue3 Composition API

* 响应式设计，支持移动端、桌面端和平板端

* 国际化支持中英文切换

* 使用 Element Plus 组件库

* 模拟数据展示