包总览

29 个包的用途、分层与依赖关系

仓库把后台系统里反复出现的能力拆成了 29 个包。这一页是它们的全局视图:总表、分层、依赖关系与命名规则。

API 参考按平台分成三处,下面的总表每一行都直接指过去:

去哪内容
跨端核心packages/@core/* 九个包:工具函数、请求、状态、调度、色彩、日志
跨端 Hookspackages/hooks:Store 基类与七个 React hooks
表单原语packages/primitives/filed-form:类型安全表单
Web 端包packages/web/* 十四个包:设计系统、主题、布局、运行时、构建
本栏跨端共享层总览与 internal/* 配置预设

想知道这些能力在应用里怎么装配,去 Admin 应用;想理解为什么这么拆,去 包分层与依赖方向

分层

packages/ 按「跨平台基础能力 + 平台子树」组织,依赖总体从应用和平台实现流向跨平台基础能力:

              apps/admin · apps/admin-example

      ┌─────────────────────┴─────────────────────┐
      │                                           │
 packages/web/*                            packages/native/*
 DOM · antd · Vite                         RN · Expo · Uniwind
      │                                           │
      └─────────────────────┬─────────────────────┘

            packages/primitives/* · packages/hooks

                    packages/@core/*

@core 只是物理目录分组,不是 TypeScript namespace,也不存在 @skyroc/core 这个包。

硬约束

规则说明
禁止循环依赖无例外。
跨平台包不得依赖平台包@core/hooks/primitives/ 不能 import web/native/
Web 与 Native 不得互相依赖两棵平台子树彼此隔离。
只走公开 exports不得导入其他包的 src/ 内部路径。
@core/ 保持在链底不反向依赖 hooks/primitives/ 或平台包。

同一层内允许职责明确的单向依赖——「同层」不是禁止依赖的理由。完整规则见 packages/ARCHITECTURE.md

28 个包总表

「内部依赖」一列只列 workspace 内的包(dependencies + peerDependencies),不含第三方。

packages/@core —— 基础设施层(9)

目录职责内部依赖
@skyroc/types@core/types全局类型声明,挂 Api / Router / I18n / App 命名空间
@skyroc/utils@core/utils跨端工具函数,含 ./type./web./path./cn./crypto./scheduler 子入口
@skyroc/color@core/color颜色处理与调色板,基于 colord / culori,OKLCH + antd 色板
@skyroc/tailwind-plugin@core/tailwind-pluginTailwind 插件:OKLCH 主题 token、反馈色、侧边栏色板,Web / Native 共用;./ui 子入口提供三端组件词汇表color
@skyroc/axios@core/axios类型安全 HTTP 客户端:重试、转换管线、取消、可插拔后端响应处理utils
@skyroc/service@core/service平台无关的请求 & 查询基础设施,适配器模式axios
@skyroc/core-state@core/stateJotai 状态封装,跨端
@skyroc/logger@core/logger基于 LogLayer 的跨端日志(Web / RN / 小程序)
@skyroc/scripts@core/scriptsCLI sa:changelog、release、git-commit、cleanup

跨端 hooks 与原语(2)

目录职责内部依赖
@skyroc/hookshooks跨端 React hooks,浏览器能力隔离在 ./web 子入口
@skyroc/formprimitives/filed-form类型安全表单原语,字段级订阅utils

packages/web —— Web 平台(13)

设计系统

目录职责内部依赖
@skyroc/web-uiweb/shadcn-uiRadix + Tailwind 组件库,50+ 组件,preset / primitives 双层 APIcolorui-typesutilsformtailwind-plugin
@skyroc/web-ui-composeweb/ui/compose无状态复合组件 + useTable 系列表格能力colorutils
@skyroc/web-ui-antdweb/ui/antdAnt Design 复合业务组件web-ui-compose

主题

目录职责内部依赖
@skyroc/adapter-antd-themeweb/antd-themeantd 主题算法适配,OKLCH 色彩空间color
@skyroc/web-admin-themeweb/admin-theme应用级主题:配置、预设、hooks、CSS 变量、暗色模式adapter-antd-themecolorhooksutilsweb-ui-antdweb-ui-compose

布局与样式

目录职责内部依赖
@skyroc/materialsweb/materials插槽式 AdminLayout 与多风格 PageTabcolorutilsweb-ui
@skyroc/web-admin-layoutsweb/admin-layouts完整后台壳:菜单、权限、tabs、布局状态、主题抽屉10 个,见下
@skyroc/web-admin-stylesweb/admin-styles全局 CSS 资产(global.css

运行时

目录职责内部依赖
@skyroc/web-admin-runtimeweb/admin-runtime启动期插件 helper:Dayjs、Iconify、NProgress、更新检测utils
@skyroc/web-admin-i18nweb/admin-i18n后台 i18n 运行时与语言切换 UI,语言 JSON 也在这里core-stateweb-ui-antd
@skyroc/web-admin-notificationweb/admin-notification通知 Provider、hooks、通知面板、header actionutilsweb-ui-antdweb-ui-compose
@shell/devtoolsweb/admin/devtoolsAdmin Shell 内置的开发调试模块

构建

目录职责内部依赖
@skyroc/web-admin-viteweb/admin-viteVite 配置预设与插件集合,defineConfig 出口

三个 ui/* 包的组件文档、实时 Demo 和 Props 表在独立的 Web UI 站点,主站只保留 一页指路

packages/native —— Native 平台(1)

目录职责内部依赖
@skyroc/native-uinative/uiReact Native 组件库,Uniwind(Tailwind CSS v4)utilshooksform

组件文档与 Expo Demo 在独立的 Native UI 站点。

internal —— 内部配置(3)

目录职责发布
@skyroc/tsconfiginternal/tsconfig共享 TS 编译预设private
@skyroc/configinternal/config共享 Vitest / Oxlint 预设private
@skyroc/uno-configinternal/uno-configUnoCSS 预设 presetSoybeanAdmin()可发布

内部包统一使用 @skyroc scope,见 命名规范

依赖关系

改一个包会波及谁

按运行时反向依赖数排序——这张表决定改动的风险等级

被几个包依赖谁依赖它
@skyroc/utils10axios、form、materials、native-ui、web-ui、web-ui-compose、web-admin-layouts、web-admin-notification、web-admin-runtime、web-admin-theme
@skyroc/color8uno-config、adapter-antd-theme、materials、tailwind-plugin、web-ui、web-ui-compose、web-admin-layouts、web-admin-theme
@skyroc/tailwind-plugin2native-ui、web-ui
@skyroc/web-ui-antd4web-admin-i18n、web-admin-layouts、web-admin-notification、web-admin-theme
@skyroc/web-ui-compose4web-admin-layouts、web-admin-notification、web-admin-theme、web-ui-antd
@skyroc/hooks3native-ui、web-admin-layouts、web-admin-theme
@skyroc/core-state2web-admin-i18n、web-admin-layouts
@skyroc/web-ui2materials、web-admin-layouts
@skyroc/form2native-ui、web-ui
@skyroc/axiosmaterialsadapter-antd-themeweb-admin-i18nweb-admin-theme1

@skyroc/utils@skyroc/color 是两个真正的枢纽:改它们的公开 API,一次要验证 8–10 个下游包。

但两者的波及方向不同

  • @skyroc/utils 横跨两棵平台子树——Web 侧 9 个包 + Native 侧的 native-ui 都依赖它。同时被 Web 和 Native 依赖的运行时包只有三个:utilshooksform。改这三个要两端一起验。
  • @skyroc/color 全部下游都在 Web 侧(外加 internal/uno-config),native-ui 并不依赖它。改它只需验 Web。

最重的集成包

@skyroc/web-admin-layouts 依赖 10 个内部包,是整棵 Web 树的顶点:

@skyroc/web-admin-layouts
├── @skyroc/web-admin-theme      主题状态与 antd 适配
├── @skyroc/web-admin-i18n       菜单与界面文案
├── @skyroc/materials            AdminLayout 骨架、PageTab
├── @skyroc/web-ui               基础组件
├── @skyroc/web-ui-antd          antd 复合组件
├── @skyroc/web-ui-compose       无状态复合组件
├── @skyroc/core-state           Jotai store
├── @skyroc/hooks                跨端 hooks
├── @skyroc/color                色板计算
└── @skyroc/utils                工具函数

所以「后台壳」不是一个包,而是一条装配链。定位布局问题时按这条链自上而下排查。

零内部依赖的包(12)

这些包不依赖任何其他 workspace 包,可以单独理解、测试和发布:

typescolorcore-stateloggerscriptstype-utilsui-typeshooksweb-admin-stylesweb-admin-vitetsconfigconfig

工程化底座(devDependency)

有三个包几乎被所有包引用,但都是 devDependencies,不进运行时产物:

被几个包引用作用
@skyroc/tsconfig25各包 tsconfig.jsonextends 目标
@skyroc/config20Vitest 与 Oxlint 预设
@skyroc/types7提供全局环境类型(Api.*Router.*I18n.*

@skyroc/types 值得单独说明:它只声明全局命名空间,不导出任何运行时值,所以是 devDependency 而非 dependency。业务代码写 Api.Auth.UserInfo 时不需要 import——这也是为什么它的运行时反向依赖数是 0。

命名规则

包类别命名方式示例
跨平台能力不带平台前缀@skyroc/utils@skyroc/hooks@skyroc/form
Web 专属@skyroc/web-*@skyroc/web-ui@skyroc/web-admin-runtime
Native 专属@skyroc/native-*@skyroc/native-ui
平台适配器@skyroc/adapter-*@skyroc/adapter-antd-theme

@skyroc/materials 是位于 web/ 下的历史专名,新包不要照此扩大例外。@skyroc/tailwind-plugin 的裸名是合规的——它是跨平台能力,住在 @core/。目录名与发布名不要求一致,package.json#name 为准

怎么查

你在找什么去哪
某个函数的签名、参数、返回值上表点进对应包
这个包在 admin 里怎么接Admin 应用 对应专题页
该把新代码放进哪个包包分层与依赖方向
新建一个包要做什么新增包
组件长什么样、有哪些 props独立的 Web UI / Native UI 站点

Last updated on