yss-project/src/app/pages/team-leader/dashboard/components/todo-section/todo-section.component.html

<section class="todo-section todo-section-dual">
  <div class="section-header">
    <h2>待办事项</h2>
    <button 
      class="btn-refresh" 
      (click)="refreshTodoTasks()"
      [disabled]="loadingTodoTasks || loadingUrgentEvents"
      title="刷新待办事项">
      <svg viewBox="0 0 24 24" width="16" height="16" [class.rotating]="loadingTodoTasks || loadingUrgentEvents">
        <path fill="currentColor" d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
      </svg>
    </button>
  </div>
  
  <!-- 🆕 双栏容器 -->
  <div class="todo-dual-columns">
    <!-- ========== 左栏：待办问题 ========== -->
    <div class="todo-column todo-column-issues">
      <div class="column-header">
        <h3>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
          </svg>
          待办问题
          <span class="task-count" *ngIf="todoTasksFromIssues.length > 0">({{ todoTasksFromIssues.length }})</span>
        </h3>
        <span class="column-subtitle">来自项目问题板块</span>
      </div>
  
      <!-- 加载状态 -->
      <div class="loading-state" *ngIf="loadingTodoTasks">
        <svg class="spinner" viewBox="0 0 50 50">
          <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
        </svg>
        <p>加载待办任务中...</p>
      </div>
      
      <!-- 错误状态 -->
      <div class="error-state" *ngIf="!loadingTodoTasks && todoTaskError">
        <svg viewBox="0 0 24 24" width="48" height="48" fill="#ef4444">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
        </svg>
        <p>{{ todoTaskError }}</p>
        <button class="btn-retry" (click)="refreshTodoTasks()">重试</button>
      </div>
      
      <!-- 空状态 -->
      <div class="empty-state" *ngIf="!loadingTodoTasks && !todoTaskError && todoTasksFromIssues.length === 0">
        <svg viewBox="0 0 24 24" width="64" height="64" fill="#d1d5db">
          <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
        </svg>
        <p>暂无待办任务</p>
        <p class="hint">所有项目问题都已处理完毕 🎉</p>
      </div>
      
      <!-- 待办任务列表 -->
      <div class="todo-list-compact" *ngIf="!loadingTodoTasks && !todoTaskError && todoTasksFromIssues.length > 0">
        <div class="todo-item-compact" *ngFor="let task of todoTasksFromIssues" [attr.data-priority]="task.priority">
          <!-- 左侧优先级色条 -->
          <div class="priority-indicator" [attr.data-priority]="task.priority"></div>
          
          <!-- 任务内容 -->
          <div class="task-content">
            <!-- 标题行 -->
            <div class="task-header">
              <span class="task-title">{{ task.title }}</span>
              <div class="task-badges">
                <span class="badge badge-priority" [attr.data-priority]="task.priority">
                  {{ getPriorityConfig(task.priority).label }}
                </span>
                <span class="badge badge-type">{{ getIssueTypeLabel(task.type) }}</span>
              </div>
            </div>
            
            <!-- 项目信息行 -->
            <div class="task-meta">
              <span class="project-info">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
                  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                项目: {{ task.projectName }}
                <ng-container *ngIf="task.relatedSpace"> | {{ task.relatedSpace }}</ng-container>
                <ng-container *ngIf="task.relatedStage"> | {{ task.relatedStage }}</ng-container>
              </span>
            </div>
            
            <!-- 底部信息行 -->
            <div class="task-footer">
              <span class="time-info" [title]="formatExactTime(task.createdAt)">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
                  <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                </svg>
                创建于 {{ formatRelativeTime(task.createdAt) }}
              </span>
              
              <span class="assignee-info">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
                  <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
                指派给: {{ task.assigneeName }}
              </span>
            </div>
          </div>
          
          <!-- 右侧操作按钮 -->
          <div class="task-actions">
            <button 
              class="btn-action btn-view" 
              (click)="onNavigateToIssue(task)"
              title="查看详情">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
              </svg>
              查看详情
            </button>
            <button 
              class="btn-action btn-mark-read" 
              (click)="onMarkAsRead(task)"
              title="标记已读">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
                <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
              </svg>
              标记已读
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- ========== 左栏结束 ========== -->
    
    <!-- ========== 右栏：紧急事件 ========== -->
    <div class="todo-column todo-column-urgent">
      <div class="column-header">
        <h3>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
          </svg>
          紧急事件监控
          <span class="task-count urgent" *ngIf="urgentEvents.length > 0">({{ urgentEvents.length }})</span>
        </h3>
        <span class="column-subtitle">自动计算截止/逾期</span>
      </div>
      
      <!-- 一级筛选 Tab -->
      <div class="filter-tabs" *ngIf="!loadingUrgentEvents && urgentEvents.length > 0">
        <div class="filter-tab" 
             [class.active]="urgentEventCategoryFilter === 'all'"
             (click)="filterUrgentEventsByTag('all')">
          全部 <span class="count-badge">{{ urgentEvents.length }}</span>
        </div>
        <div class="filter-tab" 
             [class.active-customer]="urgentEventCategoryFilter === 'customer'"
             (click)="filterUrgentEventsByTag('customer')">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
          客户 <span class="count-badge">{{ getTagCount('customer') }}</span>
        </div>
        <div class="filter-tab" 
             [class.active-phase]="urgentEventCategoryFilter === 'phase'"
             (click)="filterUrgentEventsByTag('phase')">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
          阶段逾期 <span class="count-badge">{{ getTagCount('phase') }}</span>
        </div>
        <div class="filter-tab" 
             [class.active]="urgentEventCategoryFilter === 'review'"
             (click)="filterUrgentEventsByTag('review')">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h4v-2zm3 6H6v-2h12v2zm0-4H6V9h12v2z"/></svg>
          小图/决策 <span class="count-badge">{{ getTagCount('review') }}</span>
        </div>
        <div class="filter-tab" 
             [class.active-delivery]="urgentEventCategoryFilter === 'delivery'"
             (click)="filterUrgentEventsByTag('delivery')">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
          交付延期 <span class="count-badge">{{ getTagCount('delivery') }}</span>
        </div>
      </div>
      
      <!-- 二级筛选 (阶段细分) -->
      <div class="sub-filters" *ngIf="urgentEventCategoryFilter === 'phase'">
        <span class="sub-label">阶段筛选:</span>
        <span class="sub-chip" [class.active]="!activePhaseFilter" (click)="togglePhaseFilter('')">全部</span>
        <span class="sub-chip" [class.active]="activePhaseFilter === 'modeling'" (click)="togglePhaseFilter('modeling')">建模</span>
        <span class="sub-chip" [class.active]="activePhaseFilter === 'rendering'" (click)="togglePhaseFilter('rendering')">渲染</span>
        <span class="sub-chip" [class.active]="activePhaseFilter === 'soft_fitting'" (click)="togglePhaseFilter('soft_fitting')">软装</span>
        <span class="sub-chip" [class.active]="activePhaseFilter === 'post_processing'" (click)="togglePhaseFilter('post_processing')">后期</span>
      </div>

      <!-- 小图视图子标签，仅在“小图/决策”主标签下展示 -->
      <div class="small-view-bar" *ngIf="urgentEventCategoryFilter === 'review'">
        <span class="small-view-label">小图视图：</span>
        <button
          type="button"
          class="small-view-chip"
          [class.active]="smallViewFilter === 'all'"
          (click)="setSmallViewFilter('all')">
          全部小图
          <span class="chip-count" *ngIf="getSmallViewCount() > 0">{{ getSmallViewCount() }}</span>
        </button>
        <button
          type="button"
          class="small-view-chip"
          [class.active]="smallViewFilter === 'nearDeadline'"
          (click)="setSmallViewFilter('nearDeadline')">
          临近截止
        </button>
        <button
          type="button"
          class="small-view-chip"
          [class.active]="smallViewFilter === 'overdue'"
          (click)="setSmallViewFilter('overdue')">
          对图期逾期
        </button>
        <button
          type="button"
          class="small-view-chip"
          [class.active]="smallViewFilter === 'stagnant'"
          (click)="setSmallViewFilter('stagnant')">
          停滞期项目
        </button>
      </div>
      
      <!-- 加载状态 -->
      <div class="loading-state" *ngIf="loadingUrgentEvents">
        <svg class="spinner" viewBox="0 0 50 50">
          <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
        </svg>
        <p>计算紧急事件中...</p>
      </div>
      
      <!-- 空状态 -->
      <div class="empty-state" *ngIf="!loadingUrgentEvents && urgentEvents.length === 0">
        <svg viewBox="0 0 24 24" width="64" height="64" fill="#d1d5db">
          <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
        </svg>
        <p>暂无紧急事件</p>
      </div>

      <div class="empty-state filtered" *ngIf="!loadingUrgentEvents && urgentEvents.length > 0 && filteredUrgentEventsList.length === 0">
        <svg viewBox="0 0 24 24" width="48" height="48" fill="#d1d5db">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
        </svg>
        <p>该筛选条件下暂无事件</p>
      </div>
      
      <!-- 紧急事件列表 -->
      <div class="todo-list-compact urgent-list" *ngIf="!loadingUrgentEvents && filteredUrgentEventsList.length > 0">
        <div class="event-card" *ngFor="let event of filteredUrgentEventsList; trackBy: trackUrgentEventById" 
             [attr.data-category]="getEventCategory(event)"
             [class.small-view-card]="urgentEventCategoryFilter === 'review' && isSmallImageEvent(event)">
          
          <!-- 左侧分类彩条 -->
          <div class="card-line" [attr.data-category]="getEventCategory(event)"></div>
          
          <div class="event-main">
            <!-- 标题行 -->
            <div class="event-header">
              <span class="event-title" [class.text-red-700]="getEventCategory(event) === 'customer'">{{ event.title }}</span>
              
              <!-- 标签组 -->
              <span class="event-tag" *ngIf="getEventCategory(event) === 'customer'">客户服务</span>
              <span class="event-tag" *ngIf="getEventCategory(event) === 'phase'">{{ event.phaseName || '阶段' }}</span>
              <span class="event-tag" *ngIf="getEventCategory(event) === 'review'">小图/决策</span>
              <span class="event-tag" *ngIf="getEventCategory(event) === 'delivery'">交付</span>

              <!-- 状态标签 -->
              <span class="badge-status overdue" *ngIf="event.statusType === 'overdue'">逾期{{ event.overdueDays }}天</span>
              <span class="badge-status upcoming" *ngIf="event.statusType === 'dueSoon'">临近</span>
            </div>

            <!-- 描述/内容 -->
            <div class="event-desc">
              {{ event.description }}
            </div>
            
            <!-- 如果是决策卡片，显示决策提示（在“小图/决策”主视图下隐藏，由右侧按钮承载） -->
            <div class="decision-prompt" *ngIf="(event.eventType === 'decision_needed' || event.statusType === 'stagnant') && urgentEventCategoryFilter !== 'review'">
              <span class="text-xs text-slate-500 block mt-1">小图发送已久，请确认当前状态：</span>
              <div class="decision-group">
                <button class="decision-btn btn-yes" (click)="onMarkEventAsModification(event, $event)">
                  <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                  客户已反馈(转对图)
                </button>
                <button class="decision-btn btn-no" (click)="onMarkEventAsStagnant(event, $event)">
                  <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                  未回复(转停滞)
                </button>
              </div>
            </div>

            <!-- 项目信息 -->
            <div class="event-meta">
              <span class="project-info">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                {{ event.projectName }}
              </span>
              <span class="designer-info" *ngIf="event.designerName">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                {{ event.designerName }}
              </span>
              <span class="deadline-info" *ngIf="event.statusType !== 'stagnant'">
                 截止: {{ event.deadline | date:'MM-dd HH:mm' }}
              </span>
            </div>
          </div>
          
          <!-- 右侧操作按钮 -->
          <div class="event-actions" [class.small-view-actions]="urgentEventCategoryFilter === 'review' && isSmallImageEvent(event)">
            <!-- 小图/决策视图下的专用按钮组 -->
            <ng-container *ngIf="urgentEventCategoryFilter === 'review' && isSmallImageEvent(event); else defaultEventActions">
              <!-- 临近截止 -->
              <ng-container *ngIf="getSmallViewType(event) === 'nearDeadline'">
                <button class="btn-action btn-success" (click)="onConfirmEventOnTime(event)">
                  可以按时交付（隐藏本条）
                </button>
                <button class="btn-action btn-primary" (click)="onCreateTodoFromEvent(event)">
                  有风险，需要重点关注
                </button>
              </ng-container>

              <!-- 对图期逾期 -->
              <ng-container *ngIf="getSmallViewType(event) === 'overdue'">
                <button class="btn-action btn-success" (click)="onResolveUrgentEvent(event)">
                  已完成/售后
                </button>
                <button class="btn-action btn-primary" (click)="onMarkEventAsModification(event, $event)">
                  客户反馈·转改图
                </button>
                <button class="btn-action btn-default" (click)="onMarkEventAsStagnant(event, $event)">
                  未回复·转停滞
                </button>
                <button class="btn-action btn-default" (click)="onCreateTodoFromEvent(event)">
                  创建跟进代办
                </button>
              </ng-container>

              <!-- 停滞期项目 -->
              <ng-container *ngIf="getSmallViewType(event) === 'stagnant'">
                <button class="btn-action btn-success" (click)="onMarkEventAsModification(event, $event)">
                  客户已反馈 · 转入对图期
                </button>
                <button class="btn-action btn-primary" (click)="onMarkEventAsStagnant(event, $event)">
                  仍未反馈 · 继续停滞
                </button>
                <button class="btn-action btn-default" (click)="onResolveUrgentEvent(event)">
                  不再跟进 / 关闭事件
                </button>
              </ng-container>
            </ng-container>

            <!-- 默认事件操作按钮（非小图视图，保持原逻辑） -->
            <ng-template #defaultEventActions>
              <button class="btn-action btn-primary" *ngIf="event.statusType === 'overdue' && getEventCategory(event) !== 'decision'" 
                      title="催办" (click)="onProjectClickHandler(event.projectId)">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                催办
              </button>
              
              <button class="btn-action btn-success" *ngIf="event.statusType === 'dueSoon'" 
                      (click)="onConfirmEventOnTime(event)">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
                按时交付
              </button>
              
              <button class="btn-action btn-default" (click)="onProjectClickHandler(event.projectId)">
                查看项目
              </button>
            </ng-template>
          </div>

        </div>
      </div>
    </div>
    <!-- ========== 右栏结束 ========== -->
  </div>
  <!-- ========== 双栏容器结束 ========== -->
</section>

<!-- 停滞/改图原因弹窗 -->
<app-stagnation-reason-modal
  [isOpen]="showStagnationModal"
  [projectName]="stagnationModalEvent?.projectName || ''"
  [eventType]="stagnationModalType"
  (confirm)="onStagnationModalConfirm($event)"
  (cancel)="onStagnationModalCancel()">
</app-stagnation-reason-modal>