plain-design 1.0.0-beta.16 → 1.0.0-beta.160

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

@@ -1,5 +1,5 @@
 import {iTableOperation, iTableOuterOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
-import {computed} from "plain-design-composition";
+import {computed} from "@peryl/react-compose";
 import {eTableOptionSettingView} from "../setting/useTableOption.setting.utils";
 import {PlcOperation} from "../../Table/standard/PlcOperation/PlcOperation";
 import {OuterOperation} from "../../Table/standard/PlcOperation/OuterOperation";
@@ -15,8 +15,9 @@ declare module '../utils/TableOption.space' {
     }
   }
 }
-export const useTableOptionButtons = AutoModule.createRegistration((
-  {
+export const useTableOptionButtons = AutoModule.createRegistration((option) => {
+
+  const {
     state,
     config,
     hooks,
@@ -24,12 +25,11 @@ export const useTableOptionButtons = AutoModule.createRegistration((
     setting,
     keyboard,
     permission,
-  }
-) => {
+  } = option;
 
   const standardButtons: iTableOperation[] = [
     {
-      label: i18n('base.edit.create').d('新建'),
+      label: i18n.$it('base.edit.create').d('新建'),
       position: 'outer',
       type: 'insert',
       code: 'outer-insert',
@@ -38,7 +38,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: async () => {await methods.editMethods.insert();}
     },
     {
-      label: i18n('base.edit.copy').d('复制'),
+      label: i18n.$it('base.edit.copy').d('复制'),
       position: 'outer',
       type: 'insert',
       code: 'outer-copy',
@@ -47,7 +47,7 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: async () => {await methods.editMethods.copy();}
     },
     {
-      label: i18n('base.edit.remove').d('删除'),
+      label: i18n.$it('base.edit.remove').d('删除'),
       position: 'outer',
       type: 'delete',
       code: 'outer-delete',
@@ -56,29 +56,30 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: async () => {await methods.editMethods.delete();}
     },
     {
-      label: i18n('base.edit.edit').d('编辑'),
+      label: i18n.$it('base.edit.edit').d('编辑'),
       position: 'inner',
       type: 'update',
       code: 'inner-update',
       handler: async ({ node }) => {await methods.editMethods.update(node);},
     },
     {
-      label: i18n('base.edit.copy').d('复制'),
+      label: i18n.$it('base.edit.copy').d('复制'),
       position: 'inner',
       type: 'insert',
       code: 'inner-insert',
       handler: async ({ node }) => {await methods.editMethods.copy(node.data);},
     },
     {
-      label: i18n('base.edit.remove').d('删除'),
+      label: i18n.$it('base.edit.remove').d('删除'),
       position: 'inner',
       type: 'delete',
       code: 'inner-delete',
       handler: async ({ node }) => {await methods.editMethods.delete(node);},
     },
     {
-      label: i18n('table.formEdit').d('表单编辑'),
+      label: i18n.$it('table.formEdit').d('表单编辑'),
       position: 'outer',
+      dropdown: true,
       type: 'update',
       code: 'outer-update',
       icon: 'pi-edit',
@@ -86,8 +87,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => methods.editMethods.update(undefined, eTableOptionEditType.form),
     },
     {
-      label: i18n('table.batchCreate').d('批量新建'),
+      label: i18n.$it('table.batchCreate').d('批量新建'),
       position: 'outer',
+      dropdown: true,
       type: 'insert',
       code: 'outer-batch-insert',
       icon: 'pi-plus',
@@ -95,8 +97,19 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => methods.editMethods.batchInsert(),
     },
     {
-      label: i18n('table.batchEdit').d('批量编辑'),
+      label: i18n.$it('table.aiCreate').d('智能新建'),
+      position: 'outer',
+      dropdown: true,
+      type: 'insert',
+      code: 'outer-ai-insert',
+      icon: 'pi-robot-add',
+      keyboard: 'alt+c',
+      handler: () => option.ai.methods.aiInsert(),
+    },
+    {
+      label: i18n.$it('table.batchEdit').d('批量编辑'),
       position: 'outer',
+      dropdown: true,
       type: 'update',
       code: 'outer-batch-update',
       icon: 'pi-save',
@@ -104,8 +117,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => methods.editMethods.batchUpdate(),
     },
     {
-      label: i18n('table.batchDelete').d('批量删除'),
+      label: i18n.$it('table.batchDelete').d('批量删除'),
       position: 'outer',
+      dropdown: true,
       type: 'delete',
       code: 'outer-batch-delete',
       icon: 'pi-eraser',
@@ -113,8 +127,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: async () => {await methods.editMethods.batchDelete();}
     },
     {
-      label: i18n('table.batchModify').d('批量修改'),
+      label: i18n.$it('table.batchModify').d('批量修改'),
       position: 'outer',
+      dropdown: true,
       type: 'update',
       code: 'outer-batch-modify',
       icon: 'pi-mind-mapping',
@@ -122,8 +137,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: async () => {await methods.editMethods.batchModify();}
     },
     {
-      label: i18n('table.allFilter').d('所有筛选'),
+      label: i18n.$it('table.allFilter').d('所有筛选'),
       position: 'outer',
+      dropdown: true,
       type: 'other',
       code: 'all-filters',
       icon: 'pi-filter',
@@ -131,8 +147,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => setting.openSetting(eTableOptionSettingView.allFilter),
     },
     {
-      label: i18n('table.seniorFilter').d('高级筛选'),
+      label: i18n.$it('table.seniorFilter').d('高级筛选'),
       position: 'outer',
+      dropdown: true,
       type: 'other',
       code: 'senior-filters',
       icon: 'pi-find-replace',
@@ -140,8 +157,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => setting.openSetting(eTableOptionSettingView.seniorFilter),
     },
     {
-      label: i18n('table.seniorSort').d('高级排序'),
+      label: i18n.$it('table.seniorSort').d('高级排序'),
       position: 'outer',
+      dropdown: true,
       type: 'other',
       code: 'senior-sort',
       icon: 'pi-sort-ascending',
@@ -149,8 +167,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => setting.openSetting(eTableOptionSettingView.sort),
     },
     {
-      label: i18n('table.customSetting').d('个性设置'),
+      label: i18n.$it('table.customSetting').d('个性设置'),
       position: 'outer',
+      dropdown: true,
       type: 'other',
       code: 'custom-setting',
       icon: 'pi-settings',
@@ -158,8 +177,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => setting.openSetting(eTableOptionSettingView.config),
     },
     {
-      label: i18n('table.cacheSetting').d('缓存设置'),
+      label: i18n.$it('table.cacheSetting').d('缓存设置'),
       position: 'outer',
+      dropdown: true,
       type: 'other',
       code: 'cache-setting',
       icon: 'pi-layers',
@@ -167,8 +187,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => setting.openSetting(eTableOptionSettingView.cache),
     },
     {
-      label: i18n('table.importData').d('导入数据'),
+      label: i18n.$it('table.importData').d('导入数据'),
       position: 'outer',
+      dropdown: true,
       type: 'other',
       code: 'import',
       icon: 'pi-import',
@@ -176,8 +197,9 @@ export const useTableOptionButtons = AutoModule.createRegistration((
       handler: () => setting.openSetting(eTableOptionSettingView.import),
     },
     {
-      label: i18n('table.exportData').d('导出数据'),
+      label: i18n.$it('table.exportData').d('导出数据'),
       position: 'outer',
+      dropdown: true,
       type: 'other',
       code: 'export',
       icon: 'pi-export',

package/src/packages/components/AutoTable/use/useTableOption.cache.ts

@@ -1,8 +1,8 @@
 import {getTableId, iTableOptionCacheData, iTableOptionCacheItemData, iTableOptionCacheRegistryConfig} from "./useTableOption.cache.utils";
 import {tPlcData} from "../../Table/plc/formatPlcList";
-import {defer} from "plain-utils/utils/defer";
+import {defer} from "@peryl/utils/defer";
 import {plainDate} from "../../../utils/plainDate";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {TablePropsConfig} from "../../Table/table/utils/table.utils";
 import {$message} from "../../$message";
 
@@ -180,7 +180,7 @@ export const useTableOptionCache = AutoModule.createRegistration(({ config, hook
    */
   function deleteCache(cacheId: number) {
     if (state.cacheData.activeId === cacheId) {
-      return $message.error(i18n('table.canNotDeleteUsingCache').d('不可以删除正在使用的缓存配置'));
+      return $message.error(i18n.$it('table.canNotDeleteUsingCache').d('不可以删除正在使用的缓存配置'));
     }
     state.cacheData.data = state.cacheData.data.filter(i => i.id !== cacheId);
     config.setCache(state.cacheData);

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

@@ -1,8 +1,8 @@
 import {eTableOptionStatus} from "./useTableOption.confirm";
-import {reactive, useRefs} from "plain-design-composition";
+import {reactive, useRefs} from "@peryl/react-compose";
 import {PlcCheck} from "../../Table/standard/PlcCheck/PlcCheck";
-import {defer} from "plain-utils/utils/defer";
-import {PlainObject} from "plain-utils/utils/event";
+import {defer} from "@peryl/utils/defer";
+import {PlainObject} from "@peryl/utils/event";
 import {$message} from "../../$message";
 
 import '../utils/TableOption.space';
@@ -58,7 +58,7 @@ export const useTableOptionCheck = AutoModule.createRegistration(({ hooks, confi
     const dfd = defer<PlainObject[]>();
     showCheckbox();
     confirm.open(eTableOptionStatus.select, {
-      confirmText: i18n('base.confirm').d('确定'),
+      confirmText: i18n.$it('base.confirm').d('确定'),
       onConfirm: () => {
         const selectedRows = state.checkData;
         if (selectedRows.length === 0) {

package/src/packages/components/AutoTable/use/useTableOption.column.popper.tsx

@@ -1,7 +1,7 @@
-import {findParentElement} from "../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
-import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, toRaw} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, toRaw} from "@peryl/react-compose";
 import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
 import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
 import {ButtonGroup} from "../../ButtonGroup";
@@ -11,7 +11,7 @@ import {iFilterOption, iFilterQueryParam} from "../../FilterService/utils/filter
 import {mergeQueryParam} from "../../FilterService/utils/mergeQueryParam";
 import {$dialog} from "../../$dialog";
 import {AutoTable} from "../index";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {RenderTableOptionTips} from "./useTableOption.tips";
 import {eTableOptionSortMode} from "./useTableOption.sort";
 import {FilterService} from "../../FilterService";
@@ -67,7 +67,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
     filterState.useState<Record<string, undefined | iFilterFormSingleData>>({
       seq: 1,
       key: 'column-search',
-      title: i18n('table.columnFilter').d('列搜索'),
+      title: i18n.$it('table.columnFilter').d('列搜索'),
       getActiveFilterCount: () => {
         return Object.values(innerState.data).reduce((prev, item) => {
           return prev + (item?.filterQueryParam.queries?.length || 0);
@@ -176,7 +176,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
     filterState.useState<Record<string, undefined | PlainObject[]>>({
       seq: 1,
       key: 'distinct-search',
-      title: i18n('table.distinctFilter').d('去重筛选'),
+      title: i18n.$it('table.distinctFilter').d('去重筛选'),
       getActiveFilterCount: () => {
         return Object.values(innerState.data).reduce((prev, item) => {
           return prev + ((!!item && item.length > 0) ? 1 : 0);
@@ -213,7 +213,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
         };
         if (!handler) {
           list.push({
-            display: () => i18n('table.filterTipInclude', { field: filterOption.label, val: vals }).d(`${filterOption.label}包含${vals}`),
+            display: () => i18n.$it('table.filterTipInclude', { field: filterOption.label, val: vals }).d(`${filterOption.label}包含${vals}`),
             onClick,
             onClear,
           });
@@ -233,7 +233,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
 
     const open = async (plc: tPlc) => {
       popperHandler.close();
-      const wrapperStyles = { width: '400px' };
+      const wrapperStyles = { width: '700px' };
       const field = plc.props.searchField || plc.props.field;
       if (!field) {return;}
       const excludeCode = nextPlcExcludeCode();
@@ -255,10 +255,11 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
         // console.log(externalQueryParam);
 
         $dialog({
-          title: i18n('table.distinctFilter').d('去重筛选'),
+          title: i18n.$it('table.distinctFilter').d('去重筛选'),
           size: config.size,
           confirmButton: true,
           cancelButton: true,
+          noContentPadding: true,
           handleConfirm: () => {onConfirm(field, openState.data);},
           render: () => {
             return (
@@ -360,8 +361,8 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
                 if (!filterOption) {return null;}
                 return (
                   <ButtonGroup className="auto-table-column-popper-button-group" size={config.size}>
-                    <Button label={i18n('table.distinctFilter').d('去重筛选')} icon="pi-select-all" size={config.size} onClick={() => distinctHandler.open(plc)}/>
-                    <Tooltip message={i18n('table.clearDistinctFilter').d('清空去重筛选')}><Button icon="pi-delete" size={config.size} onClick={() => distinctHandler.clear(filterOption.field)}/></Tooltip>
+                    <Button label={i18n.$it('table.distinctFilter').d('去重筛选')} icon="pi-select-all" size={config.size} onClick={() => distinctHandler.open(plc)}/>
+                    <Tooltip message={i18n.$it('table.clearDistinctFilter').d('清空去重筛选')}><Button icon="pi-delete" size={config.size} onClick={() => distinctHandler.clear(filterOption.field)}/></Tooltip>
                   </ButtonGroup>
                 );
               })();
@@ -432,8 +433,8 @@ const SortSwitcher = designComponent({
     const emitDesc = () => emit.onChange('desc');
     return () => (
       <div className="auto-table-sort-switcher">
-        <Button label={i18n('base.asc').d('升序')} icon="pi-sort-descending" status={props.type === 'asc' ? 'primary' : undefined} onClick={emitAsc}/>
-        <Button label={i18n('base.desc').d('降序')} icon="pi-sort-ascending" status={props.type === 'desc' ? 'primary' : undefined} onClick={emitDesc}/>
+        <Button label={i18n.$it('base.asc').d('升序')} icon="pi-sort-descending" status={props.type === 'asc' ? 'primary' : undefined} onClick={emitAsc}/>
+        <Button label={i18n.$it('base.desc').d('降序')} icon="pi-sort-ascending" status={props.type === 'desc' ? 'primary' : undefined} onClick={emitDesc}/>
       </div>
     );
   },

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

@@ -1,5 +1,5 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {reactive, toRaw} from "plain-design-composition";
+import {createEnum} from "@peryl/utils/createEnum";
+import {reactive, toRaw} from "@peryl/react-compose";
 import {iTableOuterOperationConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
 import '../utils/TableOption.space';
 import i18n from "../../i18n";
@@ -67,7 +67,7 @@ export const useTableOptionConfirm = AutoModule.createRegistration(({ hooks }) =
     if (state.status === eTableOptionStatus.normal) {return prev;}
     const buttons: iTableOuterOperationConfig[] = [
       {
-        label: state.handlers.length === 1 && !!state.handlers[0].cancelText ? state.handlers[0].cancelText : i18n('base.cancel').d('取消'),
+        label: state.handlers.length === 1 && !!state.handlers[0].cancelText ? state.handlers[0].cancelText : i18n.$it('base.cancel').d('取消'),
         position: 'outer',
         code: 'outer-cancel',
         icon: 'pi-undo',
@@ -75,7 +75,7 @@ export const useTableOptionConfirm = AutoModule.createRegistration(({ hooks }) =
         handler: () => close.cancel(),
       },
       {
-        label: state.handlers.length === 1 && !!state.handlers[0].confirmText ? state.handlers[0].confirmText : i18n('base.confirm').d('保存'),
+        label: state.handlers.length === 1 && !!state.handlers[0].confirmText ? state.handlers[0].confirmText : i18n.$it('base.confirm').d('保存'),
         mode: 'fill',
         position: 'outer',
         code: 'outer-confirm',
@@ -86,7 +86,7 @@ export const useTableOptionConfirm = AutoModule.createRegistration(({ hooks }) =
     ];
     if (state.status === eTableOptionStatus.insert || state.status === eTableOptionStatus.batchInsert) {
       buttons.unshift({
-        label: i18n('table.continueCreate').d('继续新建'),
+        label: i18n.$it('table.continueCreate').d('继续新建'),
         position: 'outer',
         code: 'outer-next-insert',
         icon: 'pi-plus',

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

@@ -1,10 +1,10 @@
-import {defer} from "plain-utils/utils/defer";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {defer} from "@peryl/utils/defer";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import {iTableRefer} from "../../Table/table/Table";
-import {delay} from "plain-utils/utils/delay";
-import {onBeforeUnmount, reactive} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {debounce} from "plain-utils/utils/debounce";
+import {delay} from "@peryl/utils/delay";
+import {onBeforeUnmount, reactive} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
+import {debounce} from "@peryl/utils/debounce";
 import '../utils/TableOption.space';
 import {AutoModule} from "../utils/AutoModule";
 
@@ -80,6 +80,7 @@ export const useTableOptionFill = AutoModule.createRegistration((
         };
       })();
 
+      await delay(73);
       /**
        * 计算可以用来渲染行的高度
        * parent.top+parent.height可以得到父节点底边界的top值；
@@ -101,10 +102,10 @@ export const useTableOptionFill = AutoModule.createRegistration((
       });*/
 
       /*计算撑满高度的行数*/
-      const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
+      const showRows = Math.floor(availableHeight / bodyRowHeight);
 
       /*更新分页查询信息*/
-      pagination.state.size = showRows;
+      pagination.state.size = config.pageSize || showRows;
       pagination.state.pageSizeOptions.indexOf(showRows) === -1 && (pagination.state.pageSizeOptions.unshift(showRows));
       state.showRows = showRows;
       state.init = true;

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

@@ -1,9 +1,9 @@
 import {TableOptionSpace} from "../utils/TableOption.space";
 import '../utils/TableOption.space';
-import {createHooks, createRenderHook, createSyncHooks, iMouseEvent} from "plain-design-composition";
+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 "plain-utils/utils/event";
+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";
@@ -29,7 +29,8 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     onRefAutoTableEl: createHooks<(el: HTMLDivElement | null) => void>(), // AutoTable el引用
     onTableSetup: createSyncHooks<() => void>(),          // AutoTable初始化
     onTableDestroy: createSyncHooks<() => void>(),        // AutoTable销毁
-    onTableRender: createRenderHook(),                    // 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初始化动作
@@ -52,6 +53,7 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     onCollectSortData: createSyncHooks<(sortData: iTableSortData[]) => void>(true),    // 收集排序数据
     onQueryParam: createSyncHooks<(queryParam: iFilterHandlerQueryParam | null) => void>(),   // 收集筛选参数
     onTips: createSyncHooks<(tips: TableOptionSpace.iTableOptionTipMeta[]) => void>(true),              // 渲染提示
+    onClearFilter: createHooks<() => void>(),                               // 清空筛选动作
 
     /*---------------------------------------触发动作-------------------------------------------*/
     // 触发新建动作
@@ -62,8 +64,9 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     /*---------------------------------------table事件-------------------------------------------*/
     onClickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
     onDblclickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onClickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onDblclickCell: 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-------------------------------------------*/
@@ -128,5 +131,12 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     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,7 +1,7 @@
 import {Loading} from "../../Loading";
-import {reactive, RenderNode} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
-import {delay} from "plain-utils/utils/delay";
+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";
@@ -19,8 +19,10 @@ export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) =
     metas: [] as iTableOptionLoadingMeta[],
   });
 
+  const isLoading = () => !!state.metas.length;
+
   hooks.onTableRender.use({
-    processor: ({ list, render }) => {!!state.metas.length && list.push({ render, key: 'loading', seq: 0 });},
+    processor: ({ list, render }) => {isLoading() && list.push({ render, key: 'loading', seq: 0 });},
     render: () => (
       !!state.metas.length && <div className="auto-table-loading-wrapper">
         {(() => {
@@ -31,7 +33,7 @@ export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) =
             return (
               <div className="auto-table-loading-inner">
                 <Loading type="delta"/>
-                <span>{meta.message || i18n('base.loading').d('加载中')}</span>
+                <span>{meta.message || i18n.$it('base.loading').d('加载中')}</span>
               </div>
             );
           }
@@ -40,6 +42,10 @@ export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) =
     )
   });
 
+  hooks.onTableClass.use((classList) => {
+    isLoading() && classList.push('auto-table-loading');
+  });
+
   const minTimerDuration = 500;
 
   const loading = (meta?: Omit<iTableOptionLoadingMeta, 'id'>) => {
@@ -59,7 +65,7 @@ export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) =
     };
   };
 
-  return { state, loading };
+  return { state, loading, isLoading };
 });
 
 const nextLoadingId = createCounter('auto_table_loading');