@coze-arch/cli 0.0.1-alpha.49a2d9 → 0.0.1-alpha.4c5c53

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

@@ -1,71 +1,76 @@
 import { ExpoConfig, ConfigContext } from 'expo/config';
 
+const appName = process.env.EXPO_PUBLIC_COZE_PROJECT_NAME || '应用';
+const projectId = 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/constants/theme.ts

@@ -2,23 +2,21 @@ import { Platform, StyleSheet } from "react-native";
 
 export const Colors = {
   light: {
-    text: "#111827",
-    textPrimary: "#111827",
-    textSecondary: "#374151",
+    textPrimary: "#1C1917",
+    textSecondary: "#78716c",
     textMuted: "#9CA3AF",
     textDisabled: "#D1D5DB",
     placeholder: "#9CA3AF",
-    buttonText: "#FFFFFF",
     tabIconDefault: "#9CA3AF",
-    tabIconSelected: "#111827",
-    primary: "#111827",
+    tabIconSelected: "#1C1917",
+    primary: "#1C1917",
     accent: "#000000",
-    link: "#111827",
+    link: "#1C1917",
     success: "#16A34A",
     warning: "#F59E0B",
     error: "#DC2626",
     info: "#2563EB",
-    backgroundRoot: "#FFFFFF",
+    backgroundRoot: "#FFF",
     backgroundDefault: "#F9FAFB",
     backgroundSecondary: "#F3F4F6",
     backgroundTertiary: "#E5E7EB",
@@ -27,25 +25,27 @@ export const Colors = {
     divider: "#F3F4F6",
     overlay: "rgba(0, 0, 0, 0.4)",
     chartBackground: "rgba(249, 250, 251, 0.5)",
+    buttonPrimaryBackground: "#1C1917",
+    buttonPrimaryText: "#FFFFFF",
+    buttonSecondaryBackground: "#F3F4F6",
+    buttonSecondaryText: "#1C1917",
   },
   dark: {
-    text: "#ECEDEE",
-    textPrimary: "#ECEDEE",
-    textSecondary: "#9BA1A6",
+    textPrimary: "#FAFAF9",
+    textSecondary: "#A8A29E",
     textMuted: "#6F767E",
     textDisabled: "#4A4D50",
     placeholder: "#6F767E",
-    buttonText: "#FFFFFF",
     tabIconDefault: "#6F767E",
-    tabIconSelected: "#ECEDEE",
-    primary: "#ECEDEE",
+    tabIconSelected: "#FAFAF9",
+    primary: "#FAFAF9",
     accent: "#FFFFFF",
-    link: "#ECEDEE",
+    link: "#FAFAF9",
     success: "#30D158",
     warning: "#FF9F0A",
     error: "#FF453A",
     info: "#64D2FF",
-    backgroundRoot: "#000000",
+    backgroundRoot: "#0C0A09",
     backgroundDefault: "#1C1C1E",
     backgroundSecondary: "#2C2C2E",
     backgroundTertiary: "#3A3A3C",
@@ -54,6 +54,10 @@ export const Colors = {
     divider: "#2C2C2E",
     overlay: "rgba(0, 0, 0, 0.6)",
     chartBackground: "rgba(28, 28, 30, 0.5)",
+    buttonPrimaryBackground: "#FAFAF9",
+    buttonPrimaryText: "#0C0A09",
+    buttonSecondaryBackground: "#2C2C2E",
+    buttonSecondaryText: "#FAFAF9",
   },
 };
 
@@ -509,7 +513,7 @@ export const createThemedStyles = (theme: Theme) => {
       ...CommonStyles.scrollContent,
     },
     text: {
-      color: theme.text,
+      color: theme.textPrimary,
     },
     textPrimary: {
       color: theme.textPrimary,
@@ -533,7 +537,7 @@ export const createThemedStyles = (theme: Theme) => {
       color: theme.info,
     },
     textButton: {
-      color: theme.buttonText,
+      color: theme.buttonPrimaryText,
     },
     avatar: {
       ...CommonStyles.avatar,

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,11 @@
-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';
 
 export default [
   {
@@ -20,14 +21,14 @@ export default [
   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 +53,7 @@ export default [
 
     plugins: {
       import: pluginImport,
+      fontawesome6,
     },
     rules: {
       // 关闭代码风格规则
@@ -70,6 +72,7 @@ export default [
       'no-prototype-builtins': 'off',
       'react/react-in-jsx-scope': 'off',
       'react/jsx-uses-react': 'off',
+      'fontawesome6/valid-name': 'error',
     },
   },
 
@@ -91,7 +94,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.ts

@@ -1 +1,34 @@
-export { useColorScheme } from "react-native";
+import { useEffect, useState } from 'react';
+import { ColorSchemeName, useColorScheme as useReactNativeColorScheme, Platform } from 'react-native';
+
+export function useColorScheme() {
+  const systemColorScheme = useReactNativeColorScheme();
+  const [colorScheme, setColorScheme] = useState<ColorSchemeName>(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') {
+          setColorScheme(cs);
+        }
+      }
+    }
+
+    if (Platform.OS === 'web') {
+      window.addEventListener('message', handleMessage, false);
+    }
+
+    return () => {
+      if (Platform.OS === 'web') {
+        window.removeEventListener('message', handleMessage, false);
+      }
+    }
+  }, []);
+
+  return colorScheme;
+}

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

@@ -1,13 +1,33 @@
-import { Colors } from "@/constants/theme";
-import { useColorScheme } from "@/hooks/useColorScheme";
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/useColorScheme';
 
-export function useTheme() {
-  const colorScheme = useColorScheme();
-  const isDark = colorScheme === "dark";
-  const theme = Colors[(colorScheme as "light" | "dark") ?? "light"];
+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,
+}

package/lib/__templates__/expo/client/package.json

@@ -38,6 +38,7 @@
     "expo-linear-gradient": "~15.0.6",
     "expo-linking": "~8.0.7",
     "expo-location": "~19.0.7",
+    "expo-image": "^3.0.11",
     "expo-router": "~6.0.0",
     "expo-splash-screen": "~31.0.8",
     "expo-status-bar": "~3.0.7",

package/lib/__templates__/expo/client/screens/demo/index.tsx

@@ -0,0 +1,25 @@
+import { View, Text } from 'react-native';
+import { Image } from 'expo-image';
+
+import { useTheme } from '@/hooks/useTheme';
+import { Screen } from '@/components/Screen';
+import { styles } from './styles';
+
+export default function DemoPage() {
+  const { theme, isDark } = useTheme();
+
+  return (
+    <Screen backgroundColor={theme.backgroundRoot} statusBarStyle={isDark ? 'light' : 'dark'}>
+      <View
+        style={styles.container}
+      >
+        <Image
+          style={styles.logo}
+          source="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze-coding/expo/coze-loading.gif"
+        ></Image>
+        <Text style={{...styles.title, color: theme.textPrimary}}>APP 开发中</Text>
+        <Text style={{...styles.description, color: theme.textSecondary}}>即将为您呈现应用界面</Text>
+      </View>
+    </Screen>
+  );
+}

package/lib/__templates__/expo/client/screens/demo/styles.ts

@@ -0,0 +1,28 @@
+import { Spacing } from '@/constants/theme';
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: 130,
+    height: 109,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  description: {
+    fontSize: 14,
+    marginTop: Spacing.sm,
+  },
+});

package/lib/__templates__/expo/client/scripts/install-missing-deps.js

@@ -38,6 +38,7 @@ try {
   const ignoreFilePatterns = [
     /template\.config\.(ts|js)$/, // 模板配置文件
     /\.template\./, // 其他模板文件
+    /declarations\.d\.ts$/, // 项目配置文件
   ];
 
   // 过滤包：排除内部别名和只被模板文件引用的包

package/lib/__templates__/expo/client/utils/index.ts

@@ -1,9 +1,31 @@
+import { Platform } from 'react-native';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 dayjs.extend(utc);
 
 const API_BASE = (process.env.EXPO_PUBLIC_API_BASE ?? '').replace(/\/$/, '');
 
+/**
+ * 创建跨平台兼容的文件对象，用于 FormData.append()
+ * - Web 端返回 File 对象
+ * - 移动端返回 { uri, type, name } 对象（RN fetch 会自动处理）
+ * @param fileUri Expo 媒体库（如 expo-image-picker、expo-camera）返回的 uri
+ * @param fileName 上传时的文件名，如 'photo.jpg'
+ * @param mimeType 文件 MIME 类型，如 'image/jpeg'、'audio/mpeg'
+ */
+export async function createFormDataFile(
+  fileUri: string,
+  fileName: string,
+  mimeType: string
+): Promise<File | { uri: string; type: string; name: string }> {
+  if (Platform.OS === 'web') {
+    const response = await fetch(fileUri);
+    const blob = await response.blob();
+    return new File([blob], fileName, { type: mimeType });
+  }
+  return { uri: fileUri, type: mimeType, name: fileName };
+}
+
 /**
  * 构建文件或图片完整的URL
  * @param url 相对或绝对路径

package/lib/__templates__/expo/eslint-plugins/fontawesome6/index.js

@@ -0,0 +1,9 @@
+const validName = require('./rule')
+
+const plugin = {
+  rules: {
+    'valid-name': validName,
+  },
+};
+
+module.exports = plugin