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;
