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

package/lib/__templates__/taro/src/lib/hooks/use-keyboard-offset.ts

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import Taro from '@tarojs/taro'
+
+// Global state to track keyboard height across the app
+let globalKeyboardHeight = 0
+const listeners = new Set<(height: number) => void>()
+
+const isNotWeb = Taro.getEnv() !== Taro.ENV_TYPE.WEB
+
+if (isNotWeb && typeof Taro.onKeyboardHeightChange === 'function') {
+    Taro.onKeyboardHeightChange(res => {
+        globalKeyboardHeight = res.height
+        listeners.forEach(listener => listener(globalKeyboardHeight))
+    })
+}
+
+export function useKeyboardOffset() {
+    const [offset, setOffset] = React.useState(globalKeyboardHeight)
+
+    React.useEffect(() => {
+        if (!isNotWeb) return
+
+        const handler = (height: number) => {
+            setOffset(height)
+        }
+
+        listeners.add(handler)
+        // Update immediately with current global value in case it changed
+        setOffset(globalKeyboardHeight)
+
+        return () => {
+            listeners.delete(handler)
+        }
+    }, [])
+
+    return offset
+}

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/network.ts

@@ -0,0 +1,39 @@
+import Taro from '@tarojs/taro'
+
+/**
+ * 网络请求模块
+ * 封装 Taro.request、Taro.uploadFile、Taro.downloadFile，自动添加项目域名前缀
+ * 如果请求的 url 以 http:// 或 https:// 开头，则不会添加域名前缀
+ *
+ * IMPORTANT: 项目已经全局注入 PROJECT_DOMAIN
+ * IMPORTANT: 除非你需要添加全局参数，如给所有请求加上 header，否则不能修改此文件
+ */
+export namespace Network {
+    const createUrl = (url: string): string => {
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            return url
+        }
+        return `${PROJECT_DOMAIN}${url}`
+    }
+
+    export const request: typeof Taro.request = option => {
+        return Taro.request({
+            ...option,
+            url: createUrl(option.url),
+        })
+    }
+
+    export const uploadFile: typeof Taro.uploadFile = option => {
+        return Taro.uploadFile({
+            ...option,
+            url: createUrl(option.url),
+        })
+    }
+
+    export const downloadFile: typeof Taro.downloadFile = option => {
+        return Taro.downloadFile({
+            ...option,
+            url: createUrl(option.url),
+        })
+    }
+}

package/lib/__templates__/taro/src/pages/index/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '首页'
+})

package/lib/__templates__/taro/src/pages/index/index.css

@@ -0,0 +1 @@
+/* 优先使用 tailwindcss，如无必要请不要使用css */

package/lib/__templates__/taro/src/pages/index/index.tsx

@@ -0,0 +1,33 @@
+import { View, Text, Image } from '@tarojs/components';
+import { useLoad } from '@tarojs/taro';
+import { Network } from '@/network';
+import './index.css';
+
+/**
+ * 默认首页，直接覆盖本页内容
+ */
+const IndexPage = () => {
+  useLoad(async () => {
+    const res = await Network.request({ url: '/api/hello' });
+    console.log(res.data);
+  });
+
+  return (
+    <View className="w-full h-full flex flex-col justify-center items-center gap-1">
+      <Image
+        className="w-32 h-28"
+        src="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze-coding/icon/coze-coding.gif"
+      />
+      <View className="self-stretch flex flex-col justify-start items-start gap-2">
+        <Text className="self-stretch text-center justify-start text-base-accent-foreground text-base font-bold">
+          应用开发中
+        </Text>
+        <Text className="self-stretch text-center justify-start text-base-muted-foreground text-sm font-normal">
+          请稍候，界面即将呈现
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default IndexPage;

package/lib/__templates__/taro/src/presets/dev-debug.ts

@@ -0,0 +1,23 @@
+import Taro from '@tarojs/taro';
+
+/**
+ * 小程序调试工具
+ * 在开发版/体验版自动开启调试模式
+ * 支持微信小程序和抖音小程序
+ */
+export function devDebug() {
+  const env = Taro.getEnv();
+  if (env === Taro.ENV_TYPE.WEAPP || env === Taro.ENV_TYPE.TT) {
+    try {
+      const accountInfo = Taro.getAccountInfoSync();
+      const envVersion = accountInfo.miniProgram.envVersion;
+      console.log('[Debug] envVersion:', envVersion);
+
+      if (envVersion !== 'release') {
+        Taro.setEnableDebug({ enableDebug: true });
+      }
+    } catch (error) {
+      console.error('[Debug] 开启调试模式失败:', error);
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import { H5NavBar } from './h5-navbar';
+
+export const H5Container = ({ children }: PropsWithChildren) => {
+  if (TARO_ENV !== 'h5') {
+    return <>{children}</>;
+  }
+
+  return (
+    <>
+      <H5NavBar />
+      {children}
+    </>
+  );
+};

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

@@ -0,0 +1,238 @@
+import { View, Text } from '@tarojs/components';
+import Taro, { useDidShow, usePageScroll } from '@tarojs/taro';
+import { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, House } from 'lucide-react-taro';
+
+interface NavConfig {
+  navigationBarTitleText?: string;
+  navigationBarBackgroundColor?: string;
+  navigationBarTextStyle?: 'black' | 'white';
+  navigationStyle?: 'default' | 'custom';
+  transparentTitle?: 'none' | 'always' | 'auto';
+}
+
+enum LeftIcon {
+  Back = 'back',
+  Home = 'home',
+  None = 'none',
+}
+
+interface NavState {
+  visible: boolean;
+  title: string;
+  bgColor: string;
+  textStyle: 'black' | 'white';
+  navStyle: 'default' | 'custom';
+  transparent: 'none' | 'always' | 'auto';
+  leftIcon: LeftIcon;
+}
+
+const DEFAULT_NAV_STATE: NavState = {
+  visible: false,
+  title: '',
+  bgColor: '#ffffff',
+  textStyle: 'black',
+  navStyle: 'default',
+  transparent: 'none',
+  leftIcon: LeftIcon.None,
+};
+
+const getGlobalWindowConfig = (): Partial<NavConfig> => {
+  const app = Taro.getApp();
+  return app?.config?.window || {};
+};
+
+const getTabBarPages = (): Set<string> => {
+  const tabBar = Taro.getApp()?.config?.tabBar;
+  return new Set(
+    tabBar?.list?.map((item: { pagePath: string }) => item.pagePath) || [],
+  );
+};
+
+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 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;
+  if (hasHistory) return LeftIcon.Back;
+  return LeftIcon.Home;
+};
+
+export const H5NavBar = () => {
+  const [navState, setNavState] = useState<NavState>(DEFAULT_NAV_STATE);
+  const [scrollOpacity, setScrollOpacity] = useState(0);
+
+  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 shouldHideNav =
+      tabBarPages.size <= 1 &&
+      pages.length <= 1 &&
+      (isHomePage || isTabBarPage);
+
+    setNavState({
+      visible: !shouldHideNav,
+      title:
+        document.title ||
+        pageConfig.navigationBarTitleText ||
+        globalConfig.navigationBarTitleText ||
+        '',
+      bgColor:
+        pageConfig.navigationBarBackgroundColor ||
+        globalConfig.navigationBarBackgroundColor ||
+        '#ffffff',
+      textStyle:
+        pageConfig.navigationBarTextStyle ||
+        globalConfig.navigationBarTextStyle ||
+        'black',
+      navStyle:
+        pageConfig.navigationStyle || globalConfig.navigationStyle || 'default',
+      transparent:
+        pageConfig.transparentTitle || globalConfig.transparentTitle || 'none',
+      leftIcon: shouldHideNav
+        ? LeftIcon.None
+        : computeLeftIcon(cleanRoute, tabBarPages, pages.length, cleanHomePage),
+    });
+  }, []);
+
+  useDidShow(() => {
+    updateNavState();
+  });
+
+  usePageScroll(({ scrollTop }) => {
+    if (navState.transparent === 'auto') {
+      setScrollOpacity(Math.min(scrollTop / 100, 1));
+    }
+  });
+
+  useEffect(() => {
+    if (TARO_ENV !== 'h5') return;
+
+    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,
+    });
+
+    updateNavState();
+
+    return () => {
+      observer.disconnect();
+      if (timer) clearTimeout(timer);
+    };
+  }, [updateNavState]);
+
+  const shouldRender =
+    TARO_ENV === 'h5' && navState.visible && navState.navStyle !== 'custom';
+
+  useEffect(() => {
+    if (TARO_ENV !== 'h5') return;
+    if (shouldRender) {
+      document.body.classList.add('h5-navbar-visible');
+    } else {
+      document.body.classList.remove('h5-navbar-visible');
+    }
+  }, [shouldRender]);
+
+  if (!shouldRender) {
+    return <></>;
+  }
+
+  const iconColor = navState.textStyle === 'white' ? '#fff' : '#333';
+  const textColorClass =
+    navState.textStyle === 'white' ? 'text-white' : 'text-gray-800';
+
+  const getBgStyle = () => {
+    if (navState.transparent === 'always') {
+      return { backgroundColor: 'transparent' };
+    }
+    if (navState.transparent === 'auto') {
+      return { backgroundColor: navState.bgColor, opacity: scrollOpacity };
+    }
+    return { backgroundColor: navState.bgColor };
+  };
+
+  const handleBack = () => Taro.navigateBack();
+  const handleGoHome = () => {
+    const homePage = getHomePage();
+    Taro.reLaunch({ url: `/${homePage}` });
+  };
+
+  return (
+    <>
+      <View
+        className="fixed top-0 left-0 right-0 h-11 flex items-center justify-center z-1000"
+        style={getBgStyle()}
+      >
+        {navState.leftIcon === LeftIcon.Back && (
+          <View
+            className="absolute left-2 top-1/2 -translate-y-1/2 p-1 flex items-center justify-center"
+            onClick={handleBack}
+          >
+            <ChevronLeft size={24} color={iconColor} />
+          </View>
+        )}
+        {navState.leftIcon === LeftIcon.Home && (
+          <View
+            className="absolute left-2 top-1/2 -translate-y-1/2 p-1 flex items-center justify-center"
+            onClick={handleGoHome}
+          >
+            <House size={22} color={iconColor} />
+          </View>
+        )}
+        <Text
+          className={`text-base font-medium max-w-3/5 truncate ${textColorClass}`}
+        >
+          {navState.title}
+        </Text>
+      </View>
+      <View className="h-11 shrink-0" />
+    </>
+  );
+};