O2OA（翱途）开发平台前端技术栈白皮书
在企业数字化的深水区里，稳定、可扩展、可迁移 才是长期主义。O2OA （翱途）的前端技术栈坚持「存量稳、增量快」——在延续 MooTools + 自研 MWF Ajax 的成熟能力上，全面拥抱 Vue/WebComponents 等现代框架：既兼容历史，又能够以更快速度构建新能力，覆盖 PC + H5 + 小程序 + APP + 企业微信/钉钉容器 的多端场景。
总览
1.基础与多端：MooTools | WebComponents｜Vue ｜React｜自研 MWF Ajax | 钉钉 | 企业微信 | 自研APP
2.编辑与内容：CKEditor｜TinyMCE｜KityMinder｜ACE｜CodeMirror｜VS(Monaco) | 手写
3.可视化：ECharts｜D3｜Canvas | SVG
4.文档与文件：pdf｜ofd｜officecontrol（NTKO）｜永中｜onlyoffice | OfficeOnline | WPSOffice | 自研公文编辑器
5.安全与协议：OAuth2（SSO）｜鉴权｜密码加密传输
6.生态对接：Dingtalk（钉钉 API） | 企业微信
7.API支持：前端API
一、我们的优势
1.全场景覆盖：工作流、门户、知识库、公文、移动审批，一套栈打通。
2.低成本二开：组件化开发 + 低代码，所见即所得。
3.办公原生：版式公文、OFD/PDF/Office 在线编辑，满足政企刚需。
4.安全合规：OAuth2 SSO、前端加解密、内容安全白名单全链路兜底。
5.易于迁移：存量模块继续稳定运行，新增模块优先 WebComponents/Vue 以提升交付效率。
二、分层架构与角色定位
1. 框架与基础层
MooTools | WebComponents｜Vue ｜React｜自研 MWF Ajax
1）存量（MooTools + MWF Ajax）：支撑流程/表单编辑器等核心能力
2）增量（ WebComponents/Vue）：新门户、新业务模块、多端统一
2. 编辑与内容层
CKEditor｜TinyMCE｜KityMinder｜ACE/CodeMirror/VS(Monaco)
富文本（公告/知识库）｜脑图（方案呈现）｜代码编辑（表单脚本/配置 DSL）
3. 可视化与导出层
ECharts｜AntV｜D3｜Canvg｜html2canvas
报表/仪表盘｜流程图/关系图｜截图与 SVG→PNG 导出
4. 文档与文件层
pdf｜ofd｜officecontrol（NTKO）｜永中｜onlyoffice | OfficeOnline | WPSOffice | 自研公文编辑器
PDF/OFD/Office 在线预览与编辑，Excel 导入导出，图片预览
5. 安全与协议层
OAuth2（SSO）｜CryptoJS｜jsencrypt
单点登录、前端加密与签名，保障端到端安全
6. 生态与开放层
Dingtalk（钉钉 API） | 企业微信：登录、消息、待办与微应用集成
三、技术清单（开源/自研/标准/开放接口）
1.（开源）MooTools：历史主框架（需掌握二开）；与 MWF Ajax 协同
2.（开源）WebCompontents：是一套浏览器原生支持的组件化技术标准，可重用的自定义 HTML 元素（源码级开发需掌握）
3.（开源）CKEditor / TinyMCE：富文本/HTML 编辑器（源码级开发需掌握）
4.（开源）Decimal：高精度数学计算（源码级需掌握）
5.（开源）KityMinder：脑图编辑
6.（开源）D3：数据可视化底层
7.（开源）Canvg：SVG→PNG 导出
8.（自研）MWF Ajax：流程/表单编辑核心前端框架
9.（自研）版式公文在线编辑组件：政企级公文版式、套红与签批
10.（标准规范）OAuth2：SSO 单点登录
11.（开放接口）Dingtalk：钉钉接入 API
12.（开源）ACE / CodeMirror / VS：在线代码编辑器
13.（开源）AntV / ECharts：可视化图表
14.（开源）CryptoJS / jsencrypt：前端加密与签名
15.（开源）eruda：移动端调试面板（仅测试环境）
16.（开源）exceljs：Excel 处理
17.（开源）html2canvas：DOM→Canvas 截图
18.（开源）IntersectionObserver / lozad：懒加载
19.（开源）JSBeautifier：JS 美化
20.（开源）jzip：ZIP 读写
21.（开源）marked：Markdown→HTML
22.（开源）ofdjs：OFD 版式渲染
23.（开源）officecontrol（NTKO）：Office 在线编辑
24.（开源）pdfjs：HTML PDF 阅读器
25.（开源）rrule：日历重复规则
26.（开源）uni-app：基于 Vue 的多端框架
27.（开源）viewer：图片浏览
28.（开源）vue（含 ElementUI 源码）：现代前端框架
29.（开源）xml(wgxpath)：XML XPath 查询
四、典型业务场景与推荐组合
1. 知识与公告中心：CKEditor/TinyMCE + marked + pdfjs + viewer
2. 数据驾驶舱：ECharts/AntV + Excel 导入（exceljs） + 懒加载（IntersectionObserver/lozad）
3. 公文与签批：版式公文组件 + ofdjs/pdfjs + diff-match-patch + officecontrol（NTKO）
4. 流程表单设计：自研 MWF Ajax + MooTools（存量）/ Vue（增量）
五、安全与合规（端到端）
1. SSO：OAuth2 授权码 + PKCE；重定向白名单与 Token 轮换
2. 前端加密：RSA (jsencrypt) + AES (CryptoJS) 混合方案，敏感字段端侧加密、服务端验签
3. 内容安全：富文本/Markdown 启用 XSS 白名单；CSP 与 SRI 校验；沙箱化渲染 PDF/OFD
六、性能与体验（实战清单）
1. 按需与懒加载：图表/编辑器类库分拆，首屏骨架屏
2. Web Worker：exceljs/jzip/diff 等重计算迁移至 Worker
3. 列表优化：IntersectionObserver 触发渲染 + 虚拟滚动
4. 监控指标：FCP/LCP/CLS 与异常日志全埋点
七、多端一致与容器兼容
1. 自研APP：原生开发/H5/小程序/APP 一套代码多端发布
2. 企业微信： H5 能力（分享、定位、扫码等）统一封装
3. 钉钉容器：登录与消息对接，微应用一致体验
八、版本兼容与迁移路径
1. 存量模块继续使用 MooTools + MWF Ajax，保证业务稳定
2. 新模块优先 WebComponents/Vue；通过 组件化封装/桥接层 与旧栈解耦
3. 逐步沉淀通用 UI 组件与图表封装，形成企业可复用资产
九、FAQ（客户常见问题）
Q1：为什么还保留 MooTools？
A：大量流程/表单能力稳定可靠，迁移成本和风险较高；我们通过新老栈并存与桥接，保障“不断档升级”。
Q2：ECharts 与 D3 如何选择？
A：常规报表选 ECharts；极度定制选 D3。
Q3：公文处理与在线编辑能满足政企要求吗？
A：提供 版式公文、OFD/PDF/Office 在线编辑/预览与签批能力，并配合权限、审计与留痕满足合规。
Q4：安全方面有哪些保障？
A：OAuth2 SSO、端侧加密、CSP/SRI、沙箱渲染、全链路审计，满足企业级安全要求。
十、Demo 建议
1. 知识库富文本：CKEditor + 标准 XSS 白名单过滤
2. 驾驶舱图表：ECharts/D3 两种风格切换
3. 公文版式：模板套红 + 签批流转演示
联系与行动（CTA）
1. 预约线上演示：添加企业顾问，获取专属行业模板与集成清单
2. 试用环境开通：提供标准与定制化两种体验路径
3. 生态合作：欢迎插件作者/集成商加入 O2OA 生态计划
「让复杂流程，回归高效与可控。」O2OA 将与您一起把办公系统升级为企业数字化生产力平台。
浙公网安备 33010602011771号