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,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