# 前端技术栈演进分析

**日期**：2026-07-07
**参与**：宋献

---

## 背景

讨论员工端（H5）是否需要区分桌面端/移动端架构，主要驱动力：
1. 现有截图能力（html2canvas）效果不满意
2. 后续可能有远程桌面、语音视频需求
3. 期望达到微信/QQ 类似的截图体验

---

## 现状分析

### 当前技术栈

| 端 | 技术栈 | UI框架 |
|---|---|---|
| 员工端（H5） | Vue3 + Vant4 | 移动端组件 |
| 坐席端 | Vue3 + Element Plus | 桌面端组件 |
| 管理后台 | Vue3 + Element Plus + Tailwind | 桌面端组件 |

### H5 能力边界

| 需求 | H5 能否满足 | 说明 |
|---|---|---|
| 截取任意屏幕 | ❌ 不能 | html2canvas 只能截 DOM |
| 截图编辑 | ⚠️ 效果差 | Fabric.js 重且性能一般 |
| 远程桌面 | ❌ 不能 | 需要原生能力 |
| 语音/视频 | ⚠️ 勉强 | WebRTC 可做但体验一般 |

---

## 决策结论

### 截图能力差异化管理

| 端 | 截图方案 | 理由 |
|---|---|---|
| 员工端（移动） | 调研企微 JSBridge 或 Tauri | 需要原生截图能力 |
| 员工端（桌面） | Tauri 桌面端 | 截图+远程桌面需求 |
| 坐席端 | 本地安装 Snipaste | 人少，可统一安装培训 |

### 推荐架构演进

```
┌─────────────────────────────────────────────────┐
│                   IT智能服务台                      │
├─────────────┬─────────────┬─────────────────────┤
│   员工移动端   │   员工桌面端   │      坐席端         │
│  (H5/Vant)  │  (Tauri)   │  (Web/Element+)    │
├─────────────┴─────────────┴─────────────────────┤
│                   后端 API (FastAPI)             │
└─────────────────────────────────────────────────┘
```

### 技术选型

| 组件 | 技术 | 理由 |
|---|---|---|
| 员工桌面端 | **Tauri** + Vant | 轻量（~10MB）、原生截图/远程桌面能力 |
| 坐席端截图 | Snipaste | 免费/付费、体验好 |

---

## 下一步行动

| 优先级 | 动作 | 状态 |
|---|---|---|
| 🔴 高 | 调研企微 JSBridge 截图 API | 待执行 |
| 🔴 高 | Tauri 桌面端原型开发（若企微不支持） | 待评估 |
| ✅ | 坐席端统一安装 Snipaste | 已确认方案 |

---

## 待调研问题

### 给企微管理员的调研提纲

```
1. 屏幕截图 API
   - 是否有类似 wx.captureScreen 或 wx.getScreenCapture 的 JSAPI？
   - 是否支持截取用户任意屏幕/窗口？

2. 图片保存到相册
   - 是否有 wx.saveImageToPhotosAlbum 接口？

3. 企业微信版本要求
   - 以上 API 需要企微哪个版本以上才支持？

4. 权限配置
   - 调用这些 API 是否需要配置应用可见范围或特殊权限？
```

---

## 附录：Tauri vs Electron 对比

| 对比项 | Tauri | Electron |
|---|---|---|
| 包大小 | ~10MB | ~150MB |
| 内存占用 | 低 | 高 |
| 启动速度 | 快 | 慢 |
| 截图能力 | ✅ 天然支持 | ✅ 支持 |
| 技术栈 | Rust + WebView | Node.js + Chromium |