项目 07 前端设计稿：AI 产品运营中台

1. 产品气质

这是作品集的最终项目，要像一个真实 B 端 AI 平台。视觉不追求花哨，而追求结构完整、数据清晰、功能可信。

关键词：

• AI Ops
• 多模块中台
• 配置发布
• 成本监控
• 反馈闭环
• 审计安全

2. 整体布局

┌────────────────────────────────────────────────────────────┐
│ Topbar: Workspace, Search, Notifications, User             │
├──────────────┬─────────────────────────────────────────────┤
│ Sidebar      │ Main Content                                │
│ Overview     │ Page Header                                 │
│ Prompts      │ Metrics / Tables / Workflows                │
│ Knowledge    │                                             │
│ Agents       │                                             │
│ Feedback     │                                             │
│ Cost         │                                             │
│ Releases     │                                             │
│ Audit        │                                             │
└──────────────┴─────────────────────────────────────────────┘

3. Overview 页面

指标卡：

• 今日 AI 请求数。
• 平均响应时间。
• 今日成本。
• 失败率。
• 待审批 Agent 任务。
• 负反馈数量。

图表：

• 近 7 日请求趋势。
• 模型成本占比。
• 模块使用分布。

列表：

• 最新失败运行。
• 最新用户反馈。
• 最近发布记录。

4. Prompt Center 页面

布局：

• 左侧 Prompt 列表。
• 中间版本详情。
• 右侧测试运行面板。

功能：

• 创建版本。
• 设置变量。
• 运行测试。
• 对比两个版本。
• 标记生产版本。

5. Knowledge Center 页面

页面：

• 知识库列表。
• 文档索引状态。
• 检索调试。
• 引用质量反馈。

设计重点：

• 索引状态要醒目。
• 错误要可恢复。
• 检索结果要透明。

6. Agent Center 页面

页面：

• 工作流模板。
• 运行历史。
• 审批队列。
• 节点性能统计。

运行详情：

• Graph。
• Timeline。
• State Inspector。
• Tool Calls。
• Cost Summary。

7. Feedback Center 页面

表格列：

• 时间。
• 用户。
• 模块。
• 问题类型。
• 反馈内容。
• 处理状态。
• 负责人。

反馈详情：

• 原始问题。
• AI 回答。
• 引用来源。
• 用户反馈。
• 修复建议。

8. Cost Center 页面

指标：

• 总 token。
• 总成本。
• 平均单次成本。
• 预算使用率。

维度：

• 按模型。
• 按模块。
• 按用户。
• 按项目。

预算告警：

• 70% 提醒。
• 90% 警告。
• 100% 限制。

9. Release Center 页面

发布对象：

• Prompt 版本。
• RAG 检索配置。
• Agent 工作流版本。
• 模型路由配置。

发布流程：

Draft -> Review -> Canary -> Production -> Rollback

每个发布卡片展示：

• 版本。
• 变更说明。
• 发布人。
• 发布时间。
• 当前状态。
• 回滚按钮。

10. 响应式策略

• 桌面优先，适合 B 端后台。
• 1366px 下保持侧栏和主内容。
• 1024px 下侧栏可折叠。
• 移动端以查看为主，不强求完整配置操作。

11. 组件复用建议

复用前面项目组件：

• PromptEditor 来自项目 01。
• AI 专用组件来自项目 02。
• Task/Activity 组件来自项目 03。
• CitationPanel 来自项目 04。
• AgentTimeline 来自项目 05。
• AuditTable 来自项目 06。

12. 实现提示

• 路由按模块拆分。
• 所有列表页统一筛选、分页、空状态。
• 所有 AI 操作统一展示成本和耗时。
• 所有危险操作进入确认弹窗。
• 作品集截图重点截 Overview、Agent Run、RAG Answer、Cost Center。