feat:designer-new002

src/app/pages/designer/dashboard/dashboard.html

@@ -4,9 +4,9 @@
     
     <!-- 顶部导航 -->
     <nav class="dashboard-nav">
-      <button class="nav-btn active" (click)="switchDashboard('main')">工作台</button>
-      <button class="nav-btn" (click)="switchDashboard('skills')">能力雷达</button>
-      <button class="nav-btn" (click)="switchDashboard('personal')">个人看板</button>
+      <button class="nav-btn" [class.active]="activeDashboard === 'main'" (click)="switchDashboard('main')">工作台</button>
+      <button class="nav-btn" [class.active]="activeDashboard === 'skills'" (click)="switchDashboard('skills')">能力雷达</button>
+      <button class="nav-btn" [class.active]="activeDashboard === 'personal'" (click)="switchDashboard('personal')">个人看板</button>
     </nav>
   </header>
 
@@ -154,13 +154,7 @@
       </div>
     </section>
 
-    <!-- 底部信息分层展示 -->
-    <div class="bottom-sections">
-      <!-- 能力雷达区域 -->
-      <section class="bottom-section">
-        <app-skill-radar></app-skill-radar>
-      </section>
-    </div>
+
   </div>
 
   <!-- 能力雷达单独视图 -->

src/app/pages/designer/dashboard/dashboard.scss

@@ -22,39 +22,79 @@
   }
 }
 
-/* 顶部导航样式 */
+/* 顶部导航样式 - 重写为白色背景蓝色过渡效果 */
 .dashboard-nav {
   display: flex;
-  background-color: $ios-background-secondary;
-  border-radius: $ios-radius-lg;
-  padding: 4px;
+  background-color: #ffffff; /* 设置底色为白色 */
+  border-radius: 12px; /* 增大圆角 */
+  padding: 4px; /* 保留内边距 */
   margin-bottom: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
+  border: 1px solid #f0f0f0; /* 添加细微边框 */
   
   .nav-btn {
     flex: 1;
-    padding: 12px 24px;
+    padding: 14px 24px; /* 增加垂直内边距 */
     border: none;
-    border-radius: $ios-radius-md;
+    border-radius: 10px; /* 增大圆角 */
     background-color: transparent;
-    color: $ios-text-secondary;
-    font-size: 15px;
-    font-weight: $ios-font-weight-medium;
+    color: #666666; /* 默认文字颜色 */
+    font-size: 16px; /* 略微增大字体 */
+    font-weight: 500;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     font-family: $ios-font-family;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    text-align: center;
     
+    // 按钮点击效果
+    &:active {
+      transform: scale(0.97);
+    }
+    
+    // 活动状态样式
     &.active {
-      background-color: $ios-card-background;
-      color: $ios-primary;
-      box-shadow: $ios-shadow-sm;
+      color: #ffffff; /* 活动状态文字为白色 */
+      font-weight: 600;
+      
+      // 蓝色背景动画效果
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #007aff; /* 设置为iOS蓝色 */
+        border-radius: 10px;
+        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); /* 蓝色阴影效果 */
+        z-index: -1;
+        animation: buttonSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
     }
     
+    // 悬停效果
     &:hover:not(.active) {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: rgba(0, 122, 255, 0.05); /* 轻微蓝色背景 */
+      color: #007aff; /* 文字变为蓝色 */
     }
   }
 }
 
+// 按钮切换动画 - 优化效果
+@keyframes buttonSlideIn {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 .dashboard-main {
   display: grid;
   grid-template-columns: 1fr;

src/app/pages/designer/project-detail/project-detail.html

@@ -216,25 +216,26 @@
                   <button *ngIf="project.currentStage === '后期'" (click)="updateProjectStage('完成')" class="primary-btn">完成后期</button>
                 </div>
               </div>
+
+              <!-- 模型误差检查清单 - 仅在建模阶段显示 -->
+              <div *ngIf="project?.currentStage === '建模'" class="model-check-section">
+                <h3>模型误差检查清单</h3>
+                <div class="checklist">
+                  <div *ngFor="let item of modelCheckItems" class="checklist-item">
+                    <input type="checkbox" [checked]="item.isPassed" (change)="updateModelCheckItem(item.id, !item.isPassed)" class="custom-checkbox">
+                    <span class="checklist-text">{{ item.name }}</span>
+                    <span class="check-status" [class.passed]="item.isPassed" [class.failed]="!item.isPassed">
+                      {{ item.isPassed ? '通过' : '未通过' }}
+                    </span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- 阶段专属任务卡片 - 仅在对应节点显示 -->
         <div class="stage-specific-cards">
-          <!-- 误查检查单卡片 - 根据shouldShowCard方法在特定阶段显示 -->
-          <div *ngIf="shouldShowCard('modelCheck')" class="model-check-card card">
-            <h2>模型误差检查清单</h2>
-            <div class="checklist">
-              <div *ngFor="let item of modelCheckItems" class="checklist-item">
-                <input type="checkbox" [checked]="item.isPassed" (change)="updateModelCheckItem(item.id, !item.isPassed)" class="custom-checkbox">
-                <span class="checklist-text">{{ item.name }}</span>
-                <span class="check-status" [class.passed]="item.isPassed" [class.failed]="!item.isPassed">
-                  {{ item.isPassed ? '通过' : '未通过' }}
-                </span>
-              </div>
-            </div>
-          </div>
 
           <!-- 渲染阶段专属卡片 -->
           <div *ngIf="project?.currentStage === '渲染'" class="render-progress-card card">

src/app/pages/designer/project-detail/project-detail.scss

@@ -554,6 +554,164 @@ h4{font-size:$ios-font-size-sm;font-weight:$ios-font-weight-medium;color:$ios-te
   margin-bottom: 24px;
 }
 
+/* 客户反馈和设计师变更记录卡片并排布局 */
+.additional-info-section {
+  display: flex;
+  gap: $ios-spacing-xl;
+  margin-bottom: $ios-spacing-xl;
+  margin-top: $ios-spacing-xxl; /* 增加与上方内容的间距 */
+  width: 100%;
+  align-items: flex-start;
+  padding: $ios-spacing-xl; /* 添加内边距 */
+  background-color: $ios-background-secondary; /* 添加矩形背景 */
+  border-radius: $ios-radius-lg; /* 添加圆角 */
+  border: 1px solid $ios-border; /* 添加边框 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* 添加轻微阴影增加层次感 */
+}
+
+.feedback-card,
+.designer-change-card {
+  width: 50%;
+  margin: 0 !important;
+  min-height: 400px; /* 设置最小高度确保两个卡片高度一致 */
+  display: flex;
+  flex-direction: column;
+}
+
+/* 优化客户反馈卡片内部布局 */
+.feedback-card .card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.feedback-item {
+  background-color: $ios-background;
+  border-radius: $ios-radius-md;
+  padding: $ios-spacing-md;
+  margin-bottom: $ios-spacing-md;
+  border: 1px solid $ios-border;
+}
+
+.feedback-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: $ios-spacing-sm;
+}
+
+.feedback-meta {
+  display: flex;
+  gap: $ios-spacing-sm;
+  flex-wrap: wrap;
+}
+
+/* 优化设计师变更记录卡片内部布局 */
+.designer-change-card .card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.designer-change-card .change-actions {
+  display: flex;
+  gap: $ios-spacing-md;
+  margin-bottom: $ios-spacing-md;
+  flex-wrap: wrap;
+}
+
+.change-item {
+  background-color: $ios-background;
+  border-radius: $ios-radius-md;
+  padding: $ios-spacing-md;
+  margin-bottom: $ios-spacing-md;
+  border: 1px solid $ios-border;
+}
+
+.change-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $ios-spacing-sm;
+}
+
+/* 空状态样式优化 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $ios-spacing-xl;
+  height: 200px;
+  background-color: $ios-background-tertiary;
+  border-radius: $ios-radius-md;
+  margin-top: $ios-spacing-md;
+}
+
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: $ios-spacing-md;
+  opacity: 0.6;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .additional-info-section {
+    flex-direction: column;
+  }
+  
+  .feedback-card,
+  .designer-change-card {
+    width: 100%;
+    margin-bottom: $ios-spacing-xl !important;
+  }
+}
+
+/* 模型误差检查清单在制作流程进度卡片中的样式 */
+.model-check-section {
+  margin-top: $ios-spacing-lg;
+  padding: $ios-spacing-lg;
+  background-color: $ios-background;
+  border-radius: $ios-radius-md;
+  border-left: 4px solid $ios-primary;
+}
+
+.model-check-section h3 {
+  margin-top: 0;
+  margin-bottom: $ios-spacing-md;
+  color: $ios-text-primary;
+  font-size: $ios-font-size-base;
+  font-weight: $ios-font-weight-medium;
+}
+
+.model-check-section .checklist {
+  gap: $ios-spacing-sm;
+}
+
+.model-check-section .checklist-item {
+  padding: $ios-spacing-sm $ios-spacing-md;
+  background-color: $ios-background-tertiary;
+  transition: all 0.2s ease;
+}
+
+.model-check-section .checklist-item:hover {
+  background-color: #f0f0f0;
+  transform: translateX(4px);
+}
+
+.model-check-section .custom-checkbox {
+  width: 18px;
+  height: 18px;
+}
+
+.model-check-section .checklist-text {
+  font-size: $ios-font-size-sm;
+}
+
+.model-check-section .check-status {
+  font-size: $ios-font-size-xs;
+}
+
 .render-exception-section h3 {
   margin-top: 0;
   margin-bottom: 16px;