# 待办任务面板组件（TodoTasksPanelComponent）

## 📋 简介

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

---

## 🎯 功能特性

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

---

## 📖 使用方法

### 1. 导入组件

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

@Component({
  imports: [TodoTasksPanelComponent]
})
```

### 2. 在模板中使用

```html
<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. 处理事件

```typescript
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();
}
```

---

## 📊 数据格式

```typescript
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` 中定义）：

```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 { /* 徽章样式 */ }
// ... 等等
```

---

## 🔧 高级用法

### 自定义文本

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

### 与其他组件配合

```html
<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](../urgent-events-panel/README.md) - 紧急事件面板
- [EmployeeDetailPanelComponent](../../pages/team-leader/employee-detail-panel/) - 员工详情面板

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