feat(frontend): refine app shell and assistant editors

2026-08-05 08:19:16 +08:00
parent 0ce5d9774e
commit b88e37789a
13 changed files with 623 additions and 453 deletions
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -234,6 +234,13 @@
 }

@layer utilities {
+  /* Prompt/workflow editors opt into the entire area below the shared topbar. */
+  .app-content:has([data-app-content="full-bleed"]) {
+    min-height: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+
  .scrollbar-subtle {
    scrollbar-width: thin;
    scrollbar-color: color-mix(
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -26,7 +26,7 @@ export const metadata: Metadata = {
 };

 // Apply the persisted theme before paint to avoid a flash. Defaults to dark navy.
-const themeScript = `(function(){try{var t=localStorage.getItem('theme');if(t==='light'){document.documentElement.classList.remove('dark')}else{document.documentElement.classList.add('dark')}}catch(e){document.documentElement.classList.add('dark')}})();`;
+const themeScript = `(function(){try{var t=localStorage.getItem('theme');var d=t==='light'?false:t==='system'?window.matchMedia('(prefers-color-scheme: dark)').matches:true;document.documentElement.classList.toggle('dark',d)}catch(e){document.documentElement.classList.add('dark')}})();`;

 export default function RootLayout({
  children,
--- a/frontend/src/components/assistant-editor/prompt-editor.tsx
+++ b/frontend/src/components/assistant-editor/prompt-editor.tsx
@@ -5,6 +5,7 @@ import {
  Braces,
  Bot,
  Brain,
+  Bug,
  Database,
  Loader2,
  MessageSquareText,
@@ -33,6 +34,7 @@ import { SectionCard } from "@/components/editor/section-card";
 import { VisionConfigSection } from "@/components/editor/vision-config-section";
 import { TurnConfigEditor } from "@/components/turn-config-editor";
 import { Button } from "@/components/ui/button";
+import { TopbarPortal } from "@/components/layout/topbar-portal";
 import { Input } from "@/components/ui/input";
 import {
  Select,
@@ -151,6 +153,7 @@ export function PromptEditor({
  const selectedAnchorRef = useRef<PromptSectionId | null>(null);
  const [activeSection, setActiveSection] =
    useState<PromptSectionId>("conversation");
+  const [debugOpen, setDebugOpen] = useState(false);

  useEffect(() => {
    const container = scrollContainerRef.current;
@@ -263,43 +266,61 @@ export function PromptEditor({
  }

  return (
-    <div className="-mt-6 flex h-full flex-col gap-4 overflow-hidden bg-background">
-      <div className="flex shrink-0 items-center justify-between gap-6 border-b border-hairline pb-3 pt-1">
-        <div className="flex min-w-0 items-center gap-2">
-          <EditorBackButton onClick={onBack} />
-          <EditableTitle
-            value={form.name}
-            onChange={(value) => updateForm("name", value)}
-          />
-          <AssistantIdentity assistantId={assistantId} />
-        </div>
+    <>
+      <TopbarPortal>
+        <div className="flex h-full min-w-0 flex-1 items-center justify-between gap-4 sm:-ml-2 lg:-ml-4">
+          <div className="flex min-w-0 items-center gap-2">
+            <EditorBackButton onClick={onBack} />
+            <EditableTitle
+              value={form.name}
+              onChange={(value) => updateForm("name", value)}
+            />
+            <AssistantIdentity assistantId={assistantId} />
+          </div>

-        <div className="flex shrink-0 gap-2">
-          {saveError && (
-            <span className="self-center text-xs text-destructive">
-              {saveError}
-            </span>
-          )}
-          <Button
-            className="gap-2"
-            disabled={saving || !dirty || !form.name.trim()}
-            onClick={() => onSave()}
-          >
-            {saving ? (
-              <Loader2 size={16} className="animate-spin" />
-            ) : (
-              <Save size={16} />
+          <div className="flex shrink-0 items-center gap-2">
+            {saveError && (
+              <span
+                role="alert"
+                title={saveError}
+                className="line-clamp-1 max-w-[min(32vw,420px)] text-right text-xs text-destructive"
+              >
+                {saveError}
+              </span>
            )}
-            保存
-          </Button>
+            <Button
+              variant="outline"
+              className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+              disabled={!assistantId}
+              onClick={() => setDebugOpen(true)}
+            >
+              <Bug size={16} />
+              调试
+            </Button>
+            <Button
+              className="gap-2"
+              disabled={saving || !dirty || !form.name.trim()}
+              onClick={() => onSave()}
+            >
+              {saving ? (
+                <Loader2 size={16} className="animate-spin" />
+              ) : (
+                <Save size={16} />
+              )}
+              保存
+            </Button>
+          </div>
        </div>
-      </div>
+      </TopbarPortal>

-      <div className="flex min-h-0 flex-1 gap-4">
-        <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
+      <div
+        data-app-content="full-bleed"
+        className="flex h-full min-h-0 overflow-hidden bg-background"
+      >
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
          <nav
            aria-label="提示词配置分区"
-            className="shrink-0 overflow-x-auto overscroll-none"
+            className="shrink-0 overflow-x-auto overscroll-none bg-background px-4 pt-3 sm:px-6 sm:pt-4 lg:px-8"
          >
            <div className="grid min-w-[28rem] grid-cols-5 border-b border-hairline">
              {promptSections.map((section) => {
@@ -327,7 +348,7 @@ export function PromptEditor({

          <div
            ref={scrollContainerRef}
-            className="scrollbar-subtle min-h-0 min-w-0 flex-1 space-y-3 overflow-y-auto overscroll-none bg-background pr-1"
+            className="scrollbar-subtle min-h-0 min-w-0 flex-1 space-y-3 overflow-y-auto overscroll-none bg-background px-4 pb-6 pt-3 sm:px-6 sm:pb-8 lg:px-8 lg:pb-10"
          >
            <section
              ref={(element) => {
@@ -675,14 +696,18 @@ export function PromptEditor({
          </div>
        </div>

-        <DebugDrawer
-          assistantId={assistantId}
-          hasUnsavedChanges={dirty}
-          vision={form.visionEnabled}
-          dynamicVariablesEnabled
-          dynamicVariableDefinitions={dynamicVariableDefinitions}
-        />
+        {debugOpen && (
+          <DebugDrawer
+            overlay
+            assistantId={assistantId}
+            onClose={() => setDebugOpen(false)}
+            hasUnsavedChanges={dirty}
+            vision={form.visionEnabled}
+            dynamicVariablesEnabled
+            dynamicVariableDefinitions={dynamicVariableDefinitions}
+          />
+        )}
      </div>
-    </div>
+    </>
  );
 }
--- a/frontend/src/components/assistant-editor/workflow-page.tsx
+++ b/frontend/src/components/assistant-editor/workflow-page.tsx
@@ -10,6 +10,7 @@ import {
  EditorBackButton,
 } from "@/components/assistant-editor/editor-controls";
 import { Button } from "@/components/ui/button";
+import { TopbarPortal } from "@/components/layout/topbar-portal";
 import { WorkflowEditor } from "@/components/workflow/WorkflowEditor";
 import type { WorkflowSettings } from "@/components/workflow/types";
 import {
@@ -92,55 +93,57 @@ export function WorkflowPage({
  setDynamicVariablesOpen,
 }: WorkflowPageProps) {
    return (
-      <div className="-mt-6 flex h-full flex-col gap-4">
-        <div className="flex shrink-0 items-center justify-between gap-6 border-b border-hairline pb-3 pt-1">
-          <div className="flex min-w-0 items-center gap-2">
-            <EditorBackButton onClick={onBack} />
-            <EditableTitle value={workflowName} onChange={setWorkflowName} />
-            <AssistantIdentity assistantId={assistantId} />
-          </div>
+      <>
+        <TopbarPortal>
+          <div className="flex h-full min-w-0 flex-1 items-center justify-between gap-4 sm:-ml-2 lg:-ml-4">
+            <div className="flex min-w-0 items-center gap-2">
+              <EditorBackButton onClick={onBack} />
+              <EditableTitle value={workflowName} onChange={setWorkflowName} />
+              <AssistantIdentity assistantId={assistantId} />
+            </div>

-          <div className="flex shrink-0 gap-2">
-            {saveError && (
-              <span
-                role="alert"
-                title={saveError}
-                className="line-clamp-1 max-w-[min(42vw,560px)] self-center text-right text-sm leading-5 text-destructive"
-              >
-                {saveError}
-              </span>
-            )}
-            <Button
-              variant="outline"
-              className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
-              disabled={!assistantId}
-              onClick={() => {
-                setWorkflowSettingsOpen(false);
-                setDynamicVariablesOpen(false);
-                setWorkflowEditingNodeId(null);
-                setWorkflowEditingEdgeId(null);
-                setWorkflowDebugOpen(true);
-              }}
-            >
-              <Bug size={16} />
-              调试
-            </Button>
-            <Button
-              className="gap-2"
-              disabled={saving || !dirty || !workflowName.trim()}
-              onClick={onSave}
-            >
-              {saving ? (
-                <Loader2 size={16} className="animate-spin" />
-              ) : (
-                <Save size={16} />
+            <div className="flex shrink-0 items-center gap-2">
+              {saveError && (
+                <span
+                  role="alert"
+                  title={saveError}
+                  className="line-clamp-1 max-w-[min(32vw,420px)] text-right text-xs text-destructive"
+                >
+                  {saveError}
+                </span>
              )}
-              保存
-            </Button>
+              <Button
+                variant="outline"
+                className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+                disabled={!assistantId}
+                onClick={() => {
+                  setWorkflowSettingsOpen(false);
+                  setDynamicVariablesOpen(false);
+                  setWorkflowEditingNodeId(null);
+                  setWorkflowEditingEdgeId(null);
+                  setWorkflowDebugOpen(true);
+                }}
+              >
+                <Bug size={16} />
+                调试
+              </Button>
+              <Button
+                className="gap-2"
+                disabled={saving || !dirty || !workflowName.trim()}
+                onClick={onSave}
+              >
+                {saving ? (
+                  <Loader2 size={16} className="animate-spin" />
+                ) : (
+                  <Save size={16} />
+                )}
+                保存
+              </Button>
+            </div>
          </div>
-        </div>
+        </TopbarPortal>

-        <div className="min-h-0 flex-1">
+        <div data-app-content="full-bleed" className="h-full min-h-0">
          <WorkflowEditor
            value={workflowGraph}
            onChange={setWorkflowGraph}
@@ -194,6 +197,6 @@ export function WorkflowPage({
            }))}
          />
        </div>
-      </div>
+      </>
    );
  }
--- a/frontend/src/components/layout/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell.tsx
@@ -3,19 +3,27 @@
 import { useState } from "react";
 import { Sidebar } from "./Sidebar";
 import { Topbar } from "./Topbar";
+import { TopbarTargetProvider } from "./topbar-portal";

 export function AppShell({ children }: { children: React.ReactNode }) {
  const [collapsed, setCollapsed] = useState(false);
+  const [topbarTarget, setTopbarTarget] = useState<HTMLDivElement | null>(null);

  return (
    <div className="fixed inset-0 flex overflow-hidden bg-background text-foreground">
      <Sidebar collapsed={collapsed} onToggle={() => setCollapsed((v) => !v)} />

-      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
-        <Topbar />
+      <TopbarTargetProvider target={topbarTarget}>
+        <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <Topbar contentRef={setTopbarTarget} />

-        <div className="flex-1 overflow-y-auto px-8 py-10">{children}</div>
-      </main>
+          <div
+            className="app-content flex-1 overflow-y-auto px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-10"
+          >
+            {children}
+          </div>
+        </main>
+      </TopbarTargetProvider>
    </div>
  );
 }
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -3,12 +3,15 @@
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import {
+  Bell,
  Bot,
  Boxes,
  Brain,
  ChevronLeft,
+  ChevronUp,
  Clock3,
  Database,
+  HelpCircle,
  Wrench,
  Home,
  LogOut,
@@ -16,6 +19,14 @@ import {
  Video,
 } from "lucide-react";
 import { useAuth } from "@/components/auth/AuthProvider";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ThemeModeSelector } from "./ThemeToggle";

 type SidebarProps = {
  collapsed: boolean;
@@ -202,64 +213,83 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
      </nav>

      <div className="shrink-0 space-y-2 border-t border-sidebar-border bg-sidebar p-3 shadow-[0_-12px_24px_rgba(0,0,0,0.12)]">
-        <Link
-          href="/profile"
-          title={collapsed ? `个人中心 · ${user?.displayName ?? "超级管理员"}` : undefined}
-          className={[
-            "group relative flex w-full items-center overflow-hidden rounded-2xl border py-2 text-left transition-[background-color,color,border-color,box-shadow,transform] duration-200 active:scale-[0.98]",
-            isActive("/profile")
-              ? "border-sidebar-border bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
-              : "border-transparent text-muted-foreground hover:border-sidebar-border hover:bg-sidebar-accent/60 hover:text-foreground hover:shadow-sm",
-            collapsed ? "justify-center gap-0 px-0" : "gap-3 px-2.5",
-          ].join(" ")}
-        >
-          <span className="relative shrink-0">
-            <span
-              className="flex h-9 w-9 items-center justify-center rounded-full text-sm font-medium text-on-primary shadow-sm transition-transform duration-200 group-hover:scale-105"
-              style={{
-                backgroundColor: "var(--primary)",
-                backgroundImage:
-                  "radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gradient-sky) 70%, transparent), transparent 60%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gradient-lavender) 65%, transparent), transparent 55%)",
-              }}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              title={collapsed ? `用户菜单 · ${user?.displayName ?? "超级管理员"}` : undefined}
+              className={[
+                "group relative flex h-12 w-full items-center overflow-hidden rounded-xl border border-transparent text-left text-muted-foreground transition-[background-color,color,border-color,box-shadow,transform] duration-200 hover:border-sidebar-border hover:bg-sidebar-accent/60 hover:text-foreground hover:shadow-sm active:scale-[0.98] data-[state=open]:border-sidebar-border data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+                collapsed ? "justify-center gap-0 px-0" : "gap-3 px-2.5",
+              ].join(" ")}
            >
-              <span style={{ color: "var(--primary-foreground)" }}>管</span>
-            </span>
-            <span
-              className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-sidebar"
-              style={{ backgroundColor: "var(--success)" }}
-            />
-          </span>
+              <span className="relative shrink-0">
+                <span
+                  className="flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium text-on-primary shadow-sm transition-transform duration-200 group-hover:scale-105"
+                  style={{
+                    backgroundColor: "var(--primary)",
+                    backgroundImage:
+                      "radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gradient-sky) 70%, transparent), transparent 60%), radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--gradient-lavender) 65%, transparent), transparent 55%)",
+                  }}
+                >
+                  <span style={{ color: "var(--primary-foreground)" }}>管</span>
+                </span>
+                <span
+                  className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-sidebar"
+                  style={{ backgroundColor: "var(--success)" }}
+                />
+              </span>

-          <span
+              <span
+                className={[
+                  "min-w-0 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                  collapsed ? "w-0 flex-none opacity-0 -translate-x-2" : "flex-1 opacity-100 translate-x-0",
+                ].join(" ")}
+              >
+                <span className="block truncate text-sm font-medium text-foreground">
+                  {user?.displayName ?? "超级管理员"}
+                </span>
+              </span>
+
+              <ChevronUp
+                size={16}
+                className={[
+                  "shrink-0 transition-[opacity,transform] duration-200 group-data-[state=open]:rotate-180",
+                  collapsed ? "w-0 opacity-0" : "opacity-70",
+                ].join(" ")}
+              />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            side="top"
+            align="start"
+            sideOffset={8}
            className={[
-              "min-w-0 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
-              collapsed ? "w-0 flex-none opacity-0 -translate-x-2" : "flex-1 opacity-100 translate-x-0",
+              "w-[228px] rounded-2xl border border-hairline bg-popover p-1.5 shadow-lg",
+              collapsed ? "min-w-[228px]" : "",
            ].join(" ")}
          >
-            <span className="block truncate text-sm font-medium text-foreground">
-              {user?.displayName ?? "超级管理员"}
-            </span>
-          </span>
-        </Link>
-
-        <button
-          onClick={handleLogout}
-          title={collapsed ? "退出登录" : undefined}
-          className={[
-            "group flex h-10 w-full items-center overflow-hidden rounded-full border border-hairline-strong text-sm text-muted-foreground transition-[background-color,color,border-color,transform] duration-200 hover:bg-surface-strong hover:text-foreground active:scale-[0.98]",
-            collapsed ? "justify-center gap-0 px-0" : "justify-between gap-2 px-3.5",
-          ].join(" ")}
-        >
-          <span
-            className={[
-              "min-w-0 truncate transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
-              collapsed ? "w-0 opacity-0 -translate-x-2" : "opacity-100 translate-x-0",
-            ].join(" ")}
-          >
-            退出登录
-          </span>
-          <LogOut size={18} className="shrink-0 transition-transform duration-200 group-hover:translate-x-0.5" />
-        </button>
+            <ThemeModeSelector />
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="h-10 rounded-xl px-3 font-normal">
+              <HelpCircle size={16} />
+              帮助
+            </DropdownMenuItem>
+            <DropdownMenuItem className="h-10 rounded-xl px-3 font-normal">
+              <Bell size={16} />
+              消息提示
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              variant="destructive"
+              className="h-10 rounded-xl px-3 font-normal"
+              onSelect={() => void handleLogout()}
+            >
+              <LogOut size={16} />
+              退出登录
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>

        {/* 收起 / 展开侧栏 */}
        <button
--- a/frontend/src/components/layout/ThemeToggle.tsx
+++ b/frontend/src/components/layout/ThemeToggle.tsx
@@ -1,34 +1,91 @@
 "use client";

-import { useState } from "react";
-import { Moon, Sun } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Check, Laptop, Moon, Sun } from "lucide-react";

-export function ThemeToggle() {
-  const [dark, setDark] = useState(() =>
-    typeof document === "undefined"
-      ? true
-      : document.documentElement.classList.contains("dark"),
+export type ThemeMode = "light" | "dark" | "system";
+
+const themeOptions: Array<{
+  value: ThemeMode;
+  label: string;
+  icon: React.ComponentType<{ size?: number }>;
+}> = [
+  { value: "light", label: "亮色", icon: Sun },
+  { value: "dark", label: "暗色", icon: Moon },
+  { value: "system", label: "随系统切换", icon: Laptop },
+];
+
+function storedTheme(): ThemeMode {
+  if (typeof window === "undefined") return "dark";
+  try {
+    const saved = localStorage.getItem("theme");
+    return saved === "light" || saved === "system" ? saved : "dark";
+  } catch {
+    return "dark";
+  }
+}
+
+function applyTheme(mode: ThemeMode) {
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  document.documentElement.classList.toggle(
+    "dark",
+    mode === "dark" || (mode === "system" && prefersDark),
  );
+}

-  function toggle() {
-    const next = !dark;
-    setDark(next);
-    document.documentElement.classList.toggle("dark", next);
+export function ThemeModeSelector() {
+  const [mode, setMode] = useState<ThemeMode>(storedTheme);
+
+  useEffect(() => {
+    applyTheme(mode);
+    if (mode !== "system") return;
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyTheme("system");
+    media.addEventListener("change", handleChange);
+    return () => media.removeEventListener("change", handleChange);
+  }, [mode]);
+
+  function selectMode(nextMode: ThemeMode) {
+    setMode(nextMode);
    try {
-      localStorage.setItem("theme", next ? "dark" : "light");
+      localStorage.setItem("theme", nextMode);
    } catch {
-      /* ignore */
+      // Theme still applies for the current session when storage is blocked.
    }
+    applyTheme(nextMode);
  }

  return (
-    <button
-      onClick={toggle}
-      title={dark ? "切换到浅色" : "切换到深色"}
-      aria-label="切换主题"
-      className="flex size-10 items-center justify-center rounded-full border border-hairline-strong text-muted-foreground transition-colors hover:bg-surface-strong hover:text-foreground"
+    <div
+      role="radiogroup"
+      aria-label="界面主题"
+      className="space-y-1"
    >
-      {dark ? <Sun size={17} /> : <Moon size={17} />}
-    </button>
+      {themeOptions.map((option) => {
+        const Icon = option.icon;
+        const selected = mode === option.value;
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            onClick={() => selectMode(option.value)}
+            className={[
+              "flex h-10 w-full items-center gap-2.5 rounded-xl px-3 text-sm font-normal transition-colors",
+              selected
+                ? "bg-surface-strong text-foreground shadow-sm"
+                : "text-muted-foreground hover:bg-surface-strong/60 hover:text-foreground",
+            ].join(" ")}
+          >
+            <Icon size={16} />
+            <span className="min-w-0 flex-1 text-left">{option.label}</span>
+            {selected && <Check size={15} className="shrink-0" />}
+          </button>
+        );
+      })}
+    </div>
  );
 }
--- a/frontend/src/components/layout/Topbar.tsx
+++ b/frontend/src/components/layout/Topbar.tsx
@@ -1,41 +1,13 @@
-import { Bell, HelpCircle } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { ThemeToggle } from "./ThemeToggle";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import type { Ref } from "react";

-export function Topbar() {
+export function Topbar({
+  contentRef,
+}: {
+  contentRef: Ref<HTMLDivElement>;
+}) {
  return (
-    <header className="flex h-16 shrink-0 items-center justify-end gap-2 border-b border-border bg-background px-8">
-      <TooltipProvider>
-        <Button
-          variant="outline"
-          size="lg"
-          className="border-hairline-strong text-muted-foreground hover:bg-surface-strong hover:text-foreground"
-        >
-          <HelpCircle />
-          帮助
-        </Button>
-
-        <ThemeToggle />
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon-lg"
-              className="border-hairline-strong text-muted-foreground hover:bg-surface-strong hover:text-foreground"
-            >
-              <Bell />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">通知</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+    <header className="flex h-16 shrink-0 items-center border-b border-border bg-background px-4 sm:px-6 lg:px-8">
+      <div ref={contentRef} className="flex h-full min-w-0 flex-1 items-center" />
    </header>
  );
 }
--- a/frontend/src/components/layout/topbar-portal.tsx
+++ b/frontend/src/components/layout/topbar-portal.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+const TopbarTargetContext = createContext<HTMLDivElement | null>(null);
+
+export function TopbarTargetProvider({
+  target,
+  children,
+}: {
+  target: HTMLDivElement | null;
+  children: ReactNode;
+}) {
+  return (
+    <TopbarTargetContext.Provider value={target}>
+      {children}
+    </TopbarTargetContext.Provider>
+  );
+}
+
+/**
+ * Render page-owned controls into the shared application topbar.
+ *
+ * A portal keeps editor state and event handlers in the page that owns them,
+ * while AppShell only remains responsible for positioning the shared bar.
+ */
+export function TopbarPortal({ children }: { children: ReactNode }) {
+  const target = useContext(TopbarTargetContext);
+
+  return target ? createPortal(children, target) : null;
+}
+
+export function PageTopbar({
+  title,
+  action,
+}: {
+  title: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex h-full min-w-0 flex-1 items-center justify-between gap-4">
+      <h1 className="min-w-0 truncate font-display text-2xl text-ink">
+        {title}
+      </h1>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}
--- a/frontend/src/components/pages/AssistantPage.tsx
+++ b/frontend/src/components/pages/AssistantPage.tsx
@@ -32,6 +32,10 @@ import {
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { DataList } from "@/components/ui/data-list";
+import {
+  PageTopbar,
+  TopbarPortal,
+} from "@/components/layout/topbar-portal";
 import { PageHeader } from "@/components/ui/page-header";
 import { FilterPills } from "@/components/ui/filter-pills";
 import { SearchInput } from "@/components/ui/search-input";
@@ -1005,268 +1009,270 @@ export function AssistantPage(props: AssistantPageProps) {
          }
        />

-        <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
-          <ListToolbar
-            filters={
-              <FilterPills
-                options={typeFilters}
-                value={typeFilter}
-                onChange={handleFilterChange}
-              />
-            }
-            search={
-              <SearchInput
-                value={searchQuery}
-                onChange={handleSearchChange}
-                placeholder="搜索助手名称、类型或 ID..."
-                className="lg:w-[320px]"
-              />
-            }
-          />
+          <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+            <ListToolbar
+              filters={
+                <FilterPills
+                  options={typeFilters}
+                  value={typeFilter}
+                  onChange={handleFilterChange}
+                />
+              }
+              search={
+                <SearchInput
+                  value={searchQuery}
+                  onChange={handleSearchChange}
+                  placeholder="搜索助手名称、类型或 ID..."
+                  className="lg:w-[320px]"
+                />
+              }
+            />

-          <DataList<AssistantListItem>
-            rows={paginatedAssistants}
-            rowKey={(assistant) => assistant.id}
-            loading={listLoading}
-            loadingText="正在加载助手列表…"
-            error={listError}
-            onRetry={() => void loadAssistants()}
-            empty={{
-              title: listItems.length === 0 ? "暂无助手" : "未找到匹配的助手",
-              description:
-                listItems.length === 0
-                  ? "点击右上角「创建助手」开始。"
-                  : "请调整关键词或筛选条件后再试。",
-            }}
-            pagination={{
-              page: safeCurrentPage,
-              totalPages,
-              onPageChange: setCurrentPage,
-              summary:
-                filteredAssistants.length === 0
-                  ? "没有数据"
-                  : `显示 ${pageStart + 1}-${Math.min(pageEnd, filteredAssistants.length)} / 共 ${filteredAssistants.length} 个助手`,
-            }}
-            columns={[
-              {
-                key: "name",
-                header: "助手名称",
-                width: "md:w-[360px]",
-                cell: (assistant) => (
-                  <>
-                    <div className="truncate font-medium text-foreground">
-                      {assistant.name}
-                    </div>
-                    <div className="mt-1 text-xs text-muted-soft">
-                      {assistant.id}
-                    </div>
-                  </>
-                ),
-              },
-              {
-                key: "type",
-                header: "助手类型",
-                width: "md:w-[128px]",
-                cell: (assistant) => (
-                  <Badge
-                    variant="secondary"
-                    className="h-6 bg-surface-strong px-3 text-muted-foreground"
-                  >
-                    {assistant.type}
-                  </Badge>
-                ),
-              },
-              {
-                key: "updatedAt",
-                width: "md:w-[176px]",
-                header: (
-                  <button
-                    type="button"
-                    onClick={toggleSortOrder}
-                    className="caption-label -mx-2 inline-flex items-center gap-1 rounded-md px-2 py-1 text-muted-soft transition-colors hover:bg-surface-strong hover:text-foreground"
-                    aria-label={
-                      sortOrder === "newest"
-                        ? "当前按最近更新排序,点击切换为最早更新"
-                        : "当前按最早更新排序,点击切换为最近更新"
-                    }
-                  >
-                    更新时间
-                    {sortOrder === "newest" ? (
-                      <ChevronDown size={13} />
-                    ) : (
-                      <ChevronUp size={13} />
-                    )}
-                  </button>
-                ),
-                cellClassName:
-                  "whitespace-nowrap tabular-nums text-muted-foreground",
-                cell: (assistant) => assistant.updatedAt,
-              },
-              {
-                key: "actions",
-                header: "操作",
-                align: "right",
-                cellClassName: "flex justify-end gap-2",
-                cell: (assistant) => (
-                  <>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="gap-1.5 border-hairline-strong text-xs text-muted-foreground hover:text-foreground"
-                      onClick={() => handleEdit(assistant)}
+            <DataList<AssistantListItem>
+              rows={paginatedAssistants}
+              rowKey={(assistant) => assistant.id}
+              loading={listLoading}
+              loadingText="正在加载助手列表…"
+              error={listError}
+              onRetry={() => void loadAssistants()}
+              empty={{
+                title: listItems.length === 0 ? "暂无助手" : "未找到匹配的助手",
+                description:
+                  listItems.length === 0
+                    ? "点击右上角「创建助手」开始。"
+                    : "请调整关键词或筛选条件后再试。",
+              }}
+              pagination={{
+                page: safeCurrentPage,
+                totalPages,
+                onPageChange: setCurrentPage,
+                summary:
+                  filteredAssistants.length === 0
+                    ? "没有数据"
+                    : `显示 ${pageStart + 1}-${Math.min(pageEnd, filteredAssistants.length)} / 共 ${filteredAssistants.length} 个助手`,
+              }}
+              columns={[
+                {
+                  key: "name",
+                  header: "助手名称",
+                  width: "md:w-[360px]",
+                  cell: (assistant) => (
+                    <>
+                      <div className="truncate font-medium text-foreground">
+                        {assistant.name}
+                      </div>
+                      <div className="mt-1 text-xs text-muted-soft">
+                        {assistant.id}
+                      </div>
+                    </>
+                  ),
+                },
+                {
+                  key: "type",
+                  header: "助手类型",
+                  width: "md:w-[128px]",
+                  cell: (assistant) => (
+                    <Badge
+                      variant="secondary"
+                      className="h-6 bg-surface-strong px-3 text-muted-foreground"
                    >
-                      <Pencil size={14} />
-                      编辑
-                    </Button>
-
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="icon-sm"
-                          className="border-hairline-strong text-muted-foreground hover:text-foreground"
-                          aria-label={`${assistant.name} 更多操作`}
-                        >
-                          <MoreHorizontal size={15} />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        align="end"
-                        className="w-32 min-w-32 rounded-xl border border-hairline bg-popover p-1"
+                      {assistant.type}
+                    </Badge>
+                  ),
+                },
+                {
+                  key: "updatedAt",
+                  width: "md:w-[176px]",
+                  header: (
+                    <button
+                      type="button"
+                      onClick={toggleSortOrder}
+                      className="caption-label -mx-2 inline-flex items-center gap-1 rounded-md px-2 py-1 text-muted-soft transition-colors hover:bg-surface-strong hover:text-foreground"
+                      aria-label={
+                        sortOrder === "newest"
+                          ? "当前按最近更新排序,点击切换为最早更新"
+                          : "当前按最早更新排序,点击切换为最近更新"
+                      }
+                    >
+                      更新时间
+                      {sortOrder === "newest" ? (
+                        <ChevronDown size={13} />
+                      ) : (
+                        <ChevronUp size={13} />
+                      )}
+                    </button>
+                  ),
+                  cellClassName:
+                    "whitespace-nowrap tabular-nums text-muted-foreground",
+                  cell: (assistant) => assistant.updatedAt,
+                },
+                {
+                  key: "actions",
+                  header: "操作",
+                  align: "right",
+                  cellClassName: "flex justify-end gap-2",
+                  cell: (assistant) => (
+                    <>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="gap-1.5 border-hairline-strong text-xs text-muted-foreground hover:text-foreground"
+                        onClick={() => handleEdit(assistant)}
                      >
-                        <DropdownMenuItem
-                          className="rounded-lg"
-                          onSelect={() => handleDuplicate(assistant)}
+                        <Pencil size={14} />
+                        编辑
+                      </Button>
+
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="outline"
+                            size="icon-sm"
+                            className="border-hairline-strong text-muted-foreground hover:text-foreground"
+                            aria-label={`${assistant.name} 更多操作`}
+                          >
+                            <MoreHorizontal size={15} />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent
+                          align="end"
+                          className="w-32 min-w-32 rounded-xl border border-hairline bg-popover p-1"
                        >
-                          <Copy size={14} />
-                          复制
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          variant="destructive"
-                          className="rounded-lg"
-                          onSelect={(event) => {
-                            event.preventDefault();
-                            void handleDelete(assistant.id);
-                          }}
-                        >
-                          <Trash2 size={14} />
-                          删除
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </>
-                ),
-              },
-            ]}
-          />
-        </section>
+                          <DropdownMenuItem
+                            className="rounded-lg"
+                            onSelect={() => handleDuplicate(assistant)}
+                          >
+                            <Copy size={14} />
+                            复制
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            variant="destructive"
+                            className="rounded-lg"
+                            onSelect={(event) => {
+                              event.preventDefault();
+                              void handleDelete(assistant.id);
+                            }}
+                          >
+                            <Trash2 size={14} />
+                            删除
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </>
+                  ),
+                },
+              ]}
+            />
+          </section>
      </div>
    );
  }

  if (view === "choose") {
    return (
-      <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
-        <div className="flex items-start justify-between gap-6">
-          <div>
-            <h1 className="font-display display-lg text-ink">创建助手</h1>
-            <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
-              先为助手取个名字，再选择构建方式。确认后将立即创建助手并进入编辑页。
-            </p>
-          </div>
+      <>
+        <TopbarPortal>
+          <PageTopbar
+            title="创建助手"
+            action={
+              <Button
+                variant="outline"
+                className="gap-2 border-hairline-strong text-muted-foreground hover:text-foreground"
+                onClick={() => router.push("/assistants")}
+              >
+                <ChevronLeft size={16} />
+                返回列表
+              </Button>
+            }
+          />
+        </TopbarPortal>

-          <Button
-            variant="outline"
-            size="lg"
-            className="shrink-0 gap-2 border-hairline-strong text-muted-foreground hover:text-foreground"
-            onClick={() => router.push("/assistants")}
-          >
-            <ChevronLeft size={16} />
-            返回列表
-          </Button>
-        </div>
+        <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-8">
+          <p className="max-w-2xl text-[15px] leading-7 text-muted-foreground">
+            先为助手取个名字，再选择构建方式。确认后将立即创建助手并进入编辑页。
+          </p>

-        <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
-          <label className="block">
-            <div className="mb-2 text-sm font-medium text-foreground">
-              助手名称
+          <section className="rounded-2xl border border-hairline bg-card p-6 shadow-sm">
+            <label className="block">
+              <div className="mb-2 text-sm font-medium text-foreground">
+                助手名称
+              </div>
+              <Input
+                value={draftName}
+                autoFocus
+                onChange={(event) => setDraftName(event.target.value)}
+                placeholder="请输入助手名称"
+                className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+              />
+            </label>
+          </section>
+
+          <section className="flex flex-col gap-4">
+            <div className="text-sm font-medium text-foreground">构建方式</div>
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {assistantTypeOptions.map((option) => {
+                const selected = draftType === option.type;
+
+                return (
+                  <button
+                    key={option.type}
+                    type="button"
+                    onClick={() => setDraftType(option.type)}
+                    className={`group relative flex flex-col gap-4 rounded-2xl border bg-card p-5 text-left transition-colors ${
+                      selected
+                        ? "border-primary ring-1 ring-primary"
+                        : "border-hairline hover:border-hairline-strong"
+                    }`}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div className="flex h-11 w-11 items-center justify-center rounded-full bg-surface-strong text-foreground">
+                        {option.icon}
+                      </div>
+
+                      {selected ? (
+                        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                          <Check size={14} />
+                        </span>
+                      ) : (
+                        !option.available && (
+                          <Badge
+                            variant="secondary"
+                            className="h-6 bg-surface-strong px-3 text-xs text-muted-foreground"
+                          >
+                            即将上线
+                          </Badge>
+                        )
+                      )}
+                    </div>
+
+                    <div>
+                      <div className="text-base font-medium text-foreground">
+                        {option.label}
+                      </div>
+                      <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
+                        {option.description}
+                      </p>
+                    </div>
+                  </button>
+                );
+              })}
            </div>
-            <Input
-              value={draftName}
-              autoFocus
-              onChange={(event) => setDraftName(event.target.value)}
-              placeholder="请输入助手名称"
-              className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
-            />
-          </label>
-        </section>
+          </section>

-        <section className="flex flex-col gap-4">
-          <div className="text-sm font-medium text-foreground">构建方式</div>
-
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            {assistantTypeOptions.map((option) => {
-              const selected = draftType === option.type;
-
-              return (
-                <button
-                  key={option.type}
-                  type="button"
-                  onClick={() => setDraftType(option.type)}
-                  className={`group relative flex flex-col gap-4 rounded-2xl border bg-card p-5 text-left transition-colors ${
-                    selected
-                      ? "border-primary ring-1 ring-primary"
-                      : "border-hairline hover:border-hairline-strong"
-                  }`}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex h-11 w-11 items-center justify-center rounded-full bg-surface-strong text-foreground">
-                      {option.icon}
-                    </div>
-
-                    {selected ? (
-                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
-                        <Check size={14} />
-                      </span>
-                    ) : (
-                      !option.available && (
-                        <Badge
-                          variant="secondary"
-                          className="h-6 bg-surface-strong px-3 text-xs text-muted-foreground"
-                        >
-                          即将上线
-                        </Badge>
-                      )
-                    )}
-                  </div>
-
-                  <div>
-                    <div className="text-base font-medium text-foreground">
-                      {option.label}
-                    </div>
-                    <p className="mt-1.5 text-sm leading-6 text-muted-foreground">
-                      {option.description}
-                    </p>
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-        </section>
-
-        <div className="flex items-center justify-end gap-3">
-          {createError && (
-            <span className="text-xs text-destructive">{createError}</span>
-          )}
-          <Button
-            variant="outline"
-            size="lg"
-            className="border-hairline-strong text-muted-foreground hover:text-foreground"
-            disabled={creating}
-            onClick={() => router.push("/assistants")}
-          >
-            取消
-          </Button>
+          <div className="flex items-center justify-end gap-3">
+            {createError && (
+              <span className="text-xs text-destructive">{createError}</span>
+            )}
+            <Button
+              variant="outline"
+              size="lg"
+              className="border-hairline-strong text-muted-foreground hover:text-foreground"
+              disabled={creating}
+              onClick={() => router.push("/assistants")}
+            >
+              取消
+            </Button>
          <Button
            size="lg"
            className="gap-2"
@@ -1280,8 +1286,9 @@ export function AssistantPage(props: AssistantPageProps) {
            )}
            创建助手
          </Button>
+          </div>
        </div>
-      </div>
+      </>
    );
  }

--- a/frontend/src/components/pages/HistoryPage.tsx
+++ b/frontend/src/components/pages/HistoryPage.tsx
@@ -183,7 +183,7 @@ export function HistoryPage() {
        clearSkipRowClick();
      }
    },
-    [clearSkipRowClick, currentPage, detail?.id, load, rows.length],
+    [clearSkipRowClick, currentPage, detail, load, rows.length],
  );

  const handleRowClick = useCallback(
--- a/frontend/src/components/workflow/WorkflowCanvas.tsx
+++ b/frontend/src/components/workflow/WorkflowCanvas.tsx
@@ -8,6 +8,7 @@ import {
  Controls,
  type Edge,
  MarkerType,
+  MiniMap,
  type Node,
  type NodeChange,
  type OnConnectEnd,
@@ -561,7 +562,7 @@ export function WorkflowCanvas({
      <NodeActionContext.Provider value={nodeActions}>
        <EdgeActionContext.Provider value={edgeActions}>
          <div className="relative h-full w-full min-h-[560px]">
-            <section className="relative h-full w-full overflow-hidden rounded-2xl border border-hairline bg-canvas-soft shadow-sm">
+            <section className="relative h-full w-full overflow-hidden bg-canvas-soft">
              <div
                aria-hidden
                className="pointer-events-none absolute -right-24 -top-24 z-0 h-80 w-80 rounded-full opacity-30 blur-3xl"
@@ -616,6 +617,17 @@ export function WorkflowCanvas({
                <Controls
                  className="!rounded-xl !border !border-hairline !bg-card !shadow-sm [&_button]:!border-hairline [&_button]:!bg-card [&_button]:!text-foreground"
                />
+                <MiniMap
+                  position="bottom-left"
+                  pannable
+                  zoomable
+                  nodeBorderRadius={8}
+                  nodeColor="var(--surface-strong)"
+                  nodeStrokeColor="var(--hairline-strong)"
+                  maskColor="color-mix(in srgb, var(--background) 68%, transparent)"
+                  className="!rounded-xl !border !border-hairline !bg-card/90 !shadow-sm"
+                  style={{ left: 56, width: 176, height: 108 }}
+                />
                <Panel position="top-left">
                  <TooltipProvider>
                    <div className="flex flex-col gap-2">
--- a/frontend/src/components/workflow/WorkflowEditor.tsx
+++ b/frontend/src/components/workflow/WorkflowEditor.tsx
@@ -23,7 +23,7 @@ export function WorkflowEditor(props: WorkflowEditorProps) {

  if (loading) {
    return (
-      <div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft text-muted-foreground">
+      <div className="flex h-full w-full items-center justify-center bg-canvas-soft text-muted-foreground">
        <Loader2 className="mr-2 animate-spin" size={18} />
        正在加载节点目录…
      </div>
@@ -31,7 +31,7 @@ export function WorkflowEditor(props: WorkflowEditorProps) {
  }
  if (error) {
    return (
-      <div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft px-6 text-center text-sm text-destructive">
+      <div className="flex h-full w-full items-center justify-center bg-canvas-soft px-6 text-center text-sm text-destructive">
        加载节点目录失败:{error}
      </div>
    );