rootandClaude Opus 5.5
c9b4ceb301
- 顶栏搜索移进右侧玻璃胶囊;输入框改淡玻璃(边线 0.46 → 0.16,悬停加深,聚焦 / 出错保留光晕) - 新增 SegmentedControl(滑动 seg-thumb),替换站点、下载、订阅、文件、智能体列表及对话框里的实心选中块;Tabs 改为同一枚滑块 - 开关型按钮统一 outline + aria-pressed 选中外观;页头 / 工具栏次操作描边、图标钮描边圆;文件排序改 Select;下载总速度加标签 - 分页一页放得下时只留总数、空列表不渲染、按容器宽度收起按钮 - 运行状态存储区重排;智能体列表页与会话页共用外壳路由,标题与左栏不再重挂载 - 站点卡片「⋯」不再单独换行;设置导航、状态计数、多选条件改玻璃选中态 Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
46 lines
1.9 KiB
TypeScript
46 lines
1.9 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";
|
|
|
|
/**
|
|
* 顶栏搜索入口,放在右侧玻璃胶囊里的第一格(与 uhd_web 流媒体顶栏的搜索同一做法):
|
|
* 桌面是一枚平涂淡底的胶囊(搜索图标 + 提示 + 快捷键),手机只留图标;都打开命令面板。
|
|
* 胶囊本身已经是玻璃,里面不再套 .field-glass 或描边。
|
|
*/
|
|
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(
|
|
"hidden h-8 w-48 cursor-pointer items-center gap-2 rounded-full bg-foreground/[0.05] pr-1.5 pl-3 text-caption text-muted-foreground outline-none transition-colors duration-base hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 md:flex lg:w-60",
|
|
className,
|
|
)}
|
|
>
|
|
<Search className="h-3.5 w-3.5 shrink-0" />
|
|
<span className="flex-1 truncate text-left">搜索作品、页面</span>
|
|
<kbd className="rounded-full bg-foreground/[0.06] px-1.5 font-sans text-label leading-5 font-medium">
|
|
{shortcut}
|
|
</kbd>
|
|
</button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="md:hidden"
|
|
aria-label="搜索"
|
|
onClick={() => openSearchPalette()}
|
|
>
|
|
<Search className="h-4 w-4" />
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|