plain-design 1.0.0-beta.1 → 1.0.0-beta.100

package/src/packages/components/DatePicker/date.scss

@@ -141,7 +141,7 @@ $width: 276px;
 
           & > span {
             background-color: plv(primary-6);
-            color: white;
+            color: plv(pbfc);
           }
         }
       }
@@ -194,7 +194,7 @@ $width: 276px;
   }
 
   .date-base-panel-year-list {
-    background-color: plv(background-lite);
+    background-color: inherit;
     transition: all ease 300ms;
     position: absolute;
     left: 0;

package/src/packages/components/DatePicker/date.utils.tsx

@@ -9,7 +9,7 @@ import {classnames} from "plain-utils/dom/classnames";
 import {UseDateType} from "./panel/useDatePanel";
 import {eMultipleValueType} from "../../uses/useMultipleModel";
 import {EditProps, tEditComputed} from "../../uses/useEdit";
-import {StyleProps} from "../../uses/useStyle";
+import {StyleProps, tStyleComputed} from "../../uses/useStyle";
 import {Input} from "../Input";
 import i18n from "../i18n";
 import {iPopupEditorUseOption} from "../usePopupEditor";
@@ -100,9 +100,9 @@ export const getDefaultDateFormatter = (() => {
       case eDatePanel.date:
         return datetime ? DefaultDateFormatString.datetime : DefaultDateFormatString.date;
       case eDatePanel.week:
-        return i18n('formatter.week').d('gggg年第ww周');
+        return i18n.$it('formatter.week').d('gggg年第ww周');
       case eDatePanel.quarter:
-        return i18n('formatter.quarter').d('YYYY年第Q季度');
+        return i18n.$it('formatter.quarter').d('YYYY年第Q季度');
     }
     throw new Error(`can't recognise date panel:` + panel);
   }
@@ -390,6 +390,7 @@ export type tDateCompositionPublicParams = {
   },
   getPublicPopperAttrs: () => any,
   editComputed: tEditComputed,
+  styleComputed: tStyleComputed,
   getInheritPublicDateAttrs: () => any,
   displayPattern: { value: RegExp },
   today: { value: PDate },

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

@@ -20,7 +20,7 @@ import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter"
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
 
 export const DatePicker = designComponent({
-  name: '-date',
+  name: '-date-picker',
   props: DatePropsOptions,
   expose: {
     DatePanel,
@@ -62,7 +62,7 @@ export const DatePicker = designComponent({
       onReady: emit.onReady,
     });
 
-    const dateCompositionPublicParams: tDateCompositionPublicParams = { props, emit, hooks, slots, formatString, getPublicPopperAttrs, editComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin };
+    const dateCompositionPublicParams: tDateCompositionPublicParams = { props, emit, hooks, slots, formatString, getPublicPopperAttrs, editComputed, styleComputed, getInheritPublicDateAttrs, displayPattern, today, maxmin };
 
     useWatchAutoClear(() => ({
       range: props.range,

package/src/packages/components/DatePicker/panel/DatePanelDate.tsx

@@ -74,13 +74,13 @@ export const DatePanelDate = designComponent({
 
     const weekList = computed(() => {
       const weeks = [
-        i18n('week.sunday').d('日'),
-        i18n('week.monday').d('一'),
-        i18n('week.tuesday').d('二'),
-        i18n('week.wednesday').d('三'),
-        i18n('week.thursday').d('四'),
-        i18n('week.friday').d('五'),
-        i18n('week.saturday').d('六'),
+        i18n.$it('week.sunday').d('日'),
+        i18n.$it('week.monday').d('一'),
+        i18n.$it('week.tuesday').d('二'),
+        i18n.$it('week.wednesday').d('三'),
+        i18n.$it('week.thursday').d('四'),
+        i18n.$it('week.friday').d('五'),
+        i18n.$it('week.saturday').d('六'),
       ];
       return weeks.slice(props.firstWeekDay).concat(weeks.slice(0, props.firstWeekDay));
     });

package/src/packages/components/DatePicker/panel/DatePanelMonth.tsx

@@ -26,18 +26,18 @@ export const DatePanelMonth = designComponent({
   setup({ props, event: { emit } }) {
 
     const months = computed(() => [
-      i18n('month.january').d('一月'),
-      i18n('month.february').d('二月'),
-      i18n('month.march').d('三月'),
-      i18n('month.april').d('四月'),
-      i18n('month.may').d('五月'),
-      i18n('month.june').d('六月'),
-      i18n('month.july').d('七月'),
-      i18n('month.august').d('八月'),
-      i18n('month.september').d('九月'),
-      i18n('month.october').d('十月'),
-      i18n('month.november').d('十一月'),
-      i18n('month.december').d('十二月'),
+      i18n.$it('month.january').d('一月'),
+      i18n.$it('month.february').d('二月'),
+      i18n.$it('month.march').d('三月'),
+      i18n.$it('month.april').d('四月'),
+      i18n.$it('month.may').d('五月'),
+      i18n.$it('month.june').d('六月'),
+      i18n.$it('month.july').d('七月'),
+      i18n.$it('month.august').d('八月'),
+      i18n.$it('month.september').d('九月'),
+      i18n.$it('month.october').d('十月'),
+      i18n.$it('month.november').d('十一月'),
+      i18n.$it('month.december').d('十二月'),
     ]);
 
     const {

package/src/packages/components/DatePicker/useRangeDateRender.tsx

@@ -290,6 +290,7 @@ export function useRangeDateRender(
   );
 
   const getInputAttrs = () => ({
+    className: getComponentCls('date-picker'),
     ref: onRef.input,
     suffixIcon: 'pi-calendar',
     placeValue: [startModel.value, endModel.value].join('-'),

package/src/packages/components/Dialog/dialog.scss

@@ -12,7 +12,10 @@
   }
 
   .dialog-content {
-    background-color: plv(background-color);
+    background-color: plv(bg-3);
+    --#{componentName('background-color')}: #{plv(bg-3)};
+    --#{componentName('table-head-background')}: #{plv(bg-3)};
+
     border: solid 1px plv(border-color);
     display: flex;
     flex-direction: column;
@@ -108,8 +111,8 @@
           align-items: center;
           justify-content: center;
           z-index: 1;
-          right: -1px;
-          top: -1px;
+          right: 0;
+          top: 0;
           overflow: hidden;
           position: absolute;
           cursor: pointer;
@@ -138,7 +141,7 @@
 
           &:hover {
             @include prefix(icon) {
-              color: white;
+              color: plv(pbfc);
             }
 
             &:after {

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

@@ -16,6 +16,7 @@ import {InnerTransition} from "../../utils/InnerTransition";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {OpenController} from "../../utils/OpenController";
 import {ClientZoom} from "../../utils/ClientZoom";
+import {createTransitionHandler} from "../createTransitionHandler";
 
 export const Dialog = designComponent({
   name: '-dialog',
@@ -42,6 +43,7 @@ export const Dialog = designComponent({
 
     noContentPadding: { type: Boolean },                                                    // 去掉内容默认内边距
     noHead: { type: Boolean, },                                                             // 去掉默认弹框标题
+    noFoot: { type: Boolean },                                                              // 去掉底部内容
     noMask: { type: Boolean },                                                              // 去掉遮罩
     noClose: { type: Boolean },                                                             // 去掉关闭按钮
 
@@ -197,24 +199,13 @@ export const Dialog = designComponent({
      * @author  韦胜健
      * @date    2023/1/19 17:36
      */
-    const handleContentTransition = (() => {
-      const processState = { timer: null as any };
-      const process = async () => {
-        if (processState.timer != null) {
-          clearTimeout(processState.timer);
-          processState.timer = null;
-        }
-        if (!refs.content) {await delay();}
-        if (!refs.content) {return;}
-        const transitionDuration = Number(window.getComputedStyle(refs.content).transitionDuration.replace('s', '')) * 1000;
-        processState.timer = setTimeout(() => {
-          open.value = staticState.isShow;
-          staticState.isShow ? hooks.onOpen.exec(undefined) : hooks.onClose.exec(undefined);
-          processState.timer = null;
-        }, transitionDuration);
-      };
-      return process;
-    })();
+    const handleTransition = createTransitionHandler({
+      getTransitionElement: () => refs.content,
+      isOpen: open,
+      isShow: { get value() {return staticState.isShow;}, set value(newVal) {staticState.isShow = newVal;} },
+      onOpen: () => hooks.onOpen.exec(undefined),
+      onClose: () => hooks.onClose.exec(undefined),
+    });
 
     /**
      * 控制多次执行show的时候，只执行一次，避免派发多次onShow的情况
@@ -253,9 +244,9 @@ export const Dialog = designComponent({
         showing.start();
         if (!state.init) {
           state.init = true;
-          await delay();
+          await delay(23);
           if (!refs.content) {
-            await delay();
+            await delay(23);
           }
         } else {
           await nextTick();
@@ -270,7 +261,7 @@ export const Dialog = designComponent({
         model.value = true;
         await hooks.onShow.exec(undefined);
         staticState.isShow = true;
-        handleContentTransition();
+        handleTransition();
         showing.end();
       },
       hide: async () => {
@@ -288,7 +279,7 @@ export const Dialog = designComponent({
         model.value = false;
         await hooks.onHide.exec(undefined);
         staticState.isShow = false;
-        handleContentTransition();
+        handleTransition();
         hiding.end();
       },
       confirm: throttle(async () => {
@@ -406,7 +397,7 @@ export const Dialog = designComponent({
               <div className="dialog-content" ref={onRef.content} style={contentStyles.value}>
                 {!props.noHead && (
                   <div className="dialog-head" ref={onRef.head}>
-                    {slots.head(props.title || i18n('base.defaultTitle').d())}
+                    {slots.head(props.title || i18n.$it('base.defaultTitle').d("提示"))}
                     {!props.noClose && (
                       <div className="dialog-head-close" onClick={handler.onClickClose}>
                         <Icon icon="pi-close"/>
@@ -417,16 +408,16 @@ export const Dialog = designComponent({
                 <div className="dialog-body">
                   {slots.default()}
                 </div>
-                {(!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
+                {!props.noFoot && (!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
                   <div className="dialog-foot">
                     {slots.foot()}
                     {(() => {
                       const buttons = [
                         !!props.cancelButton && (
-                          <Button key="cancel" className="dialog-cancel-button" label={props.cancelButtonText || i18n('base.cancel').d('取消')} onClick={methods.cancel}/>
+                          <Button key="cancel" className="dialog-cancel-button" label={props.cancelButtonText || i18n.$it('base.cancel').d('取消')} onClick={methods.cancel}/>
                         ),
                         !!props.confirmButton && (
-                          <Button key="confirm" className="dialog-confirm-button" label={props.confirmButtonText || i18n('base.confirm').d('确定')} onClick={methods.confirm} mode="fill"/>
+                          <Button key="confirm" className="dialog-confirm-button" label={props.confirmButtonText || i18n.$it('base.confirm').d('确定')} onClick={methods.confirm} mode="fill"/>
                         )
                       ];
                       return (wrapperAttrs.value.position === DialogPositions.right) ? buttons.reverse() : buttons;

package/src/packages/components/Dialog/useDialogMovable.tsx

@@ -1,4 +1,5 @@
 import {watchEffect} from "plain-design-composition";
+import {ClientZoom} from "../..";
 
 export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement | undefined | null, content: HTMLElement | undefined | null }, movable: { value: boolean } }) {
 
@@ -20,9 +21,10 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
 
   const handler = {
     mousedown: (e: MouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState.start = {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: staticState.move.left,
         top: staticState.move.top,
       };
@@ -30,8 +32,9 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
       document.documentElement.addEventListener('mouseup', handler.mouseup);
     },
     mousemove: (e: MouseEvent) => {
-      staticState.move.x = e.clientX;
-      staticState.move.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
+      staticState.move.y = clientY;
 
       const durX = staticState.move.x - staticState.start.x;
       const durY = staticState.move.y - staticState.start.y;

package/src/packages/components/Dialog/utils/dialog.mouse.ts

@@ -1,12 +1,14 @@
 import {isSSR} from "../../../utils/isSSR";
+import {ClientZoom} from "../../..";
 
 export const DialogMouse = (() => {
   const state = { x: 0, y: 0 };
 
   if (!isSSR()) {
     document.documentElement.addEventListener('mousedown', e => {
-      state.x = e.clientX;
-      state.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      state.x = clientX;
+      state.y = clientY;
     }, true);
   }
 

package/src/packages/components/Dropdown/dropdown.public.scss

@@ -22,6 +22,16 @@
       transform-origin: left;
       font-weight: 700;
     }
+
+    &.dropdown-panel-size-equal {
+      width: 100%;
+    }
+
+    .dropdown-separator {
+      height: 1px;
+      background-color: plv(border-color);
+      margin: 2px 0;
+    }
   }
 
   &.dropdown-panel-align-center {

package/src/packages/components/Dropdown/dropdown.utils.tsx

@@ -89,17 +89,19 @@ export function renderDropdownPanel(
     attrs,
     externalClass,
     content,
+    sizeEqual,
   }: {
     size: string,
     align?: string,
     attrs?: any,
     externalClass?: any,
     content: RenderNode,
+    sizeEqual?: boolean,
   }
 ) {
   return (
     <div {...mergeAttrs({
-      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`],
+      class: [externalClass, getComponentCls('dropdown-panel'), `dropdown-panel-size-${size}`, `dropdown-panel-align-${align || DropdownOptionAlign.start}`, sizeEqual ? 'dropdown-panel-size-equal' : ''],
     }, attrs)}>
       {content}
     </div>

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

@@ -44,7 +44,7 @@ export const Dropdown = designComponent({
   scopeSlots: {
     reference: (scope: { open?: boolean }) => {},
   },
-  setup({ props, slots, event: { emit }, scopeSlots }) {
+  setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
 
     const { styleComputed } = useStyle();
 
@@ -99,7 +99,7 @@ export const Dropdown = designComponent({
         return node?.type?.use?.name === DropdownOption.use.name || node?.type?.use?.name === DropdownGroup.use.name;
       });
 
-      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align };
+      const publicDropdownPanelParams = { size: styleComputed.value.size, align: props.align, sizeEqual: attrs.sizeEqual };
 
       if (hasScroll || !dropdownOptions || dropdownOptions.length <= props.scrollOptionLength) {
         return renderDropdownPanel({

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "plain-design-composition";
 import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
 import Icon from "../Icon";
 import {createCounter} from "plain-utils/utils/createCounter";
@@ -18,7 +18,7 @@ export const DropdownOption = designComponent({
   },
   slots: ['default', 'content'],
   emits: {
-    onClick: (e: MouseEvent) => true,
+    onClick: (e: iMouseEvent) => true,
   },
   setup({ props, event: { emit }, slots }) {
 
@@ -38,7 +38,7 @@ export const DropdownOption = designComponent({
     };
 
     const handler = {
-      onClick: (e: MouseEvent) => {
+      onClick: (e: iMouseEvent) => {
         if (props.disabled || props.readonly) {return;}
         emit.onClick(e);
         dropdown.handler.onClickOption(dropdownOptionContext);

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

@@ -0,0 +1,8 @@
+import {designComponent} from "plain-design-composition";
+
+export const DropdownSeparator = designComponent({
+  name: 'dropdown-separator',
+  setup() {
+    return () => (<div className="dropdown-separator"/>);
+  },
+});

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

@@ -39,7 +39,7 @@ export const Empty = designComponent({
               p-id="22465"/>
           </svg>
         )}
-        {slots.default(props.label || (props.noMatch ? i18n('base.noMatch').d('暂无匹配') : i18n('base.noData').d('暂无数据')))}
+        {slots.default(props.label || (props.noMatch ? i18n.$it('base.noMatch').d('暂无匹配') : i18n.$it('base.noData').d('暂无数据')))}
       </div>
     );
   },

package/src/packages/components/FilterFormMultiple/filter-form-multiple.scss

@@ -3,10 +3,19 @@
   @include comp(form) {
     padding-left: 0 !important;
     padding-right: 0 !important;
-    margin: 0 !important;
     .form-inner {
       width: 100%;
     }
+
+    @include sizeMixin(form, ()) {
+      .filter-form-multiple-operation {
+        @include comp(button) {
+          & + button {
+            margin-left: $margin;
+          }
+        }
+      }
+    }
   }
 
   .filter-form-multiple-first-column {

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "plain-design-composition";
 import {PlainObject} from "plain-utils/utils/event";
 import {Form} from "../Form";
 import {FormItem} from "../FormItem";
@@ -44,10 +44,14 @@ export type iFilterFormMultipleData = iFilterFormMultipleState & { filterQueryPa
 export const FilterFormMultiple = designComponent({
   name: 'filter-form-multiple',
   props: {
-    filterOptions: { type: Array as PropType<iFilterOption[]> },
-    initialState: { type: Object as PropType<iFilterFormMultipleState> },
-    formAttrs: { type: Object as PropType<typeof Form.use.props> },
-    column: { type: Number, default: 3 },
+    filterOptions: { type: Array as PropType<iFilterOption[]> },            // 删选表单配置对象
+    initialState: { type: Object as PropType<iFilterFormMultipleState> },   // 初始值
+    formAttrs: { type: Object as PropType<typeof Form.use.props> },         // 给Form传递的属性
+    column: { type: Number, default: 3 },                                   // 列数
+    hideSearchButton: { type: Boolean },                                    // 隐藏查询按钮
+    hideResetButton: { type: Boolean },                                     // 隐藏重置按钮
+    searchButtonAttrs: { type: Object as PropType<PlainObject> },           // 给查询按钮传递的属性
+    resetButtonAttrs: { type: Object as PropType<PlainObject> },            // 给重置按钮传递的属性
   },
   slots: ['operation'],
   emits: {
@@ -174,7 +178,6 @@ export const FilterFormMultiple = designComponent({
     const formAttrs = computed(() => {
       return {
         column: props.column,
-        labelAlign: 'right' as const,
         labelWidth: 100,
         ...props.formAttrs,
       };
@@ -218,7 +221,9 @@ export const FilterFormMultiple = designComponent({
                 return (
                   <FormItem
                     class={isFirstColumn ? 'filter-form-multiple-first-column' : undefined}
-                    key={key} label={label}
+                    labelAlign={isFirstColumn ? 'left' : 'right'}
+                    key={key}
+                    label={label}
                     column={column}
                   >
                     <InputGroup>
@@ -232,7 +237,7 @@ export const FilterFormMultiple = designComponent({
                         width={100}
                       >
                         {filter.state.list.map((handler) => (
-                          <SelectOption label={handler!.label} val={handler!.name} key={handler!.name}/>
+                          <SelectOption label={handler!.label()} val={handler!.name} key={handler!.name}/>
                         ))}
                       </Select>
                       {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
@@ -246,11 +251,27 @@ export const FilterFormMultiple = designComponent({
               if (formColumn == null) {return 1;}
               return Number(formColumn) - usingFilterOptions.value.length % Number(formColumn);
             })()}>
-              <div className="filter-form-multiple-operation">
-                {slots.operation()}
-                <Button label={i18n('base.reset').d('重置')} icon="pi-delete" onClick={methods.reset}/>
-                <Button label={i18n('base.query').d('查询')} mode="fill" icon="pi-search" onClick={methods.search}/>
-              </div>
+              {(!props.hideResetButton || !props.hideSearchButton || slots.operation.isExist()) && (
+                <div className="filter-form-multiple-operation">
+                  {slots.operation()}
+                  {!props.hideResetButton && (
+                    <Button {...mergeAttrs({
+                      label: i18n.$it('base.reset').d('重置'),
+                      icon: "pi-delete",
+                      onClick: methods.reset
+                    }, props.resetButtonAttrs)}/>
+                  )}
+                  {!props.hideSearchButton && (
+                    <Button
+                      {...mergeAttrs({
+                        label: i18n.$it('base.query').d('查询'),
+                        icon: "pi-search",
+                        onClick: methods.search,
+                      }, props.searchButtonAttrs)}
+                    />
+                  )}
+                </div>
+              )}
             </FormItem>
           </Form>
         </div>

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

@@ -28,6 +28,7 @@ export const FilterFormSingle = designComponent({
     hideHandlerSelector: { type: Boolean },
     hideSearchButton: { type: Boolean },
     width: { type: String, default: '440px' },
+    handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
   },
   emits: {
     onSearch: (data: iFilterFormSingleData) => true,
@@ -37,7 +38,7 @@ export const FilterFormSingle = designComponent({
 
     const utils = {
       createState: ({ defaultField, filterOptions }: { defaultField?: string, filterOptions: iFilterOption[] }): iFilterFormSingleState => {
-        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
+        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n.$it('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
         const formData = FilterService.getDefaultFormData(filterOptions);
         return {
           field: defaultOption.field,
@@ -111,7 +112,11 @@ export const FilterFormSingle = designComponent({
        * @author  韦胜健
        * @date    2023.1.6 12:46
        */
-      search: async () => {emit.onSearch(await methods.getData());},
+      search: async () => {
+        const data = await methods.getData();
+        emit.onSearch(data);
+        await props.handleSearch?.(data);
+      },
     };
 
     const handler = {
@@ -150,13 +155,13 @@ export const FilterFormSingle = designComponent({
           {!props.hideHandlerSelector && (
             <Select width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
               {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
-                <SelectOption label={handler.label} val={handler.name} key={handler.name}/>
+                <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
               ))}
             </Select>
           )}
           {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
           {!props.hideSearchButton && (
-            <Button label={i18n('base.query').d('查询')} icon="pi-search" mode="fill" onClick={methods.search}/>
+            <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
           )}
           {slots.append()}
         </InputGroup>

package/src/packages/components/FilterService/filter/filter.city.tsx

@@ -22,7 +22,7 @@ export function installFilterCity(
   }: iFilterService) {
   touch('city')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -33,7 +33,7 @@ export function installFilterCity(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
         const val = formData[option.field]?.city;
         const service = $configuration.get('address')!;
@@ -60,7 +60,7 @@ export function installFilterCity(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -70,7 +70,7 @@ export function installFilterCity(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.date.tsx

@@ -23,7 +23,7 @@ export function installFilterDate(
   }: iFilterService) {
   touch<iFilterConfigDate>('date')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       getDescription: defaultRangeGetDescription,
       ...defaultRangeHandlerAttrs,
       render: ({ formData, option }) => <DatePicker
@@ -54,7 +54,7 @@ export function installFilterDate(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]}/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -63,7 +63,7 @@ export function installFilterDate(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]} multiple valueType="arraystring"/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -72,7 +72,7 @@ export function installFilterDate(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]} multiple valueType="arraystring"/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);