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
@@ -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>
  );
 }
@@ -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
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -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>
+  );
+}