No React. No Vue. No Angular. Pure custom elements that embed in any host — the portal, the designer, or a plain HTML page. Built for metadata-driven document and dictionary workspaces. 不依赖 React、Vue 或 Angular。纯自定义元素,可嵌入任意宿主——门户、设计器或普通 HTML 页面。专为元数据驱动的单据与字典工作台而生。
Every element registers with customElements.define() and works with a <script> tag. No build step required to consume them.
每个元素均通过 customElements.define() 注册,一个 <script> 标签即可使用,无需构建步骤。
CmxMasterSlave orchestrates any combination of grids, forms, trees, and tabs over a shared CmxDataSet — selection, load, save, changeset all handled centrally.
CmxMasterSlave 协调任意组合的表格、表单、树和标签页——基于共享 CmxDataSet,选中、装载、回存、变更集集中处理。
CmxColumnModel drives grid columns, form fields, and filter bars from one definition. Change the model; every consumer follows.
CmxColumnModel 用同一份定义驱动表格列、表单字段和过滤栏。修改模型,所有消费者自动跟随。
High-performance virtual grids (RevoGrid, Tabulator, Ignite), spreadsheet engines for report design, and a built-in pager — all bound via CmxDataSet.
高性能虚拟表格(RevoGrid、Tabulator、Ignite)、报表设计电子表格引擎,以及内置分页器——均通过 CmxDataSet 绑定。
A complete form layer — text, number, date, combo, and filter inputs — driven by CmxColumnModel field definitions with inline validation.
完整表单层——文本、数字、日期、组合框和过滤输入——由 CmxColumnModel 字段定义驱动,支持行内校验。
Dictionary selector with tree-search, hierarchical tree view, description list for doc detail panels, embedded page frame, and Ignite list integration. 带树形检索的字典选择器、层级树视图、单据详情面板描述列表、嵌入式页面框架及 Ignite 列表集成。
cmx-fx-editor — a full formula bar with function wizard, syntax highlighting (CodeMirror), and live validation. cmx-master-slave-config provides visual configuration of master-slave layouts. Ignite gauge for KPI dials.
cmx-fx-editor——完整公式栏,含函数向导、语法高亮(CodeMirror)与实时校验。cmx-master-slave-config 提供主从布局可视化配置。Ignite gauge 用于 KPI 仪表盘。
Resizable split panes, collapsible panels, tab groups, a configurable toolbar, draggable floating dialogs, and a composable empty-state slot — the skeleton of any four-zone workspace. 可拖拽分割面板、折叠面板、标签组、可配置工具栏、可拖拽浮动对话框和可组合空状态插槽——任意四区工作台的骨架。
Metric cards with trend indicators and configurable number formatting. Semantic status badges for document and workflow states — approved, pending, rejected — with accessible contrast. 带趋势指示和可配置数字格式的指标卡片。单据与流程状态的语义状态徽章——已审批、待处理、已拒绝——并符合无障碍对比度要求。
The src/lib/ directory holds the pure-JS coordination layer — no DOM, no custom elements, consumable from any context.
src/lib/ 目录存放纯 JS 协调层——无 DOM、无自定义元素,可在任意上下文中使用。
CmxMasterSlaveCmxDataSetCmxColumnModelCmxMetaModelCmxColumnModel instances and page-model bindings with zero bespoke code per document type.
运行时元数据解析器。将服务端发来的定义 JSON(DOC、DCT、FLC、RPT)转换为 CmxColumnModel 实例和页面模型绑定,每种单据类型均无需专属代码。
CmxDictCache / CmxDictDataSourcecmx-dict-select and dictionary field types with automatic invalidation.
客户端字典缓存与数据源适配器。向 cmx-dict-select 和字典字段类型提供选项列表,并自动失效。
Import a component引入组件
// registers <cmx-revo-grid>
import 'cmx-data-comp/components/cmx-revo-grid.js'
// use the coordination layer
import { CmxMasterSlave } from
'cmx-data-comp/lib/cmx-master-slave.js'
Run the tests运行测试
npm test -w cmx-data-comp
# ~616 Vitest unit tests
# covers: DataSet, ColumnModel,
# MasterSlave, MetaModel, FieldSchema…
Three engines — TypeScript front-end, Rust headless back-end, and a headless-Excel CLI/HTTP shell. 三引擎——TypeScript 前端、Rust 无头后端,以及无头 Excel CLI/HTTP 壳。