@coze-arch/cli 0.0.1-alpha.fc5c04 → 0.0.1-alpha.ff3d06

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coze-arch/cli",
-  "version": "0.0.1-alpha.fc5c04",
+  "version": "0.0.1-alpha.ff3d06",
   "private": false,
   "description": "coze coding devtools cli",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "ajv-formats": "^3.0.1",
     "change-case": "^5.4.4",
     "commander": "~12.1.0",
+    "debug": "^4.3.7",
     "ejs": "^3.1.10",
     "js-yaml": "^4.1.0",
     "minimist": "^1.2.5",
@@ -43,6 +44,7 @@
   },
   "devDependencies": {
     "@coze-arch/cli-logger": "workspace:*",
+    "@coze-arch/cli-slardar": "workspace:*",
     "@coze-arch/eslint-config": "workspace:*",
     "@coze-arch/monorepo-kits": "workspace:*",
     "@coze-arch/rollup-config": "workspace:*",
@@ -50,6 +52,8 @@
     "@coze-arch/vitest-config": "workspace:*",
     "@coze-coding/lambda": "workspace:*",
     "@inquirer/prompts": "^3.2.0",
+    "@playwright/test": "~1.55.0",
+    "@types/debug": "^4.1.12",
     "@types/ejs": "^3.1.5",
     "@types/iarna__toml": "^2.0.5",
     "@types/js-yaml": "^4.0.9",
@@ -57,14 +61,16 @@
     "@types/minimist": "^1.2.5",
     "@types/node": "^24",
     "@types/shelljs": "^0.10.0",
-    "@vitest/coverage-v8": "~4.0.16",
+    "@vitest/coverage-v8": "~4.0.18",
     "json-schema-to-typescript": "^15.0.3",
     "minimatch": "^10.0.1",
+    "playwright": "~1.55.0",
     "rollup": "^4.41.1",
     "sucrase": "^3.35.0",
+    "tree-kill": "^1.2.2",
     "tsx": "^4.20.6",
     "vite-tsconfig-paths": "^4.2.1",
-    "vitest": "~4.0.16"
+    "vitest": "~4.0.18"
   },
   "publishConfig": {
     "access": "public",

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

@@ -1,451 +0,0 @@
-# <%= 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 组件（包含 router-view）
-│   ├── router/
-│   │   └── index.ts       # Vue Router 路由配置
-│   ├── views/
-│   │   └── Home.vue       # 首页视图组件
-│   ├── vite-env.d.ts      # Vite 类型声明
-│   └── index.css          # 全局样式（包含 Tailwind 指令）
-├── vite.config.ts         # Vite 配置（含 Vue 插件）
-├── tailwind.config.ts     # Tailwind CSS 配置
-└── tsconfig.json          # TypeScript 配置
-```
-
-## 路由使用
-
-本项目集成了 Vue Router 4 进行页面路由管理，支持基于 History 模式的单页面应用导航。
-
-### 路由配置
-
-路由配置文件位于 `src/router/index.ts`：
-
-```typescript
-import { createRouter, createWebHistory } from 'vue-router';
-import type { RouteRecordRaw } from 'vue-router';
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    name: 'Home',
-    component: () => import('../views/Home.vue'),
-  },
-];
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-});
-
-export default router;
-```
-
-### 添加新页面
-
-1. **创建视图组件**：在 `src/views/` 目录下创建新的 Vue 组件
-
-```vue
-<!-- src/views/About.vue -->
-<script setup lang="ts">
-</script>
-
-<template>
-  <div>
-    <h1>About Page</h1>
-  </div>
-</template>
-```
-
-2. **注册路由**：在 `src/router/index.ts` 中添加路由配置
-
-```typescript
-const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    name: 'Home',
-    component: () => import('../views/Home.vue'),
-  },
-  {
-    path: '/about',
-    name: 'About',
-    component: () => import('../views/About.vue'),
-  },
-];
-```
-
-### 页面导航
-
-**使用 `<router-link>` 声明式导航**：
-
-```vue
-<template>
-  <nav>
-    <router-link to="/">首页</router-link>
-    <router-link to="/about">关于</router-link>
-  </nav>
-</template>
-```
-
-**使用 `router.push()` 编程式导航**：
-
-```typescript
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-// 导航到指定路径
-router.push('/about');
-
-// 带参数导航
-router.push({ name: 'About', params: { id: '123' } });
-```
-
-### 获取路由信息
-
-```typescript
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
-
-// 当前路径
-console.log(route.path);
-
-// 路由参数
-console.log(route.params);
-
-// 查询参数
-console.log(route.query);
-```
-
-## 核心开发规范
-
-### 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

@@ -1,66 +0,0 @@
-# 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/eslint.config.mjs

@@ -1,9 +0,0 @@
-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

@@ -1,13 +0,0 @@
-<!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

@@ -1,38 +0,0 @@
-{
-  "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",
-    "vue-router": "^4.5.0"
-  },
-  "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"
-  }
-}