依赖关系图

总览图

                         ┌─────────────────────┐
                         │   apps/admin (Web)  │
                         └─────────┬───────────┘
                                   │
              ┌────────────────────┴───────────────────────┐
              ▼                                            ▼
   ┌────────────────────┐                  ┌────────────────────────┐
   │  packages/web/*    │                  │  packages/web/ui/*     │
   │  admin-layouts     │                  │  web-ui (shadcn)       │
   │  admin-theme       │                  │  web-ui-antd           │
   │  admin-i18n        │                  │  web-ui-compose        │
   │  admin-runtime     │                  │  materials             │
   │  ...               │                  └─────────┬──────────────┘
   └─────────┬──────────┘                            │
             │                                       │
             └─────────────┐               ┌─────────┘
                           ▼               ▼
                  ┌─────────────────────────────────────┐
                  │      packages/primitives/*          │
                  │        @skyroc/form                 │
                  └─────────────────┬───────────────────┘
                                    ▼
                  ┌─────────────────────────────────────┐
                  │      packages/shared/*              │
                  │  ui-tokens · ui-types · hooks       │
                  └─────────────────┬───────────────────┘
                                    ▼
                  ┌─────────────────────────────────────┐
                  │      packages/@core/*               │
                  │  utils · types · type-utils · color │
                  │  axios · state · service · logger   │
                  │  scheduler · scripts                │
                  └─────────────────────────────────────┘

依赖方向自上而下：上层可以 import 下层，下层不能反向 import。

自下而上的层级解释

层	路径	性质	是否含 React
L1 基础设施	`packages/@core/*`	无 UI · 跨平台 · 业务核心	部分（`state`）
L2 共享数据	`packages/shared/*`	零依赖 · 跨平台	部分（`hooks`）
L3 能力原语	`packages/primitives/*`	跨平台 · UI-agnostic	✅
L4 Web 平台	`packages/web/`、`packages/web/ui/`	Web 专属	✅
L5 应用	`apps/admin`	业务装配	✅

Native / 小程序层与 L4 平行，依赖方向相同（都依赖 L1–L3）。

关键链路

1. 主题链路

@skyroc/color
   └─ @skyroc/adapter-antd-theme
         └─ @skyroc/web-admin-theme
               ├─ @skyroc/core-state
               ├─ @skyroc/ui-tokens
               └─ @skyroc/tailwind-plugin
                     │  (peer)
                     ▼
                  apps/admin

详见 @skyroc/web-admin-theme。

2. 请求链路

@skyroc/axios
   └─ @skyroc/service
         └─ apps/admin (createAppRequest + createQueryClient)
               ├─ @tanstack/react-query
               └─ @skyroc/web-admin-i18n (错误消息 i18n)

详见 @skyroc/service。

3. 日志链路

@skyroc/logger（核心）
   ├─ @skyroc/logger/web   ← WebStorageAdapter（IndexedDB）
   └─ @skyroc/logger/native ← RNStorageAdapter（AsyncStorage）
         │
         ▼
      apps/* 在 bootstrap 注入

4. UI 设计系统链路

@skyroc/ui-types  ←  @skyroc/ui-tokens  ←  @skyroc/tailwind-plugin
                                                  │
                                                  ▼
                                          @skyroc/web-ui  （shadcn 风格）
                                                  │
                                                  ▼
                                       @skyroc/web-ui-antd
                                       @skyroc/web-ui-compose
                                                  │
                                                  ▼
                                       @skyroc/materials
                                                  │
                                                  ▼
                                       @skyroc/web-admin-layouts
                                                  │
                                                  ▼
                                            apps/admin

5. 状态链路

jotai (npm)
   └─ @skyroc/core-state
         └─ @skyroc/web-admin-theme / web-admin-i18n / web-admin-layouts ...
               └─ apps/admin

详见 @skyroc/core-state。

6. 表单链路

@skyroc/type-utils (深层 path 类型)
   └─ @skyroc/form (form-core + react)
         └─ apps/admin / @skyroc/web-ui

详见 @skyroc/form。

7. 路由 + Devtools

@tanstack/react-router  ─┐
@tanstack/react-query   ─┼─→  @skyroc/web-admin-devtools  →  apps/admin
jotai                   ─┘

详见 @skyroc/web-admin-devtools。

反例：禁止的依赖方向

反例	理由
`@skyroc/utils` ← `react`	utils 必须跨 React / RN / Node
`@skyroc/color` ← `antd`	color 是 OKLCH 数学层，与 UI 框架解耦
`@skyroc/web-admin-theme` ← `react-native`	Web 专属包不依赖 RN
`@skyroc/web-ui` ← `apps/admin`	应用 → 库的反向依赖
`@skyroc/shared/` ← `@skyroc/web-`	shared 必须跨平台

如果发现反例，多半是设计层级出错——应在 PR 中立刻指出。

包数量速览

层	数量（不含已删除）
`packages/@core/*`	10（含 scripts）
`packages/shared/*`	3
`packages/primitives/*`	1
`packages/web/*`	9
`packages/web/ui/*`	3
`packages/native/*`	—
`packages/miniapp/*`	—
`internal/*`	3
`apps/*`	4+（admin、admin-example、web-ui-playground、app、native-ui-playground 等）
`docs/*`	5

工具：可视化依赖

仓库可以用以下命令导出依赖：

# 单包的依赖链
pnpm why @skyroc/utils

# 某个包的所有 dependents
pnpm list -r --filter ...@skyroc/utils

# Turborepo 任务图（含依赖关系）
pnpm build --dry-run --graph

--graph 会输出 Mermaid 文本，可在 docs 中直接 render。

与其它架构文档的关系

主题	文档
Monorepo 工具与目录	Monorepo
抽象 / 实现层级	包分层
平台横向切分	平台优先
平台差异如何隔离	适配器模式
包命名规则	命名规范
集中版本管理	Catalog
任务编排	Turborepo

依赖关系图

On this page