@pisell/private-materials 6.4.55 → 6.4.57

package/lib/components/list/components/WaterfallList/WaterfallList.less

@@ -0,0 +1,201 @@
+/* WaterfallList 组件样式 */
+
+:root {
+  --waterfall-item-padding: 16px;
+  --waterfall-item-border-radius: 8px;
+  --waterfall-item-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --waterfall-item-border: 1px solid #f0f0f0;
+  --waterfall-item-bg: #fff;
+  --waterfall-min-row-height: 120px;
+}
+
+.waterfall-container {
+  width: 100%;
+  /* 使用更高优先级的选择器，避免!important */
+  &.waterfall-container {
+    align-items: flex-start; /* 确保瀑布流列不会被拉伸到相同高度 */
+  }
+}
+
+/* 瀑布流项目的基础样式重置 - 使用更具体的选择器 */
+.waterfall-container .list-item.waterfall-item {
+  height: auto; /* 覆盖grid样式 */
+  width: auto; /* 覆盖可能的宽度限制 */
+  /* 确保盒模型正确 */
+  box-sizing: border-box;
+}
+
+.waterfall-track {
+  /* 每个轨道的基础样式 */
+  min-height: 0;
+
+  &.waterfall-track-vertical {
+    /* 垂直模式：轨道是列，等宽分布但高度自适应 */
+    flex: 1 0 0; /* 等宽分布，不收缩，初始宽度为0 */
+    min-width: 0; /* 允许内容收缩 */
+    align-self: flex-start; /* 确保列高度自适应，不被拉伸 */
+    height: auto; /* 明确设置高度自适应 */
+  }
+
+  &.waterfall-track-horizontal {
+    /* 水平模式：轨道是行，自适应高度 */
+    flex: 0 0 auto;
+    width: 100%;
+    min-height: var(--waterfall-min-row-height); /* 确保行有最小高度 */
+    margin-bottom: 0; /* 移除可能的margin */
+  }
+
+  /* 瀑布流项目样式 */
+  .waterfall-item {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    .default-waterfall-item {
+      transition: all 0.3s ease;
+      background: var(--waterfall-item-bg);
+      border-radius: var(--waterfall-item-border-radius);
+      box-shadow: var(--waterfall-item-shadow);
+      border: var(--waterfall-item-border);
+      padding: var(--waterfall-item-padding);
+    }
+
+    /* 悬停效果 - 使用更具体的选择器 */
+    &:hover .default-waterfall-item {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  /* 垂直模式下的轨道项目样式 */
+  &.waterfall-track-vertical .waterfall-item {
+    width: 100%; /* 填满列宽 */
+    flex: 0 0 auto; /* 不拉伸，保持原始高度 */
+    /* 高度通过内联样式设置，这里不再强制覆盖 */
+
+    /* 确保内部组件填充整个容器 - 使用更具体的选择器 */
+    &.waterfall-item > * {
+      height: 100%;
+      box-sizing: border-box;
+    }
+
+    /* 默认瀑布流项目样式 */
+    .default-waterfall-item {
+      /* 填充容器高度 */
+      height: 100%;
+      min-height: unset; /* 移除可能的最小高度限制 */
+      max-height: none; /* 移除可能的最大高度限制 */
+      flex-shrink: 0; /* 防止被压缩 */
+      flex-grow: 0; /* 防止被拉伸 */
+      display: flex;
+      flex-direction: column;
+      position: relative;
+    }
+  }
+
+  /* 卡片组件适配 - 分离出单独的mixin */
+  &.waterfall-track-vertical .waterfall-item {
+    /* Ant Design Card 组件适配 */
+    .ant-card,
+    .ant-card-bordered {
+      &.ant-card {
+        height: 100%;
+        min-height: 100%;
+        max-height: none;
+        display: flex;
+        flex-direction: column;
+
+        .ant-card-body {
+          &.ant-card-body {
+            height: 100%;
+            min-height: 100%;
+            max-height: none;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1; /* 关键：让card-body填满整个卡片 */
+            padding: var(--waterfall-item-padding); /* 使用CSS变量 */
+          }
+        }
+      }
+    }
+
+    /* Pisell Card 组件适配 */
+    .pisell-card-wrap {
+      &.pisell-card-wrap {
+        height: 100%;
+      }
+    }
+
+    /* Pisell Product Card 组件适配 */
+    .pisell-product-card {
+      &.pisell-product-card {
+        height: 100%;
+        min-height: 100%;
+        max-height: none;
+        display: flex;
+        flex-direction: column;
+
+        .pisell-product-card-content {
+          &.pisell-product-card-content {
+            height: 100%;
+            min-height: 100%;
+            max-height: none;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1; /* 关键：让content填满整个卡片 */
+            justify-content: space-between; /* 内容分散对齐 */
+          }
+        }
+
+        .pisell-product-card-image {
+          &.pisell-product-card-image {
+            flex-grow: 1; /* 让图片区域扩展填充可用空间 */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 60px; /* 最小高度 */
+
+            .image {
+              &.image {
+                width: 100%;
+                height: 100%;
+                min-height: inherit;
+              }
+            }
+          }
+        }
+
+        .pisell-product-card-info,
+        .pisell-product-card-arrow {
+          &.pisell-product-card-info,
+          &.pisell-product-card-arrow {
+            flex-shrink: 0; /* 保持固定大小 */
+          }
+        }
+      }
+    }
+
+    /* 通用卡片组件适配 - 使用属性选择器提高优先级 */
+    [class*="card"],
+    [class*="Card"] {
+      &[class*="card"],
+      &[class*="Card"] {
+        height: 100%;
+        min-height: 100%;
+        max-height: none;
+
+        > * {
+          &:first-child {
+            height: 100%;
+            min-height: 100%;
+            max-height: none;
+          }
+        }
+      }
+    }
+  }
+
+  /* 水平模式下的轨道项目样式 */
+  &.waterfall-track-horizontal .waterfall-item {
+    flex-shrink: 0; /* 保持预设宽度 */
+    height: auto; /* 自适应高度 */
+  }
+}

package/lib/components/list/components/WaterfallList/index.js

@@ -0,0 +1,35 @@
+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/components/WaterfallList/index.ts
+var WaterfallList_exports = {};
+__export(WaterfallList_exports, {
+  default: () => import_WaterfallList.default
+});
+module.exports = __toCommonJS(WaterfallList_exports);
+var import_WaterfallList = __toESM(require("./WaterfallList"));

package/lib/components/list/examples/GroupedListExample.js

@@ -0,0 +1,210 @@
+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/examples/GroupedListExample.tsx
+var GroupedListExample_exports = {};
+__export(GroupedListExample_exports, {
+  default: () => GroupedListExample_default
+});
+module.exports = __toCommonJS(GroupedListExample_exports);
+var import_react = __toESM(require("react"));
+var import__ = require("../index");
+var GroupedListExample = () => {
+  const mockTicketData = [
+    {
+      id: "1",
+      title: "2hrs upgrade Unlimited",
+      description: "Adult Day",
+      price: 90,
+      duration: "2 h",
+      ticketType: "all-access",
+      category: "Adult Day Pass"
+    },
+    {
+      id: "2",
+      title: "2hrs upgrade Unlimited",
+      description: "Kid Day",
+      price: 90,
+      duration: "2 h",
+      ticketType: "all-access",
+      category: "Kids Day Pass"
+    },
+    {
+      id: "3",
+      title: "2hrs upgrade Unlimited",
+      description: "Family Package",
+      price: 90,
+      duration: "2 h",
+      ticketType: "all-access",
+      category: "Family Pass"
+    },
+    {
+      id: "4",
+      title: "Child Ticket - Morning",
+      description: "Special price for children",
+      price: 45,
+      duration: "4 h",
+      ticketType: "child",
+      category: "Morning Session"
+    },
+    {
+      id: "5",
+      title: "Child Ticket - Afternoon",
+      description: "Afternoon activities",
+      price: 45,
+      duration: "4 h",
+      ticketType: "child",
+      category: "Afternoon Session"
+    },
+    {
+      id: "6",
+      title: "Adult Standard",
+      description: "Standard adult admission",
+      price: 70,
+      duration: "6 h",
+      ticketType: "adult",
+      category: "Standard Admission"
+    },
+    {
+      id: "7",
+      title: "Adult Premium",
+      description: "Premium experience",
+      price: 120,
+      duration: "8 h",
+      ticketType: "adult",
+      category: "Premium Experience"
+    },
+    {
+      id: "8",
+      title: "Special Event",
+      description: "Limited time offer",
+      price: 150,
+      duration: "3 h",
+      ticketType: "category5",
+      category: "Special Event"
+    }
+  ];
+  const tabItems = [
+    {
+      key: "all-access",
+      label: `All-Access Ticket (${mockTicketData.filter((item) => item.ticketType === "all-access").length})`,
+      group: "all-access"
+    },
+    {
+      key: "child",
+      label: `Child Ticket (${mockTicketData.filter((item) => item.ticketType === "child").length})`,
+      group: "child"
+    },
+    {
+      key: "adult",
+      label: `Adult Ticket (${mockTicketData.filter((item) => item.ticketType === "adult").length})`,
+      group: "adult"
+    },
+    {
+      key: "category5",
+      label: `Category 5 (${mockTicketData.filter((item) => item.ticketType === "category5").length})`,
+      group: "category5"
+    }
+  ];
+  const [currentData] = (0, import_react.useState)(mockTicketData);
+  const [loading] = (0, import_react.useState)(false);
+  const renderTicketItem = (item, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: item.id,
+      style: {
+        background: "#FFF",
+        borderRadius: "12px",
+        padding: "16px",
+        border: "1px solid #E4E7EC",
+        boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
+        height: "160px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: {
+      height: "60px",
+      background: `linear-gradient(135deg, ${item.ticketType === "all-access" ? "#8157D5, #B794F6" : item.ticketType === "child" ? "#F56565, #FC8181" : item.ticketType === "adult" ? "#4299E1, #63B3ED" : "#ED8936, #F6AD55"})`,
+      borderRadius: "8px",
+      marginBottom: "12px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "white",
+      fontWeight: "bold",
+      fontSize: "18px"
+    } }, item.description),
+    /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", { style: {
+      fontSize: "16px",
+      fontWeight: "600",
+      margin: "0 0 4px 0",
+      color: "#101828"
+    } }, item.title), /* @__PURE__ */ import_react.default.createElement("p", { style: {
+      fontSize: "14px",
+      color: "#667085",
+      margin: "0 0 8px 0"
+    } }, item.duration), /* @__PURE__ */ import_react.default.createElement("p", { style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#101828",
+      margin: 0
+    } }, "A$ ", item.price))
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "20px", maxWidth: "1200px", margin: "0 auto" } }, /* @__PURE__ */ import_react.default.createElement("h1", { style: { marginBottom: "20px", color: "#101828" } }, "门票分组展示示例"), /* @__PURE__ */ import_react.default.createElement(
+    import__.List,
+    {
+      data: currentData,
+      tabData: tabItems,
+      tabGroup: "ticketType",
+      tabStyle: "anchor",
+      displayStyle: "grid",
+      layoutDirection: "vertical",
+      columns: 2,
+      rows: 2,
+      columnGap: 16,
+      rowGap: 16,
+      height: "600px",
+      renderItem: renderTicketItem,
+      loading,
+      emptyConfig: {
+        show: true,
+        text: "暂无门票数据",
+        description: "请稍后再试"
+      },
+      className: "ticket-list-example"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    marginTop: "20px",
+    padding: "16px",
+    background: "#F8F9FA",
+    borderRadius: "8px"
+  } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "使用说明："), /* @__PURE__ */ import_react.default.createElement("ul", null, /* @__PURE__ */ import_react.default.createElement("li", null, "通过 ", /* @__PURE__ */ import_react.default.createElement("code", null, 'tabGroup="ticketType"'), " 指定使用数据项的 ticketType 字段进行分组"), /* @__PURE__ */ import_react.default.createElement("li", null, "Tab的 group 属性值对应数据项中 ticketType 字段的值"), /* @__PURE__ */ import_react.default.createElement("li", null, "点击不同的标签页可以查看不同分组的门票"), /* @__PURE__ */ import_react.default.createElement("li", null, "数据会根据选择的分组自动过滤"), /* @__PURE__ */ import_react.default.createElement("li", null, "每个标签页显示对应分组的数量"), /* @__PURE__ */ import_react.default.createElement("li", null, "支持所有现有的List组件布局和分页模式"))));
+};
+var GroupedListExample_default = GroupedListExample;

package/lib/components/list/hooks/index.js

@@ -0,0 +1,47 @@
+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/hooks/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  getUserAgentInfo: () => import_useDevice.getUserAgentInfo,
+  useDevice: () => import_useDevice.useDevice,
+  useListState: () => import_useListState.useListState,
+  useWaterfall: () => import_useWaterfall.default
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_useDevice = require("./useDevice");
+var import_useWaterfall = __toESM(require("./useWaterfall"));
+var import_useListState = require("./useListState");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getUserAgentInfo,
+  useDevice,
+  useListState,
+  useWaterfall
+});

package/lib/components/list/hooks/useDevice.js

@@ -0,0 +1,96 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/list/hooks/useDevice.ts
+var useDevice_exports = {};
+__export(useDevice_exports, {
+  getUserAgentInfo: () => getUserAgentInfo,
+  useDevice: () => useDevice
+});
+module.exports = __toCommonJS(useDevice_exports);
+var import_react = require("react");
+var useDevice = () => {
+  const [deviceInfo, setDeviceInfo] = (0, import_react.useState)(() => {
+    const initialWidth = typeof window !== "undefined" ? window.innerWidth : 1920;
+    const initialHeight = typeof window !== "undefined" ? window.innerHeight : 1080;
+    const initialType = getDeviceType(initialWidth);
+    return {
+      type: initialType,
+      isMobile: initialType === "mobile",
+      isPad: initialType === "pad",
+      isPc: initialType === "pc",
+      width: initialWidth,
+      height: initialHeight
+    };
+  });
+  (0, import_react.useEffect)(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      const type = getDeviceType(width);
+      setDeviceInfo({
+        type,
+        isMobile: type === "mobile",
+        isPad: type === "pad",
+        isPc: type === "pc",
+        width,
+        height
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return deviceInfo;
+};
+function getDeviceType(width) {
+  if (width < 768) {
+    return "mobile";
+  } else if (width < 1200) {
+    return "pad";
+  } else {
+    return "pc";
+  }
+}
+var getUserAgentInfo = () => {
+  if (typeof window === "undefined" || !window.navigator) {
+    return {
+      isMobileUA: false,
+      isTabletUA: false,
+      isDesktopUA: true,
+      userAgent: ""
+    };
+  }
+  const userAgent = window.navigator.userAgent.toLowerCase();
+  const isMobileUA = /mobile|android|iphone|ipod|phone/.test(userAgent);
+  const isTabletUA = /tablet|ipad/.test(userAgent) && !isMobileUA;
+  const isDesktopUA = !isMobileUA && !isTabletUA;
+  return {
+    isMobileUA,
+    isTabletUA,
+    isDesktopUA,
+    userAgent
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getUserAgentInfo,
+  useDevice
+});