@coze-arch/cli 0.0.1-alpha.bcc7d9 → 0.0.1-alpha.bd55ba

package/lib/__templates__/vite/src/main.ts

@@ -7,56 +7,26 @@ export function initApp(): void {
   }
 
   app.innerHTML = `
-    <div class="flex min-h-screen items-center justify-center bg-white text-black transition-colors duration-300 dark:bg-black dark:text-white">
-      <!-- 主容器 -->
-      <main class="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between px-16 py-32 sm:items-start">
-        <!-- 头部：Logo 和 产品名称 -->
-        <div class="flex items-center gap-3">
+    <div class="flex h-full items-center justify-center bg-background text-foreground transition-colors duration-300 dark:bg-background dark:text-foreground overflow-hidden min-h-screen">
+      <main class="flex w-full h-full max-w-3xl flex-col items-center justify-center px-16 py-32 sm:items-center">
+        <div class="flex flex-col items-center justify-between gap-4">
           <img
-            src="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/favicon.svg"
+            src="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze-coding/icon/coze-coding.gif"
             alt="扣子编程 Logo"
-            width="40"
-            height="40"
-            style="width: 40px; height: 40px; object-fit: contain;"
+            width={156}
+            height={130}
+            style="width: 156px; height: 130px; object-fit: contain;"
           />
-          <span class="text-xl font-bold tracking-tight text-black dark:text-zinc-50">
-            扣子编程
-          </span>
-        </div>
-
-        <!-- 中间内容区：主标题和副标题 -->
-        <div class="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 class="max-w-xl text-4xl font-semibold leading-tight tracking-tight text-black dark:text-zinc-50">
-            扣子编程，你的 AI 开发伙伴已就位
-          </h1>
-          <p class="max-w-2xl text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            当前是空白入口文件，项目正在开发中，请稍候...
-            <br />
-            开发完成后界面将自动更新。如未自动更新成功，可以手动点击右上角刷新或重启按钮查看效果。
-          </p>
-        </div>
-
-        <!-- 底部按钮区 -->
-        <div class="flex w-full flex-col gap-4 text-base font-medium sm:w-auto sm:flex-row">
-          <!-- 按钮 1：前往首页 -->
-          <a
-            class="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
-            class="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>
+            <div class="flex flex-col items-center gap-2 text-center sm:items-center sm:text-center">
+              <h1 class="max-w-xl text-base font-semibold leading-tight tracking-tight text-foreground dark:text-foreground">
+                应用开发中
+              </h1>
+              <p class="max-w-2xl text-sm-14 leading-8 text-muted-foreground dark:text-muted-foreground">
+                请稍后，页面即将呈现
+              </p>
+            </div>
+          </div>
         </div>
       </main>
     </div>

package/lib/__templates__/vite/template.config.js

@@ -1,6 +1,7 @@
 
-
-import { resolve } from 'path';
+import { spawn } from 'child_process';
+import { resolve, join, basename } from 'path';
+import { appendFileSync, openSync, closeSync, mkdirSync } from 'fs';
 
 
 
@@ -59,32 +60,66 @@ const config = {
     return context;
   },
 
-  onAfterRender: async (context, outputPath) => {
+  onAfterRender: async (_context, outputPath) => {
     console.log(`\nProject created at: ${outputPath}`);
     console.log('\nConfiguration:');
     console.log('  - Framework: vite');
     console.log('  - TypeScript: enabled');
     console.log('  - App Router: enabled');
-    console.log(`  - Port: ${context.port}`);
+    console.log(`  - Port: ${_context.port}`);
+  },
 
-    // Skip pnpm add in test environment to avoid monorepo workspace issues
+  onComplete: async (_context, outputPath) => {
+    // Skip pnpm update in test environment to avoid monorepo workspace issues
     if (process.env.NODE_ENV === 'test') {
       console.log('⊘ Skipping dependency update in test environment');
       return;
     }
 
-    const cmd = `pnpm add coze-coding-dev-sdk@"^0.7.0"`;
-    console.log(`${cmd}`);
+    const cmd = 'pnpm';
+    const args = ['update', 'coze-coding-dev-sdk@^0.7.0'];
+    console.log(
+      `\nTriggering: ${cmd} ${args.join(' ')} (running in background)`,
+    );
+
     try {
       const projectRoot = resolve(outputPath);
-      // execSync(cmd, {
-      //   cwd: projectRoot,
-      //   stdio: 'inherit',
-      // });
-      console.log('✓ coze-coding-dev-sdk updated successfully');
+
+      // Determine log directory
+      const logDir = process.env.COZE_LOG_DIR || resolve(__dirname, '../.log');
+      mkdirSync(logDir, { recursive: true });
+
+      // Use project name in log file to avoid conflicts
+      const projectName = basename(projectRoot);
+      const logFile = join(logDir, `${projectName}-init.log`);
+
+      // Write log header
+      const timestamp = new Date().toISOString();
+      appendFileSync(
+        logFile,
+        `\n=== [${timestamp}] ${cmd} ${args.join(' ')} ===\n`,
+      );
+
+      // Open log file for appending
+      const logFd = openSync(logFile, 'a');
+
+      // Spawn in detached mode
+      const child = spawn(cmd, args, {
+        cwd: projectRoot,
+        detached: true,
+        stdio: ['ignore', logFd, logFd],
+      });
+
+      child.unref();
+      closeSync(logFd);
+
+      console.log(
+        '✓ coze-coding-dev-sdk update triggered (running in background)',
+      );
+      console.log(`  Log file: ${logFile}`);
     } catch (error) {
-      console.error('✗ Failed to update coze-coding-dev-sdk:', error);
-      throw error;
+      console.error('✗ Failed to trigger coze-coding-dev-sdk update:', error);
+      console.log('  You can manually run: pnpm update coze-coding-dev-sdk');
     }
   },
 };

package/lib/__templates__/vite/vite.config.ts

@@ -4,6 +4,7 @@ export default defineConfig({
   server: {
     port: <%= port %>,
     host: '0.0.0.0',
+    allowedHosts: true,
     hmr: {
       overlay: true,
       path: '/hot/vite-hmr',

package/lib/__templates__/vite-vue/.coze

@@ -0,0 +1,12 @@
+[project]
+requires = ["nodejs-24"]
+
+[dev]
+build = ["bash", "./scripts/prepare.sh"]
+run = ["bash", "./scripts/dev.sh"]
+deps = ["git"] # -> apt install git
+
+[deploy]
+build = ["bash","./scripts/build.sh"]
+run = ["bash","./scripts/start.sh"]
+deps = ["git"] # -> apt install git

package/lib/__templates__/vite-vue/README.md

@@ -0,0 +1,342 @@
+# <%= appName %>
+
+这是一个基于 Vue 3 + TypeScript + Vite + Tailwind CSS 的现代化 Web 应用项目，由扣子编程 CLI 创建。
+
+## 快速开始
+
+### 启动开发服务器
+
+```bash
+coze dev
+```
+
+启动后，在浏览器中打开 [http://localhost:<%= port %>](http://localhost:<%= port %>) 查看应用。
+
+开发服务器支持热更新（HMR），修改代码后页面会自动刷新。
+
+### 构建生产版本
+
+```bash
+coze build
+```
+
+构建产物位于 `dist/` 目录，可直接部署到静态托管服务。
+
+### 预览生产版本
+
+```bash
+coze start
+```
+
+在本地启动一个静态服务器，预览生产构建的效果。
+
+## 项目结构
+
+```
+├── index.html              # HTML 入口文件
+├── src/
+│   ├── main.ts            # Vue 应用入口（初始化）
+│   ├── App.vue            # 根 Vue 组件
+│   ├── vite-env.d.ts      # Vite 类型声明
+│   └── index.css          # 全局样式（包含 Tailwind 指令）
+├── vite.config.ts         # Vite 配置（含 Vue 插件）
+├── tailwind.config.ts     # Tailwind CSS 配置
+└── tsconfig.json          # TypeScript 配置
+```
+
+## 核心开发规范
+
+### 1. 样式开发
+
+**使用 Tailwind CSS**
+
+本项目使用 Tailwind CSS 进行样式开发，支持亮色/暗色模式自动切换。
+
+```vue
+<template>
+  <div class="flex items-center justify-center min-h-screen bg-white dark:bg-black">
+    <h1 class="text-4xl font-bold text-black dark:text-white">
+      Hello World
+    </h1>
+  </div>
+</template>
+```
+
+**主题变量**
+
+主题变量定义在 `src/index.css` 中，支持自动适配系统主题：
+
+```css
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+```
+
+**常用 Tailwind 类名**
+
+- 布局：`flex`, `grid`, `container`, `mx-auto`
+- 间距：`p-4`, `m-4`, `gap-4`, `space-x-4`
+- 颜色：`bg-white`, `text-black`, `dark:bg-black`, `dark:text-white`
+- 排版：`text-lg`, `font-bold`, `leading-8`, `tracking-tight`
+- 响应式：`sm:`, `md:`, `lg:`, `xl:`
+
+### 2. 依赖管理
+
+**必须使用 pnpm 管理依赖**
+
+```bash
+# ✅ 安装依赖
+pnpm install
+
+# ✅ 添加新依赖
+pnpm add package-name
+
+# ✅ 添加开发依赖
+pnpm add -D package-name
+
+# ❌ 禁止使用 npm 或 yarn
+# npm install  # 错误！
+# yarn add     # 错误！
+```
+
+项目已配置 `preinstall` 脚本，使用其他包管理器会报错。
+
+### 3. TypeScript 开发
+
+**类型安全**
+
+充分利用 TypeScript 的类型系统，确保代码质量：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+
+// 定义接口
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+// 使用响应式数据和类型
+const user = ref<User>({
+  id: 1,
+  name: 'John Doe',
+  email: 'john@example.com'
+});
+
+// 使用类型化的函数
+const createUser = (data: User): void => {
+  console.log(`Creating user: ${data.name}`);
+};
+
+// 事件处理
+const handleClick = (): void => {
+  console.log('Button clicked');
+};
+</script>
+
+<template>
+  <div>
+    <p>{{ user.name }}</p>
+    <button @click="handleClick">Click me</button>
+  </div>
+</template>
+```
+
+**避免 any 类型**
+
+尽量避免使用 `any`，使用 `unknown` 或具体类型：
+
+```typescript
+// ❌ 不推荐
+function process(data: any) { }
+
+// ✅ 推荐
+function process(data: unknown) {
+  if (typeof data === 'string') {
+    console.log(data.toUpperCase());
+  }
+}
+```
+
+## 常见开发场景
+
+### 创建新组件
+
+在 `src/` 下创建新的 `.vue` 文件：
+
+```vue
+<!-- src/components/HelloWorld.vue -->
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Props {
+  msg: string;
+}
+
+const props = defineProps<Props>();
+const count = ref(0);
+
+const increment = (): void => {
+  count.value++;
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <h1 class="text-2xl font-bold">{{ msg }}</h1>
+    <p class="text-lg">Count: {{ count }}</p>
+    <button
+      @click="increment"
+      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+    >
+      Increment
+    </button>
+  </div>
+</template>
+```
+
+在 `App.vue` 中使用：
+
+```vue
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue';
+</script>
+
+<template>
+  <HelloWorld msg="Hello Vue 3!" />
+</template>
+```
+
+### 组合式 API（Composition API）
+
+使用 Vue 3 的 Composition API 管理组件逻辑：
+
+```vue
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+
+// 响应式状态
+const count = ref(0);
+const message = ref('Hello');
+
+// 计算属性
+const doubleCount = computed(() => count.value * 2);
+
+// 方法
+const increment = (): void => {
+  count.value++;
+};
+
+// 生命周期钩子
+onMounted(() => {
+  console.log('Component mounted');
+});
+</script>
+
+<template>
+  <div>
+    <p>{{ message }}</p>
+    <p>Count: {{ count }}, Double: {{ doubleCount }}</p>
+    <button @click="increment">Increment</button>
+  </div>
+</template>
+```
+
+### 数据获取
+
+使用 Vue 的响应式系统配合异步数据获取：
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+interface ApiData {
+  id: number;
+  title: string;
+}
+
+const data = ref<ApiData | null>(null);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const fetchData = async (): Promise<void> => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const response = await fetch('https://api.example.com/data');
+    data.value = await response.json();
+  } catch (err) {
+    error.value = 'Failed to fetch data';
+    console.error('Failed to fetch data:', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div>
+    <div v-if="loading">Loading...</div>
+    <div v-else-if="error" class="text-red-500">{{ error }}</div>
+    <div v-else-if="data">
+      <h2>{{ data.title }}</h2>
+      <p>ID: {{ data.id }}</p>
+    </div>
+  </div>
+</template>
+```
+
+### 环境变量
+
+在 `.env` 文件中定义环境变量（需以 `VITE_` 开头）：
+
+```bash
+VITE_API_URL=https://api.example.com
+```
+
+在代码中使用：
+
+```typescript
+const apiUrl = import.meta.env.VITE_API_URL;
+console.log(apiUrl); // https://api.example.com
+```
+
+## 技术栈
+
+- **框架**: Vue 3.x (Composition API)
+- **构建工具**: Vite 6.x
+- **语言**: TypeScript 5.x
+- **样式**: Tailwind CSS 3.x
+- **包管理器**: pnpm 9+
+
+## 参考文档
+
+- [Vue 3 官方文档](https://cn.vuejs.org/)
+- [Vue 3 Composition API](https://cn.vuejs.org/guide/extras/composition-api-faq.html)
+- [Vite 官方文档](https://cn.vitejs.dev/)
+- [TypeScript 官方文档](https://www.typescriptlang.org/zh/docs/)
+- [Tailwind CSS 文档](https://tailwindcss.com/docs)
+
+## 重要提示
+
+1. **必须使用 pnpm** 作为包管理器
+2. **使用 Vue 3 Composition API** (`<script setup>`) 进行组件开发
+3. **使用 TypeScript** 进行类型安全开发，为 props、emit 和 ref 添加类型
+4. **使用 Tailwind CSS** 进行样式开发，支持响应式和暗色模式
+5. **环境变量必须以 `VITE_` 开头** 才能在客户端代码中访问
+6. **开发时使用 `coze dev`**，支持热更新和快速刷新

package/lib/__templates__/vite-vue/_gitignore

@@ -0,0 +1,66 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Production build
+dist/
+build/
+out/
+
+# 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
+
+# Cache
+.cache/
+.eslintcache
+.stylelintcache
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS files
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+
+# TypeScript
+*.tsbuildinfo
+
+# Vite
+.vite/
+
+.coze-logs

package/lib/__templates__/vite-vue/_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__/vite-vue/eslint.config.mjs

@@ -0,0 +1,9 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  globalIgnores(['dist/**', 'node_modules/**']),
+]);

package/lib/__templates__/vite-vue/index.html

@@ -0,0 +1,13 @@
+<!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="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/lib/__templates__/vite-vue/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "<%= appName %>",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Vue 3 application with Vite + TypeScript",
+  "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": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "2.95.3",
+    "dotenv": "^17.2.3",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.20",
+    "coze-coding-dev-sdk": "^0.7.16",
+    "eslint": "^9",
+    "less": "^4.2.1",
+    "only-allow": "^1.2.2",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.0",
+    "typescript-eslint": "^8",
+    "vite": "^7.2.4",
+    "vue-tsc": "^2.2.0"
+  },
+  "packageManager": "pnpm@9.0.0",
+  "engines": {
+    "pnpm": ">=9.0.0"
+  }
+}