Explorar el Código

feat: add view toggle button for dashboard with improved styling

- Introduced a new view toggle button to switch between Gantt and timeline views, enhancing user experience.
- Updated the dashboard layout to include a sticky view toggle bar for easy access.
- Enhanced button styles for better visibility and interaction, including responsive adjustments for smaller screens.
- Set the default view to timeline for improved initial user experience.
0235711 hace 4 días
padre
commit
fd2aa001b4

+ 9 - 1
src/app/pages/team-leader/dashboard/dashboard.html

@@ -74,7 +74,6 @@
         @if (selectedStatus !== 'all') {
           <button class="btn-link" (click)="resetStatusFilter()">返回全部项目</button>
         }
-        <button class="btn-toggle-view" (click)="toggleView()">{{ showGanttView ? '返回看板' : '切换视图' }}</button>
       </div>
     </div>
 
@@ -98,6 +97,15 @@
       </div>
       <div class="gantt-container" #workloadGanttContainer></div>
     </div>
+    
+    <!-- 🆕 视图切换按钮(固定在此位置便于切换) -->
+    <div class="view-toggle-bar">
+      <button class="btn-toggle-view" (click)="toggleView()">
+        <span class="toggle-icon">{{ showGanttView ? '📋' : '📊' }}</span>
+        <span class="toggle-text">{{ showGanttView ? '切换到项目看板' : '切换到时间轴视图' }}</span>
+      </button>
+    </div>
+    
     <!-- 项目负载时间轴(切换视图时显示) -->
     @if (showGanttView) {
       <app-project-timeline 

+ 72 - 0
src/app/pages/team-leader/dashboard/dashboard.scss

@@ -2398,3 +2398,75 @@
     }
   }
 }
+
+// 🆕 视图切换按钮栏样式
+.view-toggle-bar {
+  position: sticky;
+  top: 50px; // 根据导航栏高度调整
+  z-index: 99;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  padding: 16px 20px;
+  margin: 20px 0;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  .btn-toggle-view {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 32px;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    
+    .toggle-icon {
+      font-size: 20px;
+      transition: transform 0.3s ease;
+    }
+    
+    .toggle-text {
+      letter-spacing: 0.5px;
+    }
+    
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+      
+      .toggle-icon {
+        transform: scale(1.2) rotate(5deg);
+      }
+    }
+    
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .view-toggle-bar {
+    top: 45px;
+    padding: 12px 16px;
+    margin: 16px 0;
+    
+    .btn-toggle-view {
+      padding: 10px 24px;
+      font-size: 14px;
+      
+      .toggle-icon {
+        font-size: 18px;
+      }
+    }
+  }
+}

+ 2 - 2
src/app/pages/team-leader/dashboard/dashboard.ts

@@ -234,8 +234,8 @@ export class Dashboard implements OnInit, OnDestroy {
     { id: 'delivery', name: '交付执行', order: 3 },      // 建模、渲染、后期/评审/修改
     { id: 'aftercare', name: '售后', order: 4 }          // 交付完成 → 售后
   ];
-  // 甘特视图开关与实例引用
-  showGanttView: boolean = false;
+  // 甘特视图开关与实例引用(默认显示时间轴视图)
+  showGanttView: boolean = true;
   private ganttChart: any | null = null;
   @ViewChild('ganttChartRef', { static: false }) ganttChartRef!: ElementRef<HTMLDivElement>;
   // 工作负载甘特图引用