plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -1,4 +1,4 @@
-import {findParentElement} from "../../../utils/findParentElement";
+import {findParentElement} from "plain-utils/dom/findParentElement";
 import {hasClass} from "plain-utils/dom/hasClass";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
 import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, toRaw} from "plain-design-composition";
@@ -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,
           });
@@ -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

@@ -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

@@ -80,6 +80,7 @@ export const useTableOptionFill = AutoModule.createRegistration((
         };
       })();
 
+      await delay(73)
       /**
        * 计算可以用来渲染行的高度
        * parent.top+parent.height可以得到父节点底边界的top值；
@@ -101,7 +102,7 @@ export const useTableOptionFill = AutoModule.createRegistration((
       });*/
 
       /*计算撑满高度的行数*/
-      const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
+      const showRows = Math.floor(availableHeight / bodyRowHeight);
 
       /*更新分页查询信息*/
       pagination.state.size = showRows;

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

@@ -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初始化动作
@@ -128,5 +129,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

@@ -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');

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

@@ -63,7 +63,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
         await utils.selectCurrent(state.list[0][config.keyField]);
         return state.currentNode!;
       }
-      $notice.error(i18n('table.pleaseSelectOneRecord').d('请选中一条数据'));
+      $notice.error(i18n.$it('table.pleaseSelectOneRecord').d('请选中一条数据'));
       throw new Error('no current node');
     },
     ...(() => {
@@ -120,7 +120,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
         onAfterLoad?: (responseData: iUrlResponseData["query"]) => any,
         onLoaded?: (responseData: iUrlResponseData["query"]) => any,
       }) => {
-      const closeLoading = loading.loading({ message: i18n('base.loading').d('加载中') });
+      const closeLoading = loading.loading({ message: i18n.$it('base.loading').d('加载中') });
       try {
         await editMethods.save();
         if (!loadParam || loadParam.awaitInit !== false) {
@@ -161,6 +161,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       }
     };
     const reload = async (reloadParam?: { size?: number }) => {
+      if (!state.isInit) {state.isInit = true;}
       await load({
         page: 1,
         size: reloadParam?.size,
@@ -170,7 +171,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       });
     };
     const queryCount = async (): Promise<number> => {
-      const closeLoading = loading.loading({ message: i18n('table.queryTotal').d('查询总数') });
+      const closeLoading = loading.loading({ message: i18n.$it('table.queryTotal').d('查询总数') });
       try {
         const queryParam = await getLoadQueryParam();
         const responseData = await urlUtils.request({
@@ -210,7 +211,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
         await loadingMethods.save();
         node = node || await utils.getCurrentNode();
         if (!node) {
-          return $notice.warn(i18n('table.selectRowToDelete').d('请选中一行要删除的数据'));
+          return $notice.warn(i18n.$it('table.selectRowToDelete').d('请选中一行要删除的数据'));
         }
         const { page, size } = utils.getPageState();
         const { data, state: { index } } = node;
@@ -218,7 +219,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
           size: config.size,
           render: () => (
             <div style={{ minWidth: '300px', minHeight: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-              {i18n('table.areYouSureYouWantToDeleteTheData', { index: (page - 1) * size + index + 1 }).d(`确定要删除第${(page - 1) * size + index + 1}条数据吗？`)}
+              {i18n.$it('table.areYouSureYouWantToDeleteTheData', { index: (page - 1) * size + index + 1 }).d(`确定要删除第${(page - 1) * size + index + 1}条数据吗？`)}
             </div>
           )
         });
@@ -233,7 +234,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
             }
           });
           if (!!deleteResult.message) {
-            return $notice.error(`${i18n('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
+            return $notice.error(`${i18n.$it('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
           }
           await pageMethods.load();
         } finally {
@@ -244,7 +245,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
     })());
 
     const saveInsert = async (editRow: any) => {
-      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
+      const closeLoading = loading.loading({ message: i18n.$it('table.savingData').d('正在保存') });
       try {
         const saveRowPrev = await hooks.onBeforeSaveRow.exec(editRow);
         const newRowResult = await urlUtils.request({
@@ -281,7 +282,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
             const validateResult = await newNode.validate();
             if (!!validateResult) {
               const { validateResultData, node: { state: { index } } } = validateResult;
-              $message.error(`${i18n('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
+              $message.error(`${i18n.$it('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
               return Promise.reject(validateResult);
             }
             const saveRow = await saveInsert(newNode.state.editRow);
@@ -298,7 +299,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       const editForm = async () => {
         await table.formEditor.methods.edit({
           node: table.methods.createTableNode(newRowData, 0),
-          title: i18n('base.edit.edit').d('编辑'),
+          title: i18n.$it('base.edit.edit').d('编辑'),
           onConfirm: async (newNode) => {
             const saveRow = await saveInsert(newNode.state.editRow);
             state.list.unshift(saveRow);
@@ -325,7 +326,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       let newRows = batchInsertConfig?.rows || await (async () => {
         const num = await new Promise<number>((resolve, reject) => {
           $dialog({
-            title: i18n('table.pleaseEnterTheNumberOfRowsToCreate').d('请输入要新建的行数'),
+            title: i18n.$it('table.pleaseEnterTheNumberOfRowsToCreate').d('请输入要新建的行数'),
             size: config.size,
             editRequired: true,
             editType: 'number',
@@ -343,7 +344,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
     };
 
     const saveUpdate = async (editRow: any) => {
-      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
+      const closeLoading = loading.loading({ message: i18n.$it('table.savingData').d('正在保存') });
       try {
         const saveRowPrev = await hooks.onBeforeSaveRow.exec(editRow);
         const newRowResult = await urlUtils.request({
@@ -372,7 +373,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
             const validateResult = await node.validate();
             if (!!validateResult) {
               const { validateResultData, node: { state: { index } } } = validateResult;
-              $message.error(`${i18n('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
+              $message.error(`${i18n.$it('table.articleDataVerificationFailed', { index: index + 1 }).d(`第${index + 1}条记录校验不通过`)}，${validateResultData[0].label}:${validateResultData[0].message}`);
               return Promise.reject(validateResult);
             }
             const changeNode = utils.getChangeNode(node);
@@ -396,7 +397,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       const editForm = async () => {
         await state.getTable()!.formEditor.methods.edit({
           node,
-          title: i18n('base.edit.edit').d('编辑'),
+          title: i18n.$it('base.edit.edit').d('编辑'),
           onConfirm: async (updateNode) => {
             const saveRow = await saveUpdate(updateNode.state.editRow);
             await node.saveEdit(saveRow);
@@ -420,7 +421,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
         });
       });
       if (!Object.keys(editRow).length) {return;}
-      const closeLoading = loading.loading({ message: i18n('table.savingData').d('正在保存') });
+      const closeLoading = loading.loading({ message: i18n.$it('table.savingData').d('正在保存') });
       try {
         await urlUtils.request({
           type: 'batchUpdate',
@@ -442,7 +443,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
 
     const batchDelete = async () => {
       const rows = await check.openToCheck();
-      const closeLoading = loading.loading({ message: i18n('table.deleting').d('正在删除') });
+      const closeLoading = loading.loading({ message: i18n.$it('table.deleting').d('正在删除') });
       try {
         const deleteResult = await urlUtils.request({
           type: 'batchDelete',
@@ -452,9 +453,9 @@ export const useTableOptionMethods = AutoModule.createRegistration((
           beforeRequest: async requestConfig => {await hooks.onBeforeDelete.exec(requestConfig);}
         });
         if (!!deleteResult.message) {
-          return $notice.error(`${i18n('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
+          return $notice.error(`${i18n.$it('table.deleteFailed').d('删除失败')}：${deleteResult.message}`);
         }
-        $notice.success(i18n('table.deleteSucceed').d('删除成功'));
+        $notice.success(i18n.$it('table.deleteSucceed').d('删除成功'));
         confirm.close.clear();
         await pageMethods.load();
       } finally {
@@ -488,6 +489,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
   })();
 
   hooks.onTableSetup.use(() => {
+    if (state.isInit) {return;}
     if (config.loadOnStart !== false) {pageMethods.reload();}
   });
 

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

@@ -55,7 +55,7 @@ export const useTableOptionPagination = AutoModule.createRegistration((
         } else {
           const total = await tableMethods.pageMethods.queryCount();
           if (!total) {
-            const msg = i18n('table.queryTotalFailed').d('查询总数失败');
+            const msg = i18n.$it('table.queryTotalFailed').d('查询总数失败');
             $notice.error(msg);
             throw new Error(msg);
           }
@@ -71,6 +71,11 @@ export const useTableOptionPagination = AutoModule.createRegistration((
     pageSizeOptions: deepcopy(config.pageSizeOptions),
   });
 
+  if (!!config.showRows && state.pageSizeOptions.indexOf(config.showRows) === -1) {
+    const index = state.pageSizeOptions.findIndex(i => i > config.showRows);
+    state.pageSizeOptions.splice(index, 0, config.showRows);
+  }
+
   const handler = {
     onSizeChange: async (size: number) => {await methods.changeSize(size);},
     onJump: async (page: number) => {await methods.jump(page);},
@@ -109,13 +114,13 @@ export const useTableOptionPagination = AutoModule.createRegistration((
             ...config.paginationAttrs,
           }}
         >
-          <span>{i18n('base.total').d('总共')}</span>
+          <span>{i18n.$it('base.total').d('总共')}</span>
           {state.total == null ?
             <span className="auto-table-pagination-total-number" onClick={tableMethods.pageMethods.queryCount}>
               {total.value}+
               </span> :
             total.value}
-          <span>{i18n('base.data').d('条数据')}</span>
+          <span>{i18n.$it('base.data').d('条数据')}</span>
         </Pagination>
       </div>
     ),

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

@@ -79,7 +79,7 @@ export const useTableOptionSortState = AutoModule.createRegistration((
   filterState.useState({
     seq: 1,
     key: 'option-sort',
-    title: i18n('base.sort').d('排序'),
+    title: i18n.$it('base.sort').d('排序'),
     getActiveFilterCount: () => 0,
     applyCache() {/*do nothing*/},
     getCache: () => {/*do nothing*/},
@@ -127,9 +127,9 @@ export const useTableOptionSortState = AutoModule.createRegistration((
       if (!!state.data.singleParam) {
         const { field, desc } = state.data.singleParam;
         const title = tableState.getSourceFlatPlcList().find(i => i.props.field === field)?.props.title;
-        const sortType = desc ? i18n('base.desc').d('降序') : i18n('base.asc').d('升序');
+        const sortType = desc ? i18n.$it('base.desc').d('降序') : i18n.$it('base.asc').d('升序');
         list.push({
-          display: () => i18n('table.sortInTypeOrderOfField', { description: title + sortType }).d(`按照${title}${sortType}排序`),
+          display: () => i18n.$it('table.sortInTypeOrderOfField', { description: title + sortType }).d(`按照${title}${sortType}排序`),
           onClear: (e?: iMouseEvent) => {
             e?.stopPropagation();
             state.data.singleParam = null;
@@ -142,11 +142,11 @@ export const useTableOptionSortState = AutoModule.createRegistration((
       if (!!state.data.seniorParam?.length) {
         const description = state.data.seniorParam!.map(({ field, desc }) => {
           const title = tableState.getSourceFlatPlcList().find(i => i.props.field === field)?.props.title;
-          const sortType = desc ? i18n('base.desc').d('降序') : i18n('base.asc').d('升序');
+          const sortType = desc ? i18n.$it('base.desc').d('降序') : i18n.$it('base.asc').d('升序');
           return `${title}${sortType}`;
         }).join(',');
         list.push({
-          display: () => i18n('table.sortInTypeOrderOfField', { description }).d(`按照${description}排序`),
+          display: () => i18n.$it('table.sortInTypeOrderOfField', { description }).d(`按照${description}排序`),
           onClear: (e?: iMouseEvent) => {
             e?.stopPropagation();
             state.data.seniorParam = [];

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

@@ -14,6 +14,7 @@ declare module '../utils/TableOption.space' {
 
 export const useTableOptionState = AutoModule.createRegistration(({ config, hooks }) => {
   const state: TableOptionSpace.iTableOptionState = reactive({
+    isInit: false,
     getTable: () => null,
     getAutoTable: () => null,
     list: [],

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

@@ -5,7 +5,7 @@ import {PlainObject} from "plain-utils/utils/event";
 import '../utils/TableOption.space';
 import {PlcIndex} from "../../Table/standard/PlcIndex";
 import {AutoModule} from "../utils/AutoModule";
-import {iMouseEvent} from "plain-design-composition";
+import {Fragment, iMouseEvent} from "plain-design-composition";
 
 declare module '../utils/TableOption.space' {
   namespace TableOptionSpace {
@@ -46,11 +46,18 @@ export const useTableOptionTable = AutoModule.createRegistration((
   hooks.onRenderColumns.use({
     processor: ({ list, render }) => {list.push({ key: 'index', seq: 0, render });},
     render: () => <>
-      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size}/>}
-      {render.default()}
+      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size} key="key_standard_index"/>}
+      <Fragment key="key_option_render">{render.default()}</Fragment>
     </>
   });
 
+  hooks.onTableRender.use({
+    processor: ({ list, render }) => {config.title && list.push({ key: 'table_title', seq: 3, render });},
+    render: () => (
+      <div className="auto-table-title">{config.title}</div>
+    )
+  });
+
   hooks.onTableRender.use({
     processor: ({ list, render }) => {list.push({ key: 'table', seq: 5, render });},
     render: () => {

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

@@ -54,7 +54,7 @@ export const RenderTableOptionTips = designComponent({
           {tips.map((tip, index) => (
             <RenderTableOptionTipItem tip={tip} key={index}/>
           ))}
-          {!props.hideClearButton && <Button mode="text" icon="pi-delete" label={i18n('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
+          {!props.hideClearButton && <Button size="small" mode="text" icon="pi-delete" label={i18n.$it('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
         </div>
       );
     };

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -50,6 +50,7 @@ export namespace TableOptionSpace {
    * @date    2022.12.20 10:47
    */
   export interface iTableOptionCustomConfig {
+    title?: string,                                                     // 表格标题
     url?: iUrl,                                                         // 请求配置
     data?: any[],                                                       // 默认数据
     fill?: boolean,                                                     // 是否自动计算高度
@@ -118,6 +119,7 @@ export namespace TableOptionSpace {
    * @date    2023/2/7 9:47
    */
   export interface iTableOptionState {
+    isInit: boolean,
     getTable: () => null | iTableRefer,
     getAutoTable: () => null | iAutoTableRefer;
     list: PlainObject[],
@@ -160,6 +162,8 @@ export namespace TableOptionSpace {
    */
   export interface iTableOption {
     config: iTableOptionConfig;
+    useConfig: iTableOptionUseConfig,
+    defaultConfig: iTableOptionDefaultConfig,
     clone: iTableOptionClone;
   }
 

package/src/packages/components/AutoTable/utils/TableOption.utils.tsx

@@ -38,7 +38,7 @@ export const TableOptionUtils = (() => {
     if (description === null) {return null;}
     return {
       display: () => <>
-        {`${filterOption!.label}${handler.label}${!description ? '' : ':'}`}
+        {`${filterOption!.label} ${handler.label()} ${!description ? '' : ':'}`}
         {description}
       </>,
       onClick,

package/src/packages/components/Badge/badge.scss

@@ -18,7 +18,7 @@
     @include statusMixin(badge-content) {
       background-color: $color-6;
       border-radius: 100px;
-      color: white;
+      color: plv(pbfc);
     }
 
     &.badge-content-top {

package/src/packages/components/Box/box.scss

@@ -0,0 +1,6 @@
+@include comp(box) {
+
+  @include sizeMixin(box, (font-size, border-radius)) {
+  }
+
+}

package/src/packages/components/Box/index.tsx

@@ -0,0 +1,30 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './box.scss';
+
+export const Box = designComponent({
+  name: "box",
+  props: {
+    ...StyleProps,
+    ...EditProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { styleComputed } = useStyle();
+    useEdit();
+
+    const classes = useClassCache(() => [
+      getComponentCls('box'),
+      `box-size-${styleComputed.value.size}`,
+      `box-shape-${styleComputed.value.size}`,
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

package/src/packages/components/Button/button.scss

@@ -7,10 +7,11 @@
   outline: none;
   position: relative;
   text-align: center;
-  line-height: 1.5715;
+  line-height: plv(line-height);
   white-space: nowrap;
   display: inline-block;
   user-select: none;
+  z-index: 1;
 
   @include public-style;
 
@@ -37,7 +38,7 @@
     @include statusMixin(button) {
       background-color: $color-6;
       border-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       @include hover(button) {
         background-color: $color-4;
         border-color: $color-4;
@@ -108,6 +109,33 @@
     }
   }
 
+  &.button-mode-stroke {
+    @include statusMixin(button) {
+      background-color: plv(bg-2);
+      border-color: plv(secondary-light-3);
+      color: plv(text-2);
+
+      @include active(button) {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &:not(.button-disabled):hover {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &.button-disabled {
+        border-color: $color-2;
+        color: $color-2;
+      }
+    }
+
+    &:after {
+      //display: none !important;
+    }
+  }
+
   &.button-mode-text {
     padding: 0;
     min-width: initial;
@@ -141,17 +169,17 @@
     }
   }
 
-  .#{componentName(icon)} {
+  .#{componentName(icon)}, .#{componentName(loading)} {
     //vertical-align: text-top;
     position: relative;
-    top: 1px;
+    top: 0.15em;
   }
 
-  &:not(.button-icon-only) {
-    & > .button-icon {
-      margin-right: 4px;
-    }
-  }
+  //&:not(.button-icon-only) {
+  //  & > .button-icon {
+  //    margin-right: 4px;
+  //  }
+  //}
 
   &.button-no-padding {
     padding: 0;
@@ -168,4 +196,8 @@
   & > span + .#{componentName(icon)} {
     margin-left: 4px;
   }
+
+  &:hover {
+    z-index: 4;
+  }
 }