mall-components 1.0.0

package/build/_components-raw.css

@@ -0,0 +1,791 @@
+/* src/components/ProductList/ProductList.scss */
+.mall-product-list {
+  background: #f5f7fa;
+  padding: 16px;
+  border-radius: 8px;
+  min-height: 100%;
+  .mall-product-list-filter {
+    margin-bottom: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    .ant-card-body {
+      padding: 20px;
+    }
+    .ant-input-affix-wrapper {
+      border-radius: 6px;
+      transition: all 0.3s ease;
+      &:hover,
+      &:focus {
+        border-color: #40a9ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+      }
+    }
+    .ant-btn {
+      border-radius: 6px;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+      &:active {
+        transform: translateY(0);
+      }
+    }
+  }
+  .mall-product-list-action {
+    margin-bottom: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    .ant-card-body {
+      padding: 16px 20px;
+    }
+    .ant-btn {
+      border-radius: 6px;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+    }
+    .ant-select {
+      .ant-select-selector {
+        border-radius: 6px;
+        transition: all 0.3s ease;
+        &:hover {
+          border-color: #40a9ff;
+        }
+      }
+    }
+  }
+  .mall-product-list-table {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    .ant-table-thead > tr > th {
+      background:
+        linear-gradient(
+          135deg,
+          #667eea 0%,
+          #764ba2 100%);
+      color: #fff;
+      font-weight: 600;
+      font-size: 14px;
+      padding: 16px;
+      border-bottom: none;
+      &::before {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+    .ant-table-tbody > tr {
+      transition: all 0.3s ease;
+      &:hover {
+        background: #f0f5ff;
+        cursor: pointer;
+        transform: scale(1.01);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      }
+      > td {
+        padding: 16px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+    }
+    img {
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      &:hover {
+        transform: scale(1.1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+    }
+    .price-cell {
+      color: #f56c6c;
+      font-weight: 600;
+      font-size: 16px;
+    }
+    .stock-cell {
+      font-weight: 500;
+      &.low-stock {
+        color: #f56c6c;
+      }
+      &.normal-stock {
+        color: #67c23a;
+      }
+    }
+    .ant-space {
+      .ant-btn-link {
+        padding: 4px 8px;
+        height: auto;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        &:hover {
+          background: #f0f5ff;
+          border-radius: 4px;
+        }
+        &.ant-btn-dangerous {
+          color: #f56c6c;
+          &:hover {
+            background: #fff1f0;
+          }
+        }
+      }
+    }
+  }
+  .pagination-wrapper {
+    background: #fff;
+    padding: 16px 20px;
+    border-radius: 8px;
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+    .ant-pagination {
+      .ant-pagination-item {
+        border-radius: 6px;
+        transition: all 0.3s ease;
+        &:hover {
+          border-color: #40a9ff;
+          transform: translateY(-1px);
+        }
+      }
+      .ant-pagination-item-active {
+        background:
+          linear-gradient(
+            135deg,
+            #667eea 0%,
+            #764ba2 100%);
+        border-color: #667eea;
+        a {
+          color: #fff;
+        }
+      }
+      .ant-pagination-prev,
+      .ant-pagination-next {
+        border-radius: 6px;
+        transition: all 0.3s ease;
+        &:hover {
+          border-color: #40a9ff;
+          transform: translateY(-1px);
+        }
+      }
+    }
+  }
+  .ant-switch {
+    &.ant-switch-checked {
+      background:
+        linear-gradient(
+          135deg,
+          #667eea 0%,
+          #764ba2 100%);
+    }
+  }
+  @media (max-width: 1200px) {
+    padding: 12px;
+    .mall-product-list-filter,
+    .mall-product-list-action {
+      .ant-card-body {
+        padding: 16px;
+      }
+    }
+    .ant-table-wrapper {
+      .ant-table-thead > tr > th,
+      .ant-table-tbody > tr > td {
+        padding: 12px;
+      }
+    }
+  }
+  @media (max-width: 768px) {
+    padding: 8px;
+    .mall-product-list-filter {
+      .ant-input-affix-wrapper {
+        width: 100% !important;
+        margin-bottom: 8px;
+      }
+      .ant-btn {
+        width: 100%;
+        margin-bottom: 8px;
+      }
+    }
+    .mall-product-list-action {
+      .ant-btn {
+        width: 100%;
+        margin-bottom: 8px;
+      }
+      .ant-select {
+        width: 100% !important;
+        margin-bottom: 8px;
+      }
+    }
+    .pagination-wrapper {
+      padding: 12px;
+      justify-content: center;
+      .ant-pagination {
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+    }
+  }
+  .ant-spin-nested-loading {
+    .ant-spin {
+      .ant-spin-dot {
+        font-size: 32px;
+      }
+    }
+  }
+  .ant-empty {
+    padding: 48px 0;
+    .ant-empty-image {
+      height: 100px;
+    }
+    .ant-empty-description {
+      color: #999;
+      font-size: 14px;
+    }
+  }
+}
+
+/* src/components/ProductForm/ProductForm.scss */
+.mall-product-form {
+  .ant-card-body {
+    padding: 24px;
+  }
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+  .ant-form-item-label {
+    label {
+      font-weight: 500;
+    }
+  }
+  .ant-input-number {
+    width: 100%;
+  }
+  .ant-select {
+    width: 100%;
+  }
+}
+
+/* src/components/OrderList/OrderList.scss */
+.mall-order-list {
+  .filter-section {
+    margin-bottom: 16px;
+    padding: 16px;
+    background:
+      linear-gradient(
+        135deg,
+        #f5f7fa 0%,
+        #f0f2f5 100%);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  .batch-operation-section {
+    margin-bottom: 16px;
+    padding: 12px 16px;
+    background: #fafafa;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .selected-info {
+      color: #1890ff;
+      font-size: 14px;
+    }
+  }
+  .action-section {
+    margin-bottom: 16px;
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .ant-table {
+    .ant-table-thead > tr > th {
+      background:
+        linear-gradient(
+          135deg,
+          #667eea 0%,
+          #764ba2 100%);
+      color: white;
+      font-weight: 600;
+      border-bottom: none;
+      &::before {
+        background-color: rgba(255, 255, 255, 0.3);
+      }
+    }
+    .ant-table-tbody > tr {
+      &:hover {
+        background: #f5f5f5;
+        cursor: pointer;
+      }
+      > td {
+        padding: 12px 8px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+    }
+  }
+  .order-sn {
+    font-family: "Courier New", monospace;
+    font-weight: 500;
+    color: #1890ff;
+  }
+  .order-amount {
+    font-weight: 600;
+    color: #595959;
+  }
+  .pay-amount {
+    font-weight: 700;
+    color: #f5222d;
+    font-size: 14px;
+  }
+  .ant-tag {
+    border-radius: 12px;
+    padding: 2px 8px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .ant-btn-link {
+    padding: 0 4px;
+    height: auto;
+  }
+  .ant-modal {
+    .ant-descriptions {
+      .ant-descriptions-item-label {
+        font-weight: 600;
+        background: #fafafa;
+      }
+      .ant-descriptions-item-content {
+        background: white;
+      }
+    }
+  }
+  @media (max-width: 768px) {
+    .filter-section {
+      .ant-col {
+        margin-bottom: 8px;
+      }
+    }
+    .batch-operation-section {
+      flex-direction: column;
+      align-items: flex-start;
+      .selected-info {
+        margin-top: 8px;
+      }
+    }
+    .ant-table {
+      overflow-x: auto;
+      .ant-table-thead > tr > th,
+      .ant-table-tbody > tr > td {
+        white-space: nowrap;
+        font-size: 12px;
+        padding: 8px 4px;
+      }
+    }
+  }
+  .ant-pagination {
+    margin-top: 16px;
+    text-align: right;
+    .ant-pagination-item-active {
+      border-color: #1890ff;
+      a {
+        color: #1890ff;
+      }
+    }
+  }
+  .ant-spin-nested-loading {
+    .ant-spin {
+      max-height: 400px;
+    }
+  }
+  .empty-data {
+    padding: 40px 0;
+    text-align: center;
+    color: #8c8c8c;
+    .ant-empty-image {
+      height: 100px;
+    }
+  }
+  .loading-skeleton {
+    .ant-skeleton {
+      padding: 16px 0;
+    }
+  }
+}
+
+/* src/components/OrderForm/OrderForm.scss */
+.mall-order-form {
+  .ant-card {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  .ant-tabs {
+    .ant-tabs-nav {
+      margin-bottom: 24px;
+      &::before {
+        border-bottom: 2px solid #f0f0f0;
+      }
+      .ant-tabs-tab {
+        padding: 12px 16px;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        &:hover {
+          color: #1890ff;
+        }
+        &.ant-tabs-tab-active {
+          .ant-tabs-tab-btn {
+            color: #1890ff;
+            font-weight: 600;
+          }
+        }
+      }
+      .ant-tabs-ink-bar {
+        height: 3px;
+        background:
+          linear-gradient(
+            90deg,
+            #1890ff 0%,
+            #40a9ff 100%);
+      }
+    }
+  }
+  .ant-form {
+    .ant-form-item {
+      margin-bottom: 20px;
+      .ant-form-item-label {
+        label {
+          font-weight: 500;
+          color: #262626;
+        }
+      }
+      .ant-input,
+      .ant-input-number,
+      .ant-select {
+        border-radius: 4px;
+        &:hover {
+          border-color: #40a9ff;
+        }
+        &:focus,
+        &.ant-input-focused,
+        &.ant-select-focused {
+          border-color: #1890ff;
+          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+      }
+      .ant-input-textarea-show-count::after {
+        float: right;
+        color: #8c8c8c;
+        font-size: 12px;
+      }
+    }
+  }
+  .ant-table {
+    .ant-table-thead > tr > th {
+      background:
+        linear-gradient(
+          135deg,
+          #667eea 0%,
+          #764ba2 100%);
+      color: white;
+      font-weight: 600;
+    }
+    .ant-table-tbody > tr {
+      &:hover {
+        background: #f5f5f5;
+      }
+      > td {
+        padding: 12px 8px;
+      }
+    }
+  }
+  .ant-divider {
+    margin: 24px 0;
+    border-color: #f0f0f0;
+  }
+  .ant-space {
+    .ant-btn {
+      min-width: 80px;
+      border-radius: 4px;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+      &.ant-btn-primary {
+        background:
+          linear-gradient(
+            135deg,
+            #1890ff 0%,
+            #40a9ff 100%);
+        border: none;
+        &:hover {
+          background:
+            linear-gradient(
+              135deg,
+              #40a9ff 0%,
+              #69c0ff 100%);
+        }
+      }
+    }
+  }
+  @media (max-width: 768px) {
+    .ant-form {
+      .ant-col {
+        margin-bottom: 0;
+      }
+    }
+    .ant-tabs {
+      .ant-tabs-nav {
+        .ant-tabs-tab {
+          padding: 8px 12px;
+          font-size: 14px;
+        }
+      }
+    }
+    .ant-table {
+      overflow-x: auto;
+      .ant-table-thead > tr > th,
+      .ant-table-tbody > tr > td {
+        white-space: nowrap;
+        font-size: 12px;
+        padding: 8px 4px;
+      }
+    }
+  }
+}
+
+/* src/components/CouponCard/CouponCard.scss */
+.mall-coupon-card {
+  .statistics-section {
+    padding: 16px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    .stat-item {
+      text-align: center;
+      .stat-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: #1890ff;
+      }
+      .stat-label {
+        font-size: 12px;
+        color: #8c8c8c;
+        margin-top: 4px;
+      }
+    }
+  }
+  .filter-section {
+    margin-bottom: 16px;
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 4px;
+  }
+  .action-section {
+    margin-bottom: 16px;
+  }
+  .coupon-name {
+    font-weight: 500;
+    color: #262626;
+  }
+  .ant-table {
+    .ant-tag {
+      margin: 0;
+    }
+  }
+  .ant-badge {
+    .ant-badge-count {
+      font-size: 12px;
+      min-width: 40px;
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}
+
+/* src/components/PromotionCard/PromotionCard.scss */
+.mall-promotion-card {
+  .statistics-section {
+    padding: 16px;
+    background:
+      linear-gradient(
+        135deg,
+        #fff7e6 0%,
+        #fffbe6 100%);
+    border-radius: 4px;
+    margin-bottom: 16px;
+    .ant-statistic-title {
+      font-size: 13px;
+      color: #8c8c8c;
+    }
+    .ant-statistic-content {
+      font-size: 28px;
+    }
+  }
+  .content-section {
+    display: flex;
+    gap: 16px;
+    .table-section {
+      flex: 1;
+    }
+    .timeline-section {
+      width: 300px;
+      .ant-card {
+        height: 100%;
+      }
+      .ant-timeline {
+        padding-top: 8px;
+      }
+      .ant-timeline-item-content {
+        font-size: 13px;
+      }
+    }
+  }
+  .filter-section {
+    margin-bottom: 16px;
+  }
+  .action-section {
+    margin-bottom: 16px;
+  }
+  .promotion-title {
+    font-weight: 500;
+    color: #262626;
+  }
+  .ant-table {
+    .ant-tag {
+      margin: 0;
+    }
+  }
+  @media (max-width: 1200px) {
+    .content-section {
+      flex-direction: column;
+      .timeline-section {
+        width: 100%;
+      }
+    }
+  }
+}
+
+/* src/components/UserCard/UserCard.scss */
+.mall-user-card {
+  .statistics-section {
+    padding: 16px;
+    background:
+      linear-gradient(
+        135deg,
+        #e6f7ff 0%,
+        #f0f5ff 100%);
+    border-radius: 4px;
+    margin-bottom: 16px;
+    .stat-item {
+      text-align: center;
+      .stat-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: #1890ff;
+      }
+      .stat-label {
+        font-size: 12px;
+        color: #8c8c8c;
+        margin-top: 4px;
+      }
+    }
+  }
+  .filter-section {
+    margin-bottom: 16px;
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 4px;
+  }
+  .action-section {
+    margin-bottom: 16px;
+  }
+  .user-name {
+    font-weight: 500;
+    color: #262626;
+  }
+  .user-username {
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+  .ant-table {
+    .ant-tag {
+      margin: 0;
+    }
+  }
+}
+
+/* src/components/RoleCard/RoleCard.scss */
+.mall-role-card {
+  .statistics-section {
+    padding: 16px;
+    background:
+      linear-gradient(
+        135deg,
+        #f0f5ff 0%,
+        #f5f0ff 100%);
+    border-radius: 4px;
+    margin-bottom: 16px;
+    .stat-item {
+      text-align: center;
+      .stat-value {
+        font-size: 24px;
+        font-weight: 600;
+        color: #722ed1;
+      }
+      .stat-label {
+        font-size: 12px;
+        color: #8c8c8c;
+        margin-top: 4px;
+      }
+    }
+  }
+  .content-section {
+    display: flex;
+    gap: 16px;
+    .table-section {
+      flex: 1;
+    }
+    .permission-section {
+      width: 280px;
+      .ant-card {
+        height: 100%;
+      }
+      .ant-tree {
+        font-size: 13px;
+      }
+    }
+  }
+  .filter-section {
+    margin-bottom: 16px;
+    padding: 16px;
+    background: #fafafa;
+    border-radius: 4px;
+  }
+  .action-section {
+    margin-bottom: 16px;
+  }
+  .role-name {
+    font-weight: 500;
+    color: #262626;
+  }
+  .ant-table {
+    .ant-tag {
+      margin: 0;
+    }
+  }
+  @media (max-width: 1200px) {
+    .content-section {
+      flex-direction: column;
+      .permission-section {
+        width: 100%;
+      }
+    }
+  }
+}