安装与配置

导入路径说明

@jiess/plus 的 package.json 通过 exports 字段提供了多个条件导出路径，根据你使用的框架选择对应的入口：

// Vue3 + ElementPlus（PC 端）
import { $initHook, $JiessTable, $JiessDialog, $Input } from '@jiess/plus/vue3';

// Vue3 + Vant（移动端）
import { $initHook, $JiessList, $JiessDialog, $Input } from '@jiess/plus/vant';

// React 16.8+ + AntDesign 4.x
import { $initHook, $JiessTable, $JiessDialog, $Input } from '@jiess/plus/react';

// 自动检测框架（按需加载，适合跨框架组件库）
import { $initHook, $JiessTable, $JiessDialog, $Input } from '@jiess/plus/auto';

重要：旧文档中出现的 @jiess/plus/antd、@jiess/plus/element 等路径不存在，请勿使用。

package.json exports 完整映射

{
    "exports": {
        ".": "./lib/index.js",
        "./vue3": "./lib/vue3element/index.js",
        "./vant": "./lib/vue3vant/index.js",
        "./react": "./lib/react168antd/index.js",
        "./auto": "./lib/auto.js",
        "./react/resolver": "./lib/react168antd/resolver/index.js",
        "./auto/resolver": "./lib/auto/resolver/index.js"
    }
}

---

$initHook —— 初始化入口

$initHook 是 Jiess 的初始化函数，它接收框架环境、UI 组件库和全局配置，返回一个 Hook 实例。

基础用法

import * as Vue from 'vue';
import * as element from 'element-plus';
import { $initHook } from '@jiess/plus/vue3';

const hook = $initHook({
    $name: 'my-app',     // 应用标识（可选）
    ui: element,          // UI 组件库（element-plus / vant / antd）
    ...Vue,               // 展开 Vue 所有 API（reactive/ref/watch 等）
});

参数

参数	类型	必填	说明
$name	string	否	应用标识，用于调试
ui	Object	是	UI 组件库根对象（element-plus / vant / antd）
...framework	Object	是	框架响应式 API（展开 Vue 或 React）
globalConfig	Object	否	全局配置（见下方 globalConfig 章节）

返回值

hook = {
    start(injectServices?),  // 启动 Jiess，注入运行时服务，返回 jiess 实例
    // 内部还包含 $initHook 创建的构建器工厂等
}

---

globalConfig —— 全局配置

全局配置通过 $initHook 的 globalConfig 参数传入，用于覆盖库默认值。

_SuperTable / _SuperList（列表配置）

@jiess/plus 默认的后端分页字段映射：

配置项	库默认值	说明
rowKey	'id'	行数据的 ID 标识
fieldPage	'page'	后端页码参数字段名
fieldPageSize	'limit'	后端每页条数字段名
fieldTotal	'total'	后端总数返回字段名
fieldDatas	'list'	后端数据列表返回字段名
defaultPage	1	默认页码
defaultPageSize	10	默认每页条数

如果你的后端分页参数不同，通过 _SuperTable 覆盖：

const hook = $initHook({
    ui: element,
    ...Vue,
    globalConfig: {
        _SuperTable: {
            // ↑ 浅合并：整个对象覆盖库默认值
            rowKey: 'id',
            fieldPage: 'page',
            fieldPageSize: 'pageSize',   // 你的后端用 pageSize
            fieldTotal: 'total',
            fieldDatas: 'rows',          // 你的后端返回 rows
            defaultPage: 1,
            defaultPageSize: 10,
        },
        _SuperList: { /* 移动端同理 */ },
    },
});

_ruleConfig.ruleData（自定义校验规则注入）

注入库未内置的业务校验规则：

const hook = $initHook({
    globalConfig: {
        _ruleConfig: {
            ruleData: {
                // 校验函数格式：(value, label) => string | undefined
                // 返回 string = 校验失败（string 为错误消息）
                // 返回 undefined = 校验通过
                password: (value, label) => {
                    if (!value || value.length < 6) {
                        return `${label} 长度不能少于6位`;
                    }
                },
            },
        },
    },
});

注意：注入规则与内置规则通过 { ...builtinRules, ...ruleData } 合并，同名 key 注入覆盖内置。详细规则列表见 快捷表单-基础.md。

---

hook.start() —— 运行时服务注入

start() 方法启动 Jiess 运行时，可注入任意服务供组件上下文访问。

基础用法

const jiess = hook.start();

带服务注入

const jiess = hook.start({
    $page() {                              // 注入路由 + Store
        const store = useStore();
        const route = useRoute();
        const router = useRouter();
        return { store, route, router };
    },
    $myService: new CustomService(),       // 注入任意服务
});

// 组件内通过 this.jiess.$page 访问

注入规则

注入 key	值类型	访问方式	生命周期
$xxx	函数 → Object	this.jiess.$xxx	函数每次路由切换时重建
$xxx	Object/Class	this.jiess.$xxx	随 jiess 实例全程存在

建立循环引用

jiess.hook = hook;  // 允许通过 jiess.hook 访问原始 hook 配置

---

全局注册 Jiess 容器组件

Vue3

// main.js
import { createApp } from 'vue';
import { JiessComponent } from '@/jiessConfig';

const app = createApp(App);
app.component('jiess', JiessComponent);

<!-- 模板中使用 -->
<jiess :config="tableConfig" />

React

// App.jsx
import { JiessComponent } from '@/jiessConfig';

function App() {
    return <JiessComponent config={tableConfig} />;
}

---

下一步

• 核心概念 —— Jiess 上下文、配置对象规范、响应式系统
• 全局弹框系列 —— 弹框创建与管理
• 高级特性 —— start() 注入、JiessMidder、流程引擎