110 lines
3.3 KiB
Markdown
110 lines
3.3 KiB
Markdown
|
# 前端技术栈演进分析
|
|||
|
|
|
|||
|
|
**日期**：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 |
|