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>
      
      <div class="tag-filter-bar" *ngIf="!loadingUrgentEvents && urgentEvents.length > 0">
        <button 
          class="tag-button"
          [class.active]="urgentEventTagFilter === 'all'"
          (click)="filterUrgentEventsByTag('all')"
          title="显示所有紧急事件"
        >
          <span class="tag-icon">📋</span>
          <span class="tag-label">全部</span>
          <span class="tag-count">{{ urgentEvents.length }}</span>
        </button>
        
        <button 
          class="tag-button"
          [class.active]="urgentEventTagFilter === 'customer'"
          (click)="filterUrgentEventsByTag('customer')"
          title="客户服务"
        >
          <span class="tag-icon">👥</span>
          <span class="tag-label">客户服务</span>
          <span class="tag-count">{{ getTagCount('customer') }}</span>
        </button>
        
        <button 
          class="tag-button"
          [class.active]="urgentEventTagFilter === 'phase'"
          (click)="filterUrgentEventsByTag('phase')"
          title="工作阶段"
        >
          <span class="tag-icon">🔧</span>
          <span class="tag-label">工作阶段</span>
          <span class="tag-count">{{ getTagCount('phase') }}</span>
        </button>
        
        <button 
          class="tag-button"
          [class.active]="urgentEventTagFilter === 'review'"
          (click)="filterUrgentEventsByTag('review')"
          title="小图截止"
        >
          <span class="tag-icon">📐</span>
          <span class="tag-label">小图截止</span>
          <span class="tag-count">{{ getTagCount('review') }}</span>
        </button>
        
        <button 
          class="tag-button"
          [class.active]="urgentEventTagFilter === 'delivery'"
          (click)="filterUrgentEventsByTag('delivery')"
          title="交付延期"
        >
          <span class="tag-icon">📦</span>
          <span class="tag-label">交付延期</span>
          <span class="tag-count">{{ getTagCount('delivery') }}</span>
        </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>
        <p class="hint">所有项目时间节点正常 ✅</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>
        <p class="hint">尝试切换其他标签</p>
      </div>
      
      <!-- 紧急事件列表 -->
      <div class="todo-list-compact urgent-list" *ngIf="!loadingUrgentEvents && filteredUrgentEventsList.length > 0">
        <div class="todo-item-compact urgent-item" *ngFor="let event of filteredUrgentEventsList; trackBy: trackUrgentEventById" [attr.data-urgency]="event.urgencyLevel">
          <!-- 左侧紧急程度色条 -->
          <div class="urgency-indicator" [attr.data-urgency]="event.urgencyLevel"></div>
          
          <!-- 事件内容 -->
          <div class="task-content">
            <!-- 标题行 -->
            <div class="task-header">
              <span class="task-title">{{ event.title }}</span>
              <div class="task-badges">
                <span class="badge badge-urgency" [attr.data-urgency]="event.urgencyLevel">
                  <ng-container *ngIf="event.urgencyLevel === 'critical'">🔴 紧急</ng-container>
                  <ng-container *ngIf="event.urgencyLevel === 'high'">🟠 重要</ng-container>
                  <ng-container *ngIf="event.urgencyLevel === 'medium'">🟡 注意</ng-container>
                </span>
                <span class="badge badge-event-type">
                  <ng-container *ngIf="event.eventType === 'review'">对图</ng-container>
                  <ng-container *ngIf="event.eventType === 'delivery'">交付</ng-container>
                  <ng-container *ngIf="event.eventType === 'phase_deadline'">{{ event.phaseName }}</ng-container>
                  <ng-container *ngIf="getEventCategory(event) === 'customer'">客户</ng-container>
                </span>
                <span class="badge-status overdue" *ngIf="event.statusType === 'overdue'">逾期</span>
                <span class="badge-status upcoming" *ngIf="event.statusType === 'dueSoon'">临近</span>
                <span class="badge-status stagnant" *ngIf="event.statusType === 'stagnant'">
                  停滞{{ event.stagnationDays || 7 }}天
                </span>
                <span class="badge-status customer" *ngIf="getEventCategory(event) === 'customer'">客户预警</span>
              </div>
            </div>
            
            <!-- 描述 -->
            <div class="task-description">
              {{ event.description }}
            </div>
            <div class="followup-tip" *ngIf="event.followUpNeeded">
              客户反馈待跟进 · 请及时追踪
            </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>
                项目: {{ 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>
            </div>
            
            <!-- 底部信息行 -->
            <div class="task-footer">
              <span class="deadline-info" [class.overdue]="event.overdueDays && event.overdueDays > 0">
                <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>
                截止: {{ event.deadline | date:'MM-dd HH:mm' }}
                <span class="overdue-label" *ngIf="event.overdueDays && event.overdueDays > 0">(逾期{{ event.overdueDays }}天)</span>
                <span class="upcoming-label" *ngIf="event.overdueDays && event.overdueDays < 0">(还剩{{ -event.overdueDays }}天)</span>
                <span class="today-label" *ngIf="!event.overdueDays">(今天)</span>
              </span>
              
              <span class="completion-info" *ngIf="event.completionRate !== undefined">
                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
                  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
                </svg>
                完成率: {{ event.completionRate }}%
              </span>
            </div>
          </div>
          
          <!-- 右侧操作按钮 -->
          <div class="task-actions">
            <button 
              class="btn-action btn-muted" 
              *ngIf="event.allowConfirmOnTime"
              (click)="onConfirmEventOnTime(event)"
            >
              可按时交付
            </button>
            <button 
              class="btn-action btn-stagnant" 
              *ngIf="event.statusType !== 'stagnant'"
              (click)="onMarkEventAsStagnant(event)"
            >
              标记停滞
            </button>
            <button 
              class="btn-action btn-resolve" 
              *ngIf="event.allowMarkHandled"
              (click)="onResolveUrgentEvent(event)"
            >
              事件已处理
            </button>
            <button 
              class="btn-action btn-todo" 
              *ngIf="event.allowCreateTodo"
              (click)="onCreateTodoFromEvent(event)"
            >
              创建代办
            </button>
            <button 
              class="btn-action btn-view" 
              (click)="onProjectClickHandler(event.projectId)"
              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>
          </div>
        </div>
      </div>
    </div>
    <!-- ========== 右栏结束 ========== -->
  </div>
  <!-- ========== 双栏容器结束 ========== -->
</section>