yss-project/src/app/pages/hr/employee-records/employee-records.scss

@import '../../../shared/styles/variables';
@import '../../../shared/styles/ios-theme';

.employee-records-container {
  padding: $ios-spacing-lg;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $ios-spacing-lg;
    
    .title-section {
      h1 {
        margin: 0;
        font-size: $ios-font-size-title-1;
        font-weight: $ios-font-weight-semibold;
        color: $ios-text-primary;
        font-family: $ios-font-family;
      }
      
      .subtitle {
        margin: $ios-spacing-xs 0 0;
        color: $ios-text-secondary;
        font-size: $ios-font-size-subhead;
        font-family: $ios-font-family;
      }
    }
    
    .action-buttons {
      display: flex;
      gap: $ios-spacing-sm;

      button[mat-raised-button][color='warn'] {
        background: $ios-error;
        color: white;
      }
      button[mat-raised-button][color='primary'] {
        background: $ios-primary;
        color: white;
      }
    }
  }
  
  .filter-card {
    margin-bottom: $ios-spacing-lg;
    background: $ios-card-background;
    border-radius: $ios-radius-lg;
    box-shadow: $ios-shadow-card;
    border: 1px solid $ios-border;

    .filter-form {
      display: flex;
      flex-wrap: wrap;
      gap: $ios-spacing-md;
      align-items: center;
      
      mat-form-field {
        flex: 1;
        min-width: 200px;
      }
    }
  }
  
  .employee-table-container {
    background-color: $ios-card-background;
    border-radius: $ios-radius-lg;
    box-shadow: $ios-shadow-card;
    margin-bottom: $ios-spacing-lg;
    overflow: auto;
    border: 1px solid $ios-border;
    
    .employee-table {
      width: 100%;
      
      th.mat-header-cell {
        background: $ios-background-secondary;
        color: $ios-text-primary;
        font-weight: $ios-font-weight-semibold;
        padding: $ios-spacing-sm $ios-spacing-md;
        font-family: $ios-font-family;
      }
      
      td.mat-cell {
        padding: $ios-spacing-sm $ios-spacing-md;
        font-family: $ios-font-family;
      }
      
      .status-badge {
        display: inline-block;
        padding: $ios-spacing-xs $ios-spacing-sm;
        border-radius: $ios-radius-full;
        font-size: $ios-font-size-caption-1;
        font-weight: $ios-font-weight-medium;
        text-align: center;
        min-width: 60px;
        font-family: $ios-font-family;
        
        &.status-active {
          background-color: rgba(52, 199, 89, 0.1);
          color: $ios-success;
        }
        
        &.status-probation {
          background-color: rgba(255, 149, 0, 0.1);
          color: $ios-warning;
        }
        
        &.status-resigned {
          background-color: $ios-background-secondary;
          color: $ios-text-tertiary;
        }
      }
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: $ios-spacing-xxl $ios-spacing-lg;
      text-align: center;
      
      mat-icon {
        font-size: 48px;
        height: 48px;
        width: 48px;
        color: $ios-text-tertiary;
        margin-bottom: $ios-spacing-md;
      }
      
      p {
        color: $ios-text-secondary;
        margin-bottom: $ios-spacing-md;
        font-family: $ios-font-family;
      }
    }
  }
  
  mat-paginator {
    margin-bottom: $ios-spacing-lg;
    background: $ios-card-background;
    border-radius: $ios-radius-md;
    box-shadow: $ios-shadow-sm;
    border: 1px solid $ios-border;
  }
  
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: $ios-spacing-lg;
    margin-bottom: $ios-spacing-lg;
    
    .quick-action-card {
      background: $ios-card-background;
      border-radius: $ios-radius-lg;
      transition: all $ios-transition-duration $ios-transition-timing-function;
      box-shadow: $ios-shadow-card;
      border: 1px solid $ios-border;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: $ios-shadow-lg;
      }
      
      mat-card-header {
        margin-bottom: $ios-spacing-md;
        
        mat-icon {
          background: rgba(0, 122, 255, 0.1);
          color: $ios-primary;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }
      }
      
      mat-card-content {
        font-family: $ios-font-family;
        
        .highlight-count {
          font-weight: $ios-font-weight-semibold;
          color: $ios-text-primary;
          font-size: $ios-font-size-lg;
        }
      }
      
      mat-card-actions {
        padding: $ios-spacing-sm $ios-spacing-md $ios-spacing-md;
      }
    }
  }

  // Material 选择面板样式
  :host ::ng-deep .hr-select-panel {
    background: $ios-card-background;
    border-radius: $ios-radius-md !important;
    box-shadow: $ios-shadow-lg;
    border: 1px solid $ios-border;

    .mat-mdc-option.mdc-list-item {
      padding: $ios-spacing-sm $ios-spacing-md;
      font-family: $ios-font-family;
    }
    .mdc-list-item__primary-text {
      color: $ios-text-primary;
    }
    .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text {
      color: $ios-primary;
      font-weight: $ios-font-weight-semibold;
    }
  }

  // Material 菜单面板样式
  :host ::ng-deep .hr-menu-panel {
    background: $ios-card-background;
    border-radius: $ios-radius-md !important;
    box-shadow: $ios-shadow-lg;
    border: 1px solid $ios-border;
  }
  
  // HR 对话框统一样式
  :host ::ng-deep .hr-dialog {
    .mat-mdc-dialog-container .mdc-dialog__surface {
      border-radius: $ios-radius-lg;
      background: $ios-card-background;
      box-shadow: $ios-shadow-lg;
      border: 1px solid $ios-border;
    }

    .mat-mdc-dialog-title {
      color: $ios-text-primary;
      font-weight: $ios-font-weight-semibold;
      font-family: $ios-font-family;
    }

    .mat-mdc-dialog-actions {
      padding: $ios-spacing-sm $ios-spacing-lg $ios-spacing-md;

      .mat-mdc-raised-button {
        background: $ios-primary;
        color: white;
      }
    }
  }
}

// 响应式布局调整
@media (max-width: 768px) {
  .employee-records-container {
    padding: $ios-spacing-md;
    
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: $ios-spacing-md;
      
      .action-buttons {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }
    
    .quick-actions {
      grid-template-columns: 1fr;
    }
  }
}

.actions-cell {
  display: flex;
  align-items: center;
  gap: $ios-spacing-xs;
  min-height: $ios-list-item-height;
}

.view-detail-chip {
  cursor: pointer;
  height: 32px;
  line-height: 32px;
  border-radius: $ios-radius-md;
  padding: 0 $ios-spacing-sm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: $ios-font-family;
  
  mat-icon {
    font-size: 18px;
    height: 18px;
    width: 18px;
    margin-right: $ios-spacing-xs;
  }
}

// 修复表格行高度对齐问题
.employee-records-container {
  // 当有敏感信息展开时，轻微扩大表格容器可视宽度（通过阴影与过渡体现）
  &.sensitive-expanded .employee-table-container {
    box-shadow: $ios-shadow-lg;
    transition: box-shadow $ios-transition-duration ease;
  }
}

.employee-table-container {
  .employee-table {
    .idcard,
    .bankcard {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      letter-spacing: 0.3px;
      white-space: nowrap;
      max-width: 160px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: max-width $ios-transition-duration ease;

      &.expanded {
        max-width: 360px;
      }
    }

    .muted {
      color: $ios-text-tertiary;
    }

    td.mat-cell {
      .mat-icon {
        color: $ios-primary;
      }
      button.mat-icon-button:hover .mat-icon {
        color: rgba(0, 122, 255, 0.8);
      }
    }
  }
}

// 三点图标按钮样式 - iOS风格
.more-actions-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: $ios-radius-md !important;
  background: transparent !important;
  border: none !important;
  transition: all $ios-transition-duration $ios-transition-timing-function !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  
  // iOS风格的悬停效果
  &:hover {
    background: rgba(0, 122, 255, 0.08) !important;
    transform: scale(1.05) !important;
  }
  
  // iOS风格的点击反馈
  &:active {
    transform: scale(0.95) !important;
    background: rgba(0, 122, 255, 0.12) !important;
  }
  
  // 图标样式
  .mat-icon {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    color: $ios-text-secondary !important;
    transition: color $ios-transition-duration $ios-transition-timing-function !important;
  }
  
  // 悬停时图标颜色变化
  &:hover .mat-icon {
    color: $ios-primary !important;
  }
  
  // 焦点状态
  &:focus {
    outline: none !important;
    background: rgba(0, 122, 255, 0.08) !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2) !important;
  }
}