@pisell/materials 6.3.27 → 6.3.28

package/lib/components/pisellPercent/PisellPercent.less

@@ -1,21 +1,141 @@
-// PisellPercent 组件样式
+/**
+ * PisellPercent 组件样式
+ * 基于 Figma 设计规范，与 PisellNumber 设计体系一致，覆盖时使用 pisell-lowcode-xxx
+ */
 
 .pisell-percent {
-  // 基础样式
   display: inline-block;
+  width: 100%;
+
+  &-edit {
+    position: relative;
+    width: 100%;
+
+    // InputNumber 外层（无边框避免双边框）
+    .pisell-lowcode-input-number {
+      width: 100% !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: none !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      .pisell-lowcode-input-number-input {
+        height: 46px !important;
+        padding: 12px 16px !important;
+        font-size: 16px !important;
+        line-height: 24px !important;
+        color: #101828 !important;
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        outline: none !important;
+
+        &::placeholder {
+          color: #667085 !important; // Gray/500
+        }
+
+        &:focus {
+          box-shadow: none !important;
+          outline: none !important;
+        }
+      }
+
+      &.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: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;
+          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;
+      }
+
+      .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;
+        }
+      }
+    }
+  }
+
+  // 错误提示（与设计体系一致）
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-percent-fadeIn 0.3s ease-in-out;
+  }
 
-  // 只读态样式 - text 变体
   &-read {
-    color: rgba(0, 0, 0, 0.85);
-    line-height: 1.5715;
+    color: #101828; // Gray/900
+    font-size: 16px;
+    line-height: 1.5;
   }
 
   // 进度条变体
   &-progress {
     width: 100%;
-    
-    // 默认进度条宽度
-    .ant-progress {
+
+    .pisell-lowcode-progress {
       width: 100%;
     }
   }
@@ -27,28 +147,26 @@
     justify-content: center;
   }
 
-  // 编辑态样式
-  &-edit {
-    position: relative;
-
-    // 错误提示
-    .pisell-percent-error {
-      margin-top: 4px;
-      color: #ff4d4f;
-      font-size: 14px;
-      line-height: 1.5;
-    }
-  }
-
   // 带滑块的编辑态
   &-with-slider {
-    .ant-slider {
+    .pisell-lowcode-slider {
       margin-bottom: 16px;
     }
   }
 
-  // 禁用态样式
   &-disabled {
-    // 继承 Ant Design InputNumber 的禁用样式
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+@keyframes pisell-percent-fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }

package/lib/components/pisellPercent/PisellPercent.stories.js

@@ -37,7 +37,7 @@ var import_PisellPercent = require("./PisellPercent");
 var import_react = require("react");
 var import_antd = require("antd");
 var meta = {
-  title: "Components/PisellPercent",
+  title: "表单/表单组件/PisellPercent",
   component: import_PisellPercent.PisellPercent,
   tags: ["autodocs"]
 };

package/lib/components/pisellPercent/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * PisellPercent 组件导出
  */
-export { default as PisellPercent } from './PisellPercent';
+import PisellPercent from './PisellPercent';
+export { PisellPercent };
 export type { PisellPercentProps } from './types';
 export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps } from './types';

package/lib/components/pisellPercent/index.js

@@ -32,7 +32,14 @@ __export(pisellPercent_exports, {
   PisellPercent: () => import_PisellPercent.default
 });
 module.exports = __toCommonJS(pisellPercent_exports);
+var import_locales = require("../../locales");
 var import_PisellPercent = __toESM(require("./PisellPercent"));
+import_PisellPercent.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-0-9") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-9-0") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellPercent

package/lib/components/pisellPercent/utils/rangeConverter.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 百分比范围转换工具函数
+ */
+/**
+ * 将值转换为百分比（0-100）
+ *
+ * @param value 原始值
+ * @param range 值的范围
+ * @returns 转换后的百分比值（0-100）
+ *
+ * @example
+ * // [0, 100] 范围 - 直接返回
+ * convertToPercent(85.5, [0, 100])  // 返回: 85.5
+ *
+ * @example
+ * // [0, 1] 范围 - 乘以 100
+ * convertToPercent(0.855, [0, 1])  // 返回: 85.5
+ *
+ * @example
+ * // 自定义范围 - 按比例计算
+ * convertToPercent(855, [0, 1000])  // 返回: 85.5
+ */
+export declare function convertToPercent(value: number | null | undefined, range: [number, number]): number | null;
+/**
+ * 将百分比值转换回原始范围
+ *
+ * @param percent 百分比值（0-100）
+ * @param range 目标范围
+ * @returns 转换后的值
+ *
+ * @example
+ * convertFromPercent(85.5, [0, 100])  // 返回: 85.5
+ * convertFromPercent(85.5, [0, 1])    // 返回: 0.855
+ * convertFromPercent(85.5, [0, 1000]) // 返回: 855
+ */
+export declare function convertFromPercent(percent: number | null | undefined, range: [number, number]): number | null;

package/lib/components/pisellPhone/PisellPhone.less

@@ -1,5 +1,6 @@
 /**
  * PisellPhone 组件样式
+ * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
  */
 
 .pisell-phone {
@@ -7,41 +8,132 @@
     position: relative;
     width: 100%;
 
-    .ant-space-compact {
+    .pisell-lowcode-space-compact {
       width: 100%;
+      position: relative;
+      border-radius: 8px;
 
-      // 国家码选择器样式
-      .ant-select {
-        flex-shrink: 0;
-
-        .ant-select-selector {
-          // 去掉右边框
-          border-right: none !important;
-          // 右侧不要圆角
-          border-top-right-radius: 0 !important;
-          border-bottom-right-radius: 0 !important;
-        }
+      // 聚焦时整体外圈（与 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;
+      }
+    }
 
-      // 输入框样式
-      .ant-input-affix-wrapper,
-      .ant-input {
-        flex: 1;
-        // 去掉左边框
-        border-left: none !important;
-        // 左侧不要圆角
-        border-top-left-radius: 0 !important;
-        border-bottom-left-radius: 0 !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 {
     margin-top: 4px;
     font-size: 12px;
-    color: #ff4d4f;
+    color: #d92d20; // Error/600
     line-height: 1.5;
-    animation: fadeIn 0.3s ease-in-out;
+    animation: pisell-phone-fadeIn 0.3s ease-in-out;
   }
 
   &-read {
@@ -54,15 +146,19 @@
     line-height: 1;
   }
 
+  &-country-code {
+    line-height: 1.5;
+  }
+
   &-clickable {
     transition: color 0.2s ease-in-out;
 
     &:hover {
-      color: #6D48C4 !important;
+      color: #6d48c4 !important;
     }
 
     &:active {
-      color: #5F3DA8 !important;
+      color: #5f3da8 !important;
     }
   }
 
@@ -72,8 +168,7 @@
   }
 }
 
-// 错误提示淡入动画
-@keyframes fadeIn {
+@keyframes pisell-phone-fadeIn {
   from {
     opacity: 0;
     transform: translateY(-4px);

package/lib/components/pisellPhone/PisellPhone.stories.js

@@ -51,7 +51,7 @@ module.exports = __toCommonJS(PisellPhone_stories_exports);
 var import_PisellPhone = require("./PisellPhone");
 var import_react = __toESM(require("react"));
 var meta = {
-  title: "表单/PisellPhone",
+  title: "表单/表单组件/PisellPhone",
   component: import_PisellPhone.PisellPhone,
   parameters: {
     layout: "centered",

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

@@ -62,7 +62,7 @@ var EditView = (props) => {
     {
       value: countryCode,
       onChange: handleCountryCodeChange,
-      style: { width: 100, height: 50 },
+      style: { width: 100, height: 48 },
       showSearch: true,
       optionFilterProp: "children",
       className: "pisell-phone-country-select",

package/lib/components/pisellPhone/components/ReadOnlyView.js

@@ -59,15 +59,29 @@ var ReadOnlyView = (props) => {
     }
   };
   const canDial = props.enableDial !== false && isMobile;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-phone-read ${props.className || ""}` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "small" }, props.showFlag !== false && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-phone-flag" }, (0, import_utils.getCountryFlag)(countryCode)), /* @__PURE__ */ import_react.default.createElement(
+  const textColor = canDial ? "#7F56DA" : props.color || "#101828";
+  const textFontSize = props.fontSize ?? 16;
+  const textFontWeight = props.fontWeight ?? 500;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-phone-read ${props.className || ""}` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "small" }, props.showFlag !== false && /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      className: "pisell-phone-country-code",
+      style: {
+        fontSize: textFontSize,
+        fontWeight: textFontWeight,
+        color: textColor
+      }
+    },
+    countryCode
+  ), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Typography.Text,
     {
       className: canDial ? "pisell-phone-clickable" : "",
       onClick: canDial ? handleDial : void 0,
       style: {
-        fontSize: props.fontSize || 16,
-        fontWeight: props.fontWeight || 500,
-        color: canDial ? "#7F56DA" : props.color || "#101828",
+        fontSize: textFontSize,
+        fontWeight: textFontWeight,
+        color: textColor,
         cursor: canDial ? "pointer" : "default",
         textDecoration: canDial ? "underline" : "none",
         ...props.style

package/lib/components/pisellPhone/index.d.ts

@@ -1,7 +1,8 @@
 /**
  * PisellPhone 组件导出
  */
-export { default as PisellPhone } from './PisellPhone';
+import PisellPhone from './PisellPhone';
+export { PisellPhone };
 export type { PisellPhoneProps, CountryCode } from './types';
 export { PRESET_COUNTRY_CODES, DEFAULT_COUNTRY_CODE, COMMON_COUNTRY_CODES } from './constants/countryCodes';
 export type { DisplayState, ValidationResult, TextInputState } from './types';

package/lib/components/pisellPhone/index.js

@@ -35,8 +35,15 @@ __export(pisellPhone_exports, {
   PisellPhone: () => import_PisellPhone.default
 });
 module.exports = __toCommonJS(pisellPhone_exports);
+var import_locales = require("../../locales");
 var import_PisellPhone = __toESM(require("./PisellPhone"));
 var import_countryCodes = require("./constants/countryCodes");
+import_PisellPhone.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-a-z") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-z-a") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   COMMON_COUNTRY_CODES,

package/lib/components/pisellPhone/utils/phoneFormatter.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 电话号码格式化工具
+ */
+/**
+ * 中国大陆手机号格式化：138 0000 0000
+ */
+export declare function formatChinaMobile(phone: string): string;
+/**
+ * 美国/加拿大号码格式化：(555) 123-4567
+ */
+export declare function formatUSPhone(phone: string): string;
+/**
+ * 英国号码格式化：1234 567 8900
+ */
+export declare function formatUKPhone(phone: string): string;
+/**
+ * 根据国家码格式化电话号码
+ * @param phone 电话号码（纯数字）
+ * @param countryCode 国家码
+ * @returns 格式化后的电话号码
+ */
+export declare function formatPhone(phone: string, countryCode: string): string;
+/**
+ * 电话号码脱敏
+ * @param phone 电话号码
+ * @param pattern 脱敏模式
+ * @returns 脱敏后的号码
+ *
+ * @example
+ * maskPhone('13800000000', 'middle') // '138****0000'
+ * maskPhone('13800000000', 'last')   // '1380000****'
+ */
+export declare function maskPhone(phone: string, pattern?: 'middle' | 'last'): string;
+/**
+ * 检测号码类型（中国）
+ * @param phone 电话号码
+ * @returns 号码类型
+ */
+export declare function detectPhoneType(phone: string): 'mobile' | 'landline' | 'unknown';

package/lib/components/pisellRating/PisellRating.less

@@ -1,41 +1,49 @@
-// PisellRating 组件样式
+/**
+ * PisellRating 组件样式
+ * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
+ */
 
 .pisell-rating {
   display: inline-flex;
   align-items: center;
-  
+
   // 只读态
   &-read {
-    .ant-rate {
+    .pisell-lowcode-rate {
       cursor: default;
       pointer-events: none;
     }
   }
-  
+
   // 编辑态
   &-edit {
-    .ant-rate {
+    .pisell-lowcode-rate {
       cursor: pointer;
     }
   }
-  
+
   // 禁用态
   &-disabled {
     opacity: 0.4;
-    
-    .ant-rate {
+
+    .pisell-lowcode-rate {
       cursor: not-allowed;
     }
   }
-  
-  // 评分数值文本
+
+  // 评分数值文本（与设计体系一致）
   &-value {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.85);
+    line-height: 1.5;
+    color: #101828; // Gray/900
+    margin-left: 8px;
   }
-  
+
   // 评分人数文本
   &-count {
     font-size: 14px;
+    line-height: 1.5;
+    color: #667085; // Gray/500
+    margin-left: 8px;
   }
 }

package/lib/components/pisellRating/PisellRating.stories.js

@@ -39,7 +39,7 @@ var import_react = require("react");
 var import_antd = require("antd");
 var import_icons = require("@ant-design/icons");
 var meta = {
-  title: "Components/PisellRating",
+  title: "表单/表单组件/PisellRating",
   component: import_PisellRating.PisellRating,
   tags: ["autodocs"]
 };

package/lib/components/pisellRating/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * PisellRating 组件导出
  */
-export { default as PisellRating } from './PisellRating';
+import PisellRating from './PisellRating';
+export { PisellRating };
 export type { PisellRatingProps } from './types';
 export type { DisplayState } from './types';

package/lib/components/pisellRating/index.js

@@ -32,7 +32,14 @@ __export(pisellRating_exports, {
   PisellRating: () => import_PisellRating.default
 });
 module.exports = __toCommonJS(pisellRating_exports);
+var import_locales = require("../../locales");
 var import_PisellRating = __toESM(require("./PisellRating"));
+import_PisellRating.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-0-9") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-9-0") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellRating