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

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

@@ -1,6 +1,5 @@
-import {getComponentCls, mergeAttrs, RenderNode} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
-import {createProvider} from "../../utils/createProvider";
+import {createProvider, getComponentCls, mergeAttrs, RenderNode} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
 import {Icon} from "../Icon";
 import './dropdown.public.scss';
 import {ePopupTrigger} from "../usePopup/utils/popup.utils";
@@ -89,17 +88,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

@@ -1,16 +1,18 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useModel} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, reactive, useModel} from "@peryl/react-compose";
 import './dropdown.scss';
 import {DropdownContextProvider, DropdownOptionAlign, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownContext, iDropdownOptionContext, renderDropdownPanel} from "./dropdown.utils";
 import {findReactElement} from "../../utils/findReactElement";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {Scroll} from "../Scroll";
-import {delay} from "plain-utils/utils/delay";
-import {debounce} from "plain-utils/utils/debounce";
+import {delay} from "@peryl/utils/delay";
+import {debounce} from "@peryl/utils/debounce";
 import {DropdownOption} from "../DropdownOption";
 import {DropdownGroup} from "../DropdownGroup";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {Popup} from "../Popup";
 import {ePopupTrigger, iPopupAnimation, iPopupPlacement, iPopupTrigger} from "../usePopup/utils/popup.utils";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {removeUnit} from "@peryl/utils/removeUnit";
 
 export const Dropdown = designComponent({
   name: '-dropdown',
@@ -30,6 +32,7 @@ export const Dropdown = designComponent({
 
     id: { type: String },                                                                 // 调试plain-popper标识
     optionWidth: {},                                                                      // option选项宽度
+    scrollHeight: { type: Number },                                                       // 选项过多时自定义滚动高度
   },
   emits: {
     onUpdateModelValue: (val?: boolean) => true,
@@ -44,7 +47,9 @@ export const Dropdown = designComponent({
   scopeSlots: {
     reference: (scope: { open?: boolean }) => {},
   },
-  setup({ props, slots, event: { emit }, scopeSlots }) {
+  setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
+
+    const configuration = ApplicationConfigurationProvider.inject();
 
     const { styleComputed } = useStyle();
 
@@ -58,6 +63,14 @@ export const Dropdown = designComponent({
 
     const dropdownContentWidth = computed(() => !props.optionWidth ? undefined : unit(props.optionWidth as any)!);
 
+    const scrollHeight = computed((): number => {
+      if (props.scrollHeight != null) {return props.scrollHeight;}
+      const fontSize = Number(removeUnit(configuration.value.theme.vars[`font-size-${styleComputed.value.size}`]));
+      const paddingY = Number(removeUnit(configuration.value.theme.vars[`dropdown-size-${styleComputed.value.size}-padding-y`]));
+      const itemHeight = fontSize + paddingY * 2 + 6 + 2;
+      return itemHeight * 6;
+    });
+
     const handler: iDropdownContext["handler"] = {
       onClickOption: (optionContext) => {
         if (optionContext.hasChildren.value) {
@@ -99,7 +112,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({
@@ -110,7 +123,7 @@ export const Dropdown = designComponent({
       } else {
         return renderDropdownPanel({
           ...publicDropdownPanelParams,
-          attrs: { style: { height: '200px', width: dropdownContentWidth.value, }, key },
+          attrs: { style: { height: scrollHeight.value + 'px', width: dropdownContentWidth.value, }, key },
           content: <>
             <Scroll>
               {children}

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

@@ -1,4 +1,4 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 
 export const DropdownGroup = designComponent({
   name: 'dropdown-group',

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

@@ -1,7 +1,7 @@
-import {computed, designComponent, iMouseEvent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "@peryl/react-compose";
 import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
 import Icon from "../Icon";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 import {ePopupTrigger} from "../usePopup/utils/popup.utils";
 
 const nextOptionId = createCounter('dropdown-option');

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

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

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useStyles} from "plain-design-composition";
+import {designComponent, getComponentCls, useStyles} from "@peryl/react-compose";
 import './empty.scss';
 import i18n from "../i18n";
 
@@ -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,5 +1,5 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, watch} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed, designComponent, Fragment, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {Form} from "../Form";
 import {FormItem} from "../FormItem";
 import './filter-form-multiple.scss';
@@ -9,7 +9,7 @@ import {InputGroup} from "../InputGroup";
 import {Button} from "../Button";
 import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
 import {incrementalMerge} from "../../utils/incrementalMerge";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {Select} from "../Select";
 import {SelectOption} from "../SelectOption";
 import i18n from "../i18n";
@@ -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: {
@@ -91,9 +95,12 @@ export const FilterFormMultiple = designComponent({
      * @author  韦胜健
      * @date    2023.1.6 16:00
      */
-    const usingFilterOptions = computed(() => (props.filterOptions || []).map(i => (
-      { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
-    )));
+    const usingFilterOptions = computed(() => {
+      // console.warn('run usingFilterOptions');
+      return (props.filterOptions || []).map(i => (
+        { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
+      ));
+    });
 
     /**
      * props.filterOptions变化时更新内部状态
@@ -174,7 +181,6 @@ export const FilterFormMultiple = designComponent({
     const formAttrs = computed(() => {
       return {
         column: props.column,
-        labelAlign: 'right' as const,
         labelWidth: 100,
         ...props.formAttrs,
       };
@@ -218,7 +224,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,10 +240,12 @@ 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 })}
+                      <Fragment key={filterOption.filterHandler}>
+                        {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                      </Fragment>
                     </InputGroup>
                   </FormItem>
                 );
@@ -246,11 +256,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

@@ -1,5 +1,5 @@
-import {computed, designComponent, PropType, reactive, watch} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed, designComponent, Fragment, PropType, reactive, watch} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
 import {InputGroup} from "../InputGroup";
 import {Select} from "../Select";
@@ -8,7 +8,7 @@ import {FilterService} from "../FilterService";
 import {SelectOption} from "../SelectOption";
 import {incrementalMerge} from "../../utils/incrementalMerge";
 import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import i18n from "../i18n";
 
 export interface iFilterFormSingleState {
@@ -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,
@@ -47,7 +48,10 @@ export const FilterFormSingle = designComponent({
       }
     };
 
-    const state = reactive(deepcopy(props.initialState) || utils.createState({ filterOptions: props.filterOptions || [] }));
+    const state: iFilterFormSingleState = reactive(
+      deepcopy(props.initialState) ||
+      utils.createState({ filterOptions: props.filterOptions || [] })
+    );
 
     /**
      * 正在使用的目标filterOptions
@@ -111,7 +115,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 = {
@@ -141,22 +149,24 @@ export const FilterFormSingle = designComponent({
         <InputGroup style={{ width: props.width }}>
           {slots.prepend()}
           {!props.hideFieldSelector && (
-            <Select width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
+            <Select key="field_selector" width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
               {(props.filterOptions || []).map((option) => (
                 <SelectOption label={option.label} val={option.field} key={option.label + option.field}/>
               ))}
             </Select>
           )}
           {!props.hideHandlerSelector && (
-            <Select width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
+            <Select key={state.field} 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 })}
+          <Fragment key={state.filterHandler}>
+            {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
+          </Fragment>
           {!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

@@ -5,7 +5,7 @@ import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
 import {createAddressDescriptionGetter} from "./filter.province";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -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')!;
@@ -54,13 +54,14 @@ export function installFilterCity(
         );
       },
       getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value, field } = checkEmpty(formData, option);
+        const { isEmpty, value: _value, field } = checkEmpty(formData, option);
         if (isEmpty) {return;}
-        return { queries: [{ field, value: value.city, operator: eFilterOperator.eq }] };
+        const value = typeof _value === "string" ? _value : _value.city;
+        return { queries: [{ field, value: value, operator: eFilterOperator.eq }] };
       },
     })
     .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 +71,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);

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

@@ -23,7 +23,7 @@ export function installFilterDatetime(
   }: iFilterService) {
   touch<iFilterConfigDate>('datetime')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       getDescription: defaultRangeGetDescription,
       ...defaultRangeHandlerAttrs,
       render: ({ formData, option }) => <DatePicker
@@ -55,7 +55,7 @@ export function installFilterDatetime(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]} datetime/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);

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

@@ -5,7 +5,7 @@ import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
 import {createAddressDescriptionGetter} from "./filter.province";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -22,7 +22,7 @@ export function installFilterDistrict(
   }: iFilterService) {
   touch('district')
     .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 installFilterDistrict(
       },
     })
     .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]?.district;
         const service = $configuration.get('address')!;
@@ -55,13 +55,14 @@ export function installFilterDistrict(
         );
       },
       getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value, field } = checkEmpty(formData, option);
+        const { isEmpty, value: _value, field } = checkEmpty(formData, option);
         if (isEmpty) {return;}
-        return { queries: [{ field, value: value.district, operator: eFilterOperator.eq }] };
+        const value = typeof _value === "string" ? _value : _value.city;
+        return { queries: [{ field, value: value, operator: eFilterOperator.eq }] };
       },
     })
     .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="pcd" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -71,7 +72,7 @@ export function installFilterDistrict(
       },
     })
     .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="pcd" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

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

@@ -23,7 +23,7 @@ export function installFilterNumber(
 
   touch<iFilterConfigNumber>('number')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       ...defaultRangeHandlerAttrs,
       getDescription: defaultRangeGetDescription,
       render: ({ formData, option, confirm }) => (

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

@@ -4,7 +4,7 @@ import {Input} from "../../Input";
 import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -46,7 +46,7 @@ export function installFilterProvince(
   }: iFilterService) {
   touch('province')
     .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);
@@ -57,7 +57,7 @@ export function installFilterProvince(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: createAddressDescriptionGetter({ multiple: false, valueType: undefined }),
       render: ({ formData, option }) => (<AddressCascade v-model:province={formData[option.field!]} types="p"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -67,7 +67,7 @@ export function installFilterProvince(
       },
     })
     .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="p" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -77,7 +77,7 @@ export function installFilterProvince(
       },
     })
     .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="p" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

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

@@ -1,13 +1,14 @@
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 import {iFilterService} from "../index";
 import {eFilterOperator, iFilterOption} from "../utils/filter.service.utils";
 import {Select} from "../../Select";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import SelectDisplay from "../../SelectDisplay";
 import i18n from "../../i18n";
 
 export interface iFilterConfigSelect {
   renderOptions: () => RenderNode,
+  getSelectOptions: () => { label: string, val: any }[]
 }
 
 /**
@@ -32,7 +33,7 @@ export function installFilterSelect(
   }: iFilterService) {
   touch<iFilterConfigSelect>('select')
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: createDescriptionGetter({ multiple: false, valueType: undefined }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]}>{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {
@@ -42,7 +43,7 @@ export function installFilterSelect(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]} multiple valueType="arraystring">{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {
@@ -52,7 +53,7 @@ export function installFilterSelect(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]} multiple valueType="arraystring">{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {