@pisell/materials 1.8.41 → 1.8.42

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -4,6 +4,7 @@
  */
 
 .pisell-multiple-select {
+  height: 48px !important;
   width: 100%;
 
   .pisell-lowcode-select-clear {
@@ -21,11 +22,88 @@
     }
   }
 
+  // Select 触发器（Figma 设计规范，与 SingleSelect / Input 体系一致）
+  .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input) {
+    .pisell-lowcode-select-selector {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+      padding: 12px 16px !important;
+      min-height: 48px !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+    }
+
+    // 多选模式：内边距适配标签，高度保持 48px
+    &.pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
+      padding: 6px 16px !important;
+      min-height: 48px !important;
+    }
+
+    &.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #d6bbfb !important; // Primary/300
+      box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+    }
+
+    &:not(.pisell-lowcode-select-open):not(.pisell-lowcode-select-disabled)
+    .pisell-lowcode-select-selector:hover {
+      border-color: #b692f6 !important; // Primary/400
+    }
+
+    &.pisell-lowcode-select-disabled .pisell-lowcode-select-selector {
+      background-color: #f9fafb !important; // Gray/50
+      color: #98a2b3 !important; // Gray/400
+      border-color: #d0d5dd !important;
+      cursor: not-allowed !important;
+    }
+
+    .pisell-lowcode-select-selection-placeholder {
+      color: #667085 !important; // Gray/500
+    }
+
+    .pisell-lowcode-select-arrow {
+      color: #667085;
+    }
+
+
+    // 多选标签（选择后展示的 item）高度 36px
+    .pisell-lowcode-select-selection-item {
+      border-radius: 6px !important;
+      padding: 0 10px !important;
+      margin-inline-end: 4px !important;
+      height: 36px !important;
+      min-height: 36px !important;
+      line-height: 36px !important;
+
+      &-content {
+        line-height: 36px !important;
+      }
+
+      &-remove {
+        margin-left: 4px !important;
+
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
+
   &-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
     position: relative;
+
+    // 下拉选项高度 48px（通过 getPopupContainer 挂到 wrapper 内，无需 :global）
+    .pisell-multiple-select-dropdown .pisell-lowcode-select-item {
+      min-height: 48px !important;
+      height: 48px !important;
+      line-height: 48px !important;
+      padding: 0 16px !important;
+      font-size: 16px !important;
+    }
   }
 
   &-label {
@@ -69,25 +147,42 @@
     margin-left: 8px;
   }
 
+  // 错误状态（Figma 设计体系 Error 色）
+  &-error {
+    .pisell-lowcode-select .pisell-lowcode-select-selector {
+      border-color: #fda29b !important; // Error/300
+
+      &:hover {
+        border-color: #f97066 !important; // Error/400
+      }
+    }
+
+    .pisell-lowcode-select.pisell-lowcode-select-focused .pisell-lowcode-select-selector,
+    .pisell-lowcode-select.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #f97066 !important; // Error/400
+      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+    }
+  }
+
   // 聚合标签（maxTagPlaceholder）
-  //&-more-tag {
-  //  display: inline-flex;
-  //  align-items: center;
-  //  background-color: #eaecf0;
-  //  color: #344054; // Gray/700
-  //  border: none;
-  //  border-radius: 6px;
-  //  padding: 6px 10px;
-  //  font-size: 16px;
-  //  font-weight: 500;
-  //  line-height: 24px;
-  //  cursor: pointer;
-  //  transition: background-color 0.2s ease;
-  //
-  //  &:hover {
-  //    background-color: #d0d5dd; // Gray/300
-  //  }
-  //}
+  &-more-tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: #eaecf0;
+    color: #344054; // Gray/700
+    border: none;
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #d0d5dd; // Gray/300
+    }
+  }
 
   // 只读状态
   &-readonly {
@@ -133,6 +228,32 @@
   }
 }
 
+// 下拉内搜索框（在 dropdown 内）
+.pisell-select-search-wrapper {
+  padding: 6px;
+  border-bottom: 1px solid #eaecf0;
+}
+
+.pisell-select-search-input {
+  padding: 9px 10px !important;
+  font-size: 14px;
+
+  .pisell-lowcode-input {
+    font-size: 14px !important;
+    color: #344054 !important;
+
+    &::placeholder {
+      color: #98a2b3 !important;
+      font-size: 12px !important;
+    }
+  }
+
+  &:hover,
+  &:focus-within {
+    background-color: transparent !important;
+  }
+}
+
 @keyframes pisell-multiple-select-fadeIn {
   from {
     opacity: 0;

package/lib/components/pisellMultipleSelect/components/EditView.js

@@ -101,7 +101,6 @@ const EditView = (0, react.forwardRef)((props, ref) => {
 		style
 	}, label && /* @__PURE__ */ react.default.createElement("label", { className: (0, classnames.default)("pisell-multiple-select-label", { "pisell-multiple-select-label-required": required }) }, label), /* @__PURE__ */ react.default.createElement(antd.Select, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, restProps), {}, {
 		ref,
-		open: true,
 		mode: "multiple",
 		value,
 		options: filteredAntdOptions,

package/lib/components/pisellNavigationMenu/PisellNavigationMenu.js

@@ -52,10 +52,6 @@ const PisellNavigationMenu = ({ value = [], allowDrag = true, allowDelete = true
 				text: require_index.getText("pisell-lowcode-navigation-menu-tag-pisell1"),
 				color: "#ee837a"
 			},
-			dynamicRoute: {
-				text: require_index.getText("pisell-lowcode-navigation-menu-tag-dynamic-route"),
-				color: "#ffc53d"
-			},
 			group: {
 				text: require_index.getText("pisell-lowcode-navigation-menu-tag-group"),
 				color: "#7f56d9"

package/lib/components/pisellNumber/PisellNumber.js

@@ -1,12 +1,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
-const require_pisell_components = require("../../theme/pisell-components.js");
 const require_ReadOnlyView = require("./components/ReadOnlyView.js");
 const require_EditView = require("./components/EditView.js");
 const require_DisabledView = require("./components/DisabledView.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
-let antd = require("antd");
 require("./PisellNumber.less");
 //#region src/components/pisellNumber/PisellNumber.tsx
 /**
@@ -47,17 +45,12 @@ require("./PisellNumber.less");
 */
 const PisellNumber = (props) => {
 	const { mode = "edit", disabled = false } = props;
-	const displayState = (0, _pisell_utils.getDisplayState)(mode, disabled);
-	const render = () => {
-		switch (displayState) {
-			case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
-			case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
-			case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
-			default: return null;
-		}
-	};
-	const theme = require_pisell_components.getPisellComponentsThemeConfig();
-	return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, { theme }, render());
+	switch ((0, _pisell_utils.getDisplayState)(mode, disabled)) {
+		case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
+		case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
+		case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
+		default: return null;
+	}
 };
 const MemoizedPisellNumber = react.default.memo(PisellNumber, (prevProps, nextProps) => {
 	return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;

package/lib/components/pisellNumber/PisellNumber.less

@@ -10,6 +10,109 @@
   &-edit {
     position: relative;
     width: 100%;
+
+    // InputNumber 外层（Figma 设计规范）
+    .pisell-lowcode-input-number {
+      width: 100% !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      // 内层 input
+      .pisell-lowcode-input-number-input {
+        height: 46px !important; // 48 - 2px border
+        padding: 12px 16px !important;
+        font-size: 16px !important;
+        line-height: 24px !important;
+        color: #101828 !important;
+        background: transparent !important;
+        border: none !important;
+
+        &::placeholder {
+          color: #667085 !important; // Gray/500
+        }
+      }
+
+      // 聚焦态
+      &.pisell-lowcode-input-number-focused,
+      &:focus,
+      &:focus-within {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+        outline: none !important;
+      }
+
+      // Hover 态
+      &:hover:not(.pisell-lowcode-input-number-disabled):not(.pisell-lowcode-input-number-focused) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      // 禁用态
+      &.pisell-lowcode-input-number-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+
+        .pisell-lowcode-input-number-input {
+          color: #98a2b3 !important; // Gray/400
+          cursor: not-allowed !important;
+        }
+      }
+
+      // 前后缀
+      .pisell-lowcode-input-number-prefix {
+        margin-right: 8px;
+        margin-left: 16px;
+        color: #667085;
+        font-size: 16px;
+      }
+
+      .pisell-lowcode-input-number-suffix {
+        margin-left: 8px;
+        margin-right: 16px;
+        color: #667085;
+        font-size: 16px;
+      }
+
+      // 步进器按钮（controls）
+      .pisell-lowcode-input-number-handler-wrap {
+        border-left: 1px solid #d0d5dd !important;
+        background: #ffffff !important;
+
+        .pisell-lowcode-input-number-handler {
+          color: #667085;
+          border-color: #d0d5dd;
+
+          &:hover {
+            color: #344054;
+          }
+
+          &.pisell-lowcode-input-number-handler-up-disabled,
+          &.pisell-lowcode-input-number-handler-down-disabled {
+            color: #98a2b3;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      // 错误状态
+      &.pisell-lowcode-input-number-status-error {
+        border-color: #fda29b !important; // Error/300
+
+        &.pisell-lowcode-input-number-focused,
+        &:focus-within {
+          border-color: #f97066 !important; // Error/400
+          box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+        }
+
+        &:hover:not(:focus-within) {
+          border-color: #f97066 !important;
+        }
+      }
+    }
   }
 
   // 错误提示（与设计体系一致）

package/lib/components/pisellPhone/PisellPhone.js

@@ -1,12 +1,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
-const require_pisell_components = require("../../theme/pisell-components.js");
 const require_ReadOnlyView = require("./components/ReadOnlyView.js");
 const require_EditView = require("./components/EditView.js");
 const require_DisabledView = require("./components/DisabledView.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
-let antd = require("antd");
 require("./PisellPhone.less");
 //#region src/components/pisellPhone/PisellPhone.tsx
 /**
@@ -41,17 +39,12 @@ require("./PisellPhone.less");
 */
 const PisellPhone = (props) => {
 	const { mode = "edit", disabled = false } = props;
-	const displayState = (0, _pisell_utils.getDisplayState)(mode, disabled);
-	const render = () => {
-		switch (displayState) {
-			case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
-			case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
-			case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
-			default: return null;
-		}
-	};
-	const theme = require_pisell_components.getPisellComponentsThemeConfig();
-	return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, { theme }, render());
+	switch ((0, _pisell_utils.getDisplayState)(mode, disabled)) {
+		case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
+		case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
+		case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
+		default: return null;
+	}
 };
 var PisellPhone_default = react.default.memo(PisellPhone, (prevProps, nextProps) => {
 	return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.countryCode === nextProps.countryCode;

package/lib/components/pisellPhone/PisellPhone.less

@@ -7,6 +7,125 @@
   &-edit {
     position: relative;
     width: 100%;
+
+    .pisell-lowcode-space-compact {
+      width: 100%;
+      position: relative;
+      border-radius: 8px;
+
+      // 聚焦时整体外圈（与 SingleLineText 一致）
+      &:focus-within {
+        box-shadow: 0 0 0 4px #f4ebff; // Primary/100
+      }
+    }
+
+    // 国家码 Select 与 号码 Input 共用 Figma 设计 token
+    .pisell-lowcode-select-selector,
+    .pisell-lowcode-input {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+      height: 48px !important;
+      padding: 12px 16px !important;
+
+      &::placeholder {
+        color: #667085 !important; // Gray/500
+      }
+
+      &:hover:not(:focus):not(.pisell-lowcode-select-open):not([disabled]) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      &[disabled],
+      &.pisell-lowcode-input-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        color: #98a2b3 !important; // Gray/400
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+      }
+    }
+
+    // 国家码选择器：左侧部分，去掉右侧边框与圆角
+    .pisell-lowcode-select {
+      flex-shrink: 0;
+
+      .pisell-lowcode-select-selector {
+        border-right: none !important;
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-top-left-radius: 8px !important;
+        border-bottom-left-radius: 8px !important;
+        min-height: 48px !important;
+        padding: 4px 12px 4px 16px !important;
+        align-items: center !important;
+      }
+
+      &.pisell-lowcode-select-focused .pisell-lowcode-select-selector {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: none !important;
+      }
+    }
+
+    // 号码输入框：右侧部分，去掉左侧边框与圆角
+    .pisell-lowcode-input {
+      flex: 1;
+      border-left: none !important;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+      border-top-right-radius: 8px !important;
+      border-bottom-right-radius: 8px !important;
+
+      &:focus {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: none !important;
+        outline: none !important;
+      }
+    }
+
+    // 整体聚焦时两侧边框统一为 Primary
+    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-select-selector,
+    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-input {
+      border-color: #d6bbfb !important;
+    }
+
+    .pisell-lowcode-space-compact:focus-within .pisell-lowcode-select-selector {
+      box-shadow: none !important;
+    }
+
+    // 清空按钮
+    .pisell-lowcode-input-clear-icon {
+      color: #667085 !important;
+      font-size: 14px !important;
+
+      &:hover {
+        color: #344054 !important; // Gray/700
+      }
+    }
+
+    // 错误状态：Select + Input 整体
+    .pisell-lowcode-select-status-error .pisell-lowcode-select-selector,
+    .pisell-lowcode-input-status-error {
+      border-color: #fda29b !important; // Error/300
+    }
+
+    .pisell-lowcode-space-compact:has(.pisell-lowcode-select-status-error) .pisell-lowcode-select-selector,
+    .pisell-lowcode-space-compact:has(.pisell-lowcode-input-status-error) .pisell-lowcode-input {
+      border-color: #fda29b !important;
+    }
+
+    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error) .pisell-lowcode-select-selector,
+    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error) .pisell-lowcode-input,
+    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) .pisell-lowcode-select-selector,
+    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) .pisell-lowcode-input {
+      border-color: #f97066 !important; // Error/400
+    }
+
+    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-input-status-error),
+    .pisell-lowcode-space-compact:focus-within:has(.pisell-lowcode-select-status-error) {
+      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+    }
   }
 
   &-error {

package/lib/components/pisellPhone/components/EditView.js

@@ -35,47 +35,29 @@ const EditView = (props) => {
 		setCountryCode(code);
 		(_props$onCountryCodeC = props.onCountryCodeChange) === null || _props$onCountryCodeC === void 0 || _props$onCountryCodeC.call(props, code);
 	};
-	const maxDigitLen = require_countryCodeHelper.getMaxLength(countryCode, countryCodes);
-	const maxInputLength = (0, react.useMemo)(() => {
-		if (props.maxLength != null) return props.maxLength;
-		if (props.autoFormat === false) return maxDigitLen;
-		return require_phoneFormatter.formatPhone("9".repeat(maxDigitLen), countryCode).length;
-	}, [
-		countryCode,
-		maxDigitLen,
-		props.maxLength,
-		props.autoFormat
-	]);
-	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-phone-edit" }, /* @__PURE__ */ react.default.createElement(antd.Input, {
-		prefix: countryCode ? /* @__PURE__ */ react.default.createElement("span", { className: "pisell-phone-prefix" }, countryCode) : void 0,
+	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-phone-edit" }, /* @__PURE__ */ react.default.createElement(antd.Space.Compact, { style: { width: "100%" } }, props.showCountrySelector !== false && /* @__PURE__ */ react.default.createElement(antd.Select, {
+		value: countryCode,
+		onChange: handleCountryCodeChange,
+		style: {
+			width: 100,
+			height: 48
+		},
+		showSearch: true,
+		optionFilterProp: "children",
+		className: "pisell-phone-country-select",
+		optionLabelProp: "value",
+		popupMatchSelectWidth: false,
+		dropdownStyle: { minWidth: 200 }
+	}, countryCodes.map((country, index) => /* @__PURE__ */ react.default.createElement(antd.Select.Option, {
+		key: `${country.code}-${country.name}-${index}`,
+		value: country.code
+	}, /* @__PURE__ */ react.default.createElement(antd.Space, { size: 4 }, /* @__PURE__ */ react.default.createElement("span", null, country.flag), /* @__PURE__ */ react.default.createElement("span", null, country.code), /* @__PURE__ */ react.default.createElement("span", null, country.name))))), /* @__PURE__ */ react.default.createElement(antd.Input, {
 		value,
 		onChange: handlePhoneChange,
-		addonBefore: props.showCountrySelector !== false ? /* @__PURE__ */ react.default.createElement(antd.Select, {
-			value: countryCode,
-			onChange: handleCountryCodeChange,
-			showSearch: true,
-			optionFilterProp: "children",
-			filterOption: (input, option) => {
-				const code = option === null || option === void 0 ? void 0 : option.value;
-				const country = countryCodes.find((c) => c.code === code);
-				if (!country) return false;
-				const search = input.trim().toLowerCase();
-				if (!search) return true;
-				return country.name.toLowerCase().includes(search) || country.code.toLowerCase().includes(search) || country.flag.toLowerCase().includes(search);
-			},
-			className: "pisell-phone-country-select",
-			optionLabelProp: "label",
-			popupMatchSelectWidth: false,
-			dropdownStyle: { minWidth: 200 }
-		}, countryCodes.map((country, index) => /* @__PURE__ */ react.default.createElement(antd.Select.Option, {
-			key: `${country.code}-${country.name}-${index}`,
-			value: country.code,
-			label: country.flag
-		}, /* @__PURE__ */ react.default.createElement(antd.Space, { size: 4 }, /* @__PURE__ */ react.default.createElement("span", null, country.flag), /* @__PURE__ */ react.default.createElement("span", null, country.code))))) : null,
 		onBlur: handleBlur,
 		onFocus: handleFocus,
 		placeholder: props.placeholder || "请输入电话号码",
-		maxLength: maxInputLength,
+		maxLength: props.maxLength || require_countryCodeHelper.getMaxLength(countryCode, countryCodes),
 		allowClear: props.allowClear,
 		disabled: props.disabled,
 		autoFocus: props.autoFocus,
@@ -84,7 +66,7 @@ const EditView = (props) => {
 		style: props.style,
 		"aria-label": props["aria-label"],
 		"aria-describedby": props["aria-describedby"]
-	}), !isValid && errors.length > 0 && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-phone-error" }, errors[0]));
+	})), !isValid && errors.length > 0 && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-phone-error" }, errors[0]));
 };
 //#endregion
 exports.default = EditView;