@allbluecn/admin-app 0.1.0

package/src/components/layout/sidebar-02/app-sidebar.tsx

@@ -0,0 +1,160 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useTranslation } from 'react-i18next'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarTrigger,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import {
+  Home,
+  Layers,
+  Package2,
+  Settings,
+  ShoppingBag,
+  Users,
+  FileText,
+  Bot,
+  Boxes,
+  Library,
+  Scale,
+  ShieldCheck,
+  Bookmark,
+  BugPlay,
+  Activity,
+  CreditCard,
+  Shield,
+  ScrollText,
+} from "lucide-react";
+import { Logo } from "@/components/layout/sidebar-02/logo";
+import type { Route } from "./nav-main";
+import DashboardNavigation from "@/components/layout/sidebar-02/nav-main";
+import { NotificationsPopover } from "@/components/layout/sidebar-02/nav-notifications";
+import { AdminUserMenu } from "@/components/admin/admin-user-menu";
+
+function buildDashboardRoutes(t: (key: string) => string): Route[] {
+  return [
+    { id: "home", title: t('nav.dashboard'), icon: <Home className="size-4" />, link: "/dashboard" },
+    { id: "users", title: t('nav.users'), icon: <Users className="size-4" />, link: "/users" },
+    { id: "docs", title: t('nav.docs'), icon: <FileText className="size-4" />, link: "/docs" },
+    { id: "apps", title: t('nav.apps'), icon: <Package2 className="size-4" />, link: "/apps" },
+    {
+      id: "knowledge-public", title: t('nav.knowledgePublic.title'), icon: <Library className="size-4" />, link: "#",
+      subs: [
+        { title: t('nav.knowledgePublic.laws'), link: "/knowledge-public/legal", icon: <Scale className="size-4" /> },
+        { title: t('nav.knowledgePublic.compliance'), link: "/knowledge-public/compliance", icon: <ShieldCheck className="size-4" /> },
+        { title: t('nav.knowledgePublic.bookmarks'), link: "/knowledge-public/bookmarks", icon: <Bookmark className="size-4" /> },
+      ],
+    },
+    { id: "ai-providers", title: t('nav.aiProviders'), icon: <Bot className="size-4" />, link: "/ai-providers" },
+    { id: "components", title: t('nav.components'), icon: <Layers className="size-4" />, link: "/components" },
+    { id: "dependencies", title: t('nav.dependencies'), icon: <Boxes className="size-4" />, link: "/dependencies" },
+    { id: "developer-logs", title: t('nav.developerLogs'), icon: <ScrollText className="size-4" />, link: "/developer-logs" },
+    { id: "market", title: t('nav.market'), icon: <ShoppingBag className="size-4" />, link: "/market" },
+    {
+      id: "billing", title: t('nav.billing.title'), icon: <CreditCard className="size-4" />, link: "#",
+      subs: [
+        { title: t('nav.billing.subscriptions'), link: "/billing/subscriptions" },
+        { title: t('nav.billing.invoices'), link: "/billing/invoices" },
+      ],
+    },
+    {
+      id: "enterprise", title: t('nav.enterprise.title'), icon: <Shield className="size-4" />, link: "#",
+      subs: [
+        { title: t('nav.enterprise.licenses'), link: "/licenses" },
+        { title: t('nav.enterprise.audit'), link: "/audit" },
+        { title: t('nav.enterprise.sso'), link: "/sso" },
+        { title: t('nav.enterprise.permissions'), link: "/permissions" },
+        { title: t('nav.enterprise.compliance'), link: "/compliance" },
+      ],
+    },
+    {
+      id: "monitoring", title: t('nav.monitoring.title'), icon: <Activity className="size-4" />, link: "#",
+      subs: [
+        { title: t('nav.monitoring.overview'), link: "/monitoring/overview" },
+        { title: t('nav.monitoring.logs'), link: "/monitoring/logs" },
+        { title: t('nav.monitoring.errors'), link: "/monitoring/errors" },
+        { title: t('nav.monitoring.metrics'), link: "/monitoring/metrics" },
+        { title: t('nav.monitoring.health'), link: "/monitoring/health" },
+        { title: t('nav.monitoring.sentry'), link: "/monitoring/sentry" },
+      ],
+    },
+    { id: "settings", title: t('nav.settings'), icon: <Settings className="size-4" />, link: "/settings" },
+  ]
+}
+
+const teams = [
+  { id: "1", name: "Alpha Inc.", logo: Logo, plan: "Free" },
+  { id: "2", name: "Beta Corp.", logo: Logo, plan: "Free" },
+  { id: "3", name: "Gamma Tech", logo: Logo, plan: "Free" },
+];
+
+export function DashboardSidebar({ routes: propRoutes }: { routes?: Route[] }) {
+  const { t } = useTranslation('common')
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const routes = propRoutes || buildDashboardRoutes(t);
+
+  return (
+    <Sidebar variant="inset" collapsible="icon">
+      <SidebarHeader
+        className={cn(
+          "flex md:pt-3.5",
+          isCollapsed
+            ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
+            : "flex-row items-center justify-between"
+        )}
+      >
+        <a href="#" className="flex items-center gap-2">
+          <Logo className="h-8 w-8" />
+          {!isCollapsed && (
+            <span className="font-semibold text-black dark:text-white">
+              Admin
+            </span>
+          )}
+        </a>
+
+        <motion.div
+          key={isCollapsed ? "header-collapsed" : "header-expanded"}
+          className={cn(
+            "flex items-center gap-2",
+            isCollapsed ? "flex-row md:flex-col-reverse" : "flex-row"
+          )}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.8 }}
+        >
+          <NotificationsPopover notifications={[]} />
+          {!isCollapsed && <SidebarTrigger />}
+          {isCollapsed && <SidebarTrigger />}
+        </motion.div>
+      </SidebarHeader>
+      <SidebarContent className="gap-4 px-2 py-4">
+        <DashboardNavigation routes={routes} />
+      </SidebarContent>
+      <SidebarFooter className="px-2">
+        <AdminUserMenu />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/src/components/layout/sidebar-02/index.tsx

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { ReactNode } from "react"
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { DashboardSidebar } from "@/components/layout/sidebar-02/app-sidebar";
+
+export default function Sidebar02({ children }: { children?: ReactNode }) {
+  return (
+    <SidebarProvider>
+      <div className="relative flex h-dvh w-full overflow-hidden">
+        <DashboardSidebar />
+        <SidebarInset className="flex min-h-0 flex-col overflow-hidden">
+          <div className="min-h-0 flex-1 flex flex-col overflow-hidden">{children}</div>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  );
+}

package/src/components/layout/sidebar-02/logo.tsx

@@ -0,0 +1,40 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { SVGProps } from "react";
+
+export const Logo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="currentColor"
+    height="48"
+    viewBox="0 0 40 48"
+    width="40"
+    {...props}
+  >
+    <clipPath id="a">
+      <path d="m0 0h40v48h-40z" />
+    </clipPath>
+    <g clipPath="url(#a)">
+      <path d="m25.0887 5.05386-3.933-1.05386-3.3145 12.3696-2.9923-11.16736-3.9331 1.05386 3.233 12.0655-8.05262-8.0526-2.87919 2.8792 8.83271 8.8328-10.99975-2.9474-1.05385625 3.933 12.01860625 3.2204c-.1376-.5935-.2104-1.2119-.2104-1.8473 0-4.4976 3.646-8.1436 8.1437-8.1436 4.4976 0 8.1436 3.646 8.1436 8.1436 0 .6313-.0719 1.2459-.2078 1.8359l10.9227 2.9267 1.0538-3.933-12.0664-3.2332 11.0005-2.9476-1.0539-3.933-12.0659 3.233 8.0526-8.0526-2.8792-2.87916-8.7102 8.71026z" />
+      <path d="m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z" />
+      <path d="m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z" />
+      <path d="m21.9807 32.2274c-.65.1671-1.3313.2559-2.0334.2559-.7522 0-1.4806-.102-2.1721-.2929l-2.882 10.7558 3.933 1.0538z" />
+      <path d="m17.6361 32.1507c-1.3796-.4076-2.6067-1.1707-3.5751-2.1833l-7.9325 7.9325 2.87919 2.8792z" />
+      <path d="m13.9956 29.8973c-.9518-1.019-1.6451-2.2826-1.9751-3.6862l-10.95836 2.9363 1.05385 3.933z" />
+    </g>
+  </svg>
+);

package/src/components/layout/sidebar-02/nav-main.tsx

@@ -0,0 +1,153 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuItem as SidebarMenuSubItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { useLocation } from "@tanstack/react-router";
+import type React from "react";
+import { useState } from "react";
+
+export type Route = {
+  id: string;
+  title: string;
+  icon?: React.ReactNode;
+  link: string;
+  subs?: {
+    title: string;
+    link: string;
+    icon?: React.ReactNode;
+  }[];
+};
+
+export default function DashboardNavigation({ routes }: { routes: Route[] }) {
+  const { state } = useSidebar();
+  const { pathname } = useLocation();
+  const isCollapsed = state === "collapsed";
+  const [openCollapsible, setOpenCollapsible] = useState<string | null>(null);
+
+  const isActive = (link: string) => {
+    if (link === "#") return false;
+    if (link === "/") return pathname === "/";
+    return pathname === link;
+  };
+
+  return (
+    <SidebarMenu className="space-y-1">
+      {routes.map((route) => {
+        const isOpen = !isCollapsed && openCollapsible === route.id;
+        const hasSubRoutes = !!route.subs?.length;
+        const active = isActive(route.link);
+
+        return (
+          <SidebarMenuItem key={route.id}>
+            {hasSubRoutes ? (
+              <Collapsible
+                open={isOpen}
+                onOpenChange={(open) =>
+                  setOpenCollapsible(open ? route.id : null)
+                }
+                className="w-full"
+              >
+                <SidebarMenuButton
+                  isActive={isOpen || active}
+                  className={cn(isCollapsed && "justify-center")}
+                  onClick={() => {
+                    if (!isCollapsed) {
+                      setOpenCollapsible(isOpen ? null : route.id)
+                    }
+                  }}
+                >
+                  {route.icon}
+                  {!isCollapsed && (
+                    <span className="ml-2 flex-1 text-sm font-medium">
+                      {route.title}
+                    </span>
+                  )}
+                  {!isCollapsed && hasSubRoutes && (
+                    <span className="ml-auto">
+                      {isOpen ? (
+                        <ChevronUp className="size-4" />
+                      ) : (
+                        <ChevronDown className="size-4" />
+                      )}
+                    </span>
+                  )}
+                </SidebarMenuButton>
+
+                {!isCollapsed && (
+                  <CollapsibleContent >
+                    <SidebarMenuSub className="my-1 ml-3.5 ">
+                      {route.subs?.map((subRoute) => (
+                        <SidebarMenuSubItem
+                          key={`${route.id}-${subRoute.title}`}
+                          className="h-auto"
+                        >
+                          <SidebarMenuSubButton asChild isActive={isActive(subRoute.link)}>
+                            <Link
+                              to={subRoute.link}
+                              className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium"
+                            >
+                              {subRoute.icon}
+                              {subRoute.title}
+                            </Link>
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </CollapsibleContent>
+                )}
+              </Collapsible>
+            ) : (
+              <SidebarMenuButton asChild tooltip={route.title} isActive={active} >
+                <Link
+                  to={route.link}
+                  className={cn(
+                      "flex items-center rounded-lg px-2 ",
+                      isCollapsed && "justify-center"
+                    )}
+                >
+                  {route.icon}
+                  {!isCollapsed && (
+                    <span className="ml-2 text-sm font-medium">
+                      {route.title}
+                    </span>
+                  )}
+                </Link>
+              </SidebarMenuButton>
+            )}
+          </SidebarMenuItem>
+        );
+      })}
+    </SidebarMenu>
+  );
+}

package/src/components/layout/sidebar-02/nav-notifications.tsx

@@ -0,0 +1,78 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { BellIcon } from "lucide-react";
+
+type Notification = {
+  id: string;
+  avatar: string;
+  fallback: string;
+  text: string;
+  time: string;
+};
+
+export function NotificationsPopover({
+  notifications,
+}: {
+  notifications: Notification[];
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="rounded-full"
+          aria-label="Open notifications"
+        >
+          <BellIcon className="size-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="right" className="w-80 my-6">
+        <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {notifications.map(({ id, avatar, fallback, text, time }) => (
+          <DropdownMenuItem key={id} className="flex items-start gap-3">
+            <Avatar className="size-8">
+              <AvatarImage src={avatar} alt="Avatar" />
+              <AvatarFallback>{fallback}</AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col">
+              <span className="text-sm font-medium">{text}</span>
+              <span className="text-xs text-muted-foreground">{time}</span>
+            </div>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem className="justify-center text-sm text-muted-foreground hover:text-primary">
+          View all notifications
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/layout/sidebar-02/team-switcher.tsx

@@ -0,0 +1,106 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { ChevronsUpDown, Plus } from "lucide-react";
+import * as React from "react";
+
+type Team = {
+  name: string;
+  logo: React.ElementType;
+  plan: string;
+};
+
+export function TeamSwitcher({ teams }: { teams: Team[] }) {
+  const { isMobile } = useSidebar();
+  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+
+  if (!activeTeam) return null;
+
+  const Logo = activeTeam.logo;
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-background text-foreground">
+                <Logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {activeTeam.name}
+                </span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg mb-4"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}