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

src/components/TaskCard.spec.ts

@@ -1,12 +1,22 @@
 import { mount } from '@vue/test-utils'
 import type { VueWrapper } from '@vue/test-utils'
 import dayjs from 'dayjs'
-import { describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
 
+import { useTagColorStore } from '@/stores/tagColors'
 import type { Task } from '@/types/task'
 
 import TaskCard from './TaskCard.vue'
 
+/**
+ * 卡片要从 tagColors store 读圆点颜色，因此每个用例都要有独立的 Pinia，
+ * 否则上一个用例设的颜色会漏到下一个。
+ */
+beforeEach(() => {
+  setActivePinia(createPinia())
+})
+
 function makeTask(overrides: Partial<Task> = {}): Task {
   return {
     id: 'task-1',
@@ -58,9 +68,18 @@ describe('TaskCard 基础渲染', () => {
 
 describe('优先级视觉区分', () => {
   it('三档优先级使用不同色系', () => {
-    const high = priorityBadge(mountCard({ priority: 3 }))?.classes().join(' ') ?? ''
-    const medium = priorityBadge(mountCard({ priority: 2 }))?.classes().join(' ') ?? ''
-    const low = priorityBadge(mountCard({ priority: 1 }))?.classes().join(' ') ?? ''
+    const high =
+      priorityBadge(mountCard({ priority: 3 }))
+        ?.classes()
+        .join(' ') ?? ''
+    const medium =
+      priorityBadge(mountCard({ priority: 2 }))
+        ?.classes()
+        .join(' ') ?? ''
+    const low =
+      priorityBadge(mountCard({ priority: 1 }))
+        ?.classes()
+        .join(' ') ?? ''
 
     expect(high).toContain('rose')
     expect(medium).toContain('amber')
@@ -189,6 +208,34 @@ describe('标签展示', () => {
   it('无标签时不渲染标签', () => {
     expect(mountCard({ tags: [] }).text()).not.toContain('#')
   })
+
+  it('未设置颜色的标签不画圆点', () => {
+    const wrapper = mountCard({ tags: ['前端'] })
+    expect(wrapper.find('.bg-sky-500').exists()).toBe(false)
+    expect(wrapper.text()).toContain('#前端')
+  })
+
+  it('设置了颜色的标签显示对应圆点', () => {
+    useTagColorStore().setColor('前端', 'sky')
+    const wrapper = mountCard({ tags: ['前端', '设计'] })
+    // 只有设过颜色的那个标签带圆点
+    expect(wrapper.findAll('[data-role="tag-dot"]').length).toBe(1)
+    expect(wrapper.find('.bg-sky-500').exists()).toBe(true)
+  })
+
+  it('颜色与标签文字一一对应，不会串到相邻标签上', () => {
+    const store = useTagColorStore()
+    store.setColor('前端', 'sky')
+    store.setColor('设计', 'rose')
+
+    const wrapper = mountCard({ tags: ['前端', '设计'] })
+    const labels = wrapper
+      .findAll('.inline-flex.items-center')
+      .filter((node) => node.text().startsWith('#'))
+
+    expect(labels[0]?.find('.bg-sky-500').exists()).toBe(true)
+    expect(labels[1]?.find('.bg-rose-500').exists()).toBe(true)
+  })
 })
 
 describe('交互', () => {