alai-dev/trade-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add workspace UX redesign plan

Browse Source 
Comprehensive UX design document covering: current state analysis, design principles (minimal/functional/AI-first), navigation restructuring plan, new dashboard design, page-level AI enhancements, and phased migration strategy.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
wlt
2026-06-17 10:48:30 +08:00
parent caa484f651
commit 5e1aa95969
1 changed files with 265 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/UX_DESIGN_V2.md
+265
View File
@@ -0,0 +1,265 @@
# 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 出现在需要时刻，不单独跳转 |