yss-project/src/app/shared/components/todo-tasks-panel/README.md

待办任务面板组件（TodoTasksPanelComponent）

📋 简介

可复用的待办任务面板组件，用于显示来自项目问题板块的待办任务。

---

🎯 功能特性

• ✅ 显示待办任务列表
• ✅ 支持加载、空、错误三种状态
• ✅ 支持优先级分级（urgent、critical、high、medium、low）
• ✅ 支持问题类型分类（bug、task、feedback、risk、feature）
• ✅ 支持查看详情和标记已读
• ✅ 自动格式化创建时间（相对时间）

---

📖 使用方法

1. 导入组件

import { TodoTasksPanelComponent, type TodoTaskFromIssue } from '../../../shared/components/todo-tasks-panel';

@Component({
  imports: [TodoTasksPanelComponent]
})

2. 在模板中使用

<app-todo-tasks-panel
  [tasks]="todoTasksList"
  [loading]="loadingTodoTasks"
  [error]="todoTaskError"
  [title]="'待办任务'"
  [subtitle]="'来自项目问题板块'"
  (viewDetails)="onViewDetails($event)"
  (markAsRead)="onMarkAsRead($event)"
  (refresh)="onRefresh()">
</app-todo-tasks-panel>

3. 处理事件

onViewDetails(task: TodoTaskFromIssue): void {
  console.log('查看详情:', task.title);
  this.router.navigate(['/project', task.projectId], {
    queryParams: { highlightIssue: task.id }
  });
}

onMarkAsRead(task: TodoTaskFromIssue): void {
  console.log('标记已读:', task.title);
  this.tasks = this.tasks.filter(t => t.id !== task.id);
}

onRefresh(): void {
  console.log('刷新任务列表');
  this.loadTasks();
}

---

📊 数据格式

const tasks: TodoTaskFromIssue[] = [
  {
    id: 'issue-001',
    projectId: 'proj-001',
    projectName: '现代风格客厅',
    title: '需要进一步明确需求',
    description: '客户对色调有疑问',
    status: '待处理',
    priority: 'urgent',
    issueType: 'bug',
    relatedStage: '确认需求',
    assigneeId: 'user-001',
    assigneeName: '刘雨',
    creatorId: 'user-002',
    creatorName: '王设计师',
    createdAt: new Date('2025-11-10'),
    updatedAt: new Date('2025-11-11'),
    dueDate: new Date('2025-11-15')
  }
];

---

🎨 样式要求

组件需要父组件提供以下样式类（在 dashboard.scss 中定义）：

.todo-column {
  background: white;
  border-radius: 12px;
  padding: 24px;
}

.column-header { /* 头部样式 */ }
.loading-state { /* 加载状态样式 */ }
.error-state { /* 错误状态样式 */ }
.empty-state { /* 空状态样式 */ }
.todo-list-compact { /* 列表容器样式 */ }
.todo-item-compact { /* 任务项样式 */ }
.priority-indicator { /* 优先级指示器 */ }
.task-content { /* 任务内容样式 */ }
.badge { /* 徽章样式 */ }
// ... 等等

---

🔧 高级用法

自定义文本

<app-todo-tasks-panel
  [tasks]="tasks"
  [title]="'我的任务'"
  [subtitle]="'个人待办事项'"
  [loadingText]="'正在加载...'"
  [emptyText]="'太好了！'"
  [emptyHint]="'没有待办任务 🎉'">
</app-todo-tasks-panel>

与其他组件配合

<div class="dashboard-grid">
  <!-- 待办任务 -->
  <app-todo-tasks-panel [tasks]="tasks"></app-todo-tasks-panel>
  
  <!-- 紧急事件 -->
  <app-urgent-events-panel [events]="events"></app-urgent-events-panel>
  
  <!-- 员工详情 -->
  <app-employee-detail-panel [employeeDetail]="employee"></app-employee-detail-panel>
</div>

---

✅ 浏览器兼容性

• ✅ Chrome 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

---

📚 相关组件

• UrgentEventsPanelComponent - 紧急事件面板
• EmployeeDetailPanelComponent - 员工详情面板

创建日期: 2025-11-11
维护人员: 开发团队