跨端分层可复用的现代前端工程化平台，收敛请求、状态、日志与UI到独立包。

方案简介

Skyroc 是一个跨端、分层、可复用的现代前端工程化平台。它不把所有代码堆进一个 Admin 应用，而是让应用成为轻量装配层：请求、状态、日志、调度、类型和工具等基础能力全部沉淀为边界清晰的 workspace 包，供 Web、React Native 与未来的小程序复用。平台同时提供 @skyroc/web-ui 与 @skyroc/native-ui 双端设计系统，二者共用设计令牌但各自保留符合平台习惯的实现。工程上通过 pnpm catalog 统一版本管理，用 Turborepo 编排任务，并用 oxlint、oxfmt、Vitest 与 Playwright 统一质量流程。该方案适合需要同时开发中后台管理端与移动端 App、希望基础能力跨端复用、追求工程分层解耦的前端团队。想先看效果可以打开 Admin 在线预览、Web UI 文档或 Native UI 文档；想直接开发，Web 后台从 apps/admin 开始，移动端从 apps/expo-templete 开始。

亮点与能力

• 🧱 分层解耦 — 应用只负责装配与业务，稳定能力进入 Core、Web Kit、Native UI 等独立包。
• 🌐 跨端复用 — 请求、状态、日志、调度、类型和工具收敛平台差异，可被 Web、React Native 与未来小程序复用。
• 🎨 双端设计系统 — @skyroc/web-ui 与 @skyroc/native-ui 共用设计令牌，各自保留符合平台习惯的实现。
• 🔧 统一工程化 — pnpm catalog 管理版本，Turborepo 编排任务，oxlint、oxfmt、Vitest 与 Playwright 统一质量流程。
• 📦 开箱即用 — pnpm create skyroc 可创建脱离 monorepo、独立安装运行的 Admin 或 Expo 项目。
• 📱 移动端模板 — expo-templete 提供完整的 Expo 业务模板，登录态、网络层、主题、国际化、深链与原生打包脚本都已就位。

组成与分工

• React 19 / TypeScript：应用层主要技术栈，Web Admin 基于 React 19 与 Vite 8 构建。
• Vite 8：Web 端构建工具，通过 @skyroc/web-admin-vite 提供构建预设。
• Expo：移动端开发框架，apps/expo-templete 提供完整的 Expo 业务模板。
• pnpm（catalog）：包管理器，通过 catalog 统一管理 workspace 各包版本。
• Turborepo：monorepo 任务编排，统一调度各 workspace 包的构建与开发任务。
• @skyroc/tailwind-plugin：设计令牌由该插件统一生成，再按平台输出，保证双端设计一致。

前置要求

• 使用 pnpm 作为包管理器（catalog 版本管理依赖 pnpm workspace）。
• monorepo 各 workspace 依赖 internal/* 提供的 TypeScript、测试、Lint 与 UnoCSS 配置。
• Web Admin 当前版本技术栈为 React 19、Vite 8、TanStack Router、Jotai、Ant Design 6。

实施步骤

1. 选择入口

根据开发目标选择对应应用：

| 目标 | 应用 | 启动命令 |
| 基于干净骨架开发后台 | apps/admin | pnpm --filter skyroc-admin dev |
| 查看完整后台能力 | apps/admin-example | pnpm --filter admin-example dev |
| 对接 RuoYi / FastAPI | apps/ruoyi-plus-fast | pnpm --filter ruoyi-plus-fast dev |
| 开发 Expo 业务 App | apps/expo-templete | pnpm --filter expo-templete start |
| 开发 Web 组件 | apps/web-ui-playground | pnpm --filter skyroc-ui-playground dev |
| 开发 Native 组件 | apps/native-ui-playground | pnpm --filter native-ui-playground start |

2. 启动 Web 后台

bash
pnpm --filter skyroc-admin dev

3. 启动移动端模板

bash
pnpm --filter expo-templete start

4. 或脱离 monorepo 独立创建项目

bash
pnpm create skyroc

创建出的 Admin 或 Expo 项目可独立安装运行。

使用与配置要点

• Web 后台日常开发入口为 apps/admin，完整后台能力演示见 apps/admin-example。
• 移动端使用 expo-templete，其中登录态、网络层、主题、国际化、深链与原生打包脚本都已就位。
• 通过 Admin 文档了解路由、菜单、权限、请求与主题；Web UI 文档与 Native UI 文档分别查阅组件 API。
• 在线预览地址：admin.skyroc.me（v3 管理端）。

注意事项与常见问题

• 小程序目录仍作为后续扩展预留，尚未落地。
• Web 与 Native 的 UI、主题和平台 API 分开维护，不要在应用层复制共享包已提供的能力。
• 公共类型保持单一来源，设计令牌统一由 @skyroc/tailwind-plugin 生成。
• 调整包布局或依赖方向前，先阅读 packages/ARCHITECTURE.md。

优缺点

• ✓ 跨端复用，收敛平台差异
• ✓ 开箱即用，独立安装运行
• ✕ 小程序仅预留，尚未落地

出处

本方案挖掘自开源项目 Ohh-889/skyroc，方案内容与实施命令均来自其 README 原文。