@coze-arch/cli 0.0.1-alpha.de5a13 → 0.0.1-alpha.deaedf

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/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" />
+    </>
+  );
+};

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

@@ -0,0 +1,220 @@
+/**
+ * H5 端特殊样式注入
+ * 如无必要，请勿修改本文件
+ */
+
+const H5_BASE_STYLES = `
+/* H5 端隐藏 TabBar 空图标（只隐藏没有 src 的图标） */
+.weui-tabbar__icon:not([src]),
+.weui-tabbar__icon[src=''] {
+  display: none !important;
+}
+
+.weui-tabbar__item:has(.weui-tabbar__icon:not([src])) .weui-tabbar__label,
+.weui-tabbar__item:has(.weui-tabbar__icon[src='']) .weui-tabbar__label {
+  margin-top: 0 !important;
+}
+
+/* Vite 错误覆盖层无法选择文本的问题 */
+vite-error-overlay {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-user-select: text !important;
+}
+
+vite-error-overlay::part(window) {
+  max-width: 90vw;
+  padding: 10px;
+}
+
+.taro_page {
+  overflow: auto;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* H5 导航栏页面自动添加顶部间距 */
+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 = `
+/* PC 宽屏适配 - 基础布局 */
+@media (min-width: 769px) {
+  html {
+    font-size: 15px !important;
+  }
+
+  body {
+    background-color: #f3f4f6 !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+    min-height: 100vh !important;
+  }
+}
+`;
+
+const PC_WIDESCREEN_PHONE_FRAME = `
+/* PC 宽屏适配 - 手机框样式（有 TabBar 页面） */
+@media (min-width: 769px) {
+  .taro-tabbar__container {
+    width: 375px !important;
+    max-width: 375px !important;
+    height: calc(100vh - 40px) !important;
+    max-height: 900px !important;
+    background-color: #fff !important;
+    transform: translateX(0) !important;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
+    border-radius: 20px !important;
+    overflow: hidden !important;
+    position: relative !important;
+  }
+
+  .taro-tabbar__panel {
+    height: 100% !important;
+    overflow: auto !important;
+  }
+}
+
+/* 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 {
+    width: 375px !important;
+    max-width: 375px !important;
+    height: calc(100vh - 40px) !important;
+    max-height: 900px !important;
+    background-color: #fff !important;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
+    border-radius: 20px !important;
+    overflow: hidden !important;
+    position: relative !important;
+    transform: translateX(0) !important;
+  }
+
+  body.no-tabbar #app .taro_router {
+    height: 100% !important;
+    overflow: auto !important;
+  }
+}
+`;
+
+function injectStyles() {
+  const style = document.createElement('style');
+  style.innerHTML =
+    H5_BASE_STYLES + PC_WIDESCREEN_STYLES + PC_WIDESCREEN_PHONE_FRAME;
+  document.head.appendChild(style);
+}
+
+function setupTabbarDetection() {
+  const checkTabbar = () => {
+    const hasTabbar = !!document.querySelector('.taro-tabbar__container');
+    document.body.classList.toggle('no-tabbar', !hasTabbar);
+  };
+
+  checkTabbar();
+
+  const observer = new MutationObserver(checkTabbar);
+  observer.observe(document.body, { childList: true, subtree: true });
+}
+
+export function injectH5Styles() {
+  if (TARO_ENV !== 'h5') return;
+
+  injectStyles();
+  setupTabbarDetection();
+}

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

@@ -0,0 +1,18 @@
+import { useLaunch } from '@tarojs/taro';
+import { PropsWithChildren } from 'react';
+import { injectH5Styles } from './h5-styles';
+import { devDebug } from './dev-debug';
+import { H5Container } from './h5-container';
+
+export const Preset = ({ children }: PropsWithChildren) => {
+  useLaunch(() => {
+    devDebug();
+    injectH5Styles();
+  });
+
+  if (TARO_ENV === 'h5') {
+    return <H5Container>{children}</H5Container>;
+  }
+
+  return <>{children}</>;
+};