@pisell/materials 1.8.12 → 1.8.14

package/es/components/pisellModal/components/IpadModal/index.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { PcModalProps } from '../PcModal';
 export interface IpadModalProps extends PcModalProps {
 }
-declare const IpadModal: (props: IpadModalProps) => JSX.Element;
+declare const IpadModal: (props: IpadModalProps) => React.JSX.Element;
 export default IpadModal;

package/es/components/pisellModal/components/MobileModal/index.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { PcModalProps } from '../PcModal';
 import './index.less';
 export interface MobileModalProps extends PcModalProps {
     /** 移动端展示时弹窗高度 默认null 在移动端全屏 */
     mobileModalHeight?: string | number;
 }
-declare const MobileModal: (props: MobileModalProps) => JSX.Element;
+declare const MobileModal: (props: MobileModalProps) => React.JSX.Element;
 export default MobileModal;

package/es/components/pisellModal/components/PcModal/index.d.ts

@@ -26,5 +26,5 @@ export interface PcModalProps extends ModalProps {
     /** header是否展示 */
     header?: boolean | null;
 }
-declare const PcModal: (props: PcModalProps) => JSX.Element;
+declare const PcModal: (props: PcModalProps) => React.JSX.Element;
 export default PcModal;

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

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import IpadModal from './IpadModal';
 import MobileModal from './MobileModal';
 import PcModal from './PcModal';
 declare const platformCpt: {
-    h5: (props: import("./MobileModal").MobileModalProps) => JSX.Element;
-    pc: (props: import("./PcModal").PcModalProps) => JSX.Element;
-    ipad: (props: import("./IpadModal").IpadModalProps) => JSX.Element;
+    h5: (props: import("./MobileModal").MobileModalProps) => import("react").JSX.Element;
+    pc: (props: import("./PcModal").PcModalProps) => import("react").JSX.Element;
+    ipad: (props: import("./IpadModal").IpadModalProps) => import("react").JSX.Element;
 };
 export { IpadModal, MobileModal, PcModal, platformCpt };

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

@@ -31,7 +31,7 @@ export interface PisellModalProps extends ModalProps {
     header?: boolean | null;
 }
 declare const PisellModal: {
-    (props: PisellModalProps): JSX.Element;
+    (props: PisellModalProps): React.JSX.Element;
     confirm: (props: import("./components/functions").PisellModalFuncProps) => {
         destroy: () => void;
         update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
@@ -53,6 +53,6 @@ declare const PisellModal: {
         destroy: () => void;
         update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
     };
-    Information: (props: import("./components/Information").InformationProps) => JSX.Element;
+    Information: (props: import("./components/Information").InformationProps) => React.JSX.Element;
 };
 export default PisellModal;

package/es/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/es/components/pisellMultipleSelect/PisellMultipleSelect.stories.js

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

package/es/components/pisellMultipleSelect/components/EditView.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * 正常可编辑状态下的渲染
  */
 
-import React, { forwardRef, useMemo, useCallback, useState } from 'react';
+import React, { forwardRef, useMemo, useCallback, useState, useRef } from 'react';
 import { Select, Tooltip, Input } from 'antd';
 import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
@@ -93,7 +93,7 @@ var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
       return opt.label.toLowerCase().includes(searchKeyword.toLowerCase());
     });
   }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
-
+  var wrapperRef = useRef(null);
   // 自定义选中图标
   var menuItemSelectedIcon = /*#__PURE__*/React.createElement(CheckOutlined, {
     style: {
@@ -143,6 +143,7 @@ var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
     }, "+", omittedValues.length));
   }, [options, showTooltipOnOverflow]);
   return /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
     className: classNames('pisell-multiple-select-wrapper', className),
     style: style
   }, label && /*#__PURE__*/React.createElement("label", {
@@ -163,6 +164,11 @@ var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
     maxTagCount: maxTagCount,
     maxTagPlaceholder: maxTagPlaceholder,
     size: size,
+    popupClassName: "pisell-multiple-select-dropdown",
+    getPopupContainer: function getPopupContainer() {
+      var _wrapperRef$current;
+      return (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 ? _wrapperRef$current : document.body;
+    },
     className: classNames('pisell-multiple-select', {
       'pisell-multiple-select-error': error
     })

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 中重新导出，方便使用