@ai-partner-x/aiko-boot-cli 0.1.4

package/templates/scaffold-default/packages/admin/src/components/admin-ui/layout/language-switcher.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Languages } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const LANGS = [
+  { code: "zh", labelKey: "common.zh" },
+  { code: "en", labelKey: "common.en" },
+] as const;
+
+export function LanguageSwitcher({ className }: { className?: string }) {
+  const { t, i18n } = useTranslation();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className={cn("rounded-full", "border-sidebar-border", "bg-transparent", "h-10", "w-10", className)}
+          aria-label={t("common.language")}
+        >
+          <Languages className="h-5 w-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {LANGS.map(({ code, labelKey }) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => i18n.changeLanguage(code)}
+            className={cn(i18n.language === code && "bg-accent")}
+          >
+            {t(labelKey)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/templates/scaffold-default/packages/admin/src/components/admin-ui/layout/layout.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Header } from "@/components/admin-ui/layout/header";
+import { ThemeProvider } from "@/components/admin-ui/theme/theme-provider";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { Outlet } from "react-router";
+import { Sidebar } from "./sidebar";
+
+export function Layout() {
+  return (
+    <ThemeProvider>
+      <SidebarProvider>
+        <Sidebar />
+        <SidebarInset>
+          <Header />
+          <main
+            className={cn(
+              "@container/main",
+              "container",
+              "mx-auto",
+              "relative",
+              "w-full",
+              "flex",
+              "flex-col",
+              "flex-1",
+              "px-2",
+              "pt-3",
+              "md:p-3",
+              "lg:px-4",
+              "lg:pt-4"
+            )}
+          >
+            <Outlet />
+          </main>
+        </SidebarInset>
+      </SidebarProvider>
+    </ThemeProvider>
+  );
+}
+
+Layout.displayName = "Layout";

package/templates/scaffold-default/packages/admin/src/components/admin-ui/layout/loading-overlay.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import { Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+export const LoadingOverlay = React.forwardRef<
+  HTMLDivElement,
+  LoadingOverlayProps
+>(({ className, loading = false, children, ...props }, ref) => {
+  if (!loading) return children;
+
+  return (
+    <div className="relative" ref={ref} {...props}>
+      {children}
+      <div
+        className={cn(
+          "absolute inset-0 z-50 flex items-center justify-center",
+          "bg-background/60",
+          className
+        )}
+      >
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+LoadingOverlay.displayName = "LoadingOverlay";

package/templates/scaffold-default/packages/admin/src/components/admin-ui/layout/shell-bar.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import { Link, useNavigate } from "react-router"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import {
+  LayoutGrid,
+  List,
+  PanelLeft,
+  Bell,
+  HelpCircle,
+  User,
+  Settings,
+  LogOut,
+  ChevronDown,
+  ArrowLeft,
+  Search,
+} from "lucide-react"
+import { appAuth, type AuthUser } from "@scaffold/core"
+import { useEffect, useState } from "react"
+import { LOGIN_URL } from "@/app.config"
+
+export interface ShellBarProps {
+  title?: string
+  logo?: React.ReactNode
+  userName?: string
+  notificationCount?: number
+  layoutMode: "menu" | "tile"
+  onLayoutModeChange: (mode: "menu" | "tile") => void
+  onMenuToggle?: () => void
+  onLogout?: () => void
+  showBackButton?: boolean
+  onBack?: () => void
+}
+
+function useAuthIdentity() {
+  const [user, setUser] = useState<AuthUser | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const loadIdentity = async () => {
+      try {
+        const identity = await appAuth.getIdentity()
+        if (!cancelled) setUser(identity ?? null)
+      } catch {
+        if (!cancelled) setUser(null)
+      }
+    }
+
+    void loadIdentity()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return user
+}
+
+export function ShellBar({
+  title = "AI-First",
+  logo,
+  notificationCount = 3,
+  layoutMode,
+  onLayoutModeChange,
+  onMenuToggle,
+  showBackButton = false,
+  onBack,
+}: ShellBarProps) {
+  const navigate = useNavigate()
+  const user = useAuthIdentity()
+  const handleLogout = async () => {
+    const result = await appAuth.logout()
+    if (result?.success) navigate(LOGIN_URL, { replace: true })
+  }
+
+  return (
+    <header className="flex h-14 bg-white dark:bg-background items-center justify-between border-b border-border bg-background px-4 shadow-sm sticky top-0 z-50">
+      <div className="flex items-center gap-3">
+        {layoutMode === "menu" && onMenuToggle && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-9 rounded-lg"
+            onClick={onMenuToggle}
+            title="切换侧边栏"
+          >
+            <PanelLeft className="size-4" />
+          </Button>
+        )}
+        {showBackButton && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-9 rounded-lg"
+            onClick={onBack}
+            title="返回门户"
+          >
+            <ArrowLeft className="size-4" />
+          </Button>
+        )}
+        <Link to="/" className="flex items-center gap-3 group">
+          {logo || (
+            <div className="flex size-9 items-center justify-center rounded-xl bg-primary font-bold text-primary-foreground shadow-lg">
+              A
+            </div>
+          )}
+          <div className="flex flex-col">
+            <span className="text-[15px] font-semibold leading-tight">
+              {title}
+            </span>
+            <span className="text-[10px] font-medium tracking-wide text-muted-foreground">
+              Enterprise Platform
+            </span>
+          </div>
+        </Link>
+      </div>
+
+      <div className="mx-8 hidden flex-1 max-w-md md:block">
+        <div className="relative">
+          <Search className="absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="搜索应用、功能..."
+            className="h-10 pl-11"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1">
+        <div className="mr-2 flex items-center rounded-xl bg-muted p-1">
+          <Button
+            variant={layoutMode === "tile" ? "secondary" : "ghost"}
+            size="icon"
+            className={cn(
+              "size-8 rounded-lg",
+              layoutMode === "tile" && "bg-background text-primary shadow-sm"
+            )}
+            onClick={() => onLayoutModeChange("tile")}
+            title="磁贴视图"
+          >
+            <LayoutGrid className="size-4" />
+          </Button>
+          <Button
+            variant={layoutMode === "menu" ? "secondary" : "ghost"}
+            size="icon"
+            className={cn(
+              "size-8 rounded-lg",
+              layoutMode === "menu" && "bg-background text-primary shadow-sm"
+            )}
+            onClick={() => onLayoutModeChange("menu")}
+            title="菜单视图"
+          >
+            <List className="size-4" />
+          </Button>
+        </div>
+
+        <div className="mx-2 h-6 w-px bg-border" />
+
+        {notificationCount > 0 && (
+          <Button variant="ghost" size="icon" className="relative size-9 rounded-lg" title="通知">
+            <Bell className="size-4" />
+            <span className="absolute text-white -right-0.5 -top-0.5 flex size-4 items-center justify-center rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground">
+              {notificationCount > 99 ? "99+" : notificationCount}
+            </span>
+          </Button>
+        )}
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="flex items-center gap-2.5 rounded-xl pl-2 pr-3 py-1.5"
+            >
+              <div className="flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                <User className="size-4" />
+              </div>
+              <span className="hidden text-sm font-medium sm:block">
+                {user?.account}
+              </span>
+              <ChevronDown className="hidden size-4 text-muted-foreground sm:block" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-60 rounded-2xl p-2">
+            <div className="border-border bg-muted/50 mb-2 rounded-xl px-4 py-4">
+              <div className="flex items-center gap-3">
+                <div className="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                  <User className="size-10" />
+                </div>
+                <div>
+                  <p className="font-semibold">{user?.account}</p>
+                  {user?.email ? (
+                    <p className="text-xs text-muted-foreground">{user.email}</p>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+            <DropdownMenuItem>
+              <User className="size-4" />
+              个人资料
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Settings className="size-4" />
+              账户设置
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <HelpCircle className="size-4" />
+              帮助中心
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={handleLogout}
+            >
+              <LogOut className="size-4" />
+              退出登录
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}
+
+ShellBar.displayName = "ShellBar"

package/templates/scaffold-default/packages/admin/src/components/admin-ui/layout/sidebar.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import React from "react"
+import { Link, useLocation } from "react-router"
+import {
+  SidebarRail as ShadcnSidebarRail,
+  Sidebar as ShadcnSidebar,
+  SidebarContent as ShadcnSidebarContent,
+  SidebarHeader as ShadcnSidebarHeader,
+  useSidebar as useShadcnSidebar,
+  SidebarTrigger as ShadcnSidebarTrigger,
+} from "@/components/ui/sidebar"
+import { Button } from "@/components/ui/button"
+import { LayoutDashboard } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { useAppConfig } from "@/providers/app-config"
+import { useTranslation } from "react-i18next"
+
+export type SidebarMenuItem = {
+  key: string
+  labelKey: string
+  route: string
+  icon?: React.ReactNode
+}
+
+const defaultMenuItems: SidebarMenuItem[] = [
+  {
+    key: "dashboard",
+    labelKey: "sidebar.menu.dashboard",
+    route: "/",
+    icon: <LayoutDashboard className="h-4 w-4" />,
+  },
+]
+
+export function Sidebar() {
+  const { open } = useShadcnSidebar()
+  const location = useLocation()
+  const pathname = location.pathname
+  const { t } = useTranslation()
+
+  return (
+    <ShadcnSidebar collapsible="icon" className={cn("border-none")}>
+      <ShadcnSidebarRail />
+      <SidebarHeader />
+      <ShadcnSidebarContent
+        className={cn(
+          "transition-discrete",
+          "duration-200",
+          "flex",
+          "flex-col",
+          "gap-2",
+          "pt-2",
+          "pb-2",
+          "border-r",
+          "border-border",
+          {
+            "px-3": open,
+            "px-1": !open,
+          }
+        )}
+      >
+        {defaultMenuItems.map((item) => (
+          <SidebarItemLink
+            key={item.key}
+            item={item}
+            label={t(item.labelKey)}
+            isSelected={pathname === item.route || (item.route === "/" && pathname === "/")}
+          />
+        ))}
+      </ShadcnSidebarContent>
+    </ShadcnSidebar>
+  )
+}
+
+type SidebarItemLinkProps = {
+  item: SidebarMenuItem
+  label: string
+  isSelected: boolean
+}
+
+function SidebarItemLink({ item, label, isSelected }: SidebarItemLinkProps) {
+  const icon = item.icon ?? <LayoutDashboard className="h-4 w-4" />
+
+  return (
+    <Button
+      asChild
+      variant="ghost"
+      size="lg"
+      className={cn(
+        "flex w-full items-center justify-start gap-2 py-2 !px-3 text-sm",
+        {
+          "bg-sidebar-primary": isSelected,
+          "hover:!bg-sidebar-primary/90": isSelected,
+          "text-sidebar-primary-foreground": isSelected,
+          "hover:text-sidebar-primary-foreground": isSelected,
+        }
+      )}
+    >
+      <Link to={item.route} className={cn("flex w-full items-center gap-2")}>
+        <div
+          className={cn("w-4", {
+            "text-muted-foreground": !isSelected,
+            "text-sidebar-primary-foreground": isSelected,
+          })}
+        >
+          {icon}
+        </div>
+        <span
+          className={cn(
+            "tracking-[-0.00875rem]",
+            "flex-1",
+            "text-left",
+            "line-clamp-1",
+            "truncate",
+            {
+              "font-normal": !isSelected,
+              "font-semibold": isSelected,
+              "text-sidebar-primary-foreground": isSelected,
+              "text-foreground": !isSelected,
+            }
+          )}
+        >
+          {label}
+        </span>
+      </Link>
+    </Button>
+  )
+}
+
+function SidebarHeader() {
+  const { title } = useAppConfig()
+  const { open, isMobile } = useShadcnSidebar()
+
+  return (
+    <ShadcnSidebarHeader
+      className={cn(
+        "p-0",
+        "h-16",
+        "border-b",
+        "border-border",
+        "flex-row",
+        "items-center",
+        "justify-between",
+        "overflow-hidden"
+      )}
+    >
+      <div
+        className={cn(
+          "whitespace-nowrap",
+          "flex",
+          "flex-row",
+          "h-full",
+          "items-center",
+          "justify-start",
+          "gap-2",
+          "transition-discrete",
+          "duration-200",
+          {
+            "pl-3": !open,
+            "pl-5": open,
+          }
+        )}
+      >
+        <div>{title.icon}</div>
+        <h2
+          className={cn(
+            "text-sm",
+            "font-bold",
+            "transition-opacity",
+            "duration-200",
+            {
+              "opacity-0": !open,
+              "opacity-100": open,
+            }
+          )}
+        >
+          {title.text}
+        </h2>
+      </div>
+
+      <ShadcnSidebarTrigger
+        className={cn("text-muted-foreground", "mr-1.5", {
+          "opacity-0": !open,
+          "opacity-100": open || isMobile,
+          "pointer-events-auto": open || isMobile,
+          "pointer-events-none": !open && !isMobile,
+        })}
+      />
+    </ShadcnSidebarHeader>
+  )
+}
+
+Sidebar.displayName = "Sidebar"

package/templates/scaffold-default/packages/admin/src/components/admin-ui/layout/user-avatar.tsx

@@ -0,0 +1,31 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+export function UserAvatar() {
+  const { t } = useTranslation();
+  const user = {
+    fullName: t("user.defaultName"),
+    avatar: undefined as string | undefined,
+  };
+  const { fullName, avatar } = user;
+
+  return (
+    <Avatar className={cn("h-10", "w-10")}>
+      {avatar && <AvatarImage src={avatar} alt={fullName} />}
+      <AvatarFallback>{getInitials(fullName)}</AvatarFallback>
+    </Avatar>
+  );
+}
+
+const getInitials = (name = "") => {
+  const names = name.split(" ");
+  let initials = names[0].substring(0, 1).toUpperCase();
+
+  if (names.length > 1) {
+    initials += names[names.length - 1].substring(0, 1).toUpperCase();
+  }
+  return initials;
+};
+
+UserAvatar.displayName = "UserAvatar";