@coze-arch/cli 0.0.1-alpha.4c5c53 → 0.0.1-alpha.531ccd

package/lib/__templates__/expo/.cozeproj/scripts/dev_run.sh

@@ -15,13 +15,14 @@ EXPO_PORT="5000"
 WEB_URL="${COZE_PROJECT_DOMAIN_DEFAULT:-http://127.0.0.1:${SERVER_PORT}}"
 ASSUME_YES="1"
 EXPO_PUBLIC_BACKEND_BASE_URL="${EXPO_PUBLIC_BACKEND_BASE_URL:-$WEB_URL}"
-
+EXPO_PUBLIC_COZE_PROJECT_ID="${COZE_PROJECT_ID:-}"
 
 EXPO_PACKAGER_PROXY_URL="${EXPO_PUBLIC_BACKEND_BASE_URL}"
-export EXPO_PUBLIC_BACKEND_BASE_URL EXPO_PACKAGER_PROXY_URL
+export EXPO_PUBLIC_BACKEND_BASE_URL EXPO_PACKAGER_PROXY_URL EXPO_PUBLIC_COZE_PROJECT_ID
 # 运行时变量（为避免 set -u 的未绑定错误，预置为空）
 SERVER_PID=""
 EXPO_PID=""
+
 # ==================== 工具函数 ====================
 check_command() {
   if ! command -v "$1" &> /dev/null; then
@@ -114,10 +115,10 @@ start_expo() {
   pushd "$ROOT_DIR/client"
 
   if [ "$offline" = "1" ]; then
-    ( EXPO_OFFLINE=1 EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" \
+    ( EXPO_OFFLINE=1 EXPO_NO_DEPENDENCY_VALIDATION=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" EXPO_PUBLIC_COZE_PROJECT_ID="$EXPO_PUBLIC_COZE_PROJECT_ID" \
       nohup npx expo start --clear --port "$EXPO_PORT" 2>&1 | pipe_to_log "CLIENT" "$ROOT_DIR/logs/client.log" ) &
   else
-    ( EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" \
+    ( EXPO_NO_DEPENDENCY_VALIDATION=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" EXPO_PUBLIC_COZE_PROJECT_ID="$EXPO_PUBLIC_COZE_PROJECT_ID" \
       nohup npx expo start --clear --port "$EXPO_PORT" 2>&1 | pipe_to_log "CLIENT" "$ROOT_DIR/logs/client.log" ) &
   fi
   EXPO_PID=$!
@@ -150,6 +151,12 @@ if [ -f "$PREVIEW_DIR/pre_install.py" ]; then
   python "$PREVIEW_DIR/pre_install.py" || echo "pre_install.py 执行失败"
 fi
 
+echo "检查根目录 post_install.py"
+if [ -f "$PREVIEW_DIR/post_install.py" ]; then
+  echo "执行：python $PREVIEW_DIR/post_install.py"
+  python "$PREVIEW_DIR/post_install.py" || echo "post_install.py 执行失败"
+fi
+
 echo "==================== 开始启动 ===================="
 echo "开始执行服务启动脚本（start_dev.sh）..."
 echo "正在检查依赖命令和目录是否存在..."
@@ -188,6 +195,7 @@ fi
 echo "Expo 环境变量配置："
 echo "EXPO_PUBLIC_BACKEND_BASE_URL=${EXPO_PUBLIC_BACKEND_BASE_URL}"
 echo "EXPO_PACKAGER_PROXY_URL=${EXPO_PACKAGER_PROXY_URL}"
+echo "EXPO_PUBLIC_COZE_PROJECT_ID=${EXPO_PUBLIC_COZE_PROJECT_ID}"
 if [ -z "${EXPO_PID}" ]; then
   echo "无法获取 Expo 后台进程 PID"
 fi

package/lib/__templates__/expo/README.md

@@ -15,18 +15,16 @@
 |   └── package.json            # 服务端 package.json
 ├── client/                     # React Native 前端代码
 │   ├── app/                    # Expo Router 路由目录（仅路由配置）
-│   │   ├── _layout.tsx         # 根布局文件（必需）
+│   │   ├── _layout.tsx         # 根布局文件（必需，务必阅读）
 │   │   ├── home.tsx            # 首页
 │   │   └── index.tsx           # re-export home.tsx
 │   ├── screens/                # 页面实现目录（与 app/ 路由对应）
-│   │   └── home/
-│   │       ├── index.tsx       # 页面组件实现
-│   │       └── styles.ts       # 页面样式
+│   │   └── demo/               # demo 示例页面
+│   │       └── index.tsx       # 页面组件实现
 │   ├── components/             # 可复用组件
 │   │   └── Screen.tsx          # 页面容器组件（必用）
 │   ├── hooks/                  # 自定义 Hooks
 │   ├── contexts/               # React Context 代码
-│   ├── constants/              # 常量定义（如主题配置）
 │   ├── utils/                  # 工具函数
 │   ├── assets/                 # 静态资源
 |   └── package.json            # Expo 应用 package.json
@@ -34,6 +32,10 @@
 ├── .cozeproj                   # 预置脚手架脚本（禁止修改）
 └── .coze                       # 配置文件（禁止修改）
 
+## 样式方案（TailwindCSS v4）
+
+本项目通过 uniwind 实现了 react-native 对 TailwindCSS v4 的支持，在开始开发前，应先查看 client/global.css 了解必要的信息
+
 ## 安装依赖
 
 ### 命令

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

@@ -0,0 +1,15 @@
+import { View, Text } from 'react-native';
+import { Link } from 'expo-router';
+
+export default function NotFoundScreen() {
+  return (
+    <View className="flex-1 justify-center items-center bg-background">
+      <Text className="text-foreground">
+        页面不存在
+      </Text>
+      <Link href="/" className="text-accent mt-6">
+        返回首页
+      </Link>
+    </View>
+  );
+}

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

@@ -6,6 +6,8 @@ import { LogBox } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { AuthProvider } from "@/contexts/AuthContext";
 
+import '../global.css';
+
 LogBox.ignoreLogs([
   "TurboModuleRegistry.getEnforcing(...): 'RNMapsAirModule' could not be found",
   // 添加其它想暂时忽略的错误或警告信息
@@ -15,18 +17,18 @@ 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 />
+        <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>
     </AuthProvider>
   );

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

@@ -1,7 +1,7 @@
 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 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 => {

package/lib/__templates__/expo/client/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/eslint.config.mjs

@@ -6,6 +6,8 @@ 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';
 
 export default [
   {
@@ -16,6 +18,8 @@ export default [
       'src/api/**',       // 排除 src 下的自动生成 API
       '.expo/**',         // 排除 Expo 自动生成的文件
       'tailwind.config.js', // 排除 Tailwind 配置文件
+      '**/*.d.ts',
+      'eslint.config.*',
     ],
   },
   regexp.configs["flat/recommended"],
@@ -54,6 +58,8 @@ export default [
     plugins: {
       import: pluginImport,
       fontawesome6,
+      reanimated,
+      reactnative,
     },
     rules: {
       // 关闭代码风格规则
@@ -73,6 +79,20 @@ export default [
       '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 服务不可用，禁止在代码中使用',
+        },
+      ],
+      'reactnative/wrap-horizontal-scrollview-inside-view': ['error'],
     },
   },
 

package/lib/__templates__/expo/client/global.css

@@ -0,0 +1,76 @@
+@import 'tailwindcss';
+@import 'uniwind';
+
+:root,
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"] {
+  /* Theme Colors (Light Mode) */
+  --accent: oklch(55.00% 0.2500 254.00);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(97.02% 0.0040 254.00);
+  --border: oklch(90.00% 0.0040 254.00);
+  --danger: oklch(65.32% 0.2347 25.76);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(94.00% 0.0040 254.00);
+  --default-foreground: oklch(21.03% 0.0059 254.00);
+  --field-background: oklch(100.00% 0.0020 254.00);
+  --field-foreground: oklch(21.03% 0.0059 254.00);
+  --field-placeholder: oklch(55.17% 0.0081 254.00);
+  --focus: oklch(55.00% 0.2500 254.00);
+  --foreground: oklch(21.03% 0.0059 254.00);
+  --muted: oklch(55.17% 0.0081 254.00);
+  --overlay: oklch(100.00% 0.0012 254.00);
+  --overlay-foreground: oklch(21.03% 0.0059 254.00);
+  --scrollbar: oklch(87.10% 0.0040 254.00);
+  --segment: oklch(100.00% 0.0040 254.00);
+  --segment-foreground: oklch(21.03% 0.0059 254.00);
+  --separator: oklch(92.00% 0.0040 254.00);
+  --success: oklch(73.29% 0.1951 150.83);
+  --success-foreground: oklch(21.03% 0.0059 150.83);
+  --surface: oklch(100.00% 0.0020 254.00);
+  --surface-foreground: oklch(21.03% 0.0059 254.00);
+  --warning: oklch(78.19% 0.1598 72.35);
+  --warning-foreground: oklch(21.03% 0.0059 72.35);
+
+  /* Border Radius */
+  --radius: 0.75rem;
+  --field-radius: 0.5rem;
+
+  /* Font Family */
+  /* Make sure to load Google Sans font in your app */
+  --font-sans: var(--font-google-sans);
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Theme Colors (Dark Mode) */
+  --accent: oklch(55.00% 0.2500 254.00);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(12.00% 0.0040 254.00);
+  --border: oklch(28.00% 0.0040 254.00);
+  --danger: oklch(59.40% 0.1983 24.65);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(27.40% 0.0040 254.00);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0081 254.00);
+  --field-foreground: oklch(99.11% 0.0000 0.00);
+  --field-placeholder: oklch(70.50% 0.0081 254.00);
+  --focus: oklch(55.00% 0.2500 254.00);
+  --foreground: oklch(99.11% 0.0000 0.00);
+  --muted: oklch(70.50% 0.0081 254.00);
+  --overlay: oklch(21.03% 0.0081 254.00);
+  --overlay-foreground: oklch(99.11% 0.0000 0.00);
+  --scrollbar: oklch(70.50% 0.0040 254.00);
+  --segment: oklch(39.64% 0.0040 254.00);
+  --segment-foreground: oklch(99.11% 0.0000 0.00);
+  --separator: oklch(25.00% 0.0040 254.00);
+  --success: oklch(73.29% 0.1951 150.83);
+  --success-foreground: oklch(21.03% 0.0059 150.83);
+  --surface: oklch(21.03% 0.0081 254.00);
+  --surface-foreground: oklch(99.11% 0.0000 0.00);
+  --warning: oklch(82.03% 0.1399 76.36);
+  --warning-foreground: oklch(21.03% 0.0059 76.36);
+}

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/metro.config.js

@@ -1,6 +1,7 @@
 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);
 
@@ -118,4 +119,10 @@ config.server = {
   },
 };
 
-module.exports = config;
+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'
+});

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

@@ -25,26 +25,28 @@
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "dayjs": "^1.11.19",
-    "expo": "^54.0.7",
+    "expo": "54.0.32",
     "expo-auth-session": "^7.0.9",
     "expo-av": "~16.0.6",
     "expo-blur": "~15.0.6",
     "expo-camera": "~17.0.10",
     "expo-constants": "~18.0.8",
     "expo-crypto": "^15.0.7",
+    "expo-file-system": "~19.0.21",
     "expo-font": "~14.0.7",
     "expo-haptics": "~15.0.6",
+    "expo-image": "^3.0.11",
     "expo-image-picker": "~17.0.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",
     "expo-symbols": "~1.0.6",
     "expo-system-ui": "~6.0.9",
     "expo-web-browser": "~15.0.10",
+    "js-base64": "^3.7.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
@@ -60,17 +62,20 @@
     "react-native-web": "^0.21.2",
     "react-native-webview": "~13.15.0",
     "react-native-worklets": "0.5.1",
+    "tailwindcss": "^4.1.18",
+    "uniwind": "^1.2.7",
     "zod": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "babel-preset-expo": "^54.0.9",
     "@eslint/js": "^9.27.0",
     "@types/jest": "^29.5.12",
     "@types/react": "~19.1.0",
     "@types/react-test-renderer": "19.1.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-preset-expo": "^54.0.9",
     "chalk": "^4.1.2",
+    "connect": "^3.7.0",
     "depcheck": "^1.4.7",
     "esbuild": "0.27.2",
     "eslint": "^9.39.2",
@@ -81,13 +86,12 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-regexp": "^2.10.0",
     "globals": "^16.1.0",
+    "http-proxy-middleware": "^3.0.5",
     "jest": "^29.2.1",
     "jest-expo": "~54.0.10",
     "react-test-renderer": "19.1.0",
     "tsx": "^4.21.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
-    "connect": "^3.7.0",
-    "http-proxy-middleware": "^3.0.5"
+    "typescript-eslint": "^8.32.1"
   }
 }

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

@@ -1,24 +1,18 @@
 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}
-      >
+    <Screen backgroundColor="var(--background)" statusBarStyle="auto">
+      <View className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
         <Image
-          style={styles.logo}
+          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"
-        ></Image>
-        <Text style={{...styles.title, color: theme.textPrimary}}>APP 开发中</Text>
-        <Text style={{...styles.description, color: theme.textSecondary}}>即将为您呈现应用界面</Text>
+        />
+        <Text className="text-base font-bold text-foreground">APP 开发中</Text>
+        <Text className="text-sm mt-2 text-muted">即将为您呈现应用界面</Text>
       </View>
     </Screen>
   );

package/lib/__templates__/expo/client/uniwind-types.d.ts

@@ -0,0 +1,10 @@
+// NOTE: This file is generated by uniwind and it should not be edited manually.
+/// <reference types="uniwind/types" />
+
+declare module 'uniwind' {
+    export interface UniwindConfig {
+        themes: readonly ['light', 'dark']
+    }
+}
+
+export {}