@pisell/private-materials 6.3.85 → 6.3.87

package/lib/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;

package/lib/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/lib/pro/Selector/components/LayoutContainer/index.js

@@ -35,147 +35,19 @@ 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: (0, import_classnames.default)(baseClassName, containerClassName) }, children);
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: 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)(
-      baseClassName,
-      containerClassName,
-      className
-    );
+    const layoutClassName = (0, import_classnames.default)(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/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)("100%");
+  const [width, setWidth] = (0, import_react.useState)("660");
   const simpleDataSource = [
     { id: 1, title: "选项A" },
     { id: 2, title: "选项B" },

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

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

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

@@ -30,39 +30,18 @@ var VARIANT_MAP = {
   ["media"]: ["1", "2"]
 };
 var EMPTY_CONFIG = {};
-var RESPONSIVE_PRESETS = {
-  /** 响应式布局 - 最小宽度 210px，最多 5 列 */
-  responsive210: {
-    breakpoints: {
-      0: { columns: 1, gap: 16 },
-      420: { columns: 2, gap: 16 },
-      630: { columns: 3, gap: 16 },
-      841: { columns: 4, gap: 16 },
-      1367: { columns: 5, gap: 16 }
-    }
-  },
-  /** 响应式布局 - 最小宽度 330px，最多 4 列 */
-  responsive330: {
-    breakpoints: {
-      0: { columns: 1, gap: 16 },
-      660: { columns: 2, gap: 16 },
-      995: { columns: 3, gap: 16 },
-      1367: { columns: 4, gap: 16 }
-    }
-  }
-};
 var PRESET_LAYOUTS = {
   /** 自动宽度布局 - 内容自适应 */
   autoFlex: {
     className: "pisell-pro-selector_layout-auto-flex"
   },
-  /** 响应式布局 - 最小宽度 210px，最多 5 列 */
+  /** 响应式布局 - 最小宽度 210px */
   responsive210: {
-    responsive: RESPONSIVE_PRESETS.responsive210
+    className: "pisell-pro-selector_layout-responsive-210"
   },
-  /** 响应式布局 - 最小宽度 330px，最多 4 列 */
+  /** 响应式布局 - 最小宽度 330px */
   responsive330: {
-    responsive: RESPONSIVE_PRESETS.responsive330
+    className: "pisell-pro-selector_layout-responsive-330"
   }
 };
 var VARIANT_PRESET_MAP = {
@@ -95,7 +74,7 @@ var usePresetProps = ({
   return (0, import_react.useMemo)(() => {
     let layoutConfig = null;
     if (variant === "select" || !(preset == null ? void 0 : preset.variant)) {
-      layoutConfig = layout || null;
+      layoutConfig = null;
     } else {
       let baseLayoutConfig = null;
       let validVariants = VARIANT_MAP[variant] || [];
@@ -129,8 +108,7 @@ var usePresetProps = ({
     const shouldUseFilled = variant === "media" || variant === "card" && (preset == null ? void 0 : preset.variant) === "2";
     if (shouldUseFilled) {
       computedIndicatorProps = {
-        variant: "filled",
-        size: "small"
+        variant: "filled"
       };
     }
     if (indicatorProps) {

package/lib/pro/Selector/selector.less

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  container-type: inline-size; // 启用容器查询
 
   &_header {
     display: flex;
@@ -42,4 +43,67 @@
       line-height: 34px;
     }
   }
+
+  &_options-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  // 自动宽度布局 - 内容自适应
+  &_layout-auto-flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  // 响应式布局 - 最小宽度 210px
+  &_layout-responsive-210 {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 1fr; // 默认一列
+
+    // 容器宽度 >= 420px 且 < 630px: 两列
+    @container (min-width: 420px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    // 容器宽度 >= 630px 且 <= 840px: 三列
+    @container (min-width: 630px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    // 容器宽度 >= 841px 且 <= 1366px: 四列
+    @container (min-width: 841px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    // 容器宽度 > 1366px: 五列
+    @container (min-width: 1367px) {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+
+  // 响应式布局 - 最小宽度 330px
+  &_layout-responsive-330 {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: 1fr; // 默认一列
+
+    // 容器宽度 >= 660px 且 < 995px: 两列
+    @container (min-width: 660px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    // 容器宽度 >= 995px 且 <= 1366px: 三列
+    @container (min-width: 995px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    // 容器宽度 > 1366px: 四列
+    @container (min-width: 1367px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
 }

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

@@ -77,48 +77,10 @@ export declare type ItemProps = {
     [key: string]: any;
 };
 export declare type LayoutType = 'antdGrid' | 'custom';
-/** 单个断点的完整配置 */
-export declare type BreakpointConfig = {
-    columns: number;
-    gap?: number | string;
-    style?: React.CSSProperties;
-};
-/**
- * 断点映射
- * key: 最小宽度（px）
- * value: 列数（简写）或完整配置
- * @example { 0: 1, 420: 2, 630: 3 } // 简写
- * @example { 0: { columns: 1, gap: 12 }, 420: { columns: 2, gap: 16 } } // 完整
- */
-export declare type BreakpointMap = Record<number, number | BreakpointConfig>;
-/** 响应式布局配置 */
-export declare type ResponsiveConfig = {
-    /** 每项最小宽度，系统自动计算断点 */
-    minWidth?: number;
-    /** 最大列数限制 */
-    maxColumns?: number;
-    /**
-     * 显式断点映射，key 为容器最小宽度(px)
-     * @example { 0: 1, 420: 2, 630: 3, 841: 4, 1367: 5 }
-     * @example { 0: { columns: 1, gap: 12 }, 420: { columns: 2, gap: 16 } }
-     */
-    breakpoints?: BreakpointMap;
-    /** 默认列数（容器宽度小于所有断点时），默认为 1 */
-    defaultColumns?: number;
-    /** 间距，默认为 16 */
-    gap?: number | string;
-    /** ResizeObserver 防抖延迟(ms)，默认为 0 */
-    debounce?: number;
-};
 export declare type LayoutConfig = {
     type?: LayoutType;
     className?: string;
     containerStyle?: React.CSSProperties;
-    /**
-     * 响应式布局配置
-     * 存在此配置时自动启用 ResizeObserver 响应式布局
-     */
-    responsive?: ResponsiveConfig;
     columns?: number;
     gutter?: number | object | Array<number>;
     align?: 'top' | 'middle' | 'bottom' | 'stretch';
@@ -184,7 +146,6 @@ export interface SelectorProps<T = OptionKey> extends GroupItem {
     stepperProps?: {
         size?: 'small' | 'middle' | 'large';
         shape?: 'round' | 'square';
-        horizontalPadding?: number | string;
     };
     style?: React.CSSProperties;
     /**
@@ -192,7 +153,6 @@ export interface SelectorProps<T = OptionKey> extends GroupItem {
      */
     titleProps?: HeaderProps;
     headerProps?: HeaderProps;
-    selectProps?: any;
 }
 export interface SelectorGroupProps {
     allowedValuesPolicy?: 'relaxed' | 'strict';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.3.85",
+  "version": "6.3.87",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -14,7 +14,7 @@
     "@alilc/lowcode-react-renderer": "^1.1.7",
     "@alilc/lowcode-types": "1.1.7",
     "@alilc/lowcode-utils": "1.1.6",
-    "@pisell/build-plugin-lowcode": "^1.0.13",
+    "@pisell/build-plugin-lowcode": "^1.0.12",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -60,7 +60,6 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.10.1",
     "@ant-design/icons": "^5.6.1",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
@@ -69,6 +68,7 @@
     "@react-spring/web": "^9.6.1",
     "@use-gesture/react": "^10.3.1",
     "ahooks": "^3.7.6",
+    "antd": "^5.6.3",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.9",
     "decimal.js": "^10.4.3",
@@ -77,9 +77,9 @@
     "react-resizable": "^3.0.5",
     "styled-components": "^6.0.0-rc.3",
     "@pisell/icon": "0.0.11",
-    "@pisell/date-picker": "3.0.8",
+    "@pisell/materials": "6.3.23",
     "@pisell/utils": "3.0.5",
-    "@pisell/materials": "6.3.24"
+    "@pisell/date-picker": "3.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/es/components/ecocup/components/AddCustomerModal/index.d.ts

@@ -1,9 +0,0 @@
-import './index.less';
-interface IProps {
-    visible: boolean;
-    data?: Record<string, any>;
-    onCancel: () => void;
-    onOk: (values: Record<string, any>) => void;
-}
-declare const AddCustomerModal: (props: IProps) => JSX.Element;
-export default AddCustomerModal;