YG_FT/frontend/src/styles/index.scss

/* Element Plus 主题变量覆盖：使用原生 CSS 变量替代 SCSS 编译以解决加载卡顿和 FOUC 问题 */
:root {
  /* 全局页面层级：灰色仅作为外层留白，业务页面统一使用白色画布 */
  --app-shell-bg: #f3f5f8;
  --app-page-bg: #ffffff;
  --app-surface-bg: #ffffff;
  --el-bg-color-page: var(--app-shell-bg);

  /* Element Plus 基础颜色覆盖 */
  --el-color-primary: #4f46e5;
  --el-color-primary-light-3: #818cf8;
  --el-color-primary-light-5: #a5b4fc;
  --el-color-primary-light-7: #c7d2fe;
  --el-color-primary-light-8: #e0e7ff;
  --el-color-primary-light-9: #eef2ff;
  --el-color-primary-dark-2: #4338ca;

  --el-color-success: #10b981;
  --el-color-warning: #f59e0b;
  --el-color-danger: #ef4444;
  --el-color-info: #64748b;

  /* Element Plus 圆角覆盖 */
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 20px;

  /* 项目自定义 CSS 变量 */
  --primary-color: var(--el-color-primary);
  --primary-hover: var(--el-color-primary-light-3);
  --danger-color: var(--el-color-danger);
  --success-color: var(--el-color-success);
  --sidebar-bg: #f9fafb; /* Light Gray */
  --sidebar-text: #606266; /* Regular Text */
  --sidebar-active-bg: #f1f5f9; /* Active Item Bg */
  --sidebar-active-text: #303133; /* Darker Text for Active */
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  --header-height: 60px;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
  background-color: var(--app-shell-bg);
  color: var(--el-text-color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);
  border-radius: 4px;
  transition: all 0.3s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(148, 163, 184, 0.7);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* 覆盖 Element Plus 的一些默认样式，使其更高级 */

/* 1. 卡片 (el-card) 无边框，柔和阴影 */
.el-card {
  background-color: var(--app-surface-bg);
  border: none !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2. 表格 (el-table) 现代化 */
.el-table {
  --el-table-border-color: #f1f5f9;
  --el-table-header-bg-color: #f8fafc;
  --el-table-header-text-color: #475569;
  border-radius: 8px;
  overflow: hidden;
}
.el-table th.el-table__cell {
  font-weight: 600 !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--el-table-border-color) !important;
}
.el-table td.el-table__cell {
  padding: 12px 0 !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #f8fafc !important;
}
.el-table::before {
  display: none; /* 移除底部基础边框 */
}

/* 3. 按钮动效 */
.el-button {
  font-weight: 500;
  transition: all 0.2s ease;
}
.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.el-button:active {
  transform: translateY(0);
}
.el-button.is-link:hover {
  transform: none;
  box-shadow: none;
}

/* 4. 标签 (el-tag) 圆润化 */
.el-tag {
  border-radius: 6px;
  border: none !important;
  font-weight: 500;
}
.el-tag--primary {
  background-color: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}
.el-tag--success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.el-tag--warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}
.el-tag--danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.el-tag--info {
  background-color: rgba(100, 116, 139, 0.1);
  color: #475569;
}

/* 5. 分页组件 */
.el-pagination {
  --el-pagination-bg-color: #ffffff;
  --el-pagination-hover-color: var(--primary-color);
  margin-top: 16px;
  justify-content: flex-end;
}
.el-pagination.is-background .el-pager li {
  border-radius: 6px;
  background-color: #f1f5f9;
  border: none;
}
.el-pagination.is-background .el-pager li.is-active {
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* 6. 模态框 (Dialog) */
.el-dialog {
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}
.el-dialog__header {
  margin-right: 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #f1f5f9;
}
.el-dialog__title {
  font-weight: 600 !important;
  font-size: 16px !important;
}