From d7f3db1cc480b10058d368ca6c070f7370181dcb Mon Sep 17 00:00:00 2001
From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com>
Date: Wed, 26 Aug 2026 14:06:12 +0800
Subject: [PATCH] refactor: replace Toast with Sonner

---
 frontend/app/app.css                          |  11 -
 frontend/app/components/common/Toast.tsx      |  34 ---
 frontend/app/components/ui/sonner.tsx         |  44 ++++
 frontend/app/components/ui/toast.tsx          | 232 ------------------
 .../app/features/admin/state/adminStore.ts    |   6 +-
 .../app/features/platform/ScriptWorkspace.tsx |   4 +-
 .../app/features/platform/ScriptsPage.tsx     |   7 +-
 .../app/features/platform/state/helpers.ts    |   6 +-
 .../app/features/platform/state/uiStore.ts    |  15 --
 .../features/schedules/SchedulesPageRoute.tsx |   8 +-
 .../app/features/schedules/state/helpers.ts   |   6 +-
 frontend/app/root.tsx                         |   2 +
 frontend/app/routes/platform.tsx              |  11 -
 frontend/app/routes/system-projects.tsx       |   8 +-
 frontend/app/routes/system-roles.tsx          |   8 +-
 frontend/app/routes/system-users.tsx          |   8 +-
 frontend/package.json                         |   2 +
 frontend/pnpm-lock.yaml                       |  34 +++
 18 files changed, 126 insertions(+), 320 deletions(-)
 delete mode 100644 frontend/app/components/common/Toast.tsx
 create mode 100644 frontend/app/components/ui/sonner.tsx
 delete mode 100644 frontend/app/components/ui/toast.tsx

diff --git a/frontend/app/app.css b/frontend/app/app.css
index 71d6c96..0bcef87 100644
--- a/frontend/app/app.css
+++ b/frontend/app/app.css
@@ -196,10 +196,6 @@
     animation: modal-in 0.18s ease-out;
   }
 
-  .toast-enter {
-    animation: toast-in 0.2s ease-out;
-  }
-
   .notebook-md h1,
   .notebook-md h2,
   .notebook-md h3,
@@ -260,13 +256,6 @@
   }
 }
 
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateY(-7px);
-  }
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);
diff --git a/frontend/app/components/common/Toast.tsx b/frontend/app/components/common/Toast.tsx
deleted file mode 100644
index f200567..0000000
--- a/frontend/app/components/common/Toast.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Icon from "./Icon";
-
-type ToastState = {
-  tone: "success" | "error" | "info";
-  message: string;
-};
-
-type ToastProps = {
-  toast: ToastState | null;
-};
-
-const toneIconClass: Record<ToastState["tone"], string> = {
-  success: "bg-[#e6f7f0] text-[#177b55]",
-  error: "bg-[#fff0f0] text-[#b94a4a]",
-  info: "bg-[#eaf4fd] text-[#2675bf]",
-};
-
-export function Toast({ toast }: ToastProps) {
-  if (!toast) return null;
-
-  return (
-    <div
-      className="toast-enter fixed top-[82px] right-[21px] z-30 flex min-h-[46px] min-w-[260px] max-w-[410px] items-center gap-[9px] rounded-lg border border-[#cfdbe6] bg-white px-3.5 py-2.5 text-xs text-[#43566a] shadow-[0_12px_35px_rgb(20_42_66/14%)]"
-      role="status"
-    >
-      <span
-        className={`grid size-[27px] shrink-0 place-items-center rounded-full ${toneIconClass[toast.tone]}`}
-      >
-        <Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
-      </span>
-      {toast.message}
-    </div>
-  );
-}
diff --git a/frontend/app/components/ui/sonner.tsx b/frontend/app/components/ui/sonner.tsx
new file mode 100644
index 0000000..1919f52
--- /dev/null
+++ b/frontend/app/components/ui/sonner.tsx
@@ -0,0 +1,44 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      theme="light"
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/frontend/app/components/ui/toast.tsx b/frontend/app/components/ui/toast.tsx
deleted file mode 100644
index a294f83..0000000
--- a/frontend/app/components/ui/toast.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import * as React from "react"
-import { Toast as ToastPrimitive } from "@base-ui/react/toast"
-
-import { cn } from "~/lib/utils"
-import { Button } from "~/components/ui/button"
-import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
-
-const toast = ToastPrimitive.createToastManager()
-
-function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
-  return <ToastPrimitive.Provider {...props} />
-}
-
-function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
-  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
-}
-
-function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
-  return (
-    <ToastPrimitive.Viewport
-      data-slot="toast-viewport"
-      className={cn(
-        "pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
-  return (
-    <ToastPrimitive.Root
-      data-slot="toast"
-      className={cn(
-        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
-        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
-        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
-        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
-        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
-        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
-        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
-        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
-        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
-        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
-        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
-        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
-        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
-        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
-        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
-  return (
-    <ToastPrimitive.Content
-      data-slot="toast-content"
-      className={cn(
-        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
-  return (
-    <ToastPrimitive.Title
-      data-slot="toast-title"
-      className={cn("text-sm font-medium", className)}
-      {...props}
-    />
-  )
-}
-
-function ToastDescription({
-  className,
-  ...props
-}: ToastPrimitive.Description.Props) {
-  return (
-    <ToastPrimitive.Description
-      data-slot="toast-description"
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-}
-
-function ToastAction({
-  className,
-  render = <Button variant="outline" size="sm" />,
-  ...props
-}: ToastPrimitive.Action.Props) {
-  return (
-    <ToastPrimitive.Action
-      data-slot="toast-action"
-      render={render}
-      className={cn("shrink-0", className)}
-      {...props}
-    />
-  )
-}
-
-function ToastClose({
-  className,
-  children,
-  render = <Button variant="ghost" size="icon-sm" />,
-  ...props
-}: ToastPrimitive.Close.Props) {
-  return (
-    <ToastPrimitive.Close
-      data-slot="toast-close"
-      aria-label="Close toast"
-      render={render}
-      className={cn(
-        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children ?? (
-        <XIcon aria-hidden="true" />
-      )}
-    </ToastPrimitive.Close>
-  )
-}
-
-function ToastIcon({ type }: { type: string | undefined }) {
-  let icon: React.ReactNode = null
-
-  if (type === "success") {
-    icon = (
-      <CircleCheckIcon aria-hidden="true" />
-    )
-  }
-
-  if (type === "info") {
-    icon = (
-      <InfoIcon aria-hidden="true" />
-    )
-  }
-
-  if (type === "warning") {
-    icon = (
-      <TriangleAlertIcon aria-hidden="true" />
-    )
-  }
-
-  if (type === "error") {
-    icon = (
-      <OctagonXIcon className="text-destructive" aria-hidden="true" />
-    )
-  }
-
-  if (type === "loading") {
-    icon = (
-      <Loader2Icon className="animate-spin" aria-hidden="true" />
-    )
-  }
-
-  if (!icon) {
-    return null
-  }
-
-  return (
-    <span
-      data-slot="toast-icon"
-      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
-    >
-      {icon}
-    </span>
-  )
-}
-
-function ToastList() {
-  const { toasts } = ToastPrimitive.useToastManager()
-
-  return toasts.map((toastItem) => (
-    <Toast key={toastItem.id} toast={toastItem}>
-      <ToastContent>
-        <ToastIcon type={toastItem.type} />
-        <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <ToastTitle />
-          <ToastDescription />
-        </div>
-        <ToastAction />
-        <ToastClose />
-      </ToastContent>
-    </Toast>
-  ))
-}
-
-function Toaster({
-  children,
-  toastManager = toast,
-  ...props
-}: ToastPrimitive.Provider.Props) {
-  return (
-    <ToastProvider toastManager={toastManager} {...props}>
-      {children}
-      <ToastPortal>
-        <ToastViewport>
-          <ToastList />
-        </ToastViewport>
-      </ToastPortal>
-    </ToastProvider>
-  )
-}
-
-const createToastManager = ToastPrimitive.createToastManager
-const useToastManager = ToastPrimitive.useToastManager
-
-export {
-  Toaster,
-  Toast,
-  ToastAction,
-  ToastClose,
-  ToastContent,
-  ToastDescription,
-  ToastPortal,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-  createToastManager,
-  toast,
-  useToastManager,
-}
diff --git a/frontend/app/features/admin/state/adminStore.ts b/frontend/app/features/admin/state/adminStore.ts
index 47acc24..6389d5d 100644
--- a/frontend/app/features/admin/state/adminStore.ts
+++ b/frontend/app/features/admin/state/adminStore.ts
@@ -8,7 +8,7 @@ import {
 } from "../../../services/api";
 
 import { useScriptWorkspaceStore } from "../../platform/state/scriptWorkspaceStore";
-import { useUiStore } from "../../platform/state/uiStore";
+import { toast } from "sonner";
 
 type Notice = {
   tone: "success" | "error" | "info";
@@ -65,7 +65,9 @@ function requireApi(): WorkspaceBoundApi {
 }
 
 function pushToast(notice: Notice) {
-  useUiStore.getState().pushToast(notice);
+  if (notice.tone === "error") toast.error(notice.message);
+  else if (notice.tone === "info") toast.info(notice.message);
+  else toast.success(notice.message);
 }
 
 function setApiOnline(online: boolean) {
diff --git a/frontend/app/features/platform/ScriptWorkspace.tsx b/frontend/app/features/platform/ScriptWorkspace.tsx
index 87ec5f4..0bdf6e4 100644
--- a/frontend/app/features/platform/ScriptWorkspace.tsx
+++ b/frontend/app/features/platform/ScriptWorkspace.tsx
@@ -42,7 +42,7 @@ const saveBtnClass =
 // 模块级变量存储刷新版本号，用于检测只读内容刷新
 let _lastRefreshVersion = 0;
 
-type ToastState = {
+type Notice = {
   tone: "success" | "error" | "info";
   message: string;
 };
@@ -71,7 +71,7 @@ type ScriptWorkspaceProps = {
   onSwitchTab: (scriptId: string) => void;
   onNewTab: () => void;
   onPublish: () => void;
-  onInfo: (toast: ToastState) => void;
+  onInfo: (toast: Notice) => void;
 
   pythonEditorBuffers: Record<string, PythonEditorBuffer>;
   onOpenPythonEditor: () => void;
diff --git a/frontend/app/features/platform/ScriptsPage.tsx b/frontend/app/features/platform/ScriptsPage.tsx
index aeaebb5..2b5fb15 100644
--- a/frontend/app/features/platform/ScriptsPage.tsx
+++ b/frontend/app/features/platform/ScriptsPage.tsx
@@ -13,6 +13,7 @@ import { VersionReceiptModal } from "./VersionReceiptModal";
 
 import { getSessionCache, useScriptWorkspaceStore } from "./state/scriptWorkspaceStore";
 import { useUiStore } from "./state/uiStore";
+import { toast } from "sonner";
 import { ScriptWorkspace } from "./ScriptWorkspace";
 import { copyToClipboard } from "../../lib/clipboard";
 
@@ -68,7 +69,11 @@ export default function ScriptsPage() {
   const refreshReadOnlyContent = useScriptWorkspaceStore((s) => s.refreshReadOnlyContent);
 
   // ui store
-  const pushToast = useUiStore((s) => s.pushToast);
+  const pushToast = (notice: { tone: "success" | "error" | "info"; message: string }) => {
+    if (notice.tone === "error") toast.error(notice.message);
+    else if (notice.tone === "info") toast.info(notice.message);
+    else toast.success(notice.message);
+  };
   const createDialog = useUiStore((s) => s.createDialog);
   const setCreateForm = useUiStore((s) => s.setCreateForm);
   const closeCreateDialog = useUiStore((s) => s.closeCreateDialog);
diff --git a/frontend/app/features/platform/state/helpers.ts b/frontend/app/features/platform/state/helpers.ts
index 83a2915..ebdcaf1 100644
--- a/frontend/app/features/platform/state/helpers.ts
+++ b/frontend/app/features/platform/state/helpers.ts
@@ -8,7 +8,7 @@ import type {
   WorkspaceBoundApi,
 } from "~/services/api";
 
-import { useUiStore } from "./uiStore";
+import { toast } from "sonner";
 
 // 缓存的会话类型（多 iframe 共存方案）
 type CachedSession = {
@@ -173,7 +173,9 @@ export function pushToast(
   tone: "success" | "error" | "info",
   message: string,
 ): void {
-  useUiStore.getState().pushToast({ tone, message });
+  if (tone === "error") toast.error(message);
+  else if (tone === "info") toast.info(message);
+  else toast.success(message);
 }
 
 export async function sha256Hex(
diff --git a/frontend/app/features/platform/state/uiStore.ts b/frontend/app/features/platform/state/uiStore.ts
index 1c27673..465df93 100644
--- a/frontend/app/features/platform/state/uiStore.ts
+++ b/frontend/app/features/platform/state/uiStore.ts
@@ -7,12 +7,6 @@ import type {
   Visibility,
 } from "../../../services/api";
 
-export type ToastTone = "success" | "error" | "info";
-export type ToastState = {
-  tone: ToastTone;
-  message: string;
-};
-
 export type NewScriptForm = {
   name: string;
   scriptType: ScriptType;
@@ -66,7 +60,6 @@ export const initialCreateForm: NewScriptForm = {
 };
 
 type UiState = {
-  toast: ToastState | null;
   createDialog: {
     open: boolean;
     creating: boolean;
@@ -79,10 +72,6 @@ type UiState = {
   publish: PublishDialogState;
   dataResourceDialog: DataResourceDialogState;
 
-  // toast
-  pushToast: (toast: ToastState) => void;
-  dismissToast: () => void;
-
   // create dialog
   openCreateDialog: (parentPath?: string, scriptType?: ScriptType) => void;
   closeCreateDialog: () => void;
@@ -129,7 +118,6 @@ type UiState = {
 };
 
 export const useUiStore = create<UiState>((set) => ({
-  toast: null,
   createDialog: {
     open: false,
     creating: false,
@@ -165,9 +153,6 @@ export const useUiStore = create<UiState>((set) => ({
     targetPath: "",
   },
 
-  pushToast: (toast) => set({ toast }),
-  dismissToast: () => set({ toast: null }),
-
   openCreateDialog: (parentPath = "", scriptType = "notebook") =>
     set((state) => ({
       contextMenu: null,
diff --git a/frontend/app/features/schedules/SchedulesPageRoute.tsx b/frontend/app/features/schedules/SchedulesPageRoute.tsx
index 854819c..d434ce6 100644
--- a/frontend/app/features/schedules/SchedulesPageRoute.tsx
+++ b/frontend/app/features/schedules/SchedulesPageRoute.tsx
@@ -1,10 +1,14 @@
 import { useScriptWorkspaceStore } from "../platform/state/scriptWorkspaceStore";
-import { useUiStore } from "../platform/state/uiStore";
+import { toast } from "sonner";
 import SchedulePage from "./SchedulePage";
 
 export default function SchedulesPageRoute() {
   const setApiOnline = useScriptWorkspaceStore((s) => s.setApiOnline);
-  const pushToast = useUiStore((s) => s.pushToast);
+  const pushToast = (notice: { tone: "success" | "error" | "info"; message: string }) => {
+    if (notice.tone === "error") toast.error(notice.message);
+    else if (notice.tone === "info") toast.info(notice.message);
+    else toast.success(notice.message);
+  };
 
   return (
     <SchedulePage
diff --git a/frontend/app/features/schedules/state/helpers.ts b/frontend/app/features/schedules/state/helpers.ts
index f452cdb..592ec88 100644
--- a/frontend/app/features/schedules/state/helpers.ts
+++ b/frontend/app/features/schedules/state/helpers.ts
@@ -3,7 +3,7 @@
 import { ApiRequestError, type Schedule, type ScheduleNode, type WorkspaceBoundApi } from "../../../services/api";
 
 import { useScriptWorkspaceStore } from "../../platform/state/scriptWorkspaceStore";
-import { useUiStore } from "../../platform/state/uiStore";
+import { toast } from "sonner";
 
 import type { NodeForm, NodePositionDraft, Notice, ScheduleForm } from "./types";
 import type { SchedulesStore } from "./useSchedulesStore";
@@ -22,7 +22,9 @@ export function requireApi(): WorkspaceBoundApi {
 }
 
 export function notify(notice: Notice): void {
-  useUiStore.getState().pushToast(notice);
+  if (notice.tone === "error") toast.error(notice.message);
+  else if (notice.tone === "info") toast.info(notice.message);
+  else toast.success(notice.message);
 }
 
 export function setApiOnline(online: boolean): void {
diff --git a/frontend/app/root.tsx b/frontend/app/root.tsx
index d5af255..1cbfbe4 100644
--- a/frontend/app/root.tsx
+++ b/frontend/app/root.tsx
@@ -8,6 +8,7 @@ import {
 } from "react-router";
 
 import type { Route } from "./+types/root";
+import { Toaster } from "./components/ui/sonner";
 import { AuthProvider } from "./context/AuthContext";
 // Monaco 离线加载配置:必须在任何 <Editor> 挂载前执行,否则 loader 会默认
 // 从 jsDelivr CDN 拉取 monaco,离线环境下编辑器初始化失败、永远 loading。
@@ -29,6 +30,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
       </head>
       <body>
         {children}
+        <Toaster />
         <ScrollRestoration />
         <Scripts />
       </body>
diff --git a/frontend/app/routes/platform.tsx b/frontend/app/routes/platform.tsx
index 346d777..0b5b4ce 100644
--- a/frontend/app/routes/platform.tsx
+++ b/frontend/app/routes/platform.tsx
@@ -7,7 +7,6 @@ import type { ActivePage, NavigationItem, SubPage } from "./platform.navigation"
 import { Collapsible } from "@base-ui/react/collapsible";
 
 import type { Route } from "./+types/platform";
-import { Toast } from "../components/common/Toast";
 import { Topbar } from "../components/common/Topbar";
 import Icon from "../components/common/Icon";
 import {
@@ -165,8 +164,6 @@ function AuthenticatedLayout() {
   const endEditing = useScriptWorkspaceStore((s) => s.endEditing);
   const selectScript = useScriptWorkspaceStore((s) => s.selectScript);
 
-  const toast = useUiStore((s) => s.toast);
-  const dismissToast = useUiStore((s) => s.dismissToast);
   const workspaceMenuOpen = useUiStore((s) => s.workspaceMenuOpen);
   const setWorkspaceMenuOpen = useUiStore((s) => s.setWorkspaceMenuOpen);
 
@@ -199,13 +196,6 @@ function AuthenticatedLayout() {
   // 心跳 / cleanup / 切页结束编辑 / 卸载前释放
   useEditSessionLifecycle({ activePage });
 
-  // toast 自动消失
-  useEffect(() => {
-    if (!toast) return;
-    const timer = window.setTimeout(dismissToast, 3200);
-    return () => window.clearTimeout(timer);
-  }, [toast, dismissToast]);
-
   // 原 common/Sidebar 的编辑会话守卫上移到这里：切出 /scripts 时有活动编辑
   // 会话先 endEditing，回工作台时清空选中脚本；再按当前激活页导航。
   function guardedNavigate(page: ActivePage, sub?: SubPage) {
@@ -279,7 +269,6 @@ function AuthenticatedLayout() {
         <Outlet />
       </SidebarInset>
 
-      <Toast toast={toast} />
     </SidebarProvider>
   );
 }
diff --git a/frontend/app/routes/system-projects.tsx b/frontend/app/routes/system-projects.tsx
index 17df487..5719d1d 100644
--- a/frontend/app/routes/system-projects.tsx
+++ b/frontend/app/routes/system-projects.tsx
@@ -1,6 +1,6 @@
 import { useAuth } from "~/context/AuthContext";
 import { useScriptWorkspaceStore } from "~/features/platform/state/scriptWorkspaceStore";
-import { useUiStore } from "~/features/platform/state/uiStore";
+import { toast } from "sonner";
 import { ProjectManagementPage } from "~/features/admin/ProjectManagementPage";
 
 /**
@@ -11,7 +11,11 @@ import { ProjectManagementPage } from "~/features/admin/ProjectManagementPage";
 export default function ProjectManagementRoute() {
   const { user, currentWorkspace } = useAuth();
   const setApiOnline = useScriptWorkspaceStore((s) => s.setApiOnline);
-  const pushToast = useUiStore((s) => s.pushToast);
+  const pushToast = (notice: { tone: "success" | "error" | "info"; message: string }) => {
+    if (notice.tone === "error") toast.error(notice.message);
+    else if (notice.tone === "info") toast.info(notice.message);
+    else toast.success(notice.message);
+  };
 
   return (
     <ProjectManagementPage
diff --git a/frontend/app/routes/system-roles.tsx b/frontend/app/routes/system-roles.tsx
index d650ec5..c466fce 100644
--- a/frontend/app/routes/system-roles.tsx
+++ b/frontend/app/routes/system-roles.tsx
@@ -1,6 +1,6 @@
 import { useAuth } from "~/context/AuthContext";
 import { useScriptWorkspaceStore } from "~/features/platform/state/scriptWorkspaceStore";
-import { useUiStore } from "~/features/platform/state/uiStore";
+import { toast } from "sonner";
 import { RoleManagementPage } from "~/features/admin/RoleManagementPage";
 
 /**
@@ -11,7 +11,11 @@ import { RoleManagementPage } from "~/features/admin/RoleManagementPage";
 export default function RoleManagementRoute() {
   const { user, currentWorkspace } = useAuth();
   const setApiOnline = useScriptWorkspaceStore((s) => s.setApiOnline);
-  const pushToast = useUiStore((s) => s.pushToast);
+  const pushToast = (notice: { tone: "success" | "error" | "info"; message: string }) => {
+    if (notice.tone === "error") toast.error(notice.message);
+    else if (notice.tone === "info") toast.info(notice.message);
+    else toast.success(notice.message);
+  };
 
   return (
     <RoleManagementPage
diff --git a/frontend/app/routes/system-users.tsx b/frontend/app/routes/system-users.tsx
index 7225944..f05aab0 100644
--- a/frontend/app/routes/system-users.tsx
+++ b/frontend/app/routes/system-users.tsx
@@ -1,6 +1,6 @@
 import { useAuth } from "~/context/AuthContext";
 import { useScriptWorkspaceStore } from "~/features/platform/state/scriptWorkspaceStore";
-import { useUiStore } from "~/features/platform/state/uiStore";
+import { toast } from "sonner";
 import { UserManagementPage } from "~/features/admin/UserManagementPage";
 
 /**
@@ -11,7 +11,11 @@ import { UserManagementPage } from "~/features/admin/UserManagementPage";
 export default function UserManagementRoute() {
   const { user, currentWorkspace } = useAuth();
   const setApiOnline = useScriptWorkspaceStore((s) => s.setApiOnline);
-  const pushToast = useUiStore((s) => s.pushToast);
+  const pushToast = (notice: { tone: "success" | "error" | "info"; message: string }) => {
+    if (notice.tone === "error") toast.error(notice.message);
+    else if (notice.tone === "info") toast.info(notice.message);
+    else toast.success(notice.message);
+  };
 
   return (
     <UserManagementPage
diff --git a/frontend/package.json b/frontend/package.json
index 7d5b677..50fa110 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,10 +23,12 @@
     "isbot": "^5.1.36",
     "lucide-react": "^1.33.0",
     "monaco-editor": "^0.56.0",
+    "next-themes": "^0.4.6",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router": "^8",
     "shadcn": "^4.19.0",
+    "sonner": "^2.0.8",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",
     "zustand": "^5.0.14"
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 5440635..af650d4 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       monaco-editor:
         specifier: ^0.56.0
         version: 0.56.0
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react:
         specifier: ^19.2.7
         version: 19.2.8
@@ -53,6 +56,9 @@ importers:
       shadcn:
         specifier: ^4.19.0
         version: 4.19.0(typescript@5.9.3)
+      sonner:
+        specifier: ^2.0.8
+        version: 2.0.8(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
@@ -1574,6 +1580,12 @@ packages:
     resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
     engines: {node: '>= 0.6'}
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   node-releases@2.0.51:
     resolution: {integrity: sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==}
     engines: {node: '>=18'}
@@ -1897,6 +1909,16 @@ packages:
     resolution: {integrity: sha512-LJhUYUvItdQ0LkJTmPeaEObWXAqFyfmP85x0tch/ez9cahmhlBBLbIqDFnvBnUJGagb0JbIQrkBs1wJ+yRYpEw==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
+  sonner@2.0.8:
+    resolution: {integrity: sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==}
+    peerDependencies:
+      '@types/react': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -3521,6 +3543,11 @@ snapshots:
 
   negotiator@1.0.0: {}
 
+  next-themes@0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   node-releases@2.0.51: {}
 
   npm-run-path@4.0.1:
@@ -3890,6 +3917,13 @@ snapshots:
       ip-address: 10.5.0
       smart-buffer: 4.2.0
 
+  sonner@2.0.8(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21: