@pisell/materials 3.3.84 → 3.3.86

package/es/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/es/components/pisellPhone/PisellPhone.stories.js

@@ -19,7 +19,7 @@ import React from 'react';
  * - 号码脱敏
  */
 var meta = {
-  title: '表单/PisellPhone',
+  title: '表单/表单组件/PisellPhone',
   component: PisellPhone,
   parameters: {
     layout: 'centered',

package/es/components/pisellPhone/components/EditView.js

@@ -73,7 +73,7 @@ var EditView = function EditView(props) {
     onChange: handleCountryCodeChange,
     style: {
       width: 100,
-      height: 50
+      height: 48
     },
     showSearch: true,
     optionFilterProp: "children",

package/es/components/pisellPhone/components/ReadOnlyView.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { Typography, Button, Space } from 'antd';
 import { PhoneOutlined } from '@ant-design/icons';
-import { formatPhone, maskPhone, getCountryFlag } from "../utils";
+import { formatPhone, maskPhone } from "../utils";
 /**
  * PisellPhone 只读态视图组件
  * 
@@ -22,6 +22,7 @@ import { formatPhone, maskPhone, getCountryFlag } from "../utils";
  * @param props 组件 Props
  */
 var ReadOnlyView = function ReadOnlyView(props) {
+  var _props$fontSize, _props$fontWeight;
   var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
   var countryCode = props.countryCode || '+86';
 
@@ -50,19 +51,27 @@ var ReadOnlyView = function ReadOnlyView(props) {
     }
   };
   var canDial = props.enableDial !== false && isMobile;
+  var textColor = canDial ? '#7F56DA' : props.color || '#101828';
+  var textFontSize = (_props$fontSize = props.fontSize) !== null && _props$fontSize !== void 0 ? _props$fontSize : 16;
+  var textFontWeight = (_props$fontWeight = props.fontWeight) !== null && _props$fontWeight !== void 0 ? _props$fontWeight : 500;
   return /*#__PURE__*/React.createElement("div", {
     className: "pisell-phone-read ".concat(props.className || '')
   }, /*#__PURE__*/React.createElement(Space, {
     size: "small"
   }, props.showFlag !== false && /*#__PURE__*/React.createElement("span", {
-    className: "pisell-phone-flag"
-  }, getCountryFlag(countryCode)), /*#__PURE__*/React.createElement(Typography.Text, {
+    className: "pisell-phone-country-code",
+    style: {
+      fontSize: textFontSize,
+      fontWeight: textFontWeight,
+      color: textColor
+    }
+  }, countryCode), /*#__PURE__*/React.createElement(Typography.Text, {
     className: canDial ? 'pisell-phone-clickable' : '',
     onClick: canDial ? handleDial : undefined,
     style: _objectSpread({
-      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/es/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/es/components/pisellPhone/index.js

@@ -2,7 +2,22 @@
  * PisellPhone 组件导出
  */
 
-export { default as PisellPhone } from "./PisellPhone";
+import { getText } from "../../locales";
+import PisellPhone from "./PisellPhone";
+
+/** RecordBoard 列 type 联动排序：内置 A → Z / Z → A */
+PisellPhone.SortOptions = {
+  getSortItems: function getSortItems(fieldKey) {
+    return [{
+      key: "".concat(fieldKey, ":asc"),
+      label: getText('sort-a-z')
+    }, {
+      key: "".concat(fieldKey, ":desc"),
+      label: getText('sort-z-a')
+    }];
+  }
+};
+export { PisellPhone };
 // 导出预设国家码列表，方便使用
 export { PRESET_COUNTRY_CODES, DEFAULT_COUNTRY_CODE, COMMON_COUNTRY_CODES } from "./constants/countryCodes";
 

package/es/components/pisellQuickFilter/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const pisellQuickFilter: React.ForwardRefExoticComponent<import("antd").FormInstance<any> & {
+    hasForm?: boolean | undefined;
+    children?: React.ReactNode;
+    formFiltersPrefix: string;
+    filterList?: import("../filter/types").FilterItemProps[] | undefined;
+    quickFilterMaxLength: number;
+    hiddenQuickFilter: boolean;
+    hiddenOtherFilter: boolean;
+} & React.RefAttributes<unknown>>;
+export default pisellQuickFilter;

package/es/components/pisellQuickFilter/type.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FilterItemProps } from '../filter/types';
+import { FormInstance } from 'antd';
+export declare type PisellQuickFilterProps = FormInstance & {
+    hasForm?: boolean;
+    children?: React.ReactNode;
+    formFiltersPrefix: string;
+    filterList?: FilterItemProps[];
+    quickFilterMaxLength: number;
+    hiddenQuickFilter: boolean;
+    hiddenOtherFilter: boolean;
+};

package/es/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/es/components/pisellRating/PisellRating.stories.js

@@ -10,7 +10,7 @@ import { useState } from 'react';
 import { Form } from 'antd';
 import { HeartFilled, SmileFilled } from '@ant-design/icons';
 var meta = {
-  title: 'Components/PisellRating',
+  title: '表单/表单组件/PisellRating',
   component: PisellRating,
   tags: ['autodocs']
 };

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

@@ -2,6 +2,21 @@
  * PisellRating 组件导出
  */
 
-export { default as PisellRating } from "./PisellRating";
+import { getText } from "../../locales";
+import PisellRating from "./PisellRating";
+
+/** RecordBoard 列 type 联动排序：内置 0 → 9 / 9 → 0 */
+PisellRating.SortOptions = {
+  getSortItems: function getSortItems(fieldKey) {
+    return [{
+      key: "".concat(fieldKey, ":asc"),
+      label: getText('sort-0-9')
+    }, {
+      key: "".concat(fieldKey, ":desc"),
+      label: getText('sort-9-0')
+    }];
+  }
+};
+export { PisellRating };
 
 // 公共类型重新导出

package/es/components/pisellRecordBoard/PisellRecordBoard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RecordBoardProps } from './types';
+/**
+ * RecordBoard 容器：提供统一的 data / pagination / search 上下文。
+ * 仅接受打散 props：列表/分页/搜索/多选/列显隐、以及 grid/toolBar/search/paginationConfig/batchActionBar/cardList。
+ */
+declare const PisellRecordBoard: React.FC<RecordBoardProps>;
+export default PisellRecordBoard;