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
47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
import { Tabs as TabsPrimitive } from "radix-ui";
|
|
import type * as React from "react";
|
|
import { useRef } from "react";
|
|
|
|
import { SegThumb, useSlidingThumb } from "~/components/ui/segmented.tsx";
|
|
import { cn } from "~/lib/utils.ts";
|
|
|
|
// 分段标签:列表横向可滚(scroll-bleed 保留滑块的投影与描边不被裁),选中项由一枚滑动的 seg-thumb 承担(同 SegmentedControl)
|
|
function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
|
return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-4", className)} {...props} />;
|
|
}
|
|
|
|
function TabsList({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const { thumb, animate } = useSlidingThumb(ref, '[data-slot="tabs-trigger"][data-state="active"]');
|
|
return (
|
|
<TabsPrimitive.List
|
|
ref={ref}
|
|
data-slot="tabs-list"
|
|
className={cn("scroll-bleed relative isolate flex max-w-full items-center gap-1 overflow-x-auto", className)}
|
|
{...props}
|
|
>
|
|
<SegThumb thumb={thumb} animate={animate} className="-z-[1]" />
|
|
{children}
|
|
</TabsPrimitive.List>
|
|
);
|
|
}
|
|
|
|
function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
|
return (
|
|
<TabsPrimitive.Trigger
|
|
data-slot="tabs-trigger"
|
|
className={cn(
|
|
"inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border border-transparent px-3 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors duration-base outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:size-4",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
|
return <TabsPrimitive.Content data-slot="tabs-content" className={cn("outline-none", className)} {...props} />;
|
|
}
|
|
|
|
export { Tabs, TabsContent, TabsList, TabsTrigger };
|