feat(web): 命令面板 combobox+可见入口 + sticky 导航壳 + 焦点环统一 + 抽屉锁滚动/关闭按钮 + 主题首帧修复 + 设置徽标/datalist

apps/web/components/command/CommandPaletteMount.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { Search } from "lucide-react";
 import { usePathname } from "next/navigation";
 
-import { CommandPalette } from "./CommandPalette";
+import { buttonClass } from "@/lib/ui/variants";
+import { CommandPalette, openCommandPalette } from "./CommandPalette";
 
 // 全局挂载命令面板（⌘K）：读当前 pathname 注入项目上下文。
 // 放在 RootLayout 内，对所有页面生效。
@@ -10,3 +12,27 @@ 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>
+  );
+}