create-aiko 0.1.0

package/template/packages/admin/src/App.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react"
+import {
+  Navigate,
+  RouterProvider,
+  createBrowserRouter,
+  type RouteObject,
+} from "react-router"
+import { useTranslation } from "react-i18next"
+import { AppConfigProvider } from "./providers/app-config"
+
+import { ThemeProvider } from "./components/admin-ui/theme/theme-provider"
+import { Toaster } from "./components/admin-ui/notification/toaster"
+import { MenuLayout } from "./layouts/menu-layout"
+import { TileLayout } from "./layouts/tile-layout"
+import { HomePage } from "./pages/home-page"
+import { getModulesContext } from "./routes"
+import "./App.css"
+import { SignInForm } from "./components/admin-ui/form/sign-in-form"
+import { appAuth } from "@scaffold/core"
+import { AuthorizationProvider, setAppAuthorizationConfig } from "@scaffold/core"
+import { ErrorComponent } from "./components/admin-ui/layout/error-component"
+import { withSuspense } from "./routes/withSuspense"
+import { LOGIN_URL } from "./app.config"
+
+const LAYOUT_STORAGE_KEY = "admin-layout-mode"
+
+const defaultTitleIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+  </svg>
+)
+
+/** 登录页：根据 auth state 同步渲染，已登录则重定向到首页 */
+function LoginPageRoute() {
+  const result = appAuth.check()
+  if (result.isAuthenticated) {
+    return <Navigate to="/" replace />
+  }
+  return <SignInForm />
+}
+
+/** 根布局：负责 layoutMode 与基础布局切换（菜单 / Tile） */
+function RootLayout() {
+  const [layoutMode, setLayoutMode] = useState<"menu" | "tile">(() => {
+    const saved = localStorage.getItem(LAYOUT_STORAGE_KEY)
+    return (saved === "menu" || saved === "tile" ? saved : "tile") as "menu" | "tile"
+  })
+
+  useEffect(() => {
+    localStorage.setItem(LAYOUT_STORAGE_KEY, layoutMode)
+  }, [layoutMode])
+
+  const handleLayoutModeChange = (mode: "menu" | "tile") => {
+    setLayoutMode(mode)
+  }
+
+  const LayoutWrapper =
+    layoutMode === "menu" ? (
+      <MenuLayout onLayoutModeChange={handleLayoutModeChange} />
+    ) : (
+      <TileLayout onLayoutModeChange={handleLayoutModeChange} />
+    )
+
+  return (
+    <>
+      {LayoutWrapper}
+    </>
+  )
+}
+
+
+function AppShell() {
+  const { t } = useTranslation()
+  const { routes, middlewares } = getModulesContext()
+  const appRoutes: RouteObject[] = [
+    {
+      path: "/",
+      element: <RootLayout />,
+      children: [
+        { index: true, middleware: [middlewares[0]], element: <HomePage /> } as RouteObject,
+        ...(routes as RouteObject[]),
+        { path: "*", element: <ErrorComponent /> },
+      ],
+    },
+  ]
+
+  // When LOGIN_URL is an internal path (e.g. "/login"), we register a local login route.
+  // For external login URLs (e.g. SSO like "https://sso.example.com/login"), routing is handled outside this app.
+  const isExternalLogin = LOGIN_URL.startsWith("http")
+
+  if (!isExternalLogin) {
+    appRoutes.unshift({
+      path: LOGIN_URL,
+      element: withSuspense(LoginPageRoute),
+    })
+  }
+
+  const router = createBrowserRouter(appRoutes)
+  setAppAuthorizationConfig({
+    fallbackUrl: '/not-found',
+  })
+  return (
+    <ThemeProvider>
+      <AppConfigProvider
+        title={{ icon: defaultTitleIcon, text: t("common.appTitle") }}
+      >
+        <AuthorizationProvider>
+          <RouterProvider router={router} />
+        </AuthorizationProvider>
+        <Toaster />
+      </AppConfigProvider>
+    </ThemeProvider>
+  )
+}
+
+export default function App() {
+  return <AppShell />
+}

package/template/packages/admin/src/app.config.ts

@@ -0,0 +1,3 @@
+export const LOGIN_URL = import.meta.env.VITE_APP_LOGIN ?? "/login"
+
+export const USE_GUARD = import.meta.env.VITE_APP_USE_GUARD === "true"

package/template/packages/admin/src/components/admin-ui/approval-flow.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { CheckCircle2, Clock3, FileText, ShieldAlert, UserRound, XCircle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ProcessStepper, type ProcessStep } from "@/components/admin-ui/process-stepper";
+import { Timeline, type TimelineItem } from "@/components/admin-ui/timeline";
+
+export type ApprovalStepStatus =
+  | "approved"
+  | "current"
+  | "pending"
+  | "rejected"
+  | "returned"
+  | "skipped";
+
+export interface ApprovalStep {
+  id: string;
+  title: string;
+  assignee?: string;
+  time?: string;
+  comment?: string;
+  reason?: string;
+  status: ApprovalStepStatus;
+  icon?: ReactNode;
+}
+
+export interface ApprovalFlowProps {
+  title?: string;
+  description?: string;
+  steps: ApprovalStep[];
+  showStepper?: boolean;
+  className?: string;
+}
+
+function toProcessStatus(status: ApprovalStepStatus): ProcessStep["status"] {
+  switch (status) {
+    case "approved":
+      return "completed";
+    case "current":
+      return "current";
+    case "rejected":
+    case "returned":
+      return "error";
+    case "skipped":
+      return "skipped";
+    case "pending":
+    default:
+      return "pending";
+  }
+}
+
+function getApprovalMeta(status: ApprovalStepStatus) {
+  switch (status) {
+    case "approved":
+      return {
+        label: "已通过",
+        variant: "default" as const,
+        icon: <CheckCircle2 className="size-4" />,
+      };
+    case "current":
+      return {
+        label: "处理中",
+        variant: "secondary" as const,
+        icon: <Clock3 className="size-4" />,
+      };
+    case "rejected":
+      return {
+        label: "已驳回",
+        variant: "destructive" as const,
+        icon: <XCircle className="size-4" />,
+      };
+    case "returned":
+      return {
+        label: "已退回",
+        variant: "secondary" as const,
+        icon: <ShieldAlert className="size-4" />,
+      };
+    case "skipped":
+      return {
+        label: "已跳过",
+        variant: "outline" as const,
+        icon: <FileText className="size-4" />,
+      };
+    case "pending":
+    default:
+      return {
+        label: "待处理",
+        variant: "outline" as const,
+        icon: <Clock3 className="size-4" />,
+      };
+  }
+}
+
+function getSummary(steps: ApprovalStep[]) {
+  const current =
+    steps.find((step) => step.status === "current") ??
+    steps.find((step) => step.status === "rejected" || step.status === "returned") ??
+    steps[steps.length - 1];
+
+  const approvedCount = steps.filter((step) => step.status === "approved").length;
+
+  return {
+    current,
+    approvedCount,
+    totalCount: steps.length,
+  };
+}
+
+export function ApprovalFlow({
+  title = "审批流程",
+  description = "展示当前审批阶段、责任人和留痕记录。",
+  steps,
+  showStepper = true,
+  className,
+}: ApprovalFlowProps) {
+  if (steps.length === 0) return null;
+
+  const summary = getSummary(steps);
+  const currentMeta = getApprovalMeta(summary.current.status);
+
+  const processSteps: ProcessStep[] = steps.map((step) => ({
+    id: step.id,
+    title: step.title,
+    description: step.assignee,
+    meta: step.time,
+    badge: getApprovalMeta(step.status).label,
+    status: toProcessStatus(step.status),
+    icon: step.icon,
+  }));
+
+  const timelineItems: TimelineItem[] = steps.map((step) => {
+    const meta = getApprovalMeta(step.status);
+
+    return {
+      id: step.id,
+      title: step.title,
+      description: step.assignee,
+      timestamp: step.time,
+      status:
+        step.status === "approved"
+          ? "success"
+          : step.status === "current"
+            ? "current"
+            : step.status === "pending"
+              ? "muted"
+              : "danger",
+      badge: meta.label,
+      content:
+        step.comment || step.reason ? (
+          <div className="rounded-lg bg-muted/60 px-3 py-2 text-sm text-muted-foreground">
+            {step.comment && <p>{step.comment}</p>}
+            {step.reason && <p className={cn(step.comment && "mt-1")}>原因：{step.reason}</p>}
+          </div>
+        ) : undefined,
+      meta: step.assignee ? (
+        <span className="inline-flex items-center gap-1">
+          <UserRound className="size-3.5" />
+          {step.assignee}
+        </span>
+      ) : undefined,
+      icon: step.icon ?? meta.icon,
+    };
+  });
+
+  return (
+    <Card className={className}>
+      <CardHeader className="border-b">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <CardTitle>{title}</CardTitle>
+            <CardDescription className="mt-1">{description}</CardDescription>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant={currentMeta.variant}>{currentMeta.label}</Badge>
+            <Badge variant="outline">
+              {summary.approvedCount}/{summary.totalCount} 已完成
+            </Badge>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {showStepper && <ProcessStepper steps={processSteps} className="pt-1" />}
+        <div className="rounded-xl bg-muted/30 p-4">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <p className="text-xs text-muted-foreground">当前节点</p>
+              <p className="mt-1 text-sm font-medium">{summary.current.title}</p>
+            </div>
+            {summary.current.assignee && (
+              <div className="text-right">
+                <p className="text-xs text-muted-foreground">当前处理人</p>
+                <p className="mt-1 text-sm">{summary.current.assignee}</p>
+              </div>
+            )}
+          </div>
+        </div>
+        <Timeline items={timelineItems} dense />
+      </CardContent>
+    </Card>
+  );
+}

package/template/packages/admin/src/components/admin-ui/data-table/data-table-pagination.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type DataTablePaginationProps = {
+  currentPage: number;
+  pageCount: number;
+  setCurrentPage: (page: number) => void;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  total?: number;
+};
+
+export function DataTablePagination({
+  currentPage,
+  pageCount,
+  setCurrentPage,
+  pageSize,
+  setPageSize,
+  total,
+}: DataTablePaginationProps) {
+  const { t } = useTranslation();
+  const pageSizeOptions = useMemo(() => {
+    const baseOptions = [10, 20, 30, 40, 50];
+    const optionsSet = new Set(baseOptions);
+
+    if (!optionsSet.has(pageSize)) {
+      optionsSet.add(pageSize);
+    }
+
+    return Array.from(optionsSet).sort((a, b) => a - b);
+  }, [pageSize]);
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        "items-center",
+        "justify-between",
+        "flex-wrap",
+        "px-2",
+        "w-full",
+        "gap-2"
+      )}
+    >
+      <div
+        className={cn(
+          "flex-1",
+          "text-sm",
+          "text-muted-foreground",
+          "whitespace-nowrap"
+        )}
+      >
+        {typeof total === "number" ? `${total} ${t("dataTable.rows")}` : null}
+      </div>
+      <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
+        <div className={cn("flex", "items-center", "gap-2")}>
+          <span className={cn("text-sm", "font-medium")}>{t("dataTable.rowsPerPage")}</span>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(v) => setPageSize(Number(v))}
+          >
+            <SelectTrigger className={cn("h-8", "w-[70px]")}>
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
+          <div
+            className={cn(
+              "flex",
+              "items-center",
+              "justify-center",
+              "text-sm",
+              "font-medium"
+            )}
+          >
+            {t("dataTable.pageOf", { current: currentPage, total: pageCount })}
+          </div>
+          <div className={cn("flex", "items-center", "gap-2")}>
+            <Button
+              variant="outline"
+              className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+              aria-label={t("dataTable.goToFirstPage")}
+            >
+              <ChevronsLeft />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("h-8", "w-8", "p-0")}
+              onClick={() => setCurrentPage(currentPage - 1)}
+              disabled={currentPage === 1}
+              aria-label={t("dataTable.goToPreviousPage")}
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("h-8", "w-8", "p-0")}
+              onClick={() => setCurrentPage(currentPage + 1)}
+              disabled={currentPage === pageCount}
+              aria-label={t("dataTable.goToNextPage")}
+            >
+              <ChevronRight />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
+              onClick={() => setCurrentPage(pageCount)}
+              disabled={currentPage === pageCount}
+              aria-label={t("dataTable.goToLastPage")}
+            >
+              <ChevronsRight />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+DataTablePagination.displayName = "DataTablePagination";

package/template/packages/admin/src/components/admin-ui/data-table/data-table-sorter.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+export type DataTableSorterProps<TData> = {
+  column: Column<TData>;
+} & React.ComponentProps<typeof Button>;
+
+export function DataTableSorter<TData>({
+  column,
+  className,
+  ...props
+}: DataTableSorterProps<TData>) {
+  const { t } = useTranslation();
+  const id = column.id;
+  const title =
+    column.getIsSorted() === "desc"
+      ? t("dataTable.sortDesc", { id })
+      : column.getIsSorted() === "asc"
+      ? t("dataTable.sortAsc", { id })
+      : t("dataTable.sortBy", { id });
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => column.toggleSorting(undefined, true)}
+      title={title}
+      aria-label={title}
+      {...props}
+      className={cn("data-[state=open]:bg-accent", "w-5 h-5", className)}
+    >
+      {column.getIsSorted() === "desc" ? (
+        <ArrowDown className={cn("text-primary", "!w-3", "!h-3")} />
+      ) : column.getIsSorted() === "asc" ? (
+        <ArrowUp className={cn("text-primary", "!w-3", "!h-3")} />
+      ) : (
+        <ChevronsUpDown
+          className={cn("text-muted-foreground", "!w-3", "!h-3")}
+        />
+      )}
+    </Button>
+  );
+}
+
+DataTableSorter.displayName = "DataTableSorter";