@pisell/materials 3.3.84 → 3.3.86

package/es/components/pisellMultipleSelect/components/ReadOnlyView.d.ts

@@ -1,6 +1,6 @@
 /**
  * PisellMultipleSelect - ReadOnlyView (只读态视图)
- * 只读状态下的渲染
+ * 只读状态下使用 Tag 展示选中值
  */
 import React from 'react';
 import type { ReadOnlyViewProps } from '../types';

package/es/components/pisellMultipleSelect/components/ReadOnlyView.js

@@ -1,12 +1,13 @@
 /**
  * PisellMultipleSelect - ReadOnlyView (只读态视图)
- * 只读状态下的渲染
+ * 只读状态下使用 Tag 展示选中值
  */
 
 import React, { useMemo } from 'react';
-import { Tooltip } from 'antd';
+import { Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { findOptionsByValues, calculateTagDisplay } from '@pisell/utils';
+import { getDefaultTagColor } from "../../../utils/tagColor";
 var ReadOnlyView = function ReadOnlyView(props) {
   var _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
@@ -17,13 +18,9 @@ var ReadOnlyView = function ReadOnlyView(props) {
     maxTagCount = _props$maxTagCount === void 0 ? 3 : _props$maxTagCount,
     className = props.className,
     style = props.style;
-
-  // 查找选中的选项
   var selectedOptions = useMemo(function () {
     return findOptionsByValues(value, options);
   }, [value, options]);
-
-  // 标签聚合信息
   var tagDisplayInfo = useMemo(function () {
     return calculateTagDisplay(value, options, maxTagCount);
   }, [value, options, maxTagCount]);
@@ -36,10 +33,12 @@ var ReadOnlyView = function ReadOnlyView(props) {
     })
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "pisell-multiple-select-readonly-display"
-  }, selectedOptions.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, tagDisplayInfo.visibleTags.map(function (option) {
-    return /*#__PURE__*/React.createElement("span", {
+  }, selectedOptions.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, tagDisplayInfo.visibleTags.map(function (option, idx) {
+    var _option$color;
+    return /*#__PURE__*/React.createElement(Tag, {
       key: option.value,
-      className: "pisell-multiple-select-readonly-tag"
+      className: "pisell-multiple-select-readonly-tag",
+      color: (_option$color = option.color) !== null && _option$color !== void 0 ? _option$color : getDefaultTagColor(option.value, idx)
     }, option.icon && /*#__PURE__*/React.createElement("span", {
       className: "pisell-multiple-select-readonly-tag-icon"
     }, option.icon), option.label);
@@ -47,8 +46,13 @@ var ReadOnlyView = function ReadOnlyView(props) {
     title: tagDisplayInfo.hiddenTags.map(function (t) {
       return t.label;
     }).join(', ')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "pisell-multiple-select-readonly-more-tag"
+  }, /*#__PURE__*/React.createElement(Tag, {
+    className: "pisell-multiple-select-readonly-more-tag",
+    style: {
+      backgroundColor: '#F2F4F7',
+      borderColor: '#EAECF0',
+      color: '#667085'
+    }
   }, "+", tagDisplayInfo.hiddenCount))) : /*#__PURE__*/React.createElement("span", {
     className: "pisell-multiple-select-readonly-empty"
   }, "-")));

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

@@ -1,6 +1,7 @@
 /**
  * PisellMultipleSelect 组件导出
  */
-export { default as PisellMultipleSelect } from './PisellMultipleSelect';
+import PisellMultipleSelect from './PisellMultipleSelect';
+export { PisellMultipleSelect };
 export type { PisellMultipleSelectProps, MultipleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, TagRendererProps, } from './types';
 export type { SelectOption, FilterOptionFunc, SortDirection, MultipleSelectState, TagDisplayInfo, } from './types';

package/es/components/pisellMultipleSelect/index.js

@@ -2,6 +2,21 @@
  * PisellMultipleSelect 组件导出
  */
 
-export { default as PisellMultipleSelect } from "./PisellMultipleSelect";
+import { getText } from "../../locales";
+import PisellMultipleSelect from "./PisellMultipleSelect";
+
+/** RecordBoard 列 type 联动排序：内置 First → Last / Last → First */
+PisellMultipleSelect.SortOptions = {
+  getSortItems: function getSortItems(fieldKey) {
+    return [{
+      key: "".concat(fieldKey, ":asc"),
+      label: getText('sort-first-last')
+    }, {
+      key: "".concat(fieldKey, ":desc"),
+      label: getText('sort-last-first')
+    }];
+  }
+};
+export { PisellMultipleSelect };
 
 // 公共类型从 types 中重新导出，方便使用

package/es/components/pisellNumber/PisellNumber.less

@@ -1,30 +1,148 @@
-// PisellNumber 组件样式
+/**
+ * PisellNumber 组件样式
+ * 基于 Figma 设计规范，与 SingleLineText / PisellEmail 设计体系一致，覆盖时使用 pisell-lowcode-xxx
+ */
 
 .pisell-number {
-  // 基础样式
   display: inline-block;
+  width: 100%;
 
-  // 只读态样式
-  &-read {
-    color: rgba(0, 0, 0, 0.85);
-    line-height: 1.5715;
-  }
-
-  // 编辑态样式
   &-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;
 
-    // 错误提示
-    .pisell-number-error {
-      margin-top: 4px;
-      color: #ff4d4f;
-      font-size: 14px;
-      line-height: 1.5;
+          &: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-number-fadeIn 0.3s ease-in-out;
+  }
+
+  &-read {
+    color: #101828; // Gray/900
+    line-height: 1.5;
+    font-size: 16px;
+  }
+
   &-disabled {
-    // 继承 Ant Design InputNumber 的禁用样式
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+@keyframes pisell-number-fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }

package/es/components/pisellNumber/PisellNumber.stories.js

@@ -16,7 +16,7 @@ import React from 'react';
  * 用于展示和测试组件的各种状态和配置
  */
 var meta = {
-  title: 'Components/PisellNumber',
+  title: '表单/表单组件/PisellNumber',
   component: PisellNumber,
   tags: ['autodocs'],
   argTypes: {

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

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

package/es/components/pisellNumber/index.js

@@ -2,6 +2,21 @@
  * PisellNumber 组件导出
  */
 
-export { default as PisellNumber } from "./PisellNumber";
+import { getText } from "../../locales";
+import PisellNumber from "./PisellNumber";
+
+/** RecordBoard 列 type 联动排序：内置 0 → 9 / 9 → 0 */
+PisellNumber.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 { PisellNumber };
 
 // 公共类型从 types 中重新导出，方便使用

package/es/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/es/components/pisellPercent/PisellPercent.stories.js

@@ -13,7 +13,7 @@ import { Form } from 'antd';
  * PisellPercent 组件 Storybook
  */
 var meta = {
-  title: 'Components/PisellPercent',
+  title: '表单/表单组件/PisellPercent',
   component: PisellPercent,
   tags: ['autodocs']
 };

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

@@ -2,6 +2,21 @@
  * PisellPercent 组件导出
  */
 
-export { default as PisellPercent } from "./PisellPercent";
+import { getText } from "../../locales";
+import PisellPercent from "./PisellPercent";
+
+/** RecordBoard 列 type 联动排序：内置 0 → 9 / 9 → 0 */
+PisellPercent.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 { PisellPercent };
 
 // 公共类型从 types 中重新导出，方便使用