rootandClaude Opus 5.5
09a2adb637
- 材质统一边光:slab / float / pill / pill-selected / seg-thumb / chrome-side 改为左上亮右下暗的 1px 边光 + 外侧暗线;新增 lens / field / chip 参数与 pg-float-modal - 主按钮:转动光谱环改为静态左上光谱高光,悬停沿边扫过一小段;次按钮同为 lens 玻璃 - Input / Textarea / SelectTrigger 挂 .field-glass,原生下拉与实体选择器同步;对话框按钮行 gap-3 - 提示条改 pg-float(状态色只在图标、展开不叠放);新增 GlassTooltip 接管 title 提示 - 触屏判断 input-modality.ts、touch / hover 自定义变体;animate-pg-pop 改 backwards;scroll-fade-end - 控制台外壳:侧栏无硬分隔线、折叠开关进标志行;顶栏去磨砂,右侧控件收进玻璃胶囊 - 登录页居中单卡 auth-card;详情头图「订阅」改回普通主按钮,删除 pill-solid;发现页海报角标改 glass-chip-media - 引入 simple-liquid-glass(liquid-surface.tsx);更新 docs/design 三份规范与 CHANGELOG Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { Search } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { Button } from "~/components/ui/button.tsx";
|
|
import { cn } from "~/lib/utils.ts";
|
|
import { openSearchPalette, searchShortcutLabel } from "./search-store.ts";
|
|
|
|
/** 顶栏搜索入口:桌面是带快捷键提示的输入框样按钮,手机是图标按钮;都打开命令面板 */
|
|
export function SearchTrigger({ className }: { className?: string }) {
|
|
// 快捷键文案依赖 navigator,挂载后再算,避免水合不一致
|
|
const [shortcut, setShortcut] = useState("Ctrl K");
|
|
useEffect(() => setShortcut(searchShortcutLabel()), []);
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => openSearchPalette()}
|
|
aria-label="搜索"
|
|
aria-keyshortcuts="Control+K Meta+K"
|
|
className={cn(
|
|
// 长得像输入框,材质与输入框同一套(.field-glass)
|
|
"field-glass hidden h-8 w-56 cursor-pointer items-center gap-2 rounded-full px-3 text-caption text-muted-foreground outline-none hover:text-foreground md:flex lg:w-72",
|
|
className,
|
|
)}
|
|
>
|
|
<Search className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="flex-1 truncate text-left">搜索作品、页面</span>
|
|
<kbd className="rounded-tight border border-border/70 px-1 font-sans text-label leading-4 font-medium">
|
|
{shortcut}
|
|
</kbd>
|
|
</button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 md:hidden"
|
|
aria-label="搜索"
|
|
onClick={() => openSearchPalette()}
|
|
>
|
|
<Search className="h-4 w-4" />
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|