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

package/lib/__templates__/expo/client/app.config.ts

@@ -1,71 +1,76 @@
 import { ExpoConfig, ConfigContext } from 'expo/config';
 
+const appName = process.env.COZE_PROJECT_NAME || process.env.EXPO_PUBLIC_COZE_PROJECT_NAME || '应用';
+const projectId = process.env.COZE_PROJECT_ID || process.env.EXPO_PUBLIC_COZE_PROJECT_ID;
+const slugAppName = projectId ? `app${projectId}` : 'myapp';
+
 export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     ...config,
-      "name": "${app_name}",
-      "slug": "${slug}",
-      "version": "1.0.0",
-      "orientation": "portrait",
-      "icon": "./assets/images/icon.png",
-      "scheme": "myapp",
-      "userInterfaceStyle": "automatic",
-      "newArchEnabled": true,
-      "ios": {
-        "supportsTablet": true
+    "name": appName,
+    "slug": slugAppName,
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
       },
-      "android": {
-        "adaptiveIcon": {
-          "foregroundImage": "./assets/images/adaptive-icon.png",
+      "package": `com.anonymous.x${projectId || '0'}`
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "single",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      process.env.EXPO_PUBLIC_BACKEND_BASE_URL ? [
+        "expo-router",
+        {
+          "origin": process.env.EXPO_PUBLIC_BACKEND_BASE_URL
+        }
+      ] : 'expo-router',
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
           "backgroundColor": "#ffffff"
         }
-      },
-      "web": {
-        "bundler": "metro",
-        "output": "single",
-        "favicon": "./assets/images/favicon.png"
-      },
-      "plugins": [
-        process.env.EXPO_PUBLIC_BACKEND_BASE_URL ? [
-          "expo-router",
-          {
-            "origin": process.env.EXPO_PUBLIC_BACKEND_BASE_URL
-          }
-        ] : 'expo-router',
-        [
-          "expo-splash-screen",
-          {
-            "image": "./assets/images/splash-icon.png",
-            "imageWidth": 200,
-            "resizeMode": "contain",
-            "backgroundColor": "#ffffff"
-          }
-        ],
-        [
-          "expo-image-picker",
-          {
-            "photosPermission": "允许${app_name}访问您的相册，以便您上传或保存图片。",
-            "cameraPermission": "允许${app_name}使用您的相机，以便您直接拍摄照片上传。",
-            "microphonePermission": "允许${app_name}访问您的麦克风，以便您拍摄带有声音的视频。"
-          }
-        ],
-        [
-          "expo-location",
-          {
-            "locationWhenInUsePermission": "${app_name}需要访问您的位置以提供周边服务及导航功能。"
-          }
-        ],
-        [
-          "expo-camera",
-          {
-            "cameraPermission": "${app_name}需要访问相机以拍摄照片和视频。",
-            "microphonePermission": "${app_name}需要访问麦克风以录制视频声音。",
-            "recordAudioAndroid": true
-          }
-        ]
       ],
-      "experiments": {
-        "typedRoutes": true
-      }
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": `允许${appName}访问您的相册，以便您上传或保存图片。`,
+          "cameraPermission": `允许${appName}使用您的相机，以便您直接拍摄照片上传。`,
+          "microphonePermission": `允许${appName}访问您的麦克风，以便您拍摄带有声音的视频。`
+        }
+      ],
+      [
+        "expo-location",
+        {
+          "locationWhenInUsePermission": `${appName}需要访问您的位置以提供周边服务及导航功能。`
+        }
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": `${appName}需要访问相机以拍摄照片和视频。`,
+          "microphonePermission": `${appName}需要访问麦克风以录制视频声音。`,
+          "recordAudioAndroid": true
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
   }
 }

package/lib/__templates__/expo/client/{src/components → components}/Screen.tsx

@@ -197,26 +197,10 @@ export const Screen = ({
   // 强制禁用 iOS 自动调整内容区域，完全由手动 padding 控制，消除系统自动计算带来的多余空白
   const contentInsetBehaviorIOS = 'never';
 
-  // 1. 外层容器样式
-  // 负责：背景色、Top/Left/Right 安全区、以及非滚动模式下的 Bottom 安全区
-  const childArray = React.Children.toArray(children);
-  let firstChild: React.ReactElement<any, any> | null = null;
-  for (let i = 0; i < childArray.length; i++) {
-    const el = childArray[i];
-    if (React.isValidElement(el)) { firstChild = el as React.ReactElement<any, any>; break; }
-  }
-  const firstChildHasInlinePaddingTop = (() => {
-    if (!firstChild) return false;
-    const st: any = (firstChild as any).props?.style;
-    const arr = Array.isArray(st) ? st : st ? [st] : [];
-    return arr.some((s) => s && typeof s === 'object' && typeof (s as any).paddingTop === 'number' && (s as any).paddingTop > 10);
-  })();
-  const applyTopInset = hasTop && !firstChildHasInlinePaddingTop;
-
   const wrapperStyle: ViewStyle = {
     flex: 1,
     backgroundColor,
-    paddingTop: applyTopInset ? insets.top : 0,
+    paddingTop: hasTop ? insets.top : 0,
     paddingLeft: hasLeft ? insets.left : 0,
     paddingRight: hasRight ? insets.right : 0,
     // 当页面不使用外层 ScrollView 时（子树本身可滚动），由外层 View 负责底部安全区

package/lib/__templates__/expo/client/{src/components → components}/ThemedView.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { useTheme } from '@/hooks/useTheme';
 
-type BackgroundLevel = 'root' | 'default' | 'secondary' | 'tertiary';
+type BackgroundLevel = 'root' | 'default' | 'tertiary';
 
 interface ThemedViewProps extends ViewProps {
   level?: BackgroundLevel;
@@ -12,7 +12,6 @@ interface ThemedViewProps extends ViewProps {
 const backgroundMap: Record<BackgroundLevel, string> = {
   root: 'backgroundRoot',
   default: 'backgroundDefault',
-  secondary: 'backgroundSecondary',
   tertiary: 'backgroundTertiary',
 };
 

package/lib/__templates__/expo/client/constants/theme.ts

@@ -0,0 +1,177 @@
+export const Colors = {
+  light: {
+    textPrimary: "#1C1917",
+    textSecondary: "#78716c",
+    textMuted: "#9CA3AF",
+    primary: "#4F46E5", // Indigo-600 - 品牌主色，代表科技与智能
+    accent: "#8B5CF6", // Violet-500 - 辅助色，代表创造力
+    success: "#10B981", // Emerald-500
+    error: "#EF4444",
+    backgroundRoot: "#FAFAFA",
+    backgroundDefault: "#FFFFFF",
+    backgroundTertiary: "#F9FAFB", // 更浅的背景色，用于去线留白
+    buttonPrimaryText: "#FFFFFF",
+    tabIconSelected: "#4F46E5",
+    border: "#E5E7EB",
+    borderLight: "#F3F4F6",
+  },
+  dark: {
+    textPrimary: "#FAFAF9",
+    textSecondary: "#A8A29E",
+    textMuted: "#6F767E",
+    primary: "#818CF8", // Indigo-400 - 暗色模式品牌主色
+    accent: "#A78BFA", // Violet-400
+    success: "#34D399",
+    error: "#F87171",
+    backgroundRoot: "#09090B", // 更深的背景色
+    backgroundDefault: "#1C1C1E",
+    backgroundTertiary: "#1F1F22", // 暗色模式去线留白背景
+    buttonPrimaryText: "#09090B",
+    tabIconSelected: "#818CF8",
+    border: "#3F3F46",
+    borderLight: "#27272A",
+  },
+};
+
+export const Spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 32,
+  "4xl": 40,
+  "5xl": 48,
+  "6xl": 64,
+};
+
+export const BorderRadius = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 28,
+  "4xl": 32,
+  full: 9999,
+};
+
+export const Typography = {
+  display: {
+    fontSize: 112,
+    lineHeight: 112,
+    fontWeight: "200" as const,
+    letterSpacing: -4,
+  },
+  displayLarge: {
+    fontSize: 112,
+    lineHeight: 112,
+    fontWeight: "200" as const,
+    letterSpacing: -2,
+  },
+  displayMedium: {
+    fontSize: 48,
+    lineHeight: 56,
+    fontWeight: "200" as const,
+  },
+  h1: {
+    fontSize: 32,
+    lineHeight: 40,
+    fontWeight: "700" as const,
+  },
+  h2: {
+    fontSize: 28,
+    lineHeight: 36,
+    fontWeight: "700" as const,
+  },
+  h3: {
+    fontSize: 24,
+    lineHeight: 32,
+    fontWeight: "300" as const,
+  },
+  h4: {
+    fontSize: 20,
+    lineHeight: 28,
+    fontWeight: "600" as const,
+  },
+  title: {
+    fontSize: 18,
+    lineHeight: 24,
+    fontWeight: "700" as const,
+  },
+  body: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "400" as const,
+  },
+  bodyMedium: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "500" as const,
+  },
+  small: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "400" as const,
+  },
+  smallMedium: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500" as const,
+  },
+  caption: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "400" as const,
+  },
+  captionMedium: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500" as const,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "500" as const,
+    letterSpacing: 2,
+    textTransform: "uppercase" as const,
+  },
+  labelSmall: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500" as const,
+    letterSpacing: 1,
+    textTransform: "uppercase" as const,
+  },
+  labelTitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: "700" as const,
+    letterSpacing: 2,
+    textTransform: "uppercase" as const,
+  },
+  link: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: "400" as const,
+  },
+  stat: {
+    fontSize: 30,
+    lineHeight: 36,
+    fontWeight: "300" as const,
+  },
+  tiny: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: "400" as const,
+  },
+  navLabel: {
+    fontSize: 10,
+    lineHeight: 14,
+    fontWeight: "500" as const,
+  },
+};
+
+export type Theme = typeof Colors.light;

package/lib/__templates__/expo/client/declarations.d.ts

@@ -0,0 +1,5 @@
+// declarations.d.ts
+
+declare module 'expo-file-system/legacy' {
+  export * from 'expo-file-system';
+}

package/lib/__templates__/expo/client/eslint.config.mjs

@@ -1,10 +1,12 @@
-import js from "@eslint/js";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-import reactHooks from "eslint-plugin-react-hooks";
-import regexp from "eslint-plugin-regexp";
-import pluginImport from "eslint-plugin-import";
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import regexp from 'eslint-plugin-regexp';
+import pluginImport from 'eslint-plugin-import';
+import fontawesome6 from '../eslint-plugins/fontawesome6/index.js';
+import reanimated from '../eslint-plugins/reanimated/index.js'
 
 export default [
   {
@@ -15,19 +17,21 @@ export default [
       'src/api/**',       // 排除 src 下的自动生成 API
       '.expo/**',         // 排除 Expo 自动生成的文件
       'tailwind.config.js', // 排除 Tailwind 配置文件
+      '**/*.d.ts',
+      'eslint.config.*',
     ],
   },
   regexp.configs["flat/recommended"],
   js.configs.recommended,
   ...tseslint.configs.recommended,
-  
+
   // React 的推荐配置
   pluginReact.configs.flat.recommended,
   pluginReact.configs.flat['jsx-runtime'],
   reactHooks.configs.flat.recommended,
   {
     files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    
+
     // 语言选项：设置全局变量
     languageOptions: {
       globals: {
@@ -52,6 +56,8 @@ export default [
 
     plugins: {
       import: pluginImport,
+      fontawesome6,
+      reanimated,
     },
     rules: {
       // 关闭代码风格规则
@@ -70,6 +76,20 @@ export default [
       'no-prototype-builtins': 'off',
       'react/react-in-jsx-scope': 'off',
       'react/jsx-uses-react': 'off',
+      'fontawesome6/valid-name': 'error',
+      'reanimated/ban-mix-use': 'error',
+      // 禁止使用 via.placeholder.com 服务
+      'no-restricted-syntax': [
+        'error',
+        {
+          'selector': 'Literal[value=/via\\.placeholder\\.com/]',
+          'message': 'via.placeholder.com 服务不可用，禁止在代码中使用',
+        },
+        {
+          'selector': 'TemplateLiteral > TemplateElement[value.raw=/via\\.placeholder\\.com/]',
+          'message': 'via.placeholder.com 服务不可用，禁止在代码中使用',
+        },
+      ],
     },
   },
 
@@ -91,7 +111,7 @@ export default [
       // 在 .js 文件中关闭 TS 规则
       '@typescript-eslint/no-require-imports': 'off',
       // 在 Node.js 文件中允许 require
-      '@typescript-eslint/no-var-requires': 'off', 
+      '@typescript-eslint/no-var-requires': 'off',
       'no-undef': 'off',
     },
   },

package/lib/__templates__/expo/client/hooks/useColorScheme.tsx

@@ -0,0 +1,48 @@
+import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useEffect, useState } from 'react';
+import { ColorSchemeName, useColorScheme as useReactNativeColorScheme, Platform } from 'react-native';
+
+const ColorSchemeContext = createContext<'light' | 'dark' | null | undefined>(null);
+
+const ColorSchemeProvider = function ({ children }: { children?: ReactNode }) {
+  const systemColorScheme = useReactNativeColorScheme();
+  const [colorScheme, setColorScheme] = useState(systemColorScheme);
+
+  useEffect(() => {
+    setColorScheme(systemColorScheme);
+  }, [systemColorScheme]);
+
+  useEffect(() => {
+    function handleMessage(e: MessageEvent<{ event: string; colorScheme: ColorSchemeName; } | undefined>) {
+      if (e.data?.event === 'coze.workbench.colorScheme') {
+        const cs = e.data.colorScheme;
+        if (typeof cs === 'string' && typeof setColorScheme === 'function') {
+          setColorScheme(cs);
+        }
+      }
+    }
+
+    if (Platform.OS === 'web') {
+      window.addEventListener('message', handleMessage, false);
+    }
+
+    return () => {
+      if (Platform.OS === 'web') {
+        window.removeEventListener('message', handleMessage, false);
+      }
+    }
+  }, [setColorScheme]);
+
+  return <ColorSchemeContext.Provider value={colorScheme}>
+    {children}
+  </ColorSchemeContext.Provider>
+};
+
+function useColorScheme() {
+  const colorScheme = useContext(ColorSchemeContext);
+  return colorScheme;
+}
+
+export {
+  ColorSchemeProvider,
+  useColorScheme,
+}

package/lib/__templates__/expo/client/hooks/useSafeRouter.ts

@@ -0,0 +1,152 @@
+/**
+ * 安全路由 Hook - 完全代替原生的 useRouter 和 useLocalSearchParams
+ *
+ * 提供的 Hook：
+ * - useSafeRouter: 代替 useRouter，包含所有路由方法，并对 push/replace/navigate/setParams 进行安全编码
+ * - useSafeSearchParams: 代替 useLocalSearchParams，获取路由参数
+ *
+ * 解决的问题：
+ * 1. URI 编解码不对称 - useLocalSearchParams 会自动解码，但 router.push 不会自动编码，
+ *    当参数包含 % 等特殊字符时会拿到错误的值
+ * 2. 类型丢失 - URL 参数全是 string，Number/Boolean 类型会丢失
+ * 3. 嵌套对象无法传递 - URL search params 不支持嵌套结构
+ *
+ * 解决方案：
+ * 采用 Payload 模式，将所有参数打包成 JSON 并 Base64 编码后传递，
+ * 接收时再解码还原，确保数据完整性和类型安全。
+ *
+ * 优点：
+ * 1. 自动处理所有特殊字符（如 %、&、=、中文、Emoji 等）
+ * 2. 保留数据类型（Number、Boolean 不会变成 String）
+ * 3. 支持嵌套对象和数组传递
+ * 4. 三端兼容（iOS、Android、Web）
+ *
+ * 使用方式：
+ * ```tsx
+ * // 发送端 - 使用 useSafeRouter 代替 useRouter
+ * const router = useSafeRouter();
+ * router.push('/detail', { id: 123, uri: 'file:///path/%40test.mp3' });
+ * router.replace('/home', { tab: 'settings' });
+ * router.navigate('/profile', { userId: 456 });
+ * router.back();
+ * if (router.canGoBack()) { ... }
+ * router.setParams({ updated: true });
+ *
+ * // 接收端 - 使用 useSafeSearchParams 代替 useLocalSearchParams
+ * const { id, uri } = useSafeSearchParams<{ id: number; uri: string }>();
+ * ```
+ */
+import { useMemo } from 'react';
+import { useRouter as useExpoRouter, useLocalSearchParams as useExpoParams } from 'expo-router';
+import { Base64 } from 'js-base64';
+
+const PAYLOAD_KEY = '__safeRouterPayload__';
+const LOG_PREFIX = '[SafeRouter]';
+
+
+const getCurrentParams = (rawParams: Record<string, string | string[]>): Record<string, unknown> => {
+  const payload = rawParams[PAYLOAD_KEY];
+  if (payload && typeof payload === 'string') {
+    const decoded = deserializeParams<Record<string, unknown>>(payload);
+    if (decoded && Object.keys(decoded).length > 0) {
+      return decoded;
+    }
+  }
+  const { [PAYLOAD_KEY]: _, ...rest } = rawParams;
+  return rest as Record<string, unknown>;
+};
+
+const serializeParams = (params: Record<string, unknown>): string => {
+  try {
+    const jsonStr = JSON.stringify(params);
+    return Base64.encode(jsonStr);
+  } catch (error) {
+    console.error(LOG_PREFIX, 'serialize failed:', error instanceof Error ? error.message : 'Unknown error');
+    return '';
+  }
+};
+
+const deserializeParams = <T = Record<string, unknown>>(
+  payload: string | string[] | undefined
+): T | null => {
+  if (!payload || typeof payload !== 'string') {
+    return null;
+  }
+  try {
+    const jsonStr = Base64.decode(payload);
+    return JSON.parse(jsonStr) as T;
+  } catch (error) {
+    console.error(LOG_PREFIX, 'deserialize failed:', error instanceof Error ? error.message : 'Unknown error');
+    return null;
+  }
+};
+
+
+/**
+ * 安全路由 Hook，用于页面跳转，代替 useRouter
+ * @returns 路由方法（继承 useRouter 所有方法，并对以下方法进行安全编码）
+ * - push(pathname, params) - 入栈新页面
+ * - replace(pathname, params) - 替换当前页面
+ * - navigate(pathname, params) - 智能跳转（已存在则返回，否则 push）
+ * - setParams(params) - 更新当前页面参数（合并现有参数）
+ */
+export function useSafeRouter() {
+  const router = useExpoRouter();
+  const rawParams = useExpoParams<Record<string, string | string[]>>();
+
+  const push = (pathname: string, params: Record<string, unknown> = {}) => {
+    const encodedPayload = serializeParams(params);
+    router.push({
+      pathname: pathname as `/${string}`,
+      params: { [PAYLOAD_KEY]: encodedPayload },
+    });
+  };
+
+  const replace = (pathname: string, params: Record<string, unknown> = {}) => {
+    const encodedPayload = serializeParams(params);
+    router.replace({
+      pathname: pathname as `/${string}`,
+      params: { [PAYLOAD_KEY]: encodedPayload },
+    });
+  };
+
+  const navigate = (pathname: string, params: Record<string, unknown> = {}) => {
+    const encodedPayload = serializeParams(params);
+    router.navigate({
+      pathname: pathname as `/${string}`,
+      params: { [PAYLOAD_KEY]: encodedPayload },
+    });
+  };
+
+  const setParams = (params: Record<string, unknown>) => {
+    const currentParams = getCurrentParams(rawParams);
+    const mergedParams = { ...currentParams, ...params };
+    const encodedPayload = serializeParams(mergedParams);
+    router.setParams({ [PAYLOAD_KEY]: encodedPayload });
+  };
+
+  return {
+    ...router,
+    push,
+    replace,
+    navigate,
+    setParams,
+  };
+}
+
+/**
+ * 安全获取路由参数 Hook，用于接收方，代替 useLocalSearchParams
+ * 兼容两种跳转方式：
+ * 1. useSafeRouter 跳转 - 自动解码 Payload
+ * 2. 外部跳转（深链接、浏览器直接访问等）- 回退到原始参数
+ * @returns 解码后的参数对象，类型安全
+ */
+export function useSafeSearchParams<T = Record<string, unknown>>(): T {
+  const rawParams = useExpoParams<Record<string, string | string[]>>();
+
+  const decodedParams = useMemo(() => {
+    return getCurrentParams(rawParams) as T;
+  }, [rawParams]);
+
+  return decodedParams;
+}

package/lib/__templates__/expo/client/hooks/useTheme.ts

@@ -0,0 +1,33 @@
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+enum COLOR_SCHEME_CHOICE {
+  FOLLOW_SYSTEM = 'follow-system', // 跟随系统自动变化
+  DARK = 'dark', // 固定为 dark 主题，不随系统变化
+  LIGHT = 'light', // 固定为 light 主题，不随系统变化
+};
+
+const userPreferColorScheme: COLOR_SCHEME_CHOICE = COLOR_SCHEME_CHOICE.FOLLOW_SYSTEM;
+
+function getTheme(colorScheme?: 'dark' | 'light' | null) {
+  const isDark = colorScheme === 'dark';
+  const theme = Colors[colorScheme ?? 'light'];
+
+  return {
+    theme,
+    isDark,
+  };
+}
+
+function useTheme() {
+  const systemColorScheme = useColorScheme()
+  const colorScheme = userPreferColorScheme === COLOR_SCHEME_CHOICE.FOLLOW_SYSTEM ?
+    systemColorScheme :
+    userPreferColorScheme;
+
+  return getTheme(colorScheme);
+}
+
+export {
+  useTheme,
+}