Web Kit 总览
Skyroc Web Kit 文档入口,覆盖后台应用壳、运行时启动、多语言、布局材料、Tailwind 主题插件、Ant Design 主题适配与应用级主题管理
Skyroc Web Kit 面向 Web 后台产品的界面工程层,负责把应用级后台壳、运行时启动、多语言、布局骨架、路由页签、主题变量、Ant Design 主题适配和应用级主题状态沉淀成可复用包。
这组文档适合在搭建后台应用框架、统一主题系统、沉淀页面材料或接入 Skyroc UI 设计语言时阅读。
文档入口
@skyroc/web-admin-layouts
管理后台应用壳,组合菜单生成、权限、路由页签、布局状态、主题抽屉、Header 插槽和业务扩展。
@skyroc/materials
后台 UI 材料库,提供插槽式 AdminLayout 与多风格 PageTab,覆盖固定顶栏、侧边栏、页签、内容滚动和移动端适配。
@skyroc/tailwind-plugin
Tailwind CSS 主题插件,通过 CSS 变量注入语义颜色、圆角、字号、动画和高频 utility。
@skyroc/web-admin-vite
管理后台 Vite 预设包,收口构建产物、开发代理、路由插件、React 插件、图标插件、自动导入和应用级配置入口。
@skyroc/web-admin-runtime
管理后台运行时启动助手,统一 Dayjs、Iconify provider、NProgress 和应用版本更新检测。
@skyroc/web-admin-i18n
管理后台多语言运行时,统一 i18next 初始化、语言状态、语言切换组件和第三方语言同步入口。
Theme 系统概述
解释 OKLCH 色彩算法、Ant Design token 生成、React 主题状态和应用接入之间的分层关系。
@skyroc/adapter-antd-theme
Ant Design 主题算法适配器,用 OKLCH 色彩空间生成符合 Ant Design token 规范的亮暗色主题。
@skyroc/web-admin-theme
Web 管理端主题管理包,封装 Jotai 状态、AntdProvider、ThemeEffect、预设系统和主题切换组件。
如何选择
| 场景 | 优先使用 |
|---|---|
| 需要完整后台壳、菜单、权限、tabs、主题抽屉和业务插槽 | @skyroc/web-admin-layouts |
| 搭建后台主框架、固定 Header / Tab / Sider / Footer | @skyroc/materials |
| 需要路由标签页,且要支持 Button / Chrome / Slider 风格 | @skyroc/materials 的 PageTab |
| 需要统一 Vite 构建、开发代理、路由插件、图标插件和自动导入 | @skyroc/web-admin-vite |
| 需要统一 Dayjs、Iconify provider、NProgress 和应用更新检测初始化 | @skyroc/web-admin-runtime |
| 需要统一 i18next 初始化、语言状态、语言切换和语言副作用入口 | @skyroc/web-admin-i18n |
| 需要把 Skyroc 主题变量注入 Tailwind | @skyroc/tailwind-plugin |
| 只需要 Ant Design 色板算法或 token 生成 | @skyroc/adapter-antd-theme |
| 需要完整应用级主题状态、暗色模式、副作用和 Ant Design Provider | @skyroc/web-admin-theme |
工程分层
@skyroc/tailwind-plugin
提供 CSS 变量、语义颜色、圆角、字号和 utility。
@skyroc/adapter-antd-theme
基于 @skyroc/color 生成 Ant Design 色板与 token。
@skyroc/web-admin-theme
在主题算法之上封装 React 状态、Provider、预设和 DOM 副作用。
@skyroc/materials
在主题与基础 UI 之上沉淀后台布局材料和路由页签。
@skyroc/web-admin-layouts
在布局材料之上组合菜单、权限、tabs、主题抽屉、布局状态和应用插槽。
@skyroc/web-admin-vite
收口后台应用的 Vite 配置、插件编排、代理规则和构建产物规则。
@skyroc/web-admin-runtime
收口后台应用的运行时启动 helper,保留宿主应用对 env、router、通知 UI 和启动顺序的控制。
@skyroc/web-admin-i18n
收口后台应用的 i18next 初始化、语言状态、语言切换 UI 和语言变化副作用入口。