39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client";
|
||
|
||
import { Search } from "lucide-react";
|
||
import { usePathname } from "next/navigation";
|
||
|
||
import { buttonClass } from "@/lib/ui/variants";
|
||
import { CommandPalette, openCommandPalette } from "./CommandPalette";
|
||
|
||
// 全局挂载命令面板（⌘K）：读当前 pathname 注入项目上下文。
|
||
// 放在 RootLayout 内，对所有页面生效。
|
||
export function CommandPaletteMount() {
|
||
const pathname = usePathname();
|
||
return <CommandPalette pathname={pathname ?? "/"} />;
|
||
}
|
||
|
||
// 命令面板的可见入口（顶栏常驻）：让不知道 ⌘K 的用户也能发现搜索。
|
||
// 与 ⌘K 触发同一外部 store，移动端折叠为图标。
|
||
export function CommandSearchButton() {
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => openCommandPalette()}
|
||
aria-label="搜索命令或页面"
|
||
title="搜索命令或页面（⌘K）"
|
||
className={buttonClass({
|
||
variant: "ghost",
|
||
size: "sm",
|
||
className: "border-transparent",
|
||
})}
|
||
>
|
||
<Search className="h-4 w-4" aria-hidden="true" />
|
||
<span className="hidden sm:inline">搜索</span>
|
||
<kbd className="hidden rounded border border-line bg-bg px-1 font-mono text-2xs text-ink-soft sm:inline">
|
||
⌘K
|
||
</kbd>
|
||
</button>
|
||
);
|
||
}
|