@pisell/private-materials 6.5.13 → 6.5.14

package/lib/components/list/List.less

@@ -0,0 +1,2 @@
+/* List 组件样式 - 模块化导入 */
+@import './styles/base.less';

package/lib/components/list/ResponsiveWrapper.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ListProps, ResponsiveConfig, ResponsiveWrapperProps } from './types';
+/**
+ * ResponsiveWrapper 响应式包装器组件
+ * 根据不同设备类型自动选择合适的配置
+ */
+declare const ResponsiveWrapper: React.FC<ResponsiveWrapperProps>;
+/**
+ * 用于创建响应式配置的工具函数
+ */
+export declare const createResponsiveConfig: (overrides?: {
+    pc?: Partial<ListProps>;
+    pad?: Partial<ListProps>;
+    mobile?: Partial<ListProps>;
+}) => ResponsiveConfig;
+export default ResponsiveWrapper;

package/lib/components/list/ResponsiveWrapper.js

@@ -0,0 +1,145 @@
+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/ResponsiveWrapper.tsx
+var ResponsiveWrapper_exports = {};
+__export(ResponsiveWrapper_exports, {
+  createResponsiveConfig: () => createResponsiveConfig,
+  default: () => ResponsiveWrapper_default
+});
+module.exports = __toCommonJS(ResponsiveWrapper_exports);
+var import_react = __toESM(require("react"));
+var import_List = __toESM(require("./List"));
+var import_useDevice = require("./hooks/useDevice");
+var ResponsiveWrapper = (props) => {
+  const { responsive, children, ...listProps } = props;
+  const deviceInfo = (0, import_useDevice.useDevice)();
+  console.log("deviceInfo", deviceInfo);
+  const finalProps = (0, import_react.useMemo)(() => {
+    if (!responsive) {
+      const classNames2 = [
+        listProps.className,
+        `list-device-${deviceInfo.type}`
+        // 添加设备类型类名
+      ].filter(Boolean).join(" ");
+      return {
+        ...listProps,
+        className: classNames2
+      };
+    }
+    const { pc, pad, mobile } = responsive;
+    let deviceSpecificProps = {};
+    switch (deviceInfo.type) {
+      case "mobile":
+        deviceSpecificProps = mobile || {};
+        break;
+      case "pad":
+        deviceSpecificProps = pad || {};
+        break;
+      case "pc":
+        deviceSpecificProps = pc || {};
+        break;
+      default:
+        deviceSpecificProps = {};
+    }
+    const mergedProps = {
+      ...listProps,
+      ...deviceSpecificProps
+    };
+    const classNames = [
+      mergedProps.className,
+      `list-device-${deviceInfo.type}`
+      // 添加设备类型类名
+    ].filter(Boolean).join(" ");
+    return {
+      ...mergedProps,
+      className: classNames
+    };
+  }, [responsive, deviceInfo.type, listProps]);
+  const optimizedProps = (0, import_react.useMemo)(() => {
+    const props2 = { ...finalProps };
+    switch (deviceInfo.type) {
+      case "mobile":
+        return {
+          ...props2,
+          // 移动端默认使用垂直布局
+          layoutDirection: props2.layoutDirection || "vertical",
+          // 移动端默认单列显示
+          columns: props2.columns ?? 1,
+          // 移动端减少间距
+          columnGap: props2.columnGap ?? 8,
+          rowGap: props2.rowGap ?? 8,
+          // 移动端适合滚动加载
+          paginationType: props2.paginationType || "scroll",
+          // 移动端默认较小的页面大小
+          defaultPageSize: props2.defaultPageSize ?? 10
+        };
+      case "pad":
+        return {
+          ...props2,
+          // 平板端可以使用2列
+          columns: props2.columns ?? 2,
+          // 平板端适中的间距
+          columnGap: props2.columnGap ?? 12,
+          rowGap: props2.rowGap ?? 12,
+          // 平板端适合分页或滚动加载
+          paginationType: props2.paginationType || "more",
+          // 平板端中等的页面大小
+          defaultPageSize: props2.defaultPageSize ?? 12
+        };
+      case "pc":
+        return {
+          ...props2,
+          // PC端可以使用更多列
+          columns: props2.columns ?? 3,
+          // PC端较大的间距
+          columnGap: props2.columnGap ?? 16,
+          rowGap: props2.rowGap ?? 16,
+          // PC端适合传统分页
+          paginationType: props2.paginationType || "pager",
+          // PC端较大的页面大小
+          defaultPageSize: props2.defaultPageSize ?? 15
+        };
+      default:
+        return props2;
+    }
+  }, [finalProps, deviceInfo.type]);
+  return /* @__PURE__ */ import_react.default.createElement(import_List.default, { ...optimizedProps }, children);
+};
+var createResponsiveConfig = (overrides) => {
+  return {
+    pc: overrides == null ? void 0 : overrides.pc,
+    pad: overrides == null ? void 0 : overrides.pad,
+    mobile: overrides == null ? void 0 : overrides.mobile
+  };
+};
+var ResponsiveWrapper_default = ResponsiveWrapper;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createResponsiveConfig
+});

package/lib/components/list/TestResponsiveWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './TestResponsiveWrapper.less';
+/**
+ * ResponsiveWrapper 测试组件
+ * 用于测试ResponsiveWrapper组件在不同配置下的表现，支持动态配置和数据加载模拟
+ */
+declare const TestResponsiveWrapper: React.FC;
+export default TestResponsiveWrapper;

package/lib/components/list/TestResponsiveWrapper.js

@@ -0,0 +1,493 @@
+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/TestResponsiveWrapper.tsx
+var TestResponsiveWrapper_exports = {};
+__export(TestResponsiveWrapper_exports, {
+  default: () => TestResponsiveWrapper_default
+});
+module.exports = __toCommonJS(TestResponsiveWrapper_exports);
+var import_react = __toESM(require("react"));
+var import_ResponsiveWrapper = __toESM(require("./ResponsiveWrapper"));
+var import_TestResponsiveWrapper = require("./TestResponsiveWrapper.less");
+var generateTestDataWithId = (count, category, startId = 1) => {
+  const categories = ["电子产品", "服装配饰", "家居用品", "运动户外", "美妆护肤"];
+  const statuses = ["active", "inactive", "pending"];
+  const productNames = {
+    "电子产品": ["智能手机", "蓝牙耳机", "平板电脑", "智能手表", "充电器", "数据线", "移动电源", "音响"],
+    "服装配饰": ["休闲外套", "牛仔裤", "连衣裙", "运动鞋", "手提包", "围巾", "帽子", "T恤"],
+    "家居用品": ["咖啡杯", "床上用品", "收纳盒", "台灯", "花瓶", "地毯", "抱枕", "装饰画"],
+    "运动户外": ["运动鞋", "瑜伽垫", "哑铃", "背包", "帐篷", "水杯", "护膝", "跑步腰包"],
+    "美妆护肤": ["面膜", "口红", "防晒霜", "洗面奶", "精华液", "粉底液", "眼影", "香水"]
+  };
+  return Array.from({ length: count }, (_, index) => {
+    const targetCategory = category && category !== "all" ? category : categories[Math.floor(Math.random() * categories.length)];
+    const categoryProducts = productNames[targetCategory] || productNames["电子产品"];
+    const productName = categoryProducts[Math.floor(Math.random() * categoryProducts.length)];
+    const itemId = startId + index;
+    return {
+      id: itemId,
+      title: `${productName} - 型号${String(itemId).padStart(4, "0")}`,
+      description: `${productName}的详细介绍：采用优质材料制作，设计精美，功能实用。适合日常使用，性价比极高。编号：${String(itemId).padStart(6, "0")}`,
+      category: targetCategory,
+      height: Math.random() * 250 + 120,
+      // 稍微增加高度变化范围
+      price: Math.round(Math.random() * 2e3 + 50),
+      // 增加价格范围
+      status: statuses[Math.floor(Math.random() * statuses.length)],
+      createdAt: new Date(Date.now() - Math.random() * 60 * 24 * 60 * 60 * 1e3)
+      // 最近60天内的随机日期
+    };
+  });
+};
+var CATEGORIES = [
+  { key: "电子产品", label: "电子产品", total: 150 },
+  { key: "服装配饰", label: "服装配饰", total: 125 },
+  { key: "家居用品", label: "家居用品", total: 100 },
+  { key: "运动户外", label: "运动户外", total: 75 },
+  { key: "美妆护肤", label: "美妆护肤", total: 50 }
+];
+var generateSimpleTabItems = (tabStyle, data = []) => {
+  if (tabStyle === "switch") {
+    const tabs = [
+      { key: "all", label: "全部" }
+    ];
+    CATEGORIES.forEach((category) => {
+      tabs.push({
+        key: category.key,
+        label: category.label,
+        group: category.key
+      });
+    });
+    return tabs;
+  } else {
+    const categoryCount = data.reduce((acc, item) => {
+      acc[item.category] = (acc[item.category] || 0) + 1;
+      return acc;
+    }, {});
+    const statusCount = data.reduce((acc, item) => {
+      acc[item.status] = (acc[item.status] || 0) + 1;
+      return acc;
+    }, {});
+    const priceRangeCount = data.reduce((acc, item) => {
+      const price = item.price || 0;
+      let range = "";
+      if (price < 100) range = "100元以下";
+      else if (price < 500) range = "100-500元";
+      else if (price < 1e3) range = "500-1000元";
+      else range = "1000元以上";
+      acc[range] = (acc[range] || 0) + 1;
+      return acc;
+    }, {});
+    const tabs = [
+      { key: "all", label: `全部 (${data.length})` }
+    ];
+    Object.entries(categoryCount).forEach(([category, count]) => {
+      tabs.push({
+        key: `category-${category}`,
+        label: `${category} (${count})`,
+        group: category
+      });
+    });
+    const statusLabels = {
+      "active": "正常",
+      "inactive": "停用",
+      "pending": "待审核"
+    };
+    Object.entries(statusCount).forEach(([status, count]) => {
+      tabs.push({
+        key: `status-${status}`,
+        label: `${statusLabels[status]} (${count})`,
+        group: status
+      });
+    });
+    Object.entries(priceRangeCount).forEach(([range, count]) => {
+      tabs.push({
+        key: `price-${range}`,
+        label: `${range} (${count})`,
+        group: range
+      });
+    });
+    return tabs;
+  }
+};
+var mockApiCall = async (params) => {
+  const { pageSize, currentPage, category, delay = 800 } = params;
+  await new Promise((resolve) => setTimeout(resolve, delay));
+  if (Math.random() < 0.05) {
+    throw new Error("网络请求失败，请重试");
+  }
+  const categoryTotals = {
+    "电子产品": 150,
+    // 30%
+    "服装配饰": 125,
+    // 25%
+    "家居用品": 100,
+    // 20%
+    "运动户外": 75,
+    // 15%
+    "美妆护肤": 50
+    // 10%
+  };
+  const totalCount = category && category !== "all" ? categoryTotals[category] || 50 : 500;
+  const startId = category && category !== "all" ? Object.entries(categoryTotals).reduce((offset, [cat, count]) => {
+    if (cat === category) return offset;
+    return offset + count;
+  }, 0) + (currentPage - 1) * pageSize + 1 : (currentPage - 1) * pageSize + 1;
+  const data = generateTestDataWithId(pageSize, category, startId);
+  const hasMore = currentPage * pageSize < totalCount;
+  return {
+    data,
+    total: totalCount,
+    hasMore
+  };
+};
+var defaultDynamicConfig = {
+  displayStyle: "grid",
+  columns: { pc: 4, pad: 3, mobile: 2 },
+  columnGap: { pc: 20, pad: 16, mobile: 12 },
+  rowGap: { pc: 20, pad: 16, mobile: 12 },
+  paginationType: { pc: "pager", pad: "more", mobile: "scroll" },
+  defaultPageSize: { pc: 20, pad: 15, mobile: 10 },
+  enableTab: false,
+  tabStyle: "none",
+  stickyTop: false,
+  enableEmpty: false
+};
+var presetConfigs = [
+  {
+    name: "基础网格布局",
+    description: "标准的网格布局，适合大数据量内容展示（500条数据）",
+    config: {
+      displayStyle: "grid",
+      columns: { pc: 4, pad: 3, mobile: 2 },
+      columnGap: { pc: 20, pad: 16, mobile: 12 },
+      rowGap: { pc: 20, pad: 16, mobile: 12 },
+      paginationType: { pc: "pager", pad: "pager", mobile: "scroll" },
+      defaultPageSize: { pc: 20, pad: 15, mobile: 10 },
+      enableTab: false,
+      tabStyle: "none",
+      stickyTop: false,
+      enableEmpty: false
+    }
+  },
+  {
+    name: "切换模式",
+    description: "标签切换模式，点击标签会重新加载对应分类的数据",
+    config: {
+      displayStyle: "grid",
+      columns: { pc: 4, pad: 3, mobile: 2 },
+      columnGap: { pc: 18, pad: 15, mobile: 12 },
+      rowGap: { pc: 18, pad: 15, mobile: 12 },
+      paginationType: { pc: "pager", pad: "more", mobile: "scroll" },
+      defaultPageSize: { pc: 16, pad: 12, mobile: 8 },
+      enableTab: true,
+      tabStyle: "switch",
+      stickyTop: true,
+      enableEmpty: false
+    }
+  },
+  {
+    name: "锚点模式",
+    description: "标签锚点模式，显示所有数据并按分类分组，点击标签会跳转到对应分组位置",
+    config: {
+      displayStyle: "grid",
+      columns: { pc: 4, pad: 3, mobile: 2 },
+      columnGap: { pc: 18, pad: 15, mobile: 12 },
+      rowGap: { pc: 18, pad: 15, mobile: 12 },
+      paginationType: { pc: "all", pad: "all", mobile: "all" },
+      defaultPageSize: { pc: 500, pad: 500, mobile: 500 },
+      enableTab: true,
+      tabStyle: "anchor",
+      stickyTop: true,
+      enableEmpty: false
+    }
+  }
+];
+var TestResponsiveWrapper = () => {
+  const [activePreset, setActivePreset] = (0, import_react.useState)(0);
+  const [simulateDevice, setSimulateDevice] = (0, import_react.useState)(null);
+  const [dynamicConfig, setDynamicConfig] = (0, import_react.useState)(defaultDynamicConfig);
+  const [isCustomMode, setIsCustomMode] = (0, import_react.useState)(false);
+  const [data, setData] = (0, import_react.useState)([]);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
+  const [total, setTotal] = (0, import_react.useState)(0);
+  const [activeTab, setActiveTab] = (0, import_react.useState)("all");
+  const [currentPaginationType, setCurrentPaginationType] = (0, import_react.useState)("pager");
+  const [maxHeight, setMaxHeight] = (0, import_react.useState)(600);
+  const [scrollDirection, setScrollDirection] = (0, import_react.useState)("vertical");
+  const loadData = (0, import_react.useCallback)(async (params) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await mockApiCall({
+        currentPage: params.currentPage,
+        pageSize: params.pageSize,
+        category: params.activeTab === "all" ? void 0 : params.activeTab
+      });
+      if (params.trigger === "loadMore" || params.trigger === "scroll") {
+        setData((prev) => [...prev, ...response.data]);
+      } else {
+        setData(response.data);
+      }
+      setTotal(response.total);
+      setCurrentPage(params.currentPage);
+      setActiveTab(params.activeTab || "all");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "未知错误");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const refreshData = (0, import_react.useCallback)(() => {
+    const config = isCustomMode ? dynamicConfig : presetConfigs[activePreset].config;
+    const deviceType = simulateDevice || "pc";
+    const pageSize = config.defaultPageSize[deviceType];
+    loadData({
+      trigger: "pagination",
+      currentPage: 1,
+      pageSize,
+      activeTab
+    });
+  }, [isCustomMode, dynamicConfig, activePreset, simulateDevice, activeTab, loadData]);
+  (0, import_react.useEffect)(() => {
+    refreshData();
+  }, [refreshData]);
+  const currentResponsiveConfig = (0, import_react.useMemo)(() => {
+    const config = isCustomMode ? dynamicConfig : presetConfigs[activePreset].config;
+    const tabData = config.enableTab && config.tabStyle !== "none" ? generateSimpleTabItems(config.tabStyle, data) : void 0;
+    const renderItem = (item, index) => {
+      const testItem = item;
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `test-item ${testItem.status}`, key: testItem.id }, /* @__PURE__ */ import_react.default.createElement("div", { className: "item-header" }, /* @__PURE__ */ import_react.default.createElement("h4", { title: testItem.title }, testItem.title), /* @__PURE__ */ import_react.default.createElement("span", { className: `status-badge ${testItem.status}` }, testItem.status === "active" ? "正常" : testItem.status === "inactive" ? "停用" : "待审核")), /* @__PURE__ */ import_react.default.createElement("p", { className: "item-description", title: testItem.description }, testItem.description), /* @__PURE__ */ import_react.default.createElement("div", { className: "item-meta" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "category" }, testItem.category), testItem.price && /* @__PURE__ */ import_react.default.createElement("span", { className: "price" }, "¥", testItem.price)), /* @__PURE__ */ import_react.default.createElement("div", { className: "item-footer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "item-id" }, "#", testItem.id), /* @__PURE__ */ import_react.default.createElement("span", { className: "created-time" }, testItem.createdAt.toLocaleDateString())), config.displayStyle === "waterfall" && /* @__PURE__ */ import_react.default.createElement("div", { className: "height-info" }, "高度: ", Math.round(testItem.height || 150), "px"));
+    };
+    const baseProps = {
+      data: config.enableEmpty ? [] : data,
+      loading,
+      displayStyle: config.displayStyle,
+      layoutDirection: scrollDirection,
+      tabStyle: config.enableTab ? config.tabStyle : "none",
+      tabGroup: "category",
+      // 指定使用category字段进行分组
+      tabData,
+      stickyTop: config.stickyTop,
+      emptyConfig: config.enableEmpty ? {
+        show: true,
+        text: "暂无数据",
+        description: "当前没有可显示的内容，请尝试刷新或调整筛选条件"
+      } : void 0,
+      renderItem,
+      onLoadData: loadData
+    };
+    const responsiveConfig = (0, import_ResponsiveWrapper.createResponsiveConfig)({
+      pc: {
+        columns: config.columns.pc,
+        columnGap: config.columnGap.pc,
+        rowGap: config.rowGap.pc,
+        layoutDirection: scrollDirection,
+        paginationType: currentPaginationType,
+        defaultPageSize: config.defaultPageSize.pc,
+        pagination: {
+          current: currentPage,
+          total: Math.ceil(total / config.defaultPageSize.pc),
+          totalCount: total
+        }
+      },
+      pad: {
+        columns: config.columns.pad,
+        columnGap: config.columnGap.pad,
+        rowGap: config.rowGap.pad,
+        layoutDirection: scrollDirection,
+        paginationType: currentPaginationType,
+        defaultPageSize: config.defaultPageSize.pad,
+        pagination: {
+          current: currentPage,
+          total: Math.ceil(total / config.defaultPageSize.pad),
+          totalCount: total
+        }
+      },
+      mobile: {
+        columns: config.columns.mobile,
+        columnGap: config.columnGap.mobile,
+        rowGap: config.rowGap.mobile,
+        layoutDirection: scrollDirection,
+        paginationType: currentPaginationType,
+        defaultPageSize: config.defaultPageSize.mobile,
+        pagination: {
+          current: currentPage,
+          total: Math.ceil(total / config.defaultPageSize.mobile),
+          totalCount: total
+        }
+      }
+    });
+    return {
+      ...baseProps,
+      responsive: responsiveConfig
+    };
+  }, [isCustomMode, dynamicConfig, activePreset, data, loading, total, loadData, currentPaginationType, currentPage, scrollDirection]);
+  const handlePresetChange = (index) => {
+    setActivePreset(index);
+    setIsCustomMode(false);
+    setDynamicConfig(presetConfigs[index].config);
+  };
+  const handleConfigChange = (field, value) => {
+    setIsCustomMode(true);
+    setDynamicConfig((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+  const handleDeviceConfigChange = (device, field, value) => {
+    setIsCustomMode(true);
+    setDynamicConfig((prev) => {
+      const fieldValue = prev[field];
+      return {
+        ...prev,
+        [field]: {
+          ...fieldValue,
+          [device]: value
+        }
+      };
+    });
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "test-responsive-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "test-controls" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "preset-selector" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "预设配置模板:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "preset-buttons" }, presetConfigs.map((preset, index) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: index,
+      className: `preset-button ${index === activePreset && !isCustomMode ? "active" : ""}`,
+      onClick: () => handlePresetChange(index),
+      title: preset.description
+    },
+    preset.name
+  )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-simulator" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "设备类型:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-buttons" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: `device-button ${simulateDevice === null ? "active" : ""}`,
+      onClick: () => setSimulateDevice(null)
+    },
+    "自动检测"
+  ), ["pc", "pad", "mobile"].map((device) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: device,
+      className: `device-button ${simulateDevice === device ? "active" : ""}`,
+      onClick: () => setSimulateDevice(device)
+    },
+    device.toUpperCase()
+  )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "data-controls" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "数据操作:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "data-buttons" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: refreshData, disabled: loading, className: "refresh-button" }, loading ? "加载中..." : "刷新数据"), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      onClick: () => handleConfigChange("enableEmpty", !dynamicConfig.enableEmpty),
+      className: `toggle-button ${dynamicConfig.enableEmpty ? "active" : ""}`
+    },
+    dynamicConfig.enableEmpty ? "显示数据" : "显示空状态"
+  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pagination-controls" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "分页方式:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "pagination-buttons" }, [
+    { key: "pager", label: "分页器", desc: "传统分页，适合精确导航" },
+    { key: "more", label: "加载更多", desc: "点击按钮加载，适合移动端" },
+    { key: "scroll", label: "滚动加载", desc: "自动无限滚动" },
+    { key: "all", label: "全部显示", desc: "一次性显示所有数据" }
+  ].map((pagination) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: pagination.key,
+      className: `pagination-button ${currentPaginationType === pagination.key ? "active" : ""}`,
+      onClick: () => setCurrentPaginationType(pagination.key),
+      title: pagination.desc
+    },
+    pagination.label,
+    pagination.key === "all" && total > 100 && /* @__PURE__ */ import_react.default.createElement("span", { className: "warning-badge" }, "⚠️")
+  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "pagination-description" }, /* @__PURE__ */ import_react.default.createElement("small", null, "当前: ", /* @__PURE__ */ import_react.default.createElement("strong", null, currentPaginationType === "pager" && "传统分页器 - 显示页码和跳转控件", currentPaginationType === "more" && "加载更多 - 点击按钮加载下一页", currentPaginationType === "scroll" && "滚动加载 - 滚动到底部自动加载", currentPaginationType === "all" && "全部显示 - 一次性显示所有500条数据")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "height-controls" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "列表高度限制:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "height-buttons" }, [
+    { value: 400, label: "400px", desc: "适合紧凑布局" },
+    { value: 600, label: "600px", desc: "默认高度，平衡体验" },
+    { value: 800, label: "800px", desc: "适合大屏幕浏览" },
+    { value: "auto", label: "无限制", desc: "根据内容自适应高度" }
+  ].map((height) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: height.value,
+      className: `height-button ${maxHeight === height.value ? "active" : ""}`,
+      onClick: () => setMaxHeight(height.value),
+      title: height.desc
+    },
+    height.label,
+    height.value === "auto" && currentPaginationType === "all" && /* @__PURE__ */ import_react.default.createElement("span", { className: "warning-badge" }, "⚠️")
+  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "height-description" }, /* @__PURE__ */ import_react.default.createElement("small", null, "当前高度: ", /* @__PURE__ */ import_react.default.createElement("strong", null, maxHeight === "auto" ? "无限制 - 根据内容自适应" : `${maxHeight}px - 超出部分可滚动`), maxHeight === "auto" && currentPaginationType === "all" && /* @__PURE__ */ import_react.default.createElement("span", { className: "performance-warning" }, " (⚠️ 500条数据可能影响页面性能)")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "scroll-direction-controls" }, /* @__PURE__ */ import_react.default.createElement("h3", null, "滚动方向:"), /* @__PURE__ */ import_react.default.createElement("div", { className: "scroll-direction-buttons" }, [
+    {
+      key: "vertical",
+      label: "垂直滚动",
+      desc: "上下滚动，传统列表布局",
+      icon: "↕️",
+      recommend: "推荐用于大多数场景"
+    },
+    {
+      key: "horizontal",
+      label: "水平滚动",
+      desc: "左右滚动，卡片式布局",
+      icon: "↔️",
+      recommend: "适合图片展示或卡片浏览"
+    }
+  ].map((direction) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: direction.key,
+      className: `scroll-direction-button ${scrollDirection === direction.key ? "active" : ""}`,
+      onClick: () => setScrollDirection(direction.key),
+      title: direction.desc
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "direction-icon" }, direction.icon),
+    direction.label,
+    scrollDirection === direction.key && /* @__PURE__ */ import_react.default.createElement("span", { className: "recommend-badge" }, "✓")
+  ))))), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `test-container ${simulateDevice ? `simulate-${simulateDevice}` : ""}`
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_ResponsiveWrapper.default,
+      {
+        ...currentResponsiveConfig,
+        className: `test-responsive-wrapper-instance scroll-${scrollDirection}`,
+        style: {
+          border: "2px solid #e0e0e0",
+          borderRadius: "8px",
+          padding: "16px",
+          backgroundColor: "#fafafa",
+          position: "relative",
+          maxHeight: maxHeight === "auto" ? "none" : `${maxHeight}px`,
+          overflowY: scrollDirection === "vertical" ? maxHeight === "auto" ? "visible" : "auto" : "hidden",
+          overflowX: scrollDirection === "horizontal" ? "auto" : "hidden",
+          maxWidth: scrollDirection === "horizontal" ? "100%" : "none"
+        }
+      }
+    ),
+    loading && /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-overlay" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "loading-spinner" }, "加载中...")),
+    maxHeight !== "auto" && /* @__PURE__ */ import_react.default.createElement("div", { className: "height-indicator" }, /* @__PURE__ */ import_react.default.createElement("small", null, "📏 列表最大高度: ", maxHeight, "px"))
+  ));
+};
+var TestResponsiveWrapper_default = TestResponsiveWrapper;