@pisell/materials 1.0.988 → 1.0.990

package/lib/components/PisellProcedure/hooks/useElementSize.js

@@ -28,145 +28,58 @@ var useElementSize = ({
   enabled = true,
   defaultWidth = 0,
   defaultHeight = 0,
-  threshold = 1,
   debounceMs = 100
 }) => {
   const [size, setSize] = (0, import_react.useState)({
     width: defaultWidth,
     height: defaultHeight
   });
-  const previousSizeRef = (0, import_react.useRef)({
-    width: defaultWidth,
-    height: defaultHeight
-  });
-  const debounceTimerRef = (0, import_react.useRef)(null);
-  const resizeObserverRef = (0, import_react.useRef)(null);
-  const elementRef = (0, import_react.useRef)(null);
-  const calculateSize = (0, import_react.useCallback)(() => {
-    if (!enabled || typeof window === "undefined" || typeof document === "undefined") {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      return;
+  const handScale = () => {
+    var _a;
+    const bodyTransform = (_a = getComputedStyle(document.body)) == null ? void 0 : _a.transform;
+    let scaleY = 1;
+    let scaleX = 1;
+    if (bodyTransform !== "none") {
+      const matrix = new DOMMatrix(bodyTransform);
+      scaleX = matrix.a;
+      scaleY = matrix.d;
     }
-    if (!selector || !selector.trim()) {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      return;
-    }
-    try {
-      const element = document.querySelector(selector);
-      if (element) {
-        const rect = element.getBoundingClientRect();
-        const newWidth = Math.round(rect.width * 100) / 100;
-        const newHeight = Math.round(rect.height * 100) / 100;
-        const previousSize = previousSizeRef.current;
-        const widthDiff = Math.abs(newWidth - previousSize.width);
-        const heightDiff = Math.abs(newHeight - previousSize.height);
-        if (widthDiff >= threshold || heightDiff >= threshold) {
-          const newSize = {
-            width: newWidth,
-            height: newHeight
-          };
-          previousSizeRef.current = newSize;
-          setSize(newSize);
-        }
-      } else {
-        if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-          const newSize = {
-            width: defaultWidth,
-            height: defaultHeight
-          };
-          previousSizeRef.current = newSize;
-          setSize(newSize);
-        }
-      }
-    } catch (error) {
-      console.warn(`Invalid selector in useElementSize: ${selector}`, error);
-      if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-        const newSize = {
-          width: defaultWidth,
-          height: defaultHeight
-        };
-        previousSizeRef.current = newSize;
-        setSize(newSize);
-      }
-    }
-  }, [selector, enabled, defaultWidth, defaultHeight, threshold]);
-  const debouncedCalculateSize = (0, import_react.useCallback)(() => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-    debounceTimerRef.current = setTimeout(() => {
-      calculateSize();
-    }, debounceMs);
-  }, [calculateSize, debounceMs]);
-  (0, import_react.useEffect)(() => {
+    return { scaleX, scaleY };
+  };
+  (0, import_react.useLayoutEffect)(() => {
     if (!enabled || typeof window === "undefined" || typeof document === "undefined") {
       return;
     }
     if (!selector || !selector.trim()) {
       setSize({ width: defaultWidth, height: defaultHeight });
-      previousSizeRef.current = { width: defaultWidth, height: defaultHeight };
-      return;
-    }
-    let element = null;
-    try {
-      element = document.querySelector(selector);
-    } catch (error) {
-      console.warn(`Invalid selector in useElementSize: ${selector}`, error);
-      setSize({ width: defaultWidth, height: defaultHeight });
-      previousSizeRef.current = { width: defaultWidth, height: defaultHeight };
       return;
     }
-    if (!element) {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      previousSizeRef.current = { width: defaultWidth, height: defaultHeight };
-      return;
-    }
-    elementRef.current = element;
-    calculateSize();
-    const initialTimer = setTimeout(() => {
-      debouncedCalculateSize();
-    }, 200);
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        debouncedCalculateSize();
-      });
-      resizeObserverRef.current.observe(element);
-    } else {
-      const mutationObserver = new MutationObserver(() => {
-        debouncedCalculateSize();
-      });
-      mutationObserver.observe(element, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ["style", "class"]
-      });
-      const handleResize = () => {
-        debouncedCalculateSize();
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        clearTimeout(initialTimer);
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current);
-        }
-        mutationObserver.disconnect();
-        if (typeof window !== "undefined") {
-          window.removeEventListener("resize", handleResize);
+    const handleResize = () => {
+      setTimeout(() => {
+        let element = null;
+        try {
+          element = document.querySelector(selector);
+          const rect = element == null ? void 0 : element.getBoundingClientRect();
+          if (rect) {
+            const { scaleX } = handScale();
+            const elementWidth = (element == null ? void 0 : element.clientWidth) || 0;
+            const scaledWidth = elementWidth * scaleX;
+            const width = Math.round(scaledWidth * 100) / 100;
+            const height = Math.round((rect == null ? void 0 : rect.height) * 100) / 100;
+            setSize({ width, height });
+          }
+        } catch (error) {
+          setSize({ width: defaultWidth, height: defaultHeight });
+          return;
         }
-      };
-    }
+      }, debounceMs);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
     return () => {
-      clearTimeout(initialTimer);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      if (resizeObserverRef.current && elementRef.current) {
-        resizeObserverRef.current.unobserve(elementRef.current);
-        resizeObserverRef.current.disconnect();
-      }
+      window.removeEventListener("resize", handleResize);
     };
-  }, [selector, enabled, defaultWidth, defaultHeight, calculateSize, debouncedCalculateSize]);
+  }, [selector, enabled, defaultWidth, defaultHeight, debounceMs]);
   return size;
 };
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/PisellProcedure/hooks/useOverflowActions.js

@@ -24,8 +24,47 @@ __export(useOverflowActions_exports, {
 module.exports = __toCommonJS(useOverflowActions_exports);
 var import_react = require("react");
 var import_extractText = require("../utils/extractText");
+var isButtonElement = (element) => {
+  const props = element.props || {};
+  const className = props.className;
+  if (typeof className === "string" && className.includes("btn")) {
+    return true;
+  }
+  if (Array.isArray(className)) {
+    return className.some((cls) => typeof cls === "string" && cls.includes("btn"));
+  }
+  return false;
+};
+var extractButtons = (node, index = 0) => {
+  const buttons = [];
+  if (!node) {
+    return buttons;
+  }
+  if (Array.isArray(node)) {
+    node.forEach((item, i) => {
+      buttons.push(...extractButtons(item, i));
+    });
+    return buttons;
+  }
+  if ((0, import_react.isValidElement)(node)) {
+    const element = node;
+    if (isButtonElement(element)) {
+      buttons.push(
+        (0, import_react.cloneElement)(element, {
+          key: element.key ?? `btn-${index}`
+        })
+      );
+      return buttons;
+    }
+    if (element.props && element.props.children) {
+      const childButtons = extractButtons(element.props.children, index);
+      buttons.push(...childButtons);
+    }
+  }
+  return buttons;
+};
 var useOverflowActions = (options) => {
-  const { children, gap = 16, moreText = "More" } = options;
+  const { children, gap = 16 } = options;
   const containerRef = (0, import_react.useRef)(null);
   const measureRef = (0, import_react.useRef)(null);
   const moreButtonRef = (0, import_react.useRef)(null);
@@ -34,17 +73,7 @@ var useOverflowActions = (options) => {
   const [moreButtonWidth, setMoreButtonWidth] = (0, import_react.useState)(80);
   const [availableWidth, setAvailableWidth] = (0, import_react.useState)(0);
   const actionItems = (0, import_react.useMemo)(() => {
-    const items = [];
-    import_react.Children.forEach(children, (child, index) => {
-      if ((0, import_react.isValidElement)(child)) {
-        items.push(
-          (0, import_react.cloneElement)(child, {
-            key: child.key ?? index
-          })
-        );
-      }
-    });
-    return items;
+    return extractButtons(children);
   }, [children]);
   const measureWidths = (0, import_react.useCallback)(() => {
     if (typeof window === "undefined" || !measureRef.current || !moreButtonRef.current) return;

package/lib/components/PisellProcedure/hooks/useResponsiveClass.js

@@ -22,7 +22,6 @@ __export(useResponsiveClass_exports, {
   useResponsiveClass: () => useResponsiveClass
 });
 module.exports = __toCommonJS(useResponsiveClass_exports);
-var import_react = require("react");
 var RESPONSIVE_BREAKPOINTS = {
   lg: 1133,
   // ≥1133px: 默认样式（405px）
@@ -38,7 +37,7 @@ var RESPONSIVE_CLASSES = {
   // 最小宽度（< 744px）
 };
 var getResponsiveClass = (width) => {
-  if (width === 0) return "";
+  if (width === 0 || !width) return "";
   if (width >= RESPONSIVE_BREAKPOINTS.lg) {
     return "";
   }
@@ -51,49 +50,7 @@ var getResponsiveClass = (width) => {
   return RESPONSIVE_CLASSES.xs;
 };
 var useResponsiveClass = (containerWidth) => {
-  const [responsiveCls, setResponsiveCls] = (0, import_react.useState)("");
-  const previousWidthRef = (0, import_react.useRef)(0);
-  const rafIdRef = (0, import_react.useRef)(null);
-  const stableCheckCountRef = (0, import_react.useRef)(0);
-  (0, import_react.useEffect)(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    if (containerWidth === 0) {
-      setResponsiveCls("");
-      previousWidthRef.current = 0;
-      stableCheckCountRef.current = 0;
-      return;
-    }
-    if (rafIdRef.current !== null) {
-      cancelAnimationFrame(rafIdRef.current);
-    }
-    const checkStability = () => {
-      const currentWidth = containerWidth;
-      const previousWidth = previousWidthRef.current;
-      if (Math.abs(currentWidth - previousWidth) >= 5) {
-        stableCheckCountRef.current = 0;
-        previousWidthRef.current = currentWidth;
-      }
-      stableCheckCountRef.current += 1;
-      if (stableCheckCountRef.current >= 3) {
-        const newCls = getResponsiveClass(currentWidth);
-        setResponsiveCls(newCls);
-        previousWidthRef.current = currentWidth;
-        stableCheckCountRef.current = 0;
-      } else {
-        rafIdRef.current = requestAnimationFrame(checkStability);
-      }
-    };
-    rafIdRef.current = requestAnimationFrame(checkStability);
-    return () => {
-      if (rafIdRef.current !== null) {
-        cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = null;
-      }
-    };
-  }, [containerWidth]);
-  return responsiveCls;
+  return getResponsiveClass(containerWidth);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/locales/en-US.d.ts

@@ -351,5 +351,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/lib/locales/en-US.js

@@ -413,5 +413,6 @@ var en_US_default = {
   "pisell-procedure-header-close-confirm-title": "Confirm exit?",
   "pisell-procedure-header-close-confirm-desc": "All entered information will be lost. Are you sure you want to exit?",
   "pisell-procedure-header-close-confirm-no": "Continue",
-  "pisell-procedure-header-close-confirm-yes": "Exit"
+  "pisell-procedure-header-close-confirm-yes": "Exit",
+  "pisell-procedure-footer-more": "More"
 };

package/lib/locales/zh-CN.d.ts

@@ -346,5 +346,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/lib/locales/zh-CN.js

@@ -404,5 +404,6 @@ var zh_CN_default = {
   "pisell-procedure-header-close-confirm-title": "确认退出？",
   "pisell-procedure-header-close-confirm-desc": "退出后将丢失所有已填写的信息，确定要退出吗？",
   "pisell-procedure-header-close-confirm-no": "继续",
-  "pisell-procedure-header-close-confirm-yes": "退出"
+  "pisell-procedure-header-close-confirm-yes": "退出",
+  "pisell-procedure-footer-more": "更多"
 };

package/lib/locales/zh-TW.d.ts

@@ -346,5 +346,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/lib/locales/zh-TW.js

@@ -406,5 +406,6 @@ var zh_TW_default = {
   "pisell-procedure-header-close-confirm-title": "確認退出？",
   "pisell-procedure-header-close-confirm-desc": "退出後將丟失所有已填寫的信息，確定要退出嗎？",
   "pisell-procedure-header-close-confirm-no": "繼續",
-  "pisell-procedure-header-close-confirm-yes": "退出"
+  "pisell-procedure-header-close-confirm-yes": "退出",
+  "pisell-procedure-footer-more": "更多"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.988",
+  "version": "1.0.990",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -79,9 +79,9 @@
     "tsdown": "^0.17.0",
     "antd-mobile": "^5.38.1",
     "vod-js-sdk-v6": "^1.4.11",
+    "@pisell/utils": "1.0.55",
     "@pisell/date-picker": "1.0.127",
-    "@pisell/icon": "0.0.10",
-    "@pisell/utils": "1.0.55"
+    "@pisell/icon": "0.0.10"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/es/components/PisellBasicGrid/PisellBasicGrid.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import type { PisellBasicGridProps } from './types';
-import './PisellBasicGrid.less';
-/**
- * 使用 memo 优化组件性能
- * @description 当 props 没有变化时，避免不必要的重新渲染
- */
-declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => JSX.Element;
-export { MemoizedPisellBasicGrid as PisellBasicGrid };
-export default MemoizedPisellBasicGrid;

package/es/components/PisellBasicGrid/hooks/index.d.ts

@@ -1 +0,0 @@
-export { useGridStyle, default } from './useGridStyle';

package/es/components/PisellBasicGrid/hooks/useGridStyle.d.ts

@@ -1,37 +0,0 @@
-import type { DirectionType, WrapType, JustifyType, AlignType, AlignContentType, UseGridStyleReturn } from '../types';
-/**
- * useGridStyle Hook 参数
- */
-interface UseGridStyleParams {
-    /** 排列方向 */
-    direction?: DirectionType;
-    /** 换行控制 */
-    wrap?: WrapType;
-    /** 一行显示的元素个数 */
-    columns?: number;
-    /** 是否等分容器宽度 */
-    equalWidth?: boolean;
-    /** 统一间距 */
-    gap?: number | string;
-    /** 行间距 */
-    rowGap?: number | string;
-    /** 列间距 */
-    columnGap?: number | string;
-    /** 主轴对齐方式 */
-    justify?: JustifyType;
-    /** 交叉轴对齐方式 */
-    align?: AlignType;
-    /** 多行对齐方式 */
-    alignContent?: AlignContentType;
-}
-/**
- * 计算 Grid 布局样式的 Hook
- * @param params - 布局参数
- * @returns 容器样式和子元素样式
- * @description
- * - 根据传入的布局参数计算容器的 flex 样式
- * - 根据 columns 和 gap 计算子元素的 flex-basis
- * - 使用 useMemo 缓存计算结果，避免不必要的重复计算
- */
-export declare const useGridStyle: (params: UseGridStyleParams) => UseGridStyleReturn;
-export default useGridStyle;

package/es/components/PisellBasicGrid/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * PisellBasicGrid 组件导出
- * @description 基于 Flexbox 的基础布局组件
- */
-export { PisellBasicGrid, default } from './PisellBasicGrid';
-export type { PisellBasicGridProps, DirectionType, WrapType, JustifyType, AlignType, AlignContentType, BreakpointType, ResponsiveConfig, } from './types';

package/es/components/PisellBasicGrid/types.d.ts

@@ -1,221 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-/**
- * 排列方向类型
- * @description 控制子元素的排列方向
- */
-export declare type DirectionType = 'horizontal' | 'horizontal-reverse' | 'vertical' | 'vertical-reverse';
-/**
- * 换行类型
- * @description 控制子元素是否换行
- */
-export declare type WrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
-/**
- * 主轴对齐类型
- * @description 控制子元素在主轴上的对齐方式
- */
-export declare type JustifyType = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
-/**
- * 交叉轴对齐类型
- * @description 控制子元素在交叉轴上的对齐方式
- */
-export declare type AlignType = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
-/**
- * 多行对齐类型
- * @description 控制多行时行与行之间的对齐方式
- */
-export declare type AlignContentType = 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
-/**
- * 响应式断点类型
- * @description 响应式配置的断点名称
- */
-export declare type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-/**
- * 响应式配置类型（预留）
- * @description 用于配置不同断点下的布局属性
- */
-export interface ResponsiveConfig {
-    /** 一行显示的元素个数 */
-    columns?: number;
-    /** 间距 */
-    gap?: number | string;
-    /** 排列方向 */
-    direction?: DirectionType;
-}
-/**
- * PisellBasicGrid 组件 Props
- * @template T - 数据源项的类型
- * @description 基于 Flexbox 的基础布局组件属性定义
- */
-export interface PisellBasicGridProps<T = any> {
-    /**
-     * 子元素
-     * @description 当未传入 dataSource 时使用
-     */
-    children?: ReactNode;
-    /**
-     * 自定义类名
-     * @description 添加到容器元素的额外类名
-     */
-    className?: string;
-    /**
-     * 自定义样式
-     * @description 支持所有 CSS 属性，会与组件计算的样式合并
-     */
-    style?: CSSProperties;
-    /**
-     * 排列方向
-     * @default 'horizontal'
-     * @description
-     * - horizontal: 横向排列
-     * - horizontal-reverse: 横向反向排列
-     * - vertical: 竖向排列
-     * - vertical-reverse: 竖向反向排列
-     */
-    direction?: DirectionType;
-    /**
-     * 换行控制
-     * @default 'nowrap'
-     * @description
-     * - nowrap: 不换行
-     * - wrap: 换行
-     * - wrap-reverse: 反向换行
-     */
-    wrap?: WrapType;
-    /**
-     * 一行显示的元素个数
-     * @description 设置后子元素宽度为 calc((100% - gap * (N-1)) / N)
-     * @note 优先级高于 equalWidth
-     */
-    columns?: number;
-    /**
-     * 是否等分容器宽度
-     * @default false
-     * @description 设置为 true 时，子元素会平均分配容器宽度 (flex: 1)
-     * @note 当设置了 columns 时，此属性无效
-     */
-    equalWidth?: boolean;
-    /**
-     * 间距（统一设置行列间距）
-     * @description 数字类型默认单位为 px，也可传入带单位的字符串
-     * @example gap={16} 或 gap="1rem"
-     */
-    gap?: number | string;
-    /**
-     * 行间距
-     * @description 优先级高于 gap
-     */
-    rowGap?: number | string;
-    /**
-     * 列间距
-     * @description 优先级高于 gap
-     */
-    columnGap?: number | string;
-    /**
-     * 主轴对齐方式
-     * @default 'start'
-     * @description
-     * - start: 起始对齐
-     * - end: 末尾对齐
-     * - center: 居中对齐
-     * - between: 两端对齐
-     * - around: 等间距对齐
-     * - evenly: 均匀分布
-     */
-    justify?: JustifyType;
-    /**
-     * 交叉轴对齐方式
-     * @default 'stretch'
-     * @description
-     * - start: 顶部对齐
-     * - end: 底部对齐
-     * - center: 居中对齐
-     * - stretch: 拉伸填充
-     * - baseline: 基线对齐
-     */
-    align?: AlignType;
-    /**
-     * 多行对齐方式
-     * @default 'stretch'
-     * @description 当存在多行时，控制行与行之间的对齐方式
-     * - start: 顶部对齐
-     * - end: 底部对齐
-     * - center: 居中对齐
-     * - between: 两端对齐
-     * - around: 等间距对齐
-     * - stretch: 拉伸填充
-     */
-    alignContent?: AlignContentType;
-    /**
-     * 响应式配置（预留）
-     * @description 当前版本暂不实现，后续版本迭代
-     */
-    responsive?: Partial<Record<BreakpointType, ResponsiveConfig>>;
-    /**
-     * 数据源数组
-     * @description
-     * - 当传入 dataSource 时，组件内部会自动循环渲染
-     * - dataSource 为 undefined 时，渲染 children
-     * - dataSource 为空数组时，不渲染任何内容
-     */
-    dataSource?: T[];
-    /**
-     * 渲染函数
-     * @param item - 当前数据项
-     * @param index - 当前索引
-     * @returns ReactNode
-     * @description 用于自定义每个数据项的渲染内容
-     */
-    renderItem?: (item: T, index: number) => ReactNode;
-    /**
-     * 指定每项的唯一 key
-     * @description
-     * - 传入 string 时，作为数据项的属性名获取 key
-     * - 传入函数时，通过函数返回 key
-     * - 不传时，默认使用 index 作为 key
-     * @example rowKey="id" 或 rowKey={(item, index) => `item-${item.id}`}
-     */
-    rowKey?: string | ((item: T, index: number) => string);
-    /**
-     * 前置插槽
-     * @description 在数据源渲染之前渲染
-     */
-    startSlot?: ReactNode;
-    /**
-     * 后置插槽
-     * @description 在数据源渲染之后渲染
-     */
-    endSlot?: ReactNode;
-}
-/**
- * 容器样式配置
- * @description useGridStyle Hook 返回的容器样式类型
- */
-export interface ContainerStyle extends CSSProperties {
-    display: 'flex';
-    flexDirection: CSSProperties['flexDirection'];
-    flexWrap: CSSProperties['flexWrap'];
-    justifyContent: CSSProperties['justifyContent'];
-    alignItems: CSSProperties['alignItems'];
-    alignContent?: CSSProperties['alignContent'];
-    gap?: CSSProperties['gap'];
-    rowGap?: CSSProperties['rowGap'];
-    columnGap?: CSSProperties['columnGap'];
-}
-/**
- * 子元素样式配置
- * @description useGridStyle Hook 返回的子元素样式类型
- */
-export interface ItemStyle extends CSSProperties {
-    flexBasis?: CSSProperties['flexBasis'];
-    flexGrow?: CSSProperties['flexGrow'];
-    flexShrink?: CSSProperties['flexShrink'];
-}
-/**
- * useGridStyle Hook 返回值类型
- */
-export interface UseGridStyleReturn {
-    /** 容器样式 */
-    containerStyle: ContainerStyle;
-    /** 子元素样式 */
-    itemStyle: ItemStyle;
-}