feet：hr

src/app/pages/hr/assets/assets.scss

@@ -404,12 +404,235 @@ $transition: all 0.2s ease;
   }
 }
 
-// 自定义对话框样式
+// 自定义对话框样式 - 以深蓝色和白色为主色调
+.add-employee-dialog-container {
+  .mat-dialog-container {
+    background-color: #1e293b;
+    color: white;
+    border-radius: 12px;
+    padding: 0;
+    overflow: hidden;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  }
+
+  .mat-dialog-title {
+    color: white;
+    font-size: 24px;
+    font-weight: 600;
+    padding: 24px 24px 0;
+    margin: 0;
+  }
+
+  .mat-dialog-content {
+    padding: 24px;
+    background-color: white;
+    color: #1e293b;
+    margin: 0;
+  }
+
+  .mat-dialog-actions {
+    padding: 16px 24px;
+    background-color: #1e293b;
+    justify-content: flex-end;
+    margin: 0;
+  }
+}
+
 .custom-dialog {
+  // 对话框容器样式
   .mat-dialog-container {
+    border-radius: $border-radius;
+    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15), 0 10px 15px -6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    background-color: $bg-primary; // 使用白色作为主背景
+    border: 2px solid $primary-color; // 深蓝色边框
+    max-width: 700px; // 增加对话框宽度
+    width: 95vw;
+    animation: slideIn 0.3s ease-out; // 添加动画效果
+  }
+  
+  // 对话框标题样式
+  h2 {
+    font-size: 24px; // 增大标题字体
+    font-weight: 700;
+    color: $primary-color; // 使用深蓝色标题
+    margin: 0;
+  }
+  
+  // 输入框样式
+  .mat-input-element {
+    color: $text-primary;
+    font-size: 16px; // 增大输入框字体
+    font-weight: 500;
+  }
+  
+  .mat-form-field {
+    width: 100%;
+    transition: all 0.2s ease;
+  }
+  
+  .mat-form-field-appearance-fill .mat-form-field-flex {
+    background-color: $bg-primary; // 输入框白色背景
+    border-radius: $border-radius;
+    border: 1px solid $border-color;
+    transition: all 0.2s ease;
+  }
+  
+  .mat-form-field-appearance-fill .mat-form-field-outline {
+    border: none;
+  }
+  
+  .mat-form-field-appearance-fill .mat-form-field-underline {
+    display: none;
+  }
+  
+  // 输入框聚焦效果增强
+  .mat-form-field-appearance-fill .mat-form-field-focus-overlay {
+    background-color: rgba(30, 64, 175, 0.08);
+  }
+  
+  .mat-form-field:focus-within .mat-form-field-flex {
+    border-color: $primary-color;
+    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
+  }
+  
+  // 选择框样式增强
+  .mat-select {
+    color: $text-primary;
+    font-size: 16px;
+  }
+  
+  .mat-select-panel {
+    background-color: $bg-primary;
     border-radius: $border-radius;
     box-shadow: $shadow-lg;
+    margin-top: 8px;
+    border: 1px solid $border-color;
+    animation: slideIn 0.2s ease-out;
+  }
+  
+  .mat-option {
+    color: $text-primary;
+    padding: 12px 20px; // 增加选项间距
+    font-size: 16px; // 增大选项字体
+    font-weight: 500;
+    transition: all 0.2s ease;
+    border-radius: $border-radius;
+    margin: 2px 8px;
+    
+    &:hover {
+      background-color: rgba(30, 64, 175, 0.1);
+      transform: translateX(4px); // 悬停时轻微移动
+    }
+    
+    &.mat-selected {
+      background-color: color-mix(in srgb, $primary-color 20%, transparent);
+      color: $primary-color;
+      font-weight: 600;
+    }
+    
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+  
+  // 按钮样式优化
+  button[mat-button] {
+    color: $text-secondary;
+    font-size: 16px; // 增大按钮字体
+    font-weight: 600;
+    padding: 10px 24px;
+    transition: all 0.2s ease;
+    border-radius: $border-radius;
+    
+    &:hover {
+      color: $primary-color;
+      background-color: rgba(30, 64, 175, 0.08);
+      transform: translateY(-1px);
+    }
+    
+    &:active {
+      transform: translateY(0);
+    }
+  }
+  
+  button[mat-raised-button][color="primary"] {
+    background-color: $primary-color;
+    color: white;
+    font-size: 16px; // 增大按钮字体
+    font-weight: 600;
+    border-radius: $border-radius;
+    padding: 12px 32px;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
+    
+    &:hover {
+      background-color: $primary-light;
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(30, 64, 175, 0.4);
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 10px rgba(30, 64, 175, 0.3);
+    }
+    
+    &:disabled {
+      background-color: $text-tertiary;
+      transform: none;
+      box-shadow: none;
+    }
+  }
+  
+  // 日期选择器样式增强
+  .mat-datepicker-toggle {
+    color: $text-tertiary;
+    transition: all 0.2s ease;
+    
+    &:hover {
+      color: $primary-color;
+      transform: scale(1.1);
+    }
+  }
+  
+  .mat-datepicker-content {
+    border-radius: $border-radius;
     overflow: hidden;
+    border: 1px solid $border-color;
+  }
+  
+  // 表单标签样式增强
+  label {
+    color: $text-primary;
+    font-weight: 600;
+    font-size: 16px;
+    margin-bottom: 8px;
+    display: block;
+  }
+  
+  // 必填标记样式
+  .required-mark {
+    color: $error-color;
+    font-size: 16px;
+    margin-left: 4px;
+  }
+  
+  // 错误状态样式增强
+  .mat-error {
+    color: $error-color;
+    font-size: 14px;
+    margin-top: 6px;
+    display: block;
+    font-weight: 500;
+  }
+  
+  .mat-form-field-invalid .mat-form-field-flex {
+    border-color: $error-color;
+    background-color: rgba(239, 68, 68, 0.05);
+  }
+  
+  .mat-form-field-invalid .mat-input-element {
+    color: $error-color;
   }
 }
 

src/app/pages/hr/assets/assets.ts

@@ -42,17 +42,17 @@ import { Employee, Department, Position, Contract, Certificate, EmployeeStatus }
     <form [formGroup]="employeeForm" (ngSubmit)="onSubmit()" class="employee-form">
       <div class="form-row">
         <div class="form-group">
-          <label>员工姓名 *</label>
+          <label>员工姓名 <span class="required-mark">*</span></label>
           <input matInput formControlName="name" placeholder="请输入姓名">
         </div>
         <div class="form-group">
-          <label>工号 *</label>
+          <label>工号 <span class="required-mark">*</span></label>
           <input matInput formControlName="employeeId" placeholder="请输入工号">
         </div>
       </div>
       <div class="form-row">
         <div class="form-group">
-          <label>部门 *</label>
+          <label>部门 <span class="required-mark">*</span></label>
           <mat-select formControlName="department">
             <mat-option *ngFor="let dept of departments" [value]="dept.name">
               {{ dept.name }}
@@ -60,17 +60,17 @@ import { Employee, Department, Position, Contract, Certificate, EmployeeStatus }
           </mat-select>
         </div>
         <div class="form-group">
-          <label>岗位 *</label>
+          <label>岗位 <span class="required-mark">*</span></label>
           <input matInput formControlName="position" placeholder="请输入岗位">
         </div>
       </div>
       <div class="form-row">
         <div class="form-group">
-          <label>手机号码 *</label>
+          <label>手机号码 <span class="required-mark">*</span></label>
           <input matInput formControlName="phone" placeholder="请输入手机号码">
         </div>
         <div class="form-group">
-          <label>邮箱 *</label>
+          <label>邮箱 <span class="required-mark">*</span></label>
           <input matInput formControlName="email" placeholder="请输入邮箱">
         </div>
       </div>
@@ -91,13 +91,13 @@ import { Employee, Department, Position, Contract, Certificate, EmployeeStatus }
       </div>
       <div class="form-row">
         <div class="form-group">
-          <label>入职日期 *</label>
+          <label>入职日期 <span class="required-mark">*</span></label>
           <input matInput [matDatepicker]="hireDatePicker" formControlName="hireDate">
           <mat-datepicker-toggle matSuffix [for]="hireDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #hireDatePicker></mat-datepicker>
         </div>
         <div class="form-group">
-          <label>状态 *</label>
+          <label>状态 <span class="required-mark">*</span></label>
           <mat-select formControlName="status">
             <mat-option value="在职">在职</mat-option>
             <mat-option value="试用期">试用期</mat-option>
@@ -116,39 +116,84 @@ import { Employee, Department, Position, Contract, Certificate, EmployeeStatus }
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 24px;
-      padding-bottom: 16px;
-      border-bottom: 1px solid #e5e7eb;
+      margin-bottom: 32px;
+      padding-bottom: 20px;
+      border-bottom: 2px solid #e5e7eb;
     }
+    
     .close-btn {
       background: none;
       border: none;
       cursor: pointer;
-      color: #6b7280;
-      padding: 4px;
+      color: #9ca3af;
+      padding: 6px;
+      border-radius: 50%;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        color: #1f2937;
+        background-color: #f3f4f6;
+        transform: scale(1.15);
+      }
+      
+      &:active {
+        transform: scale(0.95);
+      }
     }
+    
     .employee-form {
-      max-width: 600px;
+      max-width: 100%;
     }
+    
     .form-row {
       display: flex;
-      gap: 16px;
-      margin-bottom: 16px;
+      gap: 24px;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
     }
+    
     .form-group {
       flex: 1;
+      min-width: 250px;
     }
+    
     label {
       display: block;
-      margin-bottom: 4px;
-      font-weight: 500;
+      margin-bottom: 8px;
+      font-weight: 600;
       color: #374151;
+      font-size: 16px;
     }
+    
+    .required-mark {
+      color: #ef4444;
+      font-size: 16px;
+    }
+    
     .dialog-actions {
       display: flex;
       justify-content: flex-end;
-      gap: 12px;
-      margin-top: 24px;
+      gap: 16px;
+      margin-top: 32px;
+      padding-top: 20px;
+      border-top: 1px solid #e5e7eb;
+    }
+    
+    // 表单元素聚焦效果
+    .mat-form-field-appearance-fill .mat-form-field-focus-overlay {
+      background-color: rgba(30, 64, 175, 0.05);
+    }
+    
+    // 错误状态样式
+    .mat-error {
+      color: #ef4444;
+      font-size: 14px;
+      margin-top: 4px;
+      display: block;
+    }
+    
+    .mat-form-field-invalid .mat-input-element {
+      color: #ef4444;
     }
   `]
 }) class AddEmployeeDialog {
@@ -224,7 +269,7 @@ const generateMockEmployees = (): Employee[] => {
       birthDate: new Date(1980 + Math.floor(Math.random() * 20), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1),
       hireDate,
       status,
-      avatar: `https://via.placeholder.com/40?text=${i}`,
+      avatar: `https://picsum.photos/seed/emp${i}/40/40`,
       contract: {
         id: `contract-${i}`,
         startDate: hireDate,
@@ -348,7 +393,7 @@ const generateMockEmployees = (): Employee[] => {
         const newEmployee: Employee = {
           id: `emp-${Date.now()}`,
           ...result,
-          avatar: `https://via.placeholder.com/40?text=E`,
+          avatar: `https://picsum.photos/seed/emp${Date.now()}/40/40`,
           contract: {
             id: `contract-${Date.now()}`,
             startDate: result.hireDate,