trade-assistant/docs/UX_DESIGN_V2.md

TradeMate 工作台极简改造设计方案 (V2)

版本: v1.0 | 创建日期: 2026-06-17 | 状态: 待审核

---

1. 现状分析与痛点评级

1.1 导航架构现状

当前 user-frontend 共 18 个路由：侧边栏 11 项、个人中心子菜单 5 项、独立页面 2 个。

侧边栏（11 项）:

路由	页面	图标	说明
/agent	AI数字员工	MagicStick	Agent Orchestrator 仪表盘
/discovery	发现客户	Search	Google 搜索+联系人提取
/workspace	工作台	Odometer	统计+快捷入口+活动
/customers	客户管理	User	CRUD
/products	产品库	Goods	CRUD
/quotations	报价单	DocumentCopy	CRUD + AI 智能报价
/translate	智能翻译	ChatLineSquare	翻译+回复+提取
/marketing	营销素材	Promotion	AI 文案生成
/followup	智能跟进	Message	沉默检测+建议
/analytics	数据分析	DataAnalysis	统计+图表
/team	团队协作	UserFilled	团队管理

个人中心子菜单（Dropdown → 5 项）: 购买次数 / 实名认证 / 发票管理 / 通知中心 / 意见反馈

1.2 核心问题

等级	问题	影响
🔴 P1	侧边栏 11 项过载	用户决策瘫痪，不知从何开始
🔴 P2	工作台仪表盘 8+ 模块堆砌	核心任务被淹没
🔴 P3	AI数字员工与 Discovery/Marketing/Followup 功能重叠	用户困惑该用哪个
🟡 P4	AiAssistant 浮动聊天与工作台脱节	需反复粘贴文字
🟡 P5	快捷翻译在 Workspace 和 Translate 重复	维护成本+体验不一致
🟢 P6	各页面无统一空状态引导	新用户不知所措

1.3 功能重叠分析

Agent.vue → 产品发现(重复Discovery) + 营销文案(重复Marketing) + 跟进分析(重复Followup)
Workspace.vue → 快捷翻译(重复Translate) + 跟进提醒(重复Followup)

---

2. 设计原则

2.1 AI-First，而非 Feature-First

AI 数字员工从"一个页面"升级为工作台核心入口。用户在 AI 输入栏发起任务，系统自动路由。特征功能（翻译、跟进、营销）后退为 AI 的工具箱。

2.2 任务驱动，而非页面驱动

统一输入栏取代分散表单。"帮我找美国市场做户外折叠椅的买家"→ 一步触发 Agent 完整工作流。

2.3 Progressive Disclosure（渐进展示）

首屏只展示：输入栏 + 核心 3 数据 + 下一步建议。卡片默认收起，展开才显示详情。

2.4 零认知摩擦

导航不超过 5 项。次级入口通过"更多"折叠。操作提示用自然语言。

2.5 嵌入式 AI，而非分离式 Chat

翻译中 AI 自动感知文本。客户详情中 AI 生成跟进话术。报价单中 AI 分析询盘。

---

3. 改造目标

指标	当前	目标
侧边栏项数	11	≤ 5
首屏模块数	8+	≤ 5
新用户首步完成	自行探索	≤ 3 秒
冗余页面	3 处	0 处

改造范围

• Scope A (必做): 导航 11→5 + Profile 侧边栏化
• Scope B (必做): Agent 升级为工作台首页 + 统一输入栏
• Scope C (推荐): Discovery/Marketing/Followup → Agent 工作流
• Scope D (推荐): 各页面 AI 嵌入 + 空状态引导

---

4. 导航架构重构

4.1 新侧边栏设计

图标	名称	说明
🏠	首页工作台	Agent + 仪表盘合二为一
👥	客户管理	保持不变
📄	报价产品	Products + Quotations 合并导航
🌐	智能翻译	保持不变
☰	更多	Analytics / Team / 个人设置

要点:

• AI数字员工 + 工作台 → 首页工作台（Agent.vue 改造为新首页）
• 发现客户 + 营销素材 + 智能跟进 → 嵌入 Agent 工作流，不再独立导航
• 产品库 + 报价单 → 合并为"报价产品"
• Discovery/Marketing/Followup 保留路由但不在导航显示（向后兼容）

4.2 新路由架构

/workspace/
  ├── (空) → NewHome.vue（原 Agent.vue 改造）
  ├── customers → 客户管理
  ├── products → 产品库
  ├── quotations → 报价单
  ├── translate → 智能翻译
  ├── analytics → 数据分析
  ├── team → 团队协作
  └── profile → 个人中心（含所有子页面侧边栏）

---

5. 新仪表盘设计

5.1 页面布局

┌── AI 输入栏 ──────────────────────────────────────────┐
│ [💡 描述你的需求，AI 会帮你完成...                       ] │
│ 快捷: [🔍 找客户] [📝 写文案] [💬 翻译] [📋 报价]       │
└─────────────────────────────────────────────────────────┘

┌── 今日核心 ──────────────────────────────────────────┐
│  待跟进: 5   新客户: 3   今日翻译: 12                  │
└─────────────────────────────────────────────────────────┘

┌── 最近活动 ──────────────────────────────────────────┐
│ [Agent] 为 户外折叠椅 找到 15 个美国潜在买家            │
│ [Agent] 已发送 3 封跟进邮件给墨西哥客户                 │
│ [翻译]  翻译了 2 段 WhatsApp 消息                      │
│ [系统]  客户 Carlos 已沉默 5 天                        │
└─────────────────────────────────────────────────────────┘

┌── 快捷入口 ──────────────────────────────────────────┐
│ [👥 客户管理] [📄 报价产品] [🌐 翻译] [📊 分析]       │
└─────────────────────────────────────────────────────────┘

5.2 AI 输入栏（核心交互）

• 进入工作台自动聚焦，Cmd+K/Ctrl+K 随时唤起
• 自然语言指令自动识别意图：
  • "帮我找美国市场做户外折叠椅的买家" → Agent Pipeline
  • "给上周报价的墨西哥客户写一封跟进邮件" → Agent 跟进
  • "翻译这段文本：..." → 翻译工具
  • "展示上个月的客户情况分析" → 分析页
• 输入历史可回溯，支持追问

5.3 组件化设计

NewHome.vue
├── AiInputBar.vue          # AI 统一输入栏
│   ├── QuickTasks.vue      # 快捷任务按钮
│   └── IntentDetector.js   # 意图识别
├── CoreStats.vue           # 今日核心
├── ActivityFeed.vue        # 最近活动
│   ├── ActivityItem.vue
│   └── ActivityEmpty.vue
└── QuickAccess.vue         # 快捷入口

---

6. 页面级改造

页面	现状	改造
Translate.vue	三段式需手动切换	AI 自动识别语言 + "一键回复"联动 Agent
Customers.vue	标准 CRUD	AI 批量操作 + "建议动作"列
Products+Quotations	独立	"产品→报价"一键流转 + AI 自动填充
Analytics.vue	静态统计	AI 分析摘要 + 交互图表 + 趋势线
Agent.vue	独立仪表盘	升级为 NewHome.vue (首页)

---

7. 要素合并

现状	改造后
AiAssistant 浮动气泡	Agent 对话模式，可执行操作+感知上下文
Discovery 独立页	Agent Pipeline 步骤（自动搜索→分析→评分）
Marketing 独立页	Agent 生成能力，自动读取产品库
Followup 独立页	Agent 后台任务，活动流确认即可

---

8. 迁移计划

阶段一：导航精简 + Agent 首页化（2-3 天）

1. 侧边栏 11 → 5 项
2. Agent.vue 迁移到 /workspace
3. Workspace.vue 内容并入
4. Profile 侧边栏子菜单

涉及: UserLayout.vue, router/index.js, Agent.vue, Workspace.vue, Profile.vue

阶段二：AI 输入栏 + 活动流（2-3 天）

1. AiInputBar 组件（意图识别复用 Agent 逻辑）
2. QuickTasks 快捷按钮
3. ActivityFeed 活动流
4. 整合 NewHome.vue

涉及: NewHome.vue, AiInputBar.vue, ActivityFeed.vue, CoreStats.vue, QuickTasks.vue

阶段三：页面 AI 嵌入（3-4 天）

1. Translate.vue 增强
2. Customers.vue AI 操作
3. Products/Quotations AI 联动
4. Analytics.vue AI 摘要

阶段四：功能合并收尾（2-3 天）

1. AiAssistant → Agent 对话模式
2. 保留隐藏路由但移除导航入口
3. 全局空状态引导
4. 移动端适配

工时汇总

阶段	工时	可单独上线
一：导航精简	2-3 天	✅ 是
二：AI 输入栏	2-3 天	✅ 是
三：页面 AI 嵌入	3-4 天	❌ 建议与前序合并
四：功能合并	2-3 天	✅ 是
合计	9-13 天

---

附录：参考案例

产品	参考点
ChatGPT	统一输入 → 意图识别 → 结果展示
Perplexity	输入即搜索，结果结构化
Cursor	AI 嵌入编辑器，inline 操作
Notion AI	自然语言 + 结构化输出
外贸 SaaS 案例	AI 出现在需要时刻，不单独跳转