DesignRock 核心层包说明 ​

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

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

包总览 ​

@grow-admin-rock/ioc ​

基于 Inversify 的 IOC 容器封装。

主要导出：

@grow-admin-rock/base-package ​

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

主要导出：

@grow-admin-rock/components ​

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

主要导出：

@grow-admin-rock/component-driver ​

组件驱动桥接基础包。

主要导出：

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

@grow-admin-rock/infrastructure ​

HTTP 请求基础设施。

主要导出：

IOC 服务：

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

@grow-admin-rock/middleware-router ​

路由与菜单中间件。

主要导出：

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

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

@grow-admin-rock/mock ​

Mock 注册中心与响应工具。

主要导出：

详见 Mock 数据。

@grow-admin-rock/layouts ​

布局与项目配置 UI 组件。

主要导出：

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

@grow-admin-rock/settings ​

项目设置 IOC 服务（SettingStore、GlobConfig、MenuSettingData 等），与 projectSetting.ts 配合。

功能：

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

@grow-admin-rock/hooks ​

通用 Hooks（useGlobConfig、useBreakpoint 等）。

library.ts 的 onSetup 通过 createBreakpointListen 更新移动端状态，需同时装配 settings + hooks 才完整生效。

@grow-admin-rock/state ​

Pinia 状态管理封装。

主要导出：

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

@grow-admin-rock/locale ​

国际化支持。

主要导出：

@grow-admin-rock/hooks ​

通用 Hooks 集合。

主要导出：

@grow-admin-rock/utils ​

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

主要模块：

@grow-admin-rock/constants ​

框架枚举与常量。

主要枚举：

@grow-admin-rock/types ​

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

主要类型：

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

@grow-admin-rock/styles ​

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

import '@grow-admin-rock/styles'

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

@grow-admin-rock/code-sandbox ​

在线代码编辑与 Vue SFC 沙箱预览（Monaco + @vue/compiler-sfc）。预览挂载在宿主 Vue 树内，可继续使用 Grow* 组件与 IOC。

主要导出：

目录：DesignRock/rock-code-sandbox。

完整 API、用法与注意事项见 代码沙箱。演示模块见 apps-sandbox。

@grow-admin-rock/designer ​

低代码页面设计器：拖拽物料、配置属性 / 样式 / 事件，支持数据源与变量绑定，输出可渲染 schema。

主要导出：

目录：DesignRock/rock-designer。

完整说明见 页面设计器。演示模块见 apps-designer。

@grow-admin-rock/report-designer ​

基于 ECharts 的报表设计器：网格布局、图表视觉配置、页面级数据 + 区块数据绑定，导出 ReportSchema 并由渲染器拉数展示。

主要导出：

目录：DesignRock/rock-report-designer。

完整说明见 报表设计器。演示入口同 apps-designer（菜单：报表设计器）。区块数据经页面 state 绑定；可与 数据准备 查询结果对接（由数据请求写入 state）。工具链见 低代码设计器。

@grow-admin-rock/schema-designer ​

基于 Vue Flow 的可视化数据库建模：表 / 字段 / 关联（1:1、1:N、N:N），导出可持久化的 DatabaseSchema JSON。当前方言为 PostgreSQL。

主要导出：

目录：DesignRock/rock-schema-designer。

完整说明见 数据库建模。演示入口同 apps-designer（菜单：数据库建模）。

@grow-admin-rock/data-prep ​

可视化数据准备（分析层 Dataset）：从 Schema 选表、配置多表 Join、公式度量（metricConfigs）与输出字段投影，支持预览聚合与本地 / Mock 查询。查询结果经页面 / 报表的 apiOutlined 写入 state 后绑定展示；报表不直选 Dataset。

主要导出：

目录：DesignRock/rock-data-prep。

完整说明见 数据准备。工具链见 低代码设计器。演示入口同 apps-designer（菜单：数据准备）。

@grow-admin-rock/data-clean ​

可视化数据清洗（声明式 ETL 流）：从组件库拖入源 / 清洗 / 合并 / 聚合 / 输出节点，连成有向无环图，产物为 CleanFlow（设计期编排，调用时执行）。提供全量节点配置 UI、本地管道预览（runCleanFlowLocal）与 Mock /data-clean/*；展示侧消费者绑定仍待对接。

主要导出：

目录：DesignRock/rock-data-clean。Mock：sample/mock/dataClean.ts。

完整说明见 数据清洗。工具链见 低代码设计器。演示入口同 apps-designer（菜单：数据清洗）。

@grow-admin-rock/process-engine ​

可视化流程编排（业务审批 / 事件 / 系统 / 状态机 / 决策）：从组件库拖入节点，自上而下连成 ProcessFlow。当前为设计期编排与全量配置 UI；尚无运行时执行引擎与独立 Mock。

主要导出：

目录：DesignRock/rock-process-engine。

完整说明见 流程引擎。演示入口同 apps-designer（菜单：流程引擎）。