@lark-apaas/coding-templates 0.1.0

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

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-normal enabled:hover:bg-muted enabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent enabled:hover:bg-accent enabled:hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

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

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance shadow-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/template-nextjs-fullstack/src/db/index.ts

@@ -0,0 +1,8 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "./schema";
+
+const connectionString = process.env.DATABASE_URL || "";
+
+const client = postgres(connectionString);
+export const db = drizzle(client, { schema });

package/template-nextjs-fullstack/src/db/schema.ts

@@ -0,0 +1,11 @@
+import { pgTable, serial, text, boolean, timestamp } from "drizzle-orm/pg-core";
+
+export const todos = pgTable("todos", {
+  id: serial("id").primaryKey(),
+  title: text("title").notNull(),
+  completed: boolean("completed").notNull().default(false),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+});
+
+export type Todo = typeof todos.$inferSelect;
+export type NewTodo = typeof todos.$inferInsert;

package/template-nextjs-fullstack/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template-nextjs-fullstack/src/lib/utils.ts

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

package/template-nextjs-fullstack/tailwind.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/**/*.{ts,tsx,css}',
+  ],
+  plugins: [],
+};
+
+export default config;

package/template-nextjs-fullstack/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/template-nextjs-static/README.md

@@ -0,0 +1,80 @@
+# Next.js Pages Router 静态导出模板
+
+纯前端模板，构建产出静态 HTML + JS/CSS，部署到 Nginx + CDN。
+
+## 快速开始
+
+```bash
+npm install
+npm run dev
+```
+
+打开 http://localhost:3000 查看效果。
+
+## 命令
+
+| 命令 | 说明 |
+|---|---|
+| `npm run dev` | 启动开发服务器 |
+| `npm run build` | 构建静态导出到 `out/` |
+| `npm run lint` | 运行 ESLint |
+
+## 构建产出
+
+```bash
+npm run build
+```
+
+产出 `out/` 目录：
+
+```
+out/
+├── index.html          # 首页
+├── hello.html          # /hello 路由
+├── 404.html            # 404 页面
+└── _next/static/       # JS、CSS、字体 → 部署到 CDN
+```
+
+- 每个路由一个 HTML 文件（构建时预渲染，天然 SEO 友好）
+- 无 RSC payload（.txt 文件），产物干净
+- `_next/static/` 通过 `assetPrefix` 指向 CDN
+
+## 部署
+
+```
+HTML 文件     → Nginx / 静态服务器
+_next/static/ → CDN（通过 assetPrefix 配置）
+```
+
+配置 CDN 地址：
+
+```ts
+// next.config.ts
+const nextConfig = {
+  output: "export",
+  assetPrefix: "https://cdn.example.com",
+};
+```
+
+## 技术栈
+
+- Next.js 16（Pages Router、Static Export）
+- React 19、TypeScript 5
+- Tailwind CSS 4 + shadcn/ui（new-york 风格、lucide 图标）
+- next-themes（暗色模式）
+- framer-motion（动画）
+
+## 添加新页面
+
+在 `src/pages/` 下创建文件即可，文件名即路由：
+
+```
+src/pages/about.tsx  →  /about
+src/pages/blog.tsx   →  /blog
+```
+
+## 添加 shadcn/ui 组件
+
+```bash
+npx shadcn@latest add <component-name>
+```

package/template-nextjs-static/_gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/template-nextjs-static/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/template-nextjs-static/eslint.config.js

@@ -0,0 +1,15 @@
+const js = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+
+module.exports = tseslint.config(
+  { ignores: ['.next', 'out', 'node_modules'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-unused-expressions': 'off',
+    },
+  },
+);

package/template-nextjs-static/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "export",
+  // assetPrefix: 'https://cdn.example.com', // uncomment for CDN
+};
+
+export default nextConfig;

package/template-nextjs-static/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "mclaw": {
+    "stack": "nextjs-static",
+    "stackVersion": "0.1.0"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "bash scripts/build.sh",
+    "start": "next start",
+    "lint": "eslint src"
+  },
+  "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",
+    "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",
+    "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"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "typescript-eslint": "^8"
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+#!/bin/bash
+set -e
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+OUTPUT="$ROOT/dist/output"
+OUTPUT_STATIC="$ROOT/dist/output_static"
+OUTPUT_RESOURCE="$ROOT/dist/output_resource"
+
+# 清理
+rm -rf "$ROOT/dist"
+
+# 1. Next.js 构建 → out/
+npx next build
+
+# 2. HTML → dist/output/
+mkdir -p "$OUTPUT"
+find "$ROOT/out" -maxdepth 1 -name '*.html' -exec cp {} "$OUTPUT/" \;
+# 复制子目录（排除 _next）
+find "$ROOT/out" -mindepth 1 -maxdepth 1 -type d -not -name '_next' \
+  -exec cp -r {} "$OUTPUT/" \;
+
+# 生成 routes.json
+echo '{ "version": 1, "type": "nextjs-static", "fallback": "404.html" }' > "$OUTPUT/routes.json"
+
+# 3. _next/static/ → dist/output_resource/（JS/CSS/字体，上传到 CDN）
+if [ -d "$ROOT/out/_next/static" ]; then
+  mkdir -p "$OUTPUT_RESOURCE/_next"
+  cp -r "$ROOT/out/_next/static" "$OUTPUT_RESOURCE/_next/"
+fi
+
+# 4. 私有资源 → dist/output_static/（如有，按需补充）
+
+echo "Build complete"
+echo "  HTML     → dist/output/"
+[ -d "$OUTPUT_RESOURCE" ] && echo "  Resource → dist/output_resource/"
+[ -d "$OUTPUT_STATIC" ] && echo "  Static   → dist/output_static/"

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

@@ -0,0 +1,30 @@
+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="/hello" className="text-muted-foreground hover:text-foreground transition-colors">Hello</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-static/src/components/theme-provider.tsx

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