@pisell/private-materials 6.5.13 → 6.5.14

package/lib/components/list/components/Pagination/Pagination.less

@@ -0,0 +1,439 @@
+/* 全新分页器样式 - 严格按照UI图片设计 */
+.pisell-pagination {
+  /* 主容器flex布局 */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* 左侧页码信息组件 */
+  .pagination-info {
+    /* Detail 组件样式 */
+    color: #344054;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    word-wrap: break-word;
+    flex-shrink: 0; /* 防止压缩 */
+  }
+
+  /* 右侧操作栏 */
+  .pagination-controls {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 24px;
+    flex-shrink: 0; /* 防止压缩 */
+  }
+
+  /* 分页控件组 */
+  .pagination-group {
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+    overflow: hidden;
+    border-radius: 8px;
+    outline: 1px #D0D5DD solid;
+    outline-offset: -1px;
+    justify-content: flex-start;
+    align-items: center; /* 修复垂直对齐 */
+    display: flex;
+    height: 40px; /* 确保容器高度一致 */
+  }
+
+  /* Previous 按钮 */
+  .pagination-prev {
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background: white;
+    border: none;
+    border-right: 1px #D0D5DD solid;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    display: flex;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    height: 40px; /* 明确设置高度 */
+    box-sizing: border-box;
+    vertical-align: top; /* 确保垂直对齐 */
+
+    span {
+      color: #344054;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      word-wrap: break-word;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      span {
+        color: #98A2B3;
+      }
+    }
+
+    &:hover:not(.disabled) {
+      background-color: #F9FAFB;
+    }
+  }
+
+  /* 页码按钮 */
+  .pagination-page {
+    width: 40px;
+    height: 40px; /* 明确设置高度 */
+    padding: 10px;
+    background: white;
+    border: none;
+    border-right: 1px #D0D5DD solid;
+    outline: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    box-sizing: border-box;
+    vertical-align: top; /* 确保垂直对齐 */
+
+    color: #344054;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    word-wrap: break-word;
+
+    &:hover:not(.active):not(:disabled) {
+      background-color: #F9FAFB;
+    }
+
+    &.active {
+      background: #F9FAFB;
+
+      color: #1D2939;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      word-wrap: break-word;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  /* 省略号 */
+  .pagination-ellipsis {
+    width: 40px;
+    height: 40px; /* 明确设置高度 */
+    padding: 10px;
+    background: white;
+    border: none;
+    border-right: 1px #D0D5DD solid;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    box-sizing: border-box;
+    vertical-align: top; /* 确保垂直对齐 */
+
+    span {
+      color: #344054;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      word-wrap: break-word;
+    }
+  }
+
+  /* Next 按钮 */
+  .pagination-next {
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background: white;
+    border: none;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    display: flex;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+    height: 40px; /* 明确设置高度 */
+    box-sizing: border-box;
+    vertical-align: top; /* 确保垂直对齐 */
+
+    span {
+      color: #344054;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 20px;
+      word-wrap: break-word;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      span {
+        color: #98A2B3;
+      }
+    }
+
+    &:hover:not(.disabled) {
+      background-color: #F9FAFB;
+    }
+  }
+
+  /* 每页条数选择器 */
+  .pagination-size-selector {
+    width: 88px;
+    height: 40px; /* 确保容器高度一致 */
+    display: flex;
+    align-items: center; /* 垂直居中对齐 */
+
+    .ant-select {
+      width: 100%;
+      height: 40px; /* 确保select高度一致 */
+
+      .ant-select-selector {
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-top: 0; /* 移除上下padding，使用flex居中 */
+        padding-bottom: 0;
+        background: white;
+        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+        overflow: hidden;
+        border-radius: 8px;
+        outline: 1px #D0D5DD solid;
+        outline-offset: -1px;
+        border: none;
+        height: 40px; /* 明确设置高度与分页按钮一致 */
+        min-height: 40px;
+        max-height: 40px; /* 防止高度超出 */
+        justify-content: space-between; /* 左右分布 */
+        align-items: center; /* 垂直居中 */
+        gap: 8px;
+        display: flex;
+        box-sizing: border-box; /* 确保padding包含在高度内 */
+
+        .ant-select-selection-item {
+          flex: 1 1 0;
+          color: #344054;
+          font-size: 14px;
+          font-family: 'Inter', sans-serif;
+          font-weight: 600;
+          line-height: 1; /* 使用相对行高确保垂直居中 */
+          word-wrap: break-word;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          align-items: center; /* 文字垂直居中 */
+        }
+
+        .ant-select-selection-placeholder {
+          color: #344054;
+          font-size: 14px;
+          font-family: 'Inter', sans-serif;
+          font-weight: 600;
+          line-height: 1; /* 使用相对行高 */
+          display: flex;
+          align-items: center; /* placeholder文字垂直居中 */
+        }
+
+        .ant-select-selection-search {
+          display: flex;
+          align-items: center; /* 搜索框垂直居中 */
+          height: 100%;
+
+          .ant-select-selection-search-input {
+            height: 100%;
+            line-height: 1;
+            padding: 0;
+            margin: 0;
+            font-size: 14px;
+            font-family: 'Inter', sans-serif;
+            font-weight: 600;
+          }
+        }
+      }
+
+      &:hover .ant-select-selector {
+        outline-color: #1890ff;
+        background-color: #F9FAFB;
+      }
+
+      &.ant-select-focused .ant-select-selector {
+        outline-color: #1890ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      }
+
+      &.ant-select-open .ant-select-selector {
+        outline-color: #1890ff;
+      }
+
+      .ant-select-arrow {
+        right: 16px;
+        color: #344054;
+        font-size: 12px;
+        margin-top: 0;
+        top: 50%; /* 垂直居中定位 */
+        transform: translateY(-50%); /* 垂直居中 */
+        display: flex;
+        align-items: center; /* 确保图标垂直居中 */
+        justify-content: center;
+
+        .anticon {
+          display: none;
+        }
+      }
+    }
+
+    /* 下拉菜单样式 */
+    .ant-select-dropdown {
+      border-radius: 8px;
+      border: 1px solid #D0D5DD;
+      box-shadow: 0px 4px 6px rgba(16, 24, 40, 0.1);
+      padding: 4px;
+      background: white;
+
+      .ant-select-item {
+        border-radius: 6px;
+        margin: 2px 0;
+        padding: 8px 12px;
+        color: #344054;
+        font-size: 14px;
+        font-family: 'Inter', sans-serif;
+        font-weight: 500;
+        line-height: 20px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          background-color: #F9FAFB;
+          color: #1D2939;
+        }
+
+        &.ant-select-item-option-selected {
+          background-color: #1890ff;
+          color: white;
+          font-weight: 600;
+        }
+
+        &.ant-select-item-option-active {
+          background-color: #F9FAFB;
+        }
+      }
+    }
+  }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .pisell-pagination {
+    /* 移动端保持左右布局，但调整间距 */
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+
+    .pagination-info {
+      /* 移动端文字样式保持一致 */
+      color: #344054;
+      font-size: 13px;
+    }
+
+    .pagination-controls {
+      justify-content: flex-end;
+      gap: 16px;
+    }
+
+    .pagination-group {
+      flex: 1;
+      justify-content: center;
+    }
+
+    .pagination-prev,
+    .pagination-next {
+      padding: 8px 12px;
+
+      span {
+        font-size: 13px;
+      }
+    }
+
+    .pagination-page {
+      width: 36px;
+      padding: 8px;
+
+      font-size: 13px;
+    }
+
+    .pagination-ellipsis {
+      width: 36px;
+      padding: 8px;
+
+      span {
+        font-size: 13px;
+      }
+    }
+
+    .pagination-size-selector {
+      width: 80px;
+
+      .ant-select .ant-select-selector {
+        padding: 8px 12px;
+        min-height: 36px;
+
+        .ant-select-selection-item {
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .pisell-pagination {
+    /* 极小屏幕可能需要垂直布局 */
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+
+    .pagination-info {
+      text-align: center;
+      font-size: 12px;
+    }
+
+    .pagination-controls {
+      justify-content: center;
+      gap: 12px;
+    }
+
+    .pagination-prev span,
+    .pagination-next span {
+      display: none;
+    }
+
+    .pagination-prev,
+    .pagination-next {
+      padding: 8px;
+      min-width: 36px;
+    }
+
+    .pagination-size-selector {
+      width: 70px;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export { default } from './Pagination';

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import './ScrollLoader.less';
+export interface ScrollLoadState {
+    canLoadMore: boolean;
+    totalLoaded: number;
+}
+export interface ScrollLoaderProps {
+    /** 是否正在加载 */
+    loading: boolean;
+    /** 滚动加载状态 */
+    scrollLoadState?: ScrollLoadState | null;
+    /** 布局方向 */
+    layoutDirection: 'horizontal' | 'vertical';
+    /** 分页类型 */
+    paginationType: 'all' | 'scroll' | 'pager' | 'more';
+}
+declare const ScrollLoader: React.FC<ScrollLoaderProps>;
+export default ScrollLoader;

package/lib/components/list/components/ScrollLoader/ScrollLoader.js

@@ -0,0 +1,37 @@
+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/components/ScrollLoader/ScrollLoader.tsx
+var ScrollLoader_exports = {};
+__export(ScrollLoader_exports, {
+  default: () => ScrollLoader_default
+});
+module.exports = __toCommonJS(ScrollLoader_exports);
+var import_ScrollLoader = require("./ScrollLoader.less");
+var ScrollLoader = ({
+  loading = false,
+  scrollLoadState,
+  layoutDirection = "vertical",
+  paginationType = "all"
+}) => {
+  if (paginationType !== "scroll") {
+    return null;
+  }
+  return null;
+};
+var ScrollLoader_default = ScrollLoader;

package/lib/components/list/components/ScrollLoader/ScrollLoader.less

@@ -0,0 +1,3 @@
+/* ScrollLoader 组件样式 */
+
+/* list-loading-item 组件已取消 */

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

@@ -0,0 +1,2 @@
+export { default } from './ScrollLoader';
+export type { ScrollLoaderProps, ScrollLoadState } from './ScrollLoader';

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import './Tab.less';
+import { TabProps } from './types';
+declare const Tab: React.FC<TabProps>;
+export default Tab;

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

@@ -0,0 +1,72 @@
+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/Tab.tsx
+var Tab_exports = {};
+__export(Tab_exports, {
+  default: () => Tab_default
+});
+module.exports = __toCommonJS(Tab_exports);
+var import_react = __toESM(require("react"));
+var import_Tab = require("./Tab.less");
+var Tab = ({
+  className = "",
+  style = {},
+  activeKey = "",
+  items = [],
+  onChange
+}) => {
+  const handleTabClick = (item) => {
+    if (item.disabled) {
+      return;
+    }
+    if (item.key !== activeKey) {
+      onChange == null ? void 0 : onChange(item.key);
+    }
+  };
+  const renderTabItem = (item) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: item.key,
+        className: `pisell-tab-item ${activeKey === item.key ? "pisell-tab-item-active" : "pisell-tab-item-inactive"} ${item.disabled ? "pisell-tab-item-disabled" : ""}`,
+        onClick: () => handleTabClick(item)
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-tab-item-label" }, item.label)
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-tab ${className}`,
+      style
+    },
+    items.map((item) => renderTabItem(item))
+  );
+};
+var Tab_default = Tab;