跳到主要内容

@aiao/rxdb-model

@aiao/rxdb-model 是框架无关的实体 UI 与元数据工具库。它把实体元数据转换成表格、表单、详情页和查询构建器所需的配置与服务；真正的 Angular、React、Vue 组件分别在各自的框架包里。

包含什么​

  • Entity Table：基于 VTable 的表格能力与编辑器工具
  • Entity Form：从实体元数据生成表单字段配置与校验
  • Entity Detail：从关系元数据构建详情页 tab 结构
  • Query Builder：框架无关的查询构建器模型、服务和 schema 解析工具

安装​

npm install @aiao/rxdb-model

架构​

@aiao/rxdb-model
├── Entity Table   ← 列构建、编辑器、剪贴板与键盘工具
├── Entity Form    ← 表单字段构建、数据处理、校验
├── Entity Detail  ← 详情 tab 结构构建
└── Query Builder  ← 状态模型、服务、schema 解析、操作符注册

包边界​

  • @aiao/rxdb-model 只提供框架无关能力
  • @aiao/rxdb-model-angular、@aiao/rxdb-model-react、@aiao/rxdb-model-vue 提供各自框架组件
  • 如果你只是想在 React、Vue 或 Angular 页面里直接使用现成组件，通常应该从框架包开始读

核心模块​

Entity Table​

表格相关能力主要围绕列定义、编辑器和 VTable 适配工具：

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

// 构建可编辑列配置
const columns = buildEditableColumns({
  entity: User,
  columns: ['name', 'email', 'status']
});

支持的能力：

  • Inline 单元格编辑
  • 行拖拽排序
  • 剪贴板复制/粘贴/删除
  • 键盘导航
  • 树形数据支持

Entity Form​

表单相关能力以元数据转换和校验函数为主：

import { buildFormFields, validateForm } from '@aiao/rxdb-model';
import { getEntityMetadata } from '@aiao/rxdb';

const fields = buildFormFields(getEntityMetadata(User), 'edit');

const result = validateForm(fields, formData);

支持的字段类型：

  • string - 文本输入
  • number - 数字输入
  • boolean - 开关/复选框
  • date - 日期选择
  • enum - 枚举下拉选择
  • relation - 关联实体选择
  • tags - 标签输入
  • json - JSON 编辑器
  • keyValue - 键值对编辑

Entity Detail​

详情页能力用于从实体关系自动推导 tab 结构：

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

const tabs = buildDetailTabs(getEntityMetadata(User));

Query Builder​

查询构建器在核心包里提供的是模型、服务和 schema 解析工具：

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

const fields = createSchemaFromEntity(getEntityMetadata(User), {
  includeRelations: true
});

const service = createQueryBuilderService<User>({
  fields,
  config: { maxNestingLevel: 3 }
});

详细文档：Query Builder

依赖​

{
  "@aiao/rxdb": ">=0.0.1",
  "@visactor/vtable": ">=1.0.0",
  "@visactor/vtable-editors": ">=1.0.0",
  "rxjs": ">=7.0.0"
}

框架集成​

@aiao/rxdb-model 是框架无关的核心库，配合以下框架包使用：

  • Angular - @aiao/rxdb-model-angular
  • React - @aiao/rxdb-model-react
  • Vue - @aiao/rxdb-model-vue

API 文档​

@aiao/rxdb-model 当前没有独立生成的 API 分册，核心能力说明以本页和相关框架文档为准。