@pisell/private-materials 6.5.13 → 6.5.15

package/lib/components/list/components/Tab/Tab.less

@@ -0,0 +1,139 @@
+/* Tab 组件样式 */
+.pisell-tab {
+  align-self: stretch;
+  overflow: hidden;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  display: inline-flex;
+
+  .pisell-tab-item {
+    height: 40px;
+    padding-left: 16px;
+    padding-right: 16px;
+    border-radius: 88px;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+    display: flex;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    .pisell-tab-item-label {
+      font-size: 14px;
+      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      line-height: 20px;
+      word-wrap: break-word;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .pisell-tab-item-count {
+        margin-left: 4px;
+        font-weight: inherit;
+        opacity: 0.7;
+        font-size: 12px;
+      }
+
+      .pisell-tab-item-external-icon {
+        font-size: 12px;
+        opacity: 0.7;
+        margin-left: 2px;
+      }
+    }
+
+    /* 选中状态 */
+    &.pisell-tab-item-active {
+      background: #8157D5;
+
+      .pisell-tab-item-label {
+        color: white;
+        font-weight: 600 !important;
+      }
+    }
+
+    /* 未选中状态 */
+    &.pisell-tab-item-inactive {
+      background: white;
+
+      .pisell-tab-item-label {
+        color: #101828;
+        font-weight: 600 !important;
+      }
+
+      &:hover {
+        background: #f5f5f5;
+
+        .pisell-tab-item-label {
+          color: #8157D5;
+        }
+      }
+    }
+
+    /* 禁用状态 */
+    &.pisell-tab-item-disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:hover {
+        background: white;
+
+        .pisell-tab-item-label {
+          color: #101828;
+        }
+      }
+    }
+
+    /* 链接类型 tab 项 */
+    &.pisell-tab-item-link {
+      position: relative;
+
+      /* 普通链接（锚点）样式 */
+      &:not(.pisell-tab-item-external) {
+        &.pisell-tab-item-inactive {
+          .pisell-tab-item-label {
+            color: #1890ff;
+          }
+
+          &:hover {
+            .pisell-tab-item-label {
+              color: #40a9ff;
+            }
+          }
+        }
+      }
+
+      /* 外部链接样式 */
+      &.pisell-tab-item-external {
+        &.pisell-tab-item-inactive {
+          .pisell-tab-item-label {
+            color: #52c41a;
+
+            .pisell-tab-item-external-icon {
+              opacity: 0.8;
+            }
+          }
+
+          &:hover {
+            .pisell-tab-item-label {
+              color: #73d13d;
+
+              .pisell-tab-item-external-icon {
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+        &.pisell-tab-item-active {
+          .pisell-tab-item-external-icon {
+            color: white;
+            opacity: 0.9;
+          }
+        }
+      }
+    }
+  }
+
+}

package/lib/components/list/components/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Tab';
+export type { TabProps } from './types';

package/lib/components/list/components/Tab/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/Tab/index.ts
+var Tab_exports = {};
+__export(Tab_exports, {
+  default: () => import_Tab.default
+});
+module.exports = __toCommonJS(Tab_exports);
+var import_Tab = __toESM(require("./Tab"));

package/lib/components/list/components/Tab/types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TabItem } from '../../types';
+export interface TabProps {
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 当前激活的tab */
+    activeKey?: string;
+    /** tab项 */
+    items: TabItem[];
+    /** tab切换回调 */
+    onChange?: (key: string) => void;
+}

package/lib/components/list/components/Tab/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/components/Tab/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import './TabSkeleton.less';
+interface TabSkeletonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    tabCount?: number;
+    animated?: boolean;
+    tabStyle?: 'switch' | 'anchor';
+}
+declare const TabSkeleton: React.FC<TabSkeletonProps>;
+export default TabSkeleton;

package/lib/components/list/components/TabSkeleton/TabSkeleton.js

@@ -0,0 +1,61 @@
+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/TabSkeleton/TabSkeleton.tsx
+var TabSkeleton_exports = {};
+__export(TabSkeleton_exports, {
+  default: () => TabSkeleton_default
+});
+module.exports = __toCommonJS(TabSkeleton_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_TabSkeleton = require("./TabSkeleton.less");
+var TabSkeleton = ({
+  className,
+  style,
+  tabCount = 4,
+  animated = true,
+  tabStyle = "switch"
+}) => {
+  const containerClass = (0, import_classnames.default)(
+    "pisell-list-tab-skeleton",
+    `pisell-list-tab-skeleton--${tabStyle}`,
+    {
+      "pisell-list-tab-skeleton--animated": animated
+    },
+    className
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: containerClass, style }, Array.from({ length: tabCount }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      key: index,
+      className: "pisell-list-tab-skeleton__item"
+    }
+  )));
+};
+var TabSkeleton_default = TabSkeleton;

package/lib/components/list/components/TabSkeleton/TabSkeleton.less

@@ -0,0 +1,38 @@
+.pisell-list-tab-skeleton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0;
+
+  &__item {
+    height: 40px;
+    width: 110px;
+    background: linear-gradient(
+      90deg,
+      #f0f0f0 25%,
+      #e0e0e0 50%,
+      #f0f0f0 75%
+    );
+    background-size: 200% 100%;
+    border-radius: 20px;
+  }
+
+  &--animated &__item {
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+  }
+
+  &--anchor &__item {
+    height: 36px;
+    border-radius: 6px;
+  }
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+

package/lib/components/list/components/TabSkeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TabSkeleton';
+export { default as TabSkeleton } from './TabSkeleton';

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

@@ -0,0 +1,41 @@
+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/TabSkeleton/index.ts
+var TabSkeleton_exports = {};
+__export(TabSkeleton_exports, {
+  TabSkeleton: () => import_TabSkeleton2.default,
+  default: () => import_TabSkeleton.default
+});
+module.exports = __toCommonJS(TabSkeleton_exports);
+var import_TabSkeleton = __toESM(require("./TabSkeleton"));
+var import_TabSkeleton2 = __toESM(require("./TabSkeleton"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabSkeleton
+});

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

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { WaterfallLayout } from '../../hooks/useWaterfall';
+import './WaterfallList.less';
+export interface WaterfallListProps<TItem extends {
+    id: string | number;
+    height?: number;
+    width?: number;
+} = any> {
+    /** 瀑布流布局数据 */
+    layout: WaterfallLayout<TItem>;
+    /** 布局方向 */
+    layoutDirection: 'horizontal' | 'vertical';
+    /** 列间距 */
+    columnGap: number;
+    /** 行间距 */
+    rowGap: number;
+    /** 列数 */
+    columns: number;
+    /** 行数 */
+    rows: number;
+    /** 注册元素引用的函数 */
+    registerItemRef: (id: string | number, element: HTMLElement | null) => void;
+    /** 子元素 */
+    children?: ReactNode;
+    /** 自定义渲染函数 */
+    renderItem?: (item: TItem, index: number) => ReactNode;
+}
+declare const WaterfallList: <TItem extends {
+    id: string | number;
+    height?: number | undefined;
+    width?: number | undefined;
+} = any>(props: WaterfallListProps<TItem>) => React.ReactElement;
+export default WaterfallList;

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

@@ -0,0 +1,178 @@
+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/WaterfallList.tsx
+var WaterfallList_exports = {};
+__export(WaterfallList_exports, {
+  default: () => WaterfallList_default
+});
+module.exports = __toCommonJS(WaterfallList_exports);
+var import_react = __toESM(require("react"));
+var import_WaterfallList = require("./WaterfallList.less");
+var WaterfallList = (props) => {
+  const {
+    layout,
+    layoutDirection,
+    columnGap,
+    rowGap,
+    columns,
+    rows,
+    registerItemRef,
+    children,
+    renderItem
+  } = props;
+  const hasChildren = children && import_react.default.Children.count(children) > 0;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "waterfall-container",
+      style: {
+        display: "flex",
+        // 垂直模式：轨道间距用列间距，水平模式：轨道间距用行间距
+        gap: layoutDirection === "vertical" ? `${columnGap}px` : `${rowGap}px`,
+        width: "100%",
+        flexDirection: layoutDirection === "vertical" ? "row" : "column",
+        // 垂直模式时轨道横向排列，水平模式时轨道纵向排列
+        alignItems: "flex-start",
+        // 防止瀑布流列被拉伸到相同高度
+        // 水平模式下需要足够的高度来容纳多行
+        ...layoutDirection === "horizontal" && {
+          minHeight: "fit-content",
+          height: "auto"
+        }
+      }
+    },
+    false,
+    layout.tracks.map((track, trackIndex) => {
+      let globalIndex = 0;
+      for (let i = 0; i < trackIndex; i++) {
+        globalIndex += layout.tracks[i].items.length;
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: trackIndex,
+          className: `waterfall-track waterfall-track-${layoutDirection}`,
+          style: {
+            // 垂直模式：每列等宽不收缩，水平模式：每行自适应高度
+            flex: layoutDirection === "vertical" ? "1 0 0" : "0 0 auto",
+            display: "flex",
+            flexDirection: layoutDirection === "vertical" ? "column" : "row",
+            // 垂直模式时轨道内垂直排列，水平模式时轨道内水平排列
+            // 垂直模式：轨道内用行间距，水平模式：轨道内用列间距
+            gap: layoutDirection === "vertical" ? `${rowGap}px` : `${columnGap}px`,
+            // 水平模式下的额外样式
+            ...layoutDirection === "horizontal" && {
+              width: "100%",
+              minHeight: "120px",
+              // 确保行有最小高度
+              alignItems: "flex-start"
+            }
+          }
+        },
+        track.items.map((item, trackItemIndex) => {
+          const itemIndex = globalIndex + trackItemIndex;
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: item.id || `${trackIndex}-${trackItemIndex}`,
+              className: "list-item waterfall-item",
+              ref: (el) => registerItemRef(item.id || `${trackIndex}-${trackItemIndex}`, el),
+              style: {
+                // 根据布局方向设置尺寸约束 - 应用到容器上
+                ...layoutDirection === "vertical" ? {
+                  width: "100%",
+                  height: item.height ? `${item.height}px` : "auto",
+                  minHeight: "unset",
+                  maxHeight: "none",
+                  flexShrink: 0,
+                  flexGrow: 0,
+                  boxSizing: "border-box",
+                  overflow: "hidden",
+                  // 防止内容溢出
+                  position: "relative"
+                  // 为调试信息定位
+                } : {
+                  width: item.width ? `${item.width}px` : "auto",
+                  flexShrink: 0
+                  // 水平模式：保持预设宽度，不收缩
+                }
+              }
+            },
+            false,
+            hasChildren ? 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: `${item.id || `${trackIndex}-${trackItemIndex}`}-${childIndex}`
+                });
+              }
+              return child;
+            }) : renderItem ? renderItem(item, itemIndex) : (
+              // 瀑布流的默认渲染 - 高度由容器控制
+              /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: "default-waterfall-item",
+                  style: {
+                    // 内容样式，高度由外部容器控制
+                    ...layoutDirection === "horizontal" && {
+                      width: item.width ? `${item.width}px` : "200px",
+                      minHeight: "120px",
+                      flexShrink: 0
+                    },
+                    padding: "16px",
+                    backgroundColor: "#fff",
+                    borderRadius: "8px",
+                    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                    border: "1px solid #f0f0f0",
+                    display: "flex",
+                    flexDirection: "column",
+                    // 调试用：显示实际高度
+                    position: "relative",
+                    // 填充容器高度
+                    height: "100%",
+                    boxSizing: "border-box"
+                  }
+                },
+                item.title && /* @__PURE__ */ import_react.default.createElement("h3", { style: { margin: "0 0 12px 0", fontSize: "16px", fontWeight: 500, color: "#333" } }, item.title),
+                item.name && !item.title && /* @__PURE__ */ import_react.default.createElement("h3", { style: { margin: "0 0 12px 0", fontSize: "16px", fontWeight: 500, color: "#333" } }, item.name),
+                item.content && /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: 0, fontSize: "14px", lineHeight: "1.5", color: "#666" } }, item.content),
+                item.description && !item.content && /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: 0, fontSize: "14px", lineHeight: "1.5", color: "#666" } }, item.description),
+                !item.title && !item.name && !item.content && !item.description && /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: "14px", color: "#999", wordBreak: "break-all" } }, typeof item === "object" ? Object.entries(item).slice(0, 3).map(([key, value]) => /* @__PURE__ */ import_react.default.createElement("div", { key, style: { marginBottom: "4px" } }, /* @__PURE__ */ import_react.default.createElement("strong", null, key, ":"), " ", String(value))) : String(item))
+              )
+            )
+          );
+        })
+      );
+    })
+  );
+};
+var WaterfallList_default = WaterfallList;