@pisell/private-materials 6.5.13 → 6.5.15

package/lib/components/list/List.js

@@ -0,0 +1,771 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/list/List.tsx
+var List_exports = {};
+__export(List_exports, {
+  default: () => List_default
+});
+module.exports = __toCommonJS(List_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_Tab = __toESM(require("./components/Tab"));
+var import_Pagination = __toESM(require("./components/Pagination"));
+var import_EmptyState = __toESM(require("./components/EmptyState"));
+var import_ScrollLoader = __toESM(require("./components/ScrollLoader"));
+var import_WaterfallList = __toESM(require("./components/WaterfallList"));
+var import_ListItemSkeleton = __toESM(require("./components/ListItemSkeleton"));
+var import_TabSkeleton = __toESM(require("./components/TabSkeleton"));
+var import_List = require("./List.less");
+var import_materials = require("@pisell/materials");
+var import_locales = __toESM(require("./locales"));
+var import_useWaterfall = __toESM(require("./hooks/useWaterfall"));
+var import_useListState = require("./hooks/useListState");
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var MOCK_LIST_DATA = (() => {
+  const mockData = [];
+  for (let i = 0; i < 8; i++) {
+    mockData.push({
+      id: `_mock_${i}`,
+      __isSkeleton: true
+    });
+  }
+  return mockData;
+})();
+var List = (props) => {
+  const context = (0, import_useEngineContext.default)();
+  const getCurrentLanguage = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    const appLocale = (_f = (_e = (_d = (_c = (_b = (_a = context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.getApp) == null ? void 0 : _c.call(_b)) == null ? void 0 : _d.locales) == null ? void 0 : _e.getLocale) == null ? void 0 : _f.call(_e);
+    const storageLocale = (_i = (_h = (_g = context.appHelper) == null ? void 0 : _g.utils) == null ? void 0 : _h.storage) == null ? void 0 : _i.get("umi_locale");
+    let finalLang = appLocale || storageLocale;
+    if (!finalLang && typeof window !== "undefined") {
+      finalLang = localStorage.getItem("umi_locale");
+    }
+    return finalLang || "en";
+  };
+  const getLocalText = (key, fallback) => {
+    var _a;
+    const currentLang = getCurrentLanguage();
+    const localText = (_a = import_locales.default[currentLang]) == null ? void 0 : _a[key];
+    if (typeof localText === "string") {
+      return localText;
+    }
+    return fallback || "";
+  };
+  const getLocalTextFunc = (key) => {
+    var _a;
+    const currentLang = getCurrentLanguage();
+    const localText = (_a = import_locales.default[currentLang]) == null ? void 0 : _a[key];
+    if (typeof localText === "function" || typeof localText === "string") {
+      return localText;
+    }
+    return key;
+  };
+  const {
+    className = "",
+    style = {},
+    tabStyle = "anchor",
+    tabGroup = getLocalText("pisell-list-tab-group-default", "字段"),
+    displayStyle = "grid",
+    width = "auto",
+    height = "auto",
+    paginationType = "all",
+    defaultPageSize = 6,
+    layoutDirection = "horizontal",
+    zoom = 1,
+    columns = 2,
+    rows = 2,
+    stickyTop = true,
+    columnGap = 12,
+    rowGap = 12,
+    tabData = [],
+    data = [],
+    children,
+    onLoadData,
+    renderItem,
+    emptyConfig = { show: true, text: getLocalText("pisell-list-empty-text-default", "No data available"), icon: null, description: "" },
+    pagination,
+    loading = false
+  } = props;
+  console.log("List props", props);
+  const tabItems = tabStyle === "none" ? [] : tabData || [];
+  const {
+    state: listState,
+    actualCurrentPage: currentPage,
+    handleTabChange,
+    handlePageChange,
+    handleShowSizeChange,
+    handleLoadMore,
+    handleViewLess,
+    handleScrollLoad,
+    setStickyActive: setIsStickyActive,
+    setActiveTab
+  } = (0, import_useListState.useListState)({
+    externalCurrentPage: pagination == null ? void 0 : pagination.current,
+    tabItems,
+    defaultPageSize,
+    onLoadData
+  });
+  const { activeTab, isStickyActive } = listState;
+  const listRef = (0, import_react.useRef)(null);
+  const containerRef = (0, import_react.useRef)(null);
+  const headerRef = (0, import_react.useRef)(null);
+  const matchesFieldValue = (fieldValue, targetValue) => {
+    if (Array.isArray(fieldValue)) {
+      return fieldValue.includes(targetValue);
+    }
+    return fieldValue === targetValue;
+  };
+  const processedData = (0, import_react.useMemo)(() => {
+    const sourceData = loading ? MOCK_LIST_DATA : data || [];
+    console.log(`processedData recalculating: tabStyle=${tabStyle}, activeTab=${activeTab}, tabItems=${tabItems.length}, dataLength=${sourceData.length}`);
+    console.log(`sourceData sample: ${JSON.stringify(sourceData.slice(0, 2), null, 2)}`);
+    console.log(`tabGroup: ${tabGroup}`);
+    if (tabStyle === "anchor" && tabItems.length > 0) {
+      const groupedData = [];
+      const categoryTabs = tabItems.filter((tab) => tab.key !== "all");
+      console.log(`categoryTabs: ${JSON.stringify(categoryTabs.map((t) => ({ key: t.key, label: t.label, group: t.group })), null, 2)}`);
+      categoryTabs.forEach((tab) => {
+        console.log(`Processing tab: ${tab.key}, label: ${tab.label}, group: ${tab.group}`);
+        let groupItems = [];
+        if (tab.group) {
+          const filterField = tabGroup && tabGroup !== "字段" ? tabGroup : "category";
+          console.log(`Using group filter: ${filterField} matches ${tab.group}`);
+          groupItems = sourceData.filter((item) => matchesFieldValue(item[filterField], tab.group));
+          console.log(`Found ${groupItems.length} items for group ${tab.group}`);
+        } else {
+          const possibleFields = [
+            tabGroup && tabGroup !== "字段" ? tabGroup : null,
+            "category",
+            "status",
+            "type"
+          ].filter(Boolean);
+          console.log(`Trying fields for tab.key ${tab.key}: ${JSON.stringify(possibleFields)}`);
+          for (const field of possibleFields) {
+            if (field && sourceData.some((item) => item[field] === tab.key)) {
+              groupItems = sourceData.filter((item) => item[field] === tab.key);
+              console.log(`Found ${groupItems.length} items using field ${field} === ${tab.key}`);
+              break;
+            }
+          }
+        }
+        console.log(`Tab ${tab.key} final groupItems count: ${groupItems.length}`);
+        groupedData.push({
+          tabKey: tab.key,
+          tabLabel: tab.label,
+          items: groupItems
+        });
+        if (groupItems.length > 0) {
+          console.log(`Added group ${tab.key} to groupedData with ${groupItems.length} items`);
+        } else {
+          console.log(`Added empty group ${tab.key} to groupedData`);
+        }
+      });
+      console.log(`Anchor mode grouped data: ${JSON.stringify(groupedData.map((g) => ({ key: g.tabKey, label: g.tabLabel, itemCount: g.items.length })), null, 2)}`);
+      return groupedData;
+    } else {
+      let filteredData = sourceData;
+      if (!activeTab || activeTab === "all") {
+        return [{ tabKey: "all", tabLabel: "", items: filteredData }];
+      }
+      const currentTab = tabItems.find((tab) => tab.key === activeTab);
+      if (currentTab && currentTab.group) {
+        const filterField = "category";
+        filteredData = filteredData.filter((item) => matchesFieldValue(item[filterField], currentTab.group));
+      } else if (currentTab) {
+        const possibleFields = ["category", "status", "type", tabGroup];
+        for (const field of possibleFields) {
+          if (field && field !== "字段" && filteredData.some((item) => matchesFieldValue(item[field], activeTab))) {
+            filteredData = filteredData.filter((item) => matchesFieldValue(item[field], activeTab));
+            break;
+          }
+        }
+      }
+      return [{ tabKey: activeTab, tabLabel: (currentTab == null ? void 0 : currentTab.label) || "", items: filteredData }];
+    }
+  }, [data, activeTab, tabItems, tabGroup, tabStyle, loading]);
+  const totalDataLength = (0, import_react.useMemo)(() => {
+    return processedData.reduce((total, group) => total + group.items.length, 0);
+  }, [processedData]);
+  const waterfallItems = (0, import_react.useMemo)(() => {
+    if (displayStyle !== "waterfall") return [];
+    return processedData.reduce((allItems, group) => [...allItems, ...group.items], []);
+  }, [displayStyle, processedData]);
+  const waterfallOptions = (0, import_react.useMemo)(() => {
+    if (displayStyle !== "waterfall") {
+      return {
+        tracks: 1,
+        trackGap: 0,
+        itemGap: 0,
+        direction: "vertical"
+      };
+    }
+    return {
+      // 垂直滚动使用columns（列数），水平滚动使用rows（行数）
+      tracks: layoutDirection === "vertical" ? columns : rows,
+      // 垂直滚动：trackGap是列间距，水平滚动：trackGap是行间距
+      trackGap: layoutDirection === "vertical" ? columnGap : rowGap,
+      // 垂直滚动：itemGap是行间距，水平滚动：itemGap是列间距
+      itemGap: layoutDirection === "vertical" ? rowGap : columnGap,
+      direction: layoutDirection === "vertical" ? "vertical" : "horizontal"
+    };
+  }, [displayStyle, layoutDirection, columns, rows, columnGap, rowGap]);
+  const {
+    layout: waterfallLayout,
+    registerItemRef,
+    recalculateLayout
+  } = (0, import_useWaterfall.default)(waterfallItems, waterfallOptions);
+  const handleScrollDown = () => {
+    if (!listRef.current) return;
+    const element = listRef.current;
+    if (layoutDirection === "vertical") {
+      const { scrollHeight, clientHeight } = element;
+      const maxScroll = scrollHeight - clientHeight;
+      element.scrollTo({
+        top: maxScroll,
+        behavior: "smooth"
+      });
+    } else {
+      const { scrollWidth, clientWidth } = element;
+      const maxScroll = scrollWidth - clientWidth;
+      element.scrollTo({
+        left: maxScroll,
+        behavior: "smooth"
+      });
+    }
+    setTimeout(() => {
+      if (!listRef.current || loading || !hasMore) return;
+      const element2 = listRef.current;
+      let isAtEnd = false;
+      if (layoutDirection === "vertical") {
+        const { scrollTop, scrollHeight, clientHeight } = element2;
+        isAtEnd = scrollTop + clientHeight >= scrollHeight - 5;
+      } else {
+        const { scrollLeft, scrollWidth, clientWidth } = element2;
+        isAtEnd = scrollLeft + clientWidth >= scrollWidth - 5;
+      }
+      if (isAtEnd && hasMore) {
+        console.log("List: Triggering load more after scroll to bottom");
+        handleScrollLoad();
+      }
+    }, 500);
+  };
+  const hasMore = (0, import_react.useMemo)(() => {
+    if (!pagination) return false;
+    const current = pagination.current || currentPage;
+    const total = pagination.total || 0;
+    return current < total;
+  }, [pagination, currentPage]);
+  const scrollLoadState = (0, import_react.useMemo)(() => {
+    if (paginationType !== "scroll") return null;
+    const totalLoaded = totalDataLength;
+    return {
+      canLoadMore: hasMore,
+      totalLoaded
+    };
+  }, [paginationType, totalDataLength, hasMore]);
+  (0, import_react.useEffect)(() => {
+    if (paginationType !== "scroll") return;
+    let scrollTimer = null;
+    let lastScrollPosition = { top: 0, left: 0 };
+    const handleScroll = () => {
+      if (!listRef.current || loading) return;
+      if (scrollTimer) {
+        clearTimeout(scrollTimer);
+      }
+      scrollTimer = setTimeout(() => {
+        if (!listRef.current || loading || !hasMore) return;
+        const element = listRef.current;
+        const currentScrollTop = element.scrollTop;
+        const currentScrollLeft = element.scrollLeft;
+        let isNearEnd = false;
+        let isScrollingTowardsEnd = false;
+        if (layoutDirection === "vertical") {
+          const { scrollTop, scrollHeight, clientHeight } = element;
+          isScrollingTowardsEnd = currentScrollTop > lastScrollPosition.top;
+          isNearEnd = scrollTop + clientHeight >= scrollHeight - 50;
+        } else {
+          const { scrollLeft, scrollWidth, clientWidth } = element;
+          isScrollingTowardsEnd = currentScrollLeft > lastScrollPosition.left;
+          isNearEnd = scrollLeft + clientWidth >= scrollWidth - 50;
+        }
+        lastScrollPosition = { top: currentScrollTop, left: currentScrollLeft };
+        if (isScrollingTowardsEnd && isNearEnd && hasMore) {
+          handleScrollLoad();
+        }
+      }, 100);
+    };
+    const listElement = listRef.current;
+    if (listElement) {
+      lastScrollPosition = {
+        top: listElement.scrollTop,
+        left: listElement.scrollLeft
+      };
+      listElement.addEventListener("scroll", handleScroll, { passive: true });
+    }
+    return () => {
+      if (listElement) {
+        listElement.removeEventListener("scroll", handleScroll);
+      }
+      if (scrollTimer) {
+        clearTimeout(scrollTimer);
+      }
+    };
+  }, [paginationType, layoutDirection, loading, hasMore, handleScrollLoad]);
+  (0, import_react.useEffect)(() => {
+    if (!stickyTop || layoutDirection !== "vertical") {
+      if (isStickyActive) {
+        setIsStickyActive(false);
+      }
+      return;
+    }
+    let handleScroll = null;
+    const timer = setTimeout(() => {
+      if (!containerRef.current || !headerRef.current) return;
+      handleScroll = () => {
+        if (!listRef.current || !headerRef.current) return;
+        const scrollTop = listRef.current.scrollTop;
+        const headerHeight = headerRef.current.offsetHeight;
+        const shouldActivate = scrollTop > headerHeight / 2;
+        if (isStickyActive !== shouldActivate) {
+          setIsStickyActive(shouldActivate);
+        }
+      };
+      const listContent = listRef.current;
+      if (listContent) {
+        listContent.addEventListener("scroll", handleScroll, { passive: true });
+        handleScroll();
+      }
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      if (handleScroll && listRef.current) {
+        listRef.current.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [stickyTop, layoutDirection, isStickyActive]);
+  (0, import_react.useEffect)(() => {
+    if (paginationType !== "scroll" || loading || !hasMore || data.length === 0) {
+      return;
+    }
+    let autoLoadTimer = null;
+    const checkAutoLoad = () => {
+      if (!listRef.current || loading || !hasMore) return;
+      const element = listRef.current;
+      let needsMoreContent = false;
+      if (layoutDirection === "vertical") {
+        needsMoreContent = element.scrollHeight <= element.clientHeight;
+      } else {
+        needsMoreContent = element.scrollWidth <= element.clientWidth;
+      }
+      if (needsMoreContent && hasMore) {
+        console.log("List: Auto-loading more data due to insufficient content");
+        handleScrollLoad();
+      }
+    };
+    autoLoadTimer = setTimeout(() => {
+      checkAutoLoad();
+    }, 100);
+    return () => {
+      if (autoLoadTimer) {
+        clearTimeout(autoLoadTimer);
+      }
+    };
+  }, [paginationType, layoutDirection, loading, hasMore, totalDataLength, handleScrollLoad]);
+  const containerStyle = (0, import_react.useMemo)(() => {
+    const processedWidth = typeof width === "number" ? `${width}px` : typeof width === "string" && /^\d+(\.\d+)?$/.test(width.trim()) ? `${width}px` : width;
+    const processedHeight = typeof height === "number" ? `${height}px` : typeof height === "string" && /^\d+(\.\d+)?$/.test(height.trim()) ? `${height}px` : height;
+    return {
+      ...style,
+      width: processedWidth,
+      height: processedHeight,
+      transform: `scale(${zoom})`,
+      transformOrigin: "top left"
+    };
+  }, [style, width, height, zoom]);
+  const listStyle = (0, import_react.useMemo)(() => {
+    const baseStyle = {
+      columnGap: `${columnGap}px`,
+      rowGap: `${rowGap}px`
+    };
+    if (displayStyle === "grid") {
+      if (layoutDirection === "vertical") {
+        return {
+          ...baseStyle,
+          display: "grid",
+          gridTemplateColumns: `repeat(${columns}, 1fr)`
+        };
+      } else {
+        return {
+          ...baseStyle,
+          display: "grid",
+          gridTemplateRows: `repeat(${rows}, 1fr)`,
+          gridAutoFlow: "column"
+        };
+      }
+    } else {
+      return {
+        ...baseStyle,
+        display: "flex",
+        flexDirection: layoutDirection === "vertical" ? "row" : "row",
+        alignItems: "flex-start",
+        gap: layoutDirection === "vertical" ? `0 ${columnGap}px` : `${rowGap}px ${columnGap}px`,
+        width: "100%",
+        ...layoutDirection === "horizontal" && { flexWrap: "wrap" }
+      };
+    }
+  }, [displayStyle, layoutDirection, columns, rows, columnGap, rowGap]);
+  const scrollToTitle = (tabKey) => {
+    const titleElement = document.getElementById(`list-title-${tabKey}`);
+    if (titleElement && listRef.current) {
+      const container = listRef.current;
+      const titleOffsetTop = titleElement.offsetTop;
+      container.scrollTo({
+        top: titleOffsetTop - 20,
+        // 留一些上边距
+        behavior: "smooth"
+      });
+    }
+  };
+  const handleTabChangeWithScroll = (key) => {
+    if (tabStyle === "anchor") {
+      console.log("Anchor mode tab change:", key, "- skipping data load");
+      setActiveTab(key);
+      if (key === "all") {
+        setTimeout(() => {
+          if (listRef.current) {
+            listRef.current.scrollTo({
+              top: 0,
+              behavior: "smooth"
+            });
+          }
+        }, 100);
+      } else {
+        setTimeout(() => {
+          scrollToTitle(key);
+        }, 100);
+      }
+    } else {
+      console.log("Non-anchor mode tab change:", key, "- triggering data load");
+      handleTabChange(key);
+    }
+  };
+  const renderTabs = () => {
+    if (tabStyle === "none" || tabItems.length === 0) return null;
+    const shouldSticky = layoutDirection === "vertical" && stickyTop;
+    const headerClasses = (0, import_classnames.default)(
+      "pisell-list-header",
+      {
+        "pisell-list-header-sticky": shouldSticky,
+        "sticky-active": shouldSticky && isStickyActive
+      }
+    );
+    if (loading) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: headerRef,
+          className: headerClasses,
+          style: { padding: "0 12px" }
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_TabSkeleton.default, { tabStyle })
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: headerRef,
+        className: headerClasses
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_Tab.default,
+        {
+          className: (0, import_classnames.default)("pisell-list-tabs", `pisell-list-tabs-${tabStyle}`),
+          activeKey: activeTab,
+          items: tabItems,
+          onChange: handleTabChangeWithScroll
+        }
+      )
+    );
+  };
+  const renderContent = (0, import_react.useCallback)(() => {
+    const hasChildren = children && import_react.default.Children.count(children) > 0;
+    const getContentHeight = () => {
+      if (paginationType === "scroll") {
+        if (height !== "auto") {
+          return void 0;
+        }
+        return "400px";
+      }
+      if (height !== "auto") {
+        return void 0;
+      }
+      return "auto";
+    };
+    const contentHeight = getContentHeight();
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: listRef,
+        className: (0, import_classnames.default)("list-content", `list-content-${displayStyle}`, `list-content-${layoutDirection}`),
+        style: {
+          background: "transparent",
+          ...contentHeight !== void 0 && { height: contentHeight },
+          // scroll模式：内容区域独立滚动
+          ...paginationType === "scroll" && {
+            overflow: layoutDirection === "horizontal" ? "auto hidden" : "hidden auto"
+          }
+        }
+      },
+      layoutDirection === "vertical" && renderTabs(),
+      totalDataLength === 0 && !loading ? /* @__PURE__ */ import_react.default.createElement(
+        import_EmptyState.default,
+        {
+          config: emptyConfig,
+          hasData: totalDataLength > 0
+        }
+      ) : /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_classnames.default)("list-items"),
+          style: {
+            // 移除listStyle，避免双重网格布局嵌套
+            // 上下排版时移除 padding，由 CSS 控制
+            ...layoutDirection === "vertical" && { padding: void 0 }
+          }
+        },
+        displayStyle === "waterfall" ? (
+          // 瀑布流渲染 - 使用独立组件
+          /* @__PURE__ */ import_react.default.createElement(
+            import_WaterfallList.default,
+            {
+              layout: waterfallLayout,
+              layoutDirection,
+              columnGap,
+              rowGap,
+              columns,
+              rows,
+              registerItemRef,
+              renderItem
+            },
+            children
+          )
+        ) : (
+          // 分组渲染逻辑
+          /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, processedData.map((group, groupIndex) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: group.tabKey }, (tabStyle === "anchor" || processedData.length > 1) && group.tabLabel && /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              ...{ id: `list-title-${group.tabKey}` },
+              className: "pisell-list-group-title"
+            },
+            /* @__PURE__ */ import_react.default.createElement("h2", { className: "pisell-list-group-title-text" }, group.tabLabel)
+          ), /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_classnames.default)("list-group-items"),
+              style: displayStyle === "grid" ? listStyle : void 0
+            },
+            hasChildren ? (
+              // 如果有子组件，循环渲染子组件
+              group.items.map((item, itemIndex) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.id || itemIndex, className: (0, import_classnames.default)("list-item") }, item.__isSkeleton ? /* @__PURE__ */ import_react.default.createElement(
+                import_ListItemSkeleton.default,
+                {
+                  displayStyle,
+                  showImage: true
+                }
+              ) : import_react.default.Children.map(children, (child, childIndex) => {
+                if ((0, import_react.isValidElement)(child)) {
+                  return (0, import_react.cloneElement)(child, {
+                    ...child.props,
+                    // 传递数据项给子组件
+                    item,
+                    index: itemIndex,
+                    // 为每个子组件添加唯一key
+                    key: `${group.tabKey}-${item.id || itemIndex}-${childIndex}`
+                  });
+                }
+                return child;
+              })))
+            ) : (
+              // 没有子组件时使用原有逻辑
+              group.items.map((item, itemIndex) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.id || itemIndex, className: (0, import_classnames.default)("list-item") }, item.__isSkeleton ? /* @__PURE__ */ import_react.default.createElement(
+                import_ListItemSkeleton.default,
+                {
+                  displayStyle,
+                  showImage: true
+                }
+              ) : renderItem ? renderItem(item, itemIndex) : /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("default-item") }, typeof item === "object" ? JSON.stringify(item) : item)))
+            )
+          ))))
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_ScrollLoader.default,
+          {
+            loading,
+            scrollLoadState,
+            layoutDirection,
+            paginationType
+          }
+        )
+      )
+    );
+  }, [displayStyle, layoutDirection, paginationType, listStyle, processedData, renderItem, loading, children, height, scrollLoadState, emptyConfig, totalDataLength, tabStyle]);
+  const renderFooter = () => {
+    if (paginationType === "all" || paginationType === "scroll") return null;
+    if (paginationType === "more") {
+      const canLoadMore = hasMore;
+      if (canLoadMore) {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("list-footer") }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: handleLoadMore, loading }, getLocalText("pisell-list-load-more", "查看更多")));
+      } else if (currentPage > 1) {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("list-footer") }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { onClick: handleViewLess, className: (0, import_classnames.default)("view-less-btn") }, getLocalText("pisell-list-view-less", "查看更少")));
+      }
+      return null;
+    }
+    if (paginationType === "pager") {
+      const total = (pagination == null ? void 0 : pagination.totalCount) ?? totalDataLength;
+      const showTotal = (total2, range) => {
+        const totalFunc = getLocalTextFunc("pisell-list-pagination-total");
+        if (typeof totalFunc === "function") {
+          return totalFunc(range[0], range[1], total2);
+        }
+        const fallbackFunc = getLocalTextFunc("pisell-list-pagination-total-fallback");
+        if (typeof fallbackFunc === "function") {
+          return fallbackFunc(range[0], range[1], total2);
+        }
+        return `显示第 ${range[0]}-${range[1]} 条，共 ${total2} 条`;
+      };
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("list-footer") }, /* @__PURE__ */ import_react.default.createElement(
+        import_Pagination.default,
+        {
+          current: currentPage,
+          pageSize: defaultPageSize,
+          total,
+          totalPages: pagination == null ? void 0 : pagination.total,
+          onChange: handlePageChange,
+          onShowSizeChange: handleShowSizeChange,
+          showTotal,
+          showSizeChanger: true,
+          pageSizeOptions: ["6", "10", "20", "50"]
+        }
+      ));
+    }
+    return null;
+  };
+  const renderScrollButton = () => {
+    if (paginationType !== "scroll" || totalDataLength === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("list-scroll-float-button") }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        className: (0, import_classnames.default)("scroll-down-button"),
+        onClick: handleScrollDown,
+        title: layoutDirection === "vertical" ? getLocalText("pisell-list-scroll-to-bottom", "滚动到底部并加载更多") : getLocalText("pisell-list-scroll-to-end", "滚动到末尾并加载更多"),
+        style: {
+          padding: "16px",
+          position: "absolute",
+          background: "rgba(255, 255, 255, 0.75)",
+          boxShadow: "0px 4px 6px -2px rgba(16, 24, 40, 0.03)",
+          borderRadius: "100px",
+          outline: "1px #D0D5DD solid",
+          outlineOffset: "-1px",
+          backdropFilter: "blur(6px)",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignItems: "flex-start",
+          gap: "16px",
+          display: "inline-flex",
+          cursor: "pointer",
+          ...layoutDirection === "horizontal" ? {
+            right: "20px",
+            top: "50%",
+            transform: "translateY(-50%)"
+          } : {
+            left: "50%",
+            bottom: "20px",
+            transform: "translateX(-50%)"
+          },
+          zIndex: 1e3,
+          border: "none"
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { style: {
+        width: "32px",
+        height: "32px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      } }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Iconfont,
+        {
+          type: layoutDirection === "horizontal" ? "pisell2-chevron-right" : "pisell2-chevron-down",
+          style: {
+            fontSize: "20px",
+            color: "#101828"
+          }
+        }
+      ))
+    ));
+  };
+  const containerClassName = (0, import_classnames.default)(
+    "pisell-list",
+    className,
+    `pisell-list-${layoutDirection}`,
+    {
+      "pisell-list-sticky-enabled": layoutDirection === "vertical" && stickyTop
+    }
+  );
+  const finalContainerStyle = {
+    ...containerStyle,
+    position: "relative",
+    // 为悬浮按钮提供定位基准
+    // 上下排版时，容器不需要滚动，让 list-content 控制滚动
+    ...layoutDirection === "vertical" && height !== "auto" && { overflowY: "hidden" }
+  };
+  const renderMainContent = () => {
+    if (layoutDirection === "vertical") {
+      return renderContent();
+    } else {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderTabs(), renderContent());
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClassName,
+      style: finalContainerStyle
+    },
+    renderMainContent(),
+    renderFooter(),
+    renderScrollButton()
+  );
+};
+var List_default = List;