项目 06 前端设计稿：企业 AI 助手控制台

1. 产品气质

企业内部系统要克制、稳定、可审计。界面要强调数据可信和操作边界，而不是过度“AI 炫技”。

关键词：

• 企业控制台
• 数据表格
• 客户详情
• AI 助手侧栏
• 审计追踪

2. 页面结构

Sidebar
  Customers
  AI Assistant
  Risk Center
  Audit Logs
  Settings

Main
  Customer List / Customer Detail / Audit Logs

Right Panel
  AI Copilot

3. 客户列表页

顶部筛选：

• 关键词。
• 客户等级。
• 客户状态。
• 负责人。
• 风险标签。

表格列：

• 客户名称。
• 等级。
• 状态。
• 最近沟通。
• 负责人。
• AI 风险。
• 操作。

AI 风险标签：

• Low：绿色。
• Medium：黄色。
• High：红色。
• Unknown：灰色。

4. 客户详情页

布局：

┌──────────────────────────────┬──────────────────────┐
│ Customer Profile             │ AI Copilot            │
│ Orders Summary               │ Ask about customer    │
│ Communication Timeline       │ Suggested follow-up   │
│ Risk Reasons                 │ Tool call history     │
└──────────────────────────────┴──────────────────────┘

主要区块：

• 基础资料卡。
• 订单摘要。
• 沟通时间线。
• AI 总结卡。
• 风险原因卡。

5. AI Copilot 侧栏

状态：

• 未选择客户：提示先选择客户。
• 已选择客户：显示客户上下文摘要。
• 生成中：显示工具调用过程。
• 生成成功：显示建议和应用按钮。
• 无权限：显示权限提示。

工具调用展示：

• getCustomerProfile
• getRecentOrders
• getCommunicationHistory
• generateFollowUp

6. 审计日志页

表格列：

• 时间。
• 操作人。
• 客户。
• AI 操作类型。
• 工具调用。
• 结果。
• IP 或客户端。

详情抽屉：

• 输入上下文。
• AI 输出。
• 操作结果。
• 审批记录。

7. 交互细节

• 高风险客户详情页顶部显示警告条。
• AI 生成的跟进话术必须先预览，用户确认后才能复制或写入系统。
• 无权限字段显示脱敏值，例如 138****0000。
• 审计日志不可编辑，只能查看。

8. 响应式设计

• 桌面：详情页双栏。
• 平板：AI Copilot 变右侧抽屉。
• 移动：客户详情和 AI 助手分成 Tab。

9. 实现提示

• 表格筛选条件同步到 URL query。
• 客户详情使用并行请求加载多个区块。
• AI Copilot 和客户详情解耦，通过 customerId 获取上下文。
• 权限信息由后端返回，前端只做展示和交互限制。