@pisell/materials 1.8.41 → 1.8.42

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.js

@@ -3,9 +3,9 @@ const require_index = require("../../../../locales/index.js");
 const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_asyncToGenerator = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js");
 const require_index$1 = require("../../../pisellModal/index.js");
-const require_useDataSource = require("../../hooks/useDataSource.js");
 const require_index$2 = require("../../../pisellToast/index.js");
 const require_useVariables = require("../../hooks/useVariables.js");
+const require_useDataSource = require("../../hooks/useDataSource.js");
 const require_useComponentId = require("../../hooks/useComponentId.js");
 const require_index$3 = require("../filter/index.js");
 const require_usePagination = require("./usePagination.js");
@@ -27,7 +27,7 @@ dayjs = require_runtime.__toESM(dayjs);
 const useTableProps = (props) => {
 	var _originProps$dataSour;
 	const { originProps, openDrawer, closeDrawer, refreshData, handleFilterChange, tableRef, getInitialValues } = props;
-	const { title: propsTitle, subTitle: propsSubTitle, titleButtons, tableButtons, operation, filter: propsFilter, search, clickToDetail, onRow: propsOnRow, filterBy, onDeleteFinish, currentSettingKey, __id } = originProps;
+	const { title: propsTitle, subTitle: propsSubTitle, titleButtons, tableButtons, operation, filter: propsFilter, search, clickToDetail, onRow: propsOnRow, filterBy, currentSettingKey, __id } = originProps;
 	const { items, show, title: operationTitle, width, align, fixed, type } = operation || {};
 	const componentId = require_useComponentId.default(originProps);
 	const { list, destroy, update } = require_useDataSource.default();
@@ -65,7 +65,6 @@ const useTableProps = (props) => {
 						const deleteTime = (0, dayjs.default)().format("YYYY-MM-DD HH:mm:ss");
 						yield update === null || update === void 0 ? void 0 : update.runAsync(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, record), {}, { deleted_at: deleteTime }));
 					} else yield destroy === null || destroy === void 0 ? void 0 : destroy.runAsync(record.id);
-					onDeleteFinish === null || onDeleteFinish === void 0 || onDeleteFinish(record);
 					refreshData();
 					require_index$2.default({ content: require_index.getText("pisell-action-delete-success") });
 				}));

package/lib/components/dataSourceComponents/dataSourceTable/type.d.ts

@@ -75,7 +75,6 @@ interface DataSourceTableProps {
     }[];
   };
   onValuesChange?: (changedValues: any, values: any) => void;
-  onDeleteFinish?: (record: Record<string, any>) => void;
   extraParams?: {
     list?: Record<string, any>;
     get?: Record<string, any>;

package/lib/components/dataSourceComponents/dataSourceWrapper/BaseWrapper.js

@@ -1,6 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
-const require_useDataSource = require("../hooks/useDataSource.js");
 const require_useVariables = require("../hooks/useVariables.js");
+const require_useDataSource = require("../hooks/useDataSource.js");
 const require_useComponentId = require("../hooks/useComponentId.js");
 let react = require("react");
 react = require_runtime.__toESM(react);

package/lib/components/dataSourceComponents/fields/DatePicker/WithMode.js

@@ -7,10 +7,6 @@ let _pisell_utils = require("@pisell/utils");
 let dayjs = require("dayjs");
 dayjs = require_runtime.__toESM(dayjs);
 //#region src/components/dataSourceComponents/fields/DatePicker/WithMode.ts
-/**
-* @title: 带模式控制的 DatePicker 组件
-* @description: 支持 edit、view、disabled 等渲染模式的日期选择器
-*/
 const DatePickerWithMode = require_utils.withMode(require_datePickerCpt.default, require_ReadPretty.default, (props) => {
 	return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props), {}, { value: (0, _pisell_utils.isString)(props.value) && props.value ? (0, dayjs.default)(props.value) : props.value });
 });

package/lib/components/dataSourceComponents/fields/IconSelect/WithMode.js

@@ -1,5 +1,5 @@
-const require_utils = require("../../dataSourceForm/utils.js");
 const require_index = require("../../../iconSelect/index.js");
+const require_utils = require("../../dataSourceForm/utils.js");
 const require_ReadPretty = require("./ReadPretty.js");
 //#region src/components/dataSourceComponents/fields/IconSelect/WithMode.tsx
 const IconSelectWithMode = require_utils.withMode(require_index.default, require_ReadPretty.default);

package/lib/components/dataSourceComponents/fields/Input/WithMode.js

@@ -2,8 +2,8 @@ const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_objectWithoutProperties = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
 const require_index = require("../../../iconfont/index.js");
-const require_utils = require("../../dataSourceForm/utils.js");
 const require_index$1 = require("../../../pisellQRScanner/index.js");
+const require_utils = require("../../dataSourceForm/utils.js");
 const require_ReadPretty = require("./ReadPretty.js");
 let react = require("react");
 react = require_runtime.__toESM(react);

package/lib/components/dataSourceComponents/fields/Input.Phone/serve.js

@@ -14,10 +14,7 @@ const _excluded = ["appHelper"];
 */
 const getCountryDataList = function() {
 	var _ref = require_asyncToGenerator._asyncToGenerator(function* () {
-		const { data } = yield require_utils.request.getRequest().get(`/country:list`, {
-			page: 1,
-			pageSize: 999
-		}, {
+		const { data } = yield require_utils.request.getRequest().get(`/country:list`, {}, {
 			isNocobase: true,
 			fullResult: true,
 			headers: { "x-data-source": "pisell2" }

package/lib/components/dataSourceComponents/fields/Radio/WithMode.js

@@ -1,5 +1,5 @@
-const require_index = require("../../../radio/index.js");
 const require_utils = require("../../dataSourceForm/utils.js");
+const require_index = require("../../../radio/index.js");
 const require_ReadPretty = require("./ReadPretty.js");
 //#region src/components/dataSourceComponents/fields/Radio/WithMode.ts
 const RadioWithMode = require_utils.withMode(require_index.default, require_ReadPretty.default);

package/lib/components/dataSourceComponents/fields/TimePicker/WithMode.js

@@ -1,9 +1,9 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_usePisellConfig = require("../../../pisell-config-provider/hooks/usePisellConfig.js");
-const require_utils = require("../../dataSourceForm/utils.js");
-const require_utils$1 = require("../../../table/Table/utils.js");
+const require_utils = require("../../../table/Table/utils.js");
 const require_index = require("../../../select-time/index.js");
+const require_utils$1 = require("../../dataSourceForm/utils.js");
 const require_ReadPretty = require("./ReadPretty.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
@@ -66,7 +66,7 @@ const TimePicker = (props) => {
 		onChange: (timeString) => {
 			if (onChange) onChange(timeString ? (0, dayjs.default)(`${(0, dayjs.default)().format("YYYY-MM-DD")} ${timeString}`) : null, timeString || "");
 		},
-		timePickerProps: require_objectSpread2._objectSpread2({ format }, require_utils$1.omit(props, ["value", "defaultValue"]) || {}),
+		timePickerProps: require_objectSpread2._objectSpread2({ format }, require_utils.omit(props, ["value", "defaultValue"]) || {}),
 		popoverProps: {},
 		timeProps: {},
 		slice: 15
@@ -76,6 +76,6 @@ const TimePicker = (props) => {
 		defaultValue
 	}));
 };
-const TimePickerWithMode = require_utils.withMode(TimePicker, require_ReadPretty.default);
+const TimePickerWithMode = require_utils$1.withMode(TimePicker, require_ReadPretty.default);
 //#endregion
 exports.default = TimePickerWithMode;

package/lib/components/dataSourceComponents/hooks/useActions.js

@@ -3,12 +3,12 @@ const require_index = require("../../../locales/index.js");
 const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_useEngineContext = require("../../../hooks/useEngineContext.js");
 const require_asyncToGenerator = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js");
-const require_useDataSource = require("./useDataSource.js");
 const require_index$1 = require("../../pisellToast/index.js");
 const require_useFormat = require("../dataSourceTable/hooks/useFormat.js");
 const require_serve = require("../dataSourceForm/serve.js");
 const require_useVariables = require("./useVariables.js");
 const require_useParseActionsVariable = require("./useParseActionsVariable.js");
+const require_useDataSource = require("./useDataSource.js");
 let react = require("react");
 let ahooks = require("ahooks");
 //#region src/components/dataSourceComponents/hooks/useActions.ts

package/lib/components/dataSourceComponents/provider/dataSource/DataSourceProvider.js

@@ -1,8 +1,8 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_DataSourceContext = require("./DataSourceContext.js");
-const require_useDataSource = require("../../hooks/useDataSource.js");
 const require_useVariables = require("../../hooks/useVariables.js");
+const require_useDataSource = require("../../hooks/useDataSource.js");
 const require_useActions = require("../../hooks/useActions.js");
 const require_useSetRequest = require("../../../../hooks/useSetRequest.js");
 let react = require("react");

package/lib/components/drag-sort-tree/index.d.ts

@@ -1,6 +1,5 @@
 import { SortType } from "./types.js";
 import React from "react";
-
 //#region src/components/drag-sort-tree/index.d.ts
 declare const DragSortTree: (props: SortType) => React.JSX.Element;
 //#endregion

package/lib/components/drag-sort-tree/index.js

@@ -5,6 +5,7 @@ react = require_runtime.__toESM(react);
 let _dnd_kit_core = require("@dnd-kit/core");
 let _dnd_kit_sortable = require("@dnd-kit/sortable");
 let _dnd_kit_modifiers = require("@dnd-kit/modifiers");
+require("./index.less");
 //#region src/components/drag-sort-tree/index.tsx
 const DragSortTree = (props) => {
 	const { value, rowKey, tabKey, hiddenKeys, onChange } = props;

package/lib/components/drawer/index.js

@@ -14,7 +14,7 @@ let _pisell_icon_es_Pin02 = require("@pisell/icon/es/Pin02");
 _pisell_icon_es_Pin02 = require_runtime.__toESM(_pisell_icon_es_Pin02);
 require("./index.less");
 //#region src/components/drawer/index.tsx
-const _excluded = ["others"];
+const _excluded = ["others", "rootClassName"], _excluded2 = ["rootClassName"];
 const prefix = "pisell-lowcode-";
 const Title = (props) => {
 	const { placement, onClose, showPin, persistentState, setPersistentState } = props;
@@ -27,7 +27,8 @@ const Title = (props) => {
 	}, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_Pin02.default, null)));
 };
 const Drawer = (props) => {
-	const { others } = props, resetProps = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	const { others, rootClassName } = props, resetProps = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
+	const _ref = others || {}, { rootClassName: othersRootClassName } = _ref, restOthers = require_objectWithoutProperties._objectWithoutProperties(_ref, _excluded2);
 	const { operateMode, headerStyle, placement, onClose, showPin, width, getContainer, open } = props;
 	const [persistentState, setPersistentState] = (0, ahooks.useControllableValue)(props, {
 		trigger: "onPersistentChange",
@@ -81,10 +82,7 @@ const Drawer = (props) => {
 				setPersistentState
 			})
 		};
-		return require_objectSpread2._objectSpread2({
-			rootClassName: `${prefix}basic-drawer-root`,
-			closeIcon: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_XClose.default, { className: `${prefix}drawer-header-close-icon` })
-		}, headerStyle);
+		return require_objectSpread2._objectSpread2({ closeIcon: /* @__PURE__ */ react.default.createElement("span", { className: `${prefix}drawer-header-close-icon` }, /* @__PURE__ */ react.default.createElement(_pisell_icon_es_XClose.default, null)) }, headerStyle);
 	}, [
 		operateMode,
 		placement,
@@ -92,7 +90,8 @@ const Drawer = (props) => {
 		persistentState,
 		setPersistentState
 	]);
-	return /* @__PURE__ */ react.default.createElement(antd.Drawer, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, resetProps), innerProps), otherProps), others));
+	const mergedRootClassName = (0, classnames.default)(operateMode !== "outside" && `${prefix}basic-drawer-root`, rootClassName, othersRootClassName);
+	return /* @__PURE__ */ react.default.createElement(antd.Drawer, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, resetProps), innerProps), otherProps), restOthers), {}, { rootClassName: mergedRootClassName || void 0 }));
 };
 //#endregion
 exports.default = Drawer;

package/lib/components/filter/components/Dropdown/index.js

@@ -6,6 +6,8 @@ const require_index$2 = require("../../../MultipleContainersSortList/index.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let antd = require("antd");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let _pisell_icon_es_DotsSix = require("@pisell/icon/es/DotsSix");
 _pisell_icon_es_DotsSix = require_runtime.__toESM(_pisell_icon_es_DotsSix);
 let _pisell_icon_es_HelpCircle = require("@pisell/icon/es/HelpCircle");
@@ -23,7 +25,7 @@ const DragItem = react.default.forwardRef((props, ref) => {
 	}))), /* @__PURE__ */ react.default.createElement("div", { className: "filter-dropdown-drag-item-right" }, props.children));
 });
 const Dropdown = (props) => {
-	const { quickFilter, hiddenQuickFilter, hiddenOtherFilter, otherFilter, onChange, quickFilterMaxLength, formFiltersPrefix, onOpen, onClose, renderItem } = props;
+	const { quickFilter, hiddenQuickFilter, hiddenOtherFilter, otherFilter, onChange, quickFilterMaxLength, formFiltersPrefix, onOpen, onClose, renderItem, phoneLayout, className } = props;
 	const list = (0, react.useMemo)(() => {
 		const _list = {};
 		if (!hiddenQuickFilter) _list.quickFilter = quickFilter || [];
@@ -56,7 +58,7 @@ const Dropdown = (props) => {
 			className: "filter-dropdown-container-filter-wrap"
 		}, children));
 	}, [quickFilterMaxLength, getTooltipTitle]);
-	return /* @__PURE__ */ react.default.createElement("div", { className: "filter-dropdown-wrap" }, /* @__PURE__ */ react.default.createElement("div", { className: "filter-dropdown-wrap-content" }, /* @__PURE__ */ react.default.createElement(require_index$2.default, {
+	return /* @__PURE__ */ react.default.createElement("div", { className: (0, classnames.default)("filter-dropdown-wrap", className) }, /* @__PURE__ */ react.default.createElement("div", { className: "filter-dropdown-wrap-content" }, /* @__PURE__ */ react.default.createElement(require_index$2.default, {
 		list,
 		rowKey: "name",
 		renderContainer,
@@ -76,6 +78,7 @@ const Dropdown = (props) => {
 			onClose
 		}) : /* @__PURE__ */ react.default.createElement(require_index$1.default, {
 			key: name.join("-"),
+			phoneLayout,
 			name,
 			label: item.label,
 			type: item.type,

package/lib/components/filter/components/Dropdown/index.less

@@ -7,6 +7,192 @@
   max-height: 60vh;
   max-width: 80vw;
   overflow: auto;
+
+  &--phone-drawer {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    max-height: none;
+    padding: 0;
+    overflow: visible;
+
+    .filter-dropdown-container-title-wrap {
+      display: none;
+    }
+
+    .filter-dropdown-wrap-content {
+      padding: 0;
+    }
+
+    .filter-dropdown-container-wrap {
+      min-height: 0;
+      margin-bottom: 8px;
+    }
+
+    .filter-dropdown-container-filter-wrap {
+      min-height: 0;
+      padding: 0;
+    }
+
+    .filter-dropdown-drag-item {
+      align-items: flex-start;
+      padding: 3px 4px 4px;
+      margin-bottom: 4px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .dots-six-icon {
+        margin-top: 1px;
+        font-size: 16px;
+      }
+
+      /**
+       * Form size=small + 抽屉内二次收紧：标题 12px，控件约 28px（低于此前 32px）。
+       */
+      .filter-dropdown-form-item--phone {
+        .pisell-lowcode-form-item-label {
+          padding: 0 0 2px;
+
+          > label {
+            font-size: 12px;
+            font-weight: 600;
+            line-height: 16px;
+            color: var(--gray-700, #344054);
+          }
+        }
+
+        .pisell-single-select {
+          height: auto !important;
+          min-height: 0 !important;
+        }
+
+        .pisell-lowcode-select-selector,
+        .ant-select-selector {
+          min-height: 28px !important;
+          height: 28px !important;
+          padding-block: 0 !important;
+          padding-inline: 8px !important;
+          align-items: center;
+          border-radius: 8px;
+        }
+
+        .pisell-lowcode-select-selection-item,
+        .pisell-lowcode-select-selection-placeholder,
+        .ant-select-selection-item,
+        .ant-select-selection-placeholder {
+          font-size: 12px !important;
+          line-height: 16px !important;
+        }
+
+        .pisell-lowcode-input-affix-wrapper,
+        .ant-input-affix-wrapper {
+          min-height: 28px;
+          padding-block: 0;
+          padding-inline: 8px;
+          border-radius: 8px;
+        }
+
+        .pisell-lowcode-input,
+        .ant-input {
+          font-size: 12px;
+          line-height: 16px;
+        }
+
+        .pisell-lowcode-picker,
+        .ant-picker {
+          min-height: 28px;
+          padding-block: 0;
+          padding-inline: 8px;
+          border-radius: 8px;
+          font-size: 12px;
+          line-height: 16px;
+        }
+
+        .pisell-lowcode-picker-input > input {
+          font-size: 12px;
+          line-height: 16px;
+        }
+
+        /** 手机日期范围（顶栏 toolbar 变体在抽屉内同步压到 28px） */
+        .pisell-mobile-date-range-picker__trigger {
+          height: 28px;
+          min-height: 28px;
+          padding: 0 8px;
+          border-radius: 8px;
+          font-size: 12px;
+          line-height: 16px;
+          font-weight: 400;
+        }
+
+        .pisell-mobile-date-range-picker__trigger-icon {
+          font-size: 14px;
+        }
+
+        .pisell-mobile-date-range-picker--filter {
+          .pisell-mobile-date-range-picker__trigger {
+            height: 28px;
+            min-height: 28px;
+            padding: 0 8px;
+            font-size: 12px;
+            line-height: 16px;
+            box-shadow: none;
+          }
+        }
+
+        .pisell-lowcode-range-picker-wrap .pisell-lowcode-range {
+          min-height: 28px;
+          height: 28px;
+          padding: 0 8px;
+          font-size: 12px;
+          line-height: 16px;
+
+          .pisell-lowcode-picker-input {
+            height: 26px;
+
+            > input {
+              font-size: 12px;
+              line-height: 16px;
+            }
+          }
+        }
+      }
+
+      .filter-dropdown-drag-item-right {
+        min-width: 0;
+        margin-left: 4px;
+
+        .pisell-lowcode-form-item-row {
+          flex-direction: column;
+          align-items: stretch;
+        }
+
+        .pisell-lowcode-form-item-label {
+          width: 100%;
+          max-width: 100%;
+          flex: none;
+          text-align: left;
+          padding: 0 0 1px;
+
+          > label {
+            height: auto;
+            white-space: normal;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+
+        .pisell-lowcode-form-item-control {
+          width: 100%;
+          max-width: 100%;
+          flex: none;
+        }
+      }
+    }
+  }
   .filter-dropdown-wrap-content {
     flex: 1;
   }

package/lib/components/filter/components/FilterButton/index.js

@@ -9,7 +9,10 @@ let _pisell_utils = require("@pisell/utils");
 let antd = require("antd");
 let _pisell_icon_es_FilterLines = require("@pisell/icon/es/FilterLines");
 _pisell_icon_es_FilterLines = require_runtime.__toESM(_pisell_icon_es_FilterLines);
+require("./index.less");
 //#region src/components/filter/components/FilterButton/index.tsx
+/** 高于 antd Popover 默认 1030，避免嵌套在齿轮/Filter 弹层下被遮挡 */
+const FILTER_PHONE_DRAWER_Z_INDEX = 1100;
 /** 与 Quick Filter 同源：优先 utils，若 utils 返回 key（未命中）则用 materials RecordBoard 再回退 table-action */
 function getFilterButtonLabel(buttonText) {
 	if (buttonText != null && buttonText !== "") return buttonText;
@@ -18,7 +21,7 @@ function getFilterButtonLabel(buttonText) {
 	if (fromUtils && fromUtils !== key) return fromUtils;
 	return require_index.getText(key) || require_index.getText("table-action-filter-button");
 }
-const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFilterMaxLength, formFiltersPrefix, renderItem, placement, size = "large", buttonClassName, buttonText }) => {
+const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFilterMaxLength, formFiltersPrefix, renderItem, placement, size = "large", buttonClassName, buttonText, phoneLayout }) => {
 	const ref = (0, react.useRef)(null);
 	const [open, setOpen] = (0, react.useState)(false);
 	const [dateRangeOpen, setDateRangeOpen] = (0, react.useState)(false);
@@ -31,6 +34,10 @@ const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFi
 	const handleChange = (newVal) => {
 		onChange === null || onChange === void 0 || onChange(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, value), newVal));
 	};
+	const handleOpenChange = (visible) => {
+		if (dateRangeOpen && !visible) return;
+		setOpen(visible);
+	};
 	const content = (0, react.useMemo)(() => {
 		return /* @__PURE__ */ react.default.createElement(require_index$1.default, {
 			hiddenQuickFilter,
@@ -42,7 +49,9 @@ const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFi
 			formFiltersPrefix,
 			onOpen: () => setDateRangeOpen(true),
 			onClose: () => setDateRangeOpen(false),
-			renderItem
+			renderItem,
+			phoneLayout,
+			className: phoneLayout ? "filter-dropdown-wrap--phone-drawer" : void 0
 		});
 	}, [
 		quickFilter,
@@ -51,25 +60,44 @@ const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFi
 		otherFilter,
 		quickFilterMaxLength,
 		formFiltersPrefix,
-		renderItem
+		renderItem,
+		phoneLayout
 	]);
 	const isMobileBool = require_platform.isMobile();
+	const filterLabel = getFilterButtonLabel(buttonText);
+	/** 纯 UA 移动端曾隐藏按钮文案只留图标；`phoneLayout`（如预约手机顶栏）需在按钮上可见「筛选」等文案 */
+	const showFilterLabelOnButton = phoneLayout || !isMobileBool;
+	const triggerButton = /* @__PURE__ */ react.default.createElement(antd.Button, {
+		className: buttonClassName,
+		icon: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_FilterLines.default, null),
+		size,
+		onClick: phoneLayout ? () => handleOpenChange(true) : void 0
+	}, showFilterLabelOnButton ? filterLabel : null);
+	if (phoneLayout) return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, triggerButton, /* @__PURE__ */ react.default.createElement(antd.Drawer, {
+		placement: "bottom",
+		height: "auto",
+		open,
+		onClose: () => handleOpenChange(false),
+		title: filterLabel,
+		zIndex: FILTER_PHONE_DRAWER_Z_INDEX,
+		maskClosable: true,
+		destroyOnClose: false,
+		rootClassName: "filter-phone-drawer-root",
+		styles: { wrapper: {
+			height: "auto",
+			maxHeight: "85dvh"
+		} },
+		getContainer: typeof document !== "undefined" ? () => document.body : void 0
+	}, content));
 	return /* @__PURE__ */ react.default.createElement("div", { ref }, /* @__PURE__ */ react.default.createElement(antd.Popover, {
 		content,
 		arrow: false,
 		getPopupContainer: () => ref.current,
 		trigger: ["click"],
 		open,
-		onOpenChange: (visible) => {
-			if (dateRangeOpen && !visible) return;
-			setOpen(visible);
-		},
+		onOpenChange: handleOpenChange,
 		placement: placement !== null && placement !== void 0 ? placement : "bottom"
-	}, /* @__PURE__ */ react.default.createElement(antd.Button, {
-		className: buttonClassName,
-		icon: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_FilterLines.default, null),
-		size
-	}, isMobileBool ? null : getFilterButtonLabel(buttonText))));
+	}, triggerButton));
 };
 //#endregion
 exports.default = Filter;

package/lib/components/filter/components/FilterButton/index.less

@@ -0,0 +1,29 @@
+/** 高于 antd Popover 默认 1030，避免嵌套在齿轮设置弹层下被遮挡 */
+@filter-phone-drawer-z-index: 1100;
+
+.filter-phone-drawer-root {
+  z-index: @filter-phone-drawer-z-index;
+
+  .pisell-lowcode-drawer-content-wrapper {
+    border-radius: 16px 16px 0 0;
+    overflow: hidden;
+  }
+
+  .pisell-lowcode-drawer-header {
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--surface-surface-4, #e2e2e2);
+  }
+
+  .pisell-lowcode-drawer-title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: var(--gray-900, #101828);
+  }
+
+  .pisell-lowcode-drawer-body {
+    padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px));
+    overflow: auto;
+    max-height: calc(85dvh - 49px);
+  }
+}

package/lib/components/filter/components/FilterButton/types.d.ts

@@ -19,6 +19,11 @@ type FilterListProps = {
   size?: 'small' | 'middle' | 'large'; /** 筛选触发按钮的 className，用于定制样式（如与设计系统对齐） */
   buttonClassName?: string; /** 筛选按钮文案，不传则使用 materials 内置多语言 */
   buttonText?: string;
+  /**
+   * 手机窄屏布局：筛选项内下拉禁用搜索框，并避免打开时自动聚焦。
+   * RecordBoard compact-narrow / 预约手机 Table 等场景传入。
+   */
+  phoneLayout?: boolean;
 };
 //#endregion
 export { FilterListProps };