gs-eant-comp

谷信软件科技有限公司

轻量、定制的现代化企业级前端框架

介绍

这是一套轻量、定制的现代化前端开发架构，自 2023 年起从头开始构建，并在实践中不断迭代优化。最初的技术探索过程中，曾涉及低代码平台的研究，随着开发的深入，该架构逐步演化为公司前端项目的标准开发模式。

该架构基于 Vue 3、Ant Design Vue 4和Bootstrap 5，结合模块化设计思想，提供了一种 高效、灵活、可扩展 的前端开发方案。

核心特点

•	渐进式架构：采用 Vue 3 组合式 API，降低组件复杂度，提升代码复用性。
•	统一规范（UI）：结合 Antdv 4 提供一致的设计语言，确保界面美观、交互流畅。
•	性能优化（CSS）：基于 Bootstrap 5 现代化样式体系，提高样式复用性，减少兼容性适配成本，提升开发效率。
•	跨平台兼容：内置响应式布局，自适应平板和移动端，提供一致的用户体验。**基础布局支持，实际页面需要适配调整**
•	模块化设计：鼓励封装和复用，每个功能块作为独立模块，便于维护和扩展。
•	面向企业应用：专为公司内部系统和新项目定制，支持灵活配置，满足不同业务需求。

特性

• 快速组件
• 📖 提供 EList 组件和示例
• 📖 提供 ETree 组件和示例
• 📖 提供 ETable 组件和示例
• 📖 提供 ESelect 组件和示例
• Antdv4
• 🍭 支持 定制主题（全局）
• 🍭 支持 局部主题 (弃用 tailwindcss, 使用局部主题实现按钮换色)
• 🍭 支持 动态主题（低代码）
• 🍭 支持 深色模式

📌 快速组件

组件	功能
EList	卡片展示，支持 增/删/改/查
ETree	组织机构，支持 增/删/改/查
ETable	表格展示，支持 增/删/改/查
ESelect	组织机构选择，支持 联动/搜索/增/删/改/等
EModal	弹窗
EDrawer	侧窗

📌 结构说明

• EList、ETree、ETable
• 统一使用 CResponsiveHeader 组件，提供：
  • left 插槽：用于头部左侧筛选 & 操作。
  • right 插槽：用于头部右侧筛选 & 操作。
  • header 插槽：头部自定义内容。
  • tag 插槽：用于过滤器。
  • content 插槽：用于展示补充内容。
• ESelect 组件扩展：支持 dropdownRender，可自定义下拉框内容。

📌 其他优化

优化项	说明
数据库支持	PostgreSQL、Oracle 适配尚未完成，老版本支持双数据库
长耗时导入	进度反馈 + 动态分页查询 (dao.getListWithPagination)
图片支持	SM4 加密（仅供参考）
图片压缩	有点击压缩功能（仅供参考）
WebSocket	支持实时数据交互

浏览器兼容性

支持所有符合 ES5 的浏览器（不支持 IE8 及以下版本）。

社区生态

由社区维护的项目如下：

Project	Status	描述
ant-design-vue		基于 Ant Design 设计体系的 Vue 组件库
axios		基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js
core-js		ECMAScript 规范的 polyfill，提供兼容性支持
nprogress		轻量级的页面加载进度条组件
qs		强大的查询字符串解析和序列化工具
vue		渐进式 JavaScript 框架，用于构建用户界面
vue-request		基于 Vue 3 的请求管理库，简化数据请求和状态管理
vue-router		Vue.js 的官方路由库，支持单页面应用的路由管理
vuedraggable		Vue 的拖拽排序组件，基于 Sortable.js
vuex		Vue.js 的状态管理模式，适用于大型应用