@lark-apaas/coding-templates 0.1.0

package/template-nextjs-fullstack/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "mclaw": {
+    "stack": "nextjs",
+    "stackVersion": "0.1.0"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "bash scripts/build.sh",
+    "start": "next start",
+    "lint": "eslint src",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "drizzle-orm": "^0.45.1",
+    "embla-carousel-react": "^8.6.0",
+    "es-toolkit": "^1.43.0",
+    "framer-motion": "^12.36.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.577.0",
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "postgres": "^3.4.8",
+    "react": "19.2.3",
+    "react-day-picker": "^9.11.1",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.65.0",
+    "react-resizable-panels": "^3.0.6",
+    "recharts": "^2.15.4",
+    "shadcn": "^4.0.8",
+    "sonner": "^2.0.7",
+    "streamdown": "^1.6.10",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "drizzle-kit": "^0.31.9",
+    "eslint": "^9",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "typescript-eslint": "^8"
+  }
+}

package/template-nextjs-fullstack/postcss.config.js

@@ -0,0 +1,8 @@
+/**
+ * @type {import('postcss-load-config').Config}
+ */
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/template-nextjs-fullstack/scripts/build.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+set -e
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+OUTPUT="$ROOT/dist/output"
+OUTPUT_RESOURCE="$ROOT/dist/output_resource"
+
+# 清理
+rm -rf "$ROOT/dist"
+
+# 1. Next.js 构建 → .next/
+npx next build
+
+# 2. standalone → dist/output/
+mkdir -p "$OUTPUT"
+cp -r "$ROOT/.next/standalone/." "$OUTPUT/"
+
+# 复制 public/ 到 standalone
+if [ -d "$ROOT/public" ]; then
+  cp -r "$ROOT/public" "$OUTPUT/public"
+fi
+
+# 3. static/ → dist/output_resource/（JS/CSS/字体，上传到 CDN）
+if [ -d "$ROOT/.next/static" ]; then
+  mkdir -p "$OUTPUT_RESOURCE/_next"
+  cp -r "$ROOT/.next/static" "$OUTPUT_RESOURCE/_next/"
+fi
+
+# 复制 .next/static 到 standalone
+if [ -d "$ROOT/.next/static" ]; then
+  mkdir -p "$OUTPUT/.next"
+  cp -r "$ROOT/.next/static" "$OUTPUT/.next/"
+fi
+
+echo "Build complete"
+echo "  Standalone → dist/output/"
+[ -d "$OUTPUT_RESOURCE" ] && echo "  Resource   → dist/output_resource/"

package/template-nextjs-fullstack/src/app/globals.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@config "../../tailwind.config.ts";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/template-nextjs-fullstack/src/app/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+
+const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "OpenClaw Fullstack",
+  description: "Next.js Fullstack Template with Drizzle + PostgreSQL",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="zh" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/template-nextjs-fullstack/src/app/page.tsx

@@ -0,0 +1,69 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Header } from "@/components/header";
+import { Database, Zap, Shield } from "lucide-react";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <main>
+        <section className="container mx-auto px-4 py-24 text-center">
+          <Badge variant="secondary" className="mb-4">Next.js Fullstack</Badge>
+          <h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-6">
+            全栈应用模版
+          </h1>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
+            基于 Next.js + Drizzle ORM + PostgreSQL 的全栈模版，Server Actions 驱动数据变更，为 AI 协作开发而生。
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Link href="/todos">
+              <Button size="lg">查看 Todos 示例</Button>
+            </Link>
+            <Button size="lg" variant="outline">了解更多</Button>
+          </div>
+        </section>
+
+        <section className="container mx-auto px-4 py-16">
+          <div className="grid gap-6 md:grid-cols-3">
+            <Card>
+              <CardHeader>
+                <Database className="h-10 w-10 mb-2 text-primary" />
+                <CardTitle>类型安全数据库</CardTitle>
+                <CardDescription>
+                  Drizzle ORM 提供端到端类型安全，schema 即代码，迁移自动生成。
+                </CardDescription>
+              </CardHeader>
+            </Card>
+            <Card>
+              <CardHeader>
+                <Zap className="h-10 w-10 mb-2 text-primary" />
+                <CardTitle>Server Actions</CardTitle>
+                <CardDescription>
+                  数据变更直接写在服务端函数里，无需手写 API 路由，AI 生成代码更高效。
+                </CardDescription>
+              </CardHeader>
+            </Card>
+            <Card>
+              <CardHeader>
+                <Shield className="h-10 w-10 mb-2 text-primary" />
+                <CardTitle>数据校验</CardTitle>
+                <CardDescription>
+                  Zod schema 校验贯穿前后端，类型安全从表单到数据库全链路保障。
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          </div>
+        </section>
+
+        <footer className="border-t py-8">
+          <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
+            OpenClaw Template — Built for Vibe Coding
+          </div>
+        </footer>
+      </main>
+    </div>
+  );
+}

package/template-nextjs-fullstack/src/app/todos/actions.ts

@@ -0,0 +1,37 @@
+"use server";
+
+import { db } from "@/db";
+import { todos } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const createTodoSchema = z.object({
+  title: z.string().min(1, "标题不能为空").max(200, "标题不能超过200字"),
+});
+
+export async function createTodo(formData: FormData) {
+  const parsed = createTodoSchema.safeParse({
+    title: formData.get("title"),
+  });
+
+  if (!parsed.success) {
+    return { error: parsed.error.flatten().fieldErrors.title?.[0] };
+  }
+
+  await db.insert(todos).values({ title: parsed.data.title });
+  revalidatePath("/todos");
+}
+
+export async function toggleTodo(id: number) {
+  const [todo] = await db.select().from(todos).where(eq(todos.id, id));
+  if (todo) {
+    await db.update(todos).set({ completed: !todo.completed }).where(eq(todos.id, id));
+  }
+  revalidatePath("/todos");
+}
+
+export async function deleteTodo(id: number) {
+  await db.delete(todos).where(eq(todos.id, id));
+  revalidatePath("/todos");
+}

package/template-nextjs-fullstack/src/app/todos/page.tsx

@@ -0,0 +1,26 @@
+import { db } from "@/db";
+import { todos } from "@/db/schema";
+import { desc } from "drizzle-orm";
+import { Header } from "@/components/header";
+import { TodoList } from "./todo-list";
+import { TodoForm } from "./todo-form";
+
+export const dynamic = "force-dynamic";
+
+export default async function TodosPage() {
+  const allTodos = await db.select().from(todos).orderBy(desc(todos.createdAt));
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <main className="container mx-auto px-4 py-8 max-w-2xl">
+        <h1 className="text-3xl font-bold mb-8">Todos 示例</h1>
+        <p className="text-muted-foreground mb-6">
+          完整的 CRUD 示例，使用 Server Actions + Drizzle ORM + PostgreSQL。
+        </p>
+        <TodoForm />
+        <TodoList todos={allTodos} />
+      </main>
+    </div>
+  );
+}

package/template-nextjs-fullstack/src/app/todos/todo-form.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createTodo } from "./actions";
+import { Plus } from "lucide-react";
+
+export function TodoForm() {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  return (
+    <form
+      ref={formRef}
+      action={async (formData) => {
+        await createTodo(formData);
+        formRef.current?.reset();
+      }}
+      className="flex gap-2 mb-6"
+    >
+      <Input name="title" placeholder="添加新的待办事项..." className="flex-1" />
+      <Button type="submit" size="icon">
+        <Plus className="h-4 w-4" />
+      </Button>
+    </form>
+  );
+}

package/template-nextjs-fullstack/src/app/todos/todo-list.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { toggleTodo, deleteTodo } from "./actions";
+import { Trash2, Check } from "lucide-react";
+import type { Todo } from "@/db/schema";
+
+export function TodoList({ todos }: { todos: Todo[] }) {
+  if (todos.length === 0) {
+    return (
+      <p className="text-center text-muted-foreground py-8">
+        还没有待办事项，添加一个吧！
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {todos.map((todo) => (
+        <Card key={todo.id}>
+          <CardContent className="flex items-center justify-between p-4">
+            <div className="flex items-center gap-3">
+              <Button
+                variant={todo.completed ? "default" : "outline"}
+                size="icon"
+                className="h-6 w-6 rounded-full"
+                onClick={() => toggleTodo(todo.id)}
+              >
+                {todo.completed && <Check className="h-3 w-3" />}
+              </Button>
+              <span className={todo.completed ? "line-through text-muted-foreground" : ""}>
+                {todo.title}
+              </span>
+            </div>
+            <Button variant="ghost" size="icon" onClick={() => deleteTodo(todo.id)}>
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/template-nextjs-fullstack/src/components/header.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export function Header() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-14 items-center justify-between mx-auto px-4">
+        <div className="flex items-center gap-6">
+          <Link href="/" className="font-semibold">OpenClaw</Link>
+          <nav className="flex items-center gap-4 text-sm">
+            <Link href="/todos" className="text-muted-foreground hover:text-foreground transition-colors">Todos 示例</Link>
+          </nav>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        >
+          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">切换主题</span>
+        </Button>
+      </div>
+    </header>
+  );
+}

package/template-nextjs-fullstack/src/components/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

package/template-nextjs-fullstack/src/components/ui/README.md

@@ -0,0 +1,134 @@
+# shadcn/ui 组件开发指南
+
+## 核心原则
+
+- 组件位置：`/client/src/components/ui/`
+- 图标库：必须使用 `lucide-react`，禁用 Emoji
+- 查阅源码实现：直接读取组件源码了解最新组件实现
+- 交互系统：Button、Badge 使用 elevate 遮罩系统处理 hover/active 状态（通过 `::after` 伪元素叠加 `--elevate-1` / `--elevate-2`）
+
+## 关键组件规范
+
+#### 1. Button 组件
+
+**导入路径**：`import { Button } from '@/components/ui/button'`
+
+**Props**：
+- `variant`: `"link" | "default" | "destructive" | "outline" | "secondary" | "ghost"` - 按钮样式变体
+
+```tsx
+// ✅ 使用变体
+<Button variant="secondary">标准按钮</Button>
+
+// ✅ 自定义颜色时必须配对前景色
+<Button className="bg-primary text-primary-foreground">自定义按钮</Button>
+```
+
+#### 2. Badge 组件
+
+**导入路径**：`import { Badge } from '@/components/ui/badge'`
+
+**Props**：
+- `variant`: `"default" | "destructive" | "outline" | "secondary"` - 样式变体
+
+```tsx
+// ✅ 使用变体
+<Badge>默认</Badge>
+<Badge variant="secondary">次要</Badge>
+<Badge variant="outline">边框</Badge>
+<Badge variant="destructive">危险</Badge>
+```
+
+#### 3. Alert 组件
+
+**导入路径**：`import { Alert, AlertTitle, AlertDescription, AlertAction } from '@/components/ui/alert'`
+
+**Props**：
+- `variant`: `"default" | "destructive" | "success" | "warning"` - 样式变体
+
+```tsx
+// ✅ default / destructive / success / warning 四种变体
+<Alert variant="success">
+  <CheckCircle className="size-4" />
+  <AlertTitle>操作成功</AlertTitle>
+  <AlertDescription>您的更改已保存</AlertDescription>
+</Alert>
+
+<Alert variant="warning">
+  <AlertTriangle className="size-4" />
+  <AlertTitle>警告</AlertTitle>
+  <AlertDescription>请注意检查</AlertDescription>
+</Alert>
+
+```
+
+#### 4. Empty 组件
+
+**导入路径**：`import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@/components/ui/empty'`
+
+**子组件 Props**：
+- `EmptyMedia` 组件的 `variant`: `"default" | "icon"` - 媒体展示方式
+
+```tsx
+// 标准结构：EmptyHeader 包含 EmptyMedia + EmptyTitle + EmptyDescription
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon">
+      <SearchIcon className="size-6" />
+    </EmptyMedia>
+    <EmptyTitle>暂无数据</EmptyTitle>
+    <EmptyDescription>当前没有找到相关内容</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>添加数据</Button>
+  </EmptyContent>
+</Empty>
+```
+
+#### 5. Card Padding 系统
+
+**导入路径**：`import { CardHeader, CardContent, CardFooter } from '@/components/ui/card'`
+
+- `CardHeader`: `p-6` (24px 全方向)
+- `CardContent`: `p-6 pt-0` (与 header 无缝衔接)
+- `CardFooter`: `p-6 pt-0` (与 content 无缝衔接)
+
+#### 6. Dialog 组件
+
+**导入路径**：`import { Dialog, DialogContent } from '@/components/ui/dialog'`
+
+Dialog 默认提供了右上角的close能力，同时也提供了自定义关闭按钮的能力，即通过设置showCloseButton为false来关闭默认的关闭按钮。所以当默认存在close时，禁止在内容区域提供自定义的关闭按钮。
+
+#### 7. Image 组件
+
+**导入路径**：`import { Image } from '@/components/ui/image'`
+
+**Props**：支持原生 `<img>` 标签所有属性。
+
+```typescript
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> 
+```
+
+**使用规范**：
+
+1. **响应式图片场景**：当图片尺寸需要根据视口宽度变化时，必须设置 `sizes` 属性
+2. **固定尺寸图片场景**：当图片有固定尺寸时，必须设置 `width` 属性（number 类型）
+3. **必须提供有意义的 `alt` 属性**
+
+```tsx
+// ✅ 响应式图片
+<Image
+  src="/path/to/image.jpg"
+  alt="描述文字"
+  sizes="(max-width: 768px) 100vw, 50vw"
+/>
+
+// ✅ 固定尺寸图片（width/height 使用 number）
+<Image
+  src="/path/to/image.jpg"
+  alt="描述文字"
+  width={300}
+  height={200}
+/>
+
+```