@coze-arch/cli 0.0.1-beta.5

package/lib/__templates__/react-rsbuild/rsbuild.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginTailwindCSS } from 'rsbuild-plugin-tailwindcss';
+
+export default defineConfig({
+  plugins: [pluginReact(), pluginTailwindCSS()],
+  server: {
+    port: <%= port %>,
+  },
+  html: {
+    template: './src/index.html',
+  },
+});

package/lib/__templates__/react-rsbuild/scripts/build.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+
+cd "${COZE_WORKSPACE_PATH}"
+
+echo "Installing dependencies..."
+pnpm install --prefer-frozen-lockfile --prefer-offline --loglevel debug --reporter=append-only
+
+echo "Building the project..."
+npx rsbuild build
+
+echo "Build completed successfully!"

package/lib/__templates__/react-rsbuild/scripts/dev.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+PORT=<%= port %>
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+
+cd "${COZE_WORKSPACE_PATH}"
+
+kill_port_if_listening() {
+    local pids
+
+    # Check if lsof is available (macOS/BSD) or ss (Linux)
+    if command -v lsof >/dev/null 2>&1; then
+        # macOS/BSD using lsof
+        pids=$(lsof -ti:${PORT} 2>/dev/null || true)
+    elif command -v ss >/dev/null 2>&1; then
+        # Linux using ss
+        pids=$(ss -H -lntp 2>/dev/null | awk -v port="${PORT}" '$4 ~ ":"port"$"' | grep -o 'pid=[0-9]*' | cut -d= -f2 | paste -sd' ' - || true)
+    else
+        echo "Warning: neither lsof nor ss found, cannot check port ${PORT}"
+        return
+    fi
+
+    if [[ -z "${pids}" ]]; then
+      echo "Port ${PORT} is free."
+      return
+    fi
+
+    echo "Port ${PORT} in use by PIDs: ${pids} (SIGKILL)"
+    echo "${pids}" | xargs -I {} kill -9 {}
+    sleep 1
+
+    # Verify port is cleared
+    if command -v lsof >/dev/null 2>&1; then
+        pids=$(lsof -ti:${PORT} 2>/dev/null || true)
+    elif command -v ss >/dev/null 2>&1; then
+        pids=$(ss -H -lntp 2>/dev/null | awk -v port="${PORT}" '$4 ~ ":"port"$"' | grep -o 'pid=[0-9]*' | cut -d= -f2 | paste -sd' ' - || true)
+    fi
+
+    if [[ -n "${pids}" ]]; then
+      echo "Warning: port ${PORT} still busy after SIGKILL, PIDs: ${pids}"
+    else
+      echo "Port ${PORT} cleared."
+    fi
+}
+
+echo "Clearing port ${PORT} before start."
+kill_port_if_listening
+echo "Starting HTTP service on port ${PORT} for dev..."
+
+npx rsbuild dev --port $PORT

package/lib/__templates__/react-rsbuild/scripts/start.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+set -Eeuo pipefail
+
+COZE_WORKSPACE_PATH="${COZE_WORKSPACE_PATH:-$(pwd)}"
+PORT=<%= port %>
+DEPLOY_RUN_PORT="${DEPLOY_RUN_PORT:-$PORT}"
+
+start_service() {
+    cd "${COZE_WORKSPACE_PATH}"
+    echo "Starting HTTP service on port ${DEPLOY_RUN_PORT} for deploy..."
+    npx rsbuild preview --port $DEPLOY_RUN_PORT
+}
+
+echo "Starting HTTP service on port ${DEPLOY_RUN_PORT} for deploy..."
+start_service

package/lib/__templates__/react-rsbuild/src/App.tsx

@@ -0,0 +1,60 @@
+const App: React.FC = () => {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-white text-black transition-colors duration-300 dark:bg-black dark:text-white">
+      {/* 主容器 */}
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between px-16 py-32 sm:items-start">
+        {/* 头部：Logo 和 产品名称 */}
+        <div className="flex items-center gap-3">
+          <img
+            className="dark:invert"
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/hkpzboz/coze_logo.png"
+            alt="扣子编程 Logo"
+            width={40}
+            height={40}
+            style={{ width: '40px', height: '40px', objectFit: 'contain' }}
+          />
+          <span className="text-xl font-bold tracking-tight text-black dark:text-zinc-50">
+            扣子编程
+          </span>
+        </div>
+
+        {/* 中间内容区：主标题和副标题 */}
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xl text-4xl font-semibold leading-tight tracking-tight text-black dark:text-zinc-50">
+            扣子编程，你的 AI 开发伙伴已就位
+          </h1>
+          <p className="max-w-2xl text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            当前是空白入口文件，项目正在开发中，请稍候...
+            <br />
+            开发完成后界面将自动更新。如未自动更新成功，可以手动点击右上角刷新或重启按钮查看效果。
+          </p>
+        </div>
+
+        {/* 底部按钮区 */}
+        <div className="flex w-full flex-col gap-4 text-base font-medium sm:w-auto sm:flex-row">
+          {/* 按钮 1：前往首页 */}
+          <a
+            className="flex h-12 w-full min-w-[160px] items-center justify-center gap-2 rounded-full bg-black px-8 text-white transition-colors hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 md:w-auto"
+            href="https://code.coze.cn/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            前往首页
+          </a>
+
+          {/* 按钮 2：查看文档 */}
+          <a
+            className="flex h-12 w-full min-w-[160px] items-center justify-center rounded-full border border-solid border-black/[.08] px-8 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-auto"
+            href="https://docs.coze.cn/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            查看文档
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default App;

package/lib/__templates__/react-rsbuild/src/index.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/lib/__templates__/react-rsbuild/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="扣子编程，你的 AI 开发伙伴已就位" />
+    <title>扣子编程 - AI 开发伙伴</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/lib/__templates__/react-rsbuild/src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/lib/__templates__/react-rsbuild/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  darkMode: 'media',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/lib/__templates__/react-rsbuild/template.config.js

@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+
+export const paramsSchema = {
+  type: 'object',
+  properties: {
+    appName: {
+      type: 'string',
+      minLength: 1,
+      pattern: '^[a-z0-9-]+$',
+      description:
+        'Application name (lowercase, alphanumeric and hyphens only)',
+    },
+    port: {
+      type: 'number',
+      default: 3000,
+      minimum: 1024,
+      maximum: 65535,
+      description: 'Development server port',
+    },
+  },
+  required: [],
+  additionalProperties: false,
+};
+
+const config = {
+  paramsSchema,
+
+  // 显式定义默认参数，确保在渲染时可用
+  defaultParams: {
+    port: 3000,
+    appName: 'app',
+  },
+
+  onBeforeRender: async context => {
+    console.log(`Creating React + Rsbuild project: ${context.appName}`);
+    return context;
+  },
+
+  onAfterRender: async (context, outputPath) => {
+    console.log(`\nProject created at: ${outputPath}`);
+    console.log(`\nConfiguration:`);
+    console.log(`  - TypeScript: enabled`);
+    console.log(`  - Port: ${context.port}`);
+  },
+};
+
+export default config;

package/lib/__templates__/react-rsbuild/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/lib/__templates__/rsbuild/.coze

@@ -0,0 +1,11 @@
+[project]
+requires = ["nodejs-24"]
+
+[dev]
+run = ["npm", "run", "dev"]
+deps = ["git"] # -> apt install git
+
+[deploy]
+build = ["npm", "run", "build"]
+run = ["npm", "run", "start"]
+deps = ["git"] # -> apt install git

package/lib/__templates__/rsbuild/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package/lib/__templates__/rsbuild/README.md

@@ -0,0 +1,61 @@
+# <%= appName %>
+
+Vanilla TypeScript application built with Rsbuild.
+
+## Getting Started
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start development server:
+
+```bash
+npm run dev
+```
+
+Or use coze-coding CLI:
+
+```bash
+coze-coding dev
+```
+
+## Build
+
+Build for production:
+
+```bash
+npm run build
+```
+
+Or:
+
+```bash
+coze-coding build
+```
+
+## Preview
+
+Preview production build:
+
+```bash
+npm run preview
+```
+
+Or:
+
+```bash
+coze-coding start
+```
+
+## Configuration
+
+- Dev Server Port: <%= port %>
+
+## Tech Stack
+
+- TypeScript
+- Rsbuild
+- HTML + CSS

package/lib/__templates__/rsbuild/_gitignore

@@ -0,0 +1,97 @@
+# 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__/rsbuild/_npmrc

@@ -0,0 +1,22 @@
+registry=https://registry.npmjs.org
+
+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__/rsbuild/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "<%= appName %>",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Vanilla TypeScript application with Rsbuild (HTML + CSS + TS)",
+  "scripts": {
+    "build": "bash ./scripts/build.sh",
+    "dev": "bash ./scripts/dev.sh",
+    "preinstall": "npx only-allow pnpm",
+    "lint": "eslint",
+    "start": "bash ./scripts/start.sh"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.1.0",
+    "only-allow": "^1.2.2",
+    "rsbuild-plugin-tailwindcss": "^0.2.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.0"
+  },
+  "packageManager": "pnpm@9.0.0",
+  "engines": {
+    "pnpm": ">=9.0.0"
+  }
+}