Simon
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 |
|