plain-design 1.0.0-beta.145 → 1.0.0-beta.147

package/src/packages/components/AutoTable/use/useTableOption.hooks.tsx

@@ -1,142 +1,142 @@
-import {TableOptionSpace} from "../utils/TableOption.space";
-import '../utils/TableOption.space';
-import {createHooks, createRenderHook, createSyncHooks, iMouseEvent} from "@peryl/react-compose";
-import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
-import {iTableRefer} from "../../Table/table/Table";
-import {PlainObject} from "@peryl/utils/event";
-import {iAutoTablePageData} from "../utils/AutoTable.utils";
-import {iTableOperationPermitConfig, iTableOuterOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
-import {tPlcData} from "../../Table/plc/formatPlcList";
-import {iTableOptionCacheData} from "./useTableOption.cache.utils";
-import {tPlc, tPlcType} from "../../Table/plc/utils/plc.utils";
-import {iFilterHandlerQueryParam} from "../../FilterService/utils/filter.service.utils";
-import {iHttpRequestConfig} from "../../createHttp/http.utils";
-import {iUrlResponseData} from "../utils/TableOption.url";
-import {Table} from "../../Table";
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      hooks: ReturnType<typeof useTableOptionHooks>;
-    }
-  }
-}
-
-export const useTableOptionHooks = AutoModule.createRegistration(() => {
-  const _hooks = {
-    onRenderColumns: createRenderHook(),                  // 渲染列
-    onRefAutoTableEl: createHooks<(el: HTMLDivElement | null) => void>(), // AutoTable el引用
-    onTableSetup: createSyncHooks<() => void>(),          // AutoTable初始化
-    onTableDestroy: createSyncHooks<() => void>(),        // AutoTable销毁
-    onTableOuterRender: createRenderHook(),               // AutoTable渲染外部内容
-    onTableRender: createRenderHook(),                    // AutoTable渲染内部内容
-    onTableClass: createSyncHooks<(list: any[]) => void>(),// AutoTable计算class
-    onRefBaseTable: createHooks<(refer: iTableRefer | null) => void>(),// 获取base table的引用
-    onBaseTableSetup: createSyncHooks<(refer: iTableRefer) => void>(), // basic table初始化动作
-    onBaseTableAttrs: createSyncHooks<(attrs: typeof Table.use.props) => void>(), // 处理基础表格的属性
-    onRenderLeftOperation: createRenderHook(),            // 渲染筛选栏左侧内容
-    onCurrentChange: createHooks<(selectNode: PlainObject | null) => void>(), // 选中的行发生变化动作
-    onGetPageState: createSyncHooks<(pageState: { page: number, size: number }) => void>(),// 获取分页信息
-
-    onPageDataChange: createSyncHooks<(pageData: iAutoTablePageData | null) => void>(),// 查询页参数变化
-    onQueryCount: createHooks<(data: { total: number }) => void>(),// 查询总数动作
-    onHandleNewRow: createHooks<(row: any) => void>(),// 处理新行对象
-    onPermitConfig: createSyncHooks<(permitConfig: iTableOperationPermitConfig) => void>(), // 处理按钮权限
-
-    onOuterButtons: createSyncHooks<(buttons: iTableOuterOperationConfig[]) => void>(), // 渲染outer按钮
-    onClickNodeSaveOperation: createHooks<(node: iTableNode) => void>(),  // 点击了行的保存按钮
-    onClickNodeCancelOperation: createHooks<(node: iTableNode) => void>(), // 点击了行的取消按钮
-    onCollectPlcData: createHooks<(plcData: tPlcData) => void>(),          // 收集到plcData动作
-    onBeginLoad: createHooks<() => void>(),                                // 异步钩子，开始加载数据之前
-    onTableConfig: createSyncHooks<(data: { cacheData: iTableOptionCacheData, sourceList: tPlcType[], flatList: tPlc[] }) => void>(),// 同步钩子函数，table.props.config执行动作
-    onCollectSortData: createSyncHooks<(sortData: iTableSortData[]) => void>(true),    // 收集排序数据
-    onQueryParam: createSyncHooks<(queryParam: iFilterHandlerQueryParam | null) => void>(),   // 收集筛选参数
-    onTips: createSyncHooks<(tips: TableOptionSpace.iTableOptionTipMeta[]) => void>(true),              // 渲染提示
-    onClearFilter: createHooks<() => void>(),                               // 清空筛选动作
-
-    /*---------------------------------------触发动作-------------------------------------------*/
-    // 触发新建动作
-    onTriggerInsert: createHooks<(newData: PlainObject | undefined) => void>(),
-    onTriggerUpdate: createHooks<(node?: iTableNode) => void>(),
-    onTriggerDelete: createHooks<(node?: iTableNode) => void>(),
-
-    /*---------------------------------------table事件-------------------------------------------*/
-    onClickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onDblclickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onClickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
-    onDblclickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
-    onContextmenuCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
-    onClickHead: createHooks<(data: { plc: tPlcType, e: iMouseEvent }) => void>(),
-
-    /*---------------------------------------load-------------------------------------------*/
-    // 加载数据之前
-    onBeforeLoad: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['query']>) => void>(),
-    // 加载数据之后
-    onAfterLoad: createHooks<(responseData: iUrlResponseData['query']) => void>(),
-    // 加载数据之后，应用完数据之后
-    onLoaded: createHooks<(responseData: iUrlResponseData['query']) => void>(),
-    /*---------------------------------------reload-------------------------------------------*/
-    // 重新加载数据之前
-    onBeforeReload: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['query']>) => void>(),
-    // 重新架子啊数据之后
-    onAfterReload: createHooks<(responseData: iUrlResponseData['query']) => void>(),
-    // 重新架子啊数据之后，应用完数据之后
-    onReloaded: createHooks<(responseData: iUrlResponseData['query']) => void>(),
-    /*---------------------------------------find-------------------------------------------*/
-    // 查找单条数据之前
-    onBeforeFind: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['find']>) => void>(),
-    // 查找单条数据之后
-    onAfterFind: createHooks<(responseData: iUrlResponseData['find']) => void>(),
-    /*---------------------------------------save row-------------------------------------------*/
-    // 异步钩子函数，保存数据之前
-    onBeforeSaveRow: createHooks<(row: any) => void>(),
-    // 异步钩子函数，保存数据之后
-    onAfterSaveRow: createHooks<(row: any) => void>(),
-    // 异步钩子函数，得到数据之后执行（加载玩数据，保存（批量）新建，保存（批量）更新）
-    onFormatRow: createHooks<(row: any) => void>(),
-    /*---------------------------------------insert-------------------------------------------*/
-    // 插入新建数据之前
-    onBeforeInsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['insert']>) => void>(),
-    // 插入新建数据之后
-    onAfterInsert: createHooks<(responseData: iUrlResponseData['insert']) => void>(),
-    /*---------------------------------------update-------------------------------------------*/
-    // 更新数据之前
-    onBeforeUpdate: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['update']>) => void>(),
-    // 更新数据之后
-    onAfterUpdate: createHooks<(responseData: iUrlResponseData['update']) => void>(),
-    /*---------------------------------------upsert-------------------------------------------*/
-    onBeforeUpsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['insert'] | iUrlResponseData['update']>) => void>(),            // 插入或者更新数据之前
-    // 插入或者更新数据之后
-    onAfterUpsert: createHooks<(responseData: iUrlResponseData['insert'] | iUrlResponseData['update']) => void>(),
-    /*---------------------------------------delete-------------------------------------------*/
-    // 删除数据之前
-    onBeforeDelete: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['delete']>) => void>(),
-    // 删除数据之后
-    onAfterDelete: createHooks<(responseData: iUrlResponseData['delete']) => void>(),
-    /*---------------------------------------batchInsert-------------------------------------------*/
-    // 批量插入数据之前
-    onBeforeBatchInsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['batchInsert']>) => void>(),
-    // 批量插入数据之后
-    onAfterBatchInsert: createHooks<(responseData: iUrlResponseData['batchInsert']) => void>(),
-    /*---------------------------------------batchUpdate-------------------------------------------*/
-    // 批量更新数据之前
-    onBeforeBatchUpdate: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['batchUpdate']>) => void>(),
-    // 批量更新数据之后
-    onAfterBatchUpdate: createHooks<(responseData: iUrlResponseData['batchUpdate']) => void>(),
-    /*---------------------------------------batchUpsert-------------------------------------------*/
-    // 批量插入或者更新数据之前
-    onBeforeBatchUpsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['batchInsert'] | iUrlResponseData['batchUpdate']>) => void>(),
-    // 批量插入或者更新数据之后
-    onAfterBatchUpsert: createHooks<(responseData: iUrlResponseData['batchInsert'] | iUrlResponseData['batchUpdate']) => void>(),
-  };
-  const hooks = _hooks as typeof _hooks & TableOptionSpace.iTableOptionHooks;
-
-  hooks.onTableOuterRender.use({
-    separate: false,
-    processor: ({ list, render }) => {list.push({ render, key: 'table-render', seq: 1 });},
-    render: () => (<div className="auto-table-body">{hooks.onTableRender.exec()}</div>),
-  });
-
-  return hooks;
-});
+import {TableOptionSpace} from "../utils/TableOption.space";
+import '../utils/TableOption.space';
+import {createHooks, createRenderHook, createSyncHooks, iMouseEvent} from "@peryl/react-compose";
+import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
+import {iTableRefer} from "../../Table/table/Table";
+import {PlainObject} from "@peryl/utils/event";
+import {iAutoTablePageData} from "../utils/AutoTable.utils";
+import {iTableOperationPermitConfig, iTableOuterOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
+import {tPlcData} from "../../Table/plc/formatPlcList";
+import {iTableOptionCacheData} from "./useTableOption.cache.utils";
+import {tPlc, tPlcType} from "../../Table/plc/utils/plc.utils";
+import {iFilterHandlerQueryParam} from "../../FilterService/utils/filter.service.utils";
+import {iHttpRequestConfig} from "../../createHttp/http.utils";
+import {iUrlResponseData} from "../utils/TableOption.url";
+import {Table} from "../../Table";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      hooks: ReturnType<typeof useTableOptionHooks>;
+    }
+  }
+}
+
+export const useTableOptionHooks = AutoModule.createRegistration(() => {
+  const _hooks = {
+    onRenderColumns: createRenderHook(),                  // 渲染列
+    onRefAutoTableEl: createHooks<(el: HTMLDivElement | null) => void>(), // AutoTable el引用
+    onTableSetup: createSyncHooks<() => void>(),          // AutoTable初始化
+    onTableDestroy: createSyncHooks<() => void>(),        // AutoTable销毁
+    onTableOuterRender: createRenderHook(),               // AutoTable渲染外部内容
+    onTableRender: createRenderHook(),                    // AutoTable渲染内部内容
+    onTableClass: createSyncHooks<(list: any[]) => void>(),// AutoTable计算class
+    onRefBaseTable: createHooks<(refer: iTableRefer | null) => void>(),// 获取base table的引用
+    onBaseTableSetup: createSyncHooks<(refer: iTableRefer) => void>(), // basic table初始化动作
+    onBaseTableAttrs: createSyncHooks<(attrs: typeof Table.use.props) => void>(), // 处理基础表格的属性
+    onRenderLeftOperation: createRenderHook(),            // 渲染筛选栏左侧内容
+    onCurrentChange: createHooks<(selectNode: PlainObject | null) => void>(), // 选中的行发生变化动作
+    onGetPageState: createSyncHooks<(pageState: { page: number, size: number }) => void>(),// 获取分页信息
+
+    onPageDataChange: createSyncHooks<(pageData: iAutoTablePageData | null) => void>(),// 查询页参数变化
+    onQueryCount: createHooks<(data: { total: number }) => void>(),// 查询总数动作
+    onHandleNewRow: createHooks<(row: any) => void>(),// 处理新行对象
+    onPermitConfig: createSyncHooks<(permitConfig: iTableOperationPermitConfig) => void>(), // 处理按钮权限
+
+    onOuterButtons: createSyncHooks<(buttons: iTableOuterOperationConfig[]) => void>(), // 渲染outer按钮
+    onClickNodeSaveOperation: createHooks<(node: iTableNode) => void>(),  // 点击了行的保存按钮
+    onClickNodeCancelOperation: createHooks<(node: iTableNode) => void>(), // 点击了行的取消按钮
+    onCollectPlcData: createHooks<(plcData: tPlcData) => void>(),          // 收集到plcData动作
+    onBeginLoad: createHooks<() => void>(),                                // 异步钩子，开始加载数据之前
+    onTableConfig: createSyncHooks<(data: { cacheData: iTableOptionCacheData, sourceList: tPlcType[], flatList: tPlc[] }) => void>(),// 同步钩子函数，table.props.config执行动作
+    onCollectSortData: createSyncHooks<(sortData: iTableSortData[]) => void>(true),    // 收集排序数据
+    onQueryParam: createSyncHooks<(queryParam: iFilterHandlerQueryParam | null) => void>(),   // 收集筛选参数
+    onTips: createSyncHooks<(tips: TableOptionSpace.iTableOptionTipMeta[]) => void>(true),              // 渲染提示
+    onClearFilter: createHooks<() => void>(),                               // 清空筛选动作
+
+    /*---------------------------------------触发动作-------------------------------------------*/
+    // 触发新建动作
+    onTriggerInsert: createHooks<(newData: PlainObject | undefined) => void>(),
+    onTriggerUpdate: createHooks<(node?: iTableNode) => void>(),
+    onTriggerDelete: createHooks<(node?: iTableNode) => void>(),
+
+    /*---------------------------------------table事件-------------------------------------------*/
+    onClickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
+    onDblclickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
+    onClickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
+    onDblclickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
+    onContextmenuCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
+    onClickHead: createHooks<(data: { plc: tPlcType, e: iMouseEvent }) => void>(),
+
+    /*---------------------------------------load-------------------------------------------*/
+    // 加载数据之前
+    onBeforeLoad: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['query']>) => void>(),
+    // 加载数据之后
+    onAfterLoad: createHooks<(responseData: iUrlResponseData['query']) => void>(),
+    // 加载数据之后，应用完数据之后
+    onLoaded: createHooks<(responseData: iUrlResponseData['query']) => void>(),
+    /*---------------------------------------reload-------------------------------------------*/
+    // 重新加载数据之前
+    onBeforeReload: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['query']>) => void>(),
+    // 重新架子啊数据之后
+    onAfterReload: createHooks<(responseData: iUrlResponseData['query']) => void>(),
+    // 重新架子啊数据之后，应用完数据之后
+    onReloaded: createHooks<(responseData: iUrlResponseData['query']) => void>(),
+    /*---------------------------------------find-------------------------------------------*/
+    // 查找单条数据之前
+    onBeforeFind: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['find']>) => void>(),
+    // 查找单条数据之后
+    onAfterFind: createHooks<(responseData: iUrlResponseData['find']) => void>(),
+    /*---------------------------------------save row-------------------------------------------*/
+    // 异步钩子函数，保存数据之前
+    onBeforeSaveRow: createHooks<(row: any) => void>(),
+    // 异步钩子函数，保存数据之后
+    onAfterSaveRow: createHooks<(row: any) => void>(),
+    // 异步钩子函数，得到数据之后执行（加载玩数据，保存（批量）新建，保存（批量）更新）
+    onFormatRow: createHooks<(row: any) => void>(),
+    /*---------------------------------------insert-------------------------------------------*/
+    // 插入新建数据之前
+    onBeforeInsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['insert']>) => void>(),
+    // 插入新建数据之后
+    onAfterInsert: createHooks<(responseData: iUrlResponseData['insert']) => void>(),
+    /*---------------------------------------update-------------------------------------------*/
+    // 更新数据之前
+    onBeforeUpdate: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['update']>) => void>(),
+    // 更新数据之后
+    onAfterUpdate: createHooks<(responseData: iUrlResponseData['update']) => void>(),
+    /*---------------------------------------upsert-------------------------------------------*/
+    onBeforeUpsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['insert'] | iUrlResponseData['update']>) => void>(),            // 插入或者更新数据之前
+    // 插入或者更新数据之后
+    onAfterUpsert: createHooks<(responseData: iUrlResponseData['insert'] | iUrlResponseData['update']) => void>(),
+    /*---------------------------------------delete-------------------------------------------*/
+    // 删除数据之前
+    onBeforeDelete: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['delete']>) => void>(),
+    // 删除数据之后
+    onAfterDelete: createHooks<(responseData: iUrlResponseData['delete']) => void>(),
+    /*---------------------------------------batchInsert-------------------------------------------*/
+    // 批量插入数据之前
+    onBeforeBatchInsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['batchInsert']>) => void>(),
+    // 批量插入数据之后
+    onAfterBatchInsert: createHooks<(responseData: iUrlResponseData['batchInsert']) => void>(),
+    /*---------------------------------------batchUpdate-------------------------------------------*/
+    // 批量更新数据之前
+    onBeforeBatchUpdate: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['batchUpdate']>) => void>(),
+    // 批量更新数据之后
+    onAfterBatchUpdate: createHooks<(responseData: iUrlResponseData['batchUpdate']) => void>(),
+    /*---------------------------------------batchUpsert-------------------------------------------*/
+    // 批量插入或者更新数据之前
+    onBeforeBatchUpsert: createHooks<(requestConfig: iHttpRequestConfig<iUrlResponseData['batchInsert'] | iUrlResponseData['batchUpdate']>) => void>(),
+    // 批量插入或者更新数据之后
+    onAfterBatchUpsert: createHooks<(responseData: iUrlResponseData['batchInsert'] | iUrlResponseData['batchUpdate']) => void>(),
+  };
+  const hooks = _hooks as typeof _hooks & TableOptionSpace.iTableOptionHooks;
+
+  hooks.onTableOuterRender.use({
+    separate: false,
+    processor: ({ list, render }) => {list.push({ render, key: 'table-render', seq: 1 });},
+    render: () => (<div className="auto-table-body">{hooks.onTableRender.exec()}</div>),
+  });
+
+  return hooks;
+});

package/src/packages/components/AutoTable/use/useTableOption.loading.tsx

@@ -1,77 +1,77 @@
-import {Loading} from "../../Loading";
-import {reactive, RenderNode} from "@peryl/react-compose";
-import {createCounter} from "@peryl/utils/createCounter";
-import {delay} from "@peryl/utils/delay";
-import '../utils/TableOption.space';
-import i18n from "../../i18n";
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      loading: ReturnType<typeof useTableOptionLoading>;
-    }
-  }
-}
-
-export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) => {
-  const state = reactive({
-    metas: [] as iTableOptionLoadingMeta[],
-  });
-
-  const isLoading = () => !!state.metas.length;
-
-  hooks.onTableRender.use({
-    processor: ({ list, render }) => {isLoading() && list.push({ render, key: 'loading', seq: 0 });},
-    render: () => (
-      !!state.metas.length && <div className="auto-table-loading-wrapper">
-        {(() => {
-          const meta = state.metas[state.metas.length - 1];
-          if (!!meta.render) {
-            return meta.render();
-          } else {
-            return (
-              <div className="auto-table-loading-inner">
-                <Loading type="delta"/>
-                <span>{meta.message || i18n.$it('base.loading').d('加载中')}</span>
-              </div>
-            );
-          }
-        })()}
-      </div>
-    )
-  });
-
-  hooks.onTableClass.use((classList) => {
-    isLoading() && classList.push('auto-table-loading');
-  });
-
-  const minTimerDuration = 500;
-
-  const loading = (meta?: Omit<iTableOptionLoadingMeta, 'id'>) => {
-    let startTime = Date.now();
-    const loadingMeta: iTableOptionLoadingMeta = {
-      ...meta,
-      id: nextLoadingId(),
-    };
-    state.metas.push(loadingMeta);
-    return async () => {
-      let endTime = Date.now();
-      const duration = endTime - startTime;
-      /*最少等待500ms，有个加载的显示效果*/
-      if (duration < minTimerDuration) {await delay(minTimerDuration - duration);}
-      const index = state.metas.findIndex(i => i.id === loadingMeta.id);
-      index > -1 && state.metas.splice(index, 1);
-    };
-  };
-
-  return { state, loading, isLoading };
-});
-
-const nextLoadingId = createCounter('auto_table_loading');
-
-interface iTableOptionLoadingMeta {
-  id: string,
-  message?: string,
-  render?: () => RenderNode,
-}
+import {Loading} from "../../Loading";
+import {reactive, RenderNode} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
+import {delay} from "@peryl/utils/delay";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      loading: ReturnType<typeof useTableOptionLoading>;
+    }
+  }
+}
+
+export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) => {
+  const state = reactive({
+    metas: [] as iTableOptionLoadingMeta[],
+  });
+
+  const isLoading = () => !!state.metas.length;
+
+  hooks.onTableRender.use({
+    processor: ({ list, render }) => {isLoading() && list.push({ render, key: 'loading', seq: 0 });},
+    render: () => (
+      !!state.metas.length && <div className="auto-table-loading-wrapper">
+        {(() => {
+          const meta = state.metas[state.metas.length - 1];
+          if (!!meta.render) {
+            return meta.render();
+          } else {
+            return (
+              <div className="auto-table-loading-inner">
+                <Loading type="delta"/>
+                <span>{meta.message || i18n.$it('base.loading').d('加载中')}</span>
+              </div>
+            );
+          }
+        })()}
+      </div>
+    )
+  });
+
+  hooks.onTableClass.use((classList) => {
+    isLoading() && classList.push('auto-table-loading');
+  });
+
+  const minTimerDuration = 500;
+
+  const loading = (meta?: Omit<iTableOptionLoadingMeta, 'id'>) => {
+    let startTime = Date.now();
+    const loadingMeta: iTableOptionLoadingMeta = {
+      ...meta,
+      id: nextLoadingId(),
+    };
+    state.metas.push(loadingMeta);
+    return async () => {
+      let endTime = Date.now();
+      const duration = endTime - startTime;
+      /*最少等待500ms，有个加载的显示效果*/
+      if (duration < minTimerDuration) {await delay(minTimerDuration - duration);}
+      const index = state.metas.findIndex(i => i.id === loadingMeta.id);
+      index > -1 && state.metas.splice(index, 1);
+    };
+  };
+
+  return { state, loading, isLoading };
+});
+
+const nextLoadingId = createCounter('auto_table_loading');
+
+interface iTableOptionLoadingMeta {
+  id: string,
+  message?: string,
+  render?: () => RenderNode,
+}