gs-eant-comp

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

它集中维护系统外壳、基础组件、首页配置和动态容器能力，通过 npm 包提供给主基座、各能力工程及业务项目。宿主负责认证与权限接入、业务页面、业务容器和接口适配，本包提供共用的界面与交互基础。

项目定位与背景

早期主工程中同时包含系统布局、基础组件和业务功能。随着这些能力在多个工程中复用，系统外壳与 E 系列组件逐步迁出，由本工程统一维护。

因此，本工程不只是组件库，也承载了这套框架的页面组织方式：共用布局、菜单与页签、系统设置、配置化首页，以及列表、树、表格和编辑弹窗等管理页面基础。

PC 与移动端共享导航、账号和首页基础设施，布局与首页配置页由宿主显式注册。业务容器由宿主提供，本地应用提供开发演示。

主要能力

| 分类 | 内容 | | --- | --- | | 系统外壳 | AppLayout、PC 与移动端布局、菜单、页签、面包屑和账号区域 | | 系统配置 | 设置入口、布局选择、主题及宿主提供的首页配置页 | | 首页与容器 | PC 工作台、移动首页、首页设计器、容器管理和动态加载 | | 基础组件 | E 系列管理组件、响应式头部与筛选、分页和颜色选择 | | 页面与工具 | 错误页、空状态、权限提示，以及路由和菜单初始化 | | 系统文档 | 宿主菜单目录、页面能力说明、配图及维护预览 | | 数据库文档 | 数据表与字段说明、搜索、维护及 Word 导出 | | 系统地图 | 页面能力、实现位置与调用链路展示 | | 系统管理 | 日志查看、运行统计与系统检查 | | 扩展接口 | 布局、配置页、宿主容器及全局工具注册入口 |

全局工具通过注册接口接入，具体展示由布局决定。

工程关系

主基座通过本包接入公共界面，各能力工程通过本包复用布局和基础组件。流程、AI 和定时任务分别由对应能力包提供，宿主按需组合。

gs-meta-code 展示本包的接入资料和基础组件说明，也用于组合验证。新增跨工程共用的布局和组件优先在本工程维护，具体业务页面与表单留在宿主或对应能力工程。

技术体系

使用 Vue 3、Vite 7、Ant Design Vue 4、Bootstrap 5、Less、Vue Router 4、Vuex 4 和 Vue Request，首页排版使用 Grid Layout Plus。具体依赖和版本以 package.json 为准。

接入与使用

npm install gs-eant-comp

宿主在插件安装前提供 $API、$HTTP，引入样式并注册需要的布局：

import GsEantComp, { SidebarAppProLayout } from 'gs-eant-comp'
import 'gs-eant-comp/dist/gs-eant-comp.css'

app.use(GsEantComp, {
  pcLayouts: { sideBarPro: SidebarAppProLayout },
})

插件注册共用基础组件并接入宿主 API。布局键名对应宿主系统配置，移动端通过 mobileLayouts 注册，首页配置页通过 configPages 注册。完整步骤见 基础接入。

本地开发与构建

npm install
npm run dev
npm run build

本地开发端口为 8083，接口代理默认指向 http://localhost:8082。npm run dev 运行本地应用，便于查看布局、组件和演示容器。

npm run build 构建 npm 包，产物输出到 dist，ES / UMD 入口和发布范围由 package.json 定义。npm run gusean 使用相同构建配置。组件测试入口为 npm run test。

布局与首页

PC 布局从宿主注册集合中选择，当前配置不在集合中时使用首个布局；集合为空时显示缺失提示。移动端是否启用由宿主 MOBILE_ENABLED 控制，启用后需注册实际使用的移动布局。

布局注册和移动端开关控制可用功能，不代表未使用代码一定从产物中移除。已有项目升级时需核对布局和配置页注册。

首页支持后台配置容器与代码注册固定容器两种方式，按需要选择。业务组件通过宿主加载器提供，platform 区分适用端：0 共用、1 移动端、2 PC。

相关资料

• 能力包结构与扩展约定
• 基础接入
• PC 布局与移动端接入
• 首页搭建与业务容器
• 基础组件说明
• 系统文档接入
• 数据库文档接入
• CUS 独立页面使用说明
• 常见问题由 gs-meta-code 统一维护，在知识库的“常见问题”入口查看。
• 后端资料导出入口：后端接入、数据库说明与 SQL。

首页、容器、移动端配置及运行统计 SQL 统一由后端 gs-eant-comp/database 维护。前端构建直接读取后端源文件，通过 eantBackendDocumentation 导出说明和 SQL 内容，不另存资料副本。

前端 docs 随 npm 包发布，后端资料编入 JS 产物；gs-meta-code 知识库读取已安装包，提供说明与文件下载。后端资料更新后需重新构建、打包并安装前端包，消费工程不依赖后端源码目录。