Skyroc

跨端、分层、可复用的现代前端工程化平台

从中后台应用到 Web / Native UI，再到请求、状态、日志与工程工具，能力全部沉淀为边界清晰的 workspace 包。

在线预览 · 项目文档 · Admin 文档 · Web UI 文档 · Native UI 文档 · GitHub · Gitee

Tip

想先看效果，打开 Admin 在线预览、Web UI 文档或 Native UI 文档；想直接开发，Web 后台从 apps/admin 开始，移动端从 apps/expo-templete 开始。

✨ 为什么是 Skyroc

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

Web Admin、Web UI、React Native / Expo 组件库和 Expo 业务模板都已经落地；小程序目录仍作为后续扩展预留。

🚀 在线体验与文档

内容	说明	入口
Skyroc Admin	当前 v3 管理端	在线预览
RuoYi Plus Fast	RuoYi / FastAPI 全栈管理端	在线预览
Admin 文档	路由、菜单、权限、请求与主题	admin-docs.skyroc.me
Web UI 文档	Web 组件 API 与设计系统	web-ui-docs.skyroc.me
Native UI 文档	Native 组件 API 与真实 Demo	native-ui.skyroc.me

历史版本与文档

版本	技术栈	在线预览	文档
v3（当前）	React 19 · Vite 8 · TanStack Router · Jotai · Ant Design 6	admin.skyroc.me	Admin Docs
v2	React 19 · Vite 6 · React Router 7 · Redux Toolkit · Ant Design 5	admin-v2.skyroc.me	v2 Docs
v1	React 18 · Vite 5 · React Router 6 · Redux Toolkit · Ant Design 5	admin-v1.skyroc.me	v1 Docs

🧭 选择你的入口

目标	应用	启动命令
基于干净骨架开发后台	`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`

🏗️ 架构设计

Skyroc 不是把所有代码堆进一个 Admin 应用，而是让应用成为轻量装配层，让基础能力可以独立理解、测试和演进。

┌────────────────────────────────────────────────────────────────────┐
│ Applications                                                       │
│ admin · admin-example · ruoyi-plus-fast · expo-templete            │
│ Web / Native Playground                                            │
│ 负责：业务页面、路由装配、服务适配与应用配置                        │
└──────────────────────────────┬─────────────────────────────────────┘
                               │ depends on
┌──────────────────────────────▼─────────────────────────────────────┐
│ Platform                                                           │
│ packages/web/* · packages/native/*                                 │
│ 负责：布局、主题、UI、i18n、通知、运行时与构建预设                  │
└──────────────────────────────┬─────────────────────────────────────┘
                               │ depends on
┌──────────────────────────────▼─────────────────────────────────────┐
│ Foundation                                                         │
│ packages/@core/* · packages/hooks · packages/primitives/*          │
│ 负责：请求、状态、日志、调度、色彩、类型与通用工具                  │
└────────────────────────────────────────────────────────────────────┘

internal/* ── 为各 workspace 提供 TypeScript、测试、Lint 与 UnoCSS 配置

架构约束

应用层负责业务与装配，不复制共享包已经提供的能力。
Web 与 Native 的 UI、主题和平台 API 分开维护。
跨端包把平台差异收敛在明确的子路径或适配器中。
公共类型保持单一来源；设计令牌由 @skyroc/tailwind-plugin 统一生成，再按平台输出。
调整包布局或依赖方向前，先阅读 packages/ARCHITECTURE.md。

包命名约定

命名	适用范围	示例
`@skyroc/<能力>`	跨端基础设施、共享能力或平台无关原语	`@skyroc/utils`、`@skyroc/service`、`@skyroc/form`、`@skyroc/uno-config`
`@skyroc/web-*`	Web 布局、主题、UI 与运行时能力	`@skyroc/web-ui`、`@skyroc/web-admin-vite`
`@skyroc/native-*`	React Native / Expo 专属能力	`@skyroc/native-ui`
`@skyroc/expo-*`	Expo 原生模块（含自定义原生代码）	`@skyroc/expo-bluetooth`、`@skyroc/expo-wechat`

📦 Workspace 包地图

分层	包
跨端内核	`@skyroc/utils` · `@skyroc/axios` · `@skyroc/service` · `@skyroc/core-state` · `@skyroc/logger` · `@skyroc/color` · `@skyroc/tailwind-plugin` · `@skyroc/scripts` · `create-skyroc`
共享与原语	`@skyroc/hooks` · `@skyroc/form`
Web Kit	admin shell（`packages/web/admin`，经 `@shell/*` 别名引用，包含开发调试面板）· `@skyroc/web-admin-vite`
UI	`@skyroc/web-ui` · `@skyroc/native-ui`（admin 侧复合组件已并入 shell 的 `ui/`）
原生模块	`@skyroc/expo-bluetooth` · `@skyroc/expo-wechat`
内部配置	`@skyroc/config` · `@skyroc/tsconfig` · `@skyroc/uno-config`

查看全部包的职责

🧬 跨端内核 — `packages/@core/*`

| 包名 | 职责 | | ------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | @skyroc/utils | 平台无关工具集合，通过 ./web、./path、./cn、./crypto 等子路径隔离特定能力 | | @skyroc/axios | 类型安全的 Axios 客户端，提供重试、转换管道、请求取消与后端响应处理 | | @skyroc/service | 请求与 TanStack Query 基础设施，通过适配器接入鉴权、导航和消息反馈 | | @skyroc/core-state | Jotai 状态封装与可注入存储的跨端状态能力 | | @skyroc/logger | 基于 LogLayer 的 Web、React Native、小程序日志与存储适配 | | @skyroc/color | 基于 colord / culori 的色彩工具与 OKLCH、Ant Design 调色板生成 | | @skyroc/tailwind-plugin | 设计令牌唯一来源，生成 Web / Native 的 Tailwind v4 主题变量与预设 | | create-skyroc | packages/@core/create-skyroc | pnpm create skyroc 脚手架；构建时从源码准备模板资产，运行时生成独立 Admin 项目 | | @skyroc/scripts | 提交、清理、发布、依赖更新与 changelog 等通用工程 CLI |

🔗 共享能力与原语

包名	位置	职责
`@skyroc/hooks`	`packages/hooks`	平台无关 React Hooks，并以 `./web` 隔离浏览器 Hooks
`@skyroc/form`	`packages/primitives/filed-form`	类型安全字段管理、路径级订阅与 Standard Schema 校验原语

零运行时的 TypeScript 工具类型在 @skyroc/utils/type，三端组件共用的主题 / 尺寸 / 方向类型在 @skyroc/tailwind-plugin/ui。原先的 @skyroc/type-utils 与 @skyroc/ui-types 两个包已分别并入这两处。

🧩 Web 工程套件 — `packages/web/*`

包名	职责
`packages/web/admin`（shell）	后台应用壳源码目录：布局、主题、i18n、通知、运行时、开发调试面板、全局样式与全局类型。不发布，仓库内经 `@shell/*` 别名共享，`pnpm create skyroc` 生成独立项目时复制进 `src/framework`
`@skyroc/web-admin-vite`	Vite、React Compiler、TanStack Router、UnoCSS、自动导入等构建预设

🎨 UI 组件库与原生模块

包名	位置	职责
`@skyroc/web-ui`	`packages/web/shadcn-ui`	基于 Radix UI 与 Tailwind CSS 的 Web 基础组件和 primitives API
`@skyroc/native-ui`	`packages/native/ui`	基于 React Native、Expo 与 Uniwind 的 Native 组件库
`@skyroc/expo-bluetooth`	`packages/native/bluetooth`	蓝牙可用性的 Expo 模块封装：状态查询、权限申请与开启引导
`@skyroc/expo-wechat`	`packages/native/wechat`	微信开放平台 SDK 的 Expo 模块封装：登录授权与九种分享

🛠️ 内部工程配置 — `internal/*`

包名	职责
`@skyroc/config`	Vitest、Oxlint 等共享开发配置
`@skyroc/tsconfig`	各 workspace 复用的 TypeScript 基础配置
`@skyroc/uno-config`	Admin 主题、shortcuts 与设计变量的 UnoCSS 预设

⚡ 快速开始

环境要求

Node.js 22.11、24 或 26+
pnpm 11 或更高版本
Native 开发还需要 Expo、iOS 或 Android 本地环境

git clone https://github.com/Ohh-889/skyroc-admin.git
cd skyroc-admin

corepack enable
pnpm install
pnpm --filter skyroc-admin dev

启动移动端模板

pnpm --filter expo-templete doctor   # 环境自检：工具链 / .env / ANDROID_HOME / xcode-select
pnpm --filter expo-templete ios      # 首次需要 development build，Expo Go 跑不起来
pnpm --filter expo-templete start    # 之后改 JS 只要起 dev server

模板的环境变量、打包脚本与目录约定见 apps/expo-templete/README.md。

创建新的 Admin 应用

# 在当前 monorepo 的 apps/ 下创建应用
pnpm create:admin my-admin

# 创建可以脱离 monorepo 独立安装的工程
pnpm create skyroc my-admin --target /path/to/projects/my-admin

更多参数见 create-skyroc 文档。

🗂️ 仓库结构

skyroc-admin/
├── apps/
│   ├── admin/                  # 精简 Admin 模板
│   ├── admin-example/          # 完整功能示例
│   ├── ruoyi-plus-fast/        # RuoYi / FastAPI 管理端
│   ├── expo-templete/          # Expo 业务 App 模板
│   ├── web-ui-playground/      # Web UI 演示场
│   └── native-ui-playground/   # Expo / Native UI 演示场
├── packages/
│   ├── @core/                  # 跨端运行时基础
│   ├── shared/                 # 共享类型与轻量能力
│   ├── hooks/                  # 跨端 React Hooks
│   ├── primitives/             # 平台无关原语
│   ├── web/                    # Web Kit 与 Web UI
│   └── native/                 # React Native UI 与 Expo 原生模块
├── docs/                       # 六个独立文档站
├── design/                     # 产品设计、决策与原型
├── internal/                   # 内部共享配置
└── scripts/                    # 仓库级辅助脚本

🧰 主要技术栈

范围	技术
Web	React 19、Vite 8、TanStack Router、TanStack Query、Jotai、Ant Design 6
Native	React Native、Expo SDK 57、expo-router、Uniwind、Tailwind CSS 4
UI	Radix UI、Ant Design、`@skyroc/web-ui`、`@skyroc/native-ui`
工程	TypeScript 6、pnpm workspace、Turborepo、oxlint、oxfmt
测试	Vitest、Testing Library、Playwright
文档	Next.js、Fumadocs

依赖版本以 package.json、pnpm-workspace.yaml 和锁文件为准。

🛠️ 常用命令

命令	用途
`pnpm dev` / `pnpm build`	Turborepo 编排全仓开发 / 构建
`pnpm typecheck` / `pnpm lint`	TypeScript 检查 / oxlint
`pnpm format` / `pnpm format:check`	oxfmt 格式化 / 仅检查
`pnpm test` / `pnpm test:e2e`	Vitest / Playwright
`pnpm create:admin <name>`	从内置模板创建 Admin 应用
`pnpm clean`	清理 workspace 构建产物

开发单个 workspace 时优先使用 pnpm --filter <workspace-name> <command>，减少无关任务和输出。

🤝 参与项目

贡献流程：CONTRIBUTING.md
仓库级开发约定：AGENTS.md
Web 专属约定：packages/web/AGENTS.md
Native / Uniwind 约定：packages/native/AGENTS.md
问题反馈：GitHub Issues
代码贡献：Pull Requests

提交遵循 Conventional Commits，并保持单次提交职责清晰。

🙏 致谢

Skyroc 由 Soybean Admin 演进而来。感谢原项目的优秀设计，也感谢所有提供基础能力的开源社区。

领域	开源生态
基础框架	React · TanStack · Jotai
UI 与设计	Ant Design · Radix UI · shadcn/ui
Native 跨端	Expo · Uniwind
Monorepo 工程	Turborepo

📄 License

基于 MIT License 开源，可自由用于个人和商业项目。

由 Ohh-889 维护 · GitHub · Gitee · admin.skyroc.me

如果这个项目对你有帮助，欢迎点一个 ⭐️

Name		Name	Last commit message	Last commit date
.agents/skills		.agents/skills
.changeset		.changeset
.claude		.claude
.cursor		.cursor
.github		.github
.vscode		.vscode
apps		apps
design/ruoyi-plus-fast		design/ruoyi-plus-fast
docs		docs
internal		internal
packages		packages
scripts		scripts
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmignore		.npmignore
.npmrc		.npmrc
.oxfmtrc.json		.oxfmtrc.json
.oxlintrc.json		.oxlintrc.json
AGENTS.md		AGENTS.md
CLAUDE.md		CLAUDE.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
skills-lock.json		skills-lock.json
turbo.json		turbo.json
vitest.config.ts		vitest.config.ts

Navigation Menu

Repository files navigation

Skyroc

✨ 为什么是 Skyroc

🚀 在线体验与文档

🧭 选择你的入口

🏗️ 架构设计

架构约束

包命名约定

📦 Workspace 包地图

🧬 跨端内核 — `packages/@core/*`

🔗 共享能力与原语

🧩 Web 工程套件 — `packages/web/*`

🎨 UI 组件库与原生模块

🛠️ 内部工程配置 — `internal/*`

⚡ 快速开始

环境要求

启动移动端模板

创建新的 Admin 应用

🗂️ 仓库结构

🧰 主要技术栈

🛠️ 常用命令

🤝 参与项目

🙏 致谢

📄 License

About

Releases

Packages

Used by

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Skyroc

✨ 为什么是 Skyroc

🚀 在线体验与文档

🧭 选择你的入口

🏗️ 架构设计

架构约束

包命名约定

📦 Workspace 包地图

🧬 跨端内核 — packages/@core/*

🔗 共享能力与原语

🧩 Web 工程套件 — packages/web/*

🎨 UI 组件库与原生模块

🛠️ 内部工程配置 — internal/*

⚡ 快速开始

环境要求

启动移动端模板

创建新的 Admin 应用

🗂️ 仓库结构

🧰 主要技术栈

🛠️ 常用命令

🤝 参与项目

🙏 致谢

📄 License

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

🧬 跨端内核 — `packages/@core/*`

🧩 Web 工程套件 — `packages/web/*`

🛠️ 内部工程配置 — `internal/*`