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

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

@@ -0,0 +1,292 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+
+export interface EditableTableColumn<T> {
+  key: string;
+  title: string | ReactNode;
+  width?: string | number;
+  align?: "left" | "center" | "right";
+  required?: boolean;
+  render: (record: T, index: number) => ReactNode;
+}
+
+export interface EditableTableProps<T> {
+  columns: EditableTableColumn<T>[];
+  dataSource: T[];
+  rowKey: keyof T | ((record: T) => string);
+  header?: { title: string; subtitle?: string; actions?: ReactNode };
+  footer?: ReactNode;
+  emptyText?: string;
+  minWidth?: number;
+  className?: string;
+  showIndex?: boolean;
+  embedded?: boolean;
+}
+
+export function EditableTable<T>({
+  columns,
+  dataSource,
+  rowKey,
+  header,
+  footer,
+  emptyText = "暂无数据",
+  minWidth = 900,
+  className,
+  showIndex = true,
+  embedded = false,
+}: EditableTableProps<T>) {
+  const getRowKey = (record: T, index: number): string => {
+    if (typeof rowKey === "function") return rowKey(record);
+    return String(record[rowKey] ?? index);
+  };
+
+  return (
+    <div
+      className={cn(
+        "overflow-hidden",
+        !embedded && "rounded-xl border border-border bg-card shadow-sm",
+        embedded && "-mx-6 -mb-6 -mt-6",
+        className
+      )}
+    >
+      {header && (
+        <div className="flex items-center justify-between border-b border-border bg-muted/30 px-6 py-4">
+          <div>
+            <h2 className="font-semibold">{header.title}</h2>
+            {header.subtitle && (
+              <p className="mt-0.5 text-xs text-muted-foreground">{header.subtitle}</p>
+            )}
+          </div>
+          {header.actions && <div className="flex items-center gap-2">{header.actions}</div>}
+        </div>
+      )}
+      <div className="overflow-x-auto">
+        <Table style={{ minWidth }}>
+          <TableHeader>
+            <TableRow>
+              {showIndex && (
+                <TableHead className="w-10 px-3 py-3 text-left text-xs font-semibold">#</TableHead>
+              )}
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  className={cn(
+                    "px-3 py-3 text-xs font-semibold",
+                    col.align === "center" && "text-center",
+                    col.align === "right" && "text-right"
+                  )}
+                  style={{ width: col.width }}
+                >
+                  {col.title}
+                  {col.required && <span className="ml-0.5 text-destructive">*</span>}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {dataSource.length > 0 ? (
+              dataSource.map((record, index) => (
+                <TableRow key={getRowKey(record, index)}>
+                  {showIndex && (
+                    <TableCell className="px-3 py-2 text-sm text-muted-foreground">
+                      {index + 1}
+                    </TableCell>
+                  )}
+                  {columns.map((col) => (
+                    <TableCell
+                      key={col.key}
+                      className={cn(
+                        "px-3 py-2",
+                        col.align === "center" && "text-center",
+                        col.align === "right" && "text-right"
+                      )}
+                    >
+                      {col.render(record, index)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length + (showIndex ? 1 : 0)}
+                  className="px-3 py-12 text-center text-muted-foreground"
+                >
+                  {emptyText}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+          {footer && dataSource.length > 0 && <tfoot>{footer}</tfoot>}
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+export function TableInput({
+  type = "text",
+  value,
+  onChange,
+  readOnly,
+  placeholder,
+  className,
+  align = "left",
+  ...props
+}: {
+  type?: "text" | "number" | "date";
+  value: string | number;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  className?: string;
+  align?: "left" | "center" | "right";
+  min?: number;
+  max?: number;
+}) {
+  return (
+    <Input
+      type={type}
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      className={cn(
+        "h-9",
+        readOnly && "bg-muted text-muted-foreground",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Sentinel for placeholder option; Radix Select forbids SelectItem value="". */
+const PLACEHOLDER_VALUE = "__select_placeholder__";
+
+export function TableSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  className,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{ value: string; label: string }>;
+  placeholder?: string;
+  className?: string;
+}) {
+  const items = placeholder
+    ? [{ value: PLACEHOLDER_VALUE, label: placeholder }, ...options]
+    : options;
+  const selectValue = value || (placeholder ? PLACEHOLDER_VALUE : undefined);
+  return (
+    <Select
+      value={selectValue}
+      onValueChange={(v) => onChange(v === PLACEHOLDER_VALUE ? "" : v)}
+    >
+      <SelectTrigger className={cn("h-9", className)}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export function TableText({
+  children,
+  className,
+  variant = "default",
+}: {
+  children: ReactNode;
+  className?: string;
+  variant?: "default" | "muted" | "mono" | "bold" | "primary";
+}) {
+  const variantStyles = {
+    default: "text-sm",
+    muted: "text-sm text-muted-foreground",
+    mono: "font-mono text-xs text-muted-foreground",
+    bold: "text-sm font-medium",
+    primary: "text-sm font-semibold text-primary",
+  };
+  return <span className={cn(variantStyles[variant], className)}>{children}</span>;
+}
+
+export function TableDeleteButton({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className={cn(
+        "size-8",
+        !disabled && "text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Trash2 className="size-4" />
+    </Button>
+  );
+}
+
+export function TableFooterRow({
+  label,
+  value,
+  colSpan,
+  valueColSpan = 1,
+  tailColSpan = 0,
+}: {
+  label: string;
+  value: ReactNode;
+  colSpan: number;
+  valueColSpan?: number;
+  tailColSpan?: number;
+}) {
+  return (
+    <TableRow className="bg-muted/50 border-t border-border">
+      <TableCell colSpan={colSpan} className="px-3 py-3 text-right text-sm font-medium">
+        {label}
+      </TableCell>
+      <TableCell colSpan={valueColSpan} className="px-3 py-3 text-right">
+        {value}
+      </TableCell>
+      {tailColSpan > 0 && <TableCell colSpan={tailColSpan} />}
+    </TableRow>
+  );
+}

package/templates/scaffold-default/packages/admin/src/components/admin-ui/form/input-password.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+type InputPasswordProps = React.ComponentProps<"input">;
+
+export const InputPassword = ({ className, ...props }: InputPasswordProps) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className={cn("relative")}>
+      <Input
+        type={showPassword ? "text" : "password"}
+        className={cn(className)}
+        {...props}
+      />
+      <button
+        type="button"
+        className={cn(
+          "appearance-none",
+          "absolute right-3 top-1/2 -translate-y-1/2"
+        )}
+        onClick={() => setShowPassword(!showPassword)}
+      >
+        {showPassword ? (
+          <EyeOff size={18} className={cn("text-gray-500")} />
+        ) : (
+          <Eye size={18} className={cn("text-gray-500")} />
+        )}
+      </button>
+    </div>
+  );
+};
+
+InputPassword.displayName = "InputPassword";

package/templates/scaffold-default/packages/admin/src/components/admin-ui/form/sign-in-form.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import { useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { InputPassword } from "@/components/admin-ui/form/input-password"
+import { cn } from "@/lib/utils"
+import { useNavigate } from "react-router"
+import { appAuth } from "@scaffold/core"
+
+export const SignInForm = () => {
+  const [account, setAccount] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const navigate = useNavigate()
+
+  const handleSignIn: React.ComponentProps<"form">["onSubmit"] = async (e) => {
+    e.preventDefault()
+    setError(null)
+    const result = await appAuth.login({ account, password })
+    if (result.success) {
+      navigate(result.redirectTo ?? "/", { replace: true })
+    } else {
+      setError(result.error?.message ?? "Login failed")
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        "flex-col",
+        "items-center",
+        "justify-center",
+        "px-6",
+        "py-8",
+        "min-h-svh"
+      )}
+    >
+      <Card className={cn("sm:w-[456px]", "p-12", "mt-6")}>
+        <CardHeader className={cn("px-0")}>
+          <CardTitle
+            className={cn(
+              "text-blue-600",
+              "dark:text-blue-400",
+              "text-3xl",
+              "font-semibold"
+            )}
+          >
+            Sign in
+          </CardTitle>
+          <CardDescription
+            className={cn("text-muted-foreground", "font-medium")}
+          >
+            Welcome back
+          </CardDescription>
+        </CardHeader>
+
+        <Separator />
+
+        <CardContent className={cn("px-0")}>
+          <form onSubmit={handleSignIn}>
+            <div className={cn("flex", "flex-col", "gap-2")}>
+              <Label htmlFor="account">Account</Label>
+              <Input
+                id="account"
+                placeholder=""
+                required
+                value={account}
+                onChange={(e) => setAccount(e.target.value)}
+              />
+            </div>
+            <div
+              className={cn("relative", "flex", "flex-col", "gap-2", "mt-6")}
+            >
+              <Label htmlFor="password">Password</Label>
+              <InputPassword
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+
+            {error ? (
+              <p
+                role="alert"
+                className={cn(
+                  "mt-4", "text-sm", "text-destructive", "font-medium"
+                )}
+              >
+                {error}
+              </p>
+            ) : null}
+
+            <Button type="submit" size="lg" className={cn("w-full", "mt-6")}>
+              Sign in
+            </Button>
+
+
+
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+SignInForm.displayName = "SignInForm"

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

@@ -0,0 +1,71 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useNavigate } from "react-router";
+import { ChevronLeft } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export function ErrorComponent() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        "items-center",
+        "justify-center",
+        "bg-background",
+        "my-auto"
+      )}
+    >
+      <div className={cn("text-center", "space-y-8")}>
+        <div className={cn("flex", "justify-center")}>
+          <svg
+            width="199"
+            height="73"
+            viewBox="0 0 199 73"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={cn("w-48", "h-auto")}
+          >
+            <title>404</title>
+            <path
+              d="M0.293794 60.0909V45.3636L25.112 1.18182H43.2483L18.9756 44.8182V45.3636H60.4302V60.0909H0.293794ZM34.2483 71V55.7273L34.9302 49.1818V27.3636H51.9756V71H34.2483ZM98.983 72.9091C92.642 72.8864 87.1648 71.4205 82.5511 68.5114C77.9375 65.6023 74.3807 61.4091 71.8807 55.9318C69.3807 50.4545 68.142 43.8864 68.1648 36.2273C68.1875 28.5455 69.4375 22.0227 71.9148 16.6591C74.4148 11.2955 77.9602 7.21591 82.5511 4.42045C87.1648 1.625 92.642 0.22727 98.983 0.22727C105.324 0.22727 110.801 1.63636 115.415 4.45455C120.028 7.25 123.585 11.3295 126.085 16.6932C128.585 22.0568 129.824 28.5682 129.801 36.2273C129.801 43.9318 128.551 50.5227 126.051 56C123.551 61.4773 119.994 65.6705 115.381 68.5795C110.79 71.4659 105.324 72.9091 98.983 72.9091ZM98.983 57.5C102.256 57.5 104.938 55.7955 107.028 52.3864C109.142 48.9545 110.188 43.5682 110.165 36.2273C110.165 31.4318 109.688 27.5114 108.733 24.4659C107.778 21.4205 106.46 19.1705 104.778 17.7159C103.097 16.2386 101.165 15.5 98.983 15.5C95.7102 15.5 93.0398 17.1591 90.9716 20.4773C88.9034 23.7955 87.8466 29.0455 87.8011 36.2273C87.7784 41.1136 88.2443 45.1364 89.1989 48.2955C90.1534 51.4318 91.4716 53.75 93.1534 55.25C94.858 56.75 96.8011 57.5 98.983 57.5ZM138.209 60.0909V45.3636L163.027 1.18182H181.164L156.891 44.8182V45.3636H198.345V60.0909H138.209ZM172.164 71V55.7273L172.845 49.1818V27.3636H189.891V71H172.164Z"
+              fill="url(#paint0_linear_2672_10455)"
+            />
+            <defs>
+              <linearGradient
+                id="paint0_linear_2672_10455"
+                x1="99"
+                y1="-16"
+                x2="99"
+                y2="88"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop stopColor="#D4D4D8" />
+                <stop offset="1" stopColor="#E4E4E7" stopOpacity="0.25" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <div className={cn("space-y-4")}>
+          <h1 className={cn("text-2xl", "font-semibold", "text-foreground")}>
+            {t("error.title")}
+          </h1>
+          <p className={cn("text-muted-foreground")}>{t("error.description")}</p>
+        </div>
+
+        <Button
+          onClick={() => navigate("/")}
+          className={cn("flex", "items-center", "gap-2", "mx-auto")}
+        >
+          <ChevronLeft className={cn("h-4", "w-4")} />
+          {t("error.backHome")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ErrorComponent.displayName = "ErrorComponent";

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

@@ -0,0 +1,162 @@
+import { useAppConfig } from "@/providers/app-config"
+import { useNavigate } from "react-router"
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+} from "@/components/ui/dropdown-menu"
+import { DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { ThemeToggle } from "@/components/admin-ui/theme/theme-toggle"
+import { LanguageSwitcher } from "@/components/admin-ui/layout/language-switcher"
+import { UserAvatar } from "@/components/admin-ui/layout/user-avatar"
+import { useSidebar, SidebarTrigger } from "@/components/ui/sidebar"
+import { LogOutIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { useTranslation } from "react-i18next"
+import { appAuth } from "@scaffold/core"
+import { LOGIN_URL } from "@/app.config"
+import { toast } from "sonner"
+
+export const Header = () => {
+  const { isMobile } = useSidebar()
+
+  return <>{isMobile ? <MobileHeader /> : <DesktopHeader />}</>
+}
+
+function DesktopHeader() {
+  return (
+    <header
+      className={cn(
+        "sticky",
+        "top-0",
+        "flex",
+        "h-16",
+        "shrink-0",
+        "items-center",
+        "gap-4",
+        "border-b",
+        "border-border",
+        "bg-sidebar",
+        "pr-3",
+        "justify-end",
+        "z-40"
+      )}
+    >
+      <LanguageSwitcher />
+      <ThemeToggle />
+      <UserDropdown />
+    </header>
+  )
+}
+
+function MobileHeader() {
+  const { open, isMobile } = useSidebar()
+  const { title } = useAppConfig()
+
+  return (
+    <header
+      className={cn(
+        "sticky",
+        "top-0",
+        "flex",
+        "h-12",
+        "shrink-0",
+        "items-center",
+        "gap-2",
+        "border-b",
+        "border-border",
+        "bg-sidebar",
+        "pr-3",
+        "justify-between",
+        "z-40"
+      )}
+    >
+      <SidebarTrigger
+        className={cn("text-muted-foreground", "rotate-180", "ml-1", {
+          "opacity-0": open,
+          "opacity-100": !open || isMobile,
+          "pointer-events-auto": !open || isMobile,
+          "pointer-events-none": open && !isMobile,
+        })}
+      />
+
+      <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>
+
+      <ThemeToggle className={cn("h-8", "w-8")} />
+    </header>
+  )
+}
+
+const UserDropdown = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const handleLogout = async () => {
+    try {
+      const result = await appAuth.logout()
+      if (result?.success) {
+        navigate(LOGIN_URL, { replace: true })
+      } else {
+        console.error("[Header] Logout failed without success flag.")
+        toast.error("Logout failed. Please try again.")
+      }
+    } catch (error) {
+      console.error("[Header] Logout error:", error)
+      toast.error("Logout failed. Please try again.")
+    }
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <UserAvatar />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={handleLogout}>
+          <LogOutIcon
+            className={cn("text-destructive", "hover:text-destructive")}
+          />
+          <span className={cn("text-destructive", "hover:text-destructive")}>
+            {t("header.logout")}
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+Header.displayName = "Header"
+MobileHeader.displayName = "MobileHeader"
+DesktopHeader.displayName = "DesktopHeader"