feat: 添加标签颜色功能并更新相关组件和测试用例

e2e/board.spec.ts

@@ -176,7 +176,9 @@ test('搜索筛选后列计数同步变化', async ({ page }) => {
   // 关键词有 200ms 防抖
   await expect(page.locator('article')).toHaveCount(1)
   await expect(page.locator('article').filter({ hasText: '写方案' })).toBeVisible()
-  await expect(page.locator('section').first().locator('[data-role="column-count"]')).toHaveText('1')
+  await expect(page.locator('section').first().locator('[data-role="column-count"]')).toHaveText(
+    '1',
+  )
 })
 
 test('键盘快捷键：/ 聚焦搜索，N 聚焦新增，? 打开帮助', async ({ page }) => {
@@ -280,3 +282,32 @@ test('输入框内 Ctrl+Z 不劫持任务撤销', async ({ page }) => {
 
   await expect(page.locator('article')).toHaveCount(1)
 })
+
+test('标签可设颜色，卡片显示圆点且刷新后保持', async ({ page }) => {
+  // 建一个带标签的任务
+  await addTask(page, '带标签的任务')
+  await page.locator('article').filter({ hasText: '带标签的任务' }).click()
+  const tagInput = page.getByLabel('添加标签')
+  await tagInput.fill('设计')
+  await tagInput.press('Enter')
+  await page.getByRole('button', { name: '保存' }).click()
+
+  // 未设置颜色时不画圆点
+  const card = page.locator('article').filter({ hasText: '带标签的任务' })
+  await expect(card.locator('[data-role="tag-dot"]')).toHaveCount(0)
+
+  // 打开标签管理，设为红色
+  await page.getByRole('button', { name: /^标签/ }).click()
+  await page.getByRole('button', { name: /管理标签/ }).click()
+  await page.getByRole('button', { name: '把标签「设计」标为红色' }).click()
+
+  await page.keyboard.press('Escape')
+
+  await expect(card.locator('[data-role="tag-dot"]')).toHaveClass(/bg-rose-500/)
+
+  // 颜色存在独立的 storage key，刷新后仍然生效
+  await page.reload()
+  await expect(
+    page.locator('article').filter({ hasText: '带标签的任务' }).locator('[data-role="tag-dot"]'),
+  ).toHaveClass(/bg-rose-500/)
+})