chore(ui): Toaster 对齐 originui 用法与样式
This commit is contained in:
parent
ad5c77e534
commit
29d662a266
|
|
@ -9,7 +9,7 @@ import {
|
||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { Toaster } from "sonner";
|
import { Toaster } from "@/components/ui/sonner";
|
||||||
|
|
||||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
||||||
import { CommandPalette } from "@/components/workspace/command-palette";
|
import { CommandPalette } from "@/components/workspace/command-palette";
|
||||||
|
|
@ -121,7 +121,34 @@ export default function WorkspaceLayout({
|
||||||
<SidebarInset className="min-w-0">{children}</SidebarInset>
|
<SidebarInset className="min-w-0">{children}</SidebarInset>
|
||||||
</SidebarProvider>
|
</SidebarProvider>
|
||||||
<CommandPalette />
|
<CommandPalette />
|
||||||
<Toaster position="top-center" />
|
<Toaster
|
||||||
|
position="top-center"
|
||||||
|
toastOptions={{
|
||||||
|
duration: 2200,
|
||||||
|
classNames: {
|
||||||
|
toast: [
|
||||||
|
/* 灰色圆角矩形容器 */
|
||||||
|
"rounded-[20px] border-none",
|
||||||
|
/* 浅灰色背景 + 轻微透明 */
|
||||||
|
"bg-[#999999]! backdrop-blur-sm",
|
||||||
|
/* 阴影极轻 */
|
||||||
|
"shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]",
|
||||||
|
/* 内边距:宽松居中 */
|
||||||
|
"px-5 py-2.5",
|
||||||
|
/* 单行布局,内容水平居中 */
|
||||||
|
"flex items-center justify-center gap-0",
|
||||||
|
/* 整体文字样式 */
|
||||||
|
"text-white text-sm font-normal font-sans",
|
||||||
|
/* 去掉 icon 区域间距 */
|
||||||
|
"[&>[data-icon]]:hidden",
|
||||||
|
].join(" "),
|
||||||
|
title:
|
||||||
|
"text-white! text-sm font-normal text-center w-full leading-snug",
|
||||||
|
description: "hidden",
|
||||||
|
icon: "hidden",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,5 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
|
||||||
CircleCheckIcon,
|
|
||||||
InfoIcon,
|
|
||||||
Loader2Icon,
|
|
||||||
OctagonXIcon,
|
|
||||||
TriangleAlertIcon,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useTheme } from "next-themes";
|
import { useTheme } from "next-themes";
|
||||||
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
||||||
|
|
||||||
|
|
@ -14,15 +7,15 @@ const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
const { theme = "system" } = useTheme();
|
const { theme = "system" } = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sonner
|
<Sonner
|
||||||
theme={theme as ToasterProps["theme"]}
|
theme={theme as ToasterProps["theme"]}
|
||||||
className="toaster group"
|
className="toaster group"
|
||||||
icons={{
|
icons={{
|
||||||
success: <CircleCheckIcon className="size-4" />,
|
success: null,
|
||||||
info: <InfoIcon className="size-4" />,
|
info: null,
|
||||||
warning: <TriangleAlertIcon className="size-4" />,
|
warning: null,
|
||||||
error: <OctagonXIcon className="size-4" />,
|
error: null,
|
||||||
loading: <Loader2Icon className="size-4 animate-spin" />,
|
loading: null,
|
||||||
}}
|
}}
|
||||||
style={
|
style={
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue