@pisell/private-materials 6.5.12 → 6.5.14

package/es/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/es/components/list/components/Pagination/index.d.ts

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

package/es/components/list/components/Pagination/index.js

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

package/es/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/es/components/list/components/ScrollLoader/ScrollLoader.js

@@ -0,0 +1,18 @@
+import "./ScrollLoader.less";
+var ScrollLoader = function ScrollLoader(_ref) {
+  var _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    scrollLoadState = _ref.scrollLoadState,
+    _ref$layoutDirection = _ref.layoutDirection,
+    layoutDirection = _ref$layoutDirection === void 0 ? 'vertical' : _ref$layoutDirection,
+    _ref$paginationType = _ref.paginationType,
+    paginationType = _ref$paginationType === void 0 ? 'all' : _ref$paginationType;
+  // 只在滚动加载模式下显示
+  if (paginationType !== 'scroll') {
+    return null;
+  }
+
+  // list-loading-item 组件已取消
+  return null;
+};
+export default ScrollLoader;

package/es/components/list/components/ScrollLoader/ScrollLoader.less

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

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

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

package/es/components/list/components/ScrollLoader/index.js

@@ -0,0 +1 @@
+export { default } from "./ScrollLoader";

package/es/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/es/components/list/components/Tab/Tab.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import "./Tab.less";
+var Tab = function Tab(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$activeKey = _ref.activeKey,
+    activeKey = _ref$activeKey === void 0 ? '' : _ref$activeKey,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    onChange = _ref.onChange;
+  var handleTabClick = function handleTabClick(item) {
+    if (item.disabled) {
+      return;
+    }
+
+    // Tab切换
+    if (item.key !== activeKey) {
+      onChange === null || onChange === void 0 || onChange(item.key);
+    }
+  };
+
+  // 渲染单个tab项
+  var renderTabItem = function renderTabItem(item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: "pisell-tab-item ".concat(activeKey === item.key ? 'pisell-tab-item-active' : 'pisell-tab-item-inactive', " ").concat(item.disabled ? 'pisell-tab-item-disabled' : ''),
+      onClick: function onClick() {
+        return handleTabClick(item);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-tab-item-label"
+    }, item.label));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-tab ".concat(className),
+    style: style
+  }, items.map(function (item) {
+    return renderTabItem(item);
+  }));
+};
+export default Tab;

package/es/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/es/components/list/components/Tab/index.d.ts

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

package/es/components/list/components/Tab/index.js

@@ -0,0 +1 @@
+export { default } from "./Tab";

package/es/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/es/components/list/components/Tab/types.js

@@ -0,0 +1 @@
+export {};