✨ feat(vscode): 看板顶部加筛选框,按标题 / 工单号 / PR 号过滤卡片

工单多了以后靠肉眼在四列里翻太慢。顶部输入框按空白分词逐词 AND 匹配
标题、工单号、PR 号,`#427` 与 `427` 等价,纯数字按包含匹配,记不全
编号也能搜到。筛选只收窄渲染,拖拽与依赖锁定仍按全量列表算;列头角标
在筛选时显示「可见 / 总数」。
This commit is contained in:
cruldra committed 2026-09-20 17:24:54 +08:00
1 parent 73f2c3ec66
commit 9e255f517b
6 files changed
+167 -8

No files matched your search

@@ -1,8 +1,11 @@
import type { ReleaseAction, ReleaseStatus } from '../hooks/useIssues'
import { GitCommit, ListPlus, Loader2, Lock, RefreshCw, Rocket, Settings, Unlock, User, Users } from 'lucide-react'
import { GitCommit, ListPlus, Loader2, Lock, RefreshCw, Rocket, Search, Settings, Unlock, User, Users, X } from 'lucide-react'
import { useEffect, useRef, useState } from 'react'
interface Props {
/** 顶部筛选框当前内容;按标题 / 工单号 / PR 号过滤看板卡片。 */
filterQuery: string
onFilterChange: (query: string) => void
onRefresh: () => void
/** host 正在重拉看板;为 true 时刷新图标转起来。 */
refreshing: boolean
@@ -66,6 +69,8 @@ function releaseTitle(release: ReleaseStatus | undefined): string {
}
export function PanelHeader({
filterQuery,
onFilterChange,
onRefresh,
refreshing,
scope,
@@ -113,7 +118,35 @@ export function PanelHeader({
}
return (
<div className="flex h-8 shrink-0 items-center justify-end gap-1 border-b border-[var(--vscode-panel-border)] px-2">
<div className="flex h-8 shrink-0 items-center gap-1 border-b border-[var(--vscode-panel-border)] px-2">
<div className="relative mr-auto flex items-center">
<Search size={12} className="pointer-events-none absolute left-2 opacity-60" />
<input
type="text"
value={filterQuery}
onChange={e => onFilterChange(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Escape') {
e.stopPropagation()
onFilterChange('')
}
}}
placeholder="筛选:标题 / 工单号 / PR 号"
aria-label="筛选工单"
className="h-6 w-56 rounded border border-[var(--vscode-input-border,transparent)] bg-[var(--vscode-input-background)] pl-6 pr-6 text-xs text-[var(--vscode-input-foreground)] outline-none placeholder:text-[var(--vscode-input-placeholderForeground)] focus:border-[var(--vscode-focusBorder)]"
/>
{filterQuery !== '' && (
<button
type="button"
onClick={() => onFilterChange('')}
title="清空筛选"
aria-label="清空筛选"
className="absolute right-1 flex h-4 w-4 items-center justify-center rounded hover:bg-[var(--vscode-toolbar-hoverBackground)]"
>
<X size={11} />
</button>
)}
</div>
<div ref={menuRef} className="relative">
<button
type="button"