@pisell/private-materials 6.4.61 → 6.4.63

package/es/components/list/styles/content.less

@@ -1,416 +0,0 @@
-/* 内容区域样式 */
-
-.list-content {
-  flex: 1;
-  min-height: 0;
-  position: relative; /* 为悬浮按钮提供定位参考 */
-
-  /* 垂直排版时的特殊处理 */
-  &.list-content-vertical {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto; /* 垂直排版时开启滚动 */
-    overflow-x: hidden;
-
-    .list-items {
-      padding: 12px; /* 列表项目的内边距 */
-      flex: 1;
-    }
-  }
-
-  /* 水平排版时保持原有样式 */
-  &.list-content-horizontal {
-    padding: 16px;
-  }
-
-  &.list-content-scroll {
-    overflow-y: auto;
-  }
-
-  .list-items {
-    width: 100%;
-
-    .list-item {
-      min-width: 0;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-      &:hover {
-        transform: translateY(0);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-      }
-
-      .default-item {
-        padding: 12px;
-        background: #fafafa;
-        border-radius: 4px;
-        border: 1px solid #f0f0f0;
-        min-height: 60px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #666;
-      }
-
-      /* 卡片式布局 */
-      .card-item {
-        display: flex;
-        background: #fff;
-        border-radius: 12px;
-        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-        overflow: hidden;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        border: 1px solid rgba(0, 0, 0, 0.06);
-
-        &:hover {
-          transform: translateY(-2px) scale(1.01);
-          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
-
-          .card-image {
-            &::before {
-              opacity: 0.8;
-            }
-          }
-
-          .card-content {
-            .card-title {
-              color: #0066cc;
-            }
-          }
-        }
-
-        &:active {
-          transform: translateY(0) scale(0.98);
-          transition-duration: 0.1s;
-        }
-
-        .card-image {
-          position: relative;
-          width: 140px;
-          height: 100px;
-          flex-shrink: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: #fff;
-          font-weight: 600;
-          overflow: hidden;
-
-          &.gradient-pink {
-            background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
-          }
-
-          &.gradient-blue {
-            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-          }
-
-          &.gradient-green {
-            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-          }
-
-          &.gradient-orange {
-            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-          }
-
-          &.gradient-purple {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          }
-
-          &.gradient-teal {
-            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-          }
-
-          .image-text {
-            font-size: 24px;
-            font-weight: 700;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-            z-index: 2;
-
-            .subtitle {
-              font-size: 14px;
-              font-weight: 500;
-              opacity: 0.9;
-              display: block;
-              margin-top: 2px;
-            }
-          }
-
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="90" cy="20" r="0.5" fill="white" opacity="0.1"/><circle cx="30" cy="90" r="1.5" fill="white" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
-            opacity: 0.6;
-            z-index: 1;
-          }
-        }
-
-        .card-content {
-          flex: 1;
-          padding: 16px 20px;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          min-height: 100px;
-
-          .card-header {
-            margin-bottom: 8px;
-
-            .card-title {
-              font-size: 16px;
-              font-weight: 600;
-              color: #1a1a1a;
-              margin: 0 0 4px 0;
-              line-height: 1.3;
-            }
-
-            .card-subtitle {
-              font-size: 14px;
-              color: #666;
-              margin: 0;
-              display: flex;
-              align-items: center;
-              gap: 4px;
-
-              .duration-icon {
-                width: 16px;
-                height: 16px;
-                opacity: 0.6;
-              }
-            }
-          }
-
-          .card-footer {
-            display: flex;
-            align-items: flex-end;
-            justify-content: space-between;
-            margin-top: auto;
-
-            .card-price {
-              .price-main {
-                font-size: 20px;
-                font-weight: 700;
-                color: #1a1a1a;
-                margin: 0;
-              }
-
-              .price-original {
-                font-size: 14px;
-                color: #999;
-                text-decoration: line-through;
-                margin-left: 8px;
-              }
-
-              .price-unit {
-                font-size: 12px;
-                color: #666;
-                margin-top: 2px;
-              }
-
-              .price-offer {
-                background: #ff4757;
-                color: #fff;
-                padding: 2px 6px;
-                border-radius: 4px;
-                font-size: 12px;
-                margin-top: 4px;
-                display: inline-block;
-              }
-            }
-
-            .card-badge {
-              background: #ffeaa7;
-              color: #d63031;
-              padding: 4px 8px;
-              border-radius: 6px;
-              font-size: 12px;
-              font-weight: 500;
-              display: flex;
-              align-items: center;
-              gap: 4px;
-
-              &.warning {
-                background: #ffb8b8;
-                color: #d63031;
-              }
-
-              .badge-icon {
-                width: 14px;
-                height: 14px;
-              }
-            }
-          }
-
-          .card-tags {
-            display: flex;
-            gap: 6px;
-            margin: 8px 0;
-            flex-wrap: wrap;
-
-            .tag {
-              background: #f1f3f4;
-              color: #5f6368;
-              padding: 2px 8px;
-              border-radius: 12px;
-              font-size: 12px;
-              font-weight: 500;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  /* 栅格布局样式 */
-  &.list-content-grid {
-    .list-items {
-      display: grid;
-
-      .list-item {
-        width: 100%;
-        height: fit-content;
-      }
-    }
-
-    /* 水平滚动时的加载提示项已取消 */
-  }
-
-  /* 瀑布流布局样式已移至 WaterfallList 组件 */
-  &.list-content-waterfall {
-    /* 根据布局方向设置滚动方向 */
-    &.list-content-vertical {
-      /* 垂直布局：垂直滚动 */
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-
-    &.list-content-horizontal {
-      /* 水平布局：水平滚动 */
-      overflow-x: auto;
-      overflow-y: visible; /* 允许垂直方向显示多行 */
-    }
-
-    .list-items {
-      /* 覆盖grid等其他布局样式 */
-      display: block;
-    }
-  }
-
-  /* 垂直排版样式 - 影响所有显示样式 */
-  &.list-content-vertical {
-    /* 垂直排版时，允许垂直滚动 */
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    &.list-content-grid {
-      .list-items {
-        grid-auto-flow: row;
-      }
-    }
-  }
-
-  /* 水平排版样式 - 影响所有显示样式 */
-  &.list-content-horizontal {
-    /* 水平排版时，允许水平滚动 */
-    overflow-x: auto;
-    overflow-y: hidden;
-
-    &.list-content-grid {
-      .list-items {
-        grid-auto-flow: column;
-      }
-    }
-  }
-
-  /* 滚动加载样式已移至 ScrollLoader 组件 */
-
-  /* 保留原有的list-loading样式，供非scroll模式使用 */
-  .list-loading {
-    text-align: center;
-    padding: 24px 16px;
-    color: #666;
-    font-size: 14px;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 8px;
-    margin: 16px 0;
-
-    &::before {
-      content: '';
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      margin-right: 8px;
-      border: 2px solid #f3f3f3;
-      border-top: 2px solid #1890ff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-
-    .loading-info {
-      font-size: 12px;
-      color: #999;
-      margin-top: 8px;
-      opacity: 0.8;
-    }
-
-    &.no-more {
-      color: #999;
-      background: rgba(0, 0, 0, 0.02);
-      border: 1px dashed #ddd;
-
-      &::before {
-        display: none;
-      }
-
-      &::after {
-        content: '✓';
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        margin-right: 8px;
-        background: #52c41a;
-        color: #fff;
-        border-radius: 50%;
-        font-size: 12px;
-        line-height: 20px;
-        text-align: center;
-      }
-    }
-  }
-
-  /* spin 动画已移至 ScrollLoader 组件 */
-}
-
-/* 分组标题样式 */
-.pisell-list-group-title {
-  margin: 24px 0 16px 0;
-  padding: 0;
-
-  &:first-child {
-    margin-top: 0; /* 第一个分组标题顶部不需要额外间距 */
-  }
-
-  .pisell-list-group-title-text {
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 32px;
-    color: #101828;
-    margin: 0;
-    padding: 0;
-    /* 与设计保持一致 */
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  }
-}
-
-/* 分组项容器 */
-.list-group-items {
-  /* 继承父级的grid样式，但在这里可以单独调整 */
-  width: 100%;
-
-  /* 每个分组之间的间距 */
-  &:not(:last-child) {
-    margin-bottom: 24px;
-  }
-}

package/es/components/list/styles/floatButton.less

@@ -1,107 +0,0 @@
-/* 悬浮滚动按钮样式 */
-
-.list-scroll-float-button {
-  pointer-events: none; /* 让容器不拦截点击事件 */
-
-  /* 悬浮滚动按钮 */
-  .scroll-down-button {
-    pointer-events: auto; /* 恢复按钮的点击事件 */
-    user-select: none;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  /* 悬浮暂停按钮 */
-  .scroll-pause-button {
-    pointer-events: auto; /* 恢复按钮的点击事件 */
-    user-select: none;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  /* 添加淡入动画 */
-  animation: fadeInUp 0.3s ease-out;
-}
-
-/* 垂直滚动模式：按钮在底部居中 */
-.pisell-list-vertical {
-  .list-scroll-float-button {
-    /* 不设置容器的定位，让按钮通过内联样式自由定位 */
-
-    .scroll-down-button {
-      /* 悬停效果 - 垂直模式 */
-      &:hover {
-        transform: translateX(-50%) translateY(-2px) scale(1.05);
-        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
-        background: rgba(255, 255, 255, 0.85);
-      }
-
-      /* 按下效果 - 垂直模式 */
-      &:active {
-        transform: translateX(-50%) translateY(1px) scale(0.98);
-        transition-duration: 0.1s;
-      }
-    }
-
-    .scroll-pause-button {
-      /* 悬停效果 - 垂直模式 */
-      &:hover {
-        transform: translateX(-50%) translateY(-2px) scale(1.05);
-        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
-        background: rgba(255, 255, 255, 0.85);
-      }
-
-      /* 按下效果 - 垂直模式 */
-      &:active {
-        transform: translateX(-50%) translateY(1px) scale(0.98);
-        transition-duration: 0.1s;
-      }
-    }
-  }
-}
-
-/* 水平滚动模式：按钮在右侧垂直居中 */
-.pisell-list-horizontal {
-  .list-scroll-float-button {
-    /* 不设置容器的定位，让按钮通过内联样式自由定位 */
-
-    .scroll-down-button {
-      /* 悬停效果 - 水平模式 */
-      &:hover {
-        transform: translateY(-50%) translateX(-2px) scale(1.05);
-        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
-        background: rgba(255, 255, 255, 0.85);
-      }
-
-      /* 按下效果 - 水平模式 */
-      &:active {
-        transform: translateY(-50%) translateX(1px) scale(0.98);
-        transition-duration: 0.1s;
-      }
-    }
-
-    .scroll-pause-button {
-      /* 悬停效果 - 水平模式 */
-      &:hover {
-        transform: translateY(-50%) translateX(-2px) scale(1.05);
-        box-shadow: 0px 8px 16px -4px rgba(16, 24, 40, 0.1);
-        background: rgba(255, 255, 255, 0.85);
-      }
-
-      /* 按下效果 - 水平模式 */
-      &:active {
-        transform: translateY(-50%) translateX(1px) scale(0.98);
-        transition-duration: 0.1s;
-      }
-    }
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

package/es/components/list/styles/footer.less

@@ -1,49 +0,0 @@
-/* 底部工具栏样式 */
-
-.list-footer {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(8px);
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-  padding: 12px 16px;
-  display: flex;
-  justify-content: stretch; /* 让分页组件使用自己的布局 */
-  align-items: center;
-  border-radius: 0 0 8px 8px;
-
-  /* 为分页组件提供完整宽度 */
-  .pisell-pagination {
-    width: 100%;
-  }
-
-  .ant-btn {
-    min-width: 120px;
-    border-radius: 8px;
-    height: 40px;
-    font-weight: 500;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
-    }
-
-    /* 查看更少按钮样式 */
-    &.view-less-btn {
-      background-color: #f0f2f5;
-      border-color: #d9d9d9;
-      color: #666;
-
-      &:hover {
-        background-color: #e6f7ff;
-        border-color: #91d5ff;
-        color: #1890ff;
-        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
-      }
-
-      &:active {
-        background-color: #bae7ff;
-        border-color: #40a9ff;
-      }
-    }
-  }
-}

package/es/components/list/styles/header.less

@@ -1,69 +0,0 @@
-/* 头部Tab栏样式 */
-
-.pisell-list-header {
-  padding: 16px;
-
-  &.pisell-list-header-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    /* 毛玻璃效果 */
-    background: rgba(255, 255, 255, 0.80);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid #D0D5DD;
-    padding-bottom: 12px;
-    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-    /* 平滑过渡效果 */
-    transition: box-shadow 0.2s ease, backdrop-filter 0.2s ease, background 0.2s ease;
-
-    /* 当sticky生效时的增强视觉效果 */
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: -1px;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-
-    /* 滚动时激活视觉效果 */
-    &.sticky-active::after {
-      opacity: 1;
-    }
-  }
-
-  .pisell-list-tabs {
-    &.pisell-list-tabs-anchor,
-    &.pisell-list-tabs-switch {
-      /* 自定义Tab样式已经在Tab组件中定义，这里保持干净 */
-      position: relative;
-    }
-  }
-
-}
-
-/* 垂直排版时header在内部的样式 */
-.list-content-vertical {
-  .pisell-list-header {
-    flex-shrink: 0; /* 防止被压缩 */
-    margin-bottom: 0; /* 去除默认间距 */
-
-    /* sticky 效果：相对于 list-content 滚动容器 */
-    &.pisell-list-header-sticky {
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      /* 毛玻璃效果 */
-      background: rgba(255, 255, 255, 0.80);
-      backdrop-filter: blur(12px);
-      border-bottom: 1px solid #D0D5DD;
-      padding-bottom: 12px;
-      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-      transition: box-shadow 0.2s ease, backdrop-filter 0.2s ease, background 0.2s ease;
-    }
-
-  }
-}