@pisell/materials 1.0.1057 → 1.0.1059

package/es/components/pisellPhone/PisellPhone.less

@@ -7,125 +7,6 @@
   &-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/es/components/pisellPhone/components/EditView.js

@@ -62,45 +62,56 @@ var EditView = function EditView(props) {
     setCountryCode(code);
     (_props$onCountryCodeC = props.onCountryCodeChange) === null || _props$onCountryCodeC === void 0 || _props$onCountryCodeC.call(props, code);
   };
+
+  // Input 的 maxLength：有格式化时用「格式化后字符串」长度，否则用数字位数，避免选 CN 只能输 9 位
+  var maxDigitLen = getMaxLength(countryCode, countryCodes);
+  var maxInputLength = useMemo(function () {
+    if (props.maxLength != null) return props.maxLength;
+    if (props.autoFormat === false) return maxDigitLen;
+    return formatPhone('9'.repeat(maxDigitLen), countryCode).length;
+  }, [countryCode, maxDigitLen, props.maxLength, props.autoFormat]);
   return /*#__PURE__*/React.createElement("div", {
     className: "pisell-phone-edit"
-  }, /*#__PURE__*/React.createElement(Space.Compact, {
-    style: {
-      width: '100%'
-    }
-  }, props.showCountrySelector !== false && /*#__PURE__*/React.createElement(Select, {
-    value: countryCode,
-    onChange: handleCountryCodeChange,
-    style: {
-      width: 100,
-      height: 48
-    },
-    showSearch: true,
-    optionFilterProp: "children",
-    className: "pisell-phone-country-select"
-    // 自定义选中后的显示内容（只显示 +xx）
-    ,
-    optionLabelProp: "value"
-    // 下拉选项宽度（比选择器本身宽）
-    ,
-    popupMatchSelectWidth: false,
-    dropdownStyle: {
-      minWidth: 200
-    }
-  }, countryCodes.map(function (country, index) {
-    return /*#__PURE__*/React.createElement(Select.Option, {
-      key: "".concat(country.code, "-").concat(country.name, "-").concat(index),
-      value: country.code
-    }, /*#__PURE__*/React.createElement(Space, {
-      size: 4
-    }, /*#__PURE__*/React.createElement("span", null, country.flag), /*#__PURE__*/React.createElement("span", null, country.code), /*#__PURE__*/React.createElement("span", null, country.name)));
-  })), /*#__PURE__*/React.createElement(Input, {
+  }, /*#__PURE__*/React.createElement(Input, {
+    prefix: countryCode ? /*#__PURE__*/React.createElement("span", {
+      className: "pisell-phone-prefix"
+    }, countryCode) : undefined,
     value: value,
     onChange: handlePhoneChange,
+    addonBefore: props.showCountrySelector !== false ? /*#__PURE__*/React.createElement(Select, {
+      value: countryCode,
+      onChange: handleCountryCodeChange,
+      showSearch: true,
+      optionFilterProp: "children",
+      filterOption: function filterOption(input, option) {
+        var code = option === null || option === void 0 ? void 0 : option.value;
+        var country = countryCodes.find(function (c) {
+          return c.code === code;
+        });
+        if (!country) return false;
+        var 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(function (country, index) {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        key: "".concat(country.code, "-").concat(country.name, "-").concat(index),
+        value: country.code,
+        label: country.flag
+      }, /*#__PURE__*/React.createElement(Space, {
+        size: 4
+      }, /*#__PURE__*/React.createElement("span", null, country.flag), /*#__PURE__*/React.createElement("span", null, country.code)));
+    })) : null,
     onBlur: handleBlur,
     onFocus: handleFocus,
     placeholder: props.placeholder || '请输入电话号码',
-    maxLength: props.maxLength || getMaxLength(countryCode, countryCodes),
+    maxLength: maxInputLength,
     allowClear: props.allowClear,
     disabled: props.disabled,
     autoFocus: props.autoFocus,
@@ -109,7 +120,7 @@ var EditView = function EditView(props) {
     style: props.style,
     "aria-label": props['aria-label'],
     "aria-describedby": props['aria-describedby']
-  })), !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }), !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "pisell-phone-error"
   }, errors[0]));
 };

package/es/components/pisellPhone/constants/countryCodes.d.ts

@@ -1,6 +1,7 @@
 import type { CountryCode } from '../types';
 /**
  * 预设的国家码列表（24个常见国家）
+ * flag 使用正常文本（ISO 3166-1 alpha-2 两字母代码，如 CN、US）
  *
  * 包含：
  * - 亚洲：中国、香港、澳门、台湾、日本、韩国、新加坡、马来西亚、泰国、印度

package/es/components/pisellPhone/constants/countryCodes.js

@@ -1,6 +1,7 @@
 /**
  * 预设的国家码列表（24个常见国家）
- * 
+ * flag 使用正常文本（ISO 3166-1 alpha-2 两字母代码，如 CN、US）
+ *
  * 包含：
  * - 亚洲：中国、香港、澳门、台湾、日本、韩国、新加坡、马来西亚、泰国、印度
  * - 欧洲：英国、法国、德国、意大利、西班牙、俄罗斯
@@ -13,70 +14,70 @@ export var PRESET_COUNTRY_CODES = [
 {
   code: '+86',
   name: '中国',
-  flag: '🇨🇳',
+  flag: 'CN',
   format: 'XXX XXXX XXXX',
   maxLength: 11,
   pattern: /^1[3-9]\d{9}$/
 }, {
   code: '+852',
   name: '香港',
-  flag: '🇭🇰',
+  flag: 'HK',
   format: 'XXXX XXXX',
   maxLength: 8,
   pattern: /^\d{8}$/
 }, {
   code: '+853',
   name: '澳门',
-  flag: '🇲🇴',
+  flag: 'MO',
   format: 'XXXX XXXX',
   maxLength: 8,
   pattern: /^\d{8}$/
 }, {
   code: '+886',
   name: '台湾',
-  flag: '🇹🇼',
+  flag: 'TW',
   format: 'XXXX XXX XXX',
   maxLength: 9,
   pattern: /^\d{9}$/
 }, {
   code: '+81',
   name: '日本',
-  flag: '🇯🇵',
+  flag: 'JP',
   format: 'XX-XXXX-XXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
 }, {
   code: '+82',
   name: '韩国',
-  flag: '🇰🇷',
+  flag: 'KR',
   format: 'XX-XXXX-XXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
 }, {
   code: '+65',
   name: '新加坡',
-  flag: '🇸🇬',
+  flag: 'SG',
   format: 'XXXX XXXX',
   maxLength: 8,
   pattern: /^\d{8}$/
 }, {
   code: '+60',
   name: '马来西亚',
-  flag: '🇲🇾',
+  flag: 'MY',
   format: 'XX-XXXX XXXX',
   maxLength: 10,
   pattern: /^\d{9,10}$/
 }, {
   code: '+66',
   name: '泰国',
-  flag: '🇹🇭',
+  flag: 'TH',
   format: 'XX-XXX-XXXX',
   maxLength: 9,
   pattern: /^\d{9}$/
 }, {
   code: '+91',
   name: '印度',
-  flag: '🇮🇳',
+  flag: 'IN',
   format: 'XXXXX XXXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
@@ -85,42 +86,42 @@ export var PRESET_COUNTRY_CODES = [
 {
   code: '+44',
   name: '英国',
-  flag: '🇬🇧',
+  flag: 'GB',
   format: 'XXXX XXX XXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
 }, {
   code: '+33',
   name: '法国',
-  flag: '🇫🇷',
+  flag: 'FR',
   format: 'X XX XX XX XX',
   maxLength: 9,
   pattern: /^\d{9}$/
 }, {
   code: '+49',
   name: '德国',
-  flag: '🇩🇪',
+  flag: 'DE',
   format: 'XXX XXXXXXX',
   maxLength: 11,
   pattern: /^\d{10,11}$/
 }, {
   code: '+39',
   name: '意大利',
-  flag: '🇮🇹',
+  flag: 'IT',
   format: 'XXX XXX XXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
 }, {
   code: '+34',
   name: '西班牙',
-  flag: '🇪🇸',
+  flag: 'ES',
   format: 'XXX XX XX XX',
   maxLength: 9,
   pattern: /^\d{9}$/
 }, {
   code: '+7',
   name: '俄罗斯',
-  flag: '🇷🇺',
+  flag: 'RU',
   format: 'XXX XXX-XX-XX',
   maxLength: 10,
   pattern: /^\d{10}$/
@@ -129,28 +130,28 @@ export var PRESET_COUNTRY_CODES = [
 {
   code: '+1',
   name: '美国',
-  flag: '🇺🇸',
+  flag: 'US',
   format: '(XXX) XXX-XXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
 }, {
   code: '+1',
   name: '加拿大',
-  flag: '🇨🇦',
+  flag: 'CA',
   format: '(XXX) XXX-XXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
 }, {
   code: '+52',
   name: '墨西哥',
-  flag: '🇲🇽',
+  flag: 'MX',
   format: 'XX XXXX XXXX',
   maxLength: 10,
   pattern: /^\d{10}$/
 }, {
   code: '+55',
   name: '巴西',
-  flag: '🇧🇷',
+  flag: 'BR',
   format: 'XX XXXXX-XXXX',
   maxLength: 11,
   pattern: /^\d{10,11}$/
@@ -159,14 +160,14 @@ export var PRESET_COUNTRY_CODES = [
 {
   code: '+61',
   name: '澳大利亚',
-  flag: '🇦🇺',
+  flag: 'AU',
   format: 'XXX XXX XXX',
   maxLength: 9,
   pattern: /^\d{9}$/
 }, {
   code: '+64',
   name: '新西兰',
-  flag: '🇳🇿',
+  flag: 'NZ',
   format: 'XX XXX XXXX',
   maxLength: 9,
   pattern: /^\d{9}$/
@@ -175,14 +176,14 @@ export var PRESET_COUNTRY_CODES = [
 {
   code: '+971',
   name: '阿联酋',
-  flag: '🇦🇪',
+  flag: 'AE',
   format: 'XX XXX XXXX',
   maxLength: 9,
   pattern: /^\d{9}$/
 }, {
   code: '+966',
   name: '沙特阿拉伯',
-  flag: '🇸🇦',
+  flag: 'SA',
   format: 'XX XXX XXXX',
   maxLength: 9,
   pattern: /^\d{9}$/

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

@@ -15,8 +15,8 @@ export interface CountryCode {
      */
     name: string;
     /**
-     * 国旗 emoji 或图标
-     * @example '🇨🇳', '🇺🇸', '🇬🇧'
+     * 国家/地区展示用标识（正常文本，如 ISO 两字母代码 CN、US）
+     * @example 'CN', 'US', 'GB', 'HK'
      */
     flag: string;
     /**

package/es/components/pisellPhone/utils/countryCodeHelper.d.ts

@@ -1,15 +1,15 @@
 import type { CountryCode, PisellPhoneProps } from '../types';
 /**
- * 根据国家码获取国旗 emoji
+ * 根据国家码获取国家/地区展示标识（正常文本，如 CN、US）
  * @param countryCode 国家码
- * @returns 国旗 emoji
+ * @returns 展示用标识，未匹配时返回 '--'
  */
 export declare function getCountryFlag(countryCode: string): string;
 /**
- * 根据国家码获取最大长度
+ * 根据国家码获取最大长度（数字位数）
  * @param countryCode 国家码
  * @param countryCodes 国家码列表
- * @returns 最大长度
+ * @returns 最大长度（如中国 11 位数字）
  */
 export declare function getMaxLength(countryCode: string, countryCodes: CountryCode[]): number;
 /**

package/es/components/pisellPhone/utils/countryCodeHelper.js

@@ -6,22 +6,22 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { PRESET_COUNTRY_CODES } from "../constants/countryCodes";
 /**
- * 根据国家码获取国旗 emoji
+ * 根据国家码获取国家/地区展示标识（正常文本，如 CN、US）
  * @param countryCode 国家码
- * @returns 国旗 emoji
+ * @returns 展示用标识，未匹配时返回 '--'
  */
 export function getCountryFlag(countryCode) {
   var country = PRESET_COUNTRY_CODES.find(function (c) {
     return c.code === countryCode;
   });
-  return (country === null || country === void 0 ? void 0 : country.flag) || '🌐';
+  return (country === null || country === void 0 ? void 0 : country.flag) || '--';
 }
 
 /**
- * 根据国家码获取最大长度
+ * 根据国家码获取最大长度（数字位数）
  * @param countryCode 国家码
  * @param countryCodes 国家码列表
- * @returns 最大长度
+ * @returns 最大长度（如中国 11 位数字）
  */
 export function getMaxLength(countryCode, countryCodes) {
   var country = countryCodes.find(function (c) {

package/es/components/pisellRating/PisellRating.js

@@ -5,8 +5,9 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
-import { Rate } from 'antd';
+import { ConfigProvider, Rate } from 'antd';
 import { getDisplayState } from '@pisell/utils';
+import { getPisellComponentsThemeConfig } from "../../theme/pisell-components";
 import "./PisellRating.less";
 
 /**
@@ -82,7 +83,10 @@ export var PisellRating = function PisellRating(props) {
     fontSize: size,
     color: color
   }, style);
-  return /*#__PURE__*/React.createElement("div", {
+  var theme = getPisellComponentsThemeConfig();
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-rating pisell-rating-".concat(displayState, " ").concat(className || ''),
     id: id
   }, /*#__PURE__*/React.createElement(Rate, {
@@ -111,7 +115,7 @@ export var PisellRating = function PisellRating(props) {
       marginLeft: 8,
       color: '#999'
     }
-  }, "(", reviewCount, " \u4EBA\u8BC4\u4EF7)"));
+  }, "(", reviewCount, " \u4EBA\u8BC4\u4EF7)")));
 };
 
 // 性能优化

package/es/components/pisellSingleLineText/PisellSingleLineText.js

@@ -4,35 +4,37 @@ import ReadOnlyView from "./components/ReadOnlyView";
 import EditView from "./components/EditView";
 import DisabledView from "./components/DisabledView";
 import "./PisellSingleLineText.less";
+import { ConfigProvider } from 'antd';
+import { getPisellComponentsThemeConfig } from "../../theme/pisell-components";
 
 /**
  * PisellSingleLineText 单行文本组件
- * 
+ *
  * 通用的单行文本输入/展示组件，支持只读、编辑、禁用三种状态。
  * 基于 Ant Design Input 组件开发，提供完整的校验框架。
- * 
+ *
  * @param props 组件 Props
- * 
+ *
  * @example
  * // 受控模式
  * const [value, setValue] = useState('');
- * <PisellSingleLineText 
+ * <PisellSingleLineText
  *   value={value}
  *   onChange={(v) => setValue(v)}
  *   placeholder="请输入"
  * />
- * 
+ *
  * @example
  * // 非受控模式
- * <PisellSingleLineText 
+ * <PisellSingleLineText
  *   defaultValue="初始值"
  *   required
  *   minLength={3}
  * />
- * 
+ *
  * @example
  * // 只读态
- * <PisellSingleLineText 
+ * <PisellSingleLineText
  *   mode="read"
  *   value="这是一段很长的文本内容"
  *   ellipsis
@@ -47,18 +49,23 @@ export var PisellSingleLineText = function PisellSingleLineText(props) {
 
   // 计算显示状态
   var displayState = getDisplayState(mode, disabled);
-
-  // 根据状态渲染对应子组件
-  switch (displayState) {
-    case 'read':
-      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
-    case 'edit':
-      return /*#__PURE__*/React.createElement(EditView, props);
-    case 'disabled':
-      return /*#__PURE__*/React.createElement(DisabledView, props);
-    default:
-      return null;
-  }
+  var render = function render() {
+    // 根据状态渲染对应子组件
+    switch (displayState) {
+      case 'read':
+        return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+      case 'edit':
+        return /*#__PURE__*/React.createElement(EditView, props);
+      case 'disabled':
+        return /*#__PURE__*/React.createElement(DisabledView, props);
+      default:
+        return null;
+    }
+  };
+  var theme = getPisellComponentsThemeConfig();
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: theme
+  }, render());
 };
 
 // 性能优化：使用 memo 避免不必要的重渲染