Merge remote-tracking branch 'origin/master' into ji

2026-06-02 17:40:56 +08:00
commit 89cb5ab2f1
@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { ThemeProvider as NextThemesProvider } from "next-themes";

+import { FontScaleApplier } from "@/components/font-scale";
 import { QueryClientProvider } from "@/components/query-client-provider";
 import { AuthSyncWatcher } from "@/core/auth/sync";
 import { I18nProvider } from "@/core/i18n/context";
@@ -39,6 +40,7 @@ function AppProviders({ children }: { children: React.ReactNode }) {
          <ThemeProvider>
            <ChatProvider>
              <AuthSyncWatcher />
+              <FontScaleApplier />
              {children}
            </ChatProvider>
          </ThemeProvider>
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { useLocalSettings } from "@/core/settings";
+
+/**
+ * 基准字号 = 16px，对应《深蓝色 UI 规范》§2.1.2 后台系统正文字号（16px Regular）。
+ * 用户在「外观 → 字号」里选择的倍数通过 CSS 变量 `--ui-font-scale` 生效：globals.css
+ * 只把 Tailwind 的 `--text-*` 字号 token 乘以该倍数，**不动间距 token**，所以放大 / 缩小
+ * 的只有文字本身，padding / margin / 宽高等布局尺寸保持不变，不会把页面挤错位。
+ * `fontScale === 1` 即默认 16px。
+ */
+export const BASE_FONT_PX = 16;
+
+export const FONT_SCALE_OPTIONS: { value: number; label: string; px: number }[] =
+  [
+    { value: 0.875, label: "小", px: 14 },
+    { value: 1, label: "标准", px: 16 },
+    { value: 1.125, label: "大", px: 18 },
+    { value: 1.25, label: "特大", px: 20 },
+  ];
+
+/**
+ * 把用户选择的字号倍数写到 <html> 的 `--ui-font-scale` CSS 变量。挂在应用根部，
+ * 保证刷新后即时生效、全局统一。只设变量、不直接改 font-size，因此布局不受影响。
+ * 不渲染任何 DOM。
+ */
+export function FontScaleApplier() {
+  const [settings] = useLocalSettings();
+  const { fontScale } = settings.display;
+
+  useEffect(() => {
+    const scale =
+      typeof fontScale === "number" && Number.isFinite(fontScale) && fontScale > 0
+        ? fontScale
+        : 1;
+    const root = document.documentElement;
+    root.style.setProperty("--ui-font-scale", String(scale));
+    // 清掉旧实现可能残留的根级 font-size 内联样式（旧版用它做整页缩放）。
+    root.style.removeProperty("font-size");
+  }, [fontScale]);
+
+  return null;
+}
@@ -1,6 +1,6 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";

 import { cn } from "@/lib/utils";

@@ -14,7 +14,7 @@ const buttonVariants = cva(
        destructive:
          "cursor-pointer bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
-          "cursor-pointer border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "cursor-pointer border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-[#213D5E] dark:bg-[#022248] dark:text-[#CCD2DA] dark:hover:border-[#213D5E] dark:hover:bg-[#0a2f58] dark:hover:text-[#CCD2DA] dark:[&_svg]:text-[#CCD2DA]",
        secondary:
          "cursor-pointer bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost:
@@ -37,27 +37,27 @@ const buttonVariants = cva(
  },
 );

-const Button = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-      asChild?: boolean;
-    }
->(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      ref={ref}
-      data-slot="button"
-      {...(variant !== undefined && { "data-variant": variant })}
-      {...(size !== undefined && { "data-size": size })}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-});
-
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      {...(variant !== undefined && { "data-variant": variant })}
+      {...(size !== undefined && { "data-size": size })}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+});
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
@@ -34,7 +34,7 @@ const emptyMediaVariants = cva(
    variants: {
      variant: {
        default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6 dark:text-[#55A6FE]  dark:bg-[#022248]",
      },
    },
    defaultVariants: {
@@ -62,7 +62,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="empty-title"
-      className={cn("text-lg font-medium tracking-tight", className)}
+      className={cn("text-lg font-medium tracking-tight dark:text-[#AACEFF]", className)}
      {...props}
    />
  );
@@ -73,7 +73,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
    <div
      data-slot="empty-description"
      className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4 dark:text-[#55A6FE]",
        className,
      )}
      {...props}
@@ -3,6 +3,14 @@ import * as React from "react";
 import { cn } from "@/lib/utils";

 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  const usesDarkNativePicker =
+    type === "number" ||
+    type === "date" ||
+    type === "datetime-local" ||
+    type === "time" ||
+    type === "month" ||
+    type === "week";
+
  return (
    <input
      type={type}
@@ -10,7 +18,8 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
      className={cn(
        "h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] md:text-sm",
        "border-input placeholder:text-muted-foreground",
-        "dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] dark:placeholder:text-[#566B7F] rounded-[4px] text-[16px]",
+        "dark:border-[#1B477E] dark:bg-[#0D2D54] dark:text-[#AACEFF] dark:placeholder:text-[#566B7F] dark:rounded-[4px] dark:text-[16px] md:dark:text-[16px]",
+        usesDarkNativePicker && "dark:[color-scheme:dark]",
        "file:text-foreground selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] dark:focus-visible:border-[#3b82f6] dark:focus-visible:ring-[#3b82f6]/30",
        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
@@ -24,69 +24,70 @@ function SelectValue({
  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }

-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
-  }
->(({ className, size = "default", children, ...props }, ref) => {
-  return (
-    <SelectPrimitive.Trigger
-      ref={ref}
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  );
-});
-
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+  }
+>(({ className, size = "default", children, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEE2] dark:data-[placeholder]:text-[#566B7F] dark:hover:bg-[#022248] dark:[&_svg:not([class*='text-'])]:text-[#AACEFF] dark:focus-visible:border-[#3b82f6] dark:focus-visible:ring-[#3b82f6]/30",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});

-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "item-aligned", align = "center", ...props }, ref) => {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        ref={ref}
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className,
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  );
-});
-
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "item-aligned", align = "center", ...props }, ref) => {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF]",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
+
+SelectContent.displayName = SelectPrimitive.Content.displayName;

 function SelectLabel({
  className,
@@ -95,40 +96,44 @@ function SelectLabel({
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-xs dark:text-[#566B7F]",
+        className,
+      )}
      {...props}
    />
  );
 }

-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => {
-  return (
-    <SelectPrimitive.Item
-      ref={ref}
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
-      )}
-      {...props}
-    >
-      <span
-        data-slot="select-item-indicator"
-        className="absolute right-2 flex size-3.5 items-center justify-center"
-      >
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  );
-});
-
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "dark:text-[#AACEFF] dark:focus:bg-[#0062D9] dark:focus:text-white dark:data-[highlighted]:bg-[#0062D9] dark:data-[highlighted]:text-white dark:[&_svg:not([class*='text-'])]:text-[#AACEFF] dark:focus:[&_svg:not([class*='text-'])]:text-white dark:data-[highlighted]:[&_svg:not([class*='text-'])]:text-white",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
+
+SelectItem.displayName = SelectPrimitive.Item.displayName;

 function SelectSeparator({
  className,
@@ -151,7 +156,7 @@ function SelectScrollUpButton({
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
-        "flex cursor-default items-center justify-center py-1",
+        "flex cursor-default items-center justify-center py-1 dark:text-[#AACEFF]",
        className,
      )}
      {...props}
@@ -169,7 +174,7 @@ function SelectScrollDownButton({
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
-        "flex cursor-default items-center justify-center py-1",
+        "flex cursor-default items-center justify-center py-1 dark:text-[#AACEFF]",
        className,
      )}
      {...props}
@@ -13,7 +13,7 @@ function Switch({
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-[#55A6FE] dark:data-[state=checked]:bg-[#0062D9] inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
@@ -32,7 +32,8 @@ const tabsListVariants = cva(
      variant: {
        default:
          "bg-muted dark:group-data-[orientation=horizontal]/tabs:h-8! dark:items-stretch dark:gap-0 dark:overflow-hidden dark:rounded-[2px] dark:border dark:border-[#55A6FE] dark:bg-[#022248] dark:p-0",
-        line: "gap-1 bg-transparent",
+        line:
+          "gap-1 bg-transparent dark:group-data-[orientation=horizontal]/tabs:h-8! dark:items-stretch dark:gap-0 dark:overflow-visible dark:rounded-[2px] dark:border dark:border-[#55A6FE] dark:bg-[#022248] dark:p-0",
      },
    },
    defaultVariants: {
@@ -70,13 +71,16 @@ const TabsTrigger = React.forwardRef<
      className={cn(
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "dark:text-muted-foreground dark:hover:text-foreground",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
        "data-[state=active]:bg-background data-[state=active]:text-foreground",
-        "dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-input dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-input/30 dark:group-data-[variant=line]/tabs-list:data-[state=active]:text-foreground",
-        "dark:group-data-[variant=default]/tabs-list:relative dark:group-data-[variant=default]/tabs-list:!h-full dark:group-data-[variant=default]/tabs-list:self-stretch dark:group-data-[variant=default]/tabs-list:flex-none dark:group-data-[variant=default]/tabs-list:rounded-none dark:group-data-[variant=default]/tabs-list:border-0 dark:group-data-[variant=default]/tabs-list:bg-transparent dark:group-data-[variant=default]/tabs-list:px-4 dark:group-data-[variant=default]/tabs-list:!py-0 dark:group-data-[variant=default]/tabs-list:!leading-none dark:group-data-[variant=default]/tabs-list:shadow-none dark:group-data-[variant=default]/tabs-list:focus-visible:ring-0 dark:group-data-[variant=default]/tabs-list:[&_svg]:text-[#CCD2DA]",
+        "dark:group-data-[variant=line]/tabs-list:relative dark:group-data-[variant=line]/tabs-list:!h-full dark:group-data-[variant=line]/tabs-list:self-stretch dark:group-data-[variant=line]/tabs-list:flex-none dark:group-data-[variant=line]/tabs-list:rounded-none dark:group-data-[variant=line]/tabs-list:border-0 dark:group-data-[variant=line]/tabs-list:bg-transparent dark:group-data-[variant=line]/tabs-list:px-4 dark:group-data-[variant=line]/tabs-list:!py-0 dark:group-data-[variant=line]/tabs-list:!leading-none dark:group-data-[variant=line]/tabs-list:text-[#CCD2DA] dark:group-data-[variant=line]/tabs-list:shadow-none dark:group-data-[variant=line]/tabs-list:hover:text-[#CCD2DA] dark:group-data-[variant=line]/tabs-list:focus-visible:ring-0 dark:group-data-[variant=line]/tabs-list:[&_svg]:text-[#CCD2DA]",
+        "dark:group-data-[variant=line]/tabs-list:not(:first-child):border-l dark:group-data-[variant=line]/tabs-list:not(:first-child):border-[#1d3961] dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-l-0",
+        "dark:group-data-[variant=line]/tabs-list:data-[state=active]:rounded-none dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-0 dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-[#0062D9] dark:group-data-[variant=line]/tabs-list:data-[state=active]:text-[#FFFFFF] dark:group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:group-data-[variant=line]/tabs-list:data-[state=active]:[&_svg]:text-[#FFFFFF]",
+        "dark:group-data-[variant=default]/tabs-list:flex dark:group-data-[variant=default]/tabs-list:min-h-0 dark:group-data-[variant=default]/tabs-list:!h-full dark:group-data-[variant=default]/tabs-list:flex-1 dark:group-data-[variant=default]/tabs-list:self-stretch dark:group-data-[variant=default]/tabs-list:rounded-none dark:group-data-[variant=default]/tabs-list:border-0 dark:group-data-[variant=default]/tabs-list:bg-transparent dark:group-data-[variant=default]/tabs-list:px-4 dark:group-data-[variant=default]/tabs-list:!py-0 dark:group-data-[variant=default]/tabs-list:!leading-none dark:group-data-[variant=default]/tabs-list:text-[#CCD2DA] dark:group-data-[variant=default]/tabs-list:shadow-none dark:group-data-[variant=default]/tabs-list:hover:text-[#CCD2DA] dark:group-data-[variant=default]/tabs-list:focus-visible:ring-0 dark:group-data-[variant=default]/tabs-list:[&_svg]:text-[#CCD2DA]",
        "dark:group-data-[variant=default]/tabs-list:not(:first-child):border-l dark:group-data-[variant=default]/tabs-list:not(:first-child):border-[#1d3961] dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-l-0",
-        "dark:group-data-[variant=default]/tabs-list:data-[state=active]:rounded-none dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-0 dark:group-data-[variant=default]/tabs-list:data-[state=active]:bg-[#0062D9] dark:group-data-[variant=default]/tabs-list:data-[state=active]:text-[#FFFFFF] dark:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none dark:group-data-[variant=default]/tabs-list:data-[state=active]:[&_svg]:text-[#FFFFFF] dark:group-data-[variant=default]/tabs-list:hover:text-[#CCD2DA]",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "dark:group-data-[variant=default]/tabs-list:data-[state=active]:rounded-none dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-0 dark:group-data-[variant=default]/tabs-list:data-[state=active]:bg-[#0062D9] dark:group-data-[variant=default]/tabs-list:data-[state=active]:text-[#FFFFFF] dark:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-none dark:group-data-[variant=default]/tabs-list:data-[state=active]:hover:text-[#FFFFFF] dark:group-data-[variant=default]/tabs-list:data-[state=active]:[&_svg]:text-[#FFFFFF]",
+        "group-data-[variant=line]/tabs-list:after:pointer-events-none group-data-[variant=line]/tabs-list:after:absolute group-data-[variant=line]/tabs-list:after:inset-x-2 group-data-[variant=line]/tabs-list:after:bottom-[-5px] group-data-[variant=line]/tabs-list:after:h-0.5 group-data-[variant=line]/tabs-list:after:bg-foreground group-data-[variant=line]/tabs-list:after:opacity-0 group-data-[variant=line]/tabs-list:after:transition-opacity group-data-[variant=line]/tabs-list:after:content-[''] group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "dark:group-data-[variant=line]/tabs-list:after:inset-x-0 dark:group-data-[variant=line]/tabs-list:after:bottom-0 dark:group-data-[variant=line]/tabs-list:after:z-[2] dark:group-data-[variant=line]/tabs-list:after:h-[2px] dark:group-data-[variant=line]/tabs-list:after:bg-[#FFFFFF]",
        className,
      )}
      {...props}
@@ -6,6 +6,7 @@ import { toast } from "sonner";

 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { useTheme } from "@/contexts/ThemeContext";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -90,7 +91,7 @@ function V1SectionField({
  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between">
-        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <span className="text-xs font-medium text-muted-foreground dark:text-[#AACEE2]">{label}</span>
        {!editing && (
          <Button size="icon" variant="ghost" className="size-6" onClick={() => { setDraft(value); setEditing(true); }}>
            <Pencil className="size-3" />
@@ -154,7 +155,7 @@ function V1FactItem({
  }

  return (
-    <div className="rounded border p-2 space-y-1 group">
+    <div className="rounded border p-2 space-y-1 group ">
      {editing ? (
        <div className="space-y-2">
          <Textarea value={draftContent} onChange={(e) => setDraftContent(e.target.value)} className="min-h-[64px] text-sm" autoFocus />
@@ -196,7 +197,7 @@ function V1FactItem({
              </Button>
            </div>
          </div>
-          <p className="text-sm whitespace-pre-wrap">{String(fact.content ?? "")}</p>
+          <p className="text-sm whitespace-pre-wrap dark:text-[#AACEE2]">{String(fact.content ?? "")}</p>
          {fact.sourceError ? <p className="text-xs text-red-600 bg-red-50 rounded px-2 py-1">避免：{String(fact.sourceError)}</p> : null}
        </>
      )}
@@ -206,6 +207,7 @@ function V1FactItem({

 // 新增事实表单
 function V1AddFactForm({ agent, userId }: { agent: string | null; userId: string }) {
+  const { theme } = useTheme();
  const [open, setOpen] = useState(false);
  const [content, setContent] = useState("");
  const [category, setCategory] = useState("context");
@@ -222,7 +224,12 @@ function V1AddFactForm({ agent, userId }: { agent: string | null; userId: string

  if (!open) {
    return (
-      <Button variant="outline" size="sm" className="mt-1 w-full" onClick={() => setOpen(true)}>
+      <Button
+        variant={theme === "dark" ? "default" : "outline"}
+        size="sm"
+        className="mt-1 w-full"
+        onClick={() => setOpen(true)}
+      >
        <Plus className="size-3" />新增事实
      </Button>
    );
@@ -276,8 +283,8 @@ export function V1BucketView({
  return (
    <div className="space-y-4">
      {/* 用户画像字段 */}
-      <div className="rounded-md border p-3 space-y-3">
-        <h4 className="text-xs font-semibold text-muted-foreground">用户画像</h4>
+      <div className="rounded-md border p-3 space-y-3 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
+        <h4 className="text-xs font-semibold text-muted-foreground dark:text-white">用户画像</h4>
        {allCtxFields.map((field) => (
          <V1SectionField
            key={field}
@@ -291,8 +298,8 @@ export function V1BucketView({
      </div>

      {/* 历史摘要字段 */}
-      <div className="rounded-md border p-3 space-y-3">
-        <h4 className="text-xs font-semibold text-muted-foreground">历史摘要</h4>
+      <div className="rounded-md border p-3 space-y-3 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
+        <h4 className="text-xs font-semibold text-muted-foreground dark:text-white">历史摘要</h4>
        {allHistoryFields.map((field) => (
          <V1SectionField
            key={field}
@@ -306,8 +313,8 @@ export function V1BucketView({
      </div>

      {/* 事实记录 */}
-      <div className="rounded-md border p-3 space-y-2">
-        <h4 className="text-xs font-semibold text-muted-foreground">事实记录（{factsRaw.length} 条）</h4>
+      <div className="rounded-md border p-3 space-y-2 dark:border-[#213D5E] dark:bg-[#022248]">
+        <h4 className="text-xs font-semibold text-muted-foreground dark:text-white">事实记录（{factsRaw.length} 条）</h4>
        {factsRaw.map((fact, i) => (
          <V1FactItem key={String(fact.id ?? i)} fact={fact} agent={agent} userId={userId} />
        ))}
@@ -179,7 +179,7 @@ function UserAuditPanel({ userId }: { userId: string }) {
      <ScrollArea className="min-h-0 flex-1">
        <div className="p-4">
          {!threadId && (
-            <div className="text-muted-foreground flex flex-col items-center gap-2 py-16 text-sm">
+            <div className="text-muted-foreground flex flex-col items-center gap-2 py-16 text-sm dark:text-[#AACEF8]">
              <MessageSquareIcon className="size-6" />
              请从左侧选择一个会话
            </div>
@@ -253,7 +253,7 @@ function AgentMemoryPanel({ userId }: { userId: string }) {
              <SelectTrigger className="h-8 w-48" size="sm">
                <SelectValue />
              </SelectTrigger>
-              <SelectContent>
+              <SelectContent position="popper" side="bottom" sideOffset={4}>
                {/* 默认助手始终显示，对应全局记忆文件 */}
                <SelectItem value="default">默认助手</SelectItem>
                {otherBuckets.map((b) => (
@@ -224,16 +224,16 @@ export function TagManagementPage() {
              <table className="w-full text-sm">
                <thead className="bg-muted/50">
                  <tr>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
+                    <th className="text-muted-foreground px-4 py-3 text-left font-medium dark:text-white">
                      {t.adminTags.name}
                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-left font-medium">
+                    <th className="text-muted-foreground px-4 py-3 text-left font-medium dark:text-white">
                      {t.adminTags.tagDescription}
                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-right font-medium">
+                    <th className="text-muted-foreground px-4 py-3 text-right font-medium dark:text-white">
                      {t.adminTags.usageCount}
                    </th>
-                    <th className="text-muted-foreground px-4 py-3 text-right font-medium">
+                    <th className="text-muted-foreground px-4 py-3 text-right font-medium dark:text-white">
                      {t.adminTags.actions}
                    </th>
                  </tr>
@@ -1,6 +1,6 @@
 "use client";

-import { Download, Loader2 } from "lucide-react";
+import { AlertCircle,CheckCircle2, Download, Loader2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";

@@ -29,6 +29,7 @@ import {
 } from "@/core/tool-metrics/api";
 import { useToolMetrics, useToolMetricsSummary } from "@/core/tool-metrics/hooks";
 import { cn } from "@/lib/utils";
+import { useTheme } from "@/contexts/ThemeContext";

 const PAGE_SIZE = 50;

@@ -66,6 +67,7 @@ function categoryLabel(category?: string | null): string {
 }

 export function ToolMetricsPanel() {
+  const { theme } = useTheme();
  const [page, setPage] = useState(0);
  const [tool, setTool] = useState("");
  const [user, setUser] = useState("");
@@ -79,6 +81,31 @@ export function ToolMetricsPanel() {
  const [until, setUntil] = useState("");
  const [exporting, setExporting] = useState(false);
  const [detailRow, setDetailRow] = useState<ToolMetric | null>(null);
+/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
+const successToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
+const errorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
+  const darkToastOpts =
+    theme === "dark"
+      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
+      : { success: undefined, error: undefined };

  const filters = useMemo<ToolMetricsFilters>(() => {
    const out: ToolMetricsFilters = {};
@@ -117,9 +144,9 @@ export function ToolMetricsPanel() {
    setExporting(true);
    try {
      await downloadToolMetricsExcel(filters);
-      toast.success("已导出为 Excel");
+      toast.success("已导出为 Excel",darkToastOpts.success);
    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "导出失败");
+      toast.error(e instanceof Error ? e.message : "导出失败",darkToastOpts.error);
    } finally {
      setExporting(false);
    }
@@ -167,7 +194,7 @@ export function ToolMetricsPanel() {
      </div>

      {/* Summary strip */}
-      <div className="flex flex-wrap items-center gap-2 rounded-xl border bg-white p-4">
+      <div className="flex flex-wrap items-center gap-2 rounded-xl border bg-white p-4 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
        <div className="mr-4 flex flex-col">
          <span className="text-muted-foreground text-xs">总调用</span>
          <span className="text-lg font-semibold tabular-nums">
@@ -213,7 +240,7 @@ export function ToolMetricsPanel() {

      {/* Per-skill breakdown — answers "was skill X invoked, and did it succeed". */}
      {summary && summary.by_skill.length > 0 && (
-        <div className="rounded-xl border bg-white p-4">
+        <div className="rounded-xl border bg-white p-4 ">
          <h3 className="mb-2 text-sm font-medium">各技能调用情况</h3>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
@@ -258,7 +285,7 @@ export function ToolMetricsPanel() {
        </div>
      )}
      {summary && kind === "skill" && summary.by_skill.length === 0 && (
-        <div className="text-muted-foreground rounded-xl border bg-white p-4 text-sm">
+        <div className="text-muted-foreground rounded-xl border bg-white p-4 text-sm dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
          当前筛选范围内没有检测到任何技能调用记录。技能只有在被 Agent 通过
          <code className="bg-muted mx-1 rounded px-1">skill_view</code>
          读取(即真正"调用")时才会被记录;仅在系统提示里被列出、但未被读取的技能不会计入。
@@ -266,9 +293,9 @@ export function ToolMetricsPanel() {
      )}

      {/* Filters */}
-      <div className="grid gap-3 rounded-xl border bg-white p-4 md:grid-cols-3 lg:grid-cols-6">
+      <div className="grid gap-3 rounded-xl border bg-white p-4 md:grid-cols-3 lg:grid-cols-6 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">调用类型</label>
+          <label className="text-muted-foreground text-xs dark:text-white">调用类型</label>
          <Select
            value={kind}
            onValueChange={(value) => {
@@ -276,17 +303,17 @@ export function ToolMetricsPanel() {
              setPage(0);
            }}
          >
-            <SelectTrigger>
+            <SelectTrigger className="dark:bg-[#0D2D54] dark:hover:bg-[#0D2D54]">
              <SelectValue />
            </SelectTrigger>
-            <SelectContent>
+            <SelectContent position="popper" side="bottom" sideOffset={4}>
              <SelectItem value="skill">技能（Agent Skill）</SelectItem>
              <SelectItem value="all">全部工具调用</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">技能名称</label>
+          <label className="text-muted-foreground text-xs dark:text-white">技能名称</label>
          <Input
            value={skill}
            placeholder="按技能名筛选"
@@ -297,7 +324,7 @@ export function ToolMetricsPanel() {
          />
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">工具名</label>
+          <label className="text-muted-foreground text-xs dark:text-white">工具名</label>
          <Input
            value={tool}
            placeholder="按工具名筛选"
@@ -308,7 +335,7 @@ export function ToolMetricsPanel() {
          />
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">用户名</label>
+          <label className="text-muted-foreground text-xs dark:text-white">用户名</label>
          <Input
            value={user}
            placeholder="@ 前部分"
@@ -319,7 +346,7 @@ export function ToolMetricsPanel() {
          />
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">状态</label>
+          <label className="text-muted-foreground text-xs dark:text-white">状态</label>
          <Select
            value={status}
            onValueChange={(value) => {
@@ -327,10 +354,10 @@ export function ToolMetricsPanel() {
              setPage(0);
            }}
          >
-            <SelectTrigger>
+            <SelectTrigger className="w-full dark:bg-[#0D2D54] dark:hover:bg-[#0D2D54]">
              <SelectValue />
            </SelectTrigger>
-            <SelectContent>
+            <SelectContent position="popper" side="bottom" sideOffset={4}>
              <SelectItem value="all">全部</SelectItem>
              <SelectItem value="success">成功</SelectItem>
              <SelectItem value="error">失败</SelectItem>
@@ -338,7 +365,7 @@ export function ToolMetricsPanel() {
          </Select>
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">错误类型</label>
+          <label className="text-muted-foreground text-xs dark:text-white">错误类型</label>
          <Select
            value={category}
            onValueChange={(value) => {
@@ -346,10 +373,10 @@ export function ToolMetricsPanel() {
              setPage(0);
            }}
          >
-            <SelectTrigger>
+            <SelectTrigger className="w-full dark:bg-[#0D2D54] dark:hover:bg-[#0D2D54]">
              <SelectValue />
            </SelectTrigger>
-            <SelectContent>
+            <SelectContent  position="popper" side="bottom" sideOffset={4}>
              <SelectItem value="all">全部</SelectItem>
              {TOOL_ERROR_CATEGORIES.map((cat) => (
                <SelectItem key={cat} value={cat}>
@@ -360,7 +387,7 @@ export function ToolMetricsPanel() {
          </Select>
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">开始时间</label>
+          <label className="text-muted-foreground text-xs dark:text-white">开始时间</label>
          <Input
            type="datetime-local"
            value={since}
@@ -371,7 +398,7 @@ export function ToolMetricsPanel() {
          />
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">结束时间</label>
+          <label className="text-muted-foreground text-xs dark:text-white">结束时间</label>
          <Input
            type="datetime-local"
            value={until}
@@ -389,10 +416,10 @@ export function ToolMetricsPanel() {
      </div>

      {/* Table */}
-      <div className="rounded-xl border bg-white">
+      <div className="rounded-xl border bg-white dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[960px] text-sm">
-            <thead className="bg-muted/60 text-muted-foreground">
+            <thead className="bg-muted/60 text-muted-foreground dark:text-white">
              <tr>
                <Th>时间</Th>
                <Th>用户</Th>
@@ -8,7 +8,6 @@ import {
  type MessageResponseProps,
 } from "@/components/ai-elements/message";
 import { streamdownPlugins } from "@/core/streamdown";
-import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";

 import { CitationLink } from "../citations/citation-link";
@@ -36,13 +35,13 @@ export function MarkdownContent({
 }: MarkdownContentProps) {
  const components = useMemo(() => {
    return {
-      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
-        if (props.href?.startsWith("#reference-")) {
-          return <CitationLink {...props} />;
-        }
-        if (typeof props.children === "string") {
-          const match = /^citation:(.+)$/.exec(props.children);
-          if (match) {
+      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+        if (props.href?.startsWith("#reference-")) {
+          return <CitationLink {...props} />;
+        }
+        if (typeof props.children === "string") {
+          const match = /^citation:(.+)$/.exec(props.children);
+          if (match) {
            const [, text] = match;
            return <CitationLink {...props}>{text}</CitationLink>;
          }
@@ -67,8 +66,6 @@ export function MarkdownContent({

  if (!content) return null;

-  const displayContent = desensitize(content);
-
  return (
    <MessageResponse
      className={className}
@@ -76,7 +73,7 @@ export function MarkdownContent({
      rehypePlugins={rehypePlugins}
      components={components}
    >
-      {displayContent}
+      {content}
    </MessageResponse>
  );
 }
@@ -47,7 +47,6 @@ import {
  type RuntimeDisplaySource,
 } from "@/core/skill-display/runtime";
 import { humanMessagePlugins } from "@/core/streamdown";
-import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";

 import { CitationLink } from "../citations/citation-link";
@@ -264,7 +263,7 @@ function MessageContent_({
          <TaskTrigger title="">
            <div className="text-muted-foreground flex w-full cursor-default items-center gap-2 text-sm select-none">
              <Loader className="size-4" />
-              <span>{desensitize(contentToDisplay)}</span>
+              <span>{contentToDisplay}</span>
            </div>
          </TaskTrigger>
        </Task>
@@ -278,7 +277,7 @@ function MessageContent_({
      <AIElementMessageContent className={className}>
        <Reasoning isStreaming={isLoading}>
          <ReasoningTrigger />
-          <ReasoningContent>{desensitize(reasoningContent)}</ReasoningContent>
+          <ReasoningContent>{reasoningContent}</ReasoningContent>
        </Reasoning>
        <MessageTokenUsage
          enabled={tokenUsageEnabled}
@@ -297,7 +296,7 @@ function MessageContent_({
        components={components}
        parseIncompleteMarkdown={false}
      >
-        {desensitize(contentToDisplay)}
+        {contentToDisplay}
      </AIElementMessageResponse>
    ) : null;
    return (
@@ -6,6 +6,7 @@ import { toast } from "sonner";

 import { useTheme } from "@/contexts/ThemeContext";

+import { FONT_SCALE_OPTIONS } from "@/components/font-scale";
 import { Button } from "@/components/ui/button";
 import {
  Select,
@@ -21,12 +22,12 @@ import { getStoredAuth } from "@/core/auth";
 import { enUS, isLocale, zhCN, type Locale } from "@/core/i18n";
 import { useI18n } from "@/core/i18n/hooks";
 import { useLocalSettings } from "@/core/settings";
-import {
-  useAppearanceSettings,
-  useCitationDisplaySettings,
-  useUpdateAppearanceSettings,
-  useUpdateCitationDisplaySettings,
-} from "@/core/system-settings/hooks";
+import {
+  useAppearanceSettings,
+  useCitationDisplaySettings,
+  useUpdateAppearanceSettings,
+  useUpdateCitationDisplaySettings,
+} from "@/core/system-settings/hooks";
 import { cn } from "@/lib/utils";

 import { SettingsSection } from "./settings-section";
@@ -42,13 +43,13 @@ export function AppearanceSettingsPage() {
  const currentTheme = theme;
  const [settings, setSettings] = useLocalSettings();
  const isAdmin = getStoredAuth()?.system_role === "admin";
-  const { data: appearance } = useAppearanceSettings();
-  const updateAppearance = useUpdateAppearanceSettings();
-  const { data: citationDisplay } = useCitationDisplaySettings();
-  const updateCitationDisplay = useUpdateCitationDisplaySettings();
-  const globalDefault = appearance?.default_theme ?? "light";
-  const cleanupWords =
-    citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? [];
+  const { data: appearance } = useAppearanceSettings();
+  const updateAppearance = useUpdateAppearanceSettings();
+  const { data: citationDisplay } = useCitationDisplaySettings();
+  const updateCitationDisplay = useUpdateCitationDisplaySettings();
+  const globalDefault = appearance?.default_theme ?? "light";
+  const cleanupWords =
+    citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? [];

  const handleSetGlobalDefault = async (value: "light" | "dark") => {
    if (value === globalDefault) return;
@@ -147,6 +148,39 @@ export function AppearanceSettingsPage() {

      <Separator />

+      <SettingsSection
+        title="字号"
+        description="调整界面整体字号，方便放大或缩小阅读。默认 16px（标准）。"
+      >
+        <div className="space-y-3">
+          <Select
+            value={String(settings.display.fontScale ?? 1)}
+            onValueChange={(value) => {
+              const scale = Number(value);
+              if (Number.isFinite(scale) && scale > 0) {
+                setSettings("display", { fontScale: scale });
+              }
+            }}
+          >
+            <SelectTrigger className="w-[220px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {FONT_SCALE_OPTIONS.map((item) => (
+                <SelectItem key={item.value} value={String(item.value)}>
+                  {item.label}（{item.px}px）
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <div className="text-muted-foreground rounded-lg border p-4 text-sm leading-relaxed">
+            预览：多智能体圆桌研讨 · The quick brown fox · 0123456789
+          </div>
+        </div>
+      </SettingsSection>
+
+      <Separator />
+
      <SettingsSection
        title={t.settings.appearance.languageTitle}
        description={t.settings.appearance.languageDescription}
@@ -217,16 +251,16 @@ export function AppearanceSettingsPage() {
                管理员配置。每行一个词或短句，参考文献卡片和详情弹框会自动移除这些广告词、导航词或免责声明。
              </p>
            </div>
-            <Textarea
-              value={cleanupWords.join("\n")}
-              onChange={(event) => {
-                const words = event.currentTarget.value
-                    .split(/\r?\n/)
-                    .map((item) => item.trim())
-                    .filter(Boolean);
-                setSettings("display", { citationCleanupWords: words });
-                updateCitationDisplay.mutate({ cleanup_words: words });
-              }}
+            <Textarea
+              value={cleanupWords.join("\n")}
+              onChange={(event) => {
+                const words = event.currentTarget.value
+                    .split(/\r?\n/)
+                    .map((item) => item.trim())
+                    .filter(Boolean);
+                setSettings("display", { citationCleanupWords: words });
+                updateCitationDisplay.mutate({ cleanup_words: words });
+              }}
              placeholder={"广告\n点击下载APP\n打开客户端\n免责声明\n责任编辑"}
              className="min-h-32 text-sm"
            />
@@ -229,7 +229,7 @@ export function MemorySettingsPage() {
                <SelectTrigger className="h-8 w-44" size="sm">
                  <SelectValue />
                </SelectTrigger>
-                <SelectContent>
+                <SelectContent position="popper" side="bottom" sideOffset={4}>
                  <SelectItem value="default">
                    {m.workNotesDefaultAgent}
                  </SelectItem>
@@ -490,7 +490,7 @@ function MemoryV1View({
  return (
    <div className="space-y-3">
      {/* 说明横幅 */}
-      <div className="rounded-md border border-dashed px-4 py-3 text-sm text-muted-foreground">
+      <div className="rounded-md border border-dashed px-4 py-3 text-sm text-muted-foreground dark:border-[#213D5E] dark:bg-[#022248]">
        V1 模式：记忆由系统在对话结束后自动提取，无需手动管理。
      </div>

@@ -509,13 +509,13 @@ function MemoryV1View({

        {/* 事实记录 Tab */}
        <TabsContent value="facts" className="mt-3">
-          <div className="rounded-lg border p-4 space-y-3">
+          <div className="rounded-lg border p-4 space-y-3 dark:border-[#213D5E] dark:bg-[#022248]">
            <div className="flex items-center justify-between">
              <h3 className="text-base font-medium">事实记录</h3>
              <span className="text-xs text-muted-foreground">{memory.memory_usage}</span>
            </div>
            {memory.facts.length === 0 ? (
-              <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">
+              <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground ">
                暂无事实记录，对话后系统会自动提取。
              </div>
            ) : (
@@ -542,21 +542,21 @@ function MemoryV1View({
                    </div>
                    <p className="text-sm whitespace-pre-wrap [overflow-wrap:anywhere]">{desensitize(fact.content)}</p>
                    {fact.sourceError && (
-                      <p className="text-xs text-red-600 bg-red-50 rounded px-2 py-1">
+                      <p className="rounded bg-red-50 px-2 py-1 text-xs text-red-600 dark:bg-[#311629] dark:text-[#EE212C]">
                        避免：{desensitize(fact.sourceError)}
                      </p>
                    )}
                  </div>
                ))}
              </div>
-            )}
+             )}
          </div>
        </TabsContent>

        {/* 用户画像 & 历史摘要 Tab */}
        <TabsContent value="profile" className="mt-3 space-y-4">
          {/* 用户画像 (userContext) */}
-          <div className="rounded-lg border p-4 space-y-2">
+          <div className="rounded-lg border p-4 space-y-2 dark:border-[#213D5E] dark:bg-[#022248]">
            <h3 className="text-base font-medium">用户画像</h3>
            {ctxEntries.length === 0 ? (
              <p className="text-sm text-muted-foreground">暂无画像信息，对话后系统会自动归纳。</p>
@@ -575,7 +575,7 @@ function MemoryV1View({
          </div>

          {/* 历史摘要 (history) */}
-          <div className="rounded-lg border p-4 space-y-2">
+          <div className="rounded-lg border p-4 space-y-2 dark:border-[#213D5E] dark:bg-[#022248]">
            <h3 className="text-base font-medium">历史摘要</h3>
            {historyEntries.length === 0 ? (
              <p className="text-sm text-muted-foreground">暂无历史摘要。</p>
@@ -9,6 +9,7 @@ import {
  ClockIcon,
  FileArchive,
  GlobeIcon,
+  InfoIcon,
  Loader2,
  LockIcon,
  PinIcon,
@@ -54,6 +55,7 @@ import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-di
 import { TagChipList } from "@/components/workspace/tags/tag-chip";
 import { TagPickerDialog } from "@/components/workspace/tags/tag-picker-dialog";
 import { TagSearchBar } from "@/components/workspace/tags/tag-search-bar";
+import { useTheme } from "@/contexts/ThemeContext";
 import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import type { ValidateSkillUploadResponse } from "@/core/skills/api";
@@ -88,8 +90,42 @@ export function SkillSettingsPage({ onClose }: { onClose?: () => void } = {}) {

 const PAGE_SIZE = 10;

+/** 重新扫描成功 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
+const rescanSuccessToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 重新扫描无变更 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
+const rescanInfoToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#704812] !bg-[#202222] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <InfoIcon className="size-4 shrink-0 text-[#FF9900]" />,
+} as const;
+
+/** 重新扫描失败 toast：仅暗色模式使用，浅色走 Sonner 默认样式 */
+const rescanErrorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
+
 function SkillSettingsList({ onClose }: { onClose?: () => void }) {
  const { t } = useI18n();
+  const { theme } = useTheme();
  const router = useRouter();
  const [filter, setFilter] = useState<string>("mine");
  const [installOpen, setInstallOpen] = useState(false);
@@ -174,13 +210,21 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
            "{count}",
            String(result.adopted.length),
          ),
+          theme === "dark" ? rescanSuccessToastDarkOptions : undefined,
        );
      } else {
-        toast.info(t.settings.skills.rescanSkillsNoop);
+        toast.info(
+          t.settings.skills.rescanSkillsNoop,
+          theme === "dark" ? rescanInfoToastDarkOptions : undefined,
+        );
      }
    } catch (err) {
-      toast.error(err instanceof Error ? err.message : String(err));
+      toast.error(
+        err instanceof Error ? err.message : String(err),
+        theme === "dark" ? rescanErrorToastDarkOptions : undefined,
+      );
    }
+      
  };
  return (
    <div className="flex w-full flex-col gap-4">
@@ -398,7 +442,7 @@ export function SkillRow({

  return (
    <>
-      <Item className="w-full" variant="outline">
+      <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
        <ItemContent
          className="cursor-pointer"
          onClick={() => setDetailOpen(true)}
@@ -425,10 +425,15 @@ function ConfigCard() {
              })
            }
          >
-            <SelectTrigger className="max-w-[20rem]">
+            <SelectTrigger
+              className={cn(
+                "max-w-[20rem]",
+                "dark:border-[#1B477E] dark:bg-[#0D2D54] dark:text-[#AACEFF] dark:data-[placeholder]:text-[#566B7F] dark:hover:bg-[#0D2D54]",
+              )}
+            >
              <SelectValue />
            </SelectTrigger>
-            <SelectContent>
+            <SelectContent position="popper" side="bottom" sideOffset={4}>
              <SelectItem value={DEFAULT_MODEL_VALUE}>
                {tt.curatorModelDefault}
              </SelectItem>
@@ -20,8 +20,11 @@ export function WorkspaceContainer({
  children,
  ...props
 }: React.ComponentProps<"div">) {
+  // h-full 而非 h-screen:本容器恒在 WorkspaceRoutes 的 SidebarInset(flex-1,确定高度)下,
+  // h-full 既跟随容器高度(无界等嵌套不再锁死整屏),又修掉原 h-screen=100vh 比可用区域
+  // 高出一个页头高度的溢出。
  return (
-    <div className={cn("flex h-screen w-full flex-col", className)} {...props}>
+    <div className={cn("flex h-full w-full flex-col", className)} {...props}>
      {children}
    </div>
  );
@@ -51,7 +51,14 @@ export function readExternalLoginParams(): Required<ExternalLoginParams> {
  }
 }

-/** 把 ``theme`` query 值映射成 ThemeContext 的 ``'dark' | 'light'`` */
+/**
+ * 把外部(URL query / 无界 props)的 ``theme`` 值映射成 ThemeContext 的
+ * ``'dark' | 'light'``。已知取值:
+ *   - ``dark-blue`` → 深色
+ *   - ``red``       → 浅色(当前默认红白主题)
+ *   - ``blue``      → 暂无该主题,先用浅色代替(命中 else 分支)
+ * 其余/缺省同样回退浅色。将来若新增 blue 主题,在此扩展映射即可。
+ */
 export function resolveThemeFromQuery(themeParam: string | null | undefined): "dark" | "light" {
  return themeParam === "dark-blue" ? "dark" : "light";
 }
@@ -0,0 +1,78 @@
+/**
+ * 无界(wujie)子应用运行时 props 读取。
+ *
+ * 本应用作为子应用被内网门户用无界嵌套时,父级通过
+ *   <WujieVue name="subApp" :url="..." :props="{ ticket, userId, theme, env }" />
+ * 注入参数,子应用在 `window.$wujie.props` 上拿到**同一个对象**(无界在子应用
+ * bootstrap 之前就已注入,因此首帧即可读)。
+ *
+ * 本期范围:只「读出来 + 存起来 + 打印」,**不接入对方鉴权**。读出的
+ * ticket/userId/env 复用 external-login 的 localStorage 存储(与 URL 跳转登录
+ * 同一套 key),theme 交给调用方(LoginPage)映射到 ThemeContext。
+ */
+import { useEffect, useMemo } from "react";
+
+import { persistExternalLoginParams } from "@/core/auth/external-login";
+
+/** 无界父级注入的 props 形状。除已知字段外允许透传其余未知字段便于排查。 */
+export interface WujieProps {
+  /** 第三方鉴权 ticket(本期仅存储待用,不消费)。 */
+  ticket?: string;
+  /** 外部用户 id。 */
+  userId?: string;
+  /** 环境标识。 */
+  env?: string;
+  /** 主题色标识(映射到深/浅色)。 */
+  theme?: string;
+  [key: string]: unknown;
+}
+
+interface WujieRuntime {
+  props?: WujieProps;
+  [key: string]: unknown;
+}
+
+declare global {
+  interface Window {
+    /** 无界注入的子应用运行时;非无界环境下为 undefined。 */
+    $wujie?: WujieRuntime;
+    /** 无界注入的环境标志(子应用内为 true)。 */
+    __POWERED_BY_WUJIE__?: boolean;
+  }
+}
+
+/** 当前是否运行在无界子应用环境中。 */
+export function isWujieEnv(): boolean {
+  return typeof window !== "undefined" && !!window.__POWERED_BY_WUJIE__;
+}
+
+/** 读取无界父级注入的 props;不在无界环境 / 未注入时返回空对象。 */
+export function readWujieProps(): WujieProps {
+  if (typeof window === "undefined") return {};
+  return window.$wujie?.props ?? {};
+}
+
+/**
+ * 全局读取无界父级注入的 props 的 hook。
+ *
+ * - 首帧从 `window.$wujie.props` 读出(无界已在 bootstrap 前注入,引用稳定);
+ * - 读到后把 ticket/userId/env 持久化到 localStorage(复用 external-login 存储),
+ *   供后续任意页面/请求读取 —— 即「存到全局」;
+ * - 返回 props 供调用方消费(如 LoginPage 取 theme)。
+ *
+ * 非无界环境(直接访问)下返回空对象且不做任何持久化,可安全无条件调用。
+ */
+export function useWujieProps(): WujieProps {
+  const props = useMemo(() => readWujieProps(), []);
+
+  useEffect(() => {
+    if (!props.ticket && !props.userId && !props.env) return;
+    persistExternalLoginParams({
+      ticket: props.ticket,
+      userId: props.userId,
+      env: props.env,
+    });
+  }, [props.ticket, props.userId, props.env]);
+
+  return props;
+}
@@ -4,11 +4,12 @@ export const DEFAULT_LOCAL_SETTINGS: LocalSettings = {
  notification: {
    enabled: true,
  },
-  display: {
-    streamSpeedMeterEnabled: true,
-    ragModeEnabled: false,
-    citationCleanupWords: [],
-  },
+  display: {
+    streamSpeedMeterEnabled: true,
+    ragModeEnabled: false,
+    citationCleanupWords: [],
+    fontScale: 1,
+  },
  context: {
    model_name: undefined,
    mode: undefined,
@@ -17,9 +18,9 @@ export const DEFAULT_LOCAL_SETTINGS: LocalSettings = {
  },
 };

-export const LOCAL_SETTINGS_KEY = "deerflow.local-settings";
-export const THREAD_MODEL_KEY_PREFIX = "deerflow.thread-model.";
-export const THREAD_RAG_MODE_KEY_PREFIX = "deerflow.thread-rag-mode.";
+export const LOCAL_SETTINGS_KEY = "deerflow.local-settings";
+export const THREAD_MODEL_KEY_PREFIX = "deerflow.thread-model.";
+export const THREAD_RAG_MODE_KEY_PREFIX = "deerflow.thread-rag-mode.";

 function isBrowser(): boolean {
  return typeof window !== "undefined";
@@ -40,13 +41,20 @@ export interface LocalSettings {
     * Global switch for skill result display adapters. When disabled, chat
     * messages render tool results with the legacy generic search UI only.
     */
-    ragModeEnabled: boolean;
-    /**
-     * Admin-maintained words or short phrases removed from reference snippets
-     * and dialogs, one entry per line in the settings UI.
-     */
-    citationCleanupWords: string[];
-  };
+    ragModeEnabled: boolean;
+    /**
+     * Admin-maintained words or short phrases removed from reference snippets
+     * and dialogs, one entry per line in the settings UI.
+     */
+    citationCleanupWords: string[];
+    /**
+     * Global UI font scale multiplier applied to the root <html> font-size.
+     * Base is 16px (deep-blue UI spec §2.1.2 body text), so `1` === 16px.
+     * The user picks a size from the appearance settings page; because the
+     * app sizes text/spacing in rem, the whole UI scales proportionally.
+     */
+    fontScale: number;
+  };
  context: Omit<
    AgentThreadContext,
    | "thread_id"
@@ -91,10 +99,10 @@ export function getThreadModelName(threadId: string): string | undefined {
  return localStorage.getItem(getThreadModelStorageKey(threadId)) ?? undefined;
 }

-export function saveThreadModelName(
-  threadId: string,
-  modelName: string | undefined,
-) {
+export function saveThreadModelName(
+  threadId: string,
+  modelName: string | undefined,
+) {
  if (!isBrowser()) {
    return;
  }
@@ -103,26 +111,26 @@ export function saveThreadModelName(
    localStorage.removeItem(key);
    return;
  }
-  localStorage.setItem(key, modelName);
-}
-
-function getThreadRagModeStorageKey(threadId: string): string {
-  return `${THREAD_RAG_MODE_KEY_PREFIX}${threadId}`;
-}
-
-export function isThreadRagModeLocked(threadId: string): boolean {
-  if (!isBrowser() || !threadId) {
-    return false;
-  }
-  return localStorage.getItem(getThreadRagModeStorageKey(threadId)) === "true";
-}
-
-export function lockThreadRagMode(threadId: string) {
-  if (!isBrowser() || !threadId) {
-    return;
-  }
-  localStorage.setItem(getThreadRagModeStorageKey(threadId), "true");
-}
+  localStorage.setItem(key, modelName);
+}
+
+function getThreadRagModeStorageKey(threadId: string): string {
+  return `${THREAD_RAG_MODE_KEY_PREFIX}${threadId}`;
+}
+
+export function isThreadRagModeLocked(threadId: string): boolean {
+  if (!isBrowser() || !threadId) {
+    return false;
+  }
+  return localStorage.getItem(getThreadRagModeStorageKey(threadId)) === "true";
+}
+
+export function lockThreadRagMode(threadId: string) {
+  if (!isBrowser() || !threadId) {
+    return;
+  }
+  localStorage.setItem(getThreadRagModeStorageKey(threadId), "true");
+}

 export function applyThreadModelOverride(
  settings: LocalSettings,
@@ -5,6 +5,7 @@
 */
 export const DESENSITIZE_MAP: Record<string, string> = {
  态势: "TS",
+  你好: "nh",
  滨海作战体系: "第一张网",
  滨海作战部队: "第一张网",
  'Taiwan Air Force Flight Units': "第二张网",
@@ -9,16 +9,16 @@ function DraftWaitingPlaceholder() {
  return (
    <div className="h-full flex flex-col items-center justify-center gap-5 select-none">
      <div className="relative">
-        <div className="w-16 h-16 rounded-2xl bg-muted/60 flex items-center justify-center">
-          <FileText className="w-8 h-8 text-muted-foreground/40" />
+        <div className="w-16 h-16 rounded-2xl bg-muted/60 flex items-center justify-center  dark:bg-[#022248] ">
+          <FileText className="w-8 h-8 text-muted-foreground/40 dark:text-[#55A6FE] " />
        </div>
-        <div className="absolute -bottom-1.5 -right-1.5 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
-          <PenLine className="w-3.5 h-3.5 text-primary/60" />
+        <div className="absolute -bottom-1.5 -right-1.5 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center dark:bg-[#102D5C] ">
+          <PenLine className="w-3.5 h-3.5 text-primary/60 dark:text-[#2580FF] " />
        </div>
      </div>
      <div className="text-center space-y-1.5 max-w-[200px]">
-        <p className="text-sm font-medium text-foreground/60">草稿将在此处显示</p>
-        <p className="text-[11px] text-muted-foreground leading-relaxed">
+        <p className="text-sm font-medium text-foreground/60 dark:text-[#AACEFF]">草稿将在此处显示</p>
+        <p className="text-[11px] text-muted-foreground leading-relaxed dark:text-[#55A6FE]">
          完成写作流程后，AI 生成的内容将实时出现在这里
        </p>
      </div>
@@ -25,7 +25,9 @@ interface AIWritingFormProps {
 const INPUT_CLASS =
  'flex h-12 w-full rounded-xl border border-[#e8dedd] bg-white px-4 py-2 text-sm shadow-sm ' +
  'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ' +
-  'focus-visible:ring-ring disabled:opacity-50';
+  'focus-visible:ring-ring disabled:opacity-50 ' +
+  'dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] dark:placeholder:text-[#566B7F] ' +
+  'dark:[color-scheme:dark] dark:focus-visible:border-[#3b82f6] dark:focus-visible:ring-[#3b82f6]/30';

 const DEFAULT_KEYWORD_COUNT = 1;
 const DEFAULT_AUDIENCE = '普通读者';
@@ -127,16 +129,18 @@ export function AIWritingForm({

  return (
    <form onSubmit={handleSubmit} className="space-y-4 px-4 py-4">
-      <div className="rounded-2xl border border-[#ebe3e2] bg-[#fcf8f8] p-4">
-        <div className="flex items-center gap-2 border-b border-[#ece5e4] pb-3">
-          <PenLine className="size-4 text-[#8b6f6f]" />
-          <h3 className="text-[18px] font-semibold leading-none text-[#2f2f2f]">写作配置选项</h3>
+      <div className="rounded-2xl border border-[#ebe3e2] bg-[#fcf8f8] p-4 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white [&_h3]:dark:text-white [&_label]:dark:text-white">
+        <div className="flex items-center gap-2 border-b border-[#ece5e4] pb-3 dark:border-[#213D5E]">
+          <PenLine className="size-4 text-[#8b6f6f] dark:text-white" />
+          <h3 className="text-[18px] font-semibold leading-none text-[#2f2f2f] dark:text-white">
+            写作配置选项
+          </h3>
        </div>

        <div className="mt-4 space-y-2">
          <div className="flex items-center justify-between">
            <label className={FIELD_LABEL_CLASS}>写作意图</label>
-            <span className="text-sm text-muted-foreground">
+            <span className="text-sm text-muted-foreground dark:text-white/70">
              {intent.length} / {MAX_INTENT_LENGTH} 字
            </span>
          </div>
@@ -162,7 +166,7 @@ export function AIWritingForm({
              <SelectTrigger className={FIELD_TRIGGER_CLASS}>
                <SelectValue placeholder={typesLoading ? '加载中…' : '选择类型'} />
              </SelectTrigger>
-              <SelectContent>
+              <SelectContent position="popper" side="bottom" sideOffset={4}>
                {articleTypes.map((t) => (
                  <SelectItem key={t.key} value={t.key} className="text-sm">
                    {t.label}
@@ -229,7 +233,7 @@ export function AIWritingForm({
                }
              />
            </SelectTrigger>
-            <SelectContent>
+            <SelectContent position="popper" side="bottom" sideOffset={4}>
              {models.map((m) => (
                <SelectItem key={m.name} value={m.name} className="text-sm">
                  {m.display_name || m.name}
@@ -1,6 +1,6 @@
 "use client";

-import { BotIcon, RefreshCwIcon, SearchIcon } from "lucide-react";
+import { AlertCircle, BotIcon, CheckCircle2, RefreshCwIcon, SearchIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";

@@ -22,9 +22,37 @@ import {
 import { AgentCard } from "@/components/workspace/agents/agent-card";
 import { useAdminSyncAgentSkills, useAllAgentsAdmin } from "@/core/agents";
 import type { AgentSkillsSyncResult } from "@/core/agents/api";
+import { useTheme } from "@/contexts/ThemeContext";
 import { desensitize } from "@/lib/desensitize";

+/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
+const successToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
+const errorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
+
 export default function AdminAgentsPage() {
+  const { theme } = useTheme();
+  const darkToastOpts =
+    theme === "dark"
+      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
+      : { success: undefined, error: undefined };
  const [search, setSearch] = useState("");
  const { agents, isLoading } = useAllAgentsAdmin(true);
  const syncSkills = useAdminSyncAgentSkills();
@@ -39,14 +67,21 @@ export default function AdminAgentsPage() {
      setSyncResult(result);
      setSyncDialogOpen(true);
      if (result.modified === 0) {
-        toast.success("所有智能体的技能均有效，无需清理");
+        toast.success(
+          "所有智能体的技能均有效，无需清理",
+          darkToastOpts.success,
+        );
      } else {
        toast.success(
          `已清理 ${result.modified} 个智能体中的失效技能引用`,
+          darkToastOpts.success,
        );
      }
    } catch (err) {
-      toast.error(err instanceof Error ? err.message : String(err));
+      toast.error(
+        err instanceof Error ? err.message : String(err),
+        darkToastOpts.error,
+      );
    }
  }

@@ -17,6 +17,7 @@ import { toast } from "sonner";

 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { useTheme } from "@/contexts/ThemeContext";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
  Dialog,
@@ -70,6 +71,7 @@ const emptyForm = {
 };

 export default function AdminScheduledTasksPage() {
+  const { theme } = useTheme();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  // ?task= carries the task to re-select when returning from a run detail.
@@ -227,7 +229,10 @@ export default function AdminScheduledTasksPage() {
                  onChange={(event) => setSearchInput(event.target.value)}
                  placeholder="按任务名称搜索"
                />
-                <Button type="submit" variant="outline">
+                <Button
+                  type="submit"
+                  variant={theme === "dark" ? "default" : "outline"}
+                >
                  <Search className="size-4" />
                  搜索
                </Button>
@@ -84,10 +84,10 @@ export default function AdminSkillsPage() {
            )}
            {!isLoading && !error && filteredSkills.length === 0 && (
              <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
-                <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
-                  <SparklesIcon className="text-muted-foreground h-7 w-7" />
+                <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full dark:bg-[#022248]">
+                  <SparklesIcon className="text-muted-foreground h-7 w-7 dark:text-[#AACEFF]" />
                </div>
-                <p className="text-muted-foreground text-sm">
+                <p className="text-muted-foreground text-sm dark:text-[#AACEFF]">
                  当前没有可管理的技能。
                </p>
              </div>
@@ -1,6 +1,6 @@
 "use client";

-import { Download, Loader2 } from "lucide-react";
+import { AlertCircle,CheckCircle2, Download, Loader2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";

@@ -22,6 +22,7 @@ import {
 } from "@/core/llm-metrics/api";
 import { useLlmMetrics } from "@/core/llm-metrics/hooks";
 import { cn } from "@/lib/utils";
+import { useTheme } from "@/contexts/ThemeContext";

 const PAGE_SIZE = 50;

@@ -74,6 +75,7 @@ function speedColor(tps?: number | null): string {

 /** The original LLM-call metrics view, now one tab of the metrics page. */
 function LlmMetricsPanel() {
+  const { theme } = useTheme();
  const [page, setPage] = useState(0);
  const [model, setModel] = useState("");
  const [user, setUser] = useState("");
@@ -81,6 +83,31 @@ function LlmMetricsPanel() {
  const [since, setSince] = useState("");
  const [until, setUntil] = useState("");
  const [exporting, setExporting] = useState(false);
+/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
+const successToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
+const errorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
+  const darkToastOpts =
+    theme === "dark"
+      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
+      : { success: undefined, error: undefined };

  const filters = useMemo<LlmMetricsFilters>(() => {
    const out: LlmMetricsFilters = {};
@@ -103,9 +130,9 @@ function LlmMetricsPanel() {
    setExporting(true);
    try {
      await downloadLlmMetricsExcel(filters);
-      toast.success("已导出为 Excel");
+      toast.success("已导出为 Excel",darkToastOpts.success);
    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "导出失败");
+      toast.error(e instanceof Error ? e.message : "导出失败",darkToastOpts.error);
    } finally {
      setExporting(false);
    }
@@ -267,9 +294,9 @@ function LlmMetricsPanel() {
        </Button>
      </div>

-      <div className="grid gap-3 rounded-xl border bg-white p-4 md:grid-cols-5">
-        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">模型</label>
+      <div className="grid gap-3 rounded-xl border bg-white p-4 md:grid-cols-5 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
+        <div className="flex flex-col gap-1 ">
+          <label className="text-muted-foreground text-xs dark:text-white">模型</label>
          <Input
            value={model}
            placeholder="按模型名筛选"
@@ -280,7 +307,7 @@ function LlmMetricsPanel() {
          />
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">用户名</label>
+          <label className="text-muted-foreground text-xs dark:text-white">用户名</label>
          <Input
            value={user}
            placeholder="按用户名匹配（@ 前部分）"
@@ -291,7 +318,7 @@ function LlmMetricsPanel() {
          />
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">状态</label>
+          <label className="text-muted-foreground text-xs dark:text-white">状态</label>
          <Select
            value={status}
            onValueChange={(value) => {
@@ -299,10 +326,10 @@ function LlmMetricsPanel() {
              setPage(0);
            }}
          >
-            <SelectTrigger>
+            <SelectTrigger className="w-full dark:bg-[#0D2D54] dark:hover:bg-[#0D2D54]">
              <SelectValue />
            </SelectTrigger>
-            <SelectContent>
+            <SelectContent position="popper" side="bottom" sideOffset={4}>
              <SelectItem value="all">全部</SelectItem>
              <SelectItem value="success">成功</SelectItem>
              <SelectItem value="error">失败</SelectItem>
@@ -310,7 +337,7 @@ function LlmMetricsPanel() {
          </Select>
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">开始时间</label>
+          <label className="text-muted-foreground text-xs dark:text-white">开始时间</label>
          <Input
            type="datetime-local"
            value={since}
@@ -321,7 +348,7 @@ function LlmMetricsPanel() {
          />
        </div>
        <div className="flex flex-col gap-1">
-          <label className="text-muted-foreground text-xs">结束时间</label>
+          <label className="text-muted-foreground text-xs dark:text-white">结束时间</label>
          <Input
            type="datetime-local"
            value={until}
@@ -338,10 +365,10 @@ function LlmMetricsPanel() {
        </div>
      </div>

-      <div className="rounded-xl border bg-white">
+      <div className="rounded-xl border bg-white dark:border-[#213D5E] dark:bg-[#02244C] ">
        <div className="overflow-x-auto">
          <table className="w-full min-w-[1080px] text-sm">
-            <thead className="bg-muted/60 text-muted-foreground">
+            <thead className="bg-muted/60 text-muted-foreground dark:text-white">
              <tr>
                {visibleColumns.map((col) => (
                  <Th
@@ -10,6 +10,7 @@ import {
  persistExternalLoginParams,
  resolveThemeFromQuery,
 } from "@/core/auth/external-login";
+import { isWujieEnv, useWujieProps } from "@/core/embed/wujie";
 import {
  GENERAL_QA_ROUTE,
  loginByYUserId,
@@ -53,11 +54,23 @@ export default function LoginPage() {
  const [status, setStatus] = useState<LoginStatus>("loading");
  const [errorMessage, setErrorMessage] = useState<string>("");

-  // 主题切换：theme=dark-blue → 深色，其他值或缺省 → 浅色
+  // 无界(wujie)父级通过 $wujie.props 注入的参数(ticket / userId / theme / env)。
+  // hook 内部已把 ticket/userId/env 持久化到 localStorage(复用 external-login 存储)。
+  const wujieProps = useWujieProps();
+
+  // 调试:把无界注入的 props 打印出来(仅在无界子应用环境下,避免独立访问时刷日志)。
  useEffect(() => {
-    if (!externalParams.theme) return;
-    setTheme(resolveThemeFromQuery(externalParams.theme));
-  }, [externalParams.theme, setTheme]);
+    if (!isWujieEnv()) return;
+    console.log("[wujie] sub-app props:", wujieProps);
+  }, [wujieProps]);
+
+  // 主题切换:无界 props.theme 优先,其次 URL query theme。两者取值约定一致
+  // (dark-blue → 深色;red → 浅色;blue 暂无该主题,先用浅色代替),统一走 resolveThemeFromQuery。
+  useEffect(() => {
+    const themeValue = wujieProps.theme || externalParams.theme;
+    if (!themeValue) return;
+    setTheme(resolveThemeFromQuery(themeValue));
+  }, [wujieProps.theme, externalParams.theme, setTheme]);

  // ticket / userId / env 持久化（与 login 请求并行做，互不阻塞）
  useEffect(() => {
@@ -18,8 +18,11 @@ function PageLayout() {
  const { theme } = useTheme();
  const isDark = theme === "dark";

+  // h-full(100%)而非 h-screen(100vh):配合 globals.css 的 html/body/#root height:100%
+  // 高度链,根布局跟随容器高度。全屏下 100% 解析到视口,与 h-screen 等价;无界等嵌套
+  // 下容器不占满整屏时,高度才能正确收缩而非锁死整屏。
  return (
-    <div className="h-screen flex flex-col bg-muted/20">
+    <div className="h-full flex flex-col bg-muted/20">
      {sidebarEnabled && <Header collapsed={collapsed} />}
      <div className="flex flex-1 overflow-hidden">
        {sidebarEnabled && (
@@ -1,8 +1,9 @@
 "use client";

-import { Loader2Icon, ShieldIcon } from "lucide-react";
+import { AlertCircle,CheckCircle2, Loader2Icon, ShieldIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useTheme } from "@/contexts/ThemeContext";

 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -12,13 +13,36 @@ import {
  useUpdatePrivateSquareSettings,
 } from "@/core/system-settings/hooks";

+/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
+const successToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
+const errorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
+
 export default function PrivateSquareSettingsPage() {
  const { data, isLoading, error } = usePrivateSquareStatus();
  const update = useUpdatePrivateSquareSettings();
-
+  const { theme } = useTheme();
  const [enabled, setEnabled] = useState(false);
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
+  
  // The status response never contains the password itself, so re-syncing
  // ``enabled`` from a refetch wouldn't clobber any in-progress edit — but we
  // still gate the seed on a one-shot ref to match the prompt-prefix page's
@@ -31,10 +55,14 @@ export default function PrivateSquareSettingsPage() {
    setEnabled(data.enabled);
    initializedRef.current = true;
  }, [data]);
+  const darkToastOpts =
+    theme === "dark"
+      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
+      : { success: undefined, error: undefined };

  const handleSave = async () => {
    if (password && password !== confirm) {
-      toast.error("两次输入的密码不一致");
+      toast.error("两次输入的密码不一致", darkToastOpts.error);
      return;
    }
    try {
@@ -48,9 +76,9 @@ export default function PrivateSquareSettingsPage() {
      });
      setPassword("");
      setConfirm("");
-      toast.success("已保存");
+      toast.success("已保存",darkToastOpts.success);
    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "保存失败");
+      toast.error(e instanceof Error ? e.message : "保存失败",darkToastOpts.error);
    }
  };

@@ -60,9 +88,9 @@ export default function PrivateSquareSettingsPage() {
    }
    try {
      await update.mutateAsync({ password: "" });
-      toast.success("已清除密码");
+      toast.success("已清除密码",darkToastOpts.success);
    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "清除失败");
+      toast.error(e instanceof Error ? e.message : "清除失败", darkToastOpts.error);
    }
  };

@@ -85,7 +113,7 @@ export default function PrivateSquareSettingsPage() {
          加载失败：{error.message}
        </div>
      ) : (
-        <div className="flex flex-col gap-5 rounded-xl border bg-white px-5 py-5">
+        <div className="flex flex-col gap-5 rounded-xl border bg-white px-5 py-5 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
          <div className="flex items-center justify-between gap-4">
            <div>
              <div className="text-sm font-medium">启用私密广场</div>
@@ -1,6 +1,6 @@
 "use client";

-import { Loader2Icon } from "lucide-react";
+import { Loader2Icon,AlertCircle,CheckCircle2, } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";

@@ -12,11 +12,33 @@ import {
  usePromptPrefixSettings,
  useUpdatePromptPrefixSettings,
 } from "@/core/system-settings/hooks";
+import { useTheme } from "@/contexts/ThemeContext";

+/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
+const successToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
+const errorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
 export default function PromptPrefixSettingsPage() {
  const { data, isLoading, error } = usePromptPrefixSettings();
  const update = useUpdatePromptPrefixSettings();
-
+  const { theme } = useTheme();
  const [enabled, setEnabled] = useState(false);
  const [switchLabel, setSwitchLabel] = useState("");
  const [promptPrefix, setPromptPrefix] = useState("");
@@ -34,13 +56,18 @@ export default function PromptPrefixSettingsPage() {
    initializedRef.current = true;
  }, [data]);

-  const handleSave = async () => {
+  const handleSave = async () => {  
+    const darkToastOpts =
+    theme === "dark"
+      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
+      : { success: undefined, error: undefined };
+
    if (enabled && !switchLabel.trim()) {
-      toast.error("开启时必须填写开关名称");
+      toast.error("开启时必须填写开关名称",darkToastOpts.error);
      return;
    }
    if (enabled && !promptPrefix.trim()) {
-      toast.error("开启时必须填写拼接的前缀内容");
+      toast.error("开启时必须填写拼接的前缀内容",darkToastOpts.error);
      return;
    }
    try {
@@ -49,9 +76,9 @@ export default function PromptPrefixSettingsPage() {
        switch_label: switchLabel,
        prompt_prefix: promptPrefix,
      });
-      toast.success("已保存");
+      toast.success("已保存",darkToastOpts.success);
    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "保存失败");
+      toast.error(e instanceof Error ? e.message : "保存失败",darkToastOpts.error);
    }
  };

@@ -74,7 +101,7 @@ export default function PromptPrefixSettingsPage() {
          加载失败：{error.message}
        </div>
      ) : (
-        <div className="flex flex-col gap-5 rounded-xl border bg-white px-5 py-5">
+        <div className="flex flex-col gap-5 rounded-xl border bg-white px-5 py-5 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
          <div className="flex items-center justify-between gap-4">
            <div>
              <div className="text-sm font-medium">向用户暴露开关</div>
@@ -2,6 +2,8 @@

 import { useState } from "react";
 import {
+  AlertCircle,
+  CheckCircle2,
  GripVerticalIcon,
  Loader2Icon,
  PencilIcon,
@@ -11,6 +13,7 @@ import {
 import { toast } from "sonner";

 import { Button } from "@/components/ui/button";
+import { useTheme } from "@/contexts/ThemeContext";
 import {
  Dialog,
  DialogContent,
@@ -34,7 +37,30 @@ type DialogState =
  | { mode: "edit"; question: RecommendedQuestion }
  | null;

+/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
+const successToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
+const errorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
+
 export default function RecommendedQuestionsPage() {
+  const { theme } = useTheme();
  const { questions, isLoading, error } = useRecommendedQuestions();
  const createMutation = useCreateRecommendedQuestion();
  const updateMutation = useUpdateRecommendedQuestion();
@@ -70,7 +96,7 @@ export default function RecommendedQuestionsPage() {
    const title = formTitle.trim();
    const content = formContent.trim();
    if (!title || !content) {
-      toast.error("标题和内容不能为空");
+      toast.error("标题和内容不能为空", darkToastOpts.error);
      return;
    }

@@ -81,17 +107,20 @@ export default function RecommendedQuestionsPage() {
          content,
          sort_order: questions.length,
        });
-        toast.success("问题已添加");
+        toast.success("问题已添加", darkToastOpts.success);
      } else if (dialog?.mode === "edit") {
        await updateMutation.mutateAsync({
          id: dialog.question.id,
          body: { title, content },
        });
-        toast.success("问题已更新");
+        toast.success("问题已更新", darkToastOpts.success);
      }
      closeDialog();
    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "操作失败");
+      toast.error(
+        e instanceof Error ? e.message : "操作失败",
+        darkToastOpts.error,
+      );
    }
  }

@@ -99,9 +128,12 @@ export default function RecommendedQuestionsPage() {
    try {
      await deleteMutation.mutateAsync(q.id);
      setDeleteTarget(null);
-      toast.success("问题已删除");
+      toast.success("问题已删除", darkToastOpts.success);
    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "删除失败");
+      toast.error(
+        e instanceof Error ? e.message : "删除失败",
+        darkToastOpts.error,
+      );
    }
  }

@@ -128,7 +160,7 @@ export default function RecommendedQuestionsPage() {
    try {
      await reorderMutation.mutateAsync(next.map((q) => q.id));
    } catch {
-      toast.error("排序保存失败");
+      toast.error("排序保存失败", darkToastOpts.error);
    }
  }

@@ -138,6 +170,11 @@ export default function RecommendedQuestionsPage() {
    deleteMutation.isPending ||
    reorderMutation.isPending;

+  const darkToastOpts =
+    theme === "dark"
+      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
+      : { success: undefined, error: undefined };
+
  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col gap-6 px-6 py-10">
      <div className="flex items-center justify-between">
@@ -162,15 +199,15 @@ export default function RecommendedQuestionsPage() {
          <p>加载失败：{error.message}</p>
        </div>
      ) : questions.length === 0 ? (
-        <div className="text-muted-foreground flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-sm">
+        <div className="text-muted-foreground flex flex-col items-center gap-3 rounded-xl border border-dashed py-16 text-sm dark:text-[#7FACF2]  dark:!border-[#213F62]">
          <p>暂无推荐问题</p>
-          <Button variant="outline" size="sm" onClick={openAdd}>
+          <Button  size="sm" onClick={openAdd}>
            <PlusIcon className="mr-1.5 size-4" />
            添加第一个问题
          </Button>
        </div>
      ) : (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 ">
          {questions.map((q, index) => (
            <div
              key={q.id}
@@ -182,18 +219,18 @@ export default function RecommendedQuestionsPage() {
                setDragIndex(null);
                setDragOverIndex(null);
              }}
-              className={`flex items-start gap-3 rounded-xl border bg-white px-4 py-3.5 transition-colors ${
+              className={`flex items-start gap-3 rounded-xl border bg-white px-4 py-3.5 transition-colors dark:bg-[#022248] dark:!border-[#213D5E] ${
                dragOverIndex === index && dragIndex !== index
-                  ? "border-blue-400 bg-blue-50"
+                  ? "border-blue-400 bg-blue-50 dark:border-[#2580FF] dark:bg-[#0D2D54]"
                  : "border-[#e4e4e7]"
              }`}
            >
-              <GripVerticalIcon className="text-muted-foreground/40 mt-0.5 size-4 shrink-0 cursor-grab active:cursor-grabbing" />
+              <GripVerticalIcon className="text-muted-foreground/40 mt-0.5 size-4 shrink-0 cursor-grab active:cursor-grabbing dark:text-[#566B7F]" />
              <div className="min-w-0 flex-1">
-                <div className="truncate text-sm font-medium text-[#18181b]">
+                <div className="truncate text-sm font-medium text-[#18181b] dark:text-white">
                  {q.title}
                </div>
-                <div className="text-muted-foreground mt-0.5 line-clamp-2 text-xs">
+                <div className="text-muted-foreground mt-0.5 line-clamp-2 text-xs dark:text-[#7FACF2]">
                  {q.content}
                </div>
              </div>
@@ -2,8 +2,10 @@

 import { useEffect, useMemo, useRef, useState } from "react";
 import {
+  AlertCircle,
  BellOff,
  BellRing,
+  CheckCircle2,
  Download,
  Edit3,
  Eye,
@@ -62,9 +64,32 @@ import {
  statusLabel,
  statusVariant,
 } from "@/components/workspace/scheduled-tasks/schedule-builder";
+import { useTheme } from "@/contexts/ThemeContext";
 import { desensitize } from "@/lib/desensitize";
 import { cn } from "@/lib/utils";

+/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
+const successToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
+} as const;
+
+/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
+const errorToastDarkOptions = {
+  classNames: {
+    toast:
+      "!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
+    title: "!text-[#FFFFFF]",
+    description: "!text-[#FFFFFF]",
+  },
+  icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
+} as const;
+
 function formatDate(value?: string | null) {
  return value ? new Date(value).toLocaleString() : "暂无";
 }
@@ -88,6 +113,11 @@ const emptyForm = {
 };

 export default function ScheduledTasksPage() {
+  const { theme } = useTheme();
+  const darkToastOpts =
+    theme === "dark"
+      ? { success: successToastDarkOptions, error: errorToastDarkOptions }
+      : { success: undefined, error: undefined };
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  // When returning from a run-detail page the task id is carried in ?task=,
@@ -207,7 +237,7 @@ export default function ScheduledTasksPage() {
          require_markdown: form.require_markdown,
        });
        setSelectedTaskId(task.task_id);
-        toast.success("任务已创建");
+        toast.success("任务已创建", darkToastOpts.success);
      } else if (editing) {
        await actions.update.mutateAsync({
          taskId: editing.task_id,
@@ -221,11 +251,14 @@ export default function ScheduledTasksPage() {
            require_markdown: form.require_markdown,
          },
        });
-        toast.success("任务已更新");
+        toast.success("任务已更新", darkToastOpts.success);
      }
      closeDialog();
    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "保存失败");
+      toast.error(
+        error instanceof Error ? error.message : "保存失败",
+        darkToastOpts.error,
+      );
    }
  };

@@ -233,16 +266,22 @@ export default function ScheduledTasksPage() {
    try {
      await downloadScheduledTaskRun(runId);
    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "下载失败");
+      toast.error(
+        error instanceof Error ? error.message : "下载失败",
+        darkToastOpts.error,
+      );
    }
  };

  const handleDeleteRun = async (runId: string) => {
    try {
      await actions.removeRun.mutateAsync(runId);
-      toast.success("执行记录已删除");
+      toast.success("执行记录已删除", darkToastOpts.success);
    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "删除失败");
+      toast.error(
+        error instanceof Error ? error.message : "删除失败",
+        darkToastOpts.error,
+      );
    }
  };

@@ -273,14 +312,18 @@ export default function ScheduledTasksPage() {
                />
                <Button
                  variant="outline"
+                  className="dark:bg-[#0D2D54] dark:hover:!bg-[#2580FF] dark:hover:text-white"
                  onClick={async () => {
                    try {
                      await actions.updateDeliveryProfile.mutateAsync({
                        element_user_id: elementUserId || null,
                      });
-                      toast.success("Element 配置已保存");
+                      toast.success("Element 配置已保存", darkToastOpts.success);
                    } catch (error) {
-                      toast.error(error instanceof Error ? error.message : "保存失败");
+                      toast.error(
+                        error instanceof Error ? error.message : "保存失败",
+                        darkToastOpts.error,
+                      );
                    }
                  }}
                >
@@ -437,7 +480,7 @@ export default function ScheduledTasksPage() {
                                  onClick={(event) => {
                                    event.stopPropagation();
                                    actions.trigger.mutate(task.task_id);
-                                    toast.success("已触发执行");
+                                    toast.success("已触发执行", darkToastOpts.success);
                                  }}
                                >
                                  <RefreshCw className="size-4" />
@@ -451,13 +494,19 @@ export default function ScheduledTasksPage() {
                                    try {
                                      if (task.published) {
                                        await actions.unpublish.mutateAsync(task.task_id);
-                                        toast.success("已取消发布（已订阅者保留）");
+                                        toast.success(
+                                          "已取消发布（已订阅者保留）",
+                                          darkToastOpts.success,
+                                        );
                                      } else {
                                        await actions.publish.mutateAsync(task.task_id);
-                                        toast.success("已发布到广场");
+                                        toast.success("已发布到广场", darkToastOpts.success);
                                      }
                                    } catch (error) {
-                                      toast.error(error instanceof Error ? error.message : "操作失败");
+                                      toast.error(
+                                        error instanceof Error ? error.message : "操作失败",
+                                        darkToastOpts.error,
+                                      );
                                    }
                                  }}
                                >
@@ -488,9 +537,15 @@ export default function ScheduledTasksPage() {
                                        taskId: task.task_id,
                                        notifyElement: !notifyOn,
                                      });
-                                      toast.success(notifyOn ? "已关闭 Element 通知" : "已开启 Element 通知");
+                                      toast.success(
+                                        notifyOn ? "已关闭 Element 通知" : "已开启 Element 通知",
+                                        darkToastOpts.success,
+                                      );
                                    } catch (error) {
-                                      toast.error(error instanceof Error ? error.message : "操作失败");
+                                      toast.error(
+                                        error instanceof Error ? error.message : "操作失败",
+                                        darkToastOpts.error,
+                                      );
                                    }
                                  }}
                                >
@@ -505,9 +560,12 @@ export default function ScheduledTasksPage() {
                                    event.stopPropagation();
                                    try {
                                      await actions.unsubscribe.mutateAsync(task.task_id);
-                                      toast.success("已取消收藏");
+                                      toast.success("已取消收藏", darkToastOpts.success);
                                    } catch (error) {
-                                      toast.error(error instanceof Error ? error.message : "操作失败");
+                                      toast.error(
+                                        error instanceof Error ? error.message : "操作失败",
+                                        darkToastOpts.error,
+                                      );
                                    }
                                  }}
                                >
@@ -581,7 +639,7 @@ export default function ScheduledTasksPage() {
                  <SelectTrigger className="h-7 w-28 text-xs">
                    <SelectValue />
                  </SelectTrigger>
-                  <SelectContent>
+                  <SelectContent position="popper" side="bottom" sideOffset={4}>
                    <SelectItem value="all">全部时间</SelectItem>
                    <SelectItem value="today">今天</SelectItem>
                    <SelectItem value="7d">近 7 天</SelectItem>
@@ -747,12 +805,15 @@ export default function ScheduledTasksPage() {
                    taskId: subscribeTarget.task_id,
                    notifyElement: subscribeNotify,
                  });
-                  toast.success("已收藏到我的任务");
+                  toast.success("已收藏到我的任务", darkToastOpts.success);
                  setSubscribeTarget(null);
                  setSubscribeNotify(false);
                  setActiveTab("mine");
                } catch (error) {
-                  toast.error(error instanceof Error ? error.message : "收藏失败");
+                  toast.error(
+                    error instanceof Error ? error.message : "收藏失败",
+                    darkToastOpts.error,
+                  );
                }
              }}
            >
@@ -71,15 +71,27 @@ export function WorkspaceLayout({

  return (
    <SidebarProvider
-      className="h-full w-full overflow-x-hidden [&_[data-slot=sidebar-container]]:left-[var(--page-sidebar-width)]"
+      // 关键：把 workspace 侧栏从「锚定视口(fixed)」改成「锚定本布局容器(absolute)」。
+      // 原 shadcn 原语用 fixed + left:var(--page-sidebar-width) + top:var(--header-height)
+      // 把侧栏钉在视口坐标上 —— 在无界等「DOM 挂主文档、容器不占满整屏」的嵌套场景下，
+      // fixed 会逃逸到整屏左侧、高度锁死为视口高度（即超出父元素 / 高度写死的根因）。
+      //
+      // 改 absolute 后侧栏改以本 wrapper(relative)为定位基准；又因外层 main 已经
+      // pl-[--page-sidebar-width] 让开了页面侧栏、且 main 的 pl 恒等于 --page-sidebar-width，
+      // 故这里 left/top 归零即与原 fixed 视觉位置逐像素一致；高度则跟随容器而非视口。
+      // 作用域仅限本 SidebarProvider 实例(不动全局 ui/sidebar 原语)，不影响 artifacts 等其它侧栏。
+      className={[
+        "relative h-full w-full overflow-x-hidden",
+        "[&_[data-slot=sidebar-container]]:absolute",
+        "[&_[data-slot=sidebar-container]]:left-0",
+        "[&_[data-slot=sidebar-container]]:top-0",
+      ].join(" ")}
      style={
        {
          "--page-sidebar-width": pageSidebarWidth,
          "--header-height": headerHidden ? "0rem" : "4rem",
        } as CSSProperties
      }
-      // Keep the fixed workspace sidebar aligned to the outer page sidebar width.
-      // This lets it slide together when the outer sidebar collapses or expands.
      data-page-sidebar-collapsed={pageSidebarCollapsed}
      defaultOpen
    >
@@ -56,12 +56,12 @@ export function MessageBubble({
              {senderName}
            </span>
            {badge && (
-              <span className="text-[9px] font-mono font-black uppercase text-[var(--brand-900)] bg-[var(--brand-200)] border border-red-200 px-1.5 py-0.2 rounded">
+              <span className="text-[calc(9px*var(--ui-font-scale,1))] font-mono font-black uppercase text-[var(--brand-900)] bg-[var(--brand-200)] border border-red-200 px-1.5 py-0.2 rounded">
                {badge}
              </span>
            )}
          </div>
-          <span className="text-[10px] text-slate-400 font-mono font-medium shrink-0">{time}</span>
+          <span className="text-[calc(10px*var(--ui-font-scale,1))] text-slate-400 font-mono font-medium shrink-0">{time}</span>
        </div>
        {children}
      </div>
@@ -139,13 +139,13 @@ export const sharedMarkdownComponents = {
    const isBlock = /language-/.test(className ?? "");
    if (isBlock) {
      return (
-        <pre className="bg-slate-100 text-slate-800 rounded-md p-2 my-1 overflow-x-auto text-[11px] font-mono">
+        <pre className="bg-slate-100 text-slate-800 rounded-md p-2 my-1 overflow-x-auto text-[calc(11px*var(--ui-font-scale,1))] font-mono">
          <code>{children}</code>
        </pre>
      );
    }
    return (
-      <code className="bg-slate-100 text-slate-800 rounded px-1 py-0.5 text-[11px] font-mono">
+      <code className="bg-slate-100 text-slate-800 rounded px-1 py-0.5 text-[calc(11px*var(--ui-font-scale,1))] font-mono">
        {children}
      </code>
    );
@@ -161,7 +161,7 @@ export const sharedMarkdownComponents = {
    </a>
  ),
  table: ({ children }: { children?: React.ReactNode }) => (
-    <table className="my-1 border-collapse text-[11px]">{children}</table>
+    <table className="my-1 border-collapse text-[calc(11px*var(--ui-font-scale,1))]">{children}</table>
  ),
  th: ({ children }: { children?: React.ReactNode }) => (
    <th className="border border-slate-300 px-1.5 py-0.5 bg-slate-50 font-bold text-left">
@@ -254,7 +254,7 @@ export function ReasoningBlock({
      <button
        type="button"
        onClick={handleToggle}
-        className="inline-flex items-center gap-1.5 text-[11.5px] text-slate-500 hover:text-slate-700 transition-colors cursor-pointer"
+        className="inline-flex items-center gap-1.5 text-[calc(11.5px*var(--ui-font-scale,1))] text-slate-500 hover:text-slate-700 transition-colors cursor-pointer"
      >
        <BrainIcon className={cn("size-3.5", streaming && "text-primary animate-pulse")} />
        <span className={cn(streaming && "animate-pulse")}>{headerLabel}</span>
@@ -265,7 +265,7 @@ export function ReasoningBlock({
      {open && (
        <div
          className={cn(
-            "rounded-md border border-slate-200 bg-slate-50/60 px-3 py-2 text-[11.5px] text-slate-600 leading-relaxed",
+            "rounded-md border border-slate-200 bg-slate-50/60 px-3 py-2 text-[calc(11.5px*var(--ui-font-scale,1))] text-slate-600 leading-relaxed",
            contentClassName,
          )}
        >
@@ -86,10 +86,10 @@ export function MessageStepsCard({
    const display = getStepDisplay(lastReasoning.key, lastReasoning.label, lastReasoning.args);
    const Icon = display.icon;
    return (
-      <div className={cn("flex items-center gap-2 text-[11.5px] text-slate-500 py-0.5", className)}>
+      <div className={cn("flex items-center gap-2 text-[calc(11.5px*var(--ui-font-scale,1))] text-slate-500 py-0.5", className)}>
        <Icon className="size-3.5 text-slate-400" />
        <span>{display.label}</span>
-        <span className="text-[10px] text-slate-400 font-mono">{lastReasoning.ts}</span>
+        <span className="text-[calc(10px*var(--ui-font-scale,1))] text-slate-400 font-mono">{lastReasoning.ts}</span>
      </div>
    );
  }
@@ -108,7 +108,7 @@ export function MessageStepsCard({
        >
          <ChainOfThoughtStep
            label={
-              <span className="text-[11.5px] opacity-60">
+              <span className="text-[calc(11.5px*var(--ui-font-scale,1))] opacity-60">
                {showAbove ? "隐藏步骤" : `查看其他 ${priorToolSteps.length} 个步骤`}
              </span>
            }
@@ -189,9 +189,9 @@ function ToolStep({
          : undefined
      }
      label={
-        <span className="text-[12px] text-slate-700">
+        <span className="text-[calc(12px*var(--ui-font-scale,1))] text-slate-700">
          <span className="font-medium">{display.label}</span>
-          <span className="ml-2 text-[10px] text-slate-400 font-mono">{step.ts}</span>
+          <span className="ml-2 text-[calc(10px*var(--ui-font-scale,1))] text-slate-400 font-mono">{step.ts}</span>
        </span>
      }
    >
@@ -204,10 +204,10 @@ function ReasoningStep({ step, streaming }: { step: BubbleStep; streaming: boole
  const display = getStepDisplay(step.key, step.label, step.args);
  const Icon = display.icon;
  return (
-    <div className="flex items-center gap-2 text-[11.5px] text-slate-500">
+    <div className="flex items-center gap-2 text-[calc(11.5px*var(--ui-font-scale,1))] text-slate-500">
      <Icon className={cn("size-3.5", streaming ? "text-primary animate-pulse" : "text-slate-400")} />
      <span>{display.label}</span>
-      <span className="text-[10px] text-slate-400 font-mono">{step.ts}</span>
+      <span className="text-[calc(10px*var(--ui-font-scale,1))] text-slate-400 font-mono">{step.ts}</span>
    </div>
  );
 }
@@ -167,7 +167,7 @@ export function Step2Panel(props: Step2PanelProps) {
          <Cpu className="w-5 h-5 text-primary" strokeWidth={2.5} />
          <div>
            <h3 className="text-sm font-extrabold text-slate-900">多智能体圆桌会商中心</h3>
-            <p className="text-[10px] text-slate-400 font-medium">
+            <p className="text-[calc(10px*var(--ui-font-scale,1))] text-slate-400 font-medium">
              分布式领域专家实时动态博弈与纳什协商收敛中
            </p>
          </div>
@@ -202,7 +202,7 @@ export function Step2Panel(props: Step2PanelProps) {
            <button
              type="button"
              onClick={onResumeRoundtable}
-              className={`bg-emerald-100 hover:bg-emerald-200 text-emerald-800 text-[10px] font-bold px-2.5 py-1 rounded-xl flex items-center gap-1 transition border border-emerald-200/40 shadow-sm ${
+              className={`bg-emerald-100 hover:bg-emerald-200 text-emerald-800 text-[calc(10px*var(--ui-font-scale,1))] font-bold px-2.5 py-1 rounded-xl flex items-center gap-1 transition border border-emerald-200/40 shadow-sm ${
                pauseFlash
                  ? "ring-2 ring-emerald-400 ring-offset-1 animate-pulse"
                  : ""
@@ -215,7 +215,7 @@ export function Step2Panel(props: Step2PanelProps) {
            <button
              type="button"
              onClick={onPauseRoundtable}
-              className="bg-amber-100 hover:bg-amber-200 text-amber-800 text-[10px] font-bold px-2.5 py-1 rounded-xl flex items-center gap-1 transition border border-amber-200/40 shadow-sm"
+              className="bg-amber-100 hover:bg-amber-200 text-amber-800 text-[calc(10px*var(--ui-font-scale,1))] font-bold px-2.5 py-1 rounded-xl flex items-center gap-1 transition border border-amber-200/40 shadow-sm"
            >
              <Pause className="w-3.5 h-3.5" />
              暂停会商
@@ -279,13 +279,13 @@ export function Step2Panel(props: Step2PanelProps) {
              <div className="flex items-center gap-2">
                <span className="text-xs font-extrabold text-amber-900">总控协调需要澄清</span>
                {pendingClarification.clarificationType && (
-                  <span className="text-[9px] font-mono font-black uppercase text-amber-900 bg-amber-200 border border-amber-300 px-1.5 py-0.2 rounded">
+                  <span className="text-[calc(9px*var(--ui-font-scale,1))] font-mono font-black uppercase text-amber-900 bg-amber-200 border border-amber-300 px-1.5 py-0.2 rounded">
                    {pendingClarification.clarificationType}
                  </span>
                )}
              </div>
              {pendingClarification.context && (
-                <p className="text-[11px] text-amber-800 italic">{pendingClarification.context}</p>
+                <p className="text-[calc(11px*var(--ui-font-scale,1))] text-amber-800 italic">{pendingClarification.context}</p>
              )}
              <p className="text-xs text-slate-800 leading-relaxed font-medium whitespace-pre-wrap break-words">
                {pendingClarification.question}
@@ -306,7 +306,7 @@ export function Step2Panel(props: Step2PanelProps) {
                          key={`${idx}-${label}`}
                          type="button"
                          onClick={() => onSubmitClarification(label)}
-                          className="text-[11px] font-bold px-3 py-1.5 rounded-full bg-white border border-amber-300 text-amber-900 hover:bg-amber-100 transition active:scale-95 cursor-pointer"
+                          className="text-[calc(11px*var(--ui-font-scale,1))] font-bold px-3 py-1.5 rounded-full bg-white border border-amber-300 text-amber-900 hover:bg-amber-100 transition active:scale-95 cursor-pointer"
                        >
                          {label}
                        </button>
@@ -580,17 +580,17 @@ function PresentFileCard({
      <div className="flex items-start gap-2">
        <FileIcon className="mt-0.5 size-4 shrink-0 text-slate-400" />
        <span
-          className="truncate text-[12px] font-medium text-slate-700"
+          className="truncate text-[calc(12px*var(--ui-font-scale,1))] font-medium text-slate-700"
          title={filename}
        >
          {filename}
        </span>
      </div>
      <div className="flex items-center justify-between gap-2">
-        <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-mono font-semibold text-slate-500">
+        <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[calc(10px*var(--ui-font-scale,1))] font-mono font-semibold text-slate-500">
          {typeLabel}
        </span>
-        <span className="text-[10px] text-slate-400">点击预览</span>
+        <span className="text-[calc(10px*var(--ui-font-scale,1))] text-slate-400">点击预览</span>
      </div>
    </button>
  );
@@ -57,6 +57,16 @@ export interface UseDraftPersistenceOptions {
   * 否则保持原 false 让进入 Step 2 时正常初始化。
   */
  setStep2InitGate: (initialized: boolean) => void;
+  /**
+   * Step 1 是否正在等待任务理解回复。由 true→false 视为「本轮模型回答完」,
+   * 触发一次自动保存(详见 autoSave 的两个 effect)。
+   */
+  intentSending: boolean;
+  /**
+   * Step 2 已收尾(streaming===false)的对话气泡数量。每次递增意味着总控/某个
+   * 子智能体刚交付完一轮,触发一次自动保存。流式增量不改变该计数,因此不会刷屏式保存。
+   */
+  step2FinalizedCount: number;
 }

 export interface UseDraftPersistenceReturn {
@@ -96,6 +106,8 @@ export function useDraftPersistence(
    hydrateStep2,
    cancelAllStreams,
    setStep2InitGate,
+    intentSending,
+    step2FinalizedCount,
  } = options;

  const [drafts, setDrafts] = useState<DraftListItem[]>([]);
@@ -112,6 +124,11 @@ export function useDraftPersistence(
  const currentDraftIdRef = useRef<string | null>(null);
  // 串行化所有写操作，避免并发 create。
  const saveQueueRef = useRef<Promise<unknown>>(Promise.resolve());
+  // 当前步骤镜像 —— 自动保存(不带 furthestStep)落到 create 分支时,用它兜底建档步骤。
+  const currentStepRef = useRef<number>(currentStep);
+  useEffect(() => {
+    currentStepRef.current = currentStep;
+  }, [currentStep]);

  // 包一层 setter：同时更新 state 与同步 ref。主页面通过它 setCurrentDraftId(null)。
  const setCurrentDraftId = useCallback<React.Dispatch<React.SetStateAction<string | null>>>(
@@ -157,9 +174,15 @@ export function useDraftPersistence(
   * 串行执行一次保存：有 id 走 update（不带 title，保护重命名）；无 id 走 create
   * （写一次派生标题）。create/update 成功后同步 currentDraftIdRef。
   * 返回 draft id（无可保存内容返回 null）。
+   *
+   * `furthestStep` 可选：
+   *  - 传值（前进切换 / 手动保存 / ensureDraft）→ update 时一并推进 furthest_step;
+   *  - 省略（每轮模型回答完的自动保存）→ update **不带** furthest_step,只回写
+   *    step1/step2 内容,避免把「回到上一步继续研讨」误判成 furthest 回退。create
+   *    分支用 currentStepRef 兜底建档步骤。
   */
  const enqueueSave = useCallback(
-    (furthestStep: 1 | 2 | 3): Promise<string | null> => {
+    (furthestStep?: 1 | 2 | 3): Promise<string | null> => {
      const run = async (): Promise<string | null> => {
        const step1 = getStep1Snapshot();
        const step2 = getStep2Snapshot();
@@ -167,7 +190,11 @@ export function useDraftPersistence(

        const id = currentDraftIdRef.current;
        if (id) {
-          const updated = await updateDraft(id, { furthestStep, step1, step2 });
+          const updated = await updateDraft(id, {
+            ...(furthestStep !== undefined ? { furthestStep } : {}),
+            step1,
+            step2,
+          });
          if (updated) return updated.id;
          // 服务端已不存在（被删/换账号）→ 落回新建。
        }
@@ -176,7 +203,7 @@ export function useDraftPersistence(
            intentReady: step1.intentReady,
            interactiveMessages: step1.interactiveMessages,
          }),
-          furthestStep,
+          furthestStep: furthestStep ?? ((currentStepRef.current as 1 | 2 | 3) || 1),
          step1,
          step2,
        });
@@ -227,6 +254,41 @@ export function useDraftPersistence(
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentStep]);

+  /**
+   * 每轮模型回答完成后落一次草稿。不带 furthestStep(见 enqueueSave),只回写内容。
+   * 仅当本次保存是「新建」时才刷新列表 —— 普通增量回写无需让下拉重排/多发一个 GET。
+   */
+  const autoSave = useCallback(async (): Promise<void> => {
+    const hadId = currentDraftIdRef.current;
+    const id = await enqueueSave();
+    if (id && !hadId) await refreshList();
+  }, [enqueueSave, refreshList]);
+
+  // ── 触发器 1:Step 1 任务理解一轮回复结束(isIntentSending true→false)。 ──
+  const prevIntentSendingRef = useRef<boolean>(intentSending);
+  useEffect(() => {
+    const was = prevIntentSendingRef.current;
+    prevIntentSendingRef.current = intentSending;
+    // 此刻 React 已 flush 完终态 setState(气泡内容/INTENT_READY),
+    // 快照 getter 读到的是收尾后的最新状态,不会丢最后一段。
+    if (was && !intentSending) void autoSave();
+  }, [intentSending, autoSave]);
+
+  // ── 触发器 2:Step 2 某个气泡刚收尾(已收尾计数递增)。 ──
+  // 加载草稿会把历史对话整批 hydrate 进来,计数从 0 跳到 N —— 那不是一次真实交付,
+  // 用 suppress latch 跳过这一跳变(handleLoadDraft 在 hydrate 前置位)。
+  const prevFinalizedCountRef = useRef<number>(step2FinalizedCount);
+  const suppressStep2AutoSaveRef = useRef<boolean>(false);
+  useEffect(() => {
+    const prev = prevFinalizedCountRef.current;
+    prevFinalizedCountRef.current = step2FinalizedCount;
+    if (suppressStep2AutoSaveRef.current) {
+      suppressStep2AutoSaveRef.current = false;
+      return;
+    }
+    if (step2FinalizedCount > prev) void autoSave();
+  }, [step2FinalizedCount, autoSave]);
+
  const handleLoadDraft = useCallback(
    (id: string) => {
      void (async () => {
@@ -248,6 +310,9 @@ export function useDraftPersistence(
        // 先置 latch,再 setCurrentStep —— 顺序反过来会让 step1/step2 init effect
        // 把 loadedFromDraftRef.current 当成 false 处理,导致角色面板卡在「正在上线」。
        loadedFromDraftRef.current = true;
+        // hydrate 会让 step2 已收尾计数从 0 跳到 N,抑制由此触发的「假交付」自动保存,
+        // 避免刚加载就把同样内容原样回写一遍、并把该草稿顶到列表最前。
+        suppressStep2AutoSaveRef.current = true;

        if (draft.step1) hydrateStep1(draft.step1 as Step1Snapshot);
        if (draft.step2) hydrateStep2(draft.step2 as Step2Snapshot);
@@ -17,11 +17,12 @@
 *  1) special 顺序派活,**不要**改回 `Promise.all`(详见 §5.4)
 *  2) step1InitGenRef / step2InitRef 闸门用于规避 StrictMode 双 mount 副作用
 *  3) 离开 Step 2 不销毁 threadIds,允许返回继续看
- *  4) 草稿自动保存仅在前进切换(1→2、2→3)触发,后退不保存
+ *  4) 草稿自动保存:前进切换(1→2、2→3)推进 furthestStep;此外每轮模型回答完
+ *     (Step 1 一轮任务理解结束 / Step 2 每个气泡收尾)也增量回写一次,后者不动 furthestStep
 *  5) Persona 抽屉改的 model 不会立即重启编排,下一轮才生效
 *  6) 模型选择全局默认 `availableModels[0].name`,Persona 覆盖更高优先级
 */
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  Activity,
  Check,
@@ -173,11 +174,21 @@ export default function RoundtablePlanningPage() {
    };
  }, [step1.intentReady, step1.interactiveMessages]);

+  // Step 2 已收尾(非 streaming)的气泡数量 —— 递增即「某轮模型刚交付完」,
+  // 作为草稿自动保存的触发信号(详见 useDraftPersistence)。流式增量不计入,
+  // 所以不会在 token 级别刷屏式保存。
+  const step2FinalizedCount = useMemo(
+    () => step2.step2RoundtableDialogues.filter((d) => !d.streaming).length,
+    [step2.step2RoundtableDialogues],
+  );
+
  // 草稿 hook —— 同时依赖 step1 + step2 的 snapshot / hydrate。
  const drafts = useDraftPersistence({
    currentStep,
    setCurrentStep,
    triggerToast,
+    intentSending: step1.isIntentSending,
+    step2FinalizedCount,
    getStep1Snapshot: () => ({
      intentThreadId: step1.intentThreadId,
      intentReady: step1.intentReady,
@@ -1,4 +1,7 @@
-@import "tailwindcss";
+/* 注意：不要在这里 `@import "tailwindcss"`。Tailwind 已由全局 globals.css 引入，
+ * 本文件被打进同一份样式表，再次 import 会把整套 theme/utilities 重复发一遍
+ * （CSS 体积翻倍，且重复发出的 --text-* 等主题变量会和全局覆盖打架）。
+ * 本文件只写圆桌页自己的作用域规则即可。 */

 /* 圆桌规划 — 浅色红色主题（对齐 docs/浅红色ui修改.md） */
 .roundtable-planning {
@@ -61,6 +61,7 @@ export const KanbanColumn: React.FC<KanbanColumnProps> = ({ title, count, color,
          }`}>
          <ChevronRight className={`w-4 h-4 ${textMuted}`} />
        </button> */}
+        <iframe></iframe>
        <div>
          <Pagination
            total={count}
@@ -324,6 +324,18 @@
    @apply bg-background text-foreground;
  }

+  /* 打通高度链:html/body/#root 取满父级高度,使下游用 h-full(100%) 的根布局
+     (PageRoutes 的 PageLayout)跟随容器尺寸而非视口。
+     - 全屏:100% 逐级解析到视口,与原先的 h-screen 等价,无视觉变化;
+     - 无界(wujie)等嵌套:wujie 会把子应用的 html/body 选择器作用到 <wujie-app>
+       容器,于是高度收缩到容器而非整屏 —— 这正是「高度对齐容器」所需。
+     只设 height、不设 overflow,因此不影响 Landing 等需要自然滚动的页面。 */
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+
  [data-sidebar="menu-button"][data-active="true"] {
    box-shadow: inset 3px 0 0 var(--primary);
    font-weight: 600;
@@ -820,3 +832,34 @@
  border-color: var(--border);
  outline-color: var(--ring);
 }
+
+/* ─── 全局字号缩放（只改字号，不动布局）──────────────────────────────────
+ * 用户在「设置 → 外观 → 字号」里选的倍数由 FontScaleApplier 写到
+ * <html> 的 `--ui-font-scale`（默认 1）。这里只把 Tailwind 的 `--text-*`
+ * 字号 token 乘以该倍数 —— 间距 token（--spacing）原样不动，所以 padding /
+ * margin / gap / 宽高这些布局尺寸不随字号变化，避免放大字体把页面挤错位。
+ * 行高用 Tailwind 默认的无单位比值，会跟随字号等比变化（文字不会重叠）。
+ * 不在 @layer 内，优先级高于 Tailwind 的主题层变量，确保覆盖生效。 */
+:root {
+  --ui-font-scale: 1;
+
+  --text-xs: calc(0.75rem * var(--ui-font-scale, 1));
+  --text-sm: calc(0.875rem * var(--ui-font-scale, 1));
+  --text-base: calc(1rem * var(--ui-font-scale, 1));
+  --text-lg: calc(1.125rem * var(--ui-font-scale, 1));
+  --text-xl: calc(1.25rem * var(--ui-font-scale, 1));
+  --text-2xl: calc(1.5rem * var(--ui-font-scale, 1));
+  --text-3xl: calc(1.875rem * var(--ui-font-scale, 1));
+  --text-4xl: calc(2.25rem * var(--ui-font-scale, 1));
+  --text-5xl: calc(3rem * var(--ui-font-scale, 1));
+  --text-6xl: calc(3.75rem * var(--ui-font-scale, 1));
+  --text-7xl: calc(4.5rem * var(--ui-font-scale, 1));
+  --text-8xl: calc(6rem * var(--ui-font-scale, 1));
+  --text-9xl: calc(8rem * var(--ui-font-scale, 1));
+}
+
+/* 没有显式 text-* 类的元素（继承自 body 的默认正文）也跟随缩放。
+ * 只设 font-size，不影响任何盒模型尺寸。 */
+body {
+  font-size: calc(1rem * var(--ui-font-scale, 1));
+}