@pisell/private-materials 6.3.113 → 6.3.114

package/es/pro/Selector/SelectorGroup.js

@@ -27,7 +27,6 @@ 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";
@@ -45,9 +44,6 @@ 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],
@@ -560,7 +556,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: _objectSpread(_objectSpread({}, style || {}), {}, _defineProperty(_defineProperty({}, '--color-primary', colorPrimary), '--color-primary-bg', colorPrimaryBg))
+    style: style
   }, 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,15 +33,13 @@ var Card = function Card(_ref) {
     className = _ref.className,
     style = _ref.style;
   // 样式属性对象，用于传递给样式函数
-  var styleProps = useMemo(function () {
-    return {
-      selected: selected,
-      disabled: disabled,
-      hoverable: hoverable,
-      variant: variant,
-      layout: layout
-    };
-  }, [selected, disabled, hoverable, variant, layout]);
+  var styleProps = {
+    selected: selected,
+    disabled: disabled,
+    hoverable: hoverable,
+    variant: variant,
+    layout: layout
+  };
 
   // 计算容器样式
   var containerStyle = useMemo(function () {
@@ -79,9 +77,10 @@ var Card = function Card(_ref) {
     }, actions.map(function (action, index) {
       return /*#__PURE__*/React.createElement("li", {
         key: index,
-        className: "pisell-pro-card_actions-item",
+        className: "pisell-pro-card_actions-item"
+      }, /*#__PURE__*/React.createElement("span", {
         onClick: stopPropagation
-      }, action);
+      }, action));
     }));
   };
 

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

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

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

@@ -11,7 +11,6 @@ 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 === null || styles === void 0 ? void 0 : styles.container
+    style: styles.container
   }, /*#__PURE__*/React.createElement("input", {
     type: mode === 'single' ? 'radio' : 'checkbox',
     className: "".concat(prefixCls, "-input"),
@@ -95,8 +95,7 @@ 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"),
-    style: styles === null || styles === void 0 ? void 0 : styles.content
+    className: "".concat(prefixCls, "-content")
   }, children));
 };
 export default Indicator;

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

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

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { LayoutConfig } from '../../types';
-import './index.less';
 interface LayoutContainerProps {
     className: string;
     config: LayoutConfig | null;
@@ -9,10 +8,9 @@ interface LayoutContainerProps {
 /**
  * 统一的布局容器组件
  *
- * 支持三种布局模式：
- * 1. 响应式布局（推荐）：通过 responsive 配置，使用 ResizeObserver 实现容器级响应式
- * 2. Custom 布局：通过 className 使用预设样式
- * 3. Ant Design Grid 布局：基础的栅格布局，用于简单场景
+ * 支持两种布局模式：
+ * 1. Custom 布局（推荐）：通过 className 使用预设样式，containerStyle
+ * 2. 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,227 +1,24 @@
-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); }
-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 React 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. 响应式布局（推荐）：通过 responsive 配置，使用 ResizeObserver 实现容器级响应式
- * 2. Custom 布局：通过 className 使用预设样式
- * 3. Ant Design Grid 布局：基础的栅格布局，用于简单场景
+ * 支持两种布局模式：
+ * 1. Custom 布局（推荐）：通过 className 使用预设样式，containerStyle
+ * 2. 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: classNames(baseClassName, containerClassName)
+      className: containerClassName
     }, children);
   }
   var type = config.type,
@@ -229,31 +26,17 @@ function LayoutContainer(_ref) {
     _config$containerStyl = config.containerStyle,
     containerStyle = _config$containerStyl === void 0 ? {} : _config$containerStyl;
 
-  // 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. 自定义样式布局
+  // 1. 自定义样式布局（推荐使用）
   if (type !== 'antdGrid') {
-    var layoutClassName = classNames(baseClassName, containerClassName, className);
+    // 使用预设 className 或默认布局
+    var layoutClassName = classNames(containerClassName, className);
     return /*#__PURE__*/React.createElement("div", {
       className: layoutClassName,
       style: containerStyle
     }, children);
   }
 
-  // 3. Ant Design Grid 布局（基础场景）
+  // 2. Ant Design Grid 布局（基础场景）
   var _config$columns = config.columns,
     columns = _config$columns === void 0 ? 1 : _config$columns,
     align = config.align,

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: var(--color-primary, #5d3f9f);
+      border-color: #7f56d9;
     }
 
     .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('100%'),
+  var _useState33 = useState('660'),
     _useState34 = _slicedToArray(_useState33, 2),
     width = _useState34[0],
     setWidth = _useState34[1];

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

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