@aloudata/aloudata-design 2.19.9 → 2.19.10

package/dist/AldSelect/interface.d.ts

@@ -22,6 +22,11 @@ export interface ISelectProps<ValueType = any, OptionType extends BaseOptionType
     dropdownClassName?: string;
     popupClassName?: string;
     placement?: PlacementType;
+    /**
+     * 空间不足时自动计算下拉面板最大高度并启用内部滚动，继承自 dropdown。
+     * 透传至底层 Dropdown 的 size middleware，避免短视口下面板溢出浏览器。
+     */
+    allowOverlap?: boolean;
     labelInValue?: boolean;
     options?: OptionType[];
     menu?: SelectMenuProps;

package/dist/MemberPicker/components/Panel.js

@@ -150,6 +150,8 @@ export default function Panel(props) {
       width: panelwidth
     }
   }, multiple ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-inner'
+  }, /*#__PURE__*/React.createElement("div", {
     className: "ald-member-picker-member-selection-wrapper"
   }, renderDropdown()), /*#__PURE__*/React.createElement(SelectedMemberTags, {
     className: 'ald-member-picker-selected-member-tags',
@@ -159,7 +161,7 @@ export default function Panel(props) {
     lockedIds: lockedIds,
     userList: dataList,
     renderSelectedTag: renderSelectedTag
-  }), /*#__PURE__*/React.createElement(SelectorFooter, {
+  })), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: onCancel,
     onOk: function onOk() {

package/dist/MemberPicker/index.js

@@ -35,6 +35,7 @@ import { EMemberPicker } from "./interface";
 import { isUser, isUserGroup } from "./utils/getUsersWithUserId";
 import AldSelect from "../AldSelect";
 var Component = function Component(props) {
+  var _props$allowOverlap;
   var _useContext = useContext(LocaleContext),
     locale = _useContext.locale;
   var t = getTranslator(locale);
@@ -63,6 +64,8 @@ var Component = function Component(props) {
     renderItem = props.renderItem,
     renderSelectedTag = props.renderSelectedTag,
     restProps = _objectWithoutProperties(props, _excluded);
+  // 自适应高度开关：默认开启，consumer 可显式传 allowOverlap={false} 关闭
+  var allowOverlap = (_props$allowOverlap = props.allowOverlap) !== null && _props$allowOverlap !== void 0 ? _props$allowOverlap : false;
   var _ConfigProvider$useGe = ConfigProvider.useGetUserList(),
     getUsersByIds = _ConfigProvider$useGe.getUsersByIds,
     getUsersByKeywords = _ConfigProvider$useGe.getUsersByKeywords;
@@ -263,6 +266,8 @@ var Component = function Component(props) {
   return /*#__PURE__*/React.createElement(AldSelect, _extends({
     prefix: propPrefix
   }, restProps, {
+    // 默认开启自适应高度，短视口下面板不再溢出浏览器
+    allowOverlap: allowOverlap,
     size: size,
     className: classNames('ald-member-picker-select', className),
     value: selectedUserList.map(function (item) {
@@ -322,7 +327,9 @@ var Component = function Component(props) {
       }
       _onClear === null || _onClear === void 0 ? void 0 : _onClear();
     },
-    popupClassName: classNames('ald-member-picker-popup', props.popupClassName),
+    popupClassName: classNames('ald-member-picker-popup',
+    // allowOverlap 开启时去掉列表固定高度，让面板高度由浮层 max-height 兜底
+    allowOverlap && 'ald-member-picker-popup-adaptive', props.popupClassName),
     mode: mode,
     options: selectedUserList.map(function (item) {
       if (item.type === EUserType.USER_GROUP) return {
@@ -354,7 +361,11 @@ var Component = function Component(props) {
     placeholder: placeholder,
     dropdownRender: function dropdownRender() {
       return /*#__PURE__*/React.createElement("div", {
-        ref: triggerRef
+        ref: triggerRef,
+        className: classNames({
+          // 自适应高度 flex 链：把浮层高度透传给面板
+          'ald-member-picker-popup-body': allowOverlap
+        })
       }, /*#__PURE__*/React.createElement(Panel, {
         type: type,
         footer: footer,

package/dist/MemberPicker/style/index.less

@@ -31,6 +31,12 @@
   }
 }
 
+// 上半区：选择列 + 已选列并排（footer 由 wrapper 排在其下方）
+.ald-member-picker-inner {
+  display: flex;
+  width: 100%;
+}
+
 .ald-member-picker-member-selection-wrapper {
   width: 50%;
   border-right: 1px solid var(--border-default);
@@ -84,6 +90,96 @@
   height: 260px;
 }
 
+// allowOverlap 自适应高度：把浮层 size middleware 的 max-height 沿 flex 链传到列表。
+// 面板上下分区——上半区(inner) flex 占满剩余高度、footer 固定最下，仅列表/已选内部滚动。
+.ald-member-picker-popup-adaptive {
+  display: flex;
+  flex-direction: column;
+
+  // SelectTrigger 的 popup 容器
+  .beta-ald-select-popup {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: 430px;
+  }
+
+  // dropdownRender 包裹层（triggerRef）
+  .ald-member-picker-popup-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // 面板根：flex 列，上半区占满、footer 固定底部
+  .ald-member-picker-wrapper {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  // 上半区：撑满剩余高度
+  .ald-member-picker-inner {
+    flex: 1;
+    min-height: 0;
+  }
+
+  // footer：自然高度，固定最下方
+  .ald-member-picker-selector-footer {
+    flex: 0 0 auto;
+  }
+
+  // 左侧选择列：撑满并把高度传给 Tabs
+  .ald-member-picker-member-selection-wrapper {
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // antd Tabs 撑满，把高度透传到 tabpane
+  .ald-member-tabs.ant-tabs {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+
+    .ant-tabs-content-holder {
+      flex: 1;
+      min-height: 0;
+    }
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+
+    .ant-tabs-tabpane {
+      height: 100%;
+    }
+  }
+
+  .ald-member-picker-member-list-wrap {
+    height: 100%;
+    min-height: 0;
+  }
+
+  // 列表去掉固定高度，flex 撑满剩余空间，内部滚动（user-list 类已是 flex:1）
+  .ald-member-picker-member-list {
+    height: auto !important;
+    min-height: 0;
+  }
+
+  // 右侧"已选"列：撑满 + 内部滚动
+  .ald-member-picker-selected-member-tags-wrap {
+    min-height: 0;
+    max-height: none;
+    overflow: hidden;
+  }
+}
+
 .ald-member-picker-selected-member-tags-wrap {
   width: 50%;
   max-height: 377px;
@@ -357,7 +453,7 @@
 }
 
 .ald-member-selected-member-wrapper {
-  height: calc(100% - 24px);
+  height: calc(100% - 32px) !important;
 }
 
 .ald-member-picker-ban-badge {