@pisell/materials 6.3.27 → 6.3.28

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -1,53 +1,139 @@
 /**
  * PisellMultipleSelect 组件样式
- * 
- * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
- * 此文件仅包含 Token 无法实现的样式
+ * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
  */
 
 .pisell-multiple-select {
+  height: 48px !important;
   width: 100%;
 
-  // 包装器布局（Token 无法配置）
+  .pisell-lowcode-select-clear {
+    color: #667085;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    margin: -22px -8px;
+    padding: 10px 8px;
+
+    &:hover {
+      color: #344054;
+    }
+  }
+
+  // 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;
+    }
   }
 
-  // 标签（Token 无法配置的自定义元素）
   &-label {
-    font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-weight: 600;
-    color: #344054;
+    color: #344054; // Gray/700
     line-height: 20px;
 
     &-required::after {
       content: ' *';
-      color: #D92D20;
+      color: #d92d20; // Error/600
       margin-left: 0;
     }
   }
 
-  // 辅助文本（Token 无法配置的自定义元素）
   &-helper-text {
     font-size: 14px;
     font-weight: 400;
-    color: #667085;
+    color: #667085; // Gray/500
     line-height: 20px;
   }
 
-  // 错误文本（Token 无法配置的自定义元素）
   &-error-text {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 400;
-    color: #D92D20;
-    line-height: 20px;
-    animation: fadeIn 0.3s ease-in-out;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-multiple-select-fadeIn 0.3s ease-in-out;
   }
 
-  // 下拉选项中的勾选图标（Figma 设计）
   &-option-content {
     display: flex;
     align-items: center;
@@ -56,99 +142,34 @@
   }
 
   &-option-check {
-    color: #7F56D9; // Primary/600
+    color: #7f56d9; // Primary/600
     font-size: 16px;
     margin-left: 8px;
   }
 
-  // 多选模式下的特殊样式（Token 部分支持，Less 补充细节）
-  :global {
-    // 选择框垂直内边距（多选时需要更小的内边距以容纳标签）
-    .pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
-      padding: 6px 16px !important;
-    }
-
-    // 标签圆角（Token 不支持 multipleItemBorderRadius）
-    .pisell-lowcode-select-selection-item {
-      border-radius: 6px !important;
-      padding: 6px 10px !important;
-      margin-inline-end: 4px !important;
-
-      // 确保标签内容垂直居中
-      &-content {
-        line-height: 24px !important;
-      }
-
-      // 删除图标样式微调
-      &-remove {
-        margin-left: 4px !important;
-
-        &:hover {
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    // hover 边框颜色（Token 不支持 colorBorderHover）
-    .pisell-lowcode-select-multiple:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.ant-select-open) {
-      .ant-select-selector:hover {
-        border-color: #D6BBFB !important;
-      }
-    }
-  }
-}
-
-// 下拉框内的搜索框样式（Figma 设计）
-:global {
-  .pisell-select-search-wrapper {
-    padding: 6px;
-    border-bottom: 1px solid #EAECF0;
-  }
-
-  .pisell-select-search-input {
-    padding: 9px 10px !important;
-    font-size: 14px;
-
-    .ant-input {
-      font-size: 14px !important;
-      color: #344054 !important;
-
-      &::placeholder {
-        color: #98A2B3 !important;
-        font-size: 12px !important;
-      }
-    }
-
-    &:hover,
-    &:focus-within {
-      background-color: transparent !important;
-    }
-  }
-}
-
-.pisell-multiple-select {
-  // 错误状态（Token 无法单独配置错误边框颜色）
+  // 错误状态（Figma 设计体系 Error 色）
   &-error {
-    :global(.ant-select-selector) {
-      border-color: #D92D20 !important;
+    .pisell-lowcode-select .pisell-lowcode-select-selector {
+      border-color: #fda29b !important; // Error/300
 
       &:hover {
-        border-color: #D92D20 !important;
+        border-color: #f97066 !important; // Error/400
       }
     }
 
-    :global(.ant-select-focused .ant-select-selector) {
-      border-color: #D92D20 !important;
-      box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    .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 返回的元素，不受 Token 控制）
+  // 聚合标签（maxTagPlaceholder）
   &-more-tag {
     display: inline-flex;
     align-items: center;
-    background-color: #EAECF0;
-    color: #344054;
+    background-color: #eaecf0;
+    color: #344054; // Gray/700
     border: none;
     border-radius: 6px;
     padding: 6px 10px;
@@ -159,35 +180,28 @@
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: #D0D5DD;
+      background-color: #d0d5dd; // Gray/300
     }
   }
 
-  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  // 只读状态
   &-readonly {
     &-display {
       display: flex;
       flex-wrap: wrap;
       gap: 4px;
-      padding: 12px 16px;
-      background-color: #F9FAFB;
-      border: 1px solid #EAECF0;
-      border-radius: 8px;
-      min-height: 48px;
+      align-items: center;
+      min-height: 24px;
     }
 
     &-tag {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 6px 10px;
-      background-color: #EAECF0;
-      border: none;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      color: #344054;
+      margin: 0;
+      cursor: default;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      font-size: 14px;
+      line-height: 22px;
+      padding: 2px 10px;
 
       &-icon {
         display: flex;
@@ -196,17 +210,13 @@
     }
 
     &-more-tag {
-      display: inline-flex;
-      align-items: center;
-      padding: 6px 10px;
-      background-color: #EAECF0;
-      color: #344054;
-      border: none;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      cursor: pointer;
+      margin: 0;
+      cursor: default;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      font-size: 14px;
+      line-height: 22px;
+      padding: 2px 10px;
     }
 
     &-empty {
@@ -218,8 +228,33 @@
   }
 }
 
-// 动画
-@keyframes fadeIn {
+// 下拉内搜索框（在 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;
     transform: translateY(-4px);

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.stories.js

@@ -51,7 +51,7 @@ var import_PisellMultipleSelect = __toESM(require("./PisellMultipleSelect"));
 var import_react = require("react");
 var import_antd = require("antd");
 var meta = {
-  title: "Components/PisellMultipleSelect",
+  title: "表单/表单组件/PisellMultipleSelect",
   component: import_PisellMultipleSelect.default,
   tags: ["autodocs"],
   argTypes: {

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

@@ -88,6 +88,7 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
       (opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase())
     );
   }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
+  const wrapperRef = (0, import_react.useRef)(null);
   const menuItemSelectedIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, { style: { color: "#7F56D9", fontSize: 16 } });
   const dropdownRender = (0, import_react.useCallback)(
     (menu) => {
@@ -120,7 +121,7 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
     },
     [options, showTooltipOnOverflow]
   );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-multiple-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: wrapperRef, className: (0, import_classnames.default)("pisell-multiple-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
     "label",
     {
       className: (0, import_classnames.default)("pisell-multiple-select-label", {
@@ -145,6 +146,8 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
       maxTagCount,
       maxTagPlaceholder,
       size,
+      popupClassName: "pisell-multiple-select-dropdown",
+      getPopupContainer: () => wrapperRef.current ?? document.body,
       className: (0, import_classnames.default)("pisell-multiple-select", {
         "pisell-multiple-select-error": error
       })

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

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

package/lib/components/pisellMultipleSelect/components/ReadOnlyView.js

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
+var import_tagColor = require("../../../utils/tagColor");
 var ReadOnlyView = (props) => {
   const {
     value = [],
@@ -73,7 +74,34 @@ var ReadOnlyView = (props) => {
       },
       label
     ),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-multiple-select-readonly-display" }, selectedOptions.length > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, tagDisplayInfo.visibleTags.map((option) => /* @__PURE__ */ import_react.default.createElement("span", { key: option.value, className: "pisell-multiple-select-readonly-tag" }, option.icon && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-tag-icon" }, option.icon), option.label)), tagDisplayInfo.hiddenCount > 0 && /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tagDisplayInfo.hiddenTags.map((t) => t.label).join(", ") }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-more-tag" }, "+", tagDisplayInfo.hiddenCount))) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-empty" }, "-"))
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-multiple-select-readonly-display" }, selectedOptions.length > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, tagDisplayInfo.visibleTags.map((option, idx) => /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tag,
+      {
+        key: option.value,
+        className: "pisell-multiple-select-readonly-tag",
+        color: option.color ?? (0, import_tagColor.getDefaultTagColor)(option.value, idx)
+      },
+      option.icon && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-tag-icon" }, option.icon),
+      option.label
+    )), tagDisplayInfo.hiddenCount > 0 && /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tooltip,
+      {
+        title: tagDisplayInfo.hiddenTags.map((t) => t.label).join(", ")
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Tag,
+        {
+          className: "pisell-multiple-select-readonly-more-tag",
+          style: {
+            backgroundColor: "#F2F4F7",
+            borderColor: "#EAECF0",
+            color: "#667085"
+          }
+        },
+        "+",
+        tagDisplayInfo.hiddenCount
+      )
+    )) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-multiple-select-readonly-empty" }, "-"))
   );
 };
 ReadOnlyView.displayName = "PisellMultipleSelectReadOnlyView";

package/lib/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/lib/components/pisellMultipleSelect/index.js

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

package/lib/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/lib/components/pisellNumber/PisellNumber.stories.js

@@ -51,7 +51,7 @@ var import_react = require("react");
 var import_antd = require("antd");
 var import_react2 = __toESM(require("react"));
 var meta = {
-  title: "Components/PisellNumber",
+  title: "表单/表单组件/PisellNumber",
   component: import_PisellNumber.PisellNumber,
   tags: ["autodocs"],
   argTypes: {

package/lib/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/lib/components/pisellNumber/index.js

@@ -32,7 +32,14 @@ __export(pisellNumber_exports, {
   PisellNumber: () => import_PisellNumber.default
 });
 module.exports = __toCommonJS(pisellNumber_exports);
+var import_locales = require("../../locales");
 var import_PisellNumber = __toESM(require("./PisellNumber"));
+import_PisellNumber.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 = {
   PisellNumber