@coze-arch/cli 0.0.1-alpha.01c0ee

package/lib/__templates__/nextjs/README.md

@@ -0,0 +1,363 @@
+# <%= appName %>
+
+这是一个基于 [Next.js 16](https://nextjs.org) + [shadcn/ui](https://ui.shadcn.com) 的全栈应用项目，由扣子编程 CLI 创建。
+
+## 快速开始
+
+### 启动开发服务器
+
+```bash
+coze dev
+```
+
+启动后，在浏览器中打开 [http://localhost:<%= port %>](http://localhost:<%= port %>) 查看应用。
+
+开发服务器支持热更新，修改代码后页面会自动刷新。
+
+### 构建生产版本
+
+```bash
+coze build
+```
+
+### 启动生产服务器
+
+```bash
+coze start
+```
+
+## 项目结构
+
+```
+src/
+├── app/                      # Next.js App Router 目录
+│   ├── layout.tsx           # 根布局组件
+│   ├── page.tsx             # 首页
+│   ├── globals.css          # 全局样式（包含 shadcn 主题变量）
+│   └── [route]/             # 其他路由页面
+├── components/              # React 组件目录
+│   └── ui/                  # shadcn/ui 基础组件（优先使用）
+│       ├── button.tsx
+│       ├── card.tsx
+│       └── ...
+├── lib/                     # 工具函数库
+│   └── utils.ts            # cn() 等工具函数
+└── hooks/                   # 自定义 React Hooks（可选）
+
+server/
+├── index.ts                 # 自定义服务器入口
+├── tsconfig.json           # Server TypeScript 配置
+└── dist/                    # 编译输出目录（自动生成）
+```
+
+## 核心开发规范
+
+### 1. 组件开发
+
+**优先使用 shadcn/ui 基础组件**
+
+本项目已预装完整的 shadcn/ui 组件库，位于 `src/components/ui/` 目录。开发时应优先使用这些组件作为基础：
+
+```tsx
+// ✅ 推荐：使用 shadcn 基础组件
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+
+export default function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>标题</CardHeader>
+      <CardContent>
+        <Input placeholder="输入内容" />
+        <Button>提交</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+**可用的 shadcn 组件清单**
+
+- 表单：`button`, `input`, `textarea`, `select`, `checkbox`, `radio-group`, `switch`, `slider`
+- 布局：`card`, `separator`, `tabs`, `accordion`, `collapsible`, `scroll-area`
+- 反馈：`alert`, `alert-dialog`, `dialog`, `toast`, `sonner`, `progress`
+- 导航：`dropdown-menu`, `menubar`, `navigation-menu`, `context-menu`
+- 数据展示：`table`, `avatar`, `badge`, `hover-card`, `tooltip`, `popover`
+- 其他：`calendar`, `command`, `carousel`, `resizable`, `sidebar`
+
+详见 `src/components/ui/` 目录下的具体组件实现。
+
+### 2. 路由开发
+
+Next.js 使用文件系统路由，在 `src/app/` 目录下创建文件夹即可添加路由：
+
+```bash
+# 创建新路由 /about
+src/app/about/page.tsx
+
+# 创建动态路由 /posts/[id]
+src/app/posts/[id]/page.tsx
+
+# 创建路由组（不影响 URL）
+src/app/(marketing)/about/page.tsx
+
+# 创建 API 路由
+src/app/api/users/route.ts
+```
+
+**页面组件示例**
+
+```tsx
+// src/app/about/page.tsx
+import { Button } from '@/components/ui/button';
+
+export const metadata = {
+  title: '关于我们',
+  description: '关于页面描述',
+};
+
+export default function AboutPage() {
+  return (
+    <div>
+      <h1>关于我们</h1>
+      <Button>了解更多</Button>
+    </div>
+  );
+}
+```
+
+**动态路由示例**
+
+```tsx
+// src/app/posts/[id]/page.tsx
+export default async function PostPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return <div>文章 ID: {id}</div>;
+}
+```
+
+**API 路由示例**
+
+```tsx
+// src/app/api/users/route.ts
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  return NextResponse.json({ users: [] });
+}
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  return NextResponse.json({ success: true });
+}
+```
+
+### 3. 依赖管理
+
+**必须使用 pnpm 管理依赖**
+
+```bash
+# ✅ 安装依赖
+pnpm install
+
+# ✅ 添加新依赖
+pnpm add package-name
+
+# ✅ 添加开发依赖
+pnpm add -D package-name
+
+# ❌ 禁止使用 npm 或 yarn
+# npm install  # 错误！
+# yarn add     # 错误！
+```
+
+项目已配置 `preinstall` 脚本，使用其他包管理器会报错。
+
+### 4. 样式开发
+
+**使用 Tailwind CSS v4**
+
+本项目使用 Tailwind CSS v4 进行样式开发，并已配置 shadcn 主题变量。
+
+```tsx
+// 使用 Tailwind 类名
+<div className="flex items-center gap-4 p-4 rounded-lg bg-background">
+  <Button className="bg-primary text-primary-foreground">
+    主要按钮
+  </Button>
+</div>
+
+// 使用 cn() 工具函数合并类名
+import { cn } from '@/lib/utils';
+
+<div className={cn(
+  "base-class",
+  condition && "conditional-class",
+  className
+)}>
+  内容
+</div>
+```
+
+**主题变量**
+
+主题变量定义在 `src/app/globals.css` 中，支持亮色/暗色模式：
+
+- `--background`, `--foreground`
+- `--primary`, `--primary-foreground`
+- `--secondary`, `--secondary-foreground`
+- `--muted`, `--muted-foreground`
+- `--accent`, `--accent-foreground`
+- `--destructive`, `--destructive-foreground`
+- `--border`, `--input`, `--ring`
+
+### 5. 表单开发
+
+推荐使用 `react-hook-form` + `zod` 进行表单开发：
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+const formSchema = z.object({
+  username: z.string().min(2, '用户名至少 2 个字符'),
+  email: z.string().email('请输入有效的邮箱'),
+});
+
+export default function MyForm() {
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: { username: '', email: '' },
+  });
+
+  const onSubmit = (data: z.infer<typeof formSchema>) => {
+    console.log(data);
+  };
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <Input {...form.register('username')} />
+      <Input {...form.register('email')} />
+      <Button type="submit">提交</Button>
+    </form>
+  );
+}
+```
+
+### 6. 数据获取
+
+**服务端组件（推荐）**
+
+```tsx
+// src/app/posts/page.tsx
+async function getPosts() {
+  const res = await fetch('https://api.example.com/posts', {
+    cache: 'no-store', // 或 'force-cache'
+  });
+  return res.json();
+}
+
+export default async function PostsPage() {
+  const posts = await getPosts();
+
+  return (
+    <div>
+      {posts.map(post => (
+        <div key={post.id}>{post.title}</div>
+      ))}
+    </div>
+  );
+}
+```
+
+**客户端组件**
+
+```tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function ClientComponent() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch('/api/data')
+      .then(res => res.json())
+      .then(setData);
+  }, []);
+
+  return <div>{JSON.stringify(data)}</div>;
+}
+```
+
+## 常见开发场景
+
+### 添加新页面
+
+1. 在 `src/app/` 下创建文件夹和 `page.tsx`
+2. 使用 shadcn 组件构建 UI
+3. 根据需要添加 `layout.tsx` 和 `loading.tsx`
+
+### 创建业务组件
+
+1. 在 `src/components/` 下创建组件文件（非 UI 组件）
+2. 优先组合使用 `src/components/ui/` 中的基础组件
+3. 使用 TypeScript 定义 Props 类型
+
+### 添加全局状态
+
+推荐使用 React Context 或 Zustand：
+
+```tsx
+// src/lib/store.ts
+import { create } from 'zustand';
+
+interface Store {
+  count: number;
+  increment: () => void;
+}
+
+export const useStore = create<Store>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+}));
+```
+
+### 集成数据库
+
+推荐使用 Prisma 或 Drizzle ORM，在 `src/lib/db.ts` 中配置。
+
+## 技术栈
+
+- **框架**: Next.js 16.1.1 (App Router)
+- **UI 组件**: shadcn/ui (基于 Radix UI)
+- **样式**: Tailwind CSS v4
+- **表单**: React Hook Form + Zod
+- **图标**: Lucide React
+- **字体**: Geist Sans & Geist Mono
+- **包管理器**: pnpm 9+
+- **TypeScript**: 5.x
+
+## 参考文档
+
+- [Next.js 官方文档](https://nextjs.org/docs)
+- [shadcn/ui 组件文档](https://ui.shadcn.com)
+- [Tailwind CSS 文档](https://tailwindcss.com/docs)
+- [React Hook Form](https://react-hook-form.com)
+
+## 重要提示
+
+1. **必须使用 pnpm** 作为包管理器
+2. **优先使用 shadcn/ui 组件** 而不是从零开发基础组件
+3. **遵循 Next.js App Router 规范**，正确区分服务端/客户端组件
+4. **使用 TypeScript** 进行类型安全开发
+5. **使用 `@/` 路径别名** 导入模块（已配置）

package/lib/__templates__/nextjs/_gitignore

@@ -0,0 +1,99 @@
+.next
+
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Production build
+dist/
+build/
+out/
+.next/
+.rsbuild/
+
+# Testing
+coverage/
+*.lcov
+.nyc_output
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Diagnostic reports
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Cache
+.cache/
+.parcel-cache/
+.eslintcache
+.stylelintcache
+.npm
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+Desktop.ini
+
+# Temporary files
+*.tmp
+*.temp
+.tmp/
+.temp/
+
+# Optional files
+*.tgz
+*.gz
+*.zip
+*.tar
+
+# TypeScript
+*.tsbuildinfo
+
+# Misc
+.vercel
+.turbo
+
+.coze-logs

package/lib/__templates__/nextjs/_npmrc

@@ -0,0 +1,23 @@
+loglevel=error
+registry=https://registry.npmmirror.com
+
+strictStorePkgContentCheck=false
+verifyStoreIntegrity=false
+
+# 网络优化
+network-concurrency=16
+fetch-retries=3
+fetch-timeout=60000
+
+# 严格使用 peer dependencies
+strict-peer-dependencies=false
+
+# 自动生成 lockfile
+auto-install-peers=true
+
+# lockfile 配置
+lockfile=true
+prefer-frozen-lockfile=true
+
+# 如果 lockfile 存在但过期，更新而不是失败
+resolution-mode=highest

package/lib/__templates__/nextjs/components.json

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

package/lib/__templates__/nextjs/eslint.config.mjs

@@ -0,0 +1,23 @@
+import nextTs from 'eslint-config-next/typescript';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    '.next/**',
+    'out/**',
+    'build/**',
+    'next-env.d.ts',
+    // Build artifacts:
+    'server.js',
+    'dist/**',
+    // Script files (CommonJS):
+    'scripts/**/*.js',
+  ]),
+]);
+
+export default eslintConfig;

package/lib/__templates__/nextjs/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/lib/__templates__/nextjs/next.config.ts

@@ -0,0 +1,18 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  // outputFileTracingRoot: path.resolve(__dirname, '../../'),  // Uncomment and add 'import path from "path"' if needed
+  /* config options here */
+  allowedDevOrigins: ['*.dev.coze.site'],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'lf-coze-web-cdn.coze.cn',
+        pathname: '/**',
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package/lib/__templates__/nextjs/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "<%= appName %>",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "bash ./scripts/build.sh",
+    "dev": "bash ./scripts/dev.sh",
+    "preinstall": "npx only-allow pnpm",
+    "lint": "eslint",
+    "start": "bash ./scripts/start.sh",
+    "ts-check": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.958.0",
+    "@aws-sdk/lib-storage": "^3.958.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@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.8",
+    "@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.8",
+    "@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.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@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",
+    "@supabase/supabase-js": "2.95.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "coze-coding-dev-sdk": "^0.7.16",
+    "date-fns": "^4.1.0",
+    "dotenv": "^17.2.3",
+    "drizzle-kit": "^0.31.8",
+    "drizzle-orm": "^0.45.1",
+    "drizzle-zod": "^0.8.3",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.468.0",
+    "next": "16.1.1",
+    "next-themes": "^0.4.6",
+    "pg": "^8.16.3",
+    "react": "19.2.3",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.70.0",
+    "react-resizable-panels": "^4.2.0",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^2.6.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@react-dev-inspector/babel-plugin": "^2.0.1",
+    "@react-dev-inspector/middleware": "^2.0.1",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/pg": "^8.16.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "only-allow": "^1.2.2",
+    "react-dev-inspector": "^2.0.1",
+    "shadcn": "latest",
+    "tailwindcss": "^4",
+    "tsup": "^8.3.5",
+    "tsx": "^4.19.2",
+    "typescript": "^5"
+  },
+  "packageManager": "pnpm@9.0.0",
+  "engines": {
+    "pnpm": ">=9.0.0"
+  }
+}