# path-less-sys **Repository Path**: NBegin/path-less-sys ## Basic Information - **Project Name**: path-less-sys - **Description**: 企业级Vue3管理后台模板，集成了Ant Design Vue、Pinia、Vue Router等技术栈，提供权限管理、用户管理、角色管理，主题配置，国际化等功能。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-01-15 - **Last Updated**: 2026-02-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # path-less-sys 企业级Vue3管理后台模板，集成了Ant Design Vue、Pinia、Vue Router等技术栈，提供完整的权限管理、用户管理、角色管理、应用管理等功能。 ## 项目特点 - **现代化技术栈**：基于Vue 3 + JavaScript + Ant Design Vue构建，使用Pinia进行状态管理 - **完整的权限体系**：支持用户、角色、权限三级权限控制，细粒度权限管理 - **响应式设计**：适配各种屏幕尺寸，提供良好的移动端体验 - **国际化支持**：内置多语言切换功能，支持中英文 - **主题定制**：支持自定义主题颜色、布局模式，提供多种预设主题方案 - **Mock数据**：提供完整的Mock API，便于开发测试 - **代码规范**：集成ESLint、Stylelint等代码检查工具，确保代码质量 - **丰富的可视化**：集成ECharts图表库，提供数据可视化功能 - **应用管理**：完整的应用生命周期管理，支持应用分组、配置管理 ## 技术栈 | 技术 | 版本 | 用途 | |------|------|------| | Vue 3 | ^3.4.21 | 前端框架 | | JavaScript | ES6+ | 开发语言 | | Ant Design Vue | ^4.2.6 | UI组件库 | | Pinia | ^3.0.4 | 状态管理 | | Vue Router | ^4.6.4 | 路由管理 | | Vue I18n | ^9.14.5 | 国际化 | | Axios | ^1.13.2 | HTTP客户端 | | ECharts | ^6.0.0 | 数据可视化 | | Dayjs | ^1.11.19 | 日期处理 | | Mock.js | ^1.1.0 | 模拟数据 | | Vite | ^7.2.4 | 构建工具 | ## [在线演示](https://path-less-sys.pages.dev/) ## 系统示意图 以下是系统主要页面的截图展示（分两列布局）： | 登录页面 | 注册页面 | |---------|---------| | ![登录页面](./screenshots/login.png) | ![注册页面](./screenshots/register.png) | | 系统登录界面，支持用户名密码登录，包含记住密码、忘记密码等功能 | 用户注册界面，支持邮箱、手机号等多种注册方式，包含密码强度检测 | | 个人中心 | 系统设置 | |---------|---------| | ![个人中心](./screenshots/profile.png) | ![系统设置](./screenshots/settings.png) | | 用户个人信息管理，包含基本信息、密码修改、头像上传等功能 | 系统全局设置，包含主题定制、语言切换、布局配置等功能 | | 仪表盘 | 应用管理 | |---------|---------| | ![仪表盘](./screenshots/dashboard.png) | ![应用管理](./screenshots/applications.png) | | 系统数据概览，包含关键指标、数据统计、快捷操作等 | 应用生命周期管理，支持应用创建、配置、部署、监控等 | | 用户管理 | 角色管理 | |---------|---------| | ![用户管理](./screenshots/user-management.png) | ![角色管理](./screenshots/role-management.png) | | 系统用户管理，支持用户创建、编辑、权限分配等 | 角色权限管理，支持角色创建、权限配置、角色继承等 | ## 核心功能模块 ### 系统管理 - **用户管理**：用户列表、添加/编辑用户、权限分配、用户状态管理 - **角色管理**：角色列表、创建/编辑角色、权限分配、角色继承 - **权限管理**：权限列表、权限树配置、权限分类管理 - **部门管理**：部门结构管理、部门层级调整 - **日志管理**：操作日志记录、登录日志记录、日志查询与筛选 ### 应用管理 - **应用列表**：应用概览、搜索筛选、批量操作、状态管理 - **应用仪表盘**：数据统计与展示、应用状态监控、趋势分析 - **应用分组管理**：分组创建与编辑、应用归类、分组权限控制 - **应用详情**：应用基本信息、配置管理、权限管理、集成管理 - **应用配置**：主题配置、菜单配置、安全配置、设备访问控制 ### 工作台 - **仪表盘**：数据统计与展示、系统概览、快捷操作 - **通知中心**：消息通知管理、通知分类、已读/未读状态 ### 个人中心 - **用户资料**：个人信息管理、密码修改、头像上传 - **系统设置**：个性化配置、语言偏好、主题设置 ### 其他功能 - **主题定制**：支持自定义主题颜色、布局模式、头部/侧边栏样式，提供多种预设主题方案 - **多语言**：国际化支持，内置中英文切换 - **面包屑导航**：页面层级导航，提升用户体验 - **标签页管理**：多页面标签管理，支持标签切换、关闭 - **AI集成**：AI客服助手、智能推荐 ## 目录结构 ``` src/ ├── api/ # API接口定义 │ ├── application.js # 应用管理API │ ├── auth.js # 认证API │ ├── user.js # 用户管理API │ └── ... # 其他API ├── components/ # 通用组件 │ ├── ai/ # AI相关组件 │ ├── common/ # 通用组件 │ ├── layout/ # 布局组件 │ └── ... # 其他组件 ├── config/ # 配置文件 ├── directives/ # 指令 ├── layouts/ # 布局组件 ├── locales/ # 国际化配置 │ ├── zh.js # 中文翻译 │ ├── en.js # 英文翻译 │ └── index.js # 国际化配置 ├── mocks/ # Mock数据 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 样式文件 ├── utils/ # 工具函数 ├── views/ # 视图组件 │ ├── applications/ # 应用管理 │ ├── dashboard/ # 仪表盘 │ ├── system/ # 系统管理 │ └── ... # 其他视图 ├── App.vue # 根组件 ├── index.js # 入口文件 └── main.js # 应用初始化 ``` ## 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 8.0.0 ### 安装 ```bash # 克隆项目 git clone https://gitee.com/NBegin/path-less-sys.git # 进入项目目录 cd path-less-sys # 安装依赖 npm install ``` ### 开发环境启动 ```bash npm run dev ``` 项目将在 `http://localhost:5173` 启动。 ### 构建生产版本 ```bash # 开发环境构建 npm run build:dev # 测试环境构建 npm run build:test # 生产环境构建 npm run build:prod # 构建库模式 npm run build:lib ``` ### 预览构建结果 ```bash npm run preview ``` ## 开发指南 ### 路由配置 路由配置位于 `src/router/index.js`，支持嵌套路由、动态路由等功能。 ### API接口 API接口定义位于 `src/api/` 目录，使用Axios进行HTTP请求。 ### Mock数据 Mock数据配置位于 `src/mocks/` 目录，使用Mock.js生成模拟数据。 ### 状态管理 使用Pinia进行状态管理，Store定义位于 `src/stores/` 目录。 ### 国际化 国际化配置位于 `src/locales/` 目录，支持多语言切换。 ### 主题定制 主题配置位于 `src/components/theme/` 目录，支持自定义主题颜色、布局模式等。 ### 代码规范 ```bash # 检查并自动修复JS/Vue代码 npm run lint # 检查并自动修复CSS/Less代码 npm run lint:style # 格式化代码 npm run format # 检查代码格式 npm run format:check ``` ## 系统架构 ### 前端架构 - **核心框架**：Vue 3 + JavaScript - **状态管理**：Pinia - **路由管理**：Vue Router - **UI组件**：Ant Design Vue - **HTTP客户端**：Axios - **构建工具**：Vite ### 数据流 1. **组件层**：用户交互触发事件 2. **Store层**：状态管理，处理业务逻辑 3. **API层**：与后端交互，获取/提交数据 4. **组件层**：响应状态变化，更新UI ### 权限控制 1. **路由权限**：根据用户权限动态生成路由 2. **菜单权限**：根据用户权限显示/隐藏菜单项 3. **按钮权限**：根据用户权限启用/禁用按钮 4. **数据权限**：根据用户权限过滤数据 ## 部署指南 ### 环境配置 #### 开发环境 - 配置文件：`.env.development` - API基础URL：`VITE_API_BASE_URL` #### 测试环境 - 配置文件：`.env.test` #### 生产环境 - 配置文件：`.env.production` ### 部署步骤 1. 构建生产版本：`npm run build:prod` 2. 将 `dist` 目录部署到服务器 3. 配置服务器反向代理，指向构建产物 4. 启动服务器 ## 常见问题 ### 依赖安装失败 - 确保Node.js版本 >= 16.0.0 - 尝试使用 `npm install --registry=https://registry.npmmirror.com` ### 开发环境启动失败 - 检查端口是否被占用 - 检查依赖是否安装完整 - 检查配置文件是否正确 ### 构建失败 - 检查代码是否符合ESLint规范 - 检查依赖版本是否兼容 - 检查构建配置是否正确 ## 浏览器兼容性 - Chrome (最新版本) - Firefox (最新版本) - Safari (最新版本) - Edge (最新版本) ## 后续计划 ### 可视化设计器系列 #### 表单设计器 - 拖拽式表单元素设计 - 表单布局自定义 - 表单模板管理 - 预览与导出功能 #### 流程设计器 - 可视化流程节点配置 - 流程条件设置 - 流程审批路径定义 - 流程状态跟踪 - 流程模板管理 #### 事件设计器 - 事件可视化配置 - 事件触发条件设置 - 事件处理逻辑定义 - 事件状态跟踪 #### 报表设计器 - 可视化报表模板设计 - 报表数据来源配置 - 报表格式设置 - 报表预览与导出功能 ### 其他功能 - **API管理**：API接口文档、测试工具 - **数据字典**：系统数据字典管理 - **定时任务**：任务调度管理 - **消息中心**：站内信、邮件、短信集成 - **文件管理**：文件上传、存储、预览 ## 许可证 商业专有许可证 (Commercial Proprietary License) © 2026 NBreak. 保留所有权利。 如需商业使用，请联系购买源码授权： 邮箱：1643242281@qq.com ## 贡献 欢迎提交Issue和Pull Request，帮助改进项目。 ## 鸣谢 - [Vue.js](https://vuejs.org/) - [Ant Design Vue](https://antdv.com/) - [Pinia](https://pinia.vuejs.org/) - [Vue Router](https://router.vuejs.org/) - [ECharts](https://echarts.apache.org/) - [Vite](https://vitejs.dev/) --- **path-less-sys** - 企业级管理后台解决方案，让管理系统开发更简单、更高效！