Skip to content
On this page

DesignRock 核心层包说明

DesignRock(磐石)是 Grow Admin 的框架核心层,所有包以 @grow-admin-rock/* 命名。

README「相关包说明」速查表见 开发规范 - 相关包速查

包总览

包名职责
@grow-admin-rock/iocIOC 依赖注入容器(基于 Inversify)
@grow-admin-rock/base-packageLibrary 基座、AppContext、模块 install 机制
@grow-admin-rock/types全局 TypeScript 类型定义
@grow-admin-rock/constants枚举与常量(主题、菜单、权限等)
@grow-admin-rock/componentsRockComponent 枚举、Grow* 契约组件、ComponentMap
@grow-admin-rock/component-driver抽象驱动、ComponentDriverProvider、Builder API
@grow-admin-rock/component-driver-element-plusElement Plus 组件映射(84 个)
@grow-admin-rock/component-driver-naiveNaive UI 组件映射(84 个)
@grow-admin-rock/component-driver-antdvAnt Design Vue 组件映射(84 个)
@grow-admin-rock/layouts布局壳:LayoutSettingDrawerMenuSettingThemeSwitchLanguage
@grow-admin-rock/mockMock 注册中心、resultSuccess/resultError 工具
@grow-admin-rock/infrastructureHTTP 请求基础设施(Axios 封装)
@grow-admin-rock/middleware-router路由表、菜单状态、路由操作器
@grow-admin-rock/settings项目设置(主题色、布局模式、暗色模式)
@grow-admin-rock/statePinia 状态管理封装
@grow-admin-rock/locale国际化(i18n)
@grow-admin-rock/hooks通用 Hooks(设置、断点等)
@grow-admin-rock/utils工具函数(含 VueUse 重导出)
@grow-admin-rock/styles全局样式与 Reset CSS

@grow-admin-rock/ioc

基于 Inversify 的 IOC 容器封装。

主要导出:

导出说明
IocPluginVue 插件,挂载 IOC 容器
IocContainerIOC 容器类
AsyncIocModule异步模块加载
diKT / di服务获取工具
THROWN_HANDLER异常处理标识

@grow-admin-rock/base-package

Library 基座,定义模块接入契约。

主要导出:

导出说明
AppContext应用上下文(路由、IOC 模块、参数、生命周期)
installLibrary 自动装配函数
toPackage将配置转为标准 Library
Library / ModuleLibContextLibrary 类型定义
APP_CONTEXTIOC 服务标识符

@grow-admin-rock/components

契约组件层,业务代码的主要 UI 入口。

主要导出:

导出说明
RockComponent84 个组件契约枚举
LibLibrary 声明(注册 Grow* 全局组件)
ComponentMap组件映射表
useDriverComponent获取驱动组件
useMessage / useNotice / useDialog命令式 API
setMessage / setNotice / setDialog驱动绑定注入
withInstall组件安装工具
ContextParamDefAppContext 参数标识

@grow-admin-rock/component-driver

组件驱动桥接基础包。

主要导出:

导出说明
ComponentDriverProvider局部驱动覆盖组件
createDriverHook驱动 Hook 创建
GrowAdminComponentDriver驱动接口类型
RockComponent重导出契约枚举

三个驱动子包均实现 GrowAdminComponentDriver 接口,提供 builder().enableXxx().finish() API。


@grow-admin-rock/infrastructure

HTTP 请求基础设施。

主要导出:

导出说明
LibLibrary 声明(注册 Axios 服务)
InfrastructureAxiosAxios 封装类
setPromoter基础设施配置注入
RequestCanceler请求取消器
InfrastructureHelper辅助工具
axios重导出 axios

IOC 服务:

  • InfrastructureAxios — HTTP 客户端
  • CreateAxiosOptions — Axios 创建配置
  • AxiosTransform — 请求/响应转换器

@grow-admin-rock/middleware-router

路由与菜单中间件。

主要导出:

导出说明
LibLibrary 声明
RoutesTable路由表(含 Vue Router 实例)
RouteOperator路由操作器
MenuState菜单状态管理

路由表在 IOC 加载时根据 AppContext.basicRoutesAppContext.appRoutes 动态创建。

业务代码通过 resolveByKeyOrThrow(routeLib.types.RouteTable).router 获取 router 实例,布局层与动态路由注册均遵循此约定apps-loginuseLoginSuccess 等少数历史代码仍直接使用 useRouter(),新代码建议统一走 IoC。


@grow-admin-rock/mock

Mock 注册中心与响应工具。

主要导出:

导出说明
LibLibrary 声明(注册 MockRegistry
registerMock业务包注册 Mock 方法
getMockModules聚合所有已注册 Mock
resultSuccess / resultError统一 { type, data, message } 响应格式

详见 Mock 数据


@grow-admin-rock/layouts

布局与项目配置 UI 组件。

主要导出:

导出说明
Layout / LayoutLogo主布局壳与 Logo
SettingDrawer项目配置抽屉
SettingTheme主题模式 + 主题色表单项
SwitchLanguage语言切换表单项
Menu侧边菜单容器(从 authStore.backMenuList 读取)
PageLoading页面加载动画

Menu 组件通过 MenuTreeNode 递归渲染树形菜单,使用 GrowSubMenu / GrowMenuItem 契约组件,点击跳转通过 IoC 获取 router。


@grow-admin-rock/settings

项目设置 IOC 服务(SettingStoreGlobConfigMenuSettingData 等),与 projectSetting.ts 配合。

功能:

  • 主题色切换
  • 暗色模式
  • 布局模式(侧边栏 / 混合 / 顶部)
  • 菜单折叠、宽度
  • 多标签页配置
  • 页面过渡动画

装配状态

当前 sample 宿主未默认装配 settingsLibuseGlobConfig(OAuth、authMode)依赖此包 + hooks。详见 项目配置 - 可选模块


@grow-admin-rock/hooks

通用 Hooks(useGlobConfiguseBreakpoint 等)。

library.tsonSetup 通过 createBreakpointListen 更新移动端状态,需同时装配 settings + hooks 才完整生效


@grow-admin-rock/state

Pinia 状态管理封装。

主要导出:

导出说明
defineStore重导出 Pinia defineStore
storeToRefs重导出 storeToRefs
LibLibrary 声明
useAppConfig项目配置状态(主题色、主题模式等)
useAuthStore认证状态(backMenuListisDynamicAddedRoute 等)
useAppStore页面 loading(setPageLoadingsetPageLoadingTip
useLayout布局状态(菜单折叠等)
useTheme主题 CSS 变量动态写入
useLoginRememberStore登录记住密码(pinia persist)
DataEventBusmitt 事件总线 + Vue 生命周期 $watchWithVue

authStore.backMenuList 存储接口返回的树形菜单数据,供 rock-layouts/Menu 渲染侧边栏。


@grow-admin-rock/locale

国际化支持。

主要导出:

导出说明
useI18ni18n Hook
t / $t翻译函数
useLocale语言切换 Hook
localeHelper国际化辅助工具

@grow-admin-rock/hooks

通用 Hooks 集合。

主要导出:

导出说明
SettingHooks项目设置相关 Hooks
useBreakpoint响应式断点 Hook

@grow-admin-rock/utils

工具函数库,同时重导出 @vueuse/core

主要模块:

模块说明
config配置工具
is类型判断
toDataType数据类型转换
utils通用工具(clone、deepMerge 等)

@grow-admin-rock/constants

框架枚举与常量。

主要枚举:

枚举说明
ComponentLibraryType组件库类型
ThemeEnum主题(明/暗)
MenuModeEnum / MenuTypeEnum菜单模式与类型
PermissionModeEnum权限模式
ContentLayoutEnum内容布局
RouterTransitionEnum路由过渡动画
CacheTypeEnum缓存类型

@grow-admin-rock/types

全局 TypeScript 类型定义,被所有 Rock 包引用。

主要类型:

  • ProjectSetting — 项目配置
  • RouteRecordItem — 路由记录
  • RequestOptions — 请求配置
  • WmqComponentDictionary — 组件驱动字典

@grow-admin-rock/styles

全局样式入口,在 sample/src/main.ts 中首行引入:

typescript
import '@grow-admin-rock/styles'

包含 Reset CSS、CSS 变量(variables.css)、亮/暗主题 token 与主题切换过渡动画(theme-transition.css)。