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 出现在需要时刻，不单独跳转 |