跳到主要内容

rxdb-model

框架无关的 RxDB 实体模型核心库:从实体元数据(EntityMetadata)派生表单、详情页、可编辑表格与可视化查询构建器所需的全部纯逻辑,并配套 VTable 表格运行时基础设施。

定位与边界​

  • 唯一输入源:@aiao/rxdb 的实体装饰器体系产出的 EntityMetadata。
  • 框架无关:本包不含任何 Angular / React / Vue 依赖,可被任意前端技术栈消费;三框架 UI 组件层见 @aiao/rxdb-model-angular(React / Vue 版本陆续提供)。
  • 与 @aiao/rxdb 的边界:核心包的 entity-field.utils(Field Descriptor 字段语义元数据)与 entity-value.utils(parseEntityFieldValue/formatEntityFieldValue/validateFieldValue 等)服务于核心内部与插件契约;本包的同名模块面向「实体管理界面」场景(表单字段提取、字段值解析/格式化/校验、表格列构建),语义不同、请勿混用。
  • 表格引擎:@visactor/vtable 与 @visactor/vtable-editors 为 peer 依赖(~1.26.x),由消费方提供。

模块一览​

目录职责
根目录 entity-field.utils / entity-value.utils / structural-equal字段配置提取、字段值解析/格式化/校验、键序无关的结构化深比较
entity-form/元数据 → 表单字段配置(create/edit/view 三模式)、实体与表单数据双向转换(仅变化字段)、表单校验
entity-detail/元数据 → 详情页 Tab 结构(基础表单 + 每关系一个表格 Tab)
entity-table/可编辑表格列构建、15 个 VTable 单元格编辑器、剪贴板 / 键盘 / 主题 / tooltip / 拖拽重排等运行时基础设施
query-builder/可视化查询构建器引擎:状态服务、操作符注册表、查询转换、schema 解析、即时校验、字段树等工具

使用​

import { buildFormFields, buildEditableColumns, buildDetailTabs } from '@aiao/rxdb-model';

const fields = buildFormFields(metadata, 'create');
const columns = buildEditableColumns(metadata);
const tabs = buildDetailTabs(metadata);

查询构建器(框架无关服务层):

import { createQueryBuilderService } from '@aiao/rxdb-model';

const qb = createQueryBuilderService<MyEntity>({ schema: { fields } });
qb.state$.subscribe(state => console.log(state));
qb.addRule({ field: 'title', operator: 'contains', value: 'a' });
const rxdbQuery = qb.toRxDBQuery();

开发​

pnpm nx test rxdb-model # Vitest(node 默认环境,DOM 用例经文件头 pragma 切 happy-dom)
pnpm nx build rxdb-model # Vite 库构建(ES 单格式 + dts)

RxDB Model - 核心实体和数据模型定义 提供实体字段处理、实体值处理、结构相等性判断等基础功能

Classes​

ClassDescription
CellTooltipManager单元格错误 tooltip 生命周期管理
DateEditor日期时间选择编辑器
EnumEditor枚举下拉选择编辑器
GlobalOverlayEditor全局浮层列表编辑器抽象基类
IconListEditor支持图标 + 文字的单选列表编辑器
JsonEditorJSON / KeyValue 编辑器
KeyValueEditorKeyValue(Record<string, unknown>)editor — Schema mode only
MultiSelectEditorVTable 自定义多选编辑器
NumberEditor数字输入编辑器
OperatorRegistry操作符注册表服务 管理可用操作符及其元数据
QueryBuilderServiceQueryBuilder 核心服务 基于 RxJS 的响应式状态管理
QueryConverterQuery 转换服务 负责 QueryBuilder 状态与 RxDB Query 之间的双向转换
RelationEditor关系字段搜索下拉编辑器(oneToOne / manyToOne)
SafeListEditorWorkaround for VTable ListEditor bug: onEnd throws TypeError when element.parentNode is null during keyboard-triggered cell navigation.
SchemaParserSchema 解析服务 负责将 RxDB EntityMetadata 转换为 QueryBuilder 可用的字段元数据
TableClipboardManager内部剪贴板管理器 — 封装系统剪贴板 API 交互 + 内部备份
TagsEditor标签(数组)输入编辑器
ValidationService校验服务 负责验证 QueryBuilder 规则和值

Interfaces​

InterfaceDescription
BatchChangeItem批量变更项
BuildEditableColumnsOptions构建可编辑列的选项
CellChangeEvent单元格变更事件
ClipboardCell单个单元格的剪贴板快照
CSSVariablesdaisyUI 主题 CSS 变量集合
DetailFormTab表单标签配置(展示实体的基本信息表单)
DetailTabBase详情页标签基础配置
DetailTableTab表格标签配置(展示关联实体的关系数据)
EntityCapabilities实体在公开写入口上允许的界面操作
EntityFieldConfig实体字段配置
EntityFormData表单数据(字段名到字段值的映射)
EntityTableConfig表格配置
EntityTableHandle实体表格的命令面:三端 EntityTable 组件对外暴露的同一组命令。
EntityTableRecord通用实体表记录基础接口
EnumItem枚举选项配置
FieldExtractorConfig字段提取器配置
FieldMetadata字段元数据
FieldTreeNode字段树节点(用于 CascadeSelect)
FieldValidationError字段校验错误
FormFieldChangeEvent表单字段值变更事件
FormFieldConfig表单字段配置
FormFieldValidationError表单字段校验错误
FormValidationResult表单校验结果
HeaderPositionChangeVTable change_header_position 事件参数中本模块用到的部分
HeaderSortClick列头排序点击时 VTable 交出的状态
IconLabeledItem带图标的列表条目
KeyboardHandlerContext键盘处理上下文 — 由组件提供回调
KeyValueSchemaEntry键值类型字段中单个键的 Schema 配置
KVSchemaEntrykeyValue 模式中单个键的属性描述
ListFixedQuery列表的固定查询(详情页关系标签传入),结构同查询构建器的规则组
ListReorderState判定列表能否拖拽排序时用到的列表状态
ModelInfo模型信息接口
MultiSelectOption多选选项:id + 显示名 + 可选色点 / 禁用
NumberEditorOptions数字编辑器的可选行为配置
OperatorDefinition操作符定义 包含操作符的元数据和约束
OperatorRegistryOptions操作符注册表选项
PendingWrite剪贴板/批量写入的待提交操作
PropertyColumnConfig构建属性列所需的配置
QueryBuilderConfig查询构建器配置
QueryBuilderRuleGroup规则组(复用 RxDB RuleGroup 类型 + UI 元数据)
QueryBuilderServiceOptionsQueryBuilderService 选项
QueryBuilderState查询构建器状态(简化版本,只包含必要字段)
QueryConverterOptions转换选项
QueryExample查询示例接口
RelatedEntityItem关联实体条目
RelatedEntityProvider关联实体数据提供者
RowDeleteEvent行删除事件
RowMoveCommitHooks行拖放落库时与界面交互的钩子
RowMoveEvent单行拖放的结果:被拖行与它落点前后的邻居
RowReorderEvent行重排事件
SchemaInfoSchema 信息
SchemaParserOptions解析器配置选项
UIRuleUI 规则(宽松类型,用于查询构建器组件内部)
ValidationContext验证上下文
ValidationError验证错误项
ValidationResult验证结果
ValidationRule验证规则
ValidationServiceOptions校验服务选项

Type Aliases​

Type AliasDescription
ClipboardContent剪贴板内容:行优先二维数组 [rowOffset][colOffset]
DetailTab详情页标签配置
DetailTabType详情页标签类型
EntityFieldType实体字段类型
EntityInstanceRxDB 实体实例(用于 CRUD 操作)。
FilterQuery筛选查询结构(与用户筛选条件做 AND 合并)。
FormMode表单模式
IconDataLucide 图标数据 — [tagName, attributes] 元组数组
ManualOrderListMetadata列表排序判定需要的实体元数据
OperatorName所有操作符
PropertyType属性类型
PropertyTypeString实体属性类型字符串字面量 与 @aiao/rxdb 的 PropertyType 枚举值一一对应,另扩展关系类型与计算属性
QueryBuilderOperator操作符类型(直接复用 RxDB 定义)
QueryBuilderRule查询规则(复用 RxDB Rule 类型 + UI 元数据)
QueryTableHandle查询表格的命令面:成员与 EntityTableHandle 相同,全部委托给内部实体表格。
RecordDeletePredicate判定某一行能否删除;actionsColumn 逐行调用
RelatedItemsProviderFactory关联实体候选 provider 工厂:根据外键字段和关联实体名返回 provider 函数
Rule查询规则
RuleGroup查询规则组(自动计算类型)
SwitchDisableCallbackswitch 禁用状态判断回调
TagsMode标签编辑器模式:'string' 字符串标签 / 'number' 数字标签
ValidationGroupInput校验规则组输入(宽松递归结构)

Variables​

VariableDescription
BUILTIN_VALIDATION_RULES内置验证规则
DAISY_COLORSdaisyUI v5 主题色引用(CSS 变量,主题自适应)
DEFAULT_COLUMN_SIZES各属性类型的默认列宽及最小/最大宽度
DEFAULT_OPERATORS默认操作符定义列表
DELETE_COLOR删除图标默认颜色
disabledEditorForReadonly不可编辑的行:禁用 editor
DISPLAY_ONLY_FIELDS仅展示(不可编辑)的系统字段
ROW_SERIES_COL_OFFSETVTable rowSeriesNumber 列占据 col=0,数据列从 col=1 开始。 将 VTable 列索引映射到 columns 数组索引时需减此偏移。
SKIP_FIELDS跳过(不显示为独立列)的系统字段
switchDisabledForReadonly禁用 switch:只读行不可操作
UUID_REUUID 字符串格式校验正则(不区分大小写)

Functions​

FunctionDescription
_resetEditorRegistry重置编辑器注册状态(仅供测试使用)
actionsColumn操作列:可选包含查看(view)和删除按钮
applyClipboard从内部剪贴板收集待写入操作(按列位置匹配,类 Excel 行为)。 cellType 必须一致;行/列数不足时循环复用。 若目标列定义了 menuList,则跳过不在枚举范围内的值。
applyPopoverPosition将 calcPopoverPosition 的结果直接应用到弹出层 DOM 元素。
applySystemText从系统剪贴板文本(TSV)收集待写入操作。 布尔列自动将文本转为布尔值(true/1/yes/是 → true,false/0/no/否/空 → false), 无法识别的值跳过;枚举列跳过不在 menuList 中的值;行/列数不足时循环复用。
buildDetailTabs根据实体元数据构建详情页标签列表
buildEditableColumns根据 EntityMetadata 构建可编辑的 VTable 列定义
buildFieldTree将扁平字段列表转换为树结构
buildFormFields根据实体元数据和表单模式构建表单字段列表
buildPropertyColumn根据属性类型配置构建 VTable ColumnDefine
buildTableOptions构建 ListTable 初始化选项
calcPopoverPosition计算弹出层相对于触发元素的位置,优先下方展示,空间不足时向上。
canReorderEntityList实体列表当前是否允许拖拽排序
changeCellValue回写单元格值(不触发编辑事件)
cn拼接 CSS 类名(clsx 的薄封装)。
collectDeleteWrites从选区收集 Delete/Backspace 需要清空的单元格写入列表。
collectReorderedIds收集拖拽排序后的非只读行 ID 列表
commitRowMove协调一次行拖放的落库
completeTableEdit完成当前单元格编辑
computeTooltipPosition计算 tooltip 在页面上的绝对位置
createDefaultFormData根据字段配置创建默认表单数据
createFieldNodeMap创建字段名到节点的映射
createListTable创建 VTable ListTable 实例
createOperatorRegistry创建 OperatorRegistry 实例的工厂函数
createQueryBuilderService创建 QueryBuilderService 实例的工厂函数
createQueryConverter创建 QueryConverter 实例的工厂函数
createSchemaFromEntities从多个 EntityMetadata 批量创建字段元数据
createSchemaFromEntity从 EntityMetadata 创建字段元数据
createSchemaParser创建 SchemaParser 实例的工厂函数
createTheme基于 daisyUI CSS 变量构建 VTable 主题
createValidationService创建 ValidationService 实例的工厂函数
defaultListOrderBy列表未按列排序时的游标排序
deriveEntityCapabilities由实体元数据派生界面能力
ensureBaseEditorRegistered注册 VTable 基础编辑器(全局单例,重复调用仅注册一次)
entityToFormData将实体对象转换为表单数据
extractEntityFields从实体元数据中提取全部业务字段配置
extractFieldsFromMetadata从 EntityMetadata 提取字段(支持递归关系)
extractKeyValueFields从 keyValue 属性的 properties 提取子字段列表
extractRelationTargetFields提取关系目标实体的字段(用于 EXISTS 子查询)
extractSystemFields从实体元数据中提取系统字段配置
filterVisibleFields过滤掉标记为隐藏的字段
findNodeByValue在树中查找节点
findOptionLabel在弹出层选项列表中查找匹配项的 label。
flattenFieldTree将字段树展平为选项列表
formatAsTsv将 ClipboardContent 序列化为 TSV 字符串
formatDateToYmd将日期格式化为 YYYY-MM-DD 字符串。
formatDateValue格式化日期值为本地字符串
formatEntityFieldValue将字段值格式化为展示用字符串
formDataToEntityChanges计算表单数据相对原实体对象的变更集
generateId生成唯一 ID 用于 QueryBuilder 规则和规则组的标识
getCellRecord通过 VTable 回调参数安全获取当前行记录
getCSSVariables从 CSS 自定义属性读取 daisyUI 主题色
getCSSVariableValue读取单个 CSS 变量值,为空时回退到默认值
getDefaultColors返回默认颜色集合
getDefaultOperatorRegistry获取默认操作符注册表
getDefaultValueForType返回指定输入控件类型的默认值。
getDisplayNamePath获取完整的 displayName 路径
getDocumentRootStyle获取文档根元素的计算样式
getInputType根据字段类型和运算符确定查询条件值的输入控件类型。
getOperatorsForType根据字段类型获取适用的操作符
getOptionGroupChildren获取 CascadeSelect 的 optionGroupChildren 配置
getRelationIgnoreKeys获取关系需要忽略的键(避免循环引用)
getTableContainer获取表格 DOM 容器元素
handleTableKeydown表格容器 keydown 事件处理 — 剪贴板快捷键 + 布尔切换 + 删除。 编辑状态下不拦截剪贴板快捷键与删除键。
isDocumentDarkMode判断当前文档是否处于暗色模式
isReadonly检查记录是否为只读行
isReadonlyOrAddRow检查记录是否为只读行或新增模板行
isRowDragEnabled表格当前是否允许行拖动
isRule类型守卫:判断是否为规则
isRuleGroup类型守卫:判断是否为规则组
isTableEditing检查表格是否正在编辑中
lucideToSvgElement将 LucideIconData 转为内联 SVG 元素(DOM API 构造,免疫标记注入)
makeDeleteIcons生成删除按钮的图标选项(SVG 图标 + 文字标签)
makeEditorForReadonly构建编辑器函数:非只读行使用指定编辑器名称,只读行返回 undefined
makeViewIcons生成查看按钮的图标选项(仅 SVG,避免 text 撑满剩余宽度)
mapPropertyType将 PropertyType 映射到 FieldMetadata 的 type
normalizeKVSchemaEntryType将实体属性类型归一化为 keyValue Schema 值类型
organizeFields对字段进行分组和排序
parseCommaSeparatedInput将逗号分隔的字符串解析为数组。 当 fieldType 为 'number' 时返回数字数组,否则返回字符串数组。
parseEntityFieldValue将原始值解析为指定字段类型的目标值
parseEntityFieldValueStrict严格解析表单输入;失败时返回结构化原因,调用方不得覆盖原始输入。
parsePropertyColumnValue将 input-editor 输入的字符串值解析回属性原始类型
parseYmdToLocalDate将 YYYY-MM-DD 字符串解析为本地时区的 Date。
patchDragIconForReadonlyRowsHACK: VTable 不提供禁用特定行拖拽的 API,通过 monkey-patch 内部属性实现
pinsSingleOrderDomain固定查询是否恰好钉住一条完整的排序域
positionOverlayPanel将浮层面板定位到单元格下方(空间不足时翻转到上方)
readRowMove从一次行拖放读出被拖行与落点邻居
refocusTable编辑结束后将焦点还给 VTable root element(tabindex=0 的 .vtable div = ctx.container = table.getElement()),使方向键导航继续工作
registerEditor注册自定义编辑器
restoreTableRecords把表格行恢复成最近一次提交的顺序
scheduleEditorSetup延迟执行编辑器初始化(注册外部点击监听 + 聚焦),避免 VTable 事件干扰
setCellSwitchState设置 switch/checkbox/radio 单元格视觉状态
setRowDragEnabled运行时开关表格的行拖动手柄
snapshotSelection将当前 VTable 选区快照为剪贴板内容。
sortFormFields按字段的 order 升序排序
structuralEqual结构化深比较,替代 JSON.stringify 比较。 递归比较对象和数组,不依赖 key 序列化顺序。 支持循环引用检测,避免无限递归。
syncHeaderSortIcon同步列头排序图标,不执行客户端排序
updateTableRecords更新表格数据并恢复列宽(按 field 名匹配,容忍列增删)
validateEntityFieldValue校验单个字段值是否满足字段配置约束
validateField校验单个表单字段值
validateForm校验整份表单数据