项目总览
Skyroc Admin —— 基于 React 19 的跨端 monorepo 后台管理系统
这是什么
Skyroc Admin 是一个基于 pnpm + Turborepo 的 monorepo 后台管理系统工程,使用 React 19 + TypeScript + Vite 构建。它不是单一应用,而是一整套「分层、跨端、可复用」的前端基础设施:
- 应用(
apps/*)只是一层薄壳,负责装配与业务页面; - 真正的能力沉淀在数十个
@skyroc/*workspace 包中,按 平台优先 + 分层 的原则组织; - 同一套基础设施可服务 Web、未来的 React Native 与小程序端。
整体分层
┌───────────────────────────────────────────────┐
│ Applications apps/admin · apps/admin-example │ 业务应用(薄壳)
└───────────────────────────────────────────────┘
▲ 依赖
┌───────────────────────────────────────────────┐
│ Web 端能力包 packages/web/* │ 布局/主题/UI/i18n/通知/vite…
└───────────────────────────────────────────────┘
▲ 依赖
┌───────────────────────────────────────────────┐
│ @core 基础设施 packages/@core/* │ axios/utils/state/service…
│ 跨端共享 packages/shared/* · hooks │ tokens/types/hooks/form
└───────────────────────────────────────────────┘
▲ 依赖
┌───────────────────────────────────────────────┐
│ 类型层 @skyroc/types(零依赖) │ 全局 namespace 声明
└───────────────────────────────────────────────┘依赖方向严格自上而下,禁止反向与循环依赖。详见 包分层与依赖方向。
技术栈速览
| 领域 | 选型 |
|---|---|
| 框架 / 语言 | React 19、TypeScript 6 |
| 构建 | Vite、Turborepo、tsdown |
| 路由 | TanStack Router(文件式路由) |
| 状态 | Jotai(客户端)+ TanStack Query(服务端) |
| UI | Ant Design 6 + 自研 @skyroc/web-ui(Radix + Tailwind) |
| 样式 | UnoCSS、Tailwind、Sass、OKLCH 主题算法 |
| 工具链 | Oxlint、Oxfmt、Vitest、pnpm catalog |
完整内容见 技术栈全景。
如何阅读本文档
快速上手
环境准备、安装、启动开发服务器
架构设计
Monorepo、分层、catalog、Turborepo
@core 基础设施
axios / utils / state / service 等核心包
Web 端能力包
布局、主题、UI 组件、i18n、构建预设
Admin 应用
应用启动链路、路由、认证、请求层
工程化
Lint、格式化、测试、构建、编码规范
仓库约定
- 包管理器:pnpm
10.4.1(Node>= 20) - 命名空间:发布包统一使用
@skyroc/*作用域(UnoCSS 预设例外为@sa/uno-config) - 代码风格:Oxlint + Oxfmt,详见 Lint 与格式化
- 组件规范:箭头函数组件、props 内部解构、禁用
useCallback等,详见 React 编码规范