F7: 在任务详情中集成日期选择器用于设置 deadline

[WiDayn]

🎯 任务目标 (Objective)

在 F6 创建的任务卡详情模态框（Modal）中，集成一个用户友好的日期选择器（Date Picker）UI 组件。该组件将允许用户查看、设置、更新或清除特定任务卡的 deadline（截止日期）属性。

📖 详细描述 (Description)

此任务是 B4 任务（后端增加了 deadline 字段）在前端的直接体现。

当用户打开一个任务卡的详情模态框时，他们应该能看到一个“截止日期”的字段。

1. 集成组件: 你需要选择并安装一个合适的日期选择器库（例如，react-datepicker, flatpickr, vuetify-datepicker 等，取决于项目技术栈）。
2. 显示数据: 该组件需要从任务卡的数据中读取 deadline 字段，并将其作为当前值显示。如果 deadline 为空，则应显示“未设置截止日期”或类似的提示。
3. 更新数据: 当用户通过点击日历图标打开选择器并选择一个新的日期时，前端状态应立即更新。
4. 调用 API: 在用户确认选择（例如，关闭日期选择器或点击“保存”）后，前端必须调用 B4 提供的后端 API（例如 PUT /api/tasks/{task_id}），将新的日期（或 null，如果日期被清除）发送到服务器以持久化保存。

验收标准 (Acceptance Criteria)

1. [UI] 组件集成:

   • 任务详情模态框 (F6) 中成功渲染了一个日期选择器组件。
   • 组件旁边有清晰的标签，如“截止日期”(Deadline)。

2. [Logic] 数据绑定 (Read):

   • 当打开模态框时，日期选择器必须正确显示该任务已有的 deadline 值。
   • 如果任务没有 deadline（值为 null），选择器应显示为空或显示一个“设置日期”的占位符。

3. [Logic] 数据更新 (Write):

   • 用户可以点击该组件打开一个日历视图。
   • 用户选择一个新的日期后，该日期被设置到组件的输入框中。
   • 触发对 B4 提供的 API 的 PUT 或 PATCH 请求，将新日期发送到后端。

4. [Logic] 清除日期:

   • 用户必须有一种方法可以清除（Clear/Remove）已设置的截止日期。
   • 执行清除操作后，应向后端 API 发送 null 值以移除该 deadline。

5. [UX] 状态反馈:

   • 在 API 调用期间，应向用户显示一个轻微的加载指示（例如，微调器 spinner）。
   • 更新成功或失败时，应有适当的反馈（例如，一个简短的 Toast 通知，或在 F8 中实现的UI提示自动更新）。

🔗 前置依赖 (Dependencies)

• B4: (后端) deadline API: 强依赖。需要 B4 提供了用于更新（PUT/PATCH）任务 deadline 字段的 API 端点。
• F6: (前端) 任务卡详情模态框: 强依赖。此日期选择器组件需要被放置在 F6 创建的模态框布局中。