yss-project/src/app/pages/team-leader/dashboard/dashboard.html

<header class="dashboard-header">
  <h1>设计组长工作台</h1>
  <!-- 核心数据指标卡片 -->
  <div class="dashboard-metrics">
    <div class="metric-card" (click)="filterByStatus('overdue')">
      <div class="metric-icon warning">⚠️</div>
      <div class="metric-content">
        <div class="metric-count">{{ overdueProjects.length }}</div>
        <div class="metric-label">已延期项目</div>
      </div>
    </div>
    <div class="metric-card" (click)="filterByStatus('dueSoon')">
      <div class="metric-icon info">⏳</div>
      <div class="metric-content">
        <div class="metric-count">{{ dueSoonProjects.length }}</div>
        <div class="metric-label">临期项目(3天内)</div>
      </div>
    </div>
    <div class="metric-card" (click)="filterByStatus('pendingApproval')">
      <div class="metric-icon info">📋</div>
      <div class="metric-content">
        <div class="metric-count">{{ pendingApprovalProjects.length }}</div>
        <div class="metric-label">待组长确认项目</div>
      </div>
    </div>
    <div class="metric-card" (click)="filterByStatus('pendingAssignment')">
      <div class="metric-icon primary">🎯</div>
      <div class="metric-content">
        <div class="metric-count">{{ pendingAssignmentProjects.length }}</div>
        <div class="metric-label">待分配方案项目</div>
      </div>
    </div>
  </div>
</header>

<main class="dashboard-main">
  <!-- 项目监控大盘 -->
  <section class="monitoring-section">
    <div class="section-header">
      <h2>项目监控大盘</h2>
      <div class="section-actions">
        @if (selectedStatus !== 'all') {
          <button class="btn-link" (click)="resetStatusFilter()">返回全部项目</button>
        }
        <button class="btn-toggle-view" (click)="toggleView()">{{ showGanttView ? '返回看板' : '切换视图' }}</button>
      </div>
    </div>

    <!-- 新增：工作量概览（与筛选联动，按设计师/会员类型分组，堆叠显示紧急程度） -->
    <div class="workload-summary">
      <div class="summary-header">
        <h3>工作量概览</h3>
        <div class="summary-actions">
          <div class="dimension-switch">
            <button [class.active]="workloadDimension === 'designer'" (click)="setWorkloadDimension('designer')">按设计师</button>
            <button [class.active]="workloadDimension === 'member'" (click)="setWorkloadDimension('member')">按会员类型</button>
          </div>
        </div>
      </div>
      <div #workloadChartRef class="workload-chart"></div>
    </div>
    @if (showGanttView) {
      <div class="gantt-card">
        <div class="gantt-header">
          <div class="title">负载日历（甘特）</div>
          <div class="hint">
            @if (ganttMode === 'project') { 颜色标识紧急程度：红=高，橙=中，绿=低 } @else { 设计师排班：按项目数量由排满到空闲排列 }
          </div>
          <div class="scale-switch">
            <button [class.active]="ganttScale === 'day'" (click)="setGanttScale('day')">日</button>
            <button [class.active]="ganttScale === 'week'" (click)="setGanttScale('week')">周</button>
            <button [class.active]="ganttScale === 'month'" (click)="setGanttScale('month')">月</button>
          </div>
          <div class="search-box">
            <input type="search" placeholder="搜索项目/设计师/风格关键词" [(ngModel)]="searchTerm" (input)="onSearchChange()" (focus)="onSearchFocus()" (blur)="onSearchBlur()" />
            @if (showSuggestions) {
              <div class="suggestion-panel">
                @if (searchSuggestions.length > 0) {
                  <ul>
                    @for (suggest of searchSuggestions; track suggest.id) {
                      <li (mousedown)="selectSuggestion(suggest)">
                        <div class="line-1">
                          <span class="name">{{ suggest.name }}</span>
                          <span class="badge" [class.vip]="suggest.memberType==='vip'">{{ suggest.memberType==='vip' ? 'VIP' : '普通' }}</span>
                          <span class="urgency" [class]="'u-' + suggest.urgency">{{ getUrgencyLabel(suggest.urgency) }}</span>
                        </div>
                        <div class="line-2">
                          <span class="designer">{{ suggest.designerName || '未分配' }}</span>
                          <span class="deadline">{{ suggest.deadline | date:'MM-dd' }}</span>
                        </div>
                      </li>
                    }
                  </ul>
                } @else {
                  <div class="empty">抱歉，没有检索到哦</div>
                }
              </div>
            }
          </div>
          <div class="mode-switch" [attr.data-active]="ganttMode">
            <button [class.active]="ganttMode === 'project'" (click)="setGanttMode('project')">按项目</button>
            <button [class.active]="ganttMode === 'designer'" (click)="setGanttMode('designer')">设计师排班</button>
          </div>
        </div>
        <div #ganttChartRef class="gantt-chart"></div>
      </div>
    }

    @if (!showGanttView) {
      <div class="section-filters">
        <div class="search-box">
          <input type="search" class="input-search" placeholder="搜索项目/设计师/风格关键词" [(ngModel)]="searchTerm" (input)="onSearchChange()" (focus)="onSearchFocus()" (blur)="onSearchBlur()" />
          @if (showSuggestions) {
            <div class="suggestion-panel">
              @if (searchSuggestions.length > 0) {
                <ul>
                  @for (suggest of searchSuggestions; track suggest.id) {
                    <li (mousedown)="selectSuggestion(suggest)">
                      <div class="line-1">
                        <span class="name">{{ suggest.name }}</span>
                        <span class="badge" [class.vip]="suggest.memberType==='vip'">{{ suggest.memberType==='vip' ? 'VIP' : '普通' }}</span>
                        <span class="urgency" [class]="'u-' + suggest.urgency">{{ getUrgencyLabel(suggest.urgency) }}</span>
                      </div>
                      <div class="line-2">
                        <span class="designer">{{ suggest.designerName || '未分配' }}</span>
                        <span class="deadline">{{ suggest.deadline | date:'MM-dd' }}</span>
                      </div>
                    </li>
                  }
                </ul>
              } @else {
                <div class="empty">抱歉，没有检索到哦</div>
              }
            </div>
          }
        </div>
        <select (change)="filterProjects($event)" class="custom-select">
          <option value="all">全部项目</option>
          <option value="soft">软装项目</option>
          <option value="hard">硬装项目</option>
        </select>
        <select (change)="filterByUrgency($event)" class="custom-select">
          <option value="all">全部紧急程度</option>
          <option value="high">高</option>
          <option value="medium">中</option>
          <option value="low">低</option>
        </select>
        <select (change)="onStatusChange($event)" class="custom-select">
          <option value="all">全部状态</option>
          <option value="progress">进行中</option>
          <option value="completed">已完成</option>
          <option value="overdue">已延期</option>
          <option value="dueSoon">临期(3天内)</option>
          <option value="pendingApproval">待确认</option>
          <option value="pendingAssignment">待分配</option>
        </select>
        <select (change)="onDesignerChange($event)" class="custom-select">
          <option value="all">全部设计师</option>
          @for (d of designers; track d) {
            <option [value]="d">{{ d }}</option>
          }
        </select>
        <select (change)="onMemberTypeChange($event)" class="custom-select">
          <option value="all">全部会员</option>
          <option value="vip">VIP会员</option>
          <option value="normal">普通会员</option>
        </select>
        <!-- 新增：四大板块筛选 -->
        <select [(ngModel)]="selectedCorePhase" (change)="onCorePhaseChange($event)" class="custom-select">
          <option value="all">全部板块</option>
          @for (core of corePhases; track core.id) {
            <option [value]="core.id">{{ core.name }}</option>
          }
        </select>
        <!-- 支持数百项目的下拉筛选 -->
        <select [(ngModel)]="selectedProjectId" (change)="selectProject()" class="custom-select project-selector">
          <option value="">选择项目</option>
          @for (project of projects; track project.id) {
            <option [value]="project.id">{{ project.name }}</option>
          }
        </select>
        <!-- 新增：时间窗快捷筛选按钮组 -->
        <div class="time-window-buttons">
          <button [class.active]="selectedTimeWindow === 'all'" (click)="filterByTimeWindow('all')">全部</button>
          <button [class.active]="selectedTimeWindow === 'today'" (click)="filterByTimeWindow('today')">今天到期</button>
          <button [class.active]="selectedTimeWindow === 'threeDays'" (click)="filterByTimeWindow('threeDays')">3天内</button>
          <button [class.active]="selectedTimeWindow === 'sevenDays'" (click)="filterByTimeWindow('sevenDays')">7天内</button>
        </div>
      </div>
      
      <!-- 项目看板 - 横向展开10个项目阶段 -->
      <div class="project-kanban">
        <!-- 新增：公共横向滚动容器，保证表头与表体同步滚动 -->
        <div class="kanban-scroll">
          <!-- 阶段标题 -->
          <div class="kanban-header">
            @for (core of corePhases; track core.id) {
              <div class="kanban-column-header">
                <h3>{{ core.name }}</h3>
                <span class="stage-count">{{ getProjectCountByCorePhase(core.id) }}</span>
              </div>
            }
          </div>
          <!-- 项目卡片 -->
          <div class="kanban-body">
            @for (core of corePhases; track core.id) {
              <div class="kanban-column">
                @for (project of getProjectsByCorePhase(core.id); track project.id) {
                  <div class="project-card" 
                       (click)="viewProjectDetails(project.id)"
                       [class.overdue]="project.isOverdue" 
                       [class.high-urgency]="project.urgency === 'high'"
                       [class.due-soon]="project.dueSoon && !project.isOverdue">
                    <div class="project-card-header">
                      <h4 [routerLink]="['/team-leader/project-detail', project.id]" (click)="$event.stopPropagation()">{{ project.name }}</h4>
                      <div class="right-badges">
                        <span class="member-badge" [class.vip]="project.memberType === 'vip'">{{ project.memberType === 'vip' ? 'VIP' : '普通' }}</span>
                        <span class="project-urgency" [class]="'urgency-' + project.urgency">{{ getUrgencyLabel(project.urgency) }}</span>
                      </div>
                    </div>
                    <div class="project-card-content">
                      <p>负责人: {{ project.designerName || '未分配' }}</p>
                      <p class="deadline">{{ project.isOverdue ? '超期' + project.overdueDays + '天' : (project.dueSoon ? '临期: ' + (project.deadline | date:'MM-dd') : '截止: ' + (project.deadline | date:'MM-dd')) }}</p>
                    </div>
                    <div class="project-card-footer">
                      <button (click)="viewProjectDetails(project.id); $event.stopPropagation()" class="btn-view">查看详情</button>
                      @if (project.currentStage === 'pendingAssignment') {
                        <button (click)="quickAssignProject(project.id); $event.stopPropagation()" class="btn-assign">分配</button>
                      }
                      <!-- 新增：质量评审快捷操作（保留，不影响四大板块分类） -->
                      @if (project.currentStage === 'review' || project.currentStage === 'delivery') {
                        <div class="inline-actions">
                          <button class="btn-secondary" (click)="$event.stopPropagation(); reviewProjectQuality(project.id, 'excellent')">评为优秀</button>
                          <button class="btn-secondary" (click)="$event.stopPropagation(); reviewProjectQuality(project.id, 'qualified')">评为合格</button>
                          <button class="btn-secondary" (click)="$event.stopPropagation(); reviewProjectQuality(project.id, 'unqualified')">评为不合格</button>
                        </div>
                      }
                    </div>
                  </div>
                }
                @if (getProjectsByCorePhase(core.id).length === 0) {
                  <div class="empty-column">
                    <span class="empty-icon">📦</span>
                    <p>暂无项目</p>
                  </div>
                }
              </div>
            }
          </div>
        </div>
      </div>
    }
  </section>

  <!-- 待办任务优先级排序 -->
  <section class="todo-section">
    <div class="section-header">
      <h2>待办任务</h2>
      <!-- 新增：绩效与负载入口 -->
      <div class="section-actions">
        <button class="btn-link" (click)="viewPerformanceDetails()">查看绩效预警</button>
        <button class="btn-link" (click)="navigateToWorkloadCalendar()">打开负载日历</button>
      </div>
    </div>
    
    <div class="todo-list">
      @for (task of todoTasks; track task.id) {
        <div class="todo-item" [class.priority-high]="task.priority === 'high'" [class.priority-medium]="task.priority === 'medium'" [class.priority-low]="task.priority === 'low'">
          <div class="todo-header">
            <h3>{{ task.title }}</h3>
            <span class="task-priority">{{ getPriorityLabel(task.priority) }}</span>
          </div>
          <div class="todo-info">
            <p>{{ task.description }}</p>
            <p class="task-deadline">截止时间: {{ task.deadline | date:'yyyy-MM-dd HH:mm' }}</p>
          </div>
          <div class="todo-actions">
            <button (click)="navigateToTask(task)" class="btn-handle">处理任务</button>
          </div>
        </div>
      }
    </div>
  </section>

  <!-- 超期项目提醒 -->
  @if (showAlert && overdueProjects.length > 0) {
    <div class="overdue-alert">
      <div class="alert-content">
        <h3>⚠️ 超期项目提醒</h3>
        <ul>
          @for (project of overdueProjects.slice(0, 3); track $index) {
            <li>
              {{ project.name }} ({{ project.designerName }} 负责) - 超期{{ project.overdueDays }}天
            </li>
          }
        </ul>
        <div class="alert-actions">
          <button (click)="viewAllOverdueProjects()" class="btn-view-all">查看全部</button>
          <button (click)="closeAlert()" class="btn-close">关闭</button>
        </div>
      </div>
    </div>
  }
  @if (urgentPinnedProjects && urgentPinnedProjects.length > 0) {
    <div class="urgent-pinned">
      <div class="pinned-title">紧急任务固定区（超期 + 高紧急）</div>
      <div class="pinned-list">
        @for (p of urgentPinnedProjects.slice(0, 3); track $index) {
          <div class="pinned-item" (click)="filterByStatus('overdue')">
            <span class="dot dot-high"></span>
            <span class="name">{{ p.name }}</span>
            <span class="meta">{{ p.designerName || '未分配' }} · 超期{{ p.overdueDays }}天</span>
          </div>
        }
        @if (urgentPinnedProjects.length > 3) {
          <button class="btn-view-all" (click)="viewAllOverdueProjects()">更多…</button>
        }
      </div>
    </div>
  }
</main>

<!-- 员工详情面板 -->
@if (showEmployeeDetailPanel && selectedEmployeeDetail) {
  <div class="employee-detail-overlay" (click)="closeEmployeeDetailPanel()">
    <div class="employee-detail-panel" (click)="$event.stopPropagation()">
      <!-- 面板头部 -->
      <div class="panel-header">
        <h3 class="panel-title">
          <svg class="icon-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
          {{ selectedEmployeeDetail.name }} 详情
        </h3>
        <button class="btn-close" (click)="closeEmployeeDetailPanel()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>

      <!-- 面板内容 -->
      <div class="panel-content">
        <!-- 负载概况栏 -->
        <div class="section workload-section">
          <div class="section-header">
            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="9" y1="9" x2="15" y2="9"></line>
              <line x1="9" y1="15" x2="15" y2="15"></line>
            </svg>
            <h4>负载概况</h4>
          </div>
          <div class="workload-info">
            <div class="workload-stat">
              <span class="stat-label">当前负责项目数：</span>
              <span class="stat-value" [class]="selectedEmployeeDetail.currentProjects >= 3 ? 'high-workload' : 'normal-workload'">
                {{ selectedEmployeeDetail.currentProjects }} 个
              </span>
            </div>
            @if (selectedEmployeeDetail.projectNames.length > 0) {
              <div class="project-list">
                <span class="project-label">核心项目：</span>
                <div class="project-tags">
                  @for (projectName of selectedEmployeeDetail.projectNames; track $index) {
                    <span class="project-tag">{{ projectName }}</span>
                  }
                  @if (selectedEmployeeDetail.currentProjects > selectedEmployeeDetail.projectNames.length) {
                    <span class="project-tag more">+{{ selectedEmployeeDetail.currentProjects - selectedEmployeeDetail.projectNames.length }}</span>
                  }
                </div>
              </div>
            }
          </div>
        </div>

        <!-- 请假明细栏 -->
        <div class="section leave-section">
          <div class="section-header">
            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <h4>请假明细（未来7天）</h4>
          </div>
          <div class="leave-table">
            @if (selectedEmployeeDetail.leaveRecords.length > 0) {
              <table>
                <thead>
                  <tr>
                    <th>日期</th>
                    <th>状态</th>
                    <th>备注</th>
                  </tr>
                </thead>
                <tbody>
                  @for (record of selectedEmployeeDetail.leaveRecords; track record.id) {
                    <tr [class]="record.isLeave ? 'leave-day' : 'work-day'">
                      <td>{{ record.date | date:'M月d日' }}</td>
                      <td>
                        <span class="status-badge" [class]="record.isLeave ? 'leave' : 'work'">
                          {{ record.isLeave ? '请假' : '正常' }}
                        </span>
                      </td>
                      <td>{{ record.isLeave ? getLeaveTypeText(record.leaveType) : '-' }}</td>
                    </tr>
                  }
                </tbody>
              </table>
            } @else {
              <div class="no-leave">
                <svg class="no-data-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                  <line x1="9" y1="9" x2="9.01" y2="9"></line>
                  <line x1="15" y1="9" x2="15.01" y2="9"></line>
                </svg>
                <p>未来7天无请假安排</p>
              </div>
            }
          </div>
        </div>

        <!-- 红色标记说明 -->
        <div class="section explanation-section">
          <div class="section-header">
            <svg class="section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            <h4>红色标记说明</h4>
          </div>
          <div class="explanation-content">
            <p class="explanation-text">{{ selectedEmployeeDetail.redMarkExplanation }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
}