plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/packages/components/Application/service/useApplicationService.tsx

@@ -1,7 +1,8 @@
-import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "plain-design-composition";
-import {defer, DFD} from 'plain-utils/utils/defer';
-import {createCounter} from "plain-utils/utils/createCounter";
+import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "@peryl/react-compose";
+import {defer, DFD} from '@peryl/utils/defer';
+import {createCounter} from "@peryl/utils/createCounter";
 import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
+import {$previewer} from "../../$previewer";
 
 /**
  * applications渲染manager数组的时候，给manager传递的 getManagerData函数的返回值类型
@@ -104,6 +105,7 @@ export function useApplicationService() {
       render: () => (
         <Portal to="body">
           <div className={getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}>
+            {$previewer.render()}
             {state.managers.map(({ getManagerData, RenderComponent, dfd, id }, index) => {
               return (
                 <RenderComponent

package/src/packages/components/Application/theme/theme.ts

@@ -5,12 +5,22 @@ import {clearFields} from "../../../utils/clearFields";
 
 /*默认的基础色*/
 export const BaseColors = {
-  gray: '',
-  secondary: '',
-  primary: '#452feb',
-  success: '#00b42a',
-  warn: '#ff7d00',
-  error: '#f53f3f',
+  dark: {
+    gray: '',
+    secondary: '',
+    primary: '#5e53ff',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
+  light: {
+    gray: '',
+    secondary: '',
+    primary: '#452feb',
+    success: '#00b42a',
+    warn: '#ff7d00',
+    error: '#f53f3f',
+  },
 };
 
 /*基础的灰色*/
@@ -67,7 +77,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
 
   return {
     /*---------------------------------------base-------------------------------------------*/
-    'font-family': "Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif",
+    'font-family': `v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
     'scrollbar-size': '9px',
     'border-color': "rgba(0, 0, 0, .06)",
     'background-color': "#ffffff",
@@ -75,6 +85,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'background-hover': referenceVariable("gray-2"),
     'scrollbar-color': referenceVariable("gray-3"),
     'loading-mask-color': 'rgba(255,255,255,0.5)',
+    'line-height': '1.5715',
 
     'font-size-mini': '12px',
     'font-size-small': '12px',
@@ -87,12 +98,17 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'text-3': 'rgba(0,0,0,0.45)',
     'text-4': 'rgba(0,0,0,0.25)',
     'text-placeholder': 'rgba(0,0,0,0.35)',
+    /*---------------------------------------background-color-------------------------------------------*/
+    'bg-1': '#f2f3f5',
+    'bg-2': '#FFFFFF',
+    'bg-3': '#FFFFFF',
+    'bg-4': '#FFFFFF',
     /*---------------------------------------margin-------------------------------------------*/
     /*height of sizes*/
-    'margin-mini': '12px',
+    'margin-mini': '8px',
     'margin-small': '12px',
     'margin-normal': '16px',
-    'margin-large': '16px',
+    'margin-large': '20px',
     /*---------------------------------------box-------------------------------------------*/
     /*min-width of sizes*/
     'box-size-mini-min-width': '',
@@ -100,10 +116,10 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'box-size-normal-min-width': '68px',
     'box-size-large-min-width': '88px',
     /*height of sizes*/
-    'box-size-mini-height': '24px',
-    'box-size-small-height': '28px',
-    'box-size-normal-height': '32px',
-    'box-size-large-height': '36px',
+    'box-size-mini-height': '26px',
+    'box-size-small-height': '30px',
+    'box-size-normal-height': '34px',
+    'box-size-large-height': '40px',
     /*padding x of sizes*/
     'box-size-mini-padding': '0 11px',
     'box-size-small-padding': '0 15px',
@@ -116,21 +132,27 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'box-size-large-font-size': referenceVariable('font-size-normal'),
     /*border radius of sizes*/
     'box-size-mini-border-radius': '2px',
-    'box-size-small-border-radius': '2px',
-    'box-size-normal-border-radius': '2px',
-    'box-size-large-border-radius': '2px',
+    'box-size-small-border-radius': '4px',
+    'box-size-normal-border-radius': '6px',
+    'box-size-large-border-radius': '8px',
     /*---------------------------------------input-------------------------------------------*/
-    'input-padding-x': '11px',
+    'input-padding-x-mini': '9px',
+    'input-padding-x-small': '11px',
+    'input-padding-x-normal': '13px',
+    'input-padding-x-large': '15px',
+
+    'input-clear-size-mini': '16px',
+    'input-clear-size-small': '18px',
+    'input-clear-size-normal': '21px',
+    'input-clear-size-large': '23px',
     /*---------------------------------------dialog-------------------------------------------*/
     'dialog-mask-color': 'rgba(0,0,0,0.3)',
-    'dialog-head-padding-x': '20px',
-    'dialog-body-padding': '16px 20px',
+    'dialog-head-padding-x': '16px',
+    'dialog-body-padding': '16px 16px',
     'dialog-foot-padding': '8px 16px',
     'dialog-head-size': '48px',
     /*---------------------------------------message-------------------------------------------*/
-    'message-padding': '12px 20px',
     'message-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-    'message-font-size': referenceVariable('font-size-normal'),
     /*---------------------------------------notice-------------------------------------------*/
     'notice-padding': '20px 24px',
     'notice-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
@@ -162,11 +184,6 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'dropdown-size-normal-padding-y': '6px',
     'dropdown-size-large-padding-x': '10px',
     'dropdown-size-large-padding-y': '6px',
-    /*---------------------------------------input-------------------------------------------*/
-    'input-clear-size-mini': '16px',
-    'input-clear-size-small': '16px',
-    'input-clear-size-normal': '20px',
-    'input-clear-size-large': '20px',
     /*---------------------------------------tag-------------------------------------------*/
     'tag-size-mini-height': '20px',
     'tag-size-small-height': '22px',
@@ -183,7 +200,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
 }
 
 /*基础色*/
-type iThemeBaseColors = keyof typeof BaseColors
+type iThemeBaseColors = keyof typeof BaseColors.dark
 /*其他主题变量*/
 type iThemeOtherVars = keyof ReturnType<typeof createOtherVars>
 /*基础色衍生的变量*/
@@ -198,7 +215,7 @@ export interface iThemeConfiguration {
 
 export function createThemeConfigurationData(prefix: string | null, config?: DeepPartial<iThemeConfiguration>): iThemeConfiguration {
   const dark = config?.dark == undefined ? false : config.dark;
-  const base = { ...BaseColors, ...clearFields(config?.base) };
+  const base = { ...dark ? BaseColors.dark : BaseColors.light, ...clearFields(config?.base) };
   const referenceVariable = (varName: string): string => `var(--${!!prefix ? prefix + '-' : ''}${varName})`;
 
   const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
@@ -232,6 +249,7 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
       ...secondaryColorList,
       ...createGrayColors(dark, false),
       ...createGrayColors(dark, true),
+      ...base.primary.toLowerCase() === '#ffffff' ? { 'pbfc': 'black' } : { 'pbfc': 'white' },
       ...dark ? {
         'background-hover': '#3c3c4d',
         'scrollbar-color': '#141414',
@@ -244,6 +262,10 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
         'text-2': 'rgba(255,255,255,0.65)',
         'text-3': 'rgba(255,255,255,0.45)',
         'text-4': 'rgba(255,255,255,0.25)',
+        'bg-1': '#101014',
+        'bg-2': '#18181c',
+        'bg-3': '#18181c',
+        'bg-4': '#242429',
         'text-placeholder': 'rgba(255,255,255,0.35)',
         'dialog-mask-color': 'rgba(0,0,0,0.75)',
         // 'table-head-background': '#252527',

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,14 +1,11 @@
-import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
+import {ComputedRef, createRenderHook, inject, provide} from "@peryl/react-compose";
 import {iThemeConfiguration} from "../theme/theme";
-import {ThemeShape, ThemeSize} from "../../../uses/useStyle";
+import {UseStyleProvideData} from "../../../uses/useStyle";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export interface iApplicationConfiguration {
   theme: iThemeConfiguration;
-  default: {
-    size: typeof ThemeSize.TYPE,
-    shape: typeof ThemeShape.TYPE,
-    inputMode: 'flat' | 'stroke',
-  },
+  default: UseStyleProvideData['default'];
 }
 
 export const ApplicationConfigurationProvider = (() => {
@@ -21,6 +18,4 @@ export const ApplicationConfigurationProvider = (() => {
 
 export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
 
-export const ApplicationHooks = {
-  onRender: createRenderHook(),
-};
+export const ApplicationHooks = { onRender: createRenderHook({ effects: createEffects().effects }), };

package/src/packages/components/Application/utils/createServiceReadyObserver.ts

@@ -1,4 +1,4 @@
-import {createHooks, toRaw} from "plain-design-composition";
+import {createHooks, toRaw} from "@peryl/react-compose";
 
 export function createServiceReadyObserver<Option>() {
   const hook = createHooks<(data: { option: Option, ins: any }) => void>();

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "@peryl/react-compose";
 import Triangle from "../Triangle";
 import {ArrowStepCollector} from "../ArrowStepGroup";
 import {StepStatus, StepUtils} from "../StepGroup/step.utils";

package/src/packages/components/ArrowStepGroup/arrow-step.scss

@@ -32,7 +32,7 @@
       align-items: center;
       justify-content: center;
       padding: 0 16px;
-      color: white;
+      color: plv(pbfc);
     }
 
     .#{componentName(triangle)} {
@@ -73,7 +73,7 @@
     &.arrow-step-status-process, &.arrow-step-status-finish {
       .arrow-step-content {
         background-color: plv(primary-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -84,7 +84,7 @@
     &.arrow-step-status-success {
       .arrow-step-content {
         background-color: plv(success-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -95,12 +95,25 @@
     &.arrow-step-status-error {
       .arrow-step-content {
         background-color: plv(error-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
         color: plv(error-6);
       }
     }
+
+    &:first-child {
+      .arrow-step-content {
+        border-top-left-radius: plv(box-size-normal-border-radius);
+        border-bottom-left-radius: plv(box-size-normal-border-radius);
+      }
+    }
+    &:last-child {
+      .arrow-step-content {
+        border-top-right-radius: plv(box-size-normal-border-radius);
+        border-bottom-right-radius: plv(box-size-normal-border-radius);
+      }
+    }
   }
 }

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

@@ -1,9 +1,9 @@
 import './arrow-step.scss';
-import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../Dialog";
 import {StepUtils} from "../StepGroup/step.utils";
 import ArrowStep from "../ArrowStep";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export const ArrowStepGroup = designComponent({
   name: 'arrow-step-group',

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,46 @@
 @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;
+          & + button {
+            margin-left: $margin;
+          }
+        }
+      }
+    }
+
+    .#{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;
+      }
+    }
+
+    & + .#{componentName(auto-table)}, & + .#{componentName(tab-group)} {
+      margin-top: $margin;
+    }
   }
 
   .virtual-table-head-table {
@@ -18,15 +57,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 +98,12 @@
       }
     }
   }
+
+  &.auto-table-loading {
+    .table-empty {
+      display: none;
+    }
+  }
 }
 
 @include comp(auto-table-tips) {
@@ -71,12 +112,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 +129,7 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       position: relative;
-      padding: 0 4px;
+      padding: 0 0 0 4px;
 
       &:hover {
         text-decoration: underline;
@@ -101,15 +142,16 @@
       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);
-    }
+    /*    & + .#{componentName(button)} {
+          @include comp(icon) {
+            position: relative;
+            top: 2px;
+          }
+        }*/
   }
 }
 

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,13 +159,12 @@ 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, });},
+  hooks.onTableOuterRender.use({
+    processor: ({ list, render }) => {list.push({ seq: 0, key: 'form-filter', render, });},
     render: () => (
       !!filterOptions.value &&
       filterOptions.value.length > 0 &&
-      state.show &&
-      <FilterFormMultiple
+      state.show && <FilterFormMultiple
         ref={onRef.filter}
         filterOptions={filterOptions.value!}
         initialState={state.data}
@@ -173,7 +172,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}/>
           )
         }}
       />