@pisell/private-materials 6.5.12 → 6.5.14

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

@@ -0,0 +1,415 @@
+/* 内容区域样式 */
+
+.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 {
+      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/lib/components/list/styles/floatButton.less

@@ -0,0 +1,107 @@
+/* 悬浮滚动按钮样式 */
+
+.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/lib/components/list/styles/footer.less

@@ -0,0 +1,49 @@
+/* 底部工具栏样式 */
+
+.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/lib/components/list/styles/header.less

@@ -0,0 +1,69 @@
+/* 头部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;
+    }
+
+  }
+}