gs-eant-comp

gs-eant-comp 是从 main 工程拆分出来的业务系统基础壳。

它不是单纯的组件库，而是为 main、gs-flow-engine、gs-ai-assistant 以及其他宿主工程提供统一的系统外壳、基础组件、配置工作台和动态容器能力。宿主工程只需要维护自己的业务页面和业务容器，公共的布局、菜单、工作台、基础组件能力由本包提供。

定位

main 原本包含较多基础能力和业务能力。为了让 main 更干净，也让其他工程可以按需复用，部分能力被拆分到独立 npm 包中维护。

gs-eant-comp 主要负责：

• 系统布局和应用外壳
• PC / Mobile 基础布局
• 菜单、页签、用户区、头部工具区
• 配置工作台入口
• PC / Mobile 动态容器机制
• 常用管理组件
• 错误页和基础空状态页面
• 路由 / 菜单初始化工具

不建议在本包中长期维护具体业务页面。业务页面、业务容器、流程引擎、AI 助手等能力应由对应宿主或独立包维护。

技术栈

• Vue 3
• Vite
• Ant Design Vue 4
• Bootstrap 5
• Vue Router 4
• Vuex 4
• Vue Request
• Grid Layout Plus

安装

npm install gs-eant-comp

样式需要在宿主工程中引入：

import 'gs-eant-comp/dist/gs-eant-comp.css'

使用方式

全量注册基础组件

import { createApp } from 'vue'
import GsEantComp from 'gs-eant-comp'
import 'gs-eant-comp/dist/gs-eant-comp.css'

const app = createApp(App)

app.use(GsEantComp)

全量注册会注册基础组件，例如 EList、ETable、ETree、ESelect、EModal、EDrawer 等。

按需引入

import {
  AppLayout,
  SystemSettingTool,
  ETable,
  EModal,
  initMenu,
} from 'gs-eant-comp'

按需引入适合宿主只使用部分组件或工具方法的场景。

主要导出

系统外壳

| 导出 | 说明 | | --- | --- | | AppLayout | 系统基础布局入口，支持多种 PC 布局和 Mobile App 布局 | | SystemSettingTool | 系统设置工具入口 |

工作台能力

| 导出 | 说明 | | --- | --- | | registerWorkbenchContainerLoader | 注册 PC / Mobile 工作台动态容器加载器 |

全局工具能力

| 导出 | 说明 | | --- | --- | | registerGlobalTool | 向全局工具区注册工具组件 | | unregisterGlobalTool | 注销全局工具组件 |

当前全局工具入口保留导出，主要用于后续扩展和兼容。

基础组件

| 导出 | 说明 | | --- | --- | | ESpin | 加载容器 | | EModal | 弹窗容器 | | EDrawer | 抽屉容器 | | EMenu | 菜单组件 | | ETabs | 标签组件 | | ESteps | 步骤组件 | | ETree | 树组件 | | EList | 列表组件 | | ETable | 表格组件 | | ESelect | 选择组件 | | EDraggable | 拖拽组件 | | ColorSelector | 颜色选择组件 | | CResponsiveFilter | 响应式筛选组件 | | CResponsiveHeader | 响应式页面头部 | | CFooterPaginationBar | 底部分页条 |

错误页

| 导出 | 说明 | | --- | --- | | Error403 | 403 页面 | | Error404 | 404 页面 | | Error500 | 500 页面 | | empty | 空页面 | | missing | 缺失页面 | | Warning | 警告页面 | | NoAccess | 无权限页面 |

工具方法

| 导出 | 说明 | | --- | --- | | initMenu | 路由 / 菜单初始化工具 |

AppLayout 目录结构

src/components/AppLayout
├── index.vue
├── modules
│   ├── ClassicLayout.vue
│   ├── DefaultLayout.vue
│   ├── DockLayout.vue
│   ├── MobileAppLayout.vue
│   ├── SidebarAppProLayout.vue
│   ├── SidebarMenuLayout.vue
│   ├── TopLevelMenuLeftLayout.vue
│   ├── TopLevelMenuRightLayout.vue
│   └── TopLevelMenuRightProLayout.vue
├── components
│   ├── account
│   ├── mobile
│   ├── navigation
│   ├── settings
│   ├── tools
│   └── workbench
└── composables

目录职责：

• modules：不同布局实现。
• components/navigation：菜单、面包屑、页签。
• components/mobile：移动端头部、菜单、底部导航。
• components/account：用户区和修改密码。
• components/settings：系统设置入口、抽屉和配置面板。
• components/tools：头部工具、全局工具区和工具注册表。
• components/workbench：工作台、容器配置和动态容器注册。

工作台动态容器

宿主工程可以注册动态容器加载器，让工作台按配置加载宿主自己的业务容器。

import { registerWorkbenchContainerLoader } from 'gs-eant-comp'

registerWorkbenchContainerLoader((path) => {
  // 返回宿主工程中的容器组件
})

该机制用于 PC 工作台、Mobile 首页等配置化场景。

开发命令

npm run dev
npm run build
npm run test

发布说明

构建产物输出到 dist，包入口由 package.json 中的 main 和 module 指向：

{
  "main": "dist/gs-eant-comp.umd.cjs",
  "module": "dist/gs-eant-comp.js"
}

发布前建议至少执行：

npm run build

维护原则

• 本包优先维护系统外壳、工作台、基础组件和跨宿主通用能力。
• 宿主业务页面不应长期沉淀在本包中。
• 与流程引擎、AI 助手等独立能力相关的代码，应通过对应 npm 包接入。
• 对外导出保持稳定，内部目录可以按职责继续收敛。