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

package/lib/__templates__/taro/src/lib/measure.ts

@@ -0,0 +1,115 @@
+import Taro from '@tarojs/taro'
+import { canUseDOM, isH5 } from './platform'
+
+export type Rect = { left: number; top: number; width: number; height: number }
+
+const toNumber = (v: unknown) => {
+    if (typeof v === 'number') return v
+    if (typeof v === 'string') {
+        const n = parseFloat(v)
+        return Number.isFinite(n) ? n : 0
+    }
+    return 0
+}
+
+const normalizeRect = (r: any): Rect | null => {
+    if (!r) return null
+    return {
+        left: toNumber(r.left),
+        top: toNumber(r.top),
+        width: toNumber(r.width),
+        height: toNumber(r.height),
+    }
+}
+
+export const getViewport = () => {
+    if (isH5() && canUseDOM()) {
+        return { width: window.innerWidth, height: window.innerHeight }
+    }
+    try {
+        const info = Taro.getSystemInfoSync()
+        return {
+            width: toNumber(info.windowWidth),
+            height: toNumber(info.windowHeight),
+        }
+    } catch {
+        return { width: 375, height: 667 }
+    }
+}
+
+const getRectH5 = (id: string): Rect | null => {
+    if (!isH5() || !canUseDOM()) return null
+    const el = document.getElementById(id)
+    if (!el) return null
+    const r = el.getBoundingClientRect()
+    return normalizeRect(r)
+}
+
+export const getRectById = (id: string): Promise<Rect | null> => {
+    const h5Rect = getRectH5(id)
+    if (h5Rect) return Promise.resolve(h5Rect)
+    return new Promise(resolve => {
+        const query = Taro.createSelectorQuery()
+        query
+            .select(`#${id}`)
+            .boundingClientRect(res => {
+                const rect = Array.isArray(res) ? res[0] : res
+                resolve(normalizeRect(rect))
+            })
+            .exec()
+    })
+}
+
+export const computePosition = (params: {
+    triggerRect: Rect
+    contentRect: Rect
+    align: 'start' | 'center' | 'end'
+    side: 'top' | 'bottom' | 'left' | 'right'
+    sideOffset: number
+}) => {
+    const { triggerRect, contentRect, align, side, sideOffset } = params
+    const { width: vw, height: vh } = getViewport()
+    const margin = 8
+
+    const crossStart =
+        side === 'left' || side === 'right' ? triggerRect.top : triggerRect.left
+    const crossSize =
+        side === 'left' || side === 'right'
+            ? triggerRect.height
+            : triggerRect.width
+    const contentCrossSize =
+        side === 'left' || side === 'right'
+            ? contentRect.height
+            : contentRect.width
+
+    const cross = (() => {
+        if (align === 'start') return crossStart
+        if (align === 'end') return crossStart + crossSize - contentCrossSize
+        return crossStart + crossSize / 2 - contentCrossSize / 2
+    })()
+
+    let left = 0
+    let top = 0
+
+    if (side === 'bottom' || side === 'top') {
+        left = cross
+        top =
+            side === 'bottom'
+                ? triggerRect.top + triggerRect.height + sideOffset
+                : triggerRect.top - contentRect.height - sideOffset
+    } else {
+        top = cross
+        left =
+            side === 'right'
+                ? triggerRect.left + triggerRect.width + sideOffset
+                : triggerRect.left - contentRect.width - sideOffset
+    }
+
+    const maxLeft = Math.max(margin, vw - contentRect.width - margin)
+    const maxTop = Math.max(margin, vh - contentRect.height - margin)
+
+    left = Math.min(Math.max(left, margin), maxLeft)
+    top = Math.min(Math.max(top, margin), maxTop)
+
+    return { left, top }
+}

package/lib/__templates__/taro/src/lib/platform.ts

@@ -0,0 +1,12 @@
+import Taro from "@tarojs/taro"
+
+export const canUseDOM = () => typeof window !== "undefined" && typeof document !== "undefined"
+
+export const isH5 = () => {
+  try {
+    return Taro.getEnv() === Taro.ENV_TYPE.WEB
+  } catch {
+    return canUseDOM()
+  }
+}
+

package/lib/__templates__/taro/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/lib/__templates__/taro/src/presets/h5-navbar.tsx

@@ -49,16 +49,26 @@ const getTabBarPages = (): Set<string> => {
   );
 };
 
+const getHomePage = (): string => {
+  const app = Taro.getApp();
+  return app?.config?.pages?.[0] || 'pages/index/index';
+};
+
+const cleanPath = (path: string): string => path.replace(/^\//, '');
+
 const computeLeftIcon = (
   route: string,
   tabBarPages: Set<string>,
   historyLength: number,
+  homePage: string,
 ): LeftIcon => {
   if (!route) return LeftIcon.None;
 
-  const isHomePage =
-    route === 'pages/index/index' || route === '/pages/index/index';
-  const isTabBarPage = tabBarPages.has(route);
+  const cleanRoute = cleanPath(route);
+  const cleanHomePage = cleanPath(homePage);
+  const isHomePage = cleanRoute === cleanHomePage;
+  const isTabBarPage =
+    tabBarPages.has(cleanRoute) || tabBarPages.has(`/${cleanRoute}`);
   const hasHistory = historyLength > 1;
 
   if (isTabBarPage || isHomePage) return LeftIcon.None;
@@ -72,15 +82,27 @@ export const H5NavBar = () => {
 
   const updateNavState = useCallback(() => {
     const pages = Taro.getCurrentPages();
+    if (pages.length === 0) {
+      setNavState(prev => ({ ...prev, visible: false }));
+      return;
+    }
+
     const currentPage = pages[pages.length - 1];
     const route = currentPage?.route || '';
+    if (!route) return;
+
     const pageConfig: NavConfig = (currentPage as any)?.config || {};
     const globalConfig = getGlobalWindowConfig();
     const tabBarPages = getTabBarPages();
+    const homePage = getHomePage();
+
+    const cleanRoute = cleanPath(route);
+    const cleanHomePage = cleanPath(homePage);
+
+    const isHomePage = cleanRoute === cleanHomePage;
+    const isTabBarPage =
+      tabBarPages.has(cleanRoute) || tabBarPages.has(`/${cleanRoute}`);
 
-    const isHomePage =
-      route === 'pages/index/index' || route === '/pages/index/index';
-    const isTabBarPage = tabBarPages.has(route);
     const shouldHideNav =
       tabBarPages.size <= 1 &&
       pages.length <= 1 &&
@@ -89,6 +111,7 @@ export const H5NavBar = () => {
     setNavState({
       visible: !shouldHideNav,
       title:
+        document.title ||
         pageConfig.navigationBarTitleText ||
         globalConfig.navigationBarTitleText ||
         '',
@@ -106,7 +129,7 @@ export const H5NavBar = () => {
         pageConfig.transparentTitle || globalConfig.transparentTitle || 'none',
       leftIcon: shouldHideNav
         ? LeftIcon.None
-        : computeLeftIcon(route, tabBarPages, pages.length),
+        : computeLeftIcon(cleanRoute, tabBarPages, pages.length, cleanHomePage),
     });
   }, []);
 
@@ -123,15 +146,26 @@ export const H5NavBar = () => {
   useEffect(() => {
     if (TARO_ENV !== 'h5') return;
 
-    const titleEl = document.querySelector('title') || document.head;
-    const observer = new MutationObserver(() => updateNavState());
-    observer.observe(titleEl, {
+    let timer: NodeJS.Timeout | null = null;
+    const observer = new MutationObserver(() => {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        updateNavState();
+      }, 50);
+    });
+
+    observer.observe(document.head, {
       subtree: true,
       childList: true,
       characterData: true,
     });
 
-    return () => observer.disconnect();
+    updateNavState();
+
+    return () => {
+      observer.disconnect();
+      if (timer) clearTimeout(timer);
+    };
   }, [updateNavState]);
 
   const shouldRender =
@@ -165,7 +199,10 @@ export const H5NavBar = () => {
   };
 
   const handleBack = () => Taro.navigateBack();
-  const handleGoHome = () => Taro.reLaunch({ url: '/pages/index/index' });
+  const handleGoHome = () => {
+    const homePage = getHomePage();
+    Taro.reLaunch({ url: `/${homePage}` });
+  };
 
   return (
     <>

package/lib/__templates__/taro/src/presets/h5-styles.ts

@@ -52,6 +52,72 @@ vite-error-overlay::part(window) {
 body.h5-navbar-visible .taro_page {
   padding-top: 44px;
 }
+
+body.h5-navbar-visible .toaster[data-position^="top"] {
+  top: 44px !important;
+}
+
+/* Sheet 组件在 H5 导航栏下的位置修正 */
+body.h5-navbar-visible .sheet-content:not([data-side="bottom"]) {
+    top: 44px !important;
+}
+
+/*
+ * H5 端 rem 适配：与小程序 rpx 缩放一致
+ * 375px 屏幕：1rem = 16px，小程序 32rpx = 16px
+ */
+html {
+    font-size: 4vw !important;
+}
+
+/* H5 端组件默认样式修复 */
+taro-view-core {
+    display: block;
+}
+
+taro-text-core {
+    display: inline;
+}
+
+taro-input-core {
+    display: block;
+    width: 100%;
+}
+
+taro-input-core input {
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+}
+
+taro-input-core.taro-otp-hidden-input input {
+    color: transparent;
+    caret-color: transparent;
+    -webkit-text-fill-color: transparent;
+}
+
+/* 全局按钮样式重置 */
+taro-button-core,
+button {
+    margin: 0 !important;
+    padding: 0 !important;
+    line-height: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+taro-button-core::after,
+button::after {
+    border: none;
+}
+
+taro-textarea-core > textarea,
+.taro-textarea,
+textarea.taro-textarea {
+    resize: none !important;
+}
 `;
 
 const PC_WIDESCREEN_STYLES = `
@@ -93,6 +159,18 @@ const PC_WIDESCREEN_PHONE_FRAME = `
   }
 }
 
+/* PC 宽屏适配 - Toast 定位到手机框范围内 */
+@media (min-width: 769px) {
+  body .toaster {
+    left: 50% !important;
+    right: auto !important;
+    width: 375px !important;
+    max-width: 375px !important;
+    transform: translateX(-50%) !important;
+    box-sizing: border-box !important;
+  }
+}
+
 /* PC 宽屏适配 - 手机框样式（无 TabBar 页面，通过 JS 添加 no-tabbar 类） */
 @media (min-width: 769px) {
   body.no-tabbar #app {

package/lib/__templates__/templates.json

@@ -63,9 +63,9 @@
       }
     },
     {
-      "name": "taro",
-      "description": "Taro（小程序 + H5）：`coze init ${COZE_WORKSPACE_PATH} --template taro`\n- 适用：微信小程序、H5 跨端应用\n- 前后端分离架构：Taro 4 + NestJS\n- 支持微信小程序和 H5 双端构建\n- 使用 TailwindCSS + weapp-tailwindcss 实现跨端样式",
-      "location": "./taro",
+      "name": "nuxt-vue",
+      "description": "Nuxt.js（服务端 + Vue）：`coze init ${COZE_WORKSPACE_PATH} --template nuxt-vue`\n- 适用：全栈应用、需要服务端接口能力的 Vue 项目\n- 特点：\n    - **服务端能力**：内置服务端 API 路由，可直接创建后端接口\n    - **Vue 3**：基于最新的 Vue 3 Composition API\n    - **Vite**：使用 Vite 作为构建工具，开发体验极佳\n    - **TypeScript**：完整的 TypeScript 支持\n    - **文件路由**：基于文件系统的自动路由\n    - **项目理解加速**：可依赖项目下 `package.json` 和 `nuxt.config.ts` 理解项目配置",
+      "location": "./nuxt-vue",
       "paramsSchema": {
         "type": "object",
         "properties": {
@@ -80,14 +80,14 @@
             "default": 5000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "H5 development server port"
+            "description": "Development server port (for Nuxt dev server)"
           },
-          "serverPort": {
+          "hmrPort": {
             "type": "number",
-            "default": 3000,
+            "default": 6000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "NestJS backend server port"
+            "description": "Hot Module Replacement (HMR) port"
           }
         },
         "required": [],
@@ -95,9 +95,9 @@
       }
     },
     {
-      "name": "vite",
-      "description": "Vite（简单项目）：`coze init ${COZE_WORKSPACE_PATH} --template vite`\n- 适用：轻量级 SPA、纯前端交互、仪表盘等轻量级项目。",
-      "location": "./vite",
+      "name": "taro",
+      "description": "Taro（小程序 + H5）：`coze init ${COZE_WORKSPACE_PATH} --template taro`\n- 适用：微信小程序、H5 跨端应用\n- 前后端分离架构：Taro 4 + NestJS\n- 支持微信小程序和 H5 双端构建\n- 使用 TailwindCSS + weapp-tailwindcss 实现跨端样式",
+      "location": "./taro",
       "paramsSchema": {
         "type": "object",
         "properties": {
@@ -112,14 +112,14 @@
             "default": 5000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "Development server port"
+            "description": "H5 development server port"
           },
-          "hmrPort": {
+          "serverPort": {
             "type": "number",
-            "default": 6000,
+            "default": 3000,
             "minimum": 1024,
             "maximum": 65535,
-            "description": "Development HMR server port"
+            "description": "NestJS backend server port"
           }
         },
         "required": [],
@@ -127,9 +127,9 @@
       }
     },
     {
-      "name": "vite-vue",
-      "description": "Vite + Vue 3（Vue 项目）：`coze init ${COZE_WORKSPACE_PATH} --template vite-vue`\n- 适用：使用 Vue 3 框架的 SPA 应用、交互式前端、组件化仪表盘等项目。",
-      "location": "./vite-vue",
+      "name": "vite",
+      "description": "Vite（简单项目）：`coze init ${COZE_WORKSPACE_PATH} --template vite`\n- 适用：轻量级 SPA、纯前端交互、仪表盘等轻量级项目。",
+      "location": "./vite",
       "paramsSchema": {
         "type": "object",
         "properties": {

package/lib/__templates__/vite/AGENTS.md

@@ -0,0 +1,41 @@
+# 项目上下文
+
+## 技术栈
+
+- **核心**: Vite 7, TypeScript, Express
+- **UI**: Tailwind CSS
+
+## 目录结构
+
+```
+├── scripts/            # 构建与启动脚本
+│   ├── build.sh        # 构建脚本
+│   ├── dev.sh          # 开发环境启动脚本
+│   ├── prepare.sh      # 预处理脚本
+│   └── start.sh        # 生产环境启动脚本
+├── server/             # 服务端逻辑
+│   ├── routes/         # API 路由
+│   ├── server.ts       # Express 服务入口
+│   └── vite.ts         # Vite 中间件集成
+├── src/                # 前端源码
+│   ├── index.css       # 全局样式
+│   ├── index.ts        # 客户端入口
+│   └── main.ts         # 主逻辑
+├── index.html          # 入口 HTML
+├── package.json        # 项目依赖管理
+├── tsconfig.json       # TypeScript 配置
+└── vite.config.ts      # Vite 配置
+```
+
+## 包管理规范
+
+**仅允许使用 pnpm** 作为包管理器，**严禁使用 npm 或 yarn**。
+**常用命令**：
+- 安装依赖：`pnpm add <package>`
+- 安装开发依赖：`pnpm add -D <package>`
+- 安装所有依赖：`pnpm install`
+- 移除依赖：`pnpm remove <package>`
+
+## 开发规范
+
+- 使用 Tailwind CSS 进行样式开发