@pisell/materials 1.8.41 → 1.8.43

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

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import "./index.less";
 //#region src/components/drag-sort-tree/index.tsx
 const DragSortTree = (props) => {
 	const { value, rowKey, tabKey, hiddenKeys, onChange } = props;

package/es/components/drawer/index.js

@@ -9,7 +9,7 @@ import { useControllableValue, useUpdateEffect } from "ahooks";
 import Pin02 from "@pisell/icon/es/Pin02";
 import "./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;
@@ -22,7 +22,8 @@ const Title = (props) => {
 	}, /* @__PURE__ */ React.createElement(Pin02, null)));
 };
 const Drawer$1 = (props) => {
-	const { others } = props, resetProps = _objectWithoutProperties(props, _excluded);
+	const { others, rootClassName } = props, resetProps = _objectWithoutProperties(props, _excluded);
+	const _ref = others || {}, { rootClassName: othersRootClassName } = _ref, restOthers = _objectWithoutProperties(_ref, _excluded2);
 	const { operateMode, headerStyle, placement, onClose, showPin, width, getContainer, open } = props;
 	const [persistentState, setPersistentState] = useControllableValue(props, {
 		trigger: "onPersistentChange",
@@ -76,10 +77,7 @@ const Drawer$1 = (props) => {
 				setPersistentState
 			})
 		};
-		return _objectSpread2({
-			rootClassName: `${prefix}basic-drawer-root`,
-			closeIcon: /* @__PURE__ */ React.createElement(XClose, { className: `${prefix}drawer-header-close-icon` })
-		}, headerStyle);
+		return _objectSpread2({ closeIcon: /* @__PURE__ */ React.createElement("span", { className: `${prefix}drawer-header-close-icon` }, /* @__PURE__ */ React.createElement(XClose, null)) }, headerStyle);
 	}, [
 		operateMode,
 		placement,
@@ -87,7 +85,8 @@ const Drawer$1 = (props) => {
 		persistentState,
 		setPersistentState
 	]);
-	return /* @__PURE__ */ React.createElement(Drawer, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, resetProps), innerProps), otherProps), others));
+	const mergedRootClassName = classNames(operateMode !== "outside" && `${prefix}basic-drawer-root`, rootClassName, othersRootClassName);
+	return /* @__PURE__ */ React.createElement(Drawer, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, resetProps), innerProps), otherProps), restOthers), {}, { rootClassName: mergedRootClassName || void 0 }));
 };
 //#endregion
 export { Drawer$1 as default };

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

@@ -4,6 +4,7 @@ import FilterItem from "../FilterItem/index.js";
 import MultipleContainersSortList from "../../../MultipleContainersSortList/index.js";
 import React, { useCallback, useMemo } from "react";
 import { Tooltip } from "antd";
+import classNames from "classnames";
 import DotsSix from "@pisell/icon/es/DotsSix";
 import HelpCircle from "@pisell/icon/es/HelpCircle";
 import "./index.less";
@@ -19,7 +20,7 @@ const DragItem = React.forwardRef((props, ref) => {
 	}))), /* @__PURE__ */ React.createElement("div", { className: "filter-dropdown-drag-item-right" }, props.children));
 });
 const Dropdown$1 = (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 = useMemo(() => {
 		const _list = {};
 		if (!hiddenQuickFilter) _list.quickFilter = quickFilter || [];
@@ -52,7 +53,7 @@ const Dropdown$1 = (props) => {
 			className: "filter-dropdown-container-filter-wrap"
 		}, children));
 	}, [quickFilterMaxLength, getTooltipTitle]);
-	return /* @__PURE__ */ React.createElement("div", { className: "filter-dropdown-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "filter-dropdown-wrap-content" }, /* @__PURE__ */ React.createElement(MultipleContainersSortList, {
+	return /* @__PURE__ */ React.createElement("div", { className: classNames("filter-dropdown-wrap", className) }, /* @__PURE__ */ React.createElement("div", { className: "filter-dropdown-wrap-content" }, /* @__PURE__ */ React.createElement(MultipleContainersSortList, {
 		list,
 		rowKey: "name",
 		renderContainer,
@@ -72,6 +73,7 @@ const Dropdown$1 = (props) => {
 			onClose
 		}) : /* @__PURE__ */ React.createElement(FilterItem, {
 			key: name.join("-"),
+			phoneLayout,
 			name,
 			label: item.label,
 			type: item.type,

package/es/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/es/components/filter/components/FilterButton/index.js

@@ -4,9 +4,12 @@ import Dropdown$1 from "../Dropdown/index.js";
 import { isMobile as isMobile$1 } from "../../../../utils/platform.js";
 import React, { useMemo, useRef, useState } from "react";
 import { locales } from "@pisell/utils";
-import { Button, Popover } from "antd";
+import { Button, Drawer, Popover } from "antd";
 import FilterLines from "@pisell/icon/es/FilterLines";
+import "./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;
@@ -15,7 +18,7 @@ function getFilterButtonLabel(buttonText) {
 	if (fromUtils && fromUtils !== key) return fromUtils;
 	return getText(key) || 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 = useRef(null);
 	const [open, setOpen] = useState(false);
 	const [dateRangeOpen, setDateRangeOpen] = useState(false);
@@ -28,6 +31,10 @@ const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFi
 	const handleChange = (newVal) => {
 		onChange === null || onChange === void 0 || onChange(_objectSpread2(_objectSpread2({}, value), newVal));
 	};
+	const handleOpenChange = (visible) => {
+		if (dateRangeOpen && !visible) return;
+		setOpen(visible);
+	};
 	const content = useMemo(() => {
 		return /* @__PURE__ */ React.createElement(Dropdown$1, {
 			hiddenQuickFilter,
@@ -39,7 +46,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,
@@ -48,25 +57,44 @@ const Filter = ({ value, hiddenQuickFilter, hiddenOtherFilter, onChange, quickFi
 		otherFilter,
 		quickFilterMaxLength,
 		formFiltersPrefix,
-		renderItem
+		renderItem,
+		phoneLayout
 	]);
 	const isMobileBool = isMobile$1();
+	const filterLabel = getFilterButtonLabel(buttonText);
+	/** 纯 UA 移动端曾隐藏按钮文案只留图标；`phoneLayout`（如预约手机顶栏）需在按钮上可见「筛选」等文案 */
+	const showFilterLabelOnButton = phoneLayout || !isMobileBool;
+	const triggerButton = /* @__PURE__ */ React.createElement(Button, {
+		className: buttonClassName,
+		icon: /* @__PURE__ */ React.createElement(FilterLines, null),
+		size,
+		onClick: phoneLayout ? () => handleOpenChange(true) : void 0
+	}, showFilterLabelOnButton ? filterLabel : null);
+	if (phoneLayout) return /* @__PURE__ */ React.createElement(React.Fragment, null, triggerButton, /* @__PURE__ */ React.createElement(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.createElement("div", { ref }, /* @__PURE__ */ React.createElement(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.createElement(Button, {
-		className: buttonClassName,
-		icon: /* @__PURE__ */ React.createElement(FilterLines, null),
-		size
-	}, isMobileBool ? null : getFilterButtonLabel(buttonText))));
+	}, triggerButton));
 };
 //#endregion
 export { Filter as default };

package/es/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/es/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 };

package/es/components/filter/components/FilterItem/index.js

@@ -24,14 +24,27 @@ import "../../../pisellSingleSelect/index.js";
 import PisellMultipleSelect from "../../../pisellMultipleSelect/PisellMultipleSelect.js";
 import "../../../pisellMultipleSelect/index.js";
 import { fieldMaps } from "../../../table/Table/fields/index.js";
+import { PisellMobileDateRangePicker } from "../../../pisellMobileDateRangePicker/PisellMobileDateRangePicker.js";
 import AsyncOptionsSelectWrapper from "./AsyncOptionsSelectWrapper.js";
 import React, { useMemo } from "react";
 import { DatePicker, Form } from "antd";
+import classNames from "classnames";
 import dayjs from "dayjs";
 import "./index.less";
 //#region src/components/filter/components/FilterItem/index.tsx
-const _excluded = ["value", "onChange"], _excluded2 = ["getOptions"];
+const _excluded = ["value", "onChange"], _excluded2 = ["className"], _excluded3 = ["className"], _excluded4 = ["getOptions"];
 const { RangePicker } = DatePicker;
+/** 手机 Filter 抽屉：控件统一 small，下拉关闭搜索与自动聚焦 */
+function applyPhoneFilterControlProps(props, phoneLayout) {
+	var _props$size;
+	if (!phoneLayout) return props;
+	return _objectSpread2(_objectSpread2({}, props), {}, {
+		size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : "small",
+		showSearch: false,
+		autoFocus: false,
+		defaultOpen: false
+	});
+}
 /** 列 type（RecordBoardFieldType）对应 Pisell 组件，用于筛选项编辑态；与 RecordBoard 列 type 一致 */
 const PISELL_FIELD_TYPE_MAP = {
 	singleLineText: PisellSingleLineText_default,
@@ -75,32 +88,94 @@ const AntdRangePickerWithValue = React.forwardRef(function AntdRangePickerWithVa
 		onChange: (dates) => onChange === null || onChange === void 0 ? void 0 : onChange(dates !== null && dates !== void 0 ? dates : void 0)
 	}));
 });
+/** 手机抽屉筛选项：Form.Item 纵向布局 class，配合 Dropdown phone-drawer 样式 */
+const getPhoneFormItemClassName = (phoneLayout, extraClassName) => classNames(phoneLayout && "filter-dropdown-form-item--phone", extraClassName);
+/** 合并 formItemProps，保留手机抽屉纵向布局 class */
+function mergePhoneFormItemProps(phoneLayout, formItemProps) {
+	const _ref2 = typeof formItemProps === "object" && formItemProps !== null ? formItemProps : {}, { className } = _ref2;
+	return _objectSpread2(_objectSpread2({}, _objectWithoutProperties(_ref2, _excluded2)), {}, { className: getPhoneFormItemClassName(phoneLayout, className) });
+}
+/** 与 Form.Item name 一致：快筛可能为 string[] */
+function resolveFilterFieldName(name) {
+	if (Array.isArray(name)) {
+		const last = name[name.length - 1];
+		return last != null ? String(last) : "";
+	}
+	if (name == null) return "";
+	return String(name);
+}
+/**
+* 手机布局下：orderDate 等日期-only 快筛用 antd-mobile 范围日历，避免 MUI 单框与文案重复。
+* 含 showTime 时仍走原 rangePicker（MUI），以免丢失时间维度。
+*/
+function shouldUseAntdMobileRangePickerForPhone(type, phoneLayout, name, other, itemProps) {
+	if (type !== "rangePicker" || !phoneLayout) return false;
+	if ((other === null || other === void 0 ? void 0 : other.useAntdMobileRangePicker) === false) return false;
+	const merged = _objectSpread2(_objectSpread2({}, typeof itemProps === "object" && itemProps ? itemProps : {}), other && typeof other === "object" ? other : {});
+	const hasShowTime = Boolean(merged.showTime);
+	if ((other === null || other === void 0 ? void 0 : other.useAntdMobileRangePicker) === true) return !hasShowTime;
+	if (resolveFilterFieldName(name) !== "orderDate") return false;
+	return !hasShowTime;
+}
+function toBoundaryDate(val) {
+	if (val == null) return void 0;
+	if (val instanceof Date) return val;
+	if (dayjs.isDayjs(val)) return val.toDate();
+	if (typeof val === "string" || typeof val === "number") {
+		const d = dayjs(val);
+		return d.isValid() ? d.toDate() : void 0;
+	}
+}
 const FilterItem = (props) => {
 	var _componentProps$getOp;
-	const { label, type, name, other, isHidden, props: itemProps } = props;
+	const { label, type, name, other, isHidden, props: itemProps, phoneLayout, phoneQuickFilterSlot } = props;
 	const fieldTypeFromColumn = other === null || other === void 0 ? void 0 : other.fieldType;
 	const PisellCom = fieldTypeFromColumn ? PISELL_FIELD_TYPE_MAP[fieldTypeFromColumn] : void 0;
 	if (type === "custom") {
 		const CustomComponent = other === null || other === void 0 ? void 0 : other.component;
 		if (!CustomComponent) return null;
-		const componentProps = _objectSpread2(_objectSpread2({}, itemProps || {}), other || {});
+		const componentProps = applyPhoneFilterControlProps(_objectSpread2(_objectSpread2({}, itemProps || {}), other || {}), phoneLayout);
 		delete componentProps.component;
+		/** 自定义容器内自行挂多个 Form.Item（多字段）时，外层不注册 name，避免与内层字段冲突 */
+		const isMultiFieldComposite = Array.isArray(other === null || other === void 0 ? void 0 : other.compositeFilterFieldNames) && other.compositeFilterFieldNames.length > 0;
 		return /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2({
 			label,
-			name,
+			name: isMultiFieldComposite ? void 0 : name,
 			hidden: isHidden
-		}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), /* @__PURE__ */ React.createElement(CustomComponent, componentProps));
+		}, mergePhoneFormItemProps(phoneLayout, other === null || other === void 0 ? void 0 : other.formItemProps)), /* @__PURE__ */ React.createElement(CustomComponent, componentProps));
 	}
 	if (type === "rangePickerNew") {
-		const componentProps = _objectSpread2(_objectSpread2(_objectSpread2({}, itemProps || {}), other || {}), {}, { prefixCls: "pisell-lowcode" });
+		const componentProps = applyPhoneFilterControlProps(_objectSpread2(_objectSpread2(_objectSpread2({}, itemProps || {}), other || {}), {}, { prefixCls: "pisell-lowcode" }), phoneLayout);
+		const _ref3 = typeof (other === null || other === void 0 ? void 0 : other.formItemProps) === "object" && other.formItemProps !== null ? other.formItemProps : {}, { className: formItemClassName } = _ref3, restFormItemProps = _objectWithoutProperties(_ref3, _excluded3);
 		return /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2(_objectSpread2({
 			label,
 			name
-		}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), {}, {
+		}, restFormItemProps), {}, {
 			hidden: isHidden,
-			className: "pisell-lowcode-range-picker-wrap"
+			className: classNames("pisell-lowcode-range-picker-wrap", getPhoneFormItemClassName(phoneLayout, formItemClassName))
 		}), /* @__PURE__ */ React.createElement(AntdRangePickerWithValue, componentProps));
 	}
+	if (shouldUseAntdMobileRangePickerForPhone(type, phoneLayout, name, other, itemProps)) {
+		var _merged$minDate, _merged$maxDate;
+		const merged = _objectSpread2(_objectSpread2({}, typeof itemProps === "object" && itemProps ? itemProps : {}), other && typeof other === "object" ? other : {});
+		const formatStr = typeof merged.format === "string" && merged.format ? merged.format : "DD/MM/YYYY";
+		const placeholderStr = typeof merged.placeholder === "string" && merged.placeholder || getText("table-action-range-picker-placeholder-start");
+		return /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2({
+			label: phoneQuickFilterSlot ? void 0 : label,
+			name,
+			hidden: isHidden
+		}, mergePhoneFormItemProps(phoneLayout, other === null || other === void 0 ? void 0 : other.formItemProps)), /* @__PURE__ */ React.createElement(PisellMobileDateRangePicker, {
+			variant: phoneQuickFilterSlot || phoneLayout ? "toolbar" : "filter",
+			format: formatStr,
+			placeholder: placeholderStr,
+			title: label,
+			allowClear: merged.allowClear !== false,
+			min: toBoundaryDate((_merged$minDate = merged.minDate) !== null && _merged$minDate !== void 0 ? _merged$minDate : merged.min),
+			max: toBoundaryDate((_merged$maxDate = merged.maxDate) !== null && _merged$maxDate !== void 0 ? _merged$maxDate : merged.max),
+			onOpen: other === null || other === void 0 ? void 0 : other.onOpen,
+			onClose: other === null || other === void 0 ? void 0 : other.onClose
+		}));
+	}
 	const Com = useMemo(() => {
 		var _FILTER_TYPE_TO_FIELD, _fieldMaps;
 		if (PisellCom) return PisellCom;
@@ -108,22 +183,24 @@ const FilterItem = (props) => {
 	}, [type, PisellCom]);
 	if (!Com) return null;
 	const isPisell = Boolean(PisellCom);
-	const componentProps = _objectSpread2(_objectSpread2(_objectSpread2({}, itemProps || {}), other || {}), isPisell ? { mode: "edit" } : {});
+	const componentProps = applyPhoneFilterControlProps(_objectSpread2(_objectSpread2(_objectSpread2({}, itemProps || {}), other || {}), isPisell ? { mode: "edit" } : {}), phoneLayout);
 	const getOptions = (_componentProps$getOp = componentProps.getOptions) !== null && _componentProps$getOp !== void 0 ? _componentProps$getOp : other === null || other === void 0 ? void 0 : other.getOptions;
 	if (isPisell && typeof getOptions === "function" && (fieldTypeFromColumn === "singleSelect" || fieldTypeFromColumn === "multipleSelect") && fieldTypeFromColumn) {
-		const { getOptions: _go } = componentProps, restProps = _objectWithoutProperties(componentProps, _excluded2);
-		return /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2(_objectSpread2({
+		const { getOptions: _go } = componentProps, restProps = _objectWithoutProperties(componentProps, _excluded4);
+		return /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2({
 			label,
-			name
-		}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), {}, { hidden: isHidden }), /* @__PURE__ */ React.createElement(AsyncOptionsSelectWrapper, _objectSpread2({
+			name,
+			hidden: isHidden
+		}, mergePhoneFormItemProps(phoneLayout, other === null || other === void 0 ? void 0 : other.formItemProps)), /* @__PURE__ */ React.createElement(AsyncOptionsSelectWrapper, _objectSpread2({
 			getOptions,
 			fieldType: fieldTypeFromColumn
 		}, restProps)));
 	}
-	return /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2(_objectSpread2({
+	return /* @__PURE__ */ React.createElement(Form.Item, _objectSpread2({
 		label,
-		name
-	}, (other === null || other === void 0 ? void 0 : other.formItemProps) || {}), {}, { hidden: isHidden }), /* @__PURE__ */ React.createElement(Com, componentProps));
+		name,
+		hidden: isHidden
+	}, mergePhoneFormItemProps(phoneLayout, other === null || other === void 0 ? void 0 : other.formItemProps)), /* @__PURE__ */ React.createElement(Com, componentProps));
 };
 //#endregion
 export { FilterItem as default };

package/es/components/filter/components/QuickFilter/index.js

@@ -3,21 +3,24 @@ import React, { useMemo } from "react";
 import { Space } from "antd";
 //#region src/components/filter/components/QuickFilter/index.tsx
 const QuickFilter = (props) => {
-	const { value, formFiltersPrefix } = props;
+	const { value, formFiltersPrefix, phoneLayout, phoneQuickFilterSlot } = props;
 	const { quickFilter, notSortFilter } = value || {};
 	const filterArr = useMemo(() => {
 		return [...notSortFilter || [], ...quickFilter || []];
 	}, [quickFilter, notSortFilter]);
-	return /* @__PURE__ */ React.createElement(Space, { wrap: true }, filterArr.map((item) => {
+	return /* @__PURE__ */ React.createElement(Space, { wrap: true }, filterArr.map((item, index) => {
 		var _item$name;
 		const name = [formFiltersPrefix, (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.toString()].filter(Boolean);
+		const keyHint = name.length > 0 ? name.join("-") : "";
 		return /* @__PURE__ */ React.createElement(FilterItem, {
-			key: name.join("-"),
+			key: item.key && String(item.key) || keyHint || `quick-filter-${index}`,
 			name,
 			type: item.type,
 			other: item.other,
 			props: item.props,
-			isHidden: item.isHidden
+			isHidden: item.isHidden,
+			phoneLayout,
+			phoneQuickFilterSlot
 		});
 	}));
 };

package/es/components/filter/types.d.ts

@@ -17,6 +17,10 @@ type FilterType = {
  * 筛选列表项配置
  * - type 为 single/input/rangePicker 等时使用内置或映射组件
  * - type 为 "custom" 时使用 other.component，组件接收 value/onChange（由 Form 注入）
+ *
+ * other 扩展（节选）：
+ * - useAntdMobileRangePicker?: 手机布局下是否用 PisellMobileDateRangePicker（antd-mobile）替代 MUI 单框范围；
+ *   true 强制启用（无 showTime 时）；false 强制关闭；缺省时仅对字段名 orderDate 自动启用。
  */
 type FilterItemProps = {
   type: "single" | "input" | "datePicker" | "rangePicker" | "rangePickerNew" | "search" | "custom";

package/es/components/login-and-register/index.js

@@ -81,6 +81,7 @@ const loginAndRegister = ({ showLogo = true, logo, logoPosition = "center", logo
 			return _ref2.apply(this, arguments);
 		};
 	}();
+	console.log(registerButtonText, "registerButtonText");
 	return /* @__PURE__ */ React.createElement("div", { className: "saas-login-main" }, /* @__PURE__ */ React.createElement("div", { className: "saas-login-container" }, showLogo && /* @__PURE__ */ React.createElement("div", { className: `saas-login-logo ${logoPosition}` }, logo && /* @__PURE__ */ React.createElement("img", {
 		src: logo,
 		alt: "logo"
@@ -107,7 +108,7 @@ const loginAndRegister = ({ showLogo = true, logo, logoPosition = "center", logo
 		name: "password",
 		rules: [{
 			required: true,
-			message: getText("pisell-login-and-register-register-password-error")
+			message: "Please input your password!"
 		}]
 	}, /* @__PURE__ */ React.createElement(Input.Password, {
 		placeholder: passwordPlaceholder,
@@ -131,10 +132,10 @@ const loginAndRegister = ({ showLogo = true, logo, logoPosition = "center", logo
 		name: "password",
 		rules: [{
 			required: true,
-			message: getText("pisell-login-and-register-register-password-error")
+			message: "Please input your password!"
 		}, {
 			min: 6,
-			message: getText("pisell-login-and-register-register-password-error-valid")
+			message: "Password must be at least 6 characters!"
 		}]
 	}, /* @__PURE__ */ React.createElement(Input.Password, {
 		placeholder: registerPasswordPlaceholder,
@@ -165,7 +166,7 @@ const loginAndRegister = ({ showLogo = true, logo, logoPosition = "center", logo
 		icon: /* @__PURE__ */ React.createElement(AppleOutlined, null),
 		className: "saas-login-social-button apple",
 		onClick: () => handleSocialLogin("apple")
-	}, socialLoginTexts.apple))), showFooter && /* @__PURE__ */ React.createElement("div", { className: "saas-login-footer" }, showSignUp && /* @__PURE__ */ React.createElement("p", { className: "saas-login-signup" }, signUpText, signUpLink ? /* @__PURE__ */ React.createElement("a", { href: signUpLink }, signUpText) : /* @__PURE__ */ React.createElement("a", { onClick: onSignUp }, signUpText)), otherLinks.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "saas-login-links" }, otherLinks.map((link, index) => /* @__PURE__ */ React.createElement("a", {
+	}, socialLoginTexts.apple))), showFooter && /* @__PURE__ */ React.createElement("div", { className: "saas-login-footer" }, showSignUp && /* @__PURE__ */ React.createElement("p", { className: "saas-login-signup" }, signUpText, signUpLink ? /* @__PURE__ */ React.createElement("a", { href: signUpLink }, "Sign up") : /* @__PURE__ */ React.createElement("a", { onClick: onSignUp }, "Sign up")), otherLinks.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "saas-login-links" }, otherLinks.map((link, index) => /* @__PURE__ */ React.createElement("a", {
 		key: index,
 		href: link.url,
 		target: "_blank",