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

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

@@ -0,0 +1,173 @@
+import {computed, onBeforeUnmount, reactive} from "@peryl/react-compose";
+import {createCounter} from '@peryl/utils/createCounter';
+import {delay} from "@peryl/utils/delay";
+
+export const AutoLoadingObserver = (() => {
+
+  const globalState = reactive({
+    /**
+     * 当前激活的observer，比如点击按钮的话，emit click事件之前激活这个按钮的observer，emit click之后清除这个observer
+     * @author  韦胜健
+     * @date    2024/3/20 16:11
+     */
+    currentObserver: null as null | { observerId: string },
+    /**
+     * 正在loading的observerId，值是一个数字，是subjectId；激活observer的时候可能会一次性并发执行多个异步任务，所以这里值是一个数字，当值清空的时候意味着关闭observer的加载状态
+     * @author  韦胜健
+     * @date    2024/3/20 16:11
+     */
+    loadingMap: {} as Record<string, string[] | undefined>
+  });
+
+  const utils = {
+    /*创建一个observerId*/
+    nextObserverId: createCounter('auto_loading_observer'),
+    /*创建一个subjectId*/
+    nextSubjectId: createCounter('auto_loading_subject'),
+  };
+
+  /**
+   * 创建一个observer，要记得组件销毁的时候执行dispose
+   * @author  韦胜健
+   * @date    2024/3/20 16:13
+   */
+  const useObserver = () => {
+    const observerId = utils.nextObserverId();
+    const tapStart = () => {globalState.currentObserver = { observerId };};
+    const tapEnd = () => {globalState.currentObserver = null;};
+    const isLoading = computed(() => !!globalState.loadingMap[observerId]?.length);
+    onBeforeUnmount(() => isLoading.effect.stop());
+    return reactive({ tapStart, tapEnd, isLoading });
+  };
+
+  /**
+   * 一个异步任务执行时，调用这个subject
+   * @author  韦胜健
+   * @date    2024/3/20 16:14
+   */
+  const subject = (promise: Promise<any>) => {
+    /*没有激活的observer，证明当前异步任务不需要开启loading*/
+    if (!globalState.currentObserver) {return;}
+
+    /*为本次执行异步任务创建一个subjectId*/
+    const subjectId = utils.nextSubjectId();
+    /*当前激活的observerId*/
+    const { observerId } = globalState.currentObserver;
+
+    /*关联subjectId与observerId，开启observer的加载状态*/
+    if (!globalState.loadingMap[observerId]) {
+      globalState.loadingMap = { ...globalState.loadingMap, [observerId]: [subjectId] };
+    } else {
+      globalState.loadingMap[observerId]!.push(subjectId);
+    }
+
+    const startDatetime = Date.now(); // 异步任务执行开始时间
+    const minDatetime = 1000;         // loading最小时间
+
+    /*不论成功或者失败，都解除关联subjectId与observerId*/
+    promise.finally(async () => {
+
+      /*异步任务执行结束之后，立即将observe放回去，因为可能是串行执行的异步任务，下一个异步任务也要延续这个observe的loading状态*/
+      globalState.currentObserver = { observerId };
+      delay().then(() => {globalState.currentObserver = null;});
+
+      /*如果耗费时间小于最小时间，则等待剩余的时间再关闭loading*/
+      const waitDatetime = startDatetime + minDatetime - Date.now();
+      if (waitDatetime > 0) {await delay(waitDatetime);}
+
+      const index = globalState.loadingMap[observerId]?.indexOf(subjectId);
+      if (index != null && index > -1) {
+        const arr = [...globalState.loadingMap[observerId]!];
+        arr.splice(index, 1);
+        if (arr.length) {
+          globalState.loadingMap[observerId] = arr;
+        } else {
+          const map = { ...globalState.loadingMap };
+          delete map[observerId];
+          globalState.loadingMap = map;
+        }
+      }
+
+    });
+  };
+
+  const request = (id: string, duraiton?: number) => {
+
+    const duration = duraiton || (Math.random() * 2000 + 1000);
+    const promise = delay(duration).then(() => {
+      console.log('request:', id);
+      return { id, duration };
+    });
+    AutoLoadingObserver.subject(promise);
+
+    return promise;
+  };
+
+  return {
+    useObserver,
+    subject,
+    globalState,
+    request,
+  };
+})();
+
+
+/*export const NextTick = (() => {
+
+  const generateNextTickId = createCounter('next_tick');
+  const nextTickMap = {} as Record<string, boolean | undefined>;
+
+  function clearNextTick(id: string) {
+    delete nextTickMap[id];
+  }
+
+  function setNextTick(fn: SimpleFunction) {
+    const id = generateNextTickId();
+    nextTickMap[id] = true;
+    console.log('nextTickMap', nextTickMap);
+
+    delay().then(() => {
+      if (id in nextTickMap) {
+        fn();
+        delete nextTickMap[id];
+      }
+    });
+
+    return id;
+  }
+
+  return {
+    clearNextTick,
+    setNextTick,
+  };
+})();
+
+export const NextTick_TEST = (() => {
+
+  const generateNextTickId = createCounter('next_tick');
+  const nextTickMap = {} as Record<string, boolean | undefined>;
+
+  function clearNextTick(id: string) {
+    delete nextTickMap[id];
+  }
+
+  function setNextTick(fn: SimpleFunction) {
+    const id = generateNextTickId();
+    nextTickMap[id] = true;
+    console.log('nextTickMap', nextTickMap);
+
+    delay(1000).then(() => {
+      if (id in nextTickMap) {
+        fn();
+        delete nextTickMap[id];
+      }
+    });
+
+    return id;
+  }
+
+  return {
+    clearNextTick,
+    setNextTick,
+  };
+})();*/

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, onBeforeUnmount, PropType, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, onBeforeUnmount, PropType, useClasses, useRefs} from "@peryl/react-compose";
 import {AutoTableScopeSlotsOption, AutoTableSlotsOption, iAutoTableRefer} from "./utils/AutoTable.utils";
 import './auto-table.scss';
 import {StyleProps, useStyle} from "../../uses/useStyle";
@@ -48,7 +48,7 @@ export const AutoTable = designComponent({
       refer,
       render: () => (
         <div className={classes.value} ref={onRefEl as any}>
-          {props.option.hooks.onTableRender.exec()}
+          {props.option.hooks.onTableOuterRender.exec()}
         </div>
       ),
     };

package/src/packages/components/AutoTable/auto-table.scss

@@ -1,7 +1,62 @@
 @include prefix(auto-table) {
   position: relative;
 
+  .auto-table-title {
+    font-size: 1.25em;
+    color: plv(text-1);
+  }
+
   @include sizeMixin(auto-table, (font-size)) {
+
+    .auto-table-title {
+      padding-bottom: $margin;
+    }
+
+    .table-operation-bar {
+      .table-operation-bar-left {
+        @include comp(input-group) {
+          display: inline-flex;
+        }
+
+        & > * + * {
+          margin-left: calc(#{$margin} / 2);
+        }
+      }
+    }
+
+    .#{componentName(auto-table-tips)} .auto-table-tips-item {
+      margin-top: $margin;
+      margin-bottom: $margin;
+    }
+
+    & > div {
+      padding: $margin;
+      background-color: plv(background-color);
+      border-radius: $border-radius;
+
+      & + div {
+        margin-top: $margin;
+      }
+    }
+
+    @include comp(table) {
+      &.table-border {
+        margin: $margin 0;
+      }
+    }
+
+    @include comp(auto-table-tips) {
+
+      & + .#{componentName(table)} {
+        &.table-border {
+          margin-top: 0;
+        }
+      }
+    }
+
+    & + .#{componentName(auto-table)}, & + .#{componentName(tab-group)} {
+      margin-top: $margin;
+    }
   }
 
   .virtual-table-head-table {
@@ -18,15 +73,11 @@
       cursor: pointer;
     }
   }
+
   .table-operation-bar {
-    .table-operation-bar-left {
-      @include comp(input-group) {
-        display: inline-flex;
-        & + button {
-          margin-left: 4px;
-        }
-      }
-    }
+    position: relative;
+    /*virtual-table-head-table-wrapper的z-index是4*/
+    z-index: 5;
   }
 
   &.filter-form-expanded {
@@ -63,6 +114,12 @@
       }
     }
   }
+
+  &.auto-table-loading {
+    .table-empty {
+      display: none;
+    }
+  }
 }
 
 @include comp(auto-table-tips) {
@@ -71,12 +128,12 @@
   .auto-table-tips-item {
     display: inline-flex;
     align-items: center;
-    font-size: inherit;
-    background-color: plv(primary-light-1);
-    border: solid 1px plv(primary-2);
-    color: plv(primary-6);
+    font-size: 12px;
+    background-color: plv(bg-2);
+    border: solid 1px plv(border-color);
+    color: plv(text-2);
     cursor: pointer;
-    margin: 4px 8px 4px 0;
+    margin-right: 8px;
     height: 1.8em;
     overflow: hidden;
     border-radius: plv(box-size-small-border-radius);
@@ -88,7 +145,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       position: relative;
-      padding: 0 4px;
+      padding: 0 0 0 4px;
 
       &:hover {
         text-decoration: underline;
@@ -101,15 +158,22 @@
       transition: background-color linear 300ms;
 
       &:hover {
-        background-color: plv(primary-2);
+        background-color: plv(secondary-2);
       }
     }
 
-    .auto-table-tips-separator {
-      width: 1px;
-      align-self: stretch;
-      background-color: plv(primary-2);
+    &[data-no-clear=true] {
+      .auto-table-tips-label {
+        padding-right: 4px
+      }
     }
+
+    /*    & + .#{componentName(button)} {
+          @include comp(icon) {
+            position: relative;
+            top: 2px;
+          }
+        }*/
   }
 }
 

package/src/packages/components/AutoTable/createTableOptionUser.tsx

@@ -29,6 +29,7 @@ import {useTableOptionState} from "./use/useTableOption.state";
 import {useTableOptionHooks} from "./use/useTableOption.hooks";
 import {useTableOptionPermission} from "./use/useTableOption.permission";
 import {AutoModule} from "./utils/AutoModule";
+import {useTableOptionAi} from "./use/useTableOption.ai";
 
 AutoModule.globalRegistrationManager.use(0, '_', (option) => {
   const applicationConfiguration = ApplicationConfigurationProvider.inject();
@@ -63,8 +64,9 @@ AutoModule.globalRegistrationManager.use(19, 'tips', useTableOptionTips);
 AutoModule.globalRegistrationManager.use(20, 'fill', useTableOptionFill);                               // 自动行数
 AutoModule.globalRegistrationManager.use(21, 'table', useTableOptionTable);                             // 渲染表格主体
 AutoModule.globalRegistrationManager.use(22, 'parent', useTableOptionParent);                           // 父表
+AutoModule.globalRegistrationManager.use(23, 'ai', useTableOptionAi);                                 // AI对话
 
-AutoModule.globalRegistrationManager.use(23, 'settingAllFilter', useTableOptionSettingAllFilter);       // 设置：所有筛选
+AutoModule.globalRegistrationManager.use(24, 'settingAllFilter', useTableOptionSettingAllFilter);       // 设置：所有筛选
 AutoModule.globalRegistrationManager.use(25, 'settingCache', useTableOptionSettingCache);               // 设置：缓存设置
 AutoModule.globalRegistrationManager.use(26, 'settingImport', useTableOptionSettingImport);             // 设置：导入数据
 AutoModule.globalRegistrationManager.use(27, 'settingExport', useTableOptionSettingExport);             // 设置：导出数据

package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx

@@ -1,9 +1,9 @@
 import {eAutoTableFilterMode} from "./useTableOption.filter.state";
-import {computed, reactive, useRefs} from "plain-design-composition";
+import {computed, reactive, useRefs} from "@peryl/react-compose";
 import {FilterFormMultiple, iFilterFormMultipleData} from "../../FilterFormMultiple";
 import {Button} from "../../Button";
 import {Tooltip} from "../../Tooltip";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {FilterService} from "../../FilterService";
 import {TableOptionSpace} from "../utils/TableOption.space";
 import '../utils/TableOption.space';
@@ -95,7 +95,7 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
   filterState.useState<iFilterFormMultipleData & { show: boolean }>({
     seq: 1,
     key: 'form-filter',
-    title: i18n('table.formFilter').d('表单筛选'),
+    title: i18n.$it('table.formFilter').d('表单筛选'),
     getActiveFilterCount: () => {
       const length = state.data?.filterQueryParam.queries?.length;
       return length == null ? 0 : length;
@@ -146,7 +146,7 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
   hooks.onRenderLeftOperation.use({
     processor: ({ list, render }) => {list.push({ key: 'form-filter-expander', seq: 1, render });},
     render: () => (
-      <Tooltip message={i18n('table.formQuery').d('表单查询')}><Button icon="pi-find-replace" onClick={methods.toggleShow}/></Tooltip>
+      <Tooltip message={i18n.$it('table.formQuery').d('表单查询')}><Button icon="pi-find-replace" onClick={methods.toggleShow}/></Tooltip>
     ),
   });
 
@@ -159,12 +159,14 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
     if (state.show) {list.push('filter-form-expanded');}
   });
 
-  hooks.onTableRender.use({
-    processor: ({ list, render }) => {list.push({ seq: 4.5, key: 'form-filter', render, });},
-    render: () => (
+  hooks.onTableOuterRender.use({
+    processor: ({ list, render }) => {
       !!filterOptions.value &&
       filterOptions.value.length > 0 &&
       state.show &&
+      list.push({ seq: 0, key: 'form-filter', render, });
+    },
+    render: () => (
       <FilterFormMultiple
         ref={onRef.filter}
         filterOptions={filterOptions.value!}
@@ -173,7 +175,7 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
         column={config.filterFormColumn}
         v-slots={{
           operation: () => (
-            <Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
+            <Button label={i18n.$it('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
           )
         }}
       />

package/src/packages/components/AutoTable/filter/useTableOption.filter.search.tsx

@@ -1,7 +1,7 @@
 import {eAutoTableFilterMode} from "./useTableOption.filter.state";
 import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
-import {computed, reactive, useRefs} from "plain-design-composition";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {computed, reactive, useRefs} from "@peryl/react-compose";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {$message} from "../../$message";
 import {TableOptionSpace} from "../utils/TableOption.space";
 import '../utils/TableOption.space';
@@ -51,8 +51,8 @@ export const useTableOptionFilterSearch = AutoModule.createRegistration((
      * @author  韦胜健
      * @date    2023.1.8 19:06
      */
-    onNormalSearch: () => {
-      methods.pageMethods.reload();
+    onNormalSearch: async () => {
+      await methods.pageMethods.reload();
     },
     /**
      * 当设置面板中的搜索栏值变化时取出来变化的值，更新到外部的filter form single组件实例中
@@ -77,7 +77,7 @@ export const useTableOptionFilterSearch = AutoModule.createRegistration((
   filterState.useState<iFilterFormSingleData>({
     seq: 1,
     key: 'search-filter',
-    title: i18n('table.searchBar').d('搜索栏'),
+    title: i18n.$it('table.searchBar').d('搜索栏'),
     getActiveFilterCount: () => {
       const length = state.data?.filterQueryParam.queries?.length;
       return length == null ? 0 : length;
@@ -136,7 +136,7 @@ export const useTableOptionFilterSearch = AutoModule.createRegistration((
           {...{
             filterOptions: filterOptions.value,
             initialState: state.data,
-            onSearch: handler.onNormalSearch,
+            handleSearch: handler.onNormalSearch,
             ...config.searchAttrs,
           }}
         />
@@ -153,7 +153,7 @@ export const useTableOptionFilterSearch = AutoModule.createRegistration((
     return TableOptionUtils.createTableOptionTipMeta({
       filterOption,
       formData: data.formData,
-      onClick: () => {$message(i18n('table.pleaseEditSearchParam').d('请直接编辑搜索栏筛选参数'));},
+      onClick: () => {$message(i18n.$it('table.pleaseEditSearchParam').d('请直接编辑搜索栏筛选参数'));},
       onClear: () => {
         data.filterQueryParam = {};
         refs.filter?.update({ ...data, });

package/src/packages/components/AutoTable/filter/useTableOption.filter.state.ts

@@ -1,8 +1,8 @@
 import {iTableOptionApplyCacheParam, iTableOptionGetCacheParam} from "../use/useTableOption.cache.utils";
-import {computed, reactive, RenderNode} from "plain-design-composition";
+import {computed, getCurrentDesignInstance, reactive, RenderNode} from "@peryl/react-compose";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
 import {createFilterOptions, iFilterOption} from "../../FilterService/utils/filter.service.utils";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import '../utils/TableOption.space';
 import {AutoModule} from "../utils/AutoModule";
 
@@ -84,9 +84,11 @@ export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks,
    * @author  韦胜健
    * @date    2023.1.3 21:29
    */
-  const clearAll = (reload?: boolean) => {
-    state.filters.forEach(i => i.clear());
-    reload !== false && methods.pageMethods.reload();
+  const clearAll = async (reload?: boolean) => {
+    await hooks.onClearFilter.exec(undefined);
+    /*等待所有filtersClear之后自动reload*/
+    await Promise.all(state.filters.map(i => i.clear()));
+    reload !== false && await methods.pageMethods.reload();
   };
 
   /**
@@ -102,6 +104,9 @@ export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks,
   const sourceFlatPlcList = computed(() => state.getSourceFlatPlcList?.().filter(i => (!!i.props.searchField || !!i.props.field) && !i.props.noFilter));
 
   const createComputedFilterOptions = (filterMode: typeof eAutoTableFilterMode.TYPE) => {
+    if (!getCurrentDesignInstance()) {
+      console.error(`createComputedFilterOptions can not use without component context.`);
+    }
     return computed(() => sourceFlatPlcList.value?.map((
       {
         props: {
@@ -176,8 +181,8 @@ export interface iFilterStateInitialization<CacheData> {
   applyCache: (param: iTableOptionApplyCacheParam<CacheData>) => void,            // 应用缓存
   getCache: (param: iTableOptionGetCacheParam) => any,                            // 获取缓存
   getActiveFilterCount: () => number,                                             // 显示当前有多少激活的筛选条件
-  getDisplay: () => (() => RenderNode),                                            // 在【所有筛选】面板中展示
-  clear: () => void,                                                              // 清空筛选条件
+  getDisplay: () => (() => RenderNode),                                           // 在【所有筛选】面板中展示
+  clear: () => void | Promise<void>,                                              // 清空筛选条件
 }
 
 /**

package/src/packages/components/AutoTable/setting/useTableOption.setting.all.fitler.tsx

@@ -1,5 +1,5 @@
 import {iFilterStateInitialization} from "../filter/useTableOption.filter.state";
-import {reactive, RenderNode} from "plain-design-composition";
+import {reactive, RenderNode} from "@peryl/react-compose";
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
 import {Empty} from "../../Empty";
 import {Button} from "../../Button";
@@ -38,7 +38,7 @@ export const useTableOptionSettingAllFilter = AutoModule.createRegistration((
 
   setting.useTableOptionSettingInner({
     key: eTableOptionSettingView.allFilter,
-    title: i18n('table.allFilter').d('所有筛选'),
+    title: i18n.$it('table.allFilter').d('所有筛选'),
     seq: 0.9,
     contentPending: false,
     beforeOpen: () => {
@@ -51,12 +51,12 @@ export const useTableOptionSettingAllFilter = AutoModule.createRegistration((
       <div className="auto-table-setting-all-filter">
         {state.renderFilters.length === 0 && (
           <div className="auto-table-setting-all-filter-empty">
-            <Empty label={i18n('table.noFilter').d('暂无筛选')}/>
+            <Empty label={i18n.$it('table.noFilter').d('暂无筛选')}/>
           </div>
         )}
         {state.renderFilters.length > 0 && (
           <div>
-            <Button label={i18n('table.clearAll').d('全部清空')} icon="pi-delete" status="error" onClick={removeAll}/>
+            <Button label={i18n.$it('table.clearAll').d('全部清空')} icon="pi-delete" status="error" onClick={removeAll}/>
           </div>
         )}
         {state.renderFilters.map(({ filter, display }, index) => {
@@ -64,7 +64,7 @@ export const useTableOptionSettingAllFilter = AutoModule.createRegistration((
             <div key={index} className="auto-table-setting-all-filter-item">
               <div className="auto-table-setting-all-filter-item-head">
                 <span>{filter.title}</span>
-                <Button icon="pi-close-circle" label={i18n('base.edit.remove').d('删除')} status="error" onClick={() => removeFilter(filter)} mode="text"/>
+                <Button icon="pi-close-circle" label={i18n.$it('base.edit.remove').d('删除')} status="error" onClick={() => removeFilter(filter)} mode="text"/>
               </div>
               <div className="auto-table-setting-all-filter-item-body">
                 {display()}

package/src/packages/components/AutoTable/setting/useTableOption.setting.cache.tsx

@@ -1,9 +1,9 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 import {iTableOptionCacheData, iTableOptionCacheItemData} from "../use/useTableOption.cache.utils";
-import {defer} from "plain-utils/utils/defer";
+import {defer} from "@peryl/utils/defer";
 import {$message} from "../../$message";
 import {$dialog} from "../../$dialog";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
 import {Button} from "../../Button";
 import {Tooltip} from "../../Tooltip";
@@ -44,13 +44,13 @@ export const useTableOptionSettingCache = AutoModule.createRegistration((
       editType: 'input',
       status: null,
       editValue: initialName,
-      title: i18n('table.pleaseInputThConfigurationName').d('请输入配置名称'),
+      title: i18n.$it('table.pleaseInputThConfigurationName').d('请输入配置名称'),
       confirmButton: true,
       cancelButton: true,
       size: config.size,
       handleConfirm: async ({ editValue }) => {
         if (editValue == null || String(editValue).trim().length === 0) {
-          $message(i18n('table.pleaseEnterNewConfigName').d('请输入新配置名称'));
+          $message(i18n.$it('table.pleaseEnterNewConfigName').d('请输入新配置名称'));
           return Promise.reject('invalid value!');
         } else {
           dfd.resolve(String(editValue));
@@ -78,12 +78,12 @@ export const useTableOptionSettingCache = AutoModule.createRegistration((
   };
 
   const copyConfig = async (cacheItemData: iTableOptionCacheItemData) => {
-    cache.copyCache(cacheItemData.id, await getConfigName(cacheItemData.title + '.' + i18n('table.bak').d('副本')));
+    cache.copyCache(cacheItemData.id, await getConfigName(cacheItemData.title + '.' + i18n.$it('table.bak').d('副本')));
     state.editCacheData = deepcopy(cache.state.cacheData);
   };
 
   const overrideCache = async (cacheItemData: iTableOptionCacheItemData) => {
-    await $dialog.confirm({ message: i18n('table.areYouSureToOverrideTheConfiguration', { title: cacheItemData.title }).d('确定要覆盖配置"{title}"为当前最新的配置吗？') }, { size: config.size });
+    await $dialog.confirm({ message: i18n.$it('table.areYouSureToOverrideTheConfiguration', { title: cacheItemData.title }).d('确定要覆盖配置"{title}"为当前最新的配置吗？') }, { size: config.size });
     cache.overrideCache(cacheItemData.id);
     state.editCacheData = deepcopy(cache.state.cacheData);
   };
@@ -94,16 +94,16 @@ export const useTableOptionSettingCache = AutoModule.createRegistration((
   };
 
   const innerOperationConfigs: iTableInnerOperationConfig[] = [
-    { label: i18n('base.edit.apply').d('应用'), position: 'inner', handler: ({ row }) => {applyCache(row as any);} },
-    { label: i18n('base.edit.rename').d('重命名'), position: 'inner', handler: ({ row }) => {renameCache(row as any);} },
-    { label: i18n('base.edit.remove').d('删除'), position: 'inner', handler: ({ row }) => {deleteCache(row as any);} },
-    { label: i18n('base.edit.override').d('覆盖'), position: 'inner', handler: ({ row }) => {overrideCache(row as any);} },
-    { label: i18n('base.edit.copy').d('复制'), position: 'inner', handler: ({ row }) => {copyConfig(row as any);} },
+    { label: i18n.$it('base.edit.apply').d('应用'), position: 'inner', handler: ({ row }) => {applyCache(row as any);} },
+    { label: i18n.$it('base.edit.rename').d('重命名'), position: 'inner', handler: ({ row }) => {renameCache(row as any);} },
+    { label: i18n.$it('base.edit.remove').d('删除'), position: 'inner', handler: ({ row }) => {deleteCache(row as any);} },
+    { label: i18n.$it('base.edit.override').d('覆盖'), position: 'inner', handler: ({ row }) => {overrideCache(row as any);} },
+    { label: i18n.$it('base.edit.copy').d('复制'), position: 'inner', handler: ({ row }) => {copyConfig(row as any);} },
   ];
 
   setting.useTableOptionSettingInner({
     key: eTableOptionSettingView.cache,
-    title: i18n('table.cacheSetting').d('缓存设置'),
+    title: i18n.$it('table.cacheSetting').d('缓存设置'),
     seq: 4,
     beforeOpen: () => {
       state.editCacheData = deepcopy(cache.state.cacheData);
@@ -112,10 +112,10 @@ export const useTableOptionSettingCache = AutoModule.createRegistration((
       return (
         <div className="auto-table-setting-cache">
           <div className="auto-table-setting-cache-operation">
-            <Tooltip message={i18n('table.clearFilterSortAndConfiguration').d("不使用任何筛选、排序以及个性配置，相当于恢复原始状态")}>
-              <Button label={i18n('table.withoutAnyConfiguration').d('不使用任何缓存配置')} icon="pi-drive-file" style={{ marginLeft: '8px' }} onClick={() => applyCache()}/>
+            <Tooltip message={i18n.$it('table.clearFilterSortAndConfiguration').d("不使用任何筛选、排序以及个性配置，相当于恢复原始状态")}>
+              <Button label={i18n.$it('table.withoutAnyConfiguration').d('不使用任何缓存配置')} icon="pi-drive-file" style={{ marginLeft: '8px' }} onClick={() => applyCache()}/>
             </Tooltip>
-            <Button label={i18n('table.saveToNewConfiguration').d('保存当前状态为新的缓存配置')} icon="pi-save" onClick={newCache} mode="fill"/>
+            <Button label={i18n.$it('table.saveToNewConfiguration').d('保存当前状态为新的缓存配置')} icon="pi-save" onClick={newCache} mode="fill"/>
           </div>
           <Table
             key="cache"
@@ -125,7 +125,7 @@ export const useTableOptionSettingCache = AutoModule.createRegistration((
             <PlcIndex/>
             <Plc
               align="center"
-              title={i18n('base.main').d('主要')}
+              title={i18n.$it('base.main').d('主要')}
               width={50}
               noPadding
               order={-9999}
@@ -134,8 +134,8 @@ export const useTableOptionSettingCache = AutoModule.createRegistration((
                   return <Radio modelValue={row.id === state.editCacheData.activeId} customReadonly onClick={() => applyCache(row as any)}/>;
                 }
               }}/>
-            <PlcTextarea title={i18n('table.cacheName').d('缓存名称')} field="title" fit width={120}/>
-            <Plc title={i18n('table.createTime').d('创建时间')} field="time" width={180}/>
+            <PlcTextarea title={i18n.$it('table.cacheName').d('缓存名称')} field="title" fit width={120}/>
+            <Plc title={i18n.$it('table.createTime').d('创建时间')} field="time" width={180}/>
             <PlcOperation operations={innerOperationConfigs}/>
           </Table>
         </div>