@pisell/private-materials 6.3.104 → 6.3.106

package/es/pro/Selector/SelectorGroup.js

@@ -27,6 +27,7 @@ import { isEqual } from 'lodash';
 import { locales } from '@pisell/utils';
 import localeTexts from "./locales";
 import useEngineContext from "../../hooks/useEngineContext";
+import useThemeTokens from "../../hooks/useThemeTokens";
 import Selector from "./Selector";
 import { normalizeRules, computeAutoHiddenGroups, computeEffects, getSelectedSet, pruneValuesByAllowOnly, generateSimpleUUID } from "./utils";
 import { IntersectionObserverProvider, IntersectionItem } from "./components/IntersectionObserver";
@@ -44,6 +45,9 @@ var SelectorGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$preserve = props.preserve,
     preserveDefault = _props$preserve === void 0 ? false : _props$preserve,
     style = props.style;
+  var _useThemeTokens = useThemeTokens(props.theme),
+    colorPrimary = _useThemeTokens.colorPrimary,
+    colorPrimaryBg = _useThemeTokens.colorPrimaryBg;
   var _useState = useState(-1),
     _useState2 = _slicedToArray(_useState, 2),
     activeIndex = _useState2[0],
@@ -556,7 +560,7 @@ var SelectorGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-batch-selector', "pisell-batch-selector-".concat(_uniqueId)),
     ref: containerRef,
-    style: style
+    style: _objectSpread(_objectSpread({}, style || {}), {}, _defineProperty(_defineProperty({}, '--color-primary', colorPrimary), '--color-primary-bg', colorPrimaryBg))
   }, renderTabs(), /*#__PURE__*/React.createElement(IntersectionObserverProvider, {
     rootMargin: "-70px 0px 0px 0px",
     disabled: ((_props$tabProps2 = props.tabProps) === null || _props$tabProps2 === void 0 ? void 0 : _props$tabProps2.visible) === false,

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

@@ -33,13 +33,15 @@ var Card = function Card(_ref) {
     className = _ref.className,
     style = _ref.style;
   // 样式属性对象，用于传递给样式函数
-  var styleProps = {
-    selected: selected,
-    disabled: disabled,
-    hoverable: hoverable,
-    variant: variant,
-    layout: layout
-  };
+  var styleProps = useMemo(function () {
+    return {
+      selected: selected,
+      disabled: disabled,
+      hoverable: hoverable,
+      variant: variant,
+      layout: layout
+    };
+  }, [selected, disabled, hoverable, variant, layout]);
 
   // 计算容器样式
   var containerStyle = useMemo(function () {
@@ -77,10 +79,9 @@ var Card = function Card(_ref) {
     }, actions.map(function (action, index) {
       return /*#__PURE__*/React.createElement("li", {
         key: index,
-        className: "pisell-pro-card_actions-item"
-      }, /*#__PURE__*/React.createElement("span", {
+        className: "pisell-pro-card_actions-item",
         onClick: stopPropagation
-      }, action));
+      }, action);
     }));
   };
 

package/es/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/es/pro/Selector/components/Indicator/index.d.ts

@@ -11,6 +11,7 @@ export interface IndicatorProps {
     styles?: {
         container?: React.CSSProperties;
         indicator?: React.CSSProperties;
+        content?: React.CSSProperties;
     };
     children?: React.ReactNode;
     size?: 'small' | 'middle' | 'large' | number;

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

@@ -82,7 +82,7 @@ var Indicator = function Indicator(props) {
   };
   return /*#__PURE__*/React.createElement("label", {
     className: classes,
-    style: styles.container
+    style: styles === null || styles === void 0 ? void 0 : styles.container
   }, /*#__PURE__*/React.createElement("input", {
     type: mode === 'single' ? 'radio' : 'checkbox',
     className: "".concat(prefixCls, "-input"),
@@ -95,7 +95,8 @@ var Indicator = function Indicator(props) {
   }, checked && /*#__PURE__*/React.createElement(React.Fragment, null, mode === 'single' && variant === 'outlined' ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-dot")
   }) : renderCheckIcon())), children && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-content")
+    className: "".concat(prefixCls, "-content"),
+    style: styles === null || styles === void 0 ? void 0 : styles.content
   }, children));
 };
 export default Indicator;

package/es/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/es/pro/Selector/components/LayoutContainer/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LayoutConfig } from '../../types';
+import './index.less';
 interface LayoutContainerProps {
     className: string;
     config: LayoutConfig | null;
@@ -8,9 +9,10 @@ interface LayoutContainerProps {
 /**
  * 统一的布局容器组件
  *
- * 支持两种布局模式：
- * 1. Custom 布局（推荐）：通过 className 使用预设样式，containerStyle
- * 2. Ant Design Grid 布局：基础的栅格布局，用于简单场景
+ * 支持三种布局模式：
+ * 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/es/pro/Selector/components/LayoutContainer/index.js

@@ -1,24 +1,227 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from 'react';
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { Row, Col } from 'antd';
 import classNames from 'classnames';
+import "./index.less";
 var ARow = Row;
 var ACol = Col;
+/**
+ * 标准化断点配置
+ * 将简写形式 { 420: 2 } 转换为完整形式 { 420: { columns: 2 } }
+ */
+function normalizeBreakpoints(breakpoints, defaultGap) {
+  var normalized = {};
+  for (var _i = 0, _Object$entries = Object.entries(breakpoints); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      width = _Object$entries$_i[0],
+      config = _Object$entries$_i[1];
+    var widthNum = Number(width);
+    if (typeof config === 'number') {
+      // 简写形式：数字表示列数
+      normalized[widthNum] = {
+        columns: config,
+        gap: defaultGap
+      };
+    } else {
+      var _config$gap;
+      // 完整形式
+      normalized[widthNum] = _objectSpread(_objectSpread({}, config), {}, {
+        gap: (_config$gap = config.gap) !== null && _config$gap !== void 0 ? _config$gap : defaultGap
+      });
+    }
+  }
+  return normalized;
+}
+
+/**
+ * 根据 minWidth 和 maxColumns 自动生成断点配置
+ */
+function generateBreakpoints(minWidth, maxColumns) {
+  var gap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 16;
+  var gapNum = typeof gap === 'number' ? gap : parseInt(gap, 10) || 16;
+  var breakpoints = {
+    0: {
+      columns: 1,
+      gap: gap
+    }
+  };
+  for (var cols = 2; cols <= maxColumns; cols++) {
+    // 计算需要的最小容器宽度：cols * minWidth + (cols - 1) * gap
+    var breakpoint = cols * minWidth + (cols - 1) * gapNum;
+    breakpoints[breakpoint] = {
+      columns: cols,
+      gap: gap
+    };
+  }
+  return breakpoints;
+}
+
+/**
+ * 根据容器宽度计算当前应该使用的断点配置
+ */
+function getActiveBreakpoint(width, breakpoints) {
+  var defaultColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var defaultGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 16;
+  // 获取所有断点并按宽度降序排序
+  var sortedBreakpoints = Object.keys(breakpoints).map(Number).sort(function (a, b) {
+    return b - a;
+  });
+
+  // 找到第一个小于等于当前宽度的断点
+  var _iterator = _createForOfIteratorHelper(sortedBreakpoints),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var breakpoint = _step.value;
+      if (width >= breakpoint) {
+        return breakpoints[breakpoint];
+      }
+    }
+
+    // 如果没有匹配的断点，返回默认配置
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    columns: defaultColumns,
+    gap: defaultGap
+  };
+}
+
+/**
+ * 解析响应式配置，生成最终的断点映射
+ */
+function parseResponsiveConfig(responsive) {
+  var minWidth = responsive.minWidth,
+    maxColumns = responsive.maxColumns,
+    breakpoints = responsive.breakpoints,
+    _responsive$gap = responsive.gap,
+    gap = _responsive$gap === void 0 ? 16 : _responsive$gap;
+  var finalBreakpoints = {};
+
+  // 方式一：自动计算断点
+  if (minWidth && maxColumns) {
+    finalBreakpoints = generateBreakpoints(minWidth, maxColumns, gap);
+  }
+
+  // 方式二：显式断点定义（会覆盖自动计算的断点）
+  if (breakpoints) {
+    var normalizedBreakpoints = normalizeBreakpoints(breakpoints, gap);
+    finalBreakpoints = _objectSpread(_objectSpread({}, finalBreakpoints), normalizedBreakpoints);
+  }
+
+  // 确保至少有默认断点
+  if (Object.keys(finalBreakpoints).length === 0) {
+    var _responsive$defaultCo;
+    finalBreakpoints = {
+      0: {
+        columns: (_responsive$defaultCo = responsive.defaultColumns) !== null && _responsive$defaultCo !== void 0 ? _responsive$defaultCo : 1,
+        gap: gap
+      }
+    };
+  }
+  return finalBreakpoints;
+}
+
+/**
+ * 自定义 Hook：使用 ResizeObserver 监听容器宽度变化
+ */
+function useContainerWidth(ref) {
+  var debounceMs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var timeoutRef = useRef(null);
+  useEffect(function () {
+    var element = ref.current;
+    if (!element) return;
+    var updateWidth = function updateWidth(newWidth) {
+      if (debounceMs > 0) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(function () {
+          setWidth(newWidth);
+        }, debounceMs);
+      } else {
+        setWidth(newWidth);
+      }
+    };
+    var observer = new ResizeObserver(function (entries) {
+      var entry = entries[0];
+      if (entry) {
+        updateWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(element);
+
+    // 初始化宽度
+    setWidth(element.getBoundingClientRect().width);
+    return function () {
+      observer.disconnect();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [ref, debounceMs]);
+  return width;
+}
+var baseClassName = 'pisell-pro-selector_layout';
+
 /**
  * 统一的布局容器组件
  *
- * 支持两种布局模式：
- * 1. Custom 布局（推荐）：通过 className 使用预设样式，containerStyle
- * 2. Ant Design Grid 布局：基础的栅格布局，用于简单场景
+ * 支持三种布局模式：
+ * 1. 响应式布局（推荐）：通过 responsive 配置，使用 ResizeObserver 实现容器级响应式
+ * 2. Custom 布局：通过 className 使用预设样式
+ * 3. Ant Design Grid 布局：基础的栅格布局，用于简单场景
  */
 function LayoutContainer(_ref) {
+  var _responsiveConfig$deb;
   var containerClassName = _ref.className,
     config = _ref.config,
     children = _ref.children;
+  var containerRef = useRef(null);
+
+  // 解析响应式配置
+  var responsiveConfig = config === null || config === void 0 ? void 0 : config.responsive;
+  var hasResponsive = !!responsiveConfig;
+
+  // 解析断点配置
+  var breakpoints = useMemo(function () {
+    if (!responsiveConfig) return null;
+    return parseResponsiveConfig(responsiveConfig);
+  }, [responsiveConfig]);
+
+  // 监听容器宽度
+  var containerWidth = useContainerWidth(containerRef, (_responsiveConfig$deb = responsiveConfig === null || responsiveConfig === void 0 ? void 0 : responsiveConfig.debounce) !== null && _responsiveConfig$deb !== void 0 ? _responsiveConfig$deb : 0);
+
+  // 计算当前激活的断点配置
+  var activeConfig = useMemo(function () {
+    if (!breakpoints) return null;
+    return getActiveBreakpoint(containerWidth, breakpoints, responsiveConfig === null || responsiveConfig === void 0 ? void 0 : responsiveConfig.defaultColumns, responsiveConfig === null || responsiveConfig === void 0 ? void 0 : responsiveConfig.gap);
+  }, [containerWidth, breakpoints, responsiveConfig]);
+
   // 无配置时使用默认布局
   if (!config) {
     return /*#__PURE__*/React.createElement("div", {
-      className: containerClassName
+      className: classNames(baseClassName, containerClassName)
     }, children);
   }
   var type = config.type,
@@ -26,17 +229,31 @@ function LayoutContainer(_ref) {
     _config$containerStyl = config.containerStyle,
     containerStyle = _config$containerStyl === void 0 ? {} : _config$containerStyl;
 
-  // 1. 自定义样式布局（推荐使用）
+  // 1. 响应式布局（优先级最高）
+  if (hasResponsive) {
+    var _activeConfig$columns, _activeConfig$gap;
+    // 通过 CSS 变量传递动态值，实际布局样式在 Less 文件中定义
+    var cssVariables = {
+      '--layout-columns': (_activeConfig$columns = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.columns) !== null && _activeConfig$columns !== void 0 ? _activeConfig$columns : 1,
+      '--layout-gap': typeof (activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.gap) === 'number' ? "".concat(activeConfig.gap, "px") : (_activeConfig$gap = activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.gap) !== null && _activeConfig$gap !== void 0 ? _activeConfig$gap : '16px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      ref: containerRef,
+      className: classNames(baseClassName, "".concat(baseClassName, "-responsive"), containerClassName, className),
+      style: _objectSpread(_objectSpread(_objectSpread({}, cssVariables), containerStyle), activeConfig === null || activeConfig === void 0 ? void 0 : activeConfig.style)
+    }, children);
+  }
+
+  // 2. 自定义样式布局
   if (type !== 'antdGrid') {
-    // 使用预设 className 或默认布局
-    var layoutClassName = classNames(containerClassName, className);
+    var layoutClassName = classNames(baseClassName, containerClassName, className);
     return /*#__PURE__*/React.createElement("div", {
       className: layoutClassName,
       style: containerStyle
     }, children);
   }
 
-  // 2. Ant Design Grid 布局（基础场景）
+  // 3. Ant Design Grid 布局（基础场景）
   var _config$columns = config.columns,
     columns = _config$columns === void 0 ? 1 : _config$columns,
     align = config.align,

package/es/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/es/pro/Selector/components/Media/index.d.ts

@@ -1,6 +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 };
+export type { MediaProps, MediaStyleProps, MediaShape, MediaSize, MediaCoverType, };
 declare const Media: React.FC<MediaProps>;
 export default Media;

package/es/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/es/pro/Selector/demo.js

@@ -84,7 +84,7 @@ var SelectorDemo = function SelectorDemo() {
     _useState32 = _slicedToArray(_useState31, 2),
     serviceOptions = _useState32[0],
     setServiceOptions = _useState32[1];
-  var _useState33 = useState('660'),
+  var _useState33 = useState('100%'),
     _useState34 = _slicedToArray(_useState33, 2),
     width = _useState34[0],
     setWidth = _useState34[1];

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

@@ -143,6 +143,7 @@ var usePresetItemProps = function usePresetItemProps(params) {
           content: {}
         };
         if (presetVariant === '1') {
+          _defaultStyles.container.padding = '12px 16px';
           _defaultStyles.content.textAlign = 'center';
           baseProps = {
             selectedType: 'outlined-bold'
@@ -152,6 +153,7 @@ var usePresetItemProps = function usePresetItemProps(params) {
           }
           indicator = null;
         } else if (presetVariant === '2') {
+          _defaultStyles.container.padding = '12px 16px';
           baseProps = {
             selectedType: 'filled'
           };