浏览代码

feat(progress-bar): 添加进度条组件并修复样式冲突

解决合并冲突并统一使用ios主题变量
添加新的进度条组件模板
清理合并产生的冲突标记
0235711 15 小时之前
父节点
当前提交
2345c4be0d
共有 2 个文件被更改,包括 47 次插入66 次删除
  1. 12 0
      src/app/shared/components/progress-bar/progress-bar.component.html
  2. 35 66
      src/app/shared/styles/_hr-dialog.scss

+ 12 - 0
src/app/shared/components/progress-bar/progress-bar.component.html

@@ -0,0 +1,12 @@
+<div class="progress-bar">
+  <div class="progress-sections">
+    @for (section of sections; track section.key; let i = $index) {
+      <div class="section" [class]="getSectionStatus(section.key)">
+        <div class="label">{{section.label}}</div>
+        @if (i < sections.length - 1) {
+          <div class="connector"></div>
+        }
+      </div>
+    }
+  </div>
+</div>

+ 35 - 66
src/app/shared/styles/_hr-dialog.scss

@@ -1,11 +1,5 @@
 @use 'variables';
-<<<<<<< HEAD
-@use 'ios-theme' as *;
- 
-=======
 @use 'ios-theme' as ios;
-
->>>>>>> 19d7e75991c3c7dd80d08a5b73c7271184cfc708
 // HR模块通用对话框样式
 // 基于新增员工面板的设计,提供统一的对话框外观
 
@@ -136,13 +130,12 @@
       }
     }
 
-<<<<<<< HEAD
     // 表单字段样式
     mat-form-field {
-      margin-bottom: $ios-spacing-xs;
+      margin-bottom: ios.$ios-spacing-xs;
       
       .mat-mdc-form-field-outline {
-        border-radius: $ios-radius-md;
+        border-radius: ios.$ios-radius-md;
         border-color: rgba(0, 122, 255, 0.2);
         transition: all 0.3s ease;
       }
@@ -152,63 +145,63 @@
       }
 
       &.mat-focused .mat-mdc-form-field-outline {
-        border-color: $ios-primary;
+        border-color: ios.$ios-primary;
         border-width: 2px;
         box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
       }
 
       .mat-mdc-form-field-label {
-        color: $ios-text-secondary;
-        font-family: $ios-font-family;
-        font-weight: $ios-font-weight-medium;
+        color: ios.$ios-text-secondary;
+        font-family: ios.$ios-font-family;
+        font-weight: ios.$ios-font-weight-medium;
       }
 
       .mat-mdc-input-element {
-        color: $ios-text-primary;
-        font-family: $ios-font-family;
-        padding: $ios-spacing-sm;
+        color: ios.$ios-text-primary;
+        font-family: ios.$ios-font-family;
+        padding: ios.$ios-spacing-sm;
       }
 
       .mat-mdc-form-field-error.error-message {
-        color: $ios-error;
-        font-family: $ios-font-family;
-        font-size: $ios-font-size-caption-1;
-        margin-top: $ios-spacing-xs;
+        color: ios.$ios-error;
+        font-family: ios.$ios-font-family;
+        font-size: ios.$ios-font-size-caption-1;
+        margin-top: ios.$ios-spacing-xs;
       }
 
       // 选择框样式
       .mat-mdc-select-value {
-        color: $ios-text-primary;
-        font-family: $ios-font-family;
-        padding: $ios-spacing-sm 0;
+        color: ios.$ios-text-primary;
+        font-family: ios.$ios-font-family;
+        padding: ios.$ios-spacing-sm 0;
       }
 
       .mat-mdc-select-arrow {
-        color: $ios-text-secondary;
+        color: ios.$ios-text-secondary;
         transition: transform 0.3s ease;
       }
 
       &.mat-focused .mat-mdc-select-arrow {
         transform: rotate(180deg);
-        color: $ios-primary;
+        color: ios.$ios-primary;
       }
 
       // 后缀图标样式
       .mat-mdc-form-field-icon-suffix {
-        color: $ios-text-secondary;
+        color: ios.$ios-text-secondary;
         transition: color 0.3s ease;
       }
 
       &:hover .mat-mdc-form-field-icon-suffix {
-        color: $ios-primary;
+        color: ios.$ios-primary;
       }
-=======
+    }
+
     // 信息展示区域
     .info-section {
       display: flex;
       flex-direction: column;
       gap: ios.$ios-spacing-md;
->>>>>>> 19d7e75991c3c7dd80d08a5b73c7271184cfc708
     }
 
     .info-card {
@@ -252,12 +245,11 @@
           box-shadow: ios.$ios-shadow-md;
         }
 
-<<<<<<< HEAD
         .preview-header {
           display: flex;
           align-items: center;
-          gap: $ios-spacing-md;
-          margin-bottom: $ios-spacing-md;
+          gap: ios.$ios-spacing-md;
+          margin-bottom: ios.$ios-spacing-md;
 
           .preview-icon {
             width: 32px;
@@ -265,7 +257,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: $ios-radius-md;
+            border-radius: ios.$ios-radius-md;
             background: rgba(0, 122, 255, 0.1);
             transition: all 0.3s ease;
 
@@ -279,28 +271,28 @@
             flex: 1;
 
             .preview-category {
-              font-size: $ios-font-size-caption-1;
-              color: $ios-text-secondary;
-              font-family: $ios-font-family;
+              font-size: ios.$ios-font-size-caption-1;
+              color: ios.$ios-text-secondary;
+              font-family: ios.$ios-font-family;
               text-transform: uppercase;
               letter-spacing: 0.5px;
-              margin-bottom: $ios-spacing-xs;
+              margin-bottom: ios.$ios-spacing-xs;
             }
 
             .preview-name {
-              font-size: $ios-font-size-body;
-              color: $ios-text-primary;
-              font-family: $ios-font-family;
-              font-weight: $ios-font-weight-medium;
+              font-size: ios.$ios-font-size-body;
+              color: ios.$ios-text-primary;
+              font-family: ios.$ios-font-family;
+              font-weight: ios.$ios-font-weight-medium;
             }
           }
-=======
+        }
+
         .content-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: ios.$ios-spacing-md;
           margin-bottom: ios.$ios-spacing-md;
->>>>>>> 19d7e75991c3c7dd80d08a5b73c7271184cfc708
         }
 
         .content-item {
@@ -310,37 +302,15 @@
           background: #f8f9fa;
           border-radius: ios.$ios-radius-md;
 
-<<<<<<< HEAD
-          .metric-name {
-            font-size: $ios-font-size-caption-1;
-            color: $ios-text-secondary;
-            font-family: $ios-font-family;
-=======
           .label {
             font-size: ios.$ios-font-size-caption-1;
             color: ios.$ios-text-secondary;
             font-family: ios.$ios-font-family;
->>>>>>> 19d7e75991c3c7dd80d08a5b73c7271184cfc708
             text-transform: uppercase;
             letter-spacing: 0.5px;
             margin-bottom: ios.$ios-spacing-xs;
           }
 
-<<<<<<< HEAD
-          .metric-value {
-            font-size: $ios-font-size-title-2;
-            font-weight: $ios-font-weight-bold;
-            color: $ios-primary;
-            font-family: $ios-font-family;
-            display: flex;
-            align-items: baseline;
-            gap: $ios-spacing-xs;
-
-            .metric-unit {
-              font-size: $ios-font-size-caption-1;
-              color: $ios-text-secondary;
-              font-weight: $ios-font-weight-regular;
-=======
           .value {
             font-size: ios.$ios-font-size-body;
             color: ios.$ios-text-primary;
@@ -376,7 +346,6 @@
               font-size: ios.$ios-font-size-caption-1;
               color: ios.$ios-text-secondary;
               font-weight: ios.$ios-font-weight-regular;
->>>>>>> 19d7e75991c3c7dd80d08a5b73c7271184cfc708
             }
           }
         }