Agent 详情页 — 运维监控与配置管理

设计原则

• 一站式运维：在智能体详情页集中展示基础信息、运行时状态、监控指标
• 图表驱动：关键指标用 ECharts 折线图可视化趋势
• Stub 数据先行：前端 UI 全部就绪，后端真实 k8s 集成后续接入

页面结构

路由

• 列表页入口：/agents/index
• 详情页：/agents/detail/:id（showLink: false，不出现在侧边栏）
• 列表页卡片任意位置点击 → 跳转详情页

头部卡片

区域	内容
左侧	头像（引擎 Logo + 自定义颜色）、名称、状态 Tag、描述
信息行	引擎类型、模型、访问范围、创建者、更新时间（标签行展示）
右侧	「编辑」按钮 + 三点图标下拉菜单（发布/下架/删除）

5 个 Tab

1. 概览 (Overview)

• 4 个统计卡片：对话总数（ReNormalCountTo 动画）、Token 用量、活跃用户、运行实例
• 对话趋势图表：最近 7 天对话量折线图（ECharts Line + 渐变面积）
• 基础信息（引擎/模型/访问范围等）已上移到头部卡片

2. 实例 (Instances)

• Pod 状态摘要：运行中 / 停止 / 异常 三色统计卡片
• Pod 表格（pure-table）：名称、状态（彩色标签+圆点）、节点、CPU、内存、重启次数、运行时间、操作（日志入口，待实现）
• 数据来源：api/manager/agent-instances.ts（暂用 stub）

3. 监控 (Monitor)

• 时间范围切换：1小时 / 6小时 / 24小时 / 7天（ReSegmented 组件）
• 4 个指标图表（2×2 网格）：
  • CPU 使用率趋势（Line Chart）
  • 内存使用趋势（Line Chart）
  • 请求次数趋势（Line Chart）
  • Token 用量（双系列 Line Chart：输入/输出）
• 数据来源：api/manager/agent-monitor.ts（暂用 stub，每 5 分钟一个数据点）

4. 记忆 (Memory)

• 统计概览：总记忆数 / 长期记忆 / 会话记忆 / 手动标记（数字卡片）
• 工具栏（创建在左，检索在右）：
  • 左：「新建记忆」按钮（useRenderIcon(AddFill)）+ 批量删除按钮
  • 右：类型筛选 + 来源筛选 + 搜索框（suffix 搜索图标）
• 表格（el-table）：多选列 + 记忆内容（可点击展开/收起）+ 类型 Tag + 来源 + 创建时间 + 更新时间 + 操作（编辑/删除）
• 分页：每页 10 条，切换条目数
• CRUD 弹窗：addDialog + footerButtons + closeDialog API 关闭
• 数据来源：api/manager/agent-memory.ts（暂用 stub，12 条测试数据）

5. 技能 (Skills)

• 搜索：按名称/描述实时过滤（后缀搜索图标）
• 技能卡片网格（el-row/el-col 响应式）：
  • 卡片内：图标（~icons/ri/ 导入组件）+ 名称 + 描述 + 版本 + 作者 + 开关
  • 点击卡片 → 详情抽屉（el-drawer）
• 详情抽屉：技能基本信息 + 使用统计 + 兼容引擎 + 配置参数编辑（string/number/boolean/select 类型）+ 卸载 + 保存
• 安装技能：
  • 末尾虚线卡片（+ 图标），支持两种安装方式
  • 从本地上传：选 zip → 上传解析 → 预览弹窗（manifest + 参数 + 安全扫描） → 确认安装
  • 从技能市场安装：弹窗展示可用技能列表 → 一键安装
  • 市场数据源：api/manager/agent-skills.ts（getMarketplaceSkillsApi，暂用 3 个 stub）
• 分页：每页 8 条
• 遵循 Claude Code Skill 规范格式（skill.yaml manifest）
• 数据来源：api/manager/agent-skills.ts

后端 API 服务层

所有 API 文件位于 apps/admin/src/api/manager/：

文件	端点	说明
agent-instances.ts	GET /api/agents/{id}/instances	Pod 列表 + 状态汇总
agent-monitor.ts	GET /api/agents/{id}/metrics?range=	CPU/内存/请求/Token 指标
agent-memory.ts	CRUD /api/agents/{id}/memories	记忆条目管理
agent-skills.ts	CRUD + install + marketplace + order	技能绑定与安装
agent-overview.ts	GET /api/agents/{id}/overview	概览统计数据

关键代码规范

1. 图标渲染：在 <script setup> 中从 ~icons/ri/ 导入组件，不传字符串给 IconifyIconOffline
2. ECharts 配置：lineChartOptions 函数返回 any 避免类型冲突，setOptions 调用使用 as any 变量
3. 筛选器 + 搜索：筛选框在前、搜索框在后；搜索框统一 width: 260px + #suffix 搜索图标
4. 按钮布局：创建/Action 按钮在左，筛选/搜索在右（w-full flex flex-wrap items-center justify-between mb-4 gap-3）
5. 对话框关闭：使用 addDialog + footerButtons + closeDialog(d.options, d.index) 方式

后续计划

阶段	内容
Phase 2	PodManager 接入真实 k8s Python Client，metrics-server 提供 CPU/内存
Phase 3	集成 Prometheus 获取历史趋势数据，完善实时监控能力
Phase 4	技能市场后端管理后台、技能审核流程