Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(webui): improve visual consistency (#5249)

Browse Source
This commit is contained in:
chengyongru
2026-08-05 13:24:45 +08:00
committed by GitHub
parent a54d5d14cb
commit 9098ffd38f
33 changed files with 578 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/ui/alert-dialog.tsx
+8 -3
View File
@@ -1,8 +1,12 @@
import * as React from "react";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import {
modalOverlayClassName,
modalSurfaceClassName,
} from "@/components/ui/floating-surface";
import { cn } from "@/lib/utils";
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -14,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
<AlertDialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-background/45 backdrop-blur-[3px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
modalOverlayClassName,
className,
)}
{...props}
@@ -32,7 +36,8 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"grid w-full max-w-lg origin-center gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
modalSurfaceClassName,
"grid w-full max-w-lg origin-center gap-4 rounded-[22px] p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
className,
)}
{...props}
webui/src/components/ui/dialog.tsx
+7 -2
View File
@@ -3,6 +3,10 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { useTranslation } from "react-i18next";
import {
modalOverlayClassName,
modalSurfaceClassName,
} from "@/components/ui/floating-surface";
import { cn } from "@/lib/utils";
const Dialog = DialogPrimitive.Root;
@@ -15,7 +19,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
modalOverlayClassName,
className,
)}
{...props}
@@ -40,7 +44,8 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"grid w-full max-w-lg origin-center gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
modalSurfaceClassName,
"grid w-full max-w-lg origin-center gap-4 rounded-[22px] p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
className,
)}
{...props}
webui/src/components/ui/floating-surface.ts
+10 -1
View File
@@ -1,5 +1,14 @@
export const floatingSurfaceElevationClassName =
"bg-popover text-popover-foreground shadow-[0_8px_24px_rgba(15,23,42,0.10)] dark:shadow-[0_12px_28px_rgba(0,0,0,0.32)]";
export const floatingSurfaceVisualClassName =
"rounded-[18px] border border-border/65 bg-popover/96 p-1.5 text-popover-foreground shadow-[0_18px_55px_rgba(15,23,42,0.18)] backdrop-blur-xl dark:border-white/10 dark:shadow-[0_22px_55px_rgba(0,0,0,0.45)]";
`rounded-[18px] p-1.5 ${floatingSurfaceElevationClassName}`;
export const modalOverlayClassName =
"fixed inset-0 z-50 bg-black/45 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
export const modalSurfaceClassName =
"bg-background text-foreground shadow-[0_12px_36px_rgba(15,23,42,0.12)] dark:bg-popover dark:shadow-[0_18px_44px_rgba(0,0,0,0.32)]";
export const floatingSurfaceClassName =
`${floatingSurfaceVisualClassName} z-50 overflow-x-hidden overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent`;
webui/src/components/ui/segmented-control.tsx
+62
View File
@@ -0,0 +1,62 @@
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
interface SegmentedControlOption<T extends string> {
value: T;
label: ReactNode;
}
interface SegmentedControlProps<T extends string> {
value: T;
options: Array<SegmentedControlOption<T>>;
onChange: (value: T) => void;
ariaLabel?: string;
mode?: "buttons" | "tabs";
className?: string;
itemClassName?: string;
}
export function SegmentedControl<T extends string>({
value,
options,
onChange,
ariaLabel,
mode = "buttons",
className,
itemClassName,
}: SegmentedControlProps<T>) {
const tabs = mode === "tabs";
return (
<div
role={tabs ? "tablist" : undefined}
aria-label={ariaLabel}
className={cn(
"inline-flex min-h-8 max-w-full items-center gap-1 overflow-x-auto rounded-full bg-muted/65 p-1 text-[12px] font-medium text-muted-foreground",
"scrollbar-thin scrollbar-track-transparent",
className,
)}
>
{options.map((option) => {
const selected = value === option.value;
return (
<button
key={option.value}
type="button"
role={tabs ? "tab" : undefined}
aria-selected={tabs ? selected : undefined}
aria-pressed={tabs ? undefined : selected}
onClick={() => onChange(option.value)}
className={cn(
"shrink-0 whitespace-nowrap rounded-full px-3 py-1 text-muted-foreground transition-colors",
selected ? "bg-background text-foreground" : "hover:text-foreground",
itemClassName,
)}
>
{option.label}
</button>
);
})}
</div>
);
}
webui/src/components/ui/sheet.tsx
+6 -6
View File
@@ -16,7 +16,7 @@ const SheetOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
"fixed inset-0 z-50 bg-black/40",
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
@@ -27,24 +27,24 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
const sheetVariants = cva(
"fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out",
"fixed z-50 flex flex-col gap-4 bg-background transition ease-in-out",
{
variants: {
side: {
top: cn(
"inset-x-0 top-0 border-b",
"inset-x-0 top-0",
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
),
bottom: cn(
"inset-x-0 bottom-0 border-t",
"inset-x-0 bottom-0",
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
),
left: cn(
"inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
"inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
),
right: cn(
"inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
"inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
),
},
webui/src/components/ui/tooltip.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { floatingSurfaceElevationClassName } from "@/components/ui/floating-surface";
import { cn } from "@/lib/utils";
const TooltipProvider = TooltipPrimitive.Provider;
@@ -16,7 +17,8 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
floatingSurfaceElevationClassName,
"z-50 overflow-hidden rounded-[10px] px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95",
className,
)}
{...props}