tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): 工作区布局 - 命令面板搜索框采用 shadcn 风格圆角输入框

Browse Source
This commit is contained in:
sikongyue
2026-08-19 23:44:59 +08:00
parent 54d1e6b693
commit b311a24b85
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/components/layout/workspace-command-palette.tsx
View File

@@ -91,29 +91,31 @@ export function WorkspaceCommandPalette({ open, onClose }: { open: boolean; onCl
<div className="absolute inset-0 z-50 flex items-start justify-center bg-background/40 px-4 pt-28 backdrop-blur-sm lg:pt-32">
<div className="absolute inset-0" onClick={onClose} />
<div className="relative w-full max-w-xl overflow-hidden rounded-xl border border-[var(--workspace-border)] bg-[var(--workspace-surface-strong)] shadow-2xl animate-in fade-in zoom-in-95 duration-200">
<div className="flex items-center border-b border-[var(--workspace-border)] px-4">
<Search className="mr-3 size-4 shrink-0 text-foreground/45" strokeWidth={1.6} />
<input
ref={inputRef}
value={query}
onChange={(event) => setQuery(event.target.value)}
className="flex-1 bg-transparent py-4 text-[var(--fs-body)] outline-none placeholder:text-foreground/45"
placeholder="搜索页面或操作…"
/>
<kbd
onClick={onClose}
className="hidden h-5 cursor-pointer items-center justify-center rounded-sm border border-[var(--workspace-border)] bg-background/60 px-1.5 font-mono text-[var(--fs-tiny)] font-medium text-foreground/60 transition-colors hover:bg-surface-hover hover:text-foreground sm:inline-flex"
>
ESC
</kbd>
<button
type="button"
onClick={onClose}
className="ml-3 rounded-md p-1 text-foreground/50 transition-colors hover:bg-surface-hover hover:text-foreground"
aria-label="关闭搜索"
>
<X className="size-4" strokeWidth={1.6} />
</button>
<div className="p-3 pb-2">
<div className="flex h-10 items-center gap-2 rounded-[var(--r-md)] border border-[var(--workspace-border)] bg-foreground/5 px-3 transition-colors hover:border-[var(--workspace-border-strong)] focus-within:border-[var(--workspace-border-strong)] focus-within:bg-foreground/[.06]">
<Search className="size-4 shrink-0 text-foreground/45" strokeWidth={1.6} />
<input
ref={inputRef}
value={query}
onChange={(event) => setQuery(event.target.value)}
className="min-w-0 flex-1 bg-transparent text-[var(--fs-body)] outline-none placeholder:text-foreground/45"
placeholder="搜索页面或操作…"
/>
<kbd
onClick={onClose}
className="hidden h-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-[var(--workspace-border)] bg-background/60 px-1.5 font-mono text-[var(--fs-tiny)] font-medium text-foreground/60 transition-colors hover:bg-surface-hover hover:text-foreground sm:inline-flex"
>
⌘K
</kbd>
<button
type="button"
onClick={onClose}
className="ml-0.5 shrink-0 rounded-md p-1 text-foreground/50 transition-colors hover:bg-surface-hover hover:text-foreground"
aria-label="关闭搜索"
>
<X className="size-4" strokeWidth={1.6} />
</button>
</div>
</div>
<div className="max-h-80 overflow-y-auto p-2">