deerflow-code/frontend-web/src/components/workspace/workspace-nav-menu.tsx

"use client";

import {
  BellIcon,
  BotIcon,
  BrainIcon,
  BriefcaseIcon,
  CalendarClockIcon,
  ChevronsUpDown,
  CpuIcon,
  DatabaseZapIcon,
  GaugeIcon,
  HistoryIcon,
  ListTreeIcon,
  MessageCircleQuestionIcon,
  ScrollTextIcon,
  Settings2Icon,
  SettingsIcon,
  SparklesIcon,
  TagsIcon,
  TrophyIcon,
} from "lucide-react";
import { useEffect, useState } from "react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";
import { getStoredAuth } from "@/core/auth";
import { useI18n } from "@/core/i18n/hooks";
import { useUnreadCount } from "@/core/notifications";
import {
  loadLogSystemSettings,
  type LogSystemSettings,
} from "@/core/system-settings/api";

import { NotificationDialog } from "./notification-dialog";
import { useNavigate } from "react-router-dom";

import { SettingsDialog } from "./settings";
import { useWorkspaceCompactNavItems } from "./workspace-nav-chat-list";

function NavMenuButtonContent({
  isSidebarOpen,
  t,
}: {
  isSidebarOpen: boolean;
  t: ReturnType<typeof useI18n>["t"];
}) {
  return isSidebarOpen ? (
    <div className="text-sidebar-foreground/85 flex w-full items-center gap-2 text-left text-sm">
      <SettingsIcon className="size-4" />
      <span>{t.workspace.settingsAndMore}</span>
      <ChevronsUpDown className="text-sidebar-foreground/55 ml-auto size-4" />
    </div>
  ) : (
    <div className="flex size-full items-center justify-center">
      <SettingsIcon className="text-sidebar-foreground/80 size-4" />
    </div>
  );
}

export function WorkspaceNavMenu() {
  const navigate = useNavigate();
  const isAdmin = getStoredAuth()?.system_role === "admin";
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [settingsDefaultSection, setSettingsDefaultSection] = useState<
    "appearance" | "memory" | "tools" | "about"
  >("appearance");
  const [notificationOpen, setNotificationOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [logSystem, setLogSystem] = useState<LogSystemSettings | null>(null);
  const { open: isSidebarOpen } = useSidebar();
  const { t } = useI18n();
  const { data: unreadCount = 0 } = useUnreadCount();
  const { settingsItems } = useWorkspaceCompactNavItems();

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!isAdmin) return;
    let cancelled = false;
    loadLogSystemSettings()
      .then((settings) => {
        if (!cancelled) setLogSystem(settings);
      })
      .catch(() => {
        if (!cancelled) setLogSystem(null);
      });
    return () => {
      cancelled = true;
    };
  }, [isAdmin]);

  return (
    <>
      <SettingsDialog
        open={settingsOpen}
        onOpenChange={setSettingsOpen}
        defaultSection={settingsDefaultSection}
      />
      <NotificationDialog
        open={notificationOpen}
        onOpenChange={setNotificationOpen}
      />
      <SidebarMenu className="w-full">
        <SidebarMenuItem>
          {mounted ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuButton
                  size="lg"
                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                >
                  <NavMenuButtonContent isSidebarOpen={isSidebarOpen} t={t} />
                </SidebarMenuButton>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                align="end"
                sideOffset={4}
              >
                <DropdownMenuGroup>
                  {settingsItems.map((item) => {
                    const Icon = item.icon;
                    return (
                      <DropdownMenuItem
                        key={item.id}
                        onClick={() => item.path && navigate(item.path)}
                      >
                        <Icon />
                        {item.label}
                      </DropdownMenuItem>
                    );
                  })}
                  <DropdownMenuItem onClick={() => setNotificationOpen(true)}>
                    <BellIcon />
                    {t.notifications.title}
                    {unreadCount > 0 && (
                      <span className="ml-auto flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white">
                        {unreadCount > 99 ? "99+" : unreadCount}
                      </span>
                    )}
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={() => {
                      setSettingsDefaultSection("appearance");
                      setSettingsOpen(true);
                    }}
                  >
                    <Settings2Icon />
                    {t.common.settings}
                  </DropdownMenuItem>
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() =>
                        navigate("/page/workspace/settings/llm-metrics")
                      }
                    >
                      <GaugeIcon />
                      大模型调用统计
                    </DropdownMenuItem>
                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() =>
                        navigate("/page/workspace/settings/checkpoint-migration")
                      }
                    >
                      <DatabaseZapIcon />
                      Checkpoint 迁移
                    </DropdownMenuItem>
                  )}
                  {isAdmin ? (
                    <DropdownMenuItem
                      onClick={() =>
                        navigate("/page/strategy/admin/user-leaderboard")
                      }
                    >
                      <TrophyIcon />
                      用户排行榜
                    </DropdownMenuItem>
                  ) : (
                    <DropdownMenuItem
                      onClick={() =>
                        navigate("/page/strategy/user-leaderboard")
                      }
                    >
                      <TrophyIcon />
                      用户排行榜
                    </DropdownMenuItem>
                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() =>
                        navigate("/page/workspace/admin/scheduled-tasks")
                      }
                    >
                      <CalendarClockIcon />
                      定时任务管理
                    </DropdownMenuItem>
                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/workspace/admin/agents")}
                    >
                      <BotIcon />
                      智能体管理
                    </DropdownMenuItem>
                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/workspace/admin/skills")}
                    >
                      <SparklesIcon />
                      技能管理
                    </DropdownMenuItem>
                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/workspace/admin/models")}
                    >
                      <CpuIcon />
                      模型配置
                    </DropdownMenuItem>
                  )}
                  {/* 与全量模式左下角「设置和更多」下拉里的菜单管理同入口（管理员）：
                      简洁模式没有全局侧边栏，这里放一份保证两种模式都能进菜单管理。 */}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/strategy/admin/menu-management")}
                    >
                      <ListTreeIcon />
                      菜单管理
                    </DropdownMenuItem>
                  )}
                  <DropdownMenuItem
                    onClick={() => navigate("/page/workspace/admin/tags")}
                  >
                    <TagsIcon />
                    {t.adminTags.title}
                  </DropdownMenuItem>
                  {/* {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/workspace/admin/plugins")}
                    >
                      <PlugIcon />
                      插件管理
                    </DropdownMenuItem>
                  )} */}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/workspace/admin/positions")}
                    >
                      <BriefcaseIcon />
                      岗位管理
                    </DropdownMenuItem>
                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() => navigate("/page/workspace/admin/position-roles")}
                    >
                      <BriefcaseIcon />
                      岗位角色配置
                    </DropdownMenuItem>
                  )}
                  {isAdmin && (
                    <DropdownMenuItem
                      onClick={() =>
                        navigate(
                          "/page/workspace/settings/recommended-questions",
                        )
                      }
                    >
                      <MessageCircleQuestionIcon />
                      推荐问题配置
                    </DropdownMenuItem>
                  )}
                  {isAdmin && logSystem?.enabled && logSystem.url && (
                    <DropdownMenuItem
                      onClick={() =>
                        window.open(
                          logSystem.url,
                          "_blank",
                          "noopener,noreferrer",
                        )
                      }
                    >
                      <ScrollTextIcon />
                      {logSystem.label || "日志系统"}
                    </DropdownMenuItem>
                  )}
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <SidebarMenuButton size="lg" className="pointer-events-none">
              <NavMenuButtonContent isSidebarOpen={isSidebarOpen} t={t} />
            </SidebarMenuButton>
          )}
        </SidebarMenuItem>
      </SidebarMenu>
    </>
  );
}