pns-web/src/styles/overrides-element.scss

/**
 * Element UI 主题覆盖
 * 使用设计令牌覆盖 Element UI 默认样式
 * @author 前端架构师
 */

/* ===== 全局基础覆盖 ===== */

/* 重置 Element UI 的 CSS 变量 */
:root {
  /* Element UI 主色调覆盖 */
  --el-color-primary: var(--color-primary);
  --el-color-success: var(--color-success);
  --el-color-warning: var(--color-warning);
  --el-color-danger: var(--color-danger);
  --el-color-info: var(--color-info);

  /* Element UI 文本颜色覆盖 */
  --el-text-color-primary: var(--color-text-primary);
  --el-text-color-regular: var(--color-text-secondary);
  --el-text-color-secondary: var(--color-text-tertiary);
  --el-text-color-placeholder: var(--color-text-placeholder);
  --el-text-color-disabled: var(--color-text-disabled);

  /* Element UI 背景色覆盖 */
  --el-bg-color: var(--color-bg-primary);
  --el-bg-color-page: var(--color-bg-secondary);

  /* Element UI 边框覆盖 */
  --el-border-color: var(--color-border-primary);
  --el-border-color-light: var(--color-border-secondary);
  --el-border-color-lighter: var(--color-border-tertiary);
  --el-border-color-extra-light: var(--color-border-tertiary);

  /* Element UI 圆角覆盖 */
  --el-border-radius-base: var(--radius-lg);
  --el-border-radius-small: var(--radius-md);
  --el-border-radius-round: var(--radius-full);

  /* Element UI 阴影覆盖 */
  --el-box-shadow: var(--shadow-card);
  --el-box-shadow-light: var(--shadow-sm);
  --el-box-shadow-base: var(--shadow-base);
  --el-box-shadow-dark: var(--shadow-lg);

  /* Element UI 字体覆盖 */
  --el-font-size-extra-small: var(--font-size-xs);
  --el-font-size-small: var(--font-size-sm);
  --el-font-size-base: var(--font-size-base);
  --el-font-size-medium: var(--font-size-lg);
  --el-font-size-large: var(--font-size-xl);
  --el-font-size-extra-large: var(--font-size-2xl);
}

/* ===== 按钮组件覆盖 ===== */
.el-button {
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-200) var(--ease-out);
  border-width: 1px;
  position: relative;
  overflow: hidden;

  /* 按钮悬停效果 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left var(--duration-300) var(--ease-out);
  }

  &:hover::before {
    left: 100%;
  }

  /* 主要按钮 */
  &.el-button--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);

    &:hover,
    &:focus {
      background: var(--color-primary-light);
      border-color: var(--color-primary-light);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
      box-shadow: var(--shadow-sm);
    }
  }

  /* 成功按钮 */
  &.el-button--success {
    background: var(--color-success);
    border-color: var(--color-success);
    
    &:hover,
    &:focus {
      background: var(--color-success-light);
      border-color: var(--color-success-light);
    }
  }

  /* 警告按钮 */
  &.el-button--warning {
    background: var(--color-warning);
    border-color: var(--color-warning);
    
    &:hover,
    &:focus {
      background: var(--color-warning-light);
      border-color: var(--color-warning-light);
    }
  }

  /* 危险按钮 */
  &.el-button--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    
    &:hover,
    &:focus {
      background: var(--color-danger-light);
      border-color: var(--color-danger-light);
    }
  }

  /* 默认按钮 */
  &.el-button--default {
    background: var(--color-bg-card);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
    
    &:hover,
    &:focus {
      background: var(--color-bg-tertiary);
      border-color: var(--color-primary);
      color: var(--color-primary);
    }
  }

  /* 文本按钮 */
  &.el-button--text {
    background: transparent;
    border: none;
    color: var(--color-primary);
    
    &:hover,
    &:focus {
      background: var(--color-primary-50);
      color: var(--color-primary-dark);
    }
  }

  /* 禁用状态 */
  &.is-disabled {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-tertiary) !important;
    color: var(--color-text-disabled) !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;

    &::before {
      display: none;
    }
  }

  /* 小尺寸按钮 */
  &.el-button--small {
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
  }

  /* 迷你按钮 */
  &.el-button--mini {
    border-radius: var(--radius-base);
    font-size: var(--font-size-xs);
  }
}

/* 按钮组 */
.el-button-group {
  .el-button {
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
  }
}

/* ===== 输入框组件覆盖 ===== */
.el-input {
  .el-input__inner {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    transition: all var(--duration-200) var(--ease-out);
    padding: 0 var(--spacing-3);

    &::placeholder {
      color: var(--color-text-placeholder);
    }

    &:hover {
      border-color: var(--color-primary-light);
    }

    &:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px var(--color-primary-100);
      outline: none;
    }
  }

  /* 输入框禁用状态 */
  &.is-disabled {
    .el-input__inner {
      background: var(--color-bg-tertiary);
      border-color: var(--color-border-tertiary);
      color: var(--color-text-disabled);
      cursor: not-allowed;
    }
  }

  /* 输入框错误状态 */
  &.is-error {
    .el-input__inner {
      border-color: var(--color-danger);
      
      &:focus {
        box-shadow: 0 0 0 2px var(--color-danger-100);
      }
    }
  }

  /* 输入框成功状态 */
  &.is-success {
    .el-input__inner {
      border-color: var(--color-success);
    }
  }

  /* 输入框图标 */
  .el-input__prefix,
  .el-input__suffix {
    color: var(--color-text-tertiary);
  }

  /* 小尺寸输入框 */
  &.el-input--small {
    .el-input__inner {
      border-radius: var(--radius-md);
    }
  }

  /* 迷你输入框 */
  &.el-input--mini {
    .el-input__inner {
      border-radius: var(--radius-base);
    }
  }
}

/* 文本域 */
.el-textarea {
  .el-textarea__inner {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-family: var(--font-family-sans);
    transition: all var(--duration-200) var(--ease-out);

    &::placeholder {
      color: var(--color-text-placeholder);
    }

    &:hover {
      border-color: var(--color-primary-light);
    }

    &:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 2px var(--color-primary-100);
      outline: none;
    }
  }
}

/* ===== 选择器组件覆盖 ===== */
.el-select {
  .el-input__inner {
    cursor: pointer;
  }

  .el-input__suffix {
    transition: transform var(--duration-200) var(--ease-out);
  }

  &.is-focus {
    .el-input__suffix {
      transform: rotate(180deg);
    }
  }
}

/* 选择器下拉面板 */
.el-select-dropdown {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  margin-top: var(--spacing-1);

  .el-select-dropdown__item {
    color: var(--color-text-primary);
    padding: var(--spacing-2) var(--spacing-3);
    transition: all var(--duration-150) var(--ease-out);

    &:hover {
      background: var(--color-primary-50);
      color: var(--color-primary);
    }

    &.selected {
      background: var(--color-primary);
      color: var(--color-text-inverse);
      font-weight: var(--font-weight-medium);
    }
  }
}

/* ===== 表单组件覆盖 ===== */
.el-form {
  .el-form-item {
    margin-bottom: var(--spacing-6);

    &__label {
      color: var(--color-text-primary);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-normal);
      padding-bottom: var(--spacing-2);
    }

    &__content {
      line-height: var(--line-height-normal);
    }

    &__error {
      color: var(--color-danger);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-tight);
      padding-top: var(--spacing-1);
    }

    /* 必填标识 */
    &.is-required {
      .el-form-item__label::before {
        color: var(--color-danger);
        margin-right: var(--spacing-1);
      }
    }

    /* 表单项错误状态 */
    &.is-error {
      .el-form-item__label {
        color: var(--color-danger);
      }
    }
  }
}

/* ===== 对话框组件覆盖 ===== */
.el-dialog {
  background: var(--color-bg-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--color-border-primary);

  &__header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding: var(--spacing-6) var(--spacing-6) var(--spacing-4);
  }

  &__title {
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
  }

  &__headerbtn {
    top: var(--spacing-4);
    right: var(--spacing-4);
    width: var(--spacing-8);
    height: var(--spacing-8);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    transition: all var(--duration-200) var(--ease-out);

    &:hover {
      background: var(--color-danger-100);
    }

    .el-dialog__close {
      color: var(--color-text-tertiary);
      font-size: var(--font-size-lg);

      &:hover {
        color: var(--color-danger);
      }
    }
  }

  &__body {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    padding: var(--spacing-6);
    line-height: var(--line-height-relaxed);
  }

  &__footer {
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-secondary);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    padding: var(--spacing-4) var(--spacing-6);
    text-align: right;

    .el-button {
      margin-left: var(--spacing-3);
    }
  }
}

/* 对话框遮罩 */
.el-dialog__wrapper {
  background: var(--color-bg-mask);
  backdrop-filter: blur(4px);
}

/* ===== 抽屉组件覆盖 ===== */
.el-drawer {
  background: var(--color-bg-card);
  box-shadow: var(--shadow-2xl);

  &__header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-secondary);
    margin-bottom: 0;
    padding: var(--spacing-6) var(--spacing-6) var(--spacing-4);

    span {
      color: var(--color-text-primary);
      font-size: var(--font-size-xl);
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-tight);
    }
  }

  &__close-btn {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xl);
    top: var(--spacing-6);
    right: var(--spacing-6);
    width: var(--spacing-8);
    height: var(--spacing-8);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    transition: all var(--duration-200) var(--ease-out);

    &:hover {
      background: var(--color-danger-100);
      color: var(--color-danger);
    }
  }

  &__body {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    padding: var(--spacing-6);
  }
}

/* ===== 表格组件覆盖 ===== */
.el-table {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--color-text-primary);

  /* 表头 */
  &__header-wrapper {
    .el-table__header {
      th {
        background: var(--color-bg-tertiary);
        border-bottom: 1px solid var(--color-border-primary);
        color: var(--color-text-primary);
        font-weight: var(--font-weight-semibold);
        padding: var(--spacing-4) var(--spacing-3);

        &:first-child {
          border-top-left-radius: var(--radius-xl);
        }

        &:last-child {
          border-top-right-radius: var(--radius-xl);
        }
      }
    }
  }

  /* 表体 */
  &__body-wrapper {
    .el-table__body {
      tr {
        background: var(--color-bg-card);
        transition: background-color var(--duration-150) var(--ease-out);

        &:hover {
          background: var(--color-primary-50) !important;
        }

        td {
          border-bottom: 1px solid var(--color-border-secondary);
          color: var(--color-text-primary);
          padding: var(--spacing-4) var(--spacing-3);
        }

        &:last-child td {
          border-bottom: none;
        }
      }
    }
  }

  /* 表格边框 */
  &--border {
    border: 1px solid var(--color-border-primary);

    &::after {
      background: var(--color-border-primary);
    }

    &::before {
      background: var(--color-border-primary);
    }

    th,
    td {
      border-right: 1px solid var(--color-border-secondary);
    }
  }

  /* 斑马纹表格 */
  &--striped {
    .el-table__body {
      tr.el-table__row--striped {
        background: var(--color-bg-secondary);

        &:hover {
          background: var(--color-primary-50) !important;
        }
      }
    }
  }

  /* 空数据 */
  &__empty-block {
    background: var(--color-bg-card);
  }

  &__empty-text {
    color: var(--color-text-tertiary);
  }
}

/* 表格分页 */
.el-pagination {
  color: var(--color-text-primary);

  .el-pager li {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    margin: 0 var(--spacing-1);
    transition: all var(--duration-200) var(--ease-out);

    &:hover {
      background: var(--color-primary-50);
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    &.active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-text-inverse);
    }
  }

  .btn-prev,
  .btn-next {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);

    &:hover {
      background: var(--color-primary-50);
      color: var(--color-primary);
    }
  }
}

/* ===== 标签页组件覆盖 ===== */
.el-tabs {
  &__header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-primary);
    margin: 0;
  }

  &__nav-wrap {
    &::after {
      background: var(--color-border-primary);
    }
  }

  &__item {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    padding: 0 var(--spacing-5);
    height: var(--spacing-12);
    line-height: var(--spacing-12);
    transition: all var(--duration-200) var(--ease-out);
    position: relative;

    &:hover {
      color: var(--color-primary);
    }

    &.is-active {
      color: var(--color-primary);
      font-weight: var(--font-weight-semibold);

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--color-primary);
        border-radius: var(--radius-full);
      }
    }
  }

  &__content {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    // padding: var(--spacing-6);  // 保持注释（不要启用）
  }

  /* 卡片式标签页 */
  &--card {
    .el-tabs__header {
      background: var(--color-bg-secondary);
      border-bottom: none;
    }

    .el-tabs__item {
      background: var(--color-bg-tertiary);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      margin-right: var(--spacing-1);

      &.is-active {
        background: var(--color-bg-card);
        border-bottom-color: var(--color-bg-card);
        
        &::after {
          display: none;
        }
      }
    }
  }
}

/* ===== 消息提示覆盖 ===== */
.el-message {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  color: var(--color-text-primary);
  backdrop-filter: blur(8px);

  &--success {
    background: var(--color-success-50);
    border-color: var(--color-success);
    color: var(--color-success-dark);

    .el-message__icon {
      color: var(--color-success);
    }
  }

  &--warning {
    background: var(--color-warning-50);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);

    .el-message__icon {
      color: var(--color-warning);
    }
  }

  &--error {
    background: var(--color-danger-50);
    border-color: var(--color-danger);
    color: var(--color-danger-dark);

    .el-message__icon {
      color: var(--color-danger);
    }
  }

  &--info {
    .el-message__icon {
      color: var(--color-primary);
    }
  }
}

/* ===== 通知组件覆盖 ===== */
.el-notification {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(8px);

  &__title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
  }

  &__content {
    color: var(--color-text-secondary);
  }

  &.success {
    border-left: 4px solid var(--color-success);
    
    .el-notification__icon {
      color: var(--color-success);
    }
  }

  &.warning {
    border-left: 4px solid var(--color-warning);
    
    .el-notification__icon {
      color: var(--color-warning);
    }
  }

  &.error {
    border-left: 4px solid var(--color-danger);
    
    .el-notification__icon {
      color: var(--color-danger);
    }
  }

  &.info {
    border-left: 4px solid var(--color-primary);
    
    .el-notification__icon {
      color: var(--color-primary);
    }
  }
}

/* ===== 工具提示覆盖 ===== */
.el-tooltip__popper {
  background: var(--color-gray-900);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-lg);

  &[x-placement^="top"] {
    .popper__arrow {
      border-top-color: var(--color-gray-900);
    }
  }

  &[x-placement^="bottom"] {
    .popper__arrow {
      border-bottom-color: var(--color-gray-900);
    }
  }

  &[x-placement^="left"] {
    .popper__arrow {
      border-left-color: var(--color-gray-900);
    }
  }

  &[x-placement^="right"] {
    .popper__arrow {
      border-right-color: var(--color-gray-900);
    }
  }
}

/* ===== 加载组件覆盖 ===== */
.el-loading-mask {
  background: var(--color-bg-overlay);
  backdrop-filter: blur(2px);

  .el-loading-spinner {
    .el-loading-text {
      color: var(--color-text-primary);
      font-weight: var(--font-weight-medium);
    }

    .circular {
      stroke: var(--color-primary);
    }
  }
}

/* ===== 进度条组件覆盖 ===== */
.el-progress {
  &__text {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
  }

  &-bar {
    &__outer {
      background: var(--color-bg-tertiary);
      border-radius: var(--radius-full);
    }

    &__inner {
      background: var(--color-primary);
      border-radius: var(--radius-full);
      transition: width var(--duration-300) var(--ease-out);
    }
  }

  &--success {
    .el-progress-bar__inner {
      background: var(--color-success);
    }
  }

  &--warning {
    .el-progress-bar__inner {
      background: var(--color-warning);
    }
  }

  &--exception {
    .el-progress-bar__inner {
      background: var(--color-danger);
    }
  }
}

/* ===== 标签组件覆盖 ===== */
.el-tag {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-1) var(--spacing-3);

  &--success {
    background: var(--color-success-100);
    border-color: var(--color-success);
    color: var(--color-success-dark);
  }

  &--warning {
    background: var(--color-warning-100);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);
  }

  &--danger {
    background: var(--color-danger-100);
    border-color: var(--color-danger);
    color: var(--color-danger-dark);
  }

  &--info {
    background: var(--color-primary-100);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
  }

  .el-tag__close {
    color: inherit;
    border-radius: var(--radius-full);
    transition: all var(--duration-150) var(--ease-out);

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

/* ===== 开关组件覆盖 ===== */
.el-switch {
  &__core {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-full);
    transition: all var(--duration-200) var(--ease-out);

    &::after {
      background: var(--color-bg-card);
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-sm);
      transition: all var(--duration-200) var(--ease-out);
    }
  }

  &.is-checked {
    .el-switch__core {
      background: var(--color-primary);
      border-color: var(--color-primary);
    }
  }

  &__label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);

    &.is-active {
      color: var(--color-primary);
    }
  }
}

/* ===== 滑块组件覆盖 ===== */
.el-slider {
  &__runway {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
  }

  &__bar {
    background: var(--color-primary);
    border-radius: var(--radius-full);
  }

  &__button {
    background: var(--color-bg-card);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-md);
    transition: all var(--duration-200) var(--ease-out);

    &:hover {
      box-shadow: var(--shadow-lg);
      transform: scale(1.1);
    }
  }

  &__stop {
    background: var(--color-bg-tertiary);
  }
}

/* ===== 复选框组件覆盖 ===== */
.el-checkbox {
  &__input {
    .el-checkbox__inner {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-sm);
      transition: all var(--duration-200) var(--ease-out);

      &:hover {
        border-color: var(--color-primary);
      }
    }

    &.is-checked {
      .el-checkbox__inner {
        background: var(--color-primary);
        border-color: var(--color-primary);

        &::after {
          border-color: var(--color-text-inverse);
        }
      }
    }

    &.is-indeterminate {
      .el-checkbox__inner {
        background: var(--color-primary);
        border-color: var(--color-primary);

        &::before {
          background: var(--color-text-inverse);
        }
      }
    }
  }

  &__label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
  }
}

/* ===== 单选框组件覆盖 ===== */
.el-radio {
  &__input {
    .el-radio__inner {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-primary);
      transition: all var(--duration-200) var(--ease-out);

      &:hover {
        border-color: var(--color-primary);
      }

      &::after {
        background: var(--color-primary);
      }
    }

    &.is-checked {
      .el-radio__inner {
        background: var(--color-bg-card);
        border-color: var(--color-primary);
      }
    }
  }

  &__label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
  }
}