@lark-apaas/coding-templates 0.1.11 → 0.1.14

package/template-apex/client/src/index.css

@@ -0,0 +1,131 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --button-outline: rgba(0,0,0, .10);
+  --badge-outline: rgba(0,0,0, .05);
+  --opaque-button-border-intensity: -8;
+  --elevate-1: rgba(0,0,0, .03);
+  --elevate-2: rgba(0,0,0, .08);
+
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(220 14% 14%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(220 14% 14%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(220 14% 14%);
+  --primary: hsl(221 83% 53%);
+  --primary-foreground: hsl(220 14% 98%);
+  --secondary: hsl(220 14% 96%);
+  --secondary-foreground: hsl(220 14% 14%);
+  --muted: hsl(220 14% 96%);
+  --muted-foreground: hsl(218 7% 59%);
+  --accent: hsl(220 14% 96%);
+  --accent-foreground: hsl(220 14% 14%);
+  --info: hsl(221 83% 53%);
+  --info-foreground: hsl(230 100% 98%);
+  --destructive: hsl(2 84% 62%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --success: hsl(130 54% 42%);
+  --success-foreground: hsl(115 77% 97%);
+  --warning: hsl(26 90% 49%);
+  --warning-foreground: hsl(33 100% 96%);
+  --border: hsl(220 14% 89%);
+  --input: hsl(220 14% 89%);
+  --ring: hsl(221 83% 53%);
+  --chart-1: hsl(222 82% 56%);
+  --chart-2: hsl(174 77% 46%);
+  --chart-3: hsl(46 100% 52%);
+  --chart-4: hsl(27 92% 49%);
+  --chart-5: hsl(292 54% 76%);
+  --sidebar: hsl(220 14% 96%);
+  --sidebar-foreground: hsl(220 14% 14%);
+  --sidebar-primary: hsl(221 83% 53%);
+  --sidebar-primary-foreground: hsl(220 14% 98%);
+  --sidebar-accent: hsl(222 100% 94%);
+  --sidebar-accent-foreground: hsl(221 83% 53%);
+  --sidebar-border: hsl(220 14% 89%);
+  --sidebar-ring: hsl(221 83% 53%);
+
+  --primary-border: hsl(from hsl(221 83% 53%) h s calc(l + var(--opaque-button-border-intensity)));
+  --secondary-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
+  --destructive-border: hsl(from hsl(2 84% 62%) h s calc(l + var(--opaque-button-border-intensity)));
+  --accent-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
+  --muted-border: hsl(from hsl(220 14% 96%) h s calc(l + var(--opaque-button-border-intensity)));
+
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, 'PingFang SC',
+    'Microsoft Yahei', Arial, 'Hiragino Sans GB', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: Source Code Pro, monospace;
+  --radius: 0.5rem;
+  --spacing: 0.25rem;
+
+  --shadow-2xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
+  --shadow-xs: 0px 2px 12px 0px hsl(0 0% 0% / 0.01);
+  --shadow-sm: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
+  --shadow: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
+  --shadow-md: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 2px 4px -1px hsl(0 0% 0% / 0.02);
+  --shadow-lg: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 4px 6px -1px hsl(0 0% 0% / 0.02);
+  --shadow-xl: 0px 2px 12px 0px hsl(0 0% 0% / 0.02), 0px 8px 10px -1px hsl(0 0% 0% / 0.02);
+  --shadow-2xl: 0px 2px 12px 0px hsl(0 0% 0% / 0.05);
+  --tracking-normal: 0em;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}

package/template-apex/client/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-apex/client/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./app";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template-apex/client/src/pages/home/index.tsx

@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+export default function HomePage() {
+  return (
+    <div className="flex flex-col items-center justify-center py-24">
+      <h1 className="text-5xl font-bold tracking-tight sm:text-7xl mb-4">
+        Hello OpenClaw
+      </h1>
+      <p className="text-lg text-muted-foreground mb-8">
+        Apex full-stack template
+      </p>
+      <Link
+        to="/todos"
+        className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+      >
+        Try the Todos Demo
+      </Link>
+    </div>
+  );
+}

package/template-apex/client/src/pages/todos/components/todo-form.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+interface TodoFormProps {
+  onSubmit: (title: string) => Promise<void>;
+}
+
+export function TodoForm({ onSubmit }: TodoFormProps) {
+  const [title, setTitle] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = title.trim();
+    if (!trimmed) return;
+    setSubmitting(true);
+    await onSubmit(trimmed);
+    setTitle("");
+    setSubmitting(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2">
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        placeholder="What needs to be done?"
+        className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        disabled={submitting}
+      />
+      <button
+        type="submit"
+        disabled={submitting || !title.trim()}
+        className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
+      >
+        Add
+      </button>
+    </form>
+  );
+}

package/template-apex/client/src/pages/todos/components/todo-list.tsx

@@ -0,0 +1,43 @@
+import type { Todo } from "@shared/types";
+import { Trash2 } from "lucide-react";
+
+interface TodoListProps {
+  todos: Todo[];
+  onToggle: (id: number, completed: boolean) => Promise<void>;
+  onDelete: (id: number) => Promise<void>;
+}
+
+export function TodoList({ todos, onToggle, onDelete }: TodoListProps) {
+  if (todos.length === 0) {
+    return <p className="text-muted-foreground mt-8 text-center">No todos yet.</p>;
+  }
+
+  return (
+    <ul className="mt-6 space-y-2">
+      {todos.map((todo) => (
+        <li
+          key={todo.id}
+          className="flex items-center gap-3 rounded-md border border-border px-4 py-3"
+        >
+          <input
+            type="checkbox"
+            checked={todo.completed}
+            onChange={() => onToggle(todo.id, !todo.completed)}
+            className="h-4 w-4 rounded border-border"
+          />
+          <span
+            className={`flex-1 text-sm ${todo.completed ? "line-through text-muted-foreground" : ""}`}
+          >
+            {todo.title}
+          </span>
+          <button
+            onClick={() => onDelete(todo.id)}
+            className="text-muted-foreground hover:text-destructive transition-colors"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/template-apex/client/src/pages/todos/index.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import type { Todo } from "@shared/types";
+import { todosApi } from "@/api";
+import { TodoForm } from "./components/todo-form";
+import { TodoList } from "./components/todo-list";
+
+export default function TodosPage() {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = async () => {
+    const list = await todosApi.list();
+    setTodos(list);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const handleCreate = async (title: string) => {
+    await todosApi.create({ title });
+    await refresh();
+  };
+
+  const handleToggle = async (id: number, completed: boolean) => {
+    await todosApi.update(id, { completed });
+    await refresh();
+  };
+
+  const handleDelete = async (id: number) => {
+    await todosApi.remove(id);
+    await refresh();
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto py-12">
+      <h1 className="text-3xl font-bold mb-8">Todos</h1>
+      <TodoForm onSubmit={handleCreate} />
+      {loading ? (
+        <p className="text-muted-foreground mt-8">Loading...</p>
+      ) : (
+        <TodoList todos={todos} onToggle={handleToggle} onDelete={handleDelete} />
+      )}
+    </div>
+  );
+}

package/template-apex/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "client/src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/template-apex/eslint.config.js

@@ -0,0 +1,54 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['client/**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      // 关闭仅语法相关、不影响编译和运行时的规则
+      'react-refresh/only-export-components': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
+      'no-empty': 'off',
+      'prefer-const': 'off',
+      'no-unused-labels': 'off',
+    },
+  },
+  {
+    files: ['server/**/*.ts', 'shared/**/*.ts'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.node,
+    },
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-require-imports': 'off',
+      'no-empty': 'off',
+      'prefer-const': 'off',
+      'no-unused-labels': 'off',
+    },
+  },
+])

package/template-apex/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "mclaw": {
+    "stack": "apex",
+    "stackVersion": "0.1.0"
+  },
+  "scripts": {
+    "dev": "npx tsx --watch server/index.ts & npx vite --host",
+    "dev:server": "tsx --watch server/index.ts",
+    "dev:client": "vite --host",
+    "build": "bash scripts/build.sh",
+    "lint": "npm run lint:client && npm run lint:server",
+    "lint:client": "eslint client/src",
+    "lint:server": "eslint server"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.14",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.14",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-select": "^2.1.14",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.11",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.1.18",
+    "@formkit/auto-animate": "^0.9.0",
+    "framer-motion": "^12.38.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "drizzle-orm": "^0.45.1",
+    "embla-carousel-react": "^8.6.0",
+    "express": "^5.1.0",
+    "hbs": "^4.2.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.7.0",
+    "next-themes": "^0.4.6",
+    "postgres": "^3.4.8",
+    "react": "^19.2.4",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.72.0",
+    "react-resizable-panels": "^4.7.6",
+    "react-router-dom": "^7.13.2",
+    "recharts": "^3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.2.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9",
+    "@lark-apaas/coding-vite-preset": "^0.1.0",
+    "@types/express": "^5",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-plugin-react-hooks": "^7",
+    "eslint-plugin-react-refresh": "^0.5",
+    "globals": "^17",
+    "tsx": "^4",
+    "typescript": "~5.9",
+    "typescript-eslint": "^8",
+    "vite": "^8"
+  }
+}

package/template-apex/scripts/build.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+set -e
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+OUTPUT="$ROOT/dist/output"
+OUTPUT_RESOURCE="$ROOT/dist/output_resource"
+OUTPUT_STATIC="$ROOT/dist/output_static"
+
+# 清理
+rm -rf "$ROOT/dist"
+
+# 1. Vite 构建前端 → dist/client/
+npx vite build --outDir "$ROOT/dist/client" --emptyOutDir
+
+# 2. tsc 构建服务端 → dist/server/
+npx tsc -p tsconfig.server.json
+
+# 3. 组装 dist/output/
+mkdir -p "$OUTPUT"
+
+# HTML → dist/output/（部署平台托管静态文件）
+find "$ROOT/dist/client" -maxdepth 1 -name '*.html' -exec mv {} "$OUTPUT/" \;
+
+# 生成 routes.json
+echo '{ "version": 1, "type": "apex", "fallback": "index.html" }' > "$OUTPUT/routes.json"
+
+# 服务端产物（tsc 输出保留 server/、shared/ 子目录）
+cp -r "$ROOT/dist/server/"* "$OUTPUT/"
+
+# 复制 package.json（运行时需要依赖信息）
+cp "$ROOT/package.json" "$OUTPUT/package.json"
+
+# 4. assets/ → dist/output_resource/（JS/CSS/字体，上传到 CDN）
+if [ -d "$ROOT/dist/client/assets" ]; then
+  mkdir -p "$OUTPUT_RESOURCE"
+  cp -r "$ROOT/dist/client/assets" "$OUTPUT_RESOURCE/"
+fi
+
+# 5. 私有静态资源 → dist/output_static/
+if [ -d "$ROOT/shared/static" ]; then
+  mkdir -p "$OUTPUT_STATIC"
+  rsync -a --exclude='*.ts' --exclude='*.tsx' --exclude='*.js' --exclude='*.jsx' "$ROOT/shared/static/" "$OUTPUT_STATIC/"
+fi
+
+# 清理中间产物
+rm -rf "$ROOT/dist/client" "$ROOT/dist/server"
+
+echo "Build complete"
+echo "  HTML + Server → dist/output/"
+[ -d "$OUTPUT_RESOURCE" ] && echo "  Resource      → dist/output_resource/" || true
+[ -d "$OUTPUT_STATIC" ] && echo "  Static        → dist/output_static/" || true

package/template-apex/server/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-apex/server/db/schema.ts

@@ -0,0 +1,8 @@
+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").notNull().defaultNow(),
+});

package/template-apex/server/index.ts

@@ -0,0 +1,34 @@
+import express from "express";
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+import hbs from "hbs";
+import { registerRoutes } from "./routes/index";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const port = Number(process.env.PORT) || 3000;
+
+const app = express();
+
+// JSON body parsing
+app.use(express.json());
+
+// Register API routes
+registerRoutes(app);
+
+// Page rendering: compile index.html as hbs template, inject runtime data
+// Static assets (JS/CSS/images) are served by the deployment platform / CDN
+const templatePath = path.resolve(__dirname, "../public/index.html");
+const template = hbs.compile(fs.readFileSync(templatePath, "utf-8"));
+
+app.get("*", (_req, res) => {
+  const html = template({
+    appId: process.env.MCLAW_APP_ID || "",
+    cdnDomain: process.env.MCLAW_CDN_DOMAIN || "",
+  });
+  res.type("html").send(html);
+});
+
+app.listen(port, "0.0.0.0", () => {
+  console.log(`Server running at http://localhost:${port}`);
+});

package/template-apex/server/routes/index.ts

@@ -0,0 +1,6 @@
+import type { Express } from "express";
+import todosRouter from "./todos";
+
+export function registerRoutes(app: Express) {
+  app.use("/api/todos", todosRouter);
+}

package/template-apex/server/routes/todos.ts

@@ -0,0 +1,53 @@
+import { Router } from "express";
+import { eq, desc } from "drizzle-orm";
+import { db } from "../db/index";
+import { todos } from "../db/schema";
+import { createTodoSchema, updateTodoSchema } from "../../shared/api.interface";
+
+const router = Router();
+
+// GET /api/todos
+router.get("/", async (_req, res) => {
+  const list = await db.select().from(todos).orderBy(desc(todos.createdAt));
+  res.json(list);
+});
+
+// POST /api/todos
+router.post("/", async (req, res) => {
+  const parsed = createTodoSchema.safeParse(req.body);
+  if (!parsed.success) {
+    res.status(400).json({ error: parsed.error.flatten() });
+    return;
+  }
+  const [todo] = await db.insert(todos).values({ title: parsed.data.title }).returning();
+  res.status(201).json(todo);
+});
+
+// PATCH /api/todos/:id
+router.patch("/:id", async (req, res) => {
+  const id = Number(req.params.id);
+  const parsed = updateTodoSchema.safeParse(req.body);
+  if (!parsed.success) {
+    res.status(400).json({ error: parsed.error.flatten() });
+    return;
+  }
+  const [todo] = await db.update(todos).set(parsed.data).where(eq(todos.id, id)).returning();
+  if (!todo) {
+    res.status(404).json({ error: "Not found" });
+    return;
+  }
+  res.json(todo);
+});
+
+// DELETE /api/todos/:id
+router.delete("/:id", async (req, res) => {
+  const id = Number(req.params.id);
+  const [todo] = await db.delete(todos).where(eq(todos.id, id)).returning();
+  if (!todo) {
+    res.status(404).json({ error: "Not found" });
+    return;
+  }
+  res.json(todo);
+});
+
+export default router;

package/template-apex/server/types.d.ts

@@ -0,0 +1,4 @@
+declare module 'hbs' {
+  function compile(template: string): (data: Record<string, unknown>) => string;
+  export default { compile };
+}

package/template-apex/shared/api.interface.ts

@@ -0,0 +1,23 @@
+// API 接口契约定义
+// zod schema 做校验，z.infer 推导类型，前后端共享
+
+import { z } from "zod";
+import type { Todo } from "./types";
+
+// ----- Todos -----
+
+export const createTodoSchema = z.object({
+  title: z.string().min(1).max(500),
+});
+
+export const updateTodoSchema = z.object({
+  title: z.string().min(1).max(500).optional(),
+  completed: z.boolean().optional(),
+});
+
+export type CreateTodoRequest = z.infer<typeof createTodoSchema>;
+export type UpdateTodoRequest = z.infer<typeof updateTodoSchema>;
+export type CreateTodoResponse = Todo;
+export type UpdateTodoResponse = Todo;
+export type DeleteTodoResponse = Todo;
+export type ListTodosResponse = Todo[];