plain-design 1.0.0-beta.130 → 1.0.0-beta.132

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.130",
+  "version": "1.0.0-beta.132",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@peryl/icon": "0.0.8",
-    "@peryl/utils": "^0.1.72",
+    "@peryl/utils": "^0.1.73",
     "@types/color": "3.0.6",
     "@types/react-transition-group": "4.4.10",
     "color": "4.2.3",

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

@@ -38,6 +38,21 @@
       }
     }
 
+    @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;
     }
@@ -146,6 +161,12 @@
       }
     }
 
+    &[data-no-clear=true] {
+      .auto-table-tips-label {
+        padding-right: 4px
+      }
+    }
+
     /*    & + .#{componentName(button)} {
           @include comp(icon) {
             position: relative;

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

@@ -84,9 +84,10 @@ export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks,
    * @author  韦胜健
    * @date    2023.1.3 21:29
    */
-  const clearAll = (reload?: boolean) => {
+  const clearAll = async (reload?: boolean) => {
+    await hooks.onClearFilter.exec(undefined);
     state.filters.forEach(i => i.clear());
-    reload !== false && methods.pageMethods.reload();
+    reload !== false && await methods.pageMethods.reload();
   };
 
   /**

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

@@ -233,7 +233,7 @@ export const useTableOptionColumnPopper = AutoModule.createRegistration((
 
     const open = async (plc: tPlc) => {
       popperHandler.close();
-      const wrapperStyles = { width: '400px' };
+      const wrapperStyles = { width: '700px' };
       const field = plc.props.searchField || plc.props.field;
       if (!field) {return;}
       const excludeCode = nextPlcExcludeCode();

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

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

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

@@ -53,6 +53,7 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     onCollectSortData: createSyncHooks<(sortData: iTableSortData[]) => void>(true),    // 收集排序数据
     onQueryParam: createSyncHooks<(queryParam: iFilterHandlerQueryParam | null) => void>(),   // 收集筛选参数
     onTips: createSyncHooks<(tips: TableOptionSpace.iTableOptionTipMeta[]) => void>(true),              // 渲染提示
+    onClearFilter: createHooks<() => void>(),                               // 清空筛选动作
 
     /*---------------------------------------触发动作-------------------------------------------*/
     // 触发新建动作
@@ -63,8 +64,9 @@ export const useTableOptionHooks = AutoModule.createRegistration(() => {
     /*---------------------------------------table事件-------------------------------------------*/
     onClickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
     onDblclickRow: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onClickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
-    onDblclickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent }) => void>(),
+    onClickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
+    onDblclickCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
+    onContextmenuCell: createHooks<(data: { node: iTableNode, e: iMouseEvent, plc: tPlc }) => void>(),
     onClickHead: createHooks<(data: { plc: tPlcType, e: iMouseEvent }) => void>(),
 
     /*---------------------------------------load-------------------------------------------*/

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

@@ -30,7 +30,7 @@ export const useTableOptionPagination = AutoModule.createRegistration((
     createInitialData: (): iAutoTablePageData => {
       return {
         page: 1,
-        size: config.showRows,
+        size: config.pageSize || config.showRows,
         hasNext: true,
         total: null as null | number,
       };

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

@@ -1,6 +1,6 @@
 import {Table} from "../../Table";
 import {iTableNode} from "../../Table/table/utils/table.utils";
-import {tPlcType} from "../../Table/plc/utils/plc.utils";
+import {tPlc, tPlcType} from "../../Table/plc/utils/plc.utils";
 import {PlainObject} from "@peryl/utils/event";
 import '../utils/TableOption.space';
 import {PlcIndex} from "../../Table/standard/PlcIndex";
@@ -35,8 +35,9 @@ export const useTableOptionTable = AutoModule.createRegistration((
   const handler = {
     onClickRow: (node: iTableNode, e: iMouseEvent) => {hooks.onClickRow.exec({ node, e });},
     onDblclickRow: (node: iTableNode, e: iMouseEvent) => {hooks.onDblclickRow.exec({ node, e });},
-    onClickCell: (node: iTableNode, e: iMouseEvent) => {hooks.onClickCell.exec({ node, e });},
-    onDblclickCell: (node: iTableNode, e: iMouseEvent) => {hooks.onDblclickCell.exec({ node, e });},
+    onClickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => {hooks.onClickCell.exec({ node, e, plc });},
+    onDblclickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => {hooks.onDblclickCell.exec({ node, e, plc });},
+    onContextmenuCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => {hooks.onContextmenuCell.exec({ node, e, plc });},
     onClickHead: (plc: tPlcType, e: iMouseEvent) => {hooks.onClickHead.exec({ plc, e });},
     onCurrentChange: (data: PlainObject | null) => {hooks.onCurrentChange.exec(data);},
     onCollectPlcData: hooks.onCollectPlcData.exec,
@@ -73,6 +74,7 @@ export const useTableOptionTable = AutoModule.createRegistration((
             config: cache.tablePropsConfig,
             headRowHeight: config.headRowHeight,
             bodyRowHeight: config.bodyRowHeight,
+            ...config.tableProps,
             ...handler,
           })}
           v-slots={{ default: () => hooks.onRenderColumns.exec(), }}

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

@@ -77,10 +77,10 @@ export const RenderTableOptionTipItem = designComponent({
       }),
     });
     return () => (
-      <div onClick={props.tip.onClick} className="auto-table-tips-item">
+      <div onClick={props.tip.onClick} className="auto-table-tips-item" data-no-clear={!props.tip.onClear || props.tip.noClear}>
         <span className="auto-table-tips-label" ref={onRef.el}>{props.tip.display()}</span>
         <div className="auto-table-tips-separator"/>
-        {!!props.tip.onClear && <Icon className="auto-table-tips-close" icon="pi-close" onClick={props.tip.onClear}/>}
+        {!!props.tip.onClear && !props.tip.noClear && <Icon className="auto-table-tips-close" icon="pi-close" onClick={props.tip.onClear}/>}
       </div>
     );
   },

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

@@ -12,7 +12,7 @@ import {FilterFormSingle} from "../../FilterFormSingle";
 import {Pagination} from "../../Pagination";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
 import {iEffects} from '@peryl/utils/createEffects';
-import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
+import {iTableNode, iTablePropsType, iTableSortData} from "../../Table/table/utils/table.utils";
 import {eTableOptionEditType} from "./TableOption.utils";
 
 export namespace TableOptionSpace {
@@ -36,6 +36,7 @@ export namespace TableOptionSpace {
     loadOnStart?: boolean,                                              // 是否页面初始化的时候就加载数据
     copyDefaultExcludeKeys: string[],                                   // 复制一行的时候，不复制的属性
     showRows: number,                                                   // 显示的行数（自动计算表格的高度）
+    pageSize?: number,                                                  // 查询的行数
     showRowsMode: 'fixed' | 'auto',                                     // 显示行数的模式，自动根据 加载的数据展示还是固定行数
     sort?: iTableOptionSortParam | iTableOptionSortParam[],             // 排序方式
     getCache: (key: string) => iTableOptionCacheData | undefined,       // 获取缓存配置信息
@@ -68,7 +69,8 @@ export namespace TableOptionSpace {
     paginationAttrs?: Partial<typeof Pagination.use.props>,             // 给分页组件传递的属性设置
     parentOption?: Record<string, any>,                                 // 父表的option
     parentMap?: Record<string, any>,                                    // 父表的字段映射
-    minShowRows?: number,                                              // BaseTable的minShowRows
+    minShowRows?: number,                                               // BaseTable的minShowRows
+    tableProps?: Partial<iTablePropsType>,                              // 传递给table的控制属性
     // todo
     noHead?: boolean,                                                   // 不显示表头
   }
@@ -146,6 +148,7 @@ export namespace TableOptionSpace {
     display: () => RenderNode,
     onClear?: (e: iMouseEvent) => void,
     onClick: () => void,
+    noClear?: boolean,
   }
 
   /**

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

@@ -1,5 +1,5 @@
 import './button.scss';
-import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, onBeforeUnmount, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {throttle} from "@peryl/utils/throttle";
@@ -10,6 +10,7 @@ import {Loading} from "../Loading";
 import {ButtonGroup} from "../ButtonGroup";
 import {AutoLoadingObserver} from "../AutoLoadingObserver";
 import {useCollapseStyles} from "../../uses/useCollapseStyles";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export const Button = designComponent({
   name: '-button',
@@ -82,16 +83,22 @@ export const Button = designComponent({
       },
     });
 
+    const { effects: throttleClickEffects } = createEffects();
+    onBeforeUnmount(() => {throttleClickEffects.clear();});
+
     watch(
       () => props.throttleClick,
       (val) => {
+        throttleClickEffects.clear();
         if (!val) {
           return state.handleClick = state.handleClickInner;
         }
         if (val === true) {
           val = 1000;
         }
-        state.handleClick = throttle(state.handleClickInner, val, { trailing: false });
+        const throttleClickHandler = throttle(state.handleClickInner, val, { trailing: false });
+        throttleClickEffects.push(() => throttleClickHandler.dispose());
+        state.handleClick = throttleClickHandler;
       },
       { immediate: true }
     );

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -63,6 +63,7 @@ export function createSingleCascadeRender(
       state.inputValue = null;
     },
     onBlur: (e: FocusEvent) => {
+      if (!event.emit) {return;}
       event.emit.onBlur(e);
       props.inputAttrs?.onBlur?.(e);
       state.isFocus = false;

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

@@ -1,4 +1,4 @@
-import {computed, createHooks, designComponent, getComponentCls, iMouseEvent, mergeAttrs, nextIndex, nextTick, Portal, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {computed, createHooks, designComponent, getComponentCls, iMouseEvent, mergeAttrs, nextIndex, nextTick, onBeforeUnmount, Portal, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {DialogAlign, DialogAnimations, DialogCloseType, DialogPositions} from "./utils/dialog.utils";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
 import {unit} from "@peryl/utils/unit";
@@ -81,7 +81,6 @@ export const Dialog = designComponent({
     const { styleComputed } = useStyle();
 
     const { emit } = event;
-
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
     const open = useModel(() => props.open, emit.onUpdateOpen);
 
@@ -320,6 +319,11 @@ export const Dialog = designComponent({
       }, 300, { trailing: false }),
     };
 
+    onBeforeUnmount(() => {
+      methods.confirm.dispose();
+      methods.cancel.dispose();
+    });
+
     watch(() => model.value, async show => {
       await nextTick();
       await (show ? methods.show() : methods.hide());

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

@@ -11,6 +11,8 @@ import {DropdownGroup} from "../DropdownGroup";
 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,
@@ -46,6 +49,8 @@ export const Dropdown = designComponent({
   },
   setup({ props, slots, event: { emit }, scopeSlots, attrs }) {
 
+    const configuration = ApplicationConfigurationProvider.inject();
+
     const { styleComputed } = useStyle();
 
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
@@ -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) {
@@ -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/Form/form.scss

@@ -33,6 +33,10 @@
     box-sizing: border-box;
     position: relative;
     vertical-align: top;
+    .form-item-cell-tip {
+      color: plv(text-3);
+      vertical-align: -0.15em;
+    }
     .form-item-label {
       vertical-align: top;
       display: inline-block;

package/src/packages/components/Form/layout/useFormLayout.tsx

@@ -71,6 +71,7 @@ export const FormItemLayoutPropsOption = {
   colon: { type: Boolean as PropType<boolean | null>, default: null },                // label的冒号
   validateMessagePosition: { type: String as PropType<typeof FormValidateMessagePosition.TYPE> }, // 校验消息的位置
   negativeInnerMarginTop: { type: Boolean },                                          // inner节点启用负的marginTop值
+  tip: { type: [String, Function] as PropType<string | (() => any)> },                // 提示说明
 } as const;
 
 /**

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

@@ -5,6 +5,9 @@ import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {FormItemLayoutPropsOption, useFormLayout} from "../Form/layout/useFormLayout";
 import {useFormItemValidation} from "../Form/validate/useFormItemValidation";
 import {FormItemValidateMessage} from "./FormItemValidateMessage";
+import Tooltip from "../Tooltip";
+import {getFunctionValue} from "@peryl/utils/getFunctionValue";
+import Icon from "../Icon";
 
 export const FormItem = designComponent({
   name: '-form-item',
@@ -104,6 +107,10 @@ export const FormItem = designComponent({
               {slots.labelSlot(props.label)}
               {slots.labelAppend()}
               {formItemLayout.colon.value && <i> :</i>}
+              {!!props.tip && <Tooltip v-slots={{
+                default: () => <Icon icon="pi-info-circle" className="form-item-cell-tip"/>,
+                popper: () => getFunctionValue(props.tip)
+              }}/>}
             </div>
           )}
           <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>

package/src/packages/components/Input/useSuggestionInput.tsx

@@ -136,9 +136,10 @@ export function useSuggestionInput({ props, hooks, editComputed, styleComputed,
           searchText,
           props: {
             scrollNum: 6,
-            scrollHeight: 150,
+            scrollHeight: 200,
           },
           onRefScroll: innerOnRef.scroll,
+          scrollHeight: { value: 200 }
         });
         matchOptionPropsList = _matchOptionPropsList;
         return (

package/src/packages/components/Input/uses/useInputEnterHandler.tsx

@@ -40,15 +40,19 @@ export function useInputEnterHandler(
   };
 
   const enterHandler = reactive({ value: doNothing, });
+  const { effects: throttleEffects } = createEffects();
 
   watch(() => props.throttleEnter, (val) => {
+    throttleEffects.clear();
     if (!val) {
       enterHandler.value = innerHandler;
     }
     if (val === true) {
       val = 1000;
     }
-    enterHandler.value = throttle(innerHandler, val as number, { trailing: true });
+    const throttleHandler = throttle(innerHandler, val as number, { trailing: true });
+    throttleEffects.push(() => throttleHandler.dispose());
+    enterHandler.value = throttleHandler;
   }, { immediate: true });
 
   const handler = {
@@ -72,5 +76,8 @@ export function useInputEnterHandler(
     effects.push(() => {input.removeEventListener('keydown', handler.onKeydown);});
   });
 
-  onBeforeUnmount(() => effects.clear());
+  onBeforeUnmount(() => {
+    effects.clear();
+    throttleEffects.clear();
+  });
 }

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

@@ -0,0 +1,20 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+
+export const ListOption = designComponent({
+  name: 'list-option',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    label: { type: String }
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClassCache(() => [getComponentCls('list-option')]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default(props.label)}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,30 @@
+import {designComponent, getComponentCls, iHTMLDivElement, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './list-panel.scss';
+
+export const ListPanel = designComponent({
+  name: 'list-panel',
+  inheritPropsType: iHTMLDivElement,
+  props: {
+    ...StyleProps,
+    ...EditProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    useEdit();
+    const { styleComputed } = useStyle();
+
+    const classes = useClassCache(() => [
+      getComponentCls('list-panel'),
+      `list-panel-size-${styleComputed.value.size}`
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

package/src/packages/components/ListPanel/list-panel.scss

@@ -0,0 +1,20 @@
+@include comp(list-panel) {
+
+  padding: 0 2px;
+
+  @include sizeMixin(list-panel, ()) {
+
+    @include comp(list-option) {
+      font-size: $font-size;
+      padding: plv(dropdown-size-#{$name}-padding-y) plv(dropdown-size-#{$name}-padding-x);
+      border-radius: $border-radius;
+      margin: 2px 0;
+      cursor: pointer;
+      transition: all ease 300ms;
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+
+  }
+}

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

@@ -354,6 +354,7 @@ export const Scroll = designComponent({
           popper.event.off.onOpen(handler.popperOpen)
           popper.event.off.onShow(handler.popperShow)
       }*/
+      handler.windowResize.dispose();
     });
 
     watch(() => props.refreshState, methods.refresh);

package/src/packages/components/Select/createPublicSelectRender.tsx

@@ -22,6 +22,7 @@ export function createPublicSelectRender(
     slots,
     editComputed,
     styleComputed,
+    scrollHeight,
   }: iSelectCompositionParams,
   {
     isActivated,
@@ -123,7 +124,7 @@ export function createPublicSelectRender(
   const hover = createSelectHover({
     defaultCurrent,
     refs,
-    scrollHeight: () => props.scrollHeight,
+    scrollHeight: () => scrollHeight.value,
     getMatchOptionsLength: () => optionListHandler.getMatchOptionPropsList().length
   });
 
@@ -236,7 +237,7 @@ export function createPublicSelectRender(
           const render = () => {
             /*如果显示的选项大于6个，则使用虚拟滚动显示，否则直接显示*/
             return (matchOptionPropsList.length > props.scrollNum ?
-              (<div style={{ height: unit(props.scrollHeight)! }}>
+              (<div style={{ height: unit(scrollHeight.value)! }}>
                 <VirtualList data={matchOptionPropsList} size={(() => {
                   const { virtualRowSize } = props;
                   return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
@@ -260,6 +261,7 @@ export function createPublicSelectRender(
             props,
             onRefScroll: onRef.scroll,
             innerState,
+            scrollHeight,
           });
           optionPropsList = ret.optionPropsList;
           matchOptionPropsList = ret.matchOptionPropsList;

package/src/packages/components/Select/decodeSelectRenderNode.tsx

@@ -12,6 +12,7 @@ export function decodeSelectRenderNode(
     props,
     onRefScroll,
     innerState,
+    scrollHeight,
   }: {
     renderNode: RenderNode,
     searchText: string,
@@ -22,7 +23,8 @@ export function decodeSelectRenderNode(
       scrollHeight: number,
     },
     onRefScroll: (scroll: any) => void,
-    innerState?: { renderKey: string }
+    innerState?: { renderKey: string },
+    scrollHeight: { value: number },
   }) {
   const selectOptionDecoder = createSelectOptionDecoder();
   renderNode = deepCloneRenderNode(renderNode);
@@ -40,7 +42,7 @@ export function decodeSelectRenderNode(
     }
     /*如果显示的选项大于6个，则使用Scroll滚动显示，否则直接显示*/
     return (matchOptionPropsList.length > props.scrollNum ?
-      (<div style={{ height: unit(props.scrollHeight)! }}>
+      (<div style={{ height: unit(scrollHeight.value)! }}>
         <Scroll ref={onRefScroll}>
           {renderNode}
         </Scroll>

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, reactive, useClasses} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, reactive, useClasses} from "@peryl/react-compose";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {createSingleSelectRender} from "./createSingleSelectRender";
 import {createMultipleSelectRender} from "./createMultipleSelectRender";
@@ -10,6 +10,8 @@ import {createIsMatch} from "../../utils/isObjectCommonMatch";
 import Input from "../Input";
 import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {removeUnit} from "@peryl/utils/removeUnit";
 
 export const Select = designComponent({
   name: '-select',
@@ -21,6 +23,7 @@ export const Select = designComponent({
   setup({ props, slots, scopeSlots, event: { emit } }) {
 
     const parentPopupId = useParentPopupId();
+    const configuration = ApplicationConfigurationProvider.inject();
 
     const { editComputed } = useEdit();
     const { styleComputed } = useStyle();
@@ -53,6 +56,14 @@ export const Select = designComponent({
       }
     ]);
 
+    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 selectCompositionParams: iSelectCompositionParams = {
       props,
       classes,
@@ -64,6 +75,7 @@ export const Select = designComponent({
       styleComputed,
       isMatch: createIsMatch(props),
       getPublicPopperAttrs,
+      scrollHeight,
     };
 
     const methods = {

package/src/packages/components/Select/select.utils.tsx

@@ -53,7 +53,7 @@ export const SelectPropOptions = {
   handleFilterChange: { type: Function as PropType<(text: string) => void> },// 手动处理搜索值变化
 
   scrollNum: { type: Number, default: 6 },  // 最多显示的下拉个数，超过这个数就会滚动展示
-  scrollHeight: { type: Number, default: 150 },// 滚动展示下拉选项的时候的高度
+  scrollHeight: { type: Number, default: null },// 滚动展示下拉选项的时候的高度
 
   virtualData: { type: Array as PropType<iSelectOptionProps[]> },
   virtualRowSize: { type: Number },// 虚拟滚动的时候的行高
@@ -135,7 +135,8 @@ export type iSelectCompositionParams = {
   scopeSlots: tScopeSlotsType<typeof SelectScopeSlotsOption>,
   editComputed: tEditComputed,
   styleComputed: { value: { size: typeof ThemeSize.TYPE } },
-  classes: { value: any, }
+  classes: { value: any, },
+  scrollHeight: { value: number }
 }
 
 /**