@pisell/private-materials 6.3.116 → 6.3.118

package/lib/pro/Selector/SelectorGroup.js

@@ -38,6 +38,7 @@ var import_lodash = require("lodash");
 var import_utils = require("@pisell/utils");
 var import_locales = __toESM(require("./locales"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_useThemeTokens = __toESM(require("../../hooks/useThemeTokens"));
 var import_Selector = __toESM(require("./Selector"));
 var import_utils2 = require("./utils");
 var import_IntersectionObserver = require("./components/IntersectionObserver");
@@ -59,6 +60,7 @@ var SelectorGroup = (0, import_react.forwardRef)(
       preserve: preserveDefault = false,
       style
     } = props;
+    const { colorPrimary, colorPrimaryBg } = (0, import_useThemeTokens.default)(props.theme);
     const [activeIndex, setActiveIndex] = (0, import_react.useState)(-1);
     const isManualChangeIndexRef = (0, import_react.useRef)(false);
     const containerRef = (0, import_react.useRef)(null);
@@ -511,7 +513,11 @@ var SelectorGroup = (0, import_react.forwardRef)(
           `pisell-batch-selector-${_uniqueId}`
         ),
         ref: containerRef,
-        style
+        style: {
+          ...style || {},
+          ["--color-primary"]: colorPrimary,
+          ["--color-primary-bg"]: colorPrimaryBg
+        }
       },
       renderTabs(),
       /* @__PURE__ */ import_react.default.createElement(

package/lib/pro/Selector/components/Card/index.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import './index.less';
+export declare type CardVariant = 'outlined' | 'borderless';
+export declare type CardLayout = 'vertical' | 'horizontal';
+export declare type SelectedType = 'none' | 'outlined' | 'outlined-bold' | 'filled';
+export declare type ActionsPosition = 'left' | 'right';
+export interface CardStyles {
+    container?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    content?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    actions?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    corner?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+}
+export interface CardStyleProps {
+    selected?: boolean;
+    disabled?: boolean;
+    hoverable?: boolean;
+    variant?: CardVariant;
+    layout?: CardLayout;
+}
+export interface CardProps {
+    /** 卡片变体样式 */
+    variant?: CardVariant;
+    /** 布局方向 */
+    layout?: CardLayout;
+    /** 操作按钮区域，水平模式在右侧，垂直模式在底部 */
+    actions?: React.ReactNode[];
+    /** 水平模式下，操作按钮的位置 */
+    actionsPosition?: ActionsPosition;
+    /** 垂直模式下，右上角绝对定位展示的组件 */
+    corner?: React.ReactNode;
+    /** 子内容 */
+    children?: React.ReactNode;
+    /** 选中状态 */
+    selected?: boolean;
+    /** 禁用状态 */
+    disabled?: boolean;
+    /** 是否可悬停 */
+    hoverable?: boolean;
+    /** 点击事件 */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** 自定义样式 */
+    styles?: CardStyles;
+    /**
+     * 选中时的样式类型
+     * - none: 无样式
+     * - outlined: 边框高亮
+     * - outlined-bold: 边框高亮 + 加粗（使用 outline 实现，不影响布局）
+     * - filled: 填充背景色
+     */
+    selectedType?: SelectedType;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/lib/pro/Selector/components/Card/index.js

@@ -54,13 +54,16 @@ var Card = ({
   className,
   style
 }) => {
-  const styleProps = {
-    selected,
-    disabled,
-    hoverable,
-    variant,
-    layout
-  };
+  const styleProps = (0, import_react.useMemo)(
+    () => ({
+      selected,
+      disabled,
+      hoverable,
+      variant,
+      layout
+    }),
+    [selected, disabled, hoverable, variant, layout]
+  );
   const containerStyle = (0, import_react.useMemo)(() => {
     if (!(styles == null ? void 0 : styles.container)) return style;
     const customStyle = typeof styles.container === "function" ? styles.container(styleProps) : styles.container;
@@ -82,7 +85,15 @@ var Card = ({
     if (!actions) return null;
     let _actions = Array.isArray(actions) ? actions.filter(Boolean) : [actions];
     if (_actions.length === 0) return null;
-    return /* @__PURE__ */ import_react.default.createElement("ul", { className: "pisell-pro-card_actions", style: actionsStyle }, actions.map((action, index) => /* @__PURE__ */ import_react.default.createElement("li", { key: index, className: "pisell-pro-card_actions-item" }, /* @__PURE__ */ import_react.default.createElement("span", { onClick: stopPropagation }, action))));
+    return /* @__PURE__ */ import_react.default.createElement("ul", { className: "pisell-pro-card_actions", style: actionsStyle }, actions.map((action, index) => /* @__PURE__ */ import_react.default.createElement(
+      "li",
+      {
+        key: index,
+        className: "pisell-pro-card_actions-item",
+        onClick: stopPropagation
+      },
+      action
+    )));
   };
   const renderCorner = () => {
     if (!corner || layout !== "vertical") return null;

package/lib/pro/Selector/components/Card/index.less

@@ -21,8 +21,8 @@
 
   /* 布局样式 */
   &-vertical {
-    flex-direction: column;
     border-radius: 12px;
+    flex-direction: column;
 
     .pisell-pro-card_content {
       flex: 1;
@@ -33,10 +33,13 @@
       align-items: center;
       justify-content: center;
       margin: 0;
+      padding: 0;
+      height: 64px;
     }
 
     .pisell-pro-card_actions-item {
-      margin: 20px 0;
+      margin: 0;
+      height: 100%;
     }
   }
 
@@ -45,6 +48,16 @@
     align-items: center;
     gap: 10px;
 
+    &.pisell-pro-card-actions-left {
+      .pisell-pro-card_actions {
+        order: 0;
+      }
+
+      .pisell-pro-card_content {
+        order: 1;
+      }
+    }
+
     .pisell-pro-card_content {
       flex: 1;
       font-size: 16px;
@@ -55,10 +68,13 @@
       align-items: center;
       margin: 0;
       padding: 0;
+      height: 100%;
+      order: 1;
     }
 
     .pisell-pro-card_actions-item {
       margin: 0;
+      height: 100%;
     }
   }
 
@@ -87,34 +103,34 @@
   /* 选中状态 - outlined类型 */
   &-selected&-selected-outlined {
     &.pisell-pro-card-outlined {
-      border-color: #7f56d9;
-      background-color: #f9f5ff;
+      border-color: var(--color-primary, #5d3f9f);
+      background-color: var(--color-primary-bg, #f9f5ff);
     }
 
     &.pisell-pro-card-borderless {
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
     }
     .pisell-pro-card_content {
-      color: #7f56d9;
+      color: var(--color-primary, #5d3f9f);
     }
   }
 
   /* 选中状态 - outlined-bold类型（加粗边框，使用 outline 实现不影响布局） */
   &-selected&-selected-outlined-bold {
     &.pisell-pro-card-outlined {
-      border-color: #7f56d9;
-      background-color: #f9f5ff;
-      outline: 2px solid #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
+      background-color: var(--color-primary-bg, #f9f5ff);
+      outline: 2px solid var(--color-primary, #5d3f9f);
       outline-offset: -2px;
     }
 
     &.pisell-pro-card-borderless {
-      border-color: #7f56d9;
-      outline: 2px solid #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
+      outline: 2px solid var(--color-primary, #5d3f9f);
       outline-offset: -2px;
     }
     .pisell-pro-card_content {
-      color: #7f56d9;
+      color: var(--color-primary, #5d3f9f);
     }
   }
 
@@ -122,9 +138,9 @@
   &-selected&-selected-filled {
     &.pisell-pro-card-outlined,
     &.pisell-pro-card-borderless {
-      background-color: #7f56d9;
+      background-color: var(--color-primary, #5d3f9f);
       color: #ffffff;
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
 
       .pisell-pro-card_content {
         color: #ffffff;

package/lib/pro/Selector/components/Indicator/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.less';
+export interface IndicatorProps {
+    mode?: 'single' | 'multiple';
+    variant?: 'outlined' | 'filled';
+    defaultChecked?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    styles?: {
+        container?: React.CSSProperties;
+        indicator?: React.CSSProperties;
+        content?: React.CSSProperties;
+    };
+    children?: React.ReactNode;
+    size?: 'small' | 'middle' | 'large' | number;
+}
+declare const Indicator: React.FC<IndicatorProps>;
+export default Indicator;

package/lib/pro/Selector/components/Indicator/index.js

@@ -115,7 +115,7 @@ var Indicator = (props) => {
       )
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement("label", { className: classes, style: styles.container }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("label", { className: classes, style: styles == null ? void 0 : styles.container }, /* @__PURE__ */ import_react.default.createElement(
     "input",
     {
       type: mode === "single" ? "radio" : "checkbox",
@@ -124,6 +124,6 @@ var Indicator = (props) => {
       disabled,
       onChange: handleInputChange
     }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-inner`, style: indicatorStyle }, checked && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, mode === "single" && variant === "outlined" ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-dot` }) : renderCheckIcon())), children && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-content` }, children));
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-inner`, style: indicatorStyle }, checked && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, mode === "single" && variant === "outlined" ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-dot` }) : renderCheckIcon())), children && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-content`, style: styles == null ? void 0 : styles.content }, children));
 };
 var Indicator_default = Indicator;

package/lib/pro/Selector/components/Indicator/index.less

@@ -1,12 +1,15 @@
 .pisell-pro-indicator {
+  vertical-align: middle;
   display: inline-flex;
   align-items: center;
-  vertical-align: middle;
+  justify-content: center;
   cursor: pointer;
   user-select: none;
   font-size: 14px;
   line-height: 1.5;
   position: relative;
+  height: 100%;
+  width: 100%;
 
   &-input {
     position: absolute;
@@ -23,7 +26,6 @@
     position: relative;
     box-sizing: border-box;
     border: 1px solid #d0d5dd;
-    background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -52,38 +54,39 @@
   }
 
   &-single.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #ffffff;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary-bg, transparent);
   }
 
   &-single.pisell-pro-indicator-outlined &-dot {
     width: 45%;
     height: 45%;
-    background-color: #7f56d9;
+    background-color: var(--color-primary, #5d3f9f);
     border-radius: 50%;
   }
 
   &-single.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #7f56d9;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary, #5d3f9f);
   }
 
   &-single.pisell-pro-indicator-filled &-check-icon {
     color: #ffffff;
   }
 
-  &-multiple.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #ffffff;
+  &-multiple.pisell-pro-indicator-outlined.pisell-pro-indicator-checked
+    &-inner {
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary-bg, transparent);
   }
 
   &-multiple.pisell-pro-indicator-outlined &-check-icon {
-    color: #7f56d9;
+    color: var(--color-primary, #5d3f9f);
   }
 
   &-multiple.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #7f56d9;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary, #5d3f9f);
   }
 
   &-multiple.pisell-pro-indicator-filled &-check-icon {

package/lib/pro/Selector/components/LayoutContainer/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LayoutConfig } from '../../types';
+import './index.less';
+interface LayoutContainerProps {
+    className: string;
+    config: LayoutConfig | null;
+    children: React.ReactNode[];
+}
+/**
+ * 统一的布局容器组件
+ *
+ * 支持三种布局模式：
+ * 1. 响应式布局（推荐）：通过 responsive 配置，使用 ResizeObserver 实现容器级响应式
+ * 2. Custom 布局：通过 className 使用预设样式
+ * 3. Ant Design Grid 布局：基础的栅格布局，用于简单场景
+ */
+declare function LayoutContainer({ className: containerClassName, config, children, }: LayoutContainerProps): React.ReactElement | null;
+export default LayoutContainer;

package/lib/pro/Selector/components/LayoutContainer/index.js

@@ -35,19 +35,147 @@ module.exports = __toCommonJS(LayoutContainer_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
 var ARow = import_antd.Row;
 var ACol = import_antd.Col;
+function normalizeBreakpoints(breakpoints, defaultGap) {
+  const normalized = {};
+  for (const [width, config] of Object.entries(breakpoints)) {
+    const widthNum = Number(width);
+    if (typeof config === "number") {
+      normalized[widthNum] = { columns: config, gap: defaultGap };
+    } else {
+      normalized[widthNum] = { ...config, gap: config.gap ?? defaultGap };
+    }
+  }
+  return normalized;
+}
+function generateBreakpoints(minWidth, maxColumns, gap = 16) {
+  const gapNum = typeof gap === "number" ? gap : parseInt(gap, 10) || 16;
+  const breakpoints = {
+    0: { columns: 1, gap }
+  };
+  for (let cols = 2; cols <= maxColumns; cols++) {
+    const breakpoint = cols * minWidth + (cols - 1) * gapNum;
+    breakpoints[breakpoint] = { columns: cols, gap };
+  }
+  return breakpoints;
+}
+function getActiveBreakpoint(width, breakpoints, defaultColumns = 1, defaultGap = 16) {
+  const sortedBreakpoints = Object.keys(breakpoints).map(Number).sort((a, b) => b - a);
+  for (const breakpoint of sortedBreakpoints) {
+    if (width >= breakpoint) {
+      return breakpoints[breakpoint];
+    }
+  }
+  return { columns: defaultColumns, gap: defaultGap };
+}
+function parseResponsiveConfig(responsive) {
+  const { minWidth, maxColumns, breakpoints, gap = 16 } = responsive;
+  let finalBreakpoints = {};
+  if (minWidth && maxColumns) {
+    finalBreakpoints = generateBreakpoints(minWidth, maxColumns, gap);
+  }
+  if (breakpoints) {
+    const normalizedBreakpoints = normalizeBreakpoints(breakpoints, gap);
+    finalBreakpoints = { ...finalBreakpoints, ...normalizedBreakpoints };
+  }
+  if (Object.keys(finalBreakpoints).length === 0) {
+    finalBreakpoints = { 0: { columns: responsive.defaultColumns ?? 1, gap } };
+  }
+  return finalBreakpoints;
+}
+function useContainerWidth(ref, debounceMs = 0) {
+  const [width, setWidth] = (0, import_react.useState)(0);
+  const timeoutRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const element = ref.current;
+    if (!element) return;
+    const updateWidth = (newWidth) => {
+      if (debounceMs > 0) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          setWidth(newWidth);
+        }, debounceMs);
+      } else {
+        setWidth(newWidth);
+      }
+    };
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        updateWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(element);
+    setWidth(element.getBoundingClientRect().width);
+    return () => {
+      observer.disconnect();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [ref, debounceMs]);
+  return width;
+}
+var baseClassName = "pisell-pro-selector_layout";
 function LayoutContainer({
   className: containerClassName,
   config,
   children
 }) {
+  const containerRef = (0, import_react.useRef)(null);
+  const responsiveConfig = config == null ? void 0 : config.responsive;
+  const hasResponsive = !!responsiveConfig;
+  const breakpoints = (0, import_react.useMemo)(() => {
+    if (!responsiveConfig) return null;
+    return parseResponsiveConfig(responsiveConfig);
+  }, [responsiveConfig]);
+  const containerWidth = useContainerWidth(
+    containerRef,
+    (responsiveConfig == null ? void 0 : responsiveConfig.debounce) ?? 0
+  );
+  const activeConfig = (0, import_react.useMemo)(() => {
+    if (!breakpoints) return null;
+    return getActiveBreakpoint(
+      containerWidth,
+      breakpoints,
+      responsiveConfig == null ? void 0 : responsiveConfig.defaultColumns,
+      responsiveConfig == null ? void 0 : responsiveConfig.gap
+    );
+  }, [containerWidth, breakpoints, responsiveConfig]);
   if (!config) {
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: containerClassName }, children);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(baseClassName, containerClassName) }, children);
   }
   const { type, className, containerStyle = {} } = config;
+  if (hasResponsive) {
+    const cssVariables = {
+      "--layout-columns": (activeConfig == null ? void 0 : activeConfig.columns) ?? 1,
+      "--layout-gap": typeof (activeConfig == null ? void 0 : activeConfig.gap) === "number" ? `${activeConfig.gap}px` : (activeConfig == null ? void 0 : activeConfig.gap) ?? "16px"
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: (0, import_classnames.default)(
+          baseClassName,
+          `${baseClassName}-responsive`,
+          containerClassName,
+          className
+        ),
+        style: { ...cssVariables, ...containerStyle, ...activeConfig == null ? void 0 : activeConfig.style }
+      },
+      children
+    );
+  }
   if (type !== "antdGrid") {
-    const layoutClassName = (0, import_classnames.default)(containerClassName, className);
+    const layoutClassName = (0, import_classnames.default)(
+      baseClassName,
+      containerClassName,
+      className
+    );
     return /* @__PURE__ */ import_react.default.createElement("div", { className: layoutClassName, style: containerStyle }, children);
   }
   const { columns = 1, align, justify, gutter, wrap, colConfig = {} } = config;

package/lib/pro/Selector/components/LayoutContainer/index.less

@@ -0,0 +1,19 @@
+.pisell-pro-selector_layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  // 响应式布局容器
+  &-responsive {
+    display: grid;
+    gap: var(--layout-gap, 16px);
+    grid-template-columns: repeat(var(--layout-columns, 1), 1fr);
+  }
+
+  // 自动宽度布局 - 内容自适应
+  &-auto-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+}

package/lib/pro/Selector/components/Media/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.less';
+import type { MediaProps, MediaStyleProps, MediaShape, MediaSize, MediaCoverType } from './types';
+export type { MediaProps, MediaStyleProps, MediaShape, MediaSize, MediaCoverType, };
+declare const Media: React.FC<MediaProps>;
+export default Media;

package/lib/pro/Selector/components/Media/index.js

@@ -164,10 +164,13 @@ var Media = ({
   const renderIndicator = () => {
     if (!showIndicator || !indicator || !selected) return null;
     if (import_react.default.isValidElement(indicator)) {
-      const clonedIndicator = import_react.default.cloneElement(indicator, {
-        size: indicatorSize,
-        variant: "filled"
-      });
+      const clonedIndicator = import_react.default.cloneElement(
+        indicator,
+        {
+          size: indicatorSize,
+          variant: "filled"
+        }
+      );
       return /* @__PURE__ */ import_react.default.createElement(
         "div",
         {

package/lib/pro/Selector/components/Media/index.less

@@ -80,7 +80,7 @@
   &-selected {
     .pisell-selector_media-cover {
       border-width: 2px;
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
     }
 
     .pisell-selector_media-label {

package/lib/pro/Selector/demo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SelectorDemo: () => JSX.Element;
+export default SelectorDemo;

package/lib/pro/Selector/demo.js

@@ -57,7 +57,7 @@ var SelectorDemo = () => {
   });
   const [paymentMethod, setPaymentMethod] = (0, import_react.useState)("alipay");
   const [serviceOptions, setServiceOptions] = (0, import_react.useState)([1, 2]);
-  const [width, setWidth] = (0, import_react.useState)("660");
+  const [width, setWidth] = (0, import_react.useState)("100%");
   const simpleDataSource = [
     { id: 1, title: "选项A" },
     { id: 2, title: "选项B" },

package/lib/pro/Selector/hooks/usePresetItemProps.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ItemProps, ItemLayout, SelectorVariant, PresetConfig } from '../types';
+interface UsePresetItemPropsParams {
+    variant?: SelectorVariant;
+    itemLayout?: ItemLayout;
+    preset?: PresetConfig;
+    itemProps?: ItemProps;
+    indicator: React.ReactNode;
+    numberSelector: React.ReactNode;
+    mode?: 'single' | 'multiple';
+    disabled?: boolean;
+    selected?: boolean;
+}
+interface PresetItemPropsResult {
+    mediaProps: Record<string, any>;
+    cardProps: Record<string, any>;
+}
+/**
+ * 根据预设项生成 option Item 的 props
+ *
+ * 规则说明：
+ * 1. variant='default': 使用 Card，borderless，horizontal，selectedType='none'，actionsPosition='left'
+ *    1.1 preset.variant='1': renderContent={() => <span>{dataSource._label}</span>}
+ *    1.2 preset.variant='2': renderContent={() => <span>{dataSource._label}</span>}
+ * 2. variant='media': 使用 MediaItem
+ *    2.1 preset.variant='1': size='small', showIndicator=false, 单选shape='circle'，多选shape='square'
+ *    2.2 preset.variant='2': size='large', showIndicator=true, shape='circle'
+ * 3. variant='card': 根据 itemLayout 区分横向和纵向
+ *    3.1 横向（horizontal）:
+ *        - preset.variant='2': selectedType='filled'
+ *        - preset.variant='5': variant='borderless'
+ *        - 默认样式: styles.container = { padding: 8 }
+ *        - 使用 lodash merge 深度合并样式，itemProps.styles 优先级更高
+ *    3.2 纵向（vertical）:
+ *        - 统一使用 borderless，selectedType='none'
+ *        - preset.variant='2': indicator 通过 corner 传入
+ *    3.3 actions 处理:
+ *        - 优先使用 numberSelector（如果存在）
+ *        - 其次使用 indicator
+ *        - 纵向且 preset.variant='2': indicator 放到 corner，actions 仅展示 numberSelector
+ */
+declare const usePresetItemProps: (params: UsePresetItemPropsParams) => PresetItemPropsResult;
+export default usePresetItemProps;

package/lib/pro/Selector/hooks/usePresetItemProps.js

@@ -111,6 +111,7 @@ var usePresetItemProps = (params) => {
           content: {}
         };
         if (presetVariant === "1") {
+          defaultStyles.container.padding = "12px 16px";
           defaultStyles.content.textAlign = "center";
           baseProps = {
             selectedType: "outlined-bold"
@@ -120,6 +121,7 @@ var usePresetItemProps = (params) => {
           }
           indicator = null;
         } else if (presetVariant === "2") {
+          defaultStyles.container.padding = "12px 16px";
           baseProps = {
             selectedType: "filled"
           };