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

package/templates/scaffold-default/packages/admin/src/layouts/menu-layout.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+import { useState, useEffect, useMemo } from "react"
+import { Link, useLocation, Outlet } from "react-router"
+import { Home, ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { ShellBar } from "@/components/admin-ui/layout/shell-bar"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  SidebarRail,
+  SidebarProvider,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { useMenuItems, type MenuItem } from "@/routes/menu"
+import { useAuthorizationChecker } from "@scaffold/core"
+import { USE_GUARD } from "@/app.config"
+
+export interface MenuLayoutProps {
+  onLayoutModeChange: (mode: "menu" | "tile") => void
+}
+
+const menuOptions = {
+  mainItem: {
+    id: "home",
+    label: "首页",
+    icon: <Home className="size-4 shrink-0" />,
+    path: "/",
+    group: "main",
+  },
+} as const
+
+function AppSidebarContent() {
+  const { menuItems } = useMenuItems(menuOptions)
+  const can = USE_GUARD ? useAuthorizationChecker() : () => true
+  const [expandedItems, setExpandedItems] = useState<string[]>([])
+  const location = useLocation()
+
+  const filteredMenuItems = useMemo(() => {
+    const filterItem = (item: MenuItem): MenuItem | null => {
+      if (item.useGuard === false) {
+        return item
+      }
+      if (item.path && !can(item.path)) {
+        return null
+      }
+      if (item.children?.length) {
+        const nextChildren = item.children
+          .map(filterItem)
+          .filter(Boolean) as MenuItem[]
+        if (nextChildren.length === 0 && !item.path) return null
+        return { ...item, children: nextChildren }
+      }
+      return item
+    }
+    return menuItems
+      .map(filterItem)
+      .filter(Boolean) as MenuItem[]
+  }, [menuItems, can])
+
+  const isActive = (path?: string) => {
+    if (!path) return false
+    if (path === "/") return location.pathname === "/"
+    return location.pathname === path || location.pathname.startsWith(path + "/")
+  }
+
+  const isParentActive = (item: MenuItem): boolean => {
+    if (item.path && isActive(item.path)) return true
+    if (item.children) return item.children.some((child: MenuItem) => isActive(child.path))
+    return false
+  }
+
+  // 根据当前路由自动展开父级菜单
+  useEffect(() => {
+    const pathname = location.pathname
+    const toExpand = filteredMenuItems
+      .filter((item: MenuItem) => {
+        if (!item.children?.length) return false
+        if (item.path && (pathname === item.path || pathname.startsWith(item.path + "/"))) return true
+        return item.children.some((c: MenuItem) => c.path && (pathname === c.path || pathname.startsWith(c.path + "/")))
+      })
+      .map((item: MenuItem) => item.id)
+    if (toExpand.length === 0) return
+    setExpandedItems((prev) => {
+      const next = new Set([...prev, ...toExpand])
+      return next.size === prev.length ? prev : [...next]
+    })
+  }, [location.pathname, filteredMenuItems])
+
+  const renderMenuItem = (item: MenuItem) => {
+    const hasChildren = item.children && item.children.length > 0
+    const isExpanded = expandedItems.includes(item.id)
+    const active = isActive(item.path)
+    const parentActive = isParentActive(item)
+
+    if (item.path && !hasChildren) {
+      return (
+        <SidebarMenuItem key={item.id}>
+          <SidebarMenuButton asChild isActive={active} tooltip={item.label}>
+            <Link to={item.path}>
+              {item.icon}
+              <span className="truncate">{item.label}</span>
+              {item.badge != null && (
+                <span className="ml-auto rounded bg-sidebar-primary px-1.5 py-0.5 text-[10px] font-medium text-sidebar-primary-foreground">
+                  {item.badge}
+                </span>
+              )}
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      )
+    }
+
+    return (
+      <SidebarMenuItem key={item.id}>
+        <Collapsible
+          open={isExpanded}
+          onOpenChange={(open) =>
+            setExpandedItems((prev) =>
+              open ? [...prev, item.id] : prev.filter((i) => i !== item.id)
+            )
+          }
+          className="group/collapsible"
+        >
+          <CollapsibleTrigger asChild>
+            <SidebarMenuButton isActive={parentActive} tooltip={item.label}>
+              {item.icon}
+              <span className="truncate">{item.label}</span>
+              <ChevronDown
+                className={cn(
+                  "ml-auto size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180"
+                )}
+              />
+            </SidebarMenuButton>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <SidebarMenuSub>
+              {item.children!.map((child: MenuItem) => (
+                <SidebarMenuSubItem key={child.id}>
+                  <SidebarMenuSubButton asChild isActive={isActive(child.path)}>
+                    <Link to={child.path || "#"}>{child.label}</Link>
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              ))}
+            </SidebarMenuSub>
+          </CollapsibleContent>
+        </Collapsible>
+      </SidebarMenuItem>
+    )
+  }
+
+
+  return (
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <SidebarMenu>{filteredMenuItems.map((item: MenuItem) => renderMenuItem(item))}</SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </SidebarContent>
+  )
+}
+
+function MenuLayoutContent({ onLayoutModeChange }: MenuLayoutProps) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <div className="w-full min-h-screen bg-muted/30">
+      <ShellBar
+        layoutMode="menu"
+        onLayoutModeChange={onLayoutModeChange}
+        onMenuToggle={toggleSidebar}
+      />
+      <div className="flex">
+        <Sidebar
+          collapsible="icon"
+          className="!top-14"
+        >
+          <SidebarHeader />
+          <AppSidebarContent />
+          <SidebarRail />
+        </Sidebar>
+        <main className="min-h-[calc(100vh-3.5rem)] overflow-x-hidden flex-1 p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export function MenuLayout(props: MenuLayoutProps) {
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <MenuLayoutContent {...props} />
+    </SidebarProvider>
+  )
+}

package/templates/scaffold-default/packages/admin/src/layouts/tile-layout.tsx

@@ -0,0 +1,355 @@
+"use client"
+
+import { useState, useMemo } from "react"
+import { useNavigate, Outlet, useLocation } from "react-router"
+import {
+  Home,
+  ShoppingCart,
+  FileText,
+  Package,
+  Truck,
+  Database,
+  Settings,
+  BarChart3,
+  Star,
+  Clock,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import { ShellBar } from "@/components/admin-ui/layout/shell-bar"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export interface AppTile {
+  id: string
+  title: string
+  subtitle?: string
+  description?: string
+  icon: React.ReactNode
+  iconBg: string
+  iconColor: string
+  path: string
+  category: string
+  badge?: { label: string; type: "new" | "attention" }
+}
+
+const appTiles: AppTile[] = [
+  {
+    id: "pr-create",
+    title: "创建采购申请",
+    subtitle: "发起新的采购需求",
+    description: "创建标准采购申请，支持物料和服务采购",
+    icon: <FileText className="size-6" />,
+    iconBg: "hsl(var(--primary))",
+    iconColor: "hsl(var(--primary-foreground))",
+    path: "/purchase-requisition-/create",
+    category: "MM-采购",
+    // badge: { label: "新", type: "new" },
+  },
+  {
+    id: "pr-list",
+    title: "管理采购申请",
+    subtitle: "F1643 - 采购申请管理",
+    description: "查看、编辑和管理所有采购申请",
+    icon: <ShoppingCart className="size-6" />,
+    iconBg: "hsl(var(--primary))",
+    iconColor: "hsl(var(--primary-foreground))",
+    path: "/purchase-requisitions",
+    category: "MM-采购",
+    // badge: { label: "核心", type: "attention" },
+  },
+  {
+    id: "po-list",
+    title: "采购订单",
+    subtitle: "ME21N - 采购订单管理",
+    description: "查看和管理采购订单",
+    icon: <Package className="size-6" />,
+    iconBg: "hsl(var(--chart-2))",
+    iconColor: "hsl(var(--primary-foreground))",
+    path: "/purchase-orders",
+    category: "MM-采购",
+  },
+  {
+    id: "gr-list",
+    title: "收货管理",
+    subtitle: "MIGO - 货物移动",
+    description: "处理货物接收和库存移动",
+    icon: <Truck className="size-6" />,
+    iconBg: "hsl(var(--chart-3))",
+    iconColor: "hsl(var(--primary-foreground))",
+    path: "/goods-receipt",
+    category: "MM-采购",
+  },
+  {
+    id: "materials",
+    title: "物料主数据",
+    subtitle: "F2018 - 物料管理",
+    description: "管理物料基本信息",
+    icon: <Database className="size-6" />,
+    iconBg: "hsl(var(--chart-4))",
+    iconColor: "hsl(var(--primary-foreground))",
+    path: "/master-data/materials",
+    category: "主数据",
+  },
+  {
+    id: "vendors",
+    title: "供应商管理",
+    subtitle: "F0002 - 供应商",
+    description: "管理供应商信息",
+    icon: <Database className="size-6" />,
+    iconBg: "hsl(var(--chart-5))",
+    iconColor: "hsl(var(--primary-foreground))",
+    path: "/master-data/vendors",
+    category: "主数据",
+  },
+  {
+    id: "reports",
+    title: "报表分析",
+    subtitle: "数据分析和报表",
+    description: "查看各类业务报表",
+    icon: <BarChart3 className="size-6" />,
+    iconBg: "hsl(var(--chart-1))",
+    iconColor: "hsl(var(--primary-foreground))",
+    path: "/reports/purchase-requisitions",
+    category: "报表分析",
+  },
+  {
+    id: "settings",
+    title: "系统设置",
+    subtitle: "配置和管理",
+    description: "系统配置和用户管理",
+    icon: <Settings className="size-6" />,
+    iconBg: "hsl(var(--muted))",
+    iconColor: "hsl(var(--muted-foreground))",
+    path: "/settings",
+    category: "系统管理",
+  },
+]
+
+const categoryConfig: Record<
+  string,
+  { icon: React.ReactNode; color: string; bg: string }
+> = {
+  "MM-采购": {
+    icon: <ShoppingCart className="size-5" />,
+    color: "hsl(var(--primary))",
+    bg: "hsl(var(--primary) / 0.15)",
+  },
+  主数据: {
+    icon: <Database className="size-5" />,
+    color: "hsl(var(--chart-5))",
+    bg: "hsl(var(--chart-5) / 0.15)",
+  },
+  报表分析: {
+    icon: <BarChart3 className="size-5" />,
+    color: "hsl(var(--chart-1))",
+    bg: "hsl(var(--chart-1) / 0.15)",
+  },
+  系统管理: {
+    icon: <Settings className="size-5" />,
+    color: "hsl(var(--muted-foreground))",
+    bg: "hsl(var(--muted))",
+  },
+}
+
+export interface TileLayoutProps {
+  onLayoutModeChange: (mode: "menu" | "tile") => void
+}
+
+export function TileLayout({ onLayoutModeChange }: TileLayoutProps) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [favorites, setFavorites] = useState<string[]>(["pr-create", "pr-list"])
+  const [searchQuery,] = useState("")
+  const [activeTab, setActiveTab] = useState<"favorites" | "recent" | "all">("all")
+
+  const isHome = location.pathname === "/"
+
+  const tilesByCategory = useMemo(() => {
+    const filtered = searchQuery
+      ? appTiles.filter(
+        (t) =>
+          t.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          t.subtitle?.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+      : appTiles
+    const categories = new Map<string, AppTile[]>()
+    filtered.forEach((tile) => {
+      const cat = tile.category
+      if (!categories.has(cat)) categories.set(cat, [])
+      categories.get(cat)!.push(tile)
+    })
+    return Array.from(categories.entries())
+  }, [searchQuery])
+
+  const favoriteApps = appTiles.filter((t) => favorites.includes(t.id))
+
+  const toggleFavorite = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    setFavorites((prev) =>
+      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
+    )
+  }
+
+  const renderTile = (tile: AppTile) => (
+    <Card
+      key={tile.id}
+      className="relative flex cursor-pointer flex-col rounded-xl p-4 transition-shadow hover:shadow-md"
+      onClick={() => navigate(tile.path)}
+    >
+      <div
+        className="absolute right-0 top-0 size-20 rounded-tr-xl opacity-60"
+        style={{
+          background: `linear-gradient(135deg, transparent 50%, ${tile.iconBg} 50%)`,
+        }}
+      />
+      {tile.badge && (
+        <span
+          className={cn(
+            "absolute right-2 top-2 rounded px-1.5 py-0.5 text-[10px] font-medium",
+            tile.badge.type === "new"
+              ? "bg-primary text-primary-foreground"
+              : "bg-amber-500 text-white"
+          )}
+        >
+          {tile.badge.label}
+        </span>
+      )}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="absolute right-2 top-2 size-8"
+        onClick={(e: React.MouseEvent) => toggleFavorite(e, tile.id)}
+      >
+        <Star
+          className="size-4"
+          fill={favorites.includes(tile.id) ? "currentColor" : "none"}
+        />
+      </Button>
+      <div
+        className="mb-4 flex size-12 items-center justify-center rounded-lg"
+        style={{ backgroundColor: tile.iconBg, color: tile.iconColor }}
+      >
+        {tile.icon}
+      </div>
+      <h3 className="mb-1 pr-6 text-sm font-semibold">{tile.title}</h3>
+      <p className="mb-2 text-xs text-muted-foreground">{tile.subtitle}</p>
+      {tile.description && (
+        <p className="line-clamp-2 text-xs text-muted-foreground/80">
+          {tile.description}
+        </p>
+      )}
+    </Card>
+  )
+
+  if (!isHome) {
+    return (
+      <div className="min-h-screen bg-background">
+        <ShellBar
+          layoutMode="tile"
+          onLayoutModeChange={onLayoutModeChange}
+          showBackButton
+          onBack={() => navigate("/")}
+        />
+        <main className="p-6">
+          <Outlet />
+        </main>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <ShellBar layoutMode="tile" onLayoutModeChange={onLayoutModeChange} />
+      <main className="mx-auto max-w-7xl px-6 py-6">
+        <div className="relative mb-6 overflow-hidden rounded-2xl bg-primary p-8 text-primary-foreground">
+          <div className="absolute right-12 top-1/2 size-48 -translate-y-1/2 rounded-full bg-white/10" />
+          <div className="relative z-10">
+            <h1 className="mb-2 text-2xl font-semibold">欢迎使用 AI-First 门户</h1>
+            <p className="mb-4 text-base text-primary-foreground/85">
+              企业级应用统一入口 - 现代化、智能化、标准化
+            </p>
+            <div className="flex gap-3">
+              <span className="rounded-full bg-white/20 px-3 py-1.5 text-sm backdrop-blur">
+                {favoriteApps.length} 个收藏
+              </span>
+              <span className="rounded-full bg-white/20 px-3 py-1.5 text-sm backdrop-blur">
+                {appTiles.length} 个应用
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as typeof activeTab)} className="mb-6">
+          <TabsList className="w-full justify-start rounded-xl border-b bg-transparent p-0">
+            <TabsTrigger value="favorites" className="gap-2 rounded-b-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent">
+              <Star className="size-4" />
+              收藏夹
+              <span className="rounded bg-amber-500 px-1.5 py-0.5 text-xs text-white">
+                {favoriteApps.length}
+              </span>
+            </TabsTrigger>
+            <TabsTrigger value="recent" className="gap-2 rounded-b-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent">
+              <Clock className="size-4" />
+              最近使用
+            </TabsTrigger>
+            <TabsTrigger value="all" className="gap-2 rounded-b-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent">
+              <Home className="size-4" />
+              所有应用
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        {activeTab === "favorites" && (
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {favoriteApps.length > 0 ? (
+              favoriteApps.map((tile) => renderTile(tile))
+            ) : (
+              <div className="col-span-full py-16 text-center text-muted-foreground">
+                <Star className="mx-auto mb-4 size-12 text-muted-foreground/50" />
+                <p>您还没有收藏任何应用</p>
+                <p className="mt-1 text-sm">点击磁贴上的星标图标添加收藏</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {activeTab === "recent" && (
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {appTiles.slice(0, 6).map((tile) => renderTile(tile))}
+          </div>
+        )}
+
+        {activeTab === "all" && (
+          <div className="space-y-8">
+            {tilesByCategory.map(([category, tiles]) => {
+              const config = categoryConfig[category]
+              return (
+                <div key={category}>
+                  <div className="mb-4 flex items-center gap-3">
+                    <div
+                      className="flex size-10 items-center justify-center rounded-lg"
+                      style={{
+                        backgroundColor: config?.bg ?? "hsl(var(--muted))",
+                        color: config?.color ?? "hsl(var(--muted-foreground))",
+                      }}
+                    >
+                      {config?.icon ?? <Home className="size-5" />}
+                    </div>
+                    <div>
+                      <h2 className="font-semibold">{category}</h2>
+                      <p className="text-sm text-muted-foreground">{tiles.length} 个应用</p>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                    {tiles.map((tile) => renderTile(tile))}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/templates/scaffold-default/packages/admin/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/scaffold-default/packages/admin/src/locales/en.json

@@ -0,0 +1,68 @@
+{
+  "common": {
+    "appTitle": "Admin",
+    "language": "Language",
+    "en": "English",
+    "zh": "中文"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "welcome": "Welcome. You can add your own pages and data here."
+  },
+  "error": {
+    "title": "Page not found.",
+    "description": "The page you're looking for does not exist.",
+    "backHome": "Back to homepage"
+  },
+  "auth": {
+    "login": "Sign in",
+    "loginTitle": "Sign in to Admin",
+    "email": "Email",
+    "password": "Password",
+    "submit": "Sign in",
+    "invalidCredentials": "Invalid email or password"
+  },
+  "header": {
+    "logout": "Logout"
+  },
+  "sidebar": {
+    "menu": {
+      "dashboard": "Dashboard"
+    }
+  },
+  "theme": {
+    "toggleLabel": "Toggle theme (Light → Dark → System)",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System",
+    "appearance": "Appearance",
+    "paletteLabel": "Color",
+    "palette": {
+      "default": "Default",
+      "blue": "Blue",
+      "green": "Green",
+      "violet": "Violet",
+      "rose": "Rose",
+      "amber": "Amber",
+      "fiori": "Fiori"
+    }
+  },
+  "notification": {
+    "undo": "Undo"
+  },
+  "user": {
+    "defaultName": "User"
+  },
+  "dataTable": {
+    "rows": "row(s)",
+    "rowsPerPage": "Rows per page",
+    "pageOf": "Page {{current}} of {{total}}",
+    "goToFirstPage": "Go to first page",
+    "goToPreviousPage": "Go to previous page",
+    "goToNextPage": "Go to next page",
+    "goToLastPage": "Go to last page",
+    "sortBy": "Sort by {{id}}",
+    "sortDesc": "Sort by {{id}} as descending",
+    "sortAsc": "Sort by {{id}} as ascending"
+  }
+}