schoolNews/schoolNewsWeb/src/assets/styles/common.scss

/**
 * @description 全局通用样式
 * @author yslg
 * @since 2025-10-30
 * @figma https://www.figma.com/design/4aM0yqyoAjtW2jTZcqPAtN
 */

// ============ 设计令牌 (Design Tokens) ============

// 颜色
$color-primary: #C62828;           // 主色（红色）
$color-primary-hover: #B71C1C;    // 主色悬停
$color-text-primary: #1D2129;     // 主要文字
$color-text-secondary: #4E5969;   // 次要文字
$color-text-disabled: #C9CDD4;    // 禁用文字/图标
$color-bg-secondary: #F2F3F5;     // 次要背景
$color-bg-white: #FFFFFF;         // 白色背景
$color-border: #dcdfe6;           // 边框

// 字体
$font-family-cn: 'PingFang SC', 'Microsoft YaHei', sans-serif;
$font-family-en: 'Nunito Sans', sans-serif;
$font-size-base: 14px;
$line-height-base: 1.571428571em;

// 圆角
$border-radius-small: 2px;
$border-radius-medium: 4px;
$border-radius-large: 8px;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;

// ============ 按钮样式 ============

// 主要操作按钮
.btn-primary {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  padding: $spacing-sm $spacing-xl;
  background: #409eff;
  border: none;
  border-radius: $border-radius-medium;
  color: $color-bg-white;
  font-size: $font-size-base;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: #66b1ff;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

// 创建/新增按钮（红色主题）
.btn-create {
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  padding: $spacing-sm $spacing-lg;
  background: #E7000B;
  border: none;
  border-radius: $border-radius-large;
  color: $color-bg-white;
  font-size: $font-size-base;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;

  .icon {
    font-size: 16px;
    font-weight: bold;
  }

  &:hover {
    background: #C70009;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

// 搜索按钮
.btn-search {
  padding: $spacing-sm $spacing-xl;
  border-radius: $border-radius-medium;
  font-size: $font-size-base;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  background: #409eff;
  color: $color-bg-white;

  &:hover {
    background: #66b1ff;
  }
}

// 重置按钮
.btn-reset {
  padding: $spacing-sm $spacing-xl;
  border-radius: $border-radius-medium;
  font-size: $font-size-base;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid $color-border;
  background: $color-bg-white;
  color: #606266;

  &:hover {
    color: #409eff;
    border-color: #409eff;
  }
}

// 危险操作按钮
.btn-danger {
  padding: $spacing-sm $spacing-xl;
  border-radius: $border-radius-medium;
  font-size: $font-size-base;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  background: #f56c6c;
  color: $color-bg-white;

  &:hover {
    background: #f78989;
  }
}

// 链接样式按钮（用于表格操作列）
.btn-link {
  border: none;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: $border-radius-medium;
  min-width: 64px;
  text-align: center;
  white-space: nowrap;
  color: $color-bg-white;

  &:hover {
    opacity: 0.8;
  }

  &.btn-primary {
    background: #409eff;
  }

  &.btn-warning {
    background: #e6a23c;
  }

  &.btn-success {
    background: #67c23a;
  }

  &.btn-danger {
    background: #f56c6c;
  }

  &.btn-info {
    background: #909399;
  }
}

// ============ 分页样式 (基于Figma设计) ============

// 分页容器
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: $spacing-md 0;
  margin-top: 32px;
  background: #F9FAFB;
  border-radius: $border-radius-large;

  // Element Plus 分页组件自定义样式
  :deep(.el-pagination) {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    padding: 0 $spacing-xxl;

    // 总条数文本
    .el-pagination__total {
      font-family: $font-family-cn;
      font-size: $font-size-base;
      font-weight: 400;
      line-height: $line-height-base;
      color: $color-text-primary;
      margin-right: 0;
    }

    // 每页条数选择器
    .el-pagination__sizes {
      margin: 0;

      .el-select {
        .el-select__wrapper {
          background: $color-bg-secondary;
          border: none;
          border-radius: $border-radius-small;
          padding: $spacing-xs $spacing-md;
          min-height: 32px;
          box-shadow: none;

          .el-select__selected-item {
            font-family: $font-family-cn;
            font-size: $font-size-base;
            font-weight: 400;
            line-height: $line-height-base;
            color: $color-text-primary;
          }

          .el-select__suffix {
            .el-icon {
              color: $color-text-secondary;
            }
          }

          &:hover {
            background: darken($color-bg-secondary, 3%);
          }
        }
      }
    }

    // 上一页/下一页按钮
    .btn-prev,
    .btn-next {
      background: transparent;
      border: none;
      padding: 10px;
      min-width: auto;
      width: 32px;
      height: 32px;
      border-radius: $border-radius-small;
      
      .el-icon {
        color: $color-text-secondary;
      }

      &:hover:not(:disabled) {
        background: rgba($color-primary, 0.08);
        
        .el-icon {
          color: $color-primary;
        }
      }

      &:disabled {
        background: transparent;
        cursor: not-allowed;
        
        .el-icon {
          color: $color-text-disabled;
        }
      }
    }

    // 页码列表
    .el-pager {
      display: flex;
      align-items: center;
      gap: $spacing-xs;
      
      li {
        background: transparent;
        border: none;
        border-radius: $border-radius-small;
        padding: $spacing-xs;
        min-width: 32px;
        height: 32px;
        line-height: 24px;
        font-family: $font-family-en;
        font-size: $font-size-base;
        font-weight: 600;
        color: $color-text-secondary;
        text-align: center;
        margin: 0;

        &:hover:not(.is-active):not(.is-disabled) {
          background: rgba($color-primary, 0.08);
          color: $color-primary;
        }

        &.is-active {
          background: $color-primary;
          color: $color-bg-white;
        }

        &.is-disabled {
          color: $color-text-disabled;
          cursor: not-allowed;
        }

        // 更多页省略号
        &.more {
          background: transparent;
          color: $color-text-secondary;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }

    // 跳转输入框
    .el-pagination__jump {
      margin-left: 0;
      font-family: $font-family-cn;
      font-size: $font-size-base;
      color: $color-text-primary;

      .el-input {
        .el-input__wrapper {
          background: $color-bg-white;
          border: 1px solid $color-border;
          border-radius: $border-radius-small;
          padding: $spacing-xs $spacing-sm;
          box-shadow: none;
          width: 60px;

          .el-input__inner {
            font-family: $font-family-en;
            font-size: $font-size-base;
            font-weight: 600;
            color: $color-text-primary;
            text-align: center;
          }

          &:hover {
            border-color: $color-primary;
          }

          &.is-focus {
            border-color: $color-primary;
            box-shadow: none;
          }
        }
      }
    }
  }
}

// ============ 加载状态 ============

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  color: #909399;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid $color-primary;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: $spacing-lg;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-icon {
  font-size: 64px;
  margin-bottom: $spacing-lg;
}

// ============ 表格加载和空状态 ============

.loading-cell,
.empty-cell {
  text-align: center;
  padding: 60px 20px !important;
  color: #909399;
}

// ============ 搜索栏 ============

.search-bar {
  background: $color-bg-white;
  padding: $spacing-xl;
  border-radius: $border-radius-large;
  margin-bottom: $spacing-xl;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: $spacing-lg;
  flex-wrap: wrap;
  align-items: flex-end;
}

.search-group {
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
  min-width: 180px;
}

.search-label {
  font-size: $font-size-base;
  font-weight: 500;
  color: #606266;
}

.search-input,
.search-select {
  padding: $spacing-sm $spacing-md;
  border: 1px solid $color-border;
  border-radius: $border-radius-medium;
  font-size: $font-size-base;
  color: #606266;
  transition: border-color 0.3s;

  &:focus {
    outline: none;
    border-color: #409eff;
  }
}

.search-select {
  cursor: pointer;
}

.search-actions {
  display: flex;
  gap: $spacing-md;
  margin-left: auto;
}

// ============ 工具栏 ============

.toolbar {
  margin-bottom: $spacing-xl;
}