# easyVue管理端项目架构 **Repository Path**: ljiapeng/vue-2-admin-project-structure ## Basic Information - **Project Name**: easyVue管理端项目架构 - **Description**: 轻量级vue2项目架构，支持顶部菜单动态切换、侧边栏动态切换、换肤、样式文件公共配置等 - **Primary Language**: JavaScript - **License**: AGPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-06-18 - **Last Updated**: 2025-12-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # EasyVue Admin - Vue2管理端项目架构 > 📚 **开发文档**: 详细的开发文档请查看 [DEVELOPMENT.md](./DEVELOPMENT.md)，包含完整的架构说明、API文档、开发指南等。 ## 📖 项目介绍 EasyVue Admin 是一个基于 Vue2 + Element UI 的企业级管理端项目架构，提供了完整的后台管理系统解决方案。项目采用模块化设计，支持动态菜单、权限控制、主题切换、AI功能集成等，适合快速搭建企业级管理后台。 ## ✨ 功能特性 ### 核心功能 - 🎨 **现代化UI设计** - 基于 Element UI 的美观界面，采用CRM风格设计 - 🔐 **完善的权限系统** - 基于路由和权限点的精细化权限控制 - 🌓 **主题切换** - 支持明暗主题切换和自定义主题 - 🌍 **国际化支持** - 内置中英文语言切换，支持扩展多语言 - 📱 **响应式布局** - 完美适配桌面端、平板端和移动端 - 🔄 **动态路由** - 支持菜单动态加载和路由自动生成 - 📊 **数据可视化** - 集成 ECharts 图表组件 - 🔌 **插件化架构** - 支持 WebSocket、HTTP 请求等插件 ### 业务功能 - 📐 **CAD 文件解析** - 支持 DXF/DWG 格式 CAD 文件的导入和解析 - 📝 **富文本编辑器** - 基于 Quill 的完整富文本编辑功能 - 📋 **自定义表单** - 支持动态列管理、字典关联、配置导入导出 - 🔄 **审批流管理** - 支持工作流定义、审批任务管理、流程可视化 - 🔀 **动态审批流** - 支持分支跳转、会签/或签、回退、加签、超时处理 - 📤 **大文件上传** - 支持分片上传、断点续传、进度显示（最大2GB） - 🔍 **智能诊断分析** - 基于智谱大模型的设备报警智能分析 ### AI功能 - 💬 **AI解答** - 聊天式交互，调用智谱GLM大模型进行问答 - 📚 **知识库管理** - 智谱知识库管理，支持文档上传、向量检索、混合检索 - 📈 **热点分析** - 自动获取热点事件，分析对上市公司的影响，集成股票数据 - 🎤 **声纹模拟** - 基于智谱API的音色复刻和语音合成 ### 系统管理 - 👥 **用户管理** - 完整的用户增删改查、角色分配 - 🎭 **角色管理** - 角色权限配置和管理 - 📑 **菜单管理** - 支持多语言菜单配置、树形结构管理 - 📖 **字典管理** - 字典和字典项管理，支持与其他模块关联 ### 其他功能 - 🏠 **CRM风格首页** - 数据统计、通知公告、待办事项、系统监控 - 📊 **复杂表格** - 多条件搜索、排序筛选、行内编辑、批量操作 - 👤 **个人中心** - 个人信息管理、头像上传 - ⚙️ **用户偏好设置** - CRM仪表板，客户旅程管理 ## 🛠 技术栈 | 技术 | 版本 | 说明 | |------|------|------| | Vue | 2.6.14 | 前端框架 | | Element UI | 2.15.14 | UI组件库 | | Vue Router | 3.6.5 | 路由管理 | | Vuex | 3.6.2 | 状态管理 | | Axios | 1.8.4 | HTTP客户端 | | ECharts | 5.6.0 | 图表库 | | Vue I18n | 8.26.7 | 国际化 | | Sass | 1.89.2 | 样式预处理 | | Quill | 1.3.7 | 富文本编辑器 | | dxf-parser | - | CAD文件解析 | | Vue CLI | 5.0.0 | 构建工具 | ## 📋 环境要求 - **Node.js**: >= 18.18.0 - **包管理器**: Yarn 1.22.19 或 npm - **浏览器**: Chrome >= 80, Firefox >= 75, Safari >= 13 ## 🚀 快速开始 ### 1. 克隆项目 ```bash git clone https://gitee.com/ljiapeng/vue-2-admin-project-structure.git cd vue-2-admin-project-structure ``` ### 2. 安装依赖 ```bash # 使用 yarn (推荐) yarn install # 或使用 npm npm install ``` ### 3. 启动开发服务器 ```bash # 开发环境 yarn serve # 或 npm run serve ``` ### 4. 构建生产版本 ```bash # 生产环境构建 yarn build # 或 npm run build ``` ### 5. 代码检查 ```bash # 代码格式检查 yarn lint # 或 npm run lint ``` ## 📁 项目结构 ``` easyVue/ ├── public/ # 静态资源 ├── src/ │ ├── api/ # API接口 │ │ ├── api.js # API配置 │ │ ├── user.js # 用户相关API │ │ ├── role.js # 角色相关API │ │ ├── menu.js # 菜单相关API │ │ ├── dict.js # 字典相关API │ │ ├── workflow.js # 审批流API │ │ ├── dynamicWorkflow.js # 动态审批流API │ │ ├── largeFileUpload.js # 大文件上传API │ │ ├── intelligentDiagnosis.js # 智能诊断API │ │ ├── knowledgeBase.js # 知识库API │ │ ├── hotspotAnalysis.js # 热点分析API │ │ ├── voiceClone.js # 声纹模拟API │ │ └── stock.js # 股票数据API │ ├── assets/ # 资源文件 │ │ ├── images/ # 图片资源 │ │ └── logo.png # 项目logo │ ├── components/ # 公共组件 │ │ ├── drawer/ # 抽屉组件 │ │ ├── echarts/ # 图表组件 │ │ ├── element/ # Element UI 组件封装 │ │ ├── header/ # 头部组件 │ │ ├── layout/ # 布局组件 │ │ ├── searchForm/ # 搜索表单组件 │ │ └── knowledgeBase/ # 知识库组件 │ ├── lang/ # 国际化文件 │ │ ├── en/ # 英文 │ │ └── zh/ # 中文 │ ├── router/ # 路由配置 │ │ └── index.js # 路由主文件 │ ├── store/ # Vuex状态管理 │ │ ├── modules/ # 状态模块 │ │ │ ├── layout.js # 布局状态 │ │ │ ├── menu.js # 菜单状态 │ │ │ └── user.js # 用户状态 │ │ └── index.js # 状态主文件 │ ├── styles/ # 样式文件 │ │ ├── fonts/ # 字体文件 │ │ ├── themes/ # 主题样式 │ │ ├── element-variables.scss # Element UI 变量 │ │ └── global.scss # 全局样式 │ ├── utils/ # 工具函数 │ │ ├── httpPlugin.js # HTTP请求插件 │ │ ├── loadView.js # 组件懒加载 │ │ ├── scroll-to.js # 滚动工具 │ │ ├── websocketPlugin.js # WebSocket插件 │ │ ├── zhipuApi.js # 智谱API工具 │ │ └── cadParser.js # CAD解析工具 │ ├── views/ # 页面组件 │ │ ├── home/ # 首页相关 │ │ │ ├── home.vue # 首页 │ │ │ └── complex/ # 复杂表格 │ │ ├── login.vue # 登录页 │ │ ├── setting/ # 设置页面 │ │ ├── system/ # 系统管理页面 │ │ │ ├── user.vue # 用户管理 │ │ │ ├── role.vue # 角色管理 │ │ │ ├── menu.vue # 菜单管理 │ │ │ └── dict.vue # 字典管理 │ │ ├── features/ # 功能页面 │ │ │ ├── cad.vue # CAD文件解析 │ │ │ ├── richText.vue # 富文本编辑器 │ │ │ ├── preference.vue # 用户偏好设置 │ │ │ ├── customForm.vue # 自定义表单 │ │ │ ├── workflow.vue # 审批流 │ │ │ ├── dynamicWorkflow.vue # 动态审批流 │ │ │ ├── largeFileUpload.vue # 大文件上传 │ │ │ └── intelligentDiagnosis.vue # 智能诊断分析 │ │ ├── ai/ # AI功能页面 │ │ │ ├── aiChat.vue # AI解答 │ │ │ ├── knowledgeBase.vue # 知识库管理 │ │ │ ├── hotspotAnalysis.vue # 热点分析 │ │ │ └── voiceClone.vue # 声纹模拟 │ │ └── user/ # 用户相关 │ │ └── info.vue # 个人中心 │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── .gitignore # Git忽略文件 ├── babel.config.js # Babel配置 ├── jsconfig.json # JavaScript配置 ├── package.json # 项目依赖 ├── postcss.config.js # PostCSS配置 ├── README.md # 项目说明 ├── DEVELOPMENT.md # 开发文档 └── vue.config.js # Vue CLI配置 ``` ## 🔧 配置说明 ### 环境变量配置 创建 `.env` 文件配置环境变量： ```bash # API配置 VUE_APP_BASE_API=http://localhost:3000/api VUE_APP_SERVER_API_URL=http://localhost:3000/api # 项目配置 VUE_APP_TITLE=EasyVue Admin VUE_APP_VERSION=1.0.0 # 智谱API配置（可选，AI功能使用） VUE_APP_ZHIPU_API_KEY=your_api_key_here ``` ### API接口配置 在 `src/api/api.js` 中配置API接口地址： ```javascript const API = { USER: { LOGIN: `${BASE_URL}/user/login`, GET_USER_INFO: `${BASE_URL}/user/getUserInfo`, }, // 其他API配置... }; ``` ## 📖 功能模块说明 ### 系统管理模块 - **用户管理** - 用户增删改查、角色分配、状态管理 - **角色管理** - 角色权限配置、权限点管理 - **菜单管理** - 多语言菜单配置、树形结构管理 - **字典管理** - 字典和字典项管理，支持与其他模块关联 详细说明请查看 [DEVELOPMENT.md](./DEVELOPMENT.md) 第4节。 ### 业务功能模块 - **CAD文件解析** - 支持DXF/DWG格式文件导入和解析 - **富文本编辑器** - 基于Quill的完整文本编辑功能 - **自定义表单** - 动态列管理、字典关联、配置导入导出 - **审批流管理** - 工作流定义、审批任务、流程可视化 - **动态审批流** - 分支跳转、会签/或签、回退、加签、超时处理 - **大文件上传** - 分片上传、断点续传、进度显示（最大2GB） - **智能诊断分析** - 基于智谱大模型的设备报警智能分析 详细说明请查看 [DEVELOPMENT.md](./DEVELOPMENT.md) 第4节。 ### AI功能模块 - **AI解答** - 聊天式交互，调用智谱GLM大模型进行问答 - **知识库管理** - 智谱知识库管理，支持文档上传、向量检索、混合检索 - **热点分析** - 自动获取热点事件，分析对上市公司的影响，集成股票数据 - **声纹模拟** - 基于智谱API的音色复刻和语音合成 详细说明请查看 [DEVELOPMENT.md](./DEVELOPMENT.md) 第4节。 ## 🔐 权限系统 项目采用基于路由和权限点的精细化权限控制系统： - **登录验证** - 检查用户是否已登录 - **路由守卫** - 自动拦截未授权访问 - **动态菜单** - 根据用户权限显示对应菜单 - **角色控制** - 支持多角色权限管理 - **权限点控制** - 支持按钮级和数据级权限控制 ### 使用权限指令 ```vue ``` 详细说明请查看 [DEVELOPMENT.md](./DEVELOPMENT.md) 第11节。 ## 🌍 国际化 项目支持中英文切换： 1. 在 `src/lang/` 目录下添加语言文件 2. 使用 `$t('key')` 方法获取翻译文本 3. 通过 `this.$i18n.locale` 切换语言 详细说明请查看 [DEVELOPMENT.md](./DEVELOPMENT.md) 第12节。 ## 🎨 主题系统 支持多种主题模式： - **浅色主题** - 默认主题，CRM风格设计 - **深色主题** - 护眼模式 - **自定义主题** - 支持自定义颜色配置 详细说明请查看 [DEVELOPMENT.md](./DEVELOPMENT.md) 第13节。 ## 📦 部署说明 ### 开发环境 ```bash yarn serve ``` ### 生产环境 ```bash # 构建 yarn build # 部署到服务器 # 将 dist 目录下的文件部署到 Web 服务器 ``` ### Docker 部署 ```dockerfile FROM nginx:alpine COPY dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` ## 🔧 开发配置 ### 正式版配置 1. **启用真实API调用** 在 `src/store/modules/user.js` 中修改 login 方法： ```javascript async login({ commit }, credentials) { try { // 调用登录 API 获取 token const { data } = await login(credentials); commit("SET_TOKEN", data.token); return data.token; } catch (error) { const message = error.response?.data?.message || "登录失败，请检查用户名和密码"; throw new Error(message); } }, ``` 2. **启用动态菜单加载** 在 `src/App.vue` 中修改： ```javascript created() { // 加载菜单并初始化 this.loadMenuAndInit(); }, ``` 并打开 `src/store/modules/menu.js` 的 `fetchMenus` 方法注释。 详细说明请查看 [DEVELOPMENT.md](./DEVELOPMENT.md) 第5节。 ## 🤝 参与贡献 1. Fork 本仓库 2. 新建 `Feat_xxx` 分支 3. 提交代码 4. 新建 Pull Request ## 📄 开源协议 本项目基于 [MIT](LICENSE) 协议开源。 ## 📞 联系我们 - **项目地址**: [https://gitee.com/ljiapeng/vue-2-admin-project-structure](https://gitee.com/ljiapeng/vue-2-admin-project-structure) - **问题反馈**: [Issues](https://gitee.com/ljiapeng/vue-2-admin-project-structure/issues) - **邮箱**: lijiapeng0302@163.com ## 🙏 致谢 感谢以下开源项目的支持： - [Vue.js](https://vuejs.org/) - [Element UI](https://element.eleme.io/) - [ECharts](https://echarts.apache.org/) - [Vue Router](https://router.vuejs.org/) - [Vuex](https://vuex.vuejs.org/) - [dxf-parser](https://github.com/bjnortier/dxf-parser) - DXF 文件解析库 - [Quill](https://quilljs.com/) - 富文本编辑器 - [智谱AI](https://open.bigmodel.cn/) - AI大模型服务 --- ⭐ 如果这个项目对您有帮助，请给我们一个 Star！