wecom_it_smart_desk/docs/02-需求分析/技术架构演进/前端技术栈演进分析-20260707.md

前端技术栈演进分析

日期：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