介绍

这是一套轻量、定制的现代化前端开发架构，自 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 的状态管理模式，适用于大型应用 |