@coze-arch/cli 0.0.1-alpha.1fb1dc → 0.0.1-alpha.209402

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

@@ -0,0 +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": 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"
+      },
+      "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"
+        }
+      ],
+      [
+        "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/components/Screen.tsx

@@ -32,7 +32,7 @@ import {
  *
  * ## 2. 沉浸式 Header (推荐)
  * - 场景：Header 背景色/图片需要延伸到状态栏 (如首页、个人中心)。
- * - 用法：`<Screen safeAreaEdges={['left', 'right', 'bottom']}>` (❌ 去掉 'top')
+ * - 用法：`<Screen safeAreaEdges={['left', 'right', 'bottom']}>` (去掉 'top')
  * - 配合：页面内部 Header 组件必须手动添加 paddingTop:
  *   ```tsx
  *   const insets = useSafeAreaInsets();
@@ -41,7 +41,7 @@ import {
  *
  * ## 3. 底部有 TabBar 或 悬浮按钮
  * - 场景：页面底部有固定导航栏，或者需要精细控制底部留白。
- * - 用法：`<Screen safeAreaEdges={['top', 'left', 'right']}>` (❌ 去掉 'bottom')
+ * - 用法：`<Screen safeAreaEdges={['top', 'left', 'right']}>` (去掉 'bottom')
  * - 配合：
  *   - 若是滚动页：`<ScrollView contentContainerStyle={{ paddingBottom: insets.bottom + 80 }}>`
  *   - 若是固定页：`<View style={{ paddingBottom: insets.bottom + 60 }}>`
@@ -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/components/ThemedText.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, TextProps, TextStyle } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
+import { Typography } from '@/constants/theme';
+
+type TypographyVariant = keyof typeof Typography;
+
+interface ThemedTextProps extends TextProps {
+  variant?: TypographyVariant;
+  color?: string;
+}
+
+export function ThemedText({
+  variant = 'body',
+  color,
+  style,
+  children,
+  ...props
+}: ThemedTextProps) {
+  const { theme } = useTheme();
+  const typographyStyle = Typography[variant];
+
+  const textStyle: TextStyle = {
+    ...typographyStyle,
+    color: color ?? theme.textPrimary,
+  };
+
+  return (
+    <Text style={[textStyle, style]} {...props}>
+      {children}
+    </Text>
+  );
+}

package/lib/__templates__/expo/client/components/ThemedView.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
+
+type BackgroundLevel = 'root' | 'default' | 'tertiary';
+
+interface ThemedViewProps extends ViewProps {
+  level?: BackgroundLevel;
+  backgroundColor?: string;
+}
+
+const backgroundMap: Record<BackgroundLevel, string> = {
+  root: 'backgroundRoot',
+  default: 'backgroundDefault',
+  tertiary: 'backgroundTertiary',
+};
+
+export function ThemedView({
+  level = 'root',
+  backgroundColor,
+  style,
+  children,
+  ...props
+}: ThemedViewProps) {
+  const { theme } = useTheme();
+  const bgColor = backgroundColor ?? (theme as any)[backgroundMap[level]];
+
+  const viewStyle: ViewStyle = {
+    backgroundColor: bgColor,
+  };
+
+  return (
+    <View style={[viewStyle, style]} {...props}>
+      {children}
+    </View>
+  );
+}

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

@@ -1,30 +1,35 @@
-import { Platform } from "react-native";
-
-const tintColorLight = "#007AFF";
-const tintColorDark = "#0A84FF";
-
 export const Colors = {
   light: {
-    text: "#11181C",
-    buttonText: "#FFFFFF",
-    tabIconDefault: "#687076",
-    tabIconSelected: tintColorLight,
-    link: "#007AFF",
-    backgroundRoot: "#FFFFFF", // Elevation 0
-    backgroundDefault: "#F2F2F2", // Elevation 1
-    backgroundSecondary: "#E6E6E6", // Elevation 2
-    backgroundTertiary: "#D9D9D9", // Elevation 3
+    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: {
-    text: "#ECEDEE",
-    buttonText: "#FFFFFF",
-    tabIconDefault: "#9BA1A6",
-    tabIconSelected: tintColorDark,
-    link: "#0A84FF",
-    backgroundRoot: "#1F2123", // Elevation 0
-    backgroundDefault: "#2A2C2E", // Elevation 1
-    backgroundSecondary: "#353739", // Elevation 2
-    backgroundTertiary: "#404244", // Elevation 3
+    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",
   },
 };
 
@@ -38,22 +43,39 @@ export const Spacing = {
   "3xl": 32,
   "4xl": 40,
   "5xl": 48,
-  inputHeight: 48,
-  buttonHeight: 52,
+  "6xl": 64,
 };
 
 export const BorderRadius = {
-  xs: 8,
-  sm: 12,
-  md: 18,
-  lg: 24,
-  xl: 30,
-  "2xl": 40,
-  "3xl": 50,
+  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,
@@ -67,52 +89,89 @@ export const Typography = {
   h3: {
     fontSize: 24,
     lineHeight: 32,
-    fontWeight: "600" as const,
+    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 const Fonts = Platform.select({
-  ios: {
-    /** iOS `UIFontDescriptorSystemDesignDefault` */
-    sans: "system-ui",
-    /** iOS `UIFontDescriptorSystemDesignSerif` */
-    serif: "ui-serif",
-    /** iOS `UIFontDescriptorSystemDesignRounded` */
-    rounded: "ui-rounded",
-    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
-    mono: "ui-monospace",
-  },
-  default: {
-    sans: "normal",
-    serif: "serif",
-    rounded: "normal",
-    mono: "monospace",
-  },
-  web: {
-    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-    serif: "Georgia, 'Times New Roman', serif",
-    rounded:
-      "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
-    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-  },
-});
+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/{eslint.config.mjs → client/eslint.config.mjs}

@@ -1,10 +1,15 @@
-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';
+import reactnative from '../eslint-plugins/react-native/index.js';
+import forbidEmoji from '../eslint-plugins/forbid-emoji/index.js';
+import restrictLinearGradient from '../eslint-plugins/restrict-linear-gradient/index.js';
 
 export default [
   {
@@ -15,19 +20,22 @@ export default [
       'src/api/**',       // 排除 src 下的自动生成 API
       '.expo/**',         // 排除 Expo 自动生成的文件
       'tailwind.config.js', // 排除 Tailwind 配置文件
+      '**/*.d.ts',
+      'eslint.config.*',
+      'metro.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 +60,11 @@ export default [
 
     plugins: {
       import: pluginImport,
+      fontawesome6,
+      reanimated,
+      reactnative,
+      forbidEmoji,
+      restrictLinearGradient,
     },
     rules: {
       // 关闭代码风格规则
@@ -70,6 +83,23 @@ 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',
+      'forbidEmoji/no-emoji': 'error',
+      'restrictLinearGradient/no-linear-gradient-backgroundcolor': '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 服务不可用，禁止在代码中使用',
+        },
+      ],
+      'reactnative/wrap-horizontal-scrollview-inside-view': ['error'],
     },
   },
 
@@ -91,7 +121,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,
+}