@lark-apaas/coding-templates 0.1.3 → 0.1.4

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

@@ -1,26 +0,0 @@
-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

@@ -1,27 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-"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

@@ -1,134 +0,0 @@
-# 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}
-/>
-
-```

package/template-nextjs-fullstack/src/components/ui/accordion.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/20 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none enabled:hover:underline focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/template-nextjs-fullstack/src/components/ui/alert-dialog.tsx

@@ -1,157 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-sm:max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/template-nextjs-fullstack/src/components/ui/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }

package/template-nextjs-fullstack/src/components/ui/avatar.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }

package/template-nextjs-fullstack/src/components/ui/badge.tsx

@@ -1,42 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  // Whitespace-nowrap: Badges should never wrap.
-  // hover-elevate: adds subtle dark overlay on hover for interactive feedback
-  "whitespace-nowrap inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold hover-elevate",
-  {
-    variants: {
-      variant: {
-        default:
-          // Primary badge with subtle shadow for elevation
-          "border-transparent bg-primary text-primary-foreground shadow-xs",
-        secondary:
-          // Subtle filled badge for secondary information
-          "border-transparent bg-secondary text-secondary-foreground",
-        destructive:
-          // Error/danger state with matching shadow
-          "border-transparent bg-destructive text-destructive-foreground shadow-xs",
-        // Outline uses badge-outline variable to blend with parent background
-        outline: "border [border-color:var(--badge-outline)] shadow-xs",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants }

package/template-nextjs-fullstack/src/components/ui/button.tsx

@@ -1,69 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  // Base button styles with elevate system for hover/active states.
-  // hover-elevate: applies subtle dark overlay on hover
-  // active-elevate-2: applies stronger dark overlay when pressed
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover-elevate active-elevate-2",
-  {
-    variants: {
-      variant: {
-        default:
-          // Solid primary button with computed border for depth
-          "bg-primary text-primary-foreground border border-primary-border",
-        destructive:
-          // Destructive action button with matching border
-          "bg-destructive text-destructive-foreground border border-destructive-border",
-        outline:
-          // Shows the background color of whatever card / sidebar / accent background it is inside of.
-          // Inherits the current text color.
-          "border [border-color:var(--button-outline)] shadow-xs active:shadow-none",
-        secondary:
-          // Subtle filled button for secondary actions
-          "bg-secondary text-secondary-foreground border border-secondary-border",
-        // Add a transparent border so that when someone toggles a border on later, it doesn't shift layout/size.
-        ghost: "border border-transparent",
-      },
-      // Heights are set as "min" heights, because sometimes AI will place large amount of content
-      // inside buttons. With a min-height they will look appropriate with small amounts of content,
-      // but will expand to fit large amounts of content.
-      size: {
-        default: "min-h-9 px-4 py-2",
-        sm: "min-h-8 rounded-md px-3 text-xs",
-        lg: "min-h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }