@pisell/materials 6.3.26 → 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/pisellNavigationMenu/types.d.ts

@@ -0,0 +1,85 @@
+import { CSSProperties } from 'react';
+import { Props as TreeItem } from "../pisellDraggable/components/TreeItem/TreeItem";
+export interface NavigationMenuItem {
+    id: string;
+    /** 标题 */
+    title: string;
+    /** 图标 */
+    icon?: string;
+    /** 描述 */
+    description?: string;
+    /** 子菜单 */
+    children?: NavigationMenuItem[];
+    /** 版本 */
+    version?: string;
+    /** 是否是分组 */
+    isGroup?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddChild?: boolean;
+    /** 是否允许删除 */
+    allowDelete?: boolean;
+    /** 是否允许编辑 */
+    allowEdit?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddSubmenu?: boolean;
+    /** 是否允许添加页面 */
+    allowAddPage?: boolean;
+    /** 其他属性 */
+    [key: string]: any;
+}
+export interface PisellNavigationMenuProps {
+    /** 导航菜单数据 */
+    value: NavigationMenuItem[];
+    /** 是否允许拖拽排序 */
+    allowDrag?: boolean;
+    /** 是否允许删除菜单项 */
+    allowDelete?: boolean;
+    /** 是否允许添加子菜单 */
+    allowAddChild?: boolean;
+    /** 是否允许添加根菜单 */
+    allowAddRoot?: boolean;
+    /** 是否允许显示隐藏 */
+    allowIsShow?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 菜单项间距 */
+    spacing?: number;
+    /** 最大层级数 */
+    maxLevel?: number;
+    /** 样式 */
+    style?: CSSProperties;
+    /** 类名 */
+    className?: string;
+    /** 数据变化回调 */
+    onChange?: (items: NavigationMenuItem[]) => void;
+    /** 设计模式 */
+    __designMode?: string;
+    /** 标题 */
+    title?: string;
+    /** 添加子菜单回调 */
+    onAddSubMenu?: (item?: NavigationMenuItem) => void;
+    /** 添加页面回调 */
+    onAddPage?: (item?: NavigationMenuItem) => void;
+    /** 编辑回调 */
+    onEdit?: (item: NavigationMenuItem) => void;
+    /** 删除回调 */
+    onDelete?: (item: NavigationMenuItem) => void;
+    /** 左侧自定义内容 */
+    leftContent?: React.ReactNode;
+    /** 右侧自定义内容 */
+    rightContent?: React.ReactNode;
+    /** 获取item样式 */
+    getItemStyle?: (itemProps: TreeItem) => React.CSSProperties;
+    /** 自定义拖拽判断函数，返回false时阻止拖拽 */
+    canDrop?: (dragItem: NavigationMenuItem, dropTarget: NavigationMenuItem, parentId: string | number | null) => boolean;
+    /** 显示隐藏回调 */
+    onIsShow?: (item: NavigationMenuItem) => void;
+    /** 节点缩进宽度 */
+    indentationWidth?: number;
+    /** 隐藏描述 */
+    hideDescription?: boolean;
+    /** 悬浮时展示action */
+    showActionOnHover?: boolean;
+    /** 是否展示标题标签 */
+    showTitleTags?: boolean;
+}

package/lib/components/pisellNavigationMenu/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 树节点的基本接口
+ */
+export interface TreeNode {
+    [key: string]: any;
+    children?: TreeNode[];
+}
+/**
+ * 格式化树结构数据
+ * @param tree 要格式化的树结构数据
+ * @param formatter 格式化函数，用于处理每个节点
+ * @param childrenField 子节点字段名，默认为 'children'
+ * @returns 格式化后的树结构
+ */
+export declare function formatTree<T extends TreeNode, R = T>(tree: T[], formatter: (node: T, level: number, parent: T | null) => R, childrenField?: string): R[];