@coze-arch/cli 0.0.1-alpha.bd5b49 → 0.0.1-alpha.c199b3

package/README.md

@@ -14,6 +14,7 @@ Coze Coding 的项目模板引擎，提供基于前端技术栈的项目初始
 
 ```bash
 rush update
+
 ```
 
 ## 使用

package/lib/__templates__/expo/README.md

@@ -1,6 +1,6 @@
 # Expo App + Express.js
 
-## 目录结构规范
+## 目录结构规范（严格遵循）
 
 当前仓库是一个 monorepo（基于 pnpm 的 workspace）
 
@@ -16,14 +16,17 @@
 ├── client/                     # React Native 前端代码
 │   ├── app/                    # Expo Router 路由目录（仅路由配置）
 │   │   ├── _layout.tsx         # 根布局文件（必需，务必阅读）
-│   │   └── index.tsx           # 首页
+│   │   ├── home.tsx            # 首页
+│   │   └── index.tsx           # re-export home.tsx
 │   ├── screens/                # 页面实现目录（与 app/ 路由对应）
-│   │   └── demo/
-│   │       └── index.tsx       # demo 示例页面（默认首页，不需要可以删除，记得同时更新路由文件）
+│   │   └── demo/               # demo 示例页面
+│   │       ├── index.tsx       # 页面组件实现
+│   │       └── styles.ts       # 页面样式
 │   ├── components/             # 可复用组件
 │   │   └── Screen.tsx          # 页面容器组件（必用）
 │   ├── hooks/                  # 自定义 Hooks
 │   ├── contexts/               # React Context 代码
+│   ├── constants/              # 常量定义（如主题配置）
 │   ├── utils/                  # 工具函数
 │   ├── assets/                 # 静态资源
 |   └── package.json            # Expo 应用 package.json
@@ -31,15 +34,6 @@
 ├── .cozeproj                   # 预置脚手架脚本（禁止修改）
 └── .coze                       # 配置文件（禁止修改）
 
-## 技术选型（严格遵循）
-
-- 前端：Expo + React Native + TailwindCSS
-- 后端：Express.js
-
-本项目通过 uniwind 实现了 react-native 对 TailwindCSS v4 的支持，在编写样式时应使用 TailwindCSS 写法
-
-在开始开发前，先查看 client/global.css 了解必要的信息
-
 ## 安装依赖
 
 ### 命令
@@ -48,6 +42,15 @@
 pnpm i
 ```
 
+### 新增依赖约束
+
+如果需要新增依赖，需在 client 和 server 各自的目录添加（原因：隔离前后端的依赖），禁止在根目录直接安装依赖
+
+### 新增依赖标准流程
+
+- 编辑 `client/package.json` 或 `server/package.json`
+- 在根目录执行 `pnpm i`
+
 ## Expo 开发规范
 
 ### 路径别名

package/lib/__templates__/expo/_npmrc

@@ -1,3 +1,4 @@
+loglevel=error
 registry=https://registry.npmmirror.com
 
 strictStorePkgContentCheck=false

package/lib/__templates__/expo/client/app/+not-found.tsx

@@ -1,15 +1,30 @@
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { Link } from 'expo-router';
+import { useTheme } from '@/hooks/useTheme';
+import { Spacing } from '@/constants/theme';
 
 export default function NotFoundScreen() {
+  const { theme } = useTheme();
+
   return (
-    <View className="flex-1 justify-center items-center bg-background">
-      <Text className="text-foreground">
+    <View style={[styles.container, { backgroundColor: theme.backgroundRoot }]}>
+      <Text>
         页面不存在
       </Text>
-      <Link href="/" className="text-accent mt-6">
+      <Link href="/" style={[styles.gohome]}>
         返回首页
       </Link>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  gohome: {
+    marginTop: Spacing['2xl'],
+  },
+});

package/lib/__templates__/expo/client/app/_layout.tsx

@@ -5,8 +5,7 @@ import { StatusBar } from 'expo-status-bar';
 import { LogBox } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { AuthProvider } from "@/contexts/AuthContext";
-
-import '../global.css';
+import { ColorSchemeProvider } from '@/hooks/useColorScheme';
 
 LogBox.ignoreLogs([
   "TurboModuleRegistry.getEnforcing(...): 'RNMapsAirModule' could not be found",
@@ -16,20 +15,22 @@ LogBox.ignoreLogs([
 export default function RootLayout() {
   return (
     <AuthProvider>
-      <GestureHandlerRootView style={{ flex: 1 }}>
-        <StatusBar style="dark"></StatusBar>
-        <Stack screenOptions={{
-          // 设置所有页面的切换动画为从右侧滑入，适用于iOS 和 Android
-          animation: 'slide_from_right',
-          gestureEnabled: true,
-          gestureDirection: 'horizontal',
-          // 隐藏自带的头部
-          headerShown: false
-        }}>
-          <Stack.Screen name="index" options={{ title: "" }} />
-        </Stack>
-        <Toast />
-      </GestureHandlerRootView>
+      <ColorSchemeProvider>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <StatusBar style="dark"></StatusBar>
+          <Stack screenOptions={{
+            // 设置所有页面的切换动画为从右侧滑入，适用于iOS 和 Android
+            animation: 'slide_from_right',
+            gestureEnabled: true,
+            gestureDirection: 'horizontal',
+            // 隐藏自带的头部
+            headerShown: false
+          }}>
+            <Stack.Screen name="index" options={{ title: "" }} />
+          </Stack>
+          <Toast />
+        </GestureHandlerRootView>
+      </ColorSchemeProvider>
     </AuthProvider>
   );
 }

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 }}>`

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/eslint.config.mjs

@@ -8,6 +8,8 @@ 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 [
   {
@@ -20,6 +22,7 @@ export default [
       'tailwind.config.js', // 排除 Tailwind 配置文件
       '**/*.d.ts',
       'eslint.config.*',
+      'metro.config.*',
     ],
   },
   regexp.configs["flat/recommended"],
@@ -60,6 +63,8 @@ export default [
       fontawesome6,
       reanimated,
       reactnative,
+      forbidEmoji,
+      restrictLinearGradient,
     },
     rules: {
       // 关闭代码风格规则
@@ -80,6 +85,8 @@ export default [
       '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',

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/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,
+}

package/lib/__templates__/expo/client/metro.config.js

@@ -1,7 +1,6 @@
 const { getDefaultConfig } = require('expo/metro-config');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 const connect = require('connect');
-const { withUniwindConfig } = require('uniwind/metro');
 
 const config = getDefaultConfig(__dirname);
 
@@ -27,6 +26,9 @@ config.resolver.blockList = [
   // 4. 通用规则
   /.*\/__tests__\/.*/, // 排除所有测试目录
   /.*\.git\/.*/, // 排除 Git 目录
+
+  // 5. pnpm 临时目录（避免 ENOENT 错误）
+  /.*node_modules\/\.pnpm\/.*_tmp_\d+.*/,
 ];
 
 const BACKEND_TARGET = 'http://localhost:9091';
@@ -119,10 +121,4 @@ config.server = {
   },
 };
 
-module.exports = withUniwindConfig(config, {
-  // relative path to your global.css file (from previous step)
-  cssEntryFile: './global.css',
-  // (optional) path where we gonna auto-generate typings
-  // defaults to project's root
-  dtsFile: './uniwind-types.d.ts'
-});
+module.exports = config;

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

@@ -90,8 +90,6 @@
     "react-test-renderer": "19.1.0",
     "tsx": "^4.21.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
-    "tailwindcss": "^4.1.18",
-    "uniwind": "^1.2.7"
+    "typescript-eslint": "^8.32.1"
   }
 }

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

@@ -1,18 +1,24 @@
 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="var(--background)" statusBarStyle="auto">
-      <View className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
+    <Screen backgroundColor={theme.backgroundRoot} statusBarStyle={isDark ? 'light' : 'dark'}>
+      <View
+        style={styles.container}
+      >
         <Image
-          className="w-[130px] h-[109px]"
-          source="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze-coding/expo/coze-loading.gif"
-        />
-        <Text className="text-base font-bold text-foreground">APP 开发中</Text>
-        <Text className="text-sm mt-2 text-muted">即将为您呈现应用界面</Text>
+          style={styles.logo}
+          source="https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze-coding/icon/coze-coding.gif"
+        ></Image>
+        <Text style={{...styles.title, color: theme.textPrimary}}>应用开发中</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

@@ -9,7 +9,7 @@ const { execSync } = require('child_process');
 const fs = require('fs');
 const path = require('path');
 
-console.log('🔍 检测缺失的依赖...\n');
+console.log('检测缺失的依赖...\n');
 
 try {
   // 运行 depcheck 并获取 JSON 输出
@@ -61,11 +61,11 @@ try {
   });
 
   if (missingPackages.length === 0) {
-    console.log('✅ 没有发现缺失的依赖！');
+    console.log('没有发现缺失的依赖');
     process.exit(0);
   }
 
-  console.log('📦 发现以下缺失的依赖：');
+  console.log('发现以下缺失的依赖：');
   missingPackages.forEach((pkg, index) => {
     const files = missing[pkg];
     console.log(`  ${index + 1}. ${pkg}`);
@@ -74,7 +74,7 @@ try {
     );
   });
 
-  console.log('\n🚀 开始安装...\n');
+  console.log('\n开始安装...\n');
 
   // 使用 expo install 安装所有缺失的包
   const packagesToInstall = missingPackages.join(' ');
@@ -84,22 +84,22 @@ try {
       stdio: 'inherit',
     });
 
-    console.log('\n✅ 所有缺失的依赖已安装完成！');
+    console.log('\n所有缺失的依赖已安装完成');
   } catch (installError) {
-    console.log('\n⚠️  expo install 失败，尝试使用 npm install...\n');
+    console.log('\nexpo install 失败，尝试使用 npm install...\n');
 
     execSync(`npm install ${packagesToInstall}`, {
       stdio: 'inherit',
     });
 
-    console.log('\n✅ 所有缺失的依赖已通过 npm 安装完成！');
+    console.log('\n所有缺失的依赖已通过 npm 安装完成');
   }
 } catch (error) {
   if (error.message.includes('depcheck')) {
-    console.error('❌ depcheck 未安装或运行失败');
-    console.log('💡 尝试运行: npm install -g depcheck');
+    console.error('depcheck 未安装或运行失败');
+    console.log('尝试运行: npm install -g depcheck');
   } else {
-    console.error('❌ 发生错误:', error.message);
+    console.error('发生错误:', error.message);
   }
   process.exit(1);
 }

package/lib/__templates__/expo/eslint-plugins/forbid-emoji/index.js

@@ -0,0 +1,9 @@
+const noEmoji = require('./rule')
+
+const plugin = {
+  rules: {
+    'no-emoji': noEmoji,
+  },
+}
+
+module.exports = plugin