feat(tags): 编辑任务时可从已有标签里选,不必每次手打

TagInput 增加候选下拉:聚焦即展开(输入框为空列全部、有草稿按子串过滤),
上下键移动高亮、回车选中高亮项、点击也能选;候选项排除已选中的,选完自动
从列表移除。列表没展开或没有匹配时,回车仍把草稿建成新标签,原行为不变。
候选点击用 mousedown.prevent 保住输入框焦点,否则 blur 会先把草稿提交掉。

把「全部标签」从 BoardToolbar 的局部 computed 提到 store 的 allTags,
筛选下拉和标签候选共用同一份,避免两处各算一份导致结果不一致。

测试:TagInput 新增 13 条(候选过滤、键盘选择、失焦/Escape 收起、aria-selected),
store 新增 2 条 allTags,E2E 新增 1 条打通 store → 抽屉 → 组件这条接线。
This commit is contained in:
chenshoulin
2026-10-18 20:26:55 +08:00
parent 48f178e5bb
commit 88ea09e94d
7 changed files with 341 additions and 43 deletions
+30
View File
@@ -62,6 +62,36 @@ test('详情抽屉可编辑并持久化', async ({ page }) => {
await expect(card).toContainText('高')
})
/**
* 标签候选要打通 store → 抽屉 → TagInput 三层,单测覆盖不到接线,
* 所以这里从「另一个任务上已有的标签」出发验证整条链路。
*/
test('编辑任务时可以直接选已有标签', async ({ page }) => {
// 先在一个任务上建出标签
await addTask(page, '任务甲')
await page.locator('article').filter({ hasText: '任务甲' }).click()
const firstInput = page.getByLabel('添加标签')
await firstInput.fill('设计')
await firstInput.press('Enter')
await page.getByRole('button', { name: '保存' }).click()
// 另一个任务:聚焦标签输入框应列出「设计」
await addTask(page, '任务乙')
await page.locator('article').filter({ hasText: '任务乙' }).click()
const tagInput = page.getByLabel('添加标签')
await tagInput.click()
const option = page.locator('[role="option"]').filter({ hasText: '#设计' })
await expect(option).toBeVisible()
await option.click()
await page.getByRole('button', { name: '保存' }).click()
await page.reload()
await expect(page.locator('article').filter({ hasText: '任务乙' })).toContainText('#设计')
})
test('删除后可撤销', async ({ page }) => {
await addTask(page, '待删除任务')
await page.locator('article').filter({ hasText: '待删除任务' }).click()