expo-bbase 1.2.0 → 1.3.1

package/README.md

@@ -1,6 +1,6 @@
 # expo-bbase
 
-Expo SDK 54+ 脚手架 CLI 工具，支持交互式选择功能模块一键生成 React Native 项目。
+Expo SDK 54+ 脚手架 CLI 工具，支持交互式选择功能模块和 UI 模板一键生成 React Native 项目。
 
 ## 快速开始
 
@@ -8,13 +8,25 @@ Expo SDK 54+ 脚手架 CLI 工具，支持交互式选择功能模块一键生
 npx expo-bbase my-app
 ```
 
-## 功能特性
+创建项目时，你将看到两步交互选择：
 
-- ✅ 交互式模块选择
-- ✅ Expo SDK 54 + Expo Router v5
-- ✅ NativeWind v4 (Tailwind CSS)
-- ✅ TypeScript 开箱即用
-- ✅ 20+ 可选功能模块
+1. **UI 模板选择** — 选择项目初始页面结构
+2. **功能模块选择** — 选择需要的功能模块
+
+## UI 模板
+
+### Login + Tabs（推荐）
+
+开箱即用的完整 UI 结构，基于 [reactnative.reusables](https://reactnativereusables.com/) 组件：
+
+- 🔐 **登录页** — SignInForm 组件（Card + Input + Label + Button + Separator）
+- 🏠 **Home Tab** — Button 全变体展示（default/secondary/destructive/outline/ghost/link）+ AlertDialog 演示
+- 📋 **List Tab** — Card 列表展示
+- 👤 **Mine Tab** — 用户信息 Card + Sign Out 退出按钮
+
+### Default
+
+最基础的 Home + Explore 双 Tab 布局，适合从零开始自定义 UI。
 
 ## 可选模块
 
@@ -37,7 +49,7 @@ npx expo-bbase my-app
 | Apple 登录 | expo-apple-authentication |
 | WebView 容器 | react-native-webview + JS Bridge |
 | 多语言 | i18next + react-i18next |
-| 动画/手势 | Reanimated 3 + Gesture Handler |
+| 动画/手势 | Reanimated 4 + Gesture Handler + Worklets |
 
 ### P2 扩展模块
 | 模块 | 说明 |
@@ -47,70 +59,157 @@ npx expo-bbase my-app
 | 用户权限管理 | 权限请求/检查封装 |
 | Bottom Sheet | @gorhom/bottom-sheet |
 | FlashList | @shopify/flash-list |
-| reactnative.reusables UI | 预置 UI 组件 |
+| reactnative.reusables UI | 官方 rnr 组件（Button, Text, Input, Label, Card, Separator, AlertDialog） |
+
+## CLI 命令
+
+```bash
+# 创建新项目（交互式选择 UI 模板 + 模块）
+npx expo-bbase <project-name>
+npx expo-bbase create <name>       # 同上
+
+# 在已有项目中增量升级模块文件和依赖
+npx expo-bbase upgrade [path]      # path 默认为当前目录
+
+# 在已有项目中添加新模块
+npx expo-bbase add [path]          # 交互式选择要添加的模块
+npx expo-bbase add [path] -m network,state  # 指定模块 ID
+
+npx expo-bbase --version           # 显示版本号
+npx expo-bbase --help              # 显示帮助信息
+```
 
 ## 使用示例
 
+### 创建 Login + Tabs 项目
+
 ```bash
-# 创建项目
 npx expo-bbase my-awesome-app
+# → 选择 "Login + Tabs" 模板
+# → 选择功能模块
+# → cd my-awesome-app
+# → npx expo start
+# → App 启动后显示登录页，登录后进入 3 Tab 主页
+```
 
-# 进入项目目录
-cd my-awesome-app
+### 创建默认项目
 
-# 启动开发服务器
-npx expo start
+```bash
+npx expo-bbase my-awesome-app
+# → 选择 "Default" 模板
+# → 选择功能模块
+# → cd my-awesome-app
+# → npx expo start
 ```
 
-## CLI 选项
+### 增量升级
 
 ```bash
-npx expo-bbase <project-name>    # 创建新项目
-npx expo-bbase create <name>     # 等同于上面的命令
-npx expo-bbase --version         # 显示版本号
-npx expo-bbase --help            # 显示帮助信息
+# 在 expo-bbase 创建的项目目录下
+cd my-awesome-app
+npx expo-bbase upgrade
+# → 自动读取 .expo-bbase.json，更新所有已安装模块的文件和依赖
 ```
 
-## 开发
+### 添加新模块
 
 ```bash
-# 安装依赖
-npm install
-
-# 开发模式（监听文件变化）
-npm run dev
+cd my-awesome-app
+npx expo-bbase add
+# → 交互式选择要添加的模块（已安装的模块不会出现）
 
-# 构建
-npm run build
+# 或直接指定模块
+npx expo-bbase add . -m bottom-sheet,flashlist
 ```
 
-## 项目结构（生成项目）
+## 技术栈
+
+生成的项目默认包含：
+
+- **Expo SDK 54** + New Architecture
+- **Expo Router v5** — 文件路由
+- **NativeWind v4** — Tailwind CSS for React Native
+- **TypeScript** — 类型安全
+- **react-native-svg** — SVG 支持
+
+所有依赖版本与 Expo SDK 54 的 `bundledNativeModules.json` 对齐。
+
+## 项目结构（Login + Tabs 模板）
 
 ```
 my-app/
-├── app/                    # Expo Router 页面
-│   ├── _layout.tsx
+├── app/                          # Expo Router 页面
+│   ├── _layout.tsx               # 根布局 (Stack)
+│   ├── login.tsx                  # 登录页
 │   ├── (tabs)/
-│   │   ├── _layout.tsx
-│   │   ├── index.tsx
-│   │   └── explore.tsx
+│   │   ├── _layout.tsx           # Tab 布局 (Home/List/Mine)
+│   │   ├── home.tsx              # Button & AlertDialog 展示
+│   │   ├── list.tsx              # Card 列表
+│   │   └── mine.tsx              # 个人中心 + 退出
 │   └── +not-found.tsx
 ├── src/
-│   ├── api/               # 网络请求 (可选)
-│   ├── stores/            # 状态管理 (可选)
-│   ├── storage/           # 本地存储 (可选)
-│   ├── modules/           # 功能模块 (可选)
-│   ├── components/        # 公共组件
-│   ├── hooks/             # 自定义 Hooks
-│   ├── constants/         # 常量
-│   └── types/             # 类型定义
-├── assets/                # 静态资源
-├── app.json               # Expo 配置
-├── babel.config.js        # Babel 配置
-├── metro.config.js        # Metro 配置
-├── tailwind.config.js     # Tailwind 配置
-├── tsconfig.json          # TypeScript 配置
-└── package.json           # 项目依赖
+│   ├── api/                      # 网络请求 (可选)
+│   ├── stores/                   # 状态管理 (可选)
+│   ├── storage/                  # 本地存储 (可选)
+│   ├── components/
+│   │   ├── ui/                   # rnr UI 组件
+│   │   │   ├── button.tsx
+│   │   │   ├── text.tsx
+│   │   │   ├── input.tsx
+│   │   │   ├── label.tsx
+│   │   │   ├── card.tsx
+│   │   │   ├── separator.tsx
+│   │   │   └── alert-dialog.tsx
+│   │   └── SignInForm.tsx        # 登录表单
+│   ├── lib/
+│   │   └── utils.ts              # cn() 工具函数
+│   ├── modules/                  # 功能模块 (可选)
+│   ├── hooks/                    # 自定义 Hooks
+│   ├── constants/                # 常量
+│   └── types/                    # 类型定义
+├── global.css                    # NativeWind CSS 变量 (light/dark)
+├── assets/                       # 静态资源
+├── app.json                      # Expo 配置
+├── babel.config.js               # Babel 配置 (NativeWind + Reanimated)
+├── metro.config.js               # Metro 配置 (withNativeWind)
+├── tailwind.config.js            # Tailwind 配置 (rnr 色板变量)
+├── tsconfig.json                 # TypeScript 配置
+├── .expo-bbase.json              # CLI 状态文件
+└── package.json                  # 项目依赖
+```
+
+## 配置文件
+
+### `.expo-bbase.json`
+
+每个由 expo-bbase 创建的项目根目录下会生成此文件，记录已安装的模块和 CLI 版本：
+
+```json
+{
+  "projectName": "my-app",
+  "selectedModules": ["network", "state", "ui-reusables"],
+  "cliVersion": "1.3.0",
+  "uiTemplate": "login-tabs"
+}
+```
+
+`upgrade` 和 `add` 命令依赖此文件判断项目状态。
+
+## 开发
+
+```bash
+# 克隆仓库
+git clone https://github.com/dlgchg/expo-bbase.git
+cd expo-bbase
+
+# 安装依赖
+npm install
+
+# 开发模式（监听文件变化）
+npm run dev
+
+# 构建
+npm run build
 ```
 
 ## License