O2OA（翱途）开发平台 v9.5 前端框架设计｜开放 · 安全 · 可控 · 信创优选
在前端开发过程中，开发者可以使用各类技术实现通用件；在 O2OA 源码级支持服务 里，架构师将详细介绍前端框架设计思路，并协助开发者自定义前端业务组件。
关键词：信创适配、私有云/混合云、低/中代码、流程引擎、国产化数据库/中间件兼容、纯血鸿蒙支持、OnlyOffice/IM 生态。
一、为什么要先有“框架”，再谈“组件”
组件库解决“控件可复用”，框架聚焦“能力可复用”。从页面到系统，真正难的是：路由、状态、数据、权限、主题、可观测性与工程化的一致性。框架提供秩序，组件提供表达。当秩序稳固，通用件才能以更低成本持续演化并被二次定制。
二、v9.5 能力映射：从“更新项”到“框架点”
1. 表单组件与样式升级 → 统一 Tokens 与主题换肤；在组件层内置 addRelatedDisplay / addRelatedValue，实现“显示值/存储值分离”与“显示值默认保存”。
2. 组件权限 → 能力层内置字段级/按钮级权限（ABAC/RBAC），Schema 声明 visible/readOnly/disabled；支持租户与空间隔离。
3. 草稿模式可上传附件 → 运行时支持离线/弱网“暂存—重传—回放”，错误边界提供可恢复提示；适配 IM 与 OnlyOffice 附件场景。
4. 调整工作发起时间、优化流程启动接口 → 路由守卫与表单初始化阶段合并请求，首屏骨架 + 并发预取，缩短“启动→可交互”链路。
5. 表单/门户可引入 CSS/脚本库 → 内核托管第三方资产（白名单 + 子集化 + 版本锁），样式仅消费 Tokens，便于品牌换肤与信创浏览器适配。
6. 组件配置属性新增 → 坚持“扩展点优先”，通过 Props/Slots/Hooks/Plugins 四级扩展暴露，而非堆叠配置项。
7. 关联文档组件与数据发布优化 → 通用件内置组件联动、异步任务状态反馈；表格支持列点击排序、虚拟滚动、大数据量查询去抖与缓存失效策略。
8. 内容管理“是否索引”开关 → 前端提供可视化状态提示与搜索体验调整（标注“未被索引”的结果状态）。
9. O2OA 品牌化适配：信创浏览器与字体栈、国产化数据库/中间件兼容、国密算法支持、纯血鸿蒙端样式一致性、OnlyOffice/IM 风格统一与暗黑模式对齐。
三、通用件的“四级扩展机制”
以“数据表格”为例（表单、图表、看板同理）：
1. Props：分页、排序、列权限、选择模式、服务端/本地模式。
2. Slots / Render Props：单元格渲染、空态、行操作区、工具栏插槽。
3. Hooks：useTableQuery/cache/invalidate、useRowSelection、useColumnVisibility 等，用组合封装二次能力。
4. 插件机制：筛选器、导出（xlsx/csv/pdf）、行内编辑、图表联动等以插件注册/卸载注入生命周期（onInit/onBeforeQuery/onRender/onDestroy）。
原则：以扩展点替代堆配置，扩展点在源码中一等可见，配套文档与测试。
四、Schema/DSL 优先：让“界面—校验—权限—联动”可版本化
// 示意接口（TypeScript）
type FieldType = 'text' | 'select' | 'date' | 'number' | 'upload';
interface Field {
key: string;
type: FieldType;
label: string;
required?: boolean;
visibleWhen?: string; // e.g. role == 'admin' && country == 'CN'
readOnlyWhen?: string;
options?: Array<{ label: string; value: string }>;
displayKey?: string; // 与 v9.5 的“显示值默认保存”相呼应
valueKey?: string;
validators?: Array<{ rule: string; message: string }>;
}
interface Action {
key: string;
label: string;
confirm?: string;
when?: string;
effect: { type: 'api' | 'route' | 'emit'; payload?: any };
}
interface FormSchema {
id: string;
title: string;
fields: Field[];
actions: Action[];
i18n?: Record<string, string>;
}
收益：页面“配置化”与可回滚；与权限、国际化、审计天然契合；支撑模板/插件市场标准化。
五、权限体系：从路由到字段的全链路控制
1. 路由级：基于租户/空间与角色做前置守卫；未授权直接重定向。
2. 页面级：Schema 中 actions.when、visibleWhen 实现按钮级控制。
3. 字段级：字段 visible/readOnly/disabled 接入权限快照；敏感字段默认脱敏渲染。
4. 渲染一致性：权限变化通过事件总线触发局部重渲染，避免整页刷新。
六、数据访问：从“拉接口”到“资源编排”
1. BFF 适配器：前端只对 BFF（Backend for Frontend）交互，由 BFF 聚合领域服务，降低耦合。
2. 资源状态管理：统一封装请求、缓存、失效、重试、去重与乐观更新；关键写操作加请求指纹与版本冲突提示。
3. 离线与回放：草稿/排队/断点续传机制，配合草稿附件上传体验稳定可控。
七、性能与体验基线
1. 加载策略：路由代码分割、组件懒加载、资源预取（prefetch/preload）与骨架屏。
2. 首屏体验：并发获取 Schema/权限/字典，一次渲染减少往返；流程启动路径极简化。
3. 资产治理：图片压缩、字体子集化、图标合并，第三方依赖按需加载与 Tree-shaking。
4. 实时指标：LCP/CLS/INP/TTFB 采集与告警；发布前后基线对比。
八、工程化与发布：让改动可控、可回滚
1. Monorepo：通用件、能力层、应用层拆包；
2. 语义化版本与变更日志：自动生成、可追溯；
3. 测试金字塔：单测（逻辑/Hook）→ 组件测试（交互与可视差异） → E2E（核心场景）；
4. CI/CD：预览环境、蓝绿/灰度发布与特性开关；一键回滚与数据迁移回退策略。
九、微前端：按需启用的组织级选项
1. 适用：多团队并行、异构技术栈、独立生命周期、强隔离需求；
2. 不适用：单团队/同技术栈、强耦合业务；首选单体应用 + 模块联邦（Dynamic Module Federation）。
十、从 0 到 1 的落地路径
1. 识别跨项目 Top 场景（如“审批表单 + 列表 + 导出”）。
2. 能力×场景二维表，优先做 20% 能力覆盖 80% 场景。
3. 搭建最小内核（运行时/状态/路由/主题/BFF 适配）。
4. 确定 Design Tokens 与视觉规范，建立暗黑/品牌换肤机制。
5. 选 1 个场景做 Schema 试点（字段、联动、权限、显示值/存储值分离）。
6. 沉淀扩展点与插件机制，用真实需求校验抽象粒度。
7. 完善测试矩阵与 CI/CD，建立性能与错误学基线。
8. 市场化复用（模板/插件仓、版本管理、变更日志）。
十一、常见误区与修正
1. 误区：堆配置项代替扩展点 → 修正：定义插件生命周期与 Hook。
2. 误区：全局状态一锅炖 → 修正：资源状态与业务状态拆分，读写分离。
3. 误区：样式散落各处 → 修正：全部 Token 化，组件只消费 Tokens。
4. 误区：先完成所有页面 → 修正：用 1 个标杆场景驱动能力成形。
5. 误区：只看功能不看体验 → 修正：设立性能/可达性/错误学硬指标。
十二、结语：把“可复用”升级为“可演化”
O2OA v9.5 在“组件权限、表单/门户资产托管、显示值默认保存、草稿附件上传、数据中心交互效率”等方面，为前端内核补齐了关键拼图。通过 最小内核 + 能力层 + 业务层 + 工程化 的整体蓝图，配合 Schema 驱动与四级扩展机制，团队可以把“通用件”真正做成 可被业务自定义、可长期演化 的前端体系。