@lark-apaas/coding-templates 0.1.6 → 0.1.8

package/README.md

@@ -7,47 +7,36 @@ OpenClaw 项目模板包，供 mclaw CLI 使用。
 | 模板 | 目录 | 说明 |
 |---|---|---|
 | html | `template-html/` | 纯 HTML，零依赖，原型验证 |
-| nextjs-static | `template-nextjs-static/` | Next.js Pages Router，静态导出，纯前端 |
-| nextjs-fullstack | `template-nextjs-fullstack/` | Next.js App Router + Drizzle + PostgreSQL，全栈 |
+| vite-react | `template-vite-react/` | Vite + React 19 + Tailwind CSS + shadcn/ui |
 
 ## 包结构
 
 ```
-template/
+coding-templates/
 ├── package.json                  # npm 包定义（@lark-apaas/coding-templates）
 ├── meta.json                     # 模板元数据（业务侧生成，名称/描述/特性标签）
 ├── template-html/
 │   ├── _gitignore
-│   ├── package.json              # mclaw.type: "html"
+│   ├── package.json              # mclaw.stack: "html"
 │   └── index.html
-├── template-nextjs-static/
-│   ├── _gitignore                # CLI 复制时重命名为 .gitignore
-│   ├── package.json              # mclaw.type: "nextjs-static"，name 为 {{projectName}}
-│   ├── tailwind.config.ts
-│   ├── eslint.config.js
-│   ├── postcss.config.js
-│   ├── components.json
-│   └── src/
-│       ├── pages/                # Pages Router 路由
-│       ├── components/ui/        # shadcn/ui 58 个组件
-│       ├── hooks/
-│       ├── lib/
-│       └── styles/globals.css
-└── template-nextjs-fullstack/
-    ├── _gitignore
-    ├── _env.local.example        # CLI 复制时重命名为 .env.local.example
-    ├── package.json              # mclaw.type: "nextjs-fullstack"，name 为 {{projectName}}
-    ├── drizzle.config.ts
-    ├── tailwind.config.ts
+└── template-vite-react/
+    ├── _gitignore                # CLI 复制时重命名为 .gitignore
+    ├── package.json              # mclaw.stack: "vite-react"，name 为 {{projectName}}
+    ├── vite.config.ts
     ├── eslint.config.js
-    ├── postcss.config.js
     ├── components.json
-    └── src/
-        ├── app/                  # App Router 路由 + Server Actions
-        ├── components/ui/        # shadcn/ui 58 个组件
-        ├── db/                   # Drizzle ORM schema + 连接
-        ├── hooks/
-        └── lib/
+    ├── client/
+    │   ├── index.html
+    │   ├── public/
+    │   └── src/
+    │       ├── app.tsx           # 路由注册
+    │       ├── index.css         # 全局样式 + 主题变量
+    │       ├── components/ui/    # shadcn/ui 组件（new-york 风格）
+    │       ├── pages/
+    │       ├── hooks/
+    │       └── lib/
+    └── shared/                   # 前后端共享代码
+        └── types.ts
 ```
 
 ## 特殊文件命名
@@ -57,72 +46,35 @@ npm publish 会忽略 `.gitignore` 和 `.env*`，因此模板中使用 `_` 前
 | 模板中的文件名 | CLI 复制后的文件名 |
 |---|---|
 | `_gitignore` | `.gitignore` |
-| `_env.local.example` | `.env.local.example` |
+| `_env.local` | `.env.local` |
 
 ## 模板类型标识
 
-每个模板的 `package.json` 包含 `mclaw.type` 字段，标识模板类型：
+每个模板的 `package.json` 包含 `mclaw.stack` 字段，标识模板类型：
 
 ```json
 {
   "mclaw": {
-    "type": "nextjs-static"
+    "stack": "vite-react",
+    "stackVersion": "0.1.0"
   }
 }
 ```
 
-`meta.json` 由业务侧生成和维护。若 `meta.json` 丢失，CLI 可扫描各模板目录的 `package.json` 中的 `mclaw.type` 恢复。
-
-## mclaw CLI 集成方式
-
-```javascript
-const path = require('path');
-const fs = require('fs-extra');
-
-// 1. 读取模板元数据
-const meta = require('@lark-apaas/coding-templates/meta.json');
-
-// 2. 定位模板目录
-const templateDir = path.dirname(require.resolve('@lark-apaas/coding-templates/meta.json'));
-const srcDir = path.join(templateDir, selectedTemplate.dir);
-
-// 3. 复制到目标目录
-await fs.copy(srcDir, targetDir);
-
-// 4. 重命名特殊文件
-const renames = { '_gitignore': '.gitignore', '_env.local.example': '.env.local.example' };
-for (const [from, to] of Object.entries(renames)) {
-  const filePath = path.join(targetDir, from);
-  if (fs.existsSync(filePath)) {
-    await fs.rename(filePath, path.join(targetDir, to));
-  }
-}
-
-// 5. 替换 package.json 中的占位符
-const pkgPath = path.join(targetDir, 'package.json');
-if (fs.existsSync(pkgPath)) {
-  let content = await fs.readFile(pkgPath, 'utf-8');
-  content = content.replace('{{projectName}}', projectName);
-  await fs.writeFile(pkgPath, content);
-}
-```
-
 ## 技术栈
 
-两个 Next.js 模板共享相同的技术选型：
-
-- **Next.js 16** + React 19 + TypeScript 5
-- **Tailwind CSS 4**（`@tailwindcss/postcss`，CSS-first 配置）
-- **shadcn/ui**（base-nova 风格，lucide 图标，58 个组件预装）
-- **ESLint 9** flat config（`@eslint/js` + `typescript-eslint`，无 `eslint-config-next`）
-- **next-themes**（暗色模式）
+vite-react 模板技术选型：
 
-fullstack 模板额外包含：Drizzle ORM + PostgreSQL + Zod
+- **Vite 8** + React 19 + TypeScript 5
+- **Tailwind CSS 4**（`@tailwindcss/vite`，CSS-first 配置）
+- **shadcn/ui**（new-york 风格，lucide 图标，radix-ui 基础组件）
+- **ESLint 9** flat config
+- **react-router-dom** 客户端路由
 
 ## 发版
 
 ```bash
-cd template
+cd packages/openclaw/coding-templates
 npm version patch
 npm publish
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-templates",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "OpenClaw project templates for mclaw CLI",
   "publishConfig": {
     "access": "public"

package/template-vite-react/README.md

@@ -6,7 +6,7 @@
 - 样式: Tailwind CSS v4
 - UI 组件: shadcn/ui `import { Button } from "@/components/ui/button";`
 - 图标: lucide-react `import { SearchIcon } from "lucide-react";`
-- 图表: ReactECharts `import ReactECharts from "echarts-for-react";`
+- 图表: recharts `import { LineChart } from "recharts";`
 - 动画: framer-motion `import { motion } from "framer-motion";`
 - 路由: react-router-dom `import { Link, useNavigate } from "react-router-dom";`
 

package/template-vite-react/package.json

@@ -43,6 +43,8 @@
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.1.18",
     "@tailwindcss/vite": "^4.2.2",
+    "@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",
@@ -59,8 +61,7 @@
     "react-router-dom": "^7.13.2",
     "recharts": "^3.8.0",
     "sonner": "^2.0.7",
-    "streamdown": "^1.6.10",
-    "tailwind-merge": "^3.5.0",
+"tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
     "tw-animate-css": "^1.2.0",
     "vaul": "^1.1.2",

package/template-vite-react/client/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-vite-react/client/src/components/ui/streamdown.tsx

@@ -1,186 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Streamdown as StreamdownPrimitive } from 'streamdown';
-
-import { cn } from '@/lib/utils';
-import { omit } from 'es-toolkit';
-
-const defaultComponents: NonNullable<
-  React.ComponentProps<typeof StreamdownPrimitive>['components']
-> = {
-  ol: ({ className, ...props }) => (
-    <ol
-      className={cn(className)}
-      data-streamdown="ordered-list"
-      {...omit(props, ['node'])}
-    />
-  ),
-  li: ({ className, ...props }) => (
-    <li
-      className={cn(className)}
-      data-streamdown="list-item"
-      {...omit(props, ['node'])}
-    />
-  ),
-  ul: ({ className, ...props }) => (
-    <ul
-      className={cn(className)}
-      data-streamdown="unordered-list"
-      {...omit(props, ['node'])}
-    />
-  ),
-  hr: ({ className, ...props }) => (
-    <hr
-      className={cn(className)}
-      data-streamdown="horizontal-rule"
-      {...omit(props, ['node'])}
-    />
-  ),
-  strong: ({ className, ...props }) => (
-    <strong
-      className={cn(className)}
-      data-streamdown="strong"
-      {...omit(props, ['node'])}
-    />
-  ),
-  a: ({ className, href, ...props }) => {
-    const isIncomplete = href === 'streamdown:incomplete-link';
-
-    return (
-      <a
-        className={cn(className)}
-        data-incomplete={isIncomplete}
-        data-streamdown="link"
-        href={href}
-        rel={props.rel ?? 'noreferrer'}
-        target={props.target ?? '_blank'}
-        {...omit(props, ['node'])}
-      />
-    );
-  },
-  h1: ({ className, ...props }) => (
-    <h1
-      className={cn(className)}
-      data-streamdown="heading-1"
-      {...omit(props, ['node'])}
-    />
-  ),
-  h2: ({ className, ...props }) => (
-    <h2
-      className={cn(className)}
-      data-streamdown="heading-2"
-      {...omit(props, ['node'])}
-    />
-  ),
-  h3: ({ className, ...props }) => (
-    <h3
-      className={cn(className)}
-      data-streamdown="heading-3"
-      {...omit(props, ['node'])}
-    />
-  ),
-  h4: ({ className, ...props }) => (
-    <h4
-      className={cn(className)}
-      data-streamdown="heading-4"
-      {...omit(props, ['node'])}
-    />
-  ),
-  h5: ({ className, ...props }) => (
-    <h5
-      className={cn(className)}
-      data-streamdown="heading-5"
-      {...omit(props, ['node'])}
-    />
-  ),
-  h6: ({ className, ...props }) => (
-    <h6
-      className={cn(className)}
-      data-streamdown="heading-6"
-      {...omit(props, ['node'])}
-    />
-  ),
-  table: ({ className, ...props }) => (
-    <table
-      className={cn(className)}
-      data-streamdown="table-wrapper"
-      {...omit(props, ['node'])}
-    />
-  ),
-  thead: ({ className, ...props }) => (
-    <thead
-      className={cn(className)}
-      data-streamdown="table-header"
-      {...omit(props, ['node'])}
-    />
-  ),
-  tbody: ({ className, ...props }) => (
-    <tbody
-      className={cn(className)}
-      data-streamdown="table-body"
-      {...omit(props, ['node'])}
-    />
-  ),
-  tr: ({ className, ...props }) => (
-    <tr
-      className={cn(className)}
-      data-streamdown="table-row"
-      {...omit(props, ['node'])}
-    />
-  ),
-  th: ({ className, ...props }) => (
-    <th
-      className={cn(className)}
-      data-streamdown="table-header-cell"
-      {...omit(props, ['node'])}
-    />
-  ),
-  td: ({ className, ...props }) => (
-    <td
-      className={cn(className)}
-      data-streamdown="table-cell"
-      {...omit(props, ['node'])}
-    />
-  ),
-  blockquote: ({ className, ...props }) => (
-    <blockquote
-      className={cn(className)}
-      data-streamdown="blockquote"
-      {...omit(props, ['node'])}
-    />
-  ),
-  sup: ({ className, ...props }) => (
-    <sup className={cn(className)} {...omit(props, ['node'])} />
-  ),
-  sub: ({ className, ...props }) => (
-    <sub className={cn(className)} {...omit(props, ['node'])} />
-  ),
-  p: ({ className, ...props }) => (
-    <p className={cn(className)} {...omit(props, ['node'])} />
-  ),
-  section: ({ className, ...props }) => (
-    <section className={cn(className)} {...omit(props, ['node'])} />
-  ),
-  img: ({ className, alt, ...props }) => (
-    <img className={cn(className)} alt={alt ?? ''} {...omit(props, ['node'])} />
-  ),
-  pre: ({ children }) => <div className="not-prose">{children}</div>,
-};
-
-export function Streamdown({
-  className,
-  components,
-  ...props
-}: React.ComponentProps<typeof StreamdownPrimitive>) {
-  return (
-    <StreamdownPrimitive
-      className={cn(
-        'prose max-w-none dark:prose-invert',
-        className,
-      )}
-      components={{ ...defaultComponents, ...components }}
-      {...props}
-    />
-  );
-}