@coze-arch/cli 0.0.1-alpha.f74941 → 0.0.1-alpha.f91253

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,38 @@
+import React from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
+
+type BackgroundLevel = 'root' | 'default' | 'secondary' | 'tertiary';
+
+interface ThemedViewProps extends ViewProps {
+  level?: BackgroundLevel;
+  backgroundColor?: string;
+}
+
+const backgroundMap: Record<BackgroundLevel, string> = {
+  root: 'backgroundRoot',
+  default: 'backgroundDefault',
+  secondary: 'backgroundSecondary',
+  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/contexts/AuthContext.tsx

@@ -4,19 +4,15 @@
  *
  * 基于固定的 API 接口实现，可复用到其他项目
  * 其他项目使用时，只需修改 @api 的导入路径指向项目的 api 模块
+ *
+ * 注意：
+ * - 如果需要登录/鉴权场景，请扩展本文件，完善 login/logout、token 管理、用户信息获取与刷新等逻辑
+ * - 将示例中的占位实现替换为项目实际的接口调用与状态管理
  */
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  ReactNode,
-} from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-//import { UserOut, UsersService, AuthenticationService } from "@api";
+import React, { createContext, useContext, ReactNode } from "react";
 
 interface UserOut {
-  
+
 }
 
 interface AuthContextType {
@@ -31,105 +27,16 @@ interface AuthContextType {
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-export const AuthProvider: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  const [user, setUser] = useState<UserOut | null>(null);
-  const [token, setToken] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    loadAuthData();
-  }, []);
-
-  const loadAuthData = async () => {
-    try {
-      const results = await AsyncStorage.multiGet(["access_token", "user_data"]);
-      const storedToken = results?.[0]?.[1] ?? null;
-      const storedUser = results?.[1]?.[1] ?? null;
-
-      if (!storedToken) {
-        setToken(null);
-        setUser(null);
-        await AsyncStorage.multiRemove(["access_token", "user_data"]);
-        return;
-      }
-
-      if (storedToken && storedUser) {
-        setToken(storedToken);
-        setUser(JSON.parse(storedUser));
-      } else if (storedToken && !storedUser) {
-        // 若仅有 token，主动拉取当前用户信息
-        setToken(storedToken);
-        try {
-          // const me = await UsersService.getCurrentUserApiV1UsersMeGet();
-          //if (me?.success && me.data) {
-          //  setUser(me.data);
-          //  await AsyncStorage.setItem("user_data", JSON.stringify(me.data));
-          //}
-        } catch (e) {
-          // 拉取失败则保持未登录状态
-          console.error("Failed to fetch current user with stored token:", e);
-        }
-      }
-    } catch (error) {
-      console.error("Failed to load auth data:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const login = async (newToken: string) => {
-    try {
-      setToken(newToken);
-      // 统一写入 access_token，供 OpenAPI 读取并自动携带
-      await AsyncStorage.setItem("access_token", newToken);
-      // 登录后拉取当前用户并缓存
-      try {
-        const me = await UsersService.getCurrentUserApiV1UsersMeGet();
-        if (me?.success && me.data) {
-          setUser(me.data);
-          await AsyncStorage.setItem("user_data", JSON.stringify(me.data));
-        }
-      } catch (e) {
-        console.error("Fetch current user after login failed:", e);
-      }
-    } catch (error) {
-      console.error("Login failed:", error);
-      throw error;
-    }
-  };
-
-  const logout = async () => {
-    try {
-      // await AuthenticationService.logoutApiV1AuthLogoutPost(true);
-    } catch(error) {
-      console.warn('Logout failed:', error);
-    }
-    // remove token
-    setToken(null);
-    setUser(null);
-    await AsyncStorage.multiRemove(["auth_token", "access_token", "user_data"]);
-  };
-
-  const updateUser = (userData: Partial<UserOut>) => {
-    if (user) {
-      const updatedUser = { ...user, ...userData };
-      setUser(updatedUser);
-      AsyncStorage.setItem("user_data", JSON.stringify(updatedUser));
-    }
-  };
-
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const value: AuthContextType = {
-    user,
-    token,
-    isAuthenticated: !!token && !!user,
-    isLoading,
-    login,
-    logout,
-    updateUser,
+    user: null,
+    token: null,
+    isAuthenticated: false,
+    isLoading: false,
+    login: async (token: string) => {},
+    logout: async () => {},
+    updateUser: () => {},
   };
-
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
 

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,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 [
   {
@@ -15,19 +16,20 @@ export default [
       'src/api/**',       // 排除 src 下的自动生成 API
       '.expo/**',         // 排除 Expo 自动生成的文件
       'tailwind.config.js', // 排除 Tailwind 配置文件
+      '**/*.d.ts',
     ],
   },
   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 +54,7 @@ export default [
 
     plugins: {
       import: pluginImport,
+      fontawesome6,
     },
     rules: {
       // 关闭代码风格规则
@@ -70,6 +73,7 @@ export default [
       'no-prototype-builtins': 'off',
       'react/react-in-jsx-scope': 'off',
       'react/jsx-uses-react': 'off',
+      'fontawesome6/valid-name': 'error',
     },
   },
 
@@ -91,7 +95,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 ?? "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,
+}