核心概念
Jiess 上下文（jiess）
jiess 是 $initHook.start() 返回的运行时实例，它承载了所有全局状态和服务。在组件内部通过 this.jiess 访问。
javascript
// Jiess 上下文结构
jiess = {
// 框架环境
midder: JiessMidder, // 中介者（事件总线）
midderSdk: MidderSdk, // SDK 扩展的中介者（如有）
$relation: JiessRelation, // 响应式关联系统
// 工具 API
$tan(params), // 打开弹框（快捷方式）
$recycle, // 回收站服务（如注入）
$page, // 路由 + Store 服务（如注入）
// 构建器工厂
$JiessTable(params), // PC 端表格构建器
$JiessList(params), // 移动端列表构建器
$JiessDialog(params), // 弹框构建器
$Input(params), // 输入框构建器
// ... 更多构建器
// 框架组件
JiessComponent, // Jiess 容器组件
hook, // 原始 $initHook 返回的 hook
};从组件内访问
javascript
$JiessTable({
render(item) {
// this = 当前组件的 Jiess 上下文
const store = this.jiess.$page.store;
const router = this.jiess.$page.router;
const userData = this.jiess.midderSdk.userData;
// 打开弹框
this.jiess.$tan({ $title: '编辑', $content: { /* ... */ } });
},
});配置对象规范
Jiess Plus 使用普通 JS 对象（而非模板/JSX）来描述 UI 结构。对象的 key 决定了行为：
| 前缀 | 含义 | 由谁解析 | 示例 |
|---|---|---|---|
$ | Jiess 内置属性 | Jiess 构建器 | $label, $name, $fields, $search, $content |
$$ | Jiess 内部保留 | Jiess 构建器 | $$validate, $$ref（不应手动使用） |
| 无前缀 | 透传给底层 UI | 底层 UI 库 | placeholder, clearable, bordered, size |
children | 子节点 | Jiess 渲染引擎 | 递归渲染子组件 |
配置示例解析
javascript
$JiessTable({
// ── $ 开头 → Jiess 解析 ──
$header: { $title: '用户管理' }, // Jiess 解析：标题栏
$search: { /* ... */ }, // Jiess 解析：搜索栏
$fields: [ /* ... */ ], // Jiess 解析：列定义
// ── 无前缀 → 透传给 el-table ──
rowKey: 'id',
border: true,
stripe: true,
size: 'small',
// ── children → Jiess 子节点 ──
children: { /* ... */ },
});层级系统（Level System）
Jiess Plus 通过两层 Level 数组实现组件的统一包裹结构，使得同一套配置可在不同 UI 库下生成一致的包裹层级。
levelsArea（区域层级）
每个 $Area 默认被三层组件包裹（以 Vue3 + ElementPlus 为例）：
| 层级 | 默认组件 | 控制字段 | 用途 |
|---|---|---|---|
| Form | ElForm | $hasForm（默认 true） | 表单容器，提供校验上下文 |
| Card | ElCard | $hasCard（默认 true） | 卡片容器，提供标题/边框 |
| Space | $Space | $hasSpace（默认 true） | 间距容器，管理栅格布局 |
通过设置 $hasForm: false / $hasCard: false / $hasSpace: false 可移除对应层级。
levelsItem（子项层级）
每个表单项默认被两层组件包裹：
| 层级 | 默认组件 | 控制字段 | 用途 |
|---|---|---|---|
| SpaceItem | $SpaceItem | $hasSpaceItem（默认 true） | 栅格单元，控制 span |
| FormItem | ElFormItem | $hasFormItem（默认 true） | 标签/校验信息容器 |
跨框架差异
| 框架 + UI 库 | Form | Card | FormItem |
|---|---|---|---|
| Vue3 + ElementPlus | ElForm | ElCard | ElFormItem |
| React + AntDesign | Form | Card | Form.Item |
| Vue3 + Vant | vant-form | — | vant-cell |
Vant 因移动端布局简化，部分层级直接渲染或合并。
自定义层级
通过 Hook 子类重写 levelsArea() / levelsItem() 方法可实现完全自定义包裹结构，详见 高级特性。
构建器模式
Jiess Plus 广泛使用构建器模式。每个 $Xxx() 函数返回一个配置对象，该对象被 Jiess 渲染引擎解析为对应的 UI 结构。
构建器链
javascript
// 第一步：配置对象生成
const tableConfig = $JiessTable({ rowKey: 'id', action: '/api/users', $fields: [...] });
// 第二步：传入 JiessComponent
<jiess :config="tableConfig" />
// JiessComponent 内部：
// 1. 解析 tableConfig → 识别为 BuildTable 构建器
// 2. BuildTable.setup() → 创建响应式 state、midder、数据管线
// 3. BuildTable.render() → 渲染 el-table(或 ant-table) + el-pagination构建器生命周期
$JiessTable(config)
└─→ BuildTable.setup(proxy)
├─ 创建响应式 state（datas/loading/searchDatas...）
├─ 创建 midder（listManger/pagerManger/searchManger）
├─ 执行 render 回调（如有）
└─ 注册 expose 暴露方法
↓
JiessComponent 掛載
├─ init() → 获取初始数据
├─ 用户交互 → midder 驱动 state 更新
└─ 卸载 → 清理 midder 和 render响应式系统
Jiess Plus 通过 @jiess/core 的观察者引擎实现跨框架响应式能力。
Vue3 环境
javascript
import * as Vue from 'vue';
const hook = $initHook({ ui: element, ...Vue });
// 内部使用 Vue.reactive / Vue.ref / Vue.computed
// Jiess 配置对象被 Vue 的 reactive 包装React 环境
javascript
import * as React from 'react';
const hook = $initHook({ ui: antd, ...React });
// 内部使用 React.useState / React.useEffect
// Jiess 配置对象被 React state 管理开发者无需关心差异
无论底层使用 Vue 还是 React，配置对象的写法一致：
javascript
// 这段代码在 Vue3 和 React 中完全相同
$JiessTable({
rowKey: 'id',
action: '/api/users',
render(midder) {
// midder.datas 总是自动响应式更新
console.log(midder.datas);
},
});字段驱动 vs 手动构建
Jiess Plus 支持两种开发范式：
javascript
// ===== 范式 1：字段驱动（声明式） =====
// 适用于标准 CRUD 页面
$JiessTable({
$fields: [
{ $label: '姓名', $name: 'name', $width: 120 },
{ $label: '邮箱', $name: 'email', $width: 200 },
],
});
// Jiess 内部自动生成 el-table-column、搜索字段、表单控件
// ===== 范式 2：手动构建（灵活式） =====
// 适用于复杂布局、自定义渲染
$JiessTable({
children: {
header: {
$Row: {
children: {
left: { $Between: {/* 自定义布局 */} },
right: {
$Space: {
children: [
{ $Button: { children: '批量删除' } },
{ $Button: { children: '导出' } },
],
},
},
},
},
},
body: {
$field: [
{
$label: '姓名',
$name: 'name',
$TableField: {
render(row) { return <CustomCell data={row} />; },
},
},
],
},
},
});选择建议
| 场景 | 推荐范式 |
|---|---|
| 标准列表页（搜索+分页+表格） | 字段驱动 |
| 复杂业务布局 | 手动构建 |
| 审批流程 / 图表仪表盘 | 手动构建 |
先在字段驱动中做 80%，剩余的 20% 用 render() 回调定制 | 混合 |
