# continew-admin-ui **Repository Path**: continew/continew-admin-ui ## Basic Information - **Project Name**: continew-admin-ui - **Description**: 全新 3.x 版本，基于 Gi Demo 前端模板开发的 ContiNew Admin 前端适配项目。 - **Primary Language**: TypeScript - **License**: Apache-2.0 - **Default Branch**: dev - **Homepage**: https://continew.top - **GVP Project**: No ## Statistics - **Stars**: 285 - **Forks**: 299 - **Created**: 2023-11-22 - **Last Updated**: 2025-08-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: ArcoDesign, TypeScript, Vue ## README # ContiNew Admin UI Release Vue Arco Design Vue TypeScript Vite
License GitHub Stars GitHub Forks Gitee Stars Gitee Forks GitCode Stars 📚 [在线文档](https://continew.top) | 🚀 [演示地址](https://continew.top/admin/guide/demo.html) ## 简介 全新 3.0 版本，基于 Gi Demo 前端模板开发的 ContiNew Admin 前端适配项目。 **AI 编程纪元已经开启，基于 ContiNew 项目开发，让 AI 助手“学习”更优雅的代码规范，“写出”更优质的代码。** ContiNew Admin（Continue New Admin），页面现代美观，且专注设计与代码细节的 **高质量多租户中后台** 管理系统框架。开箱即用，持续迭代优化，持续提供舒适的开发体验。 当前采用的技术栈：Spring Boot3（Java17）、Vue3 & Arco Design & TS & Vite、Sa-Token、MyBatis Plus、Redisson、FastExcel、CosId、JetCache、JustAuth、Crane4j、Spring Doc、Hutool 等。 我们始终坚信好的产品必然是反复打磨出来的，而在工作中我们受限于客户需求、开发周期等因素，无法深度打磨、重构我们的代码，这也是架构腐烂的根源。所以，我们希望能在业余时间，通过开源社区的力量来打磨出一个好的产品，一个好的实践，一个好的生态。 我们的愿景在于，当你将 ContiNew 系列项目应用到工作场景时，不仅仅是得到效率的提高，更可以得到舒适的开发体验，让更多开发者的编程工作多一点“甜”。 ## 项目源码 | | 前端 | 后端 | | :------ | :----------------------------------------------------------- | :----------------------------------------------------------- | | Gitee | [continew/continew-admin-ui](https://gitee.com/continew/continew-admin-ui) | [continew/continew-admin](https://gitee.com/continew/continew-admin) | | GitCode | [continew/continew-admin-ui](https://gitcode.com/continew/continew-admin-ui) | [continew/continew-admin](https://gitcode.com/continew/continew-admin) | | GitHub | [continew-org/continew-admin-ui](https://github.com/continew-org/continew-admin-ui) | [continew-org/continew-admin](https://github.com/continew-org/continew-admin) | ## 项目起源 我热衷于做数据归档，归档后的数据可以提高学习/工作效率，为记忆“减负”，在持续的数据归档中，优质的“沉淀”会带来非匀速、跨越式的学习/工作体验。**数据归档是一件需要持续去做的事情**。 从接触程序代码的第一天，我的程序数据归档也随之开始了，刷过的算法题、笔记、对接各种组件的配置文件，甚至于一些亮眼的样式设计、“如诗”的代码片段。这些数据的沉淀丰富了我的解决方案，提高了我的编程效率，逐渐为各种场景落实成了一个个雏形程序。再后来，我意识到，我归档的这些雏形程序，有一个更为妥贴的名称：**程序框架/脚手架**。 技术的发展，导致这些雏形程序的生命周期很是短暂，它们有别于我归档的其他数据，有时由于工作的原因，没有时间很好的去沉淀它们，在使用时变得越来越不顺手。所以，某段时间，我放弃了维护，而是去采用一些更为成熟的框架。 不过，在陆续几年使用了一些成熟框架后，我前后遇到了一些困难： 1. 代码洁癖想要找到一个**扩展性佳，代码规范良好，开发体验舒适**的框架很不容易，总是差些什么 2. 项目上手困难或是基础版功能不全，需要的全在专业版，亦或者代码阅读性差，文档收费 3. 部分解决方案缺失，已有解决方案也过于偏向样板化，无法形成良好的逻辑闭环 4. 好不容易找到一些相较合适的，没过多久，部分作者可能暂时没法对外发“电”了，随着了解深入，很多 Bug 或新技术趋势还是需要自己研究解决 在工作中，很多想法/设计受限于客户需求、开发工期，必须优先以交付为导向，但一些优秀的实践需要花时间持续进行沉淀，只要我没跳出这个圈子，我还是需要一直去做好程序归档。“种一棵树最好的时间是十年前，其次是现在”，最终，我选择在业余时间更加正视这件事，从头归档沉淀，从添加每一个依赖开始，我希望它能持续的迭代优化、演进，所以我把它命名为 **ContiNew（Continue New）**。并且这次我选择了开源，我希望它不仅仅能吸收我的需求和沉淀，而是依托开源协作模式，及时发现更多的问题，接受更多的可能性，沉淀更优秀的思考，设计。 ## 为什么选我们？ > [!TIP] > 更为完整的图文描述请查阅[《在线文档》](https://continew.top/admin/guide/why-choose-us.html)。 **AI 编程纪元已经开启，基于 ContiNew 项目开发，让 AI 助手“学习”更优雅的代码规范，“写出”更优质的代码。** **1.长期稳定：** 自 2022 年 12 月 8 日创建，2023 年 3 月 26 日发布 v1.0.0，截至今日，ContiNew Admin 已累计发布 25 个版本，ContiNew Starter 已累计发布 43 个版本。 **2.甄选技术栈：** ContiNew（Continue New） 项目致力于持续迭代优化，确保技术栈紧跟时代。在技术选型时，我们进行了深度广泛的调研，从流行度、成熟度和发展潜力等多维度精心挑选技术栈。 **3.Starter 组件：** 从 v2.1.0 版本开始，我们将后端基础组件及各框架集成配置抽取并封装到 ContiNew Starter 项目中，极大降低上手和升级难度。且 **[已发布至 Maven 中央仓库](https://central.sonatype.com/search?q=continew-starter&namespace=top.continew)**，你可以在任意项目中直接引入所需依赖使用。即使你不使用完整的中后台框架，这些能让你搭项目框架更快、更爽、更省力的 Starter 组件，难道不香吗？ **4.CRUD 套件：** 封装通用增删改查套件，适配后端各分层架构，几分钟即可提供一套完整的 CRUD API，包括新增、修改、批量删除、查询详情、分页列表、全部列表、树型列表、Excel 导出，甚至是字典列表（用于下拉选项场景）。所有 API 均可根据实际需求灵活开放或扩展。 ```java @Tag(name = "部门管理 API") @RestController @CrudRequestMapping(value = "/system/dept", api = {Api.TREE, Api.GET, Api.CREATE, Api.UPDATE, Api.DELETE, Api.EXPORT, Api.DICT_TREE}) public class DeptController extends BaseController {} ``` **5.代码生成器：** 同步提供了代码生成器，配套前后端代码生成模板。数据表设计完成后，简单配置即可生成前后端 80% 的代码，包括 CRUD API、权限控制、参数校验、接口文档等内容。若业务不复杂，甚至能覆盖 95% 的代码量。 **6.提升开发体验：** 持续优化并适配各类能提升开发体验的组件。 - ContiNew Starter 组件集合：针对 Spring 基础配置、通用解决方案及流行框架进行深度封装，改善你开发每个 Spring Boot Web 项目的体验（包含时间日期及枚举参数自动转换、默认线程池、跨域、加密、脱敏、限流、幂等、License、日志、异常及响应通用解决方案等）； - Crane4j 数据填充组件：减少因单个字段（如用户名）而产生的联表查询； - SpEL Validator：基于 SpEL 表达式的参数校验，强化复杂场景下的参数验证（如：当某字段为特定值时，另一字段不能为空）； - P6Spy SQL 性能分析：开发期间可方便地监控 SQL 执行性能； - TLog 链路追踪：在繁杂的日志中快速定位某次请求的完整日志； - JetCache 缓存框架：通过注解即可实现方法级缓存，支持灵活的二级缓存配置和分布式自动刷新； **7.Almost 最佳后端规范：** 后端严格遵循阿里巴巴 Java 编码规范，注释覆盖率 > 45%，接口参数示例 100%。代码分层清晰，变量与方法命名统一规范，前端代码同样采用严格的 ESLint、StyleLint 等检查。优秀的设计带来极高的代码复用率！开发时，你会有一种“无需多写，理应如此”的流畅感。 **8.卓越工程化实践：** 后端采用模块化工程结构，集成了统一版本管理、编译时自动代码格式化等插件。提供自定义打包部署配置（配置文件、第三方依赖与主程序分离），以及全套环境和应用的 Docker Compose 部署脚本。 为减少新项目开发的改造成本，我们持续深度聚合项目品牌配置，通过简单的配置和结构修改，即可快速启动你的专属项目。 我们还进行了全局 Lombok 配置，继承场景默认自动应用 `@EqualsAndHashCode(callSuper = true)` 和 `@ToString(callSuper = true)`，无需手动添加。同时主动禁用了部分 Lombok 注解（如 `@Val`、`@Log4j` 等），避免“又菜又爱玩”的 partner 滥用。 **9.全能业务脚手架：** 支持 **SaaS 租户架构**，基于 RBAC 的权限控制与通用数据权限管理。精心设计的 UI 界面与色彩主题，兼具美观与实用性。内置丰富的通用业务解决方案：第三方登录、邮箱/短信服务（含生产级漏洞处理方案）、个人中心、用户管理、角色管理、组织管理、系统配置、系统日志、消息中心、通知公告等，逻辑闭环，开箱即用。 > 优秀的中后台框架不仅提供组件集成与配置，封装好用的工具，更应提供通用基础业务设计及解决方案，为初创团队减负。 **10.质量与安全并重：** 我们高度重视项目质量与安全，CI 已集成 Sonar、Codacy，代码提交即自动扫描质量问题。定期扫描 CVE 漏洞，及时解决潜在风险。封装了数据库字段加密、JSON 脱敏、XSS 过滤等工具，提供全方位的安全解决方案。 许多项目在开发或交付过程中需满足 Sonarqube 等质量指标，使用 ContiNew Admin 框架，让你从一开始就站在高质量的起点。 --- 由于篇幅有限，且项目正处于高速发展期，更多功能正在持续开发中，敬请关注仓库或加入交流群了解最新动态。至于统一异常处理、错误处理、基础线程池配置（默认线程参数、线程上下文支持异步传递）等基础特性，这里不再赘述，更多细节优化欢迎克隆代码体验。 > Talk is cheap, show the code. ## 系统功能 > [!TIP] > 更多功能和优化正在赶来💦，最新项目计划、进展请进群或关注 [需求墙](https://continew.top/admin/feature.html) 和 [更新日志](https://continew.top/admin/changelog/)。 > 功能不会用？请查看 [功能手册](https://continew.top/admin/function/tenant/management.html)。 - 仪表盘：提供工作台、分析页，工作台提供功能快捷导航入口、最新公告、动态；分析页提供全面数据可视化能力 - 个人中心：支持基础信息修改、密码修改、邮箱绑定、手机号绑定（并提供行为验证码、短信限流等安全处理）、第三方账号绑定/解绑、头像裁剪上传 - 消息中心：提供站内信消息统一查看、标记已读、全部已读、删除等功能（目前仅支持系统通知消息）、提供个人公告查看 - 用户管理：管理系统用户，包含新增、修改、删除、导入、导出、重置密码、分配角色等功能 - 角色管理：管理系统用户的功能权限及数据权限，包含新增、修改、删除、分配角色等功能 - 菜单管理：管理系统菜单及按钮权限，支持多级菜单，动态路由，包含新增、修改、删除等功能 - 部门管理：管理系统组织架构，包含新增、修改、删除、导出等功能，以树形列表进行展示 - 通知公告：管理系统公告，支持通知范围（所有人、指定用户）、通知方式（系统消息、登录弹窗）、定时发送、置顶设置 - 文件管理：管理系统文件及文件夹，支持上传、下载、预览（目前支持图片、音视频、PDF、Word、Excel、PPT）、重命名、切换视图（列表、网格）等功能 - 字典管理：管理系统公用数据字典，例如：消息类型。支持字典标签背景色和排序等配置 - 系统配置： - 网站配置：提供修改系统标题、Logo、favicon、版权信息等基础配置功能，以方便用户系统与其自身品牌形象保持一致 - 安全配置：提供密码策略修改，支持丰富的密码策略设定，包括但不限于 `密码有效期`、`密码重复次数`、`密码错误锁定账号次数、时间` 等 - 登录配置：提供验证码开关等登录相关配置 - 邮件配置：提供系统发件箱配置，也支持通过配置文件指定 - 短信配置：提供系统短信服务配置，也支持通过配置文件指定 - 存储配置：管理文件存储配置，支持本地存储、兼容 S3 协议对象存储 - 客户端配置：多端（PC端、小程序端等）认证管理，可设置不同的 token 有效期 - 在线用户：管理当前登录用户，可一键踢除下线 - 日志管理：管理系统登录日志、操作日志，支持查看日志详情，包含请求头、响应头等报文信息 - 短信日志：管理系统短信发送日志，支持删除、导出 - 应用管理：管理第三方系统应用 AK、SK，包含新增、修改、删除、查看密钥、重置密钥等功能，支持设置密钥有效期 - 租户管理：管理租户信息，包含新增、修改、删除、分配角色等功能 - 租户套餐：管理租户套餐信息，包含新增、修改、删除、查看等功能 - 任务管理：管理系统定时任务，包含新增、修改、删除、执行功能，支持 Cron（可配置式生成 Cron 表达式） 和固定频率 - 任务日志：管理定时任务执行日志，包含停止、重试指定批次等功能 - 代码生成：提供根据数据库表自动生成相应的前后端 CRUD 代码的功能，支持同步最新表结构及代码生成预览 ## 系统截图 > [!TIP] > 受篇幅长度及功能更新频率影响，下方仅为系统 **部分** 功能于 **2024年11月18日** 进行的截图，更多新增功能及细节请登录演示环境或 clone 代码到本地启动查看。
登录页面 登录页面-H5
仪表盘 分析页
个人中心 消息中心
安全设置-修改邮箱 安全设置-修改邮箱-邮箱验证码
系统管理-系统配置 系统管理-安全配置
系统管理-用户管理-列表 系统管理-用户管理-新增
系统管理-角色管理-列表 系统管理-角色管理-新增
系统管理-菜单管理-列表 系统管理-菜单管理-新增
系统管理-公告管理-列表 系统管理-公告管理-修改
系统管理-字典管理-列表 系统管理-字典项管理
系统管理-文件管理-列表-2 系统管理-文件管理-查看文档
系统工具-代码生成-配置 系统工具-代码生成-预览
系统监控-在线用户 系统监控-系统日志-登录日志
系统监控-系统日志-操作日志 系统监控-系统日志-操作日志-详情
## 快速开始 > **Note** > 更详细的流程，请查看在线文档[《快速开始》](https://continew.top/admin/guide/quick-start.html)。 ``` # 1.克隆本项目 git clone https://github.com/charles7c/continew-admin-ui.git git clone https://gitee.com/continew/continew-admin-ui.git # 2.在 IDE（Visual Studio Code/WebStorm）中打开前端项目 continew-admin-ui # 3.安装 pnpm npm install -g pnpm # 4.安装依赖 pnpm i # 5.启动程序 # 5.1 启动成功：访问 http://localhost:5173/ pnpm dev ``` ## 项目结构 ``` continew-admin-ui ├─ config # Vite 插件配置 ├─ public # 公共静态资源（favicon.ico、logo.svg） ├─ src │ ├─ apis # 请求接口 │ │ ├─ auth # 认证模块 │ │ ├─ code # 代码生成模块 │ │ ├─ common # 公共模块 │ │ ├─ monitor # 系统监控模块 │ │ ├─ open # 能力开放模块 │ │ ├─ tenant # 租户模块 │ │ ├─ schedule # 任务调度模块 │ │ └─ system # 系统管理模块 │ ├─ assets # 静态资源 │ │ ├─ icons # 图标资源 │ │ ├─ images # 图片资源 │ │ └─ fonts # 字体资源 │ ├─ components # 通用业务组件 │ ├─ config # 全局配置（包含 echarts 主题） │ │ └─ settings.json # 配置文件 │ ├─ directives # 指令集（如需，可自行补充） │ ├─ hooks # 全局 hooks │ ├─ layout # 布局 │ ├─ mock # 模拟数据 │ ├─ router # 路由配置 │ ├─ stores # 状态管理中心 │ ├─ types # TypeScript 类型 │ ├─ utils # 工具库（mock 全局开启/关闭） │ ├─ views # 页面 │ │ ├─ code # 代码生成 │ │ │ └─ generator # 代码生成 │ │ ├─ dashboard # 仪表盘 │ │ │ ├─ analysis # 分析页 │ │ │ └─ workplace # 工作台 │ │ ├─ default # 默认页面 │ │ ├─ login # 登录模块 │ │ ├─ setting # 设置 │ │ │ ├─ profile # 个人中心 │ │ │ └─ message # 消息中心 │ │ ├─ monitor # 系统监控 │ │ │ ├─ log # 系统日志 │ │ │ │ ├─ login # 登录日志 │ │ │ │ └─ operation # 操作日志 │ │ │ └─ online # 在线用户 │ │ ├─ open # 能力开放 │ │ │ └─ user # 应用管理 │ │ ├─ tenant # 租户管理 │ │ │ ├─ management # 租户管理 │ │ │ └─ package # 套餐管理 │ │ ├─ schedule # 任务调度 │ │ │ ├─ job # 任务管理 │ │ │ └─ log # 任务日志 │ │ └─ system # 系统管理 │ │ ├─ config # 系统配置 │ │ ├─ dept # 部门管理 │ │ ├─ dict # 字典管理 │ │ ├─ file # 文件管理 │ │ ├─ menu # 菜单管理 │ │ ├─ notice # 通知公告 │ │ ├─ role # 角色管理 │ │ ├─ storage # 存储管理 │ │ └─ user # 用户管理 │ ├─ App.vue │ └─ main.ts ├─ .env.development # 开发环境配置 ├─ .env.production # 生产环境配置 ├─ .env.test # 测试环境配置 ├─ eslint.config.js # ESLint 配置 ├─ index.html ├─ package.json ├─ package-lock.json ├─ pnpm-lock.yaml ├─ tsconfig.json ├─ vite.config.ts ├─ .gitignore（Git 忽略文件相关配置文件） ├─ .github（GitHub 相关配置目录，实际开发时直接删除） ├─ .idea │ └─ icon.png（IDEA 项目图标，实际开发时直接删除） ├─ .image（截图目录，实际开发时直接删除） ├─ .vscode（VSCode 配置目录） ├─ LICENSE（开源协议文件） ├─ CHANGELOG.md（更新日志文件，实际开发时直接删除） └─ README.md（项目 README 文件，实际开发时替换为真实内容） ``` ## 参与贡献 ContiNew（Continue New）系列项目致力于通过持续迭代，为开发者提供舒适的开发体验。作为开源社区，我们的初衷是希望通过开源协作模式，提升技术透明度、放大集体智慧、共创优秀实践，源源不断地为企业级项目开发提供助力。 我们诚挚邀请广大社区用户为 ContiNew 项目贡献力量，包括但不限于 Issue 排查、测试验证、代码开发与重构等。每一份贡献，都是推动项目进步的重要力量（请查阅 [贡献指南](https://continew.top/about/contributing.html)）。欢迎各位感兴趣的小伙伴儿，[添加微信](https://continew.top/discussion.html) 讨论或认领任务。 ### 分支说明 ContiNew 系列项目采用清晰的分支策略，确保开发与维护有序进行。提交 PR 前，请确认目标分支是否处于活跃维护状态，版本支持情况请查看 [更新日志#版本支持](https://continew.top/admin/changelog/)。 | 分支 | 说明 | | ----- | ------------------------------------------------------------ | | dev | 开发分支，用于下个大版本的 SNAPSHOT 开发，接受新功能或功能优化 PR | | x.x.x | 维护分支，用于特定版本（如 vx.x.x）的 bug 修复，仅接受已有功能的修复 PR，不接受新功能 | ### 流程步骤 若您希望提交新功能或优化现有代码，请遵循以下步骤： 1. 在开源平台上将项目 fork 到您的个人仓库 2. 将 fork 的项目克隆到本地开发环境 3. 基于当前维护的分支（如 dev）创建新分支（如 feat/newFeature），请勿直接修改源分支（源分支仅做同步 ContiNew 最新代码用） 4. 在新分支上进行代码修改，完成后提交并 push 到您的远程仓库 5. 在开源平台上创建 pull request (PR)，选择正确的源分支和目标分支，按模板填写说明信息（参考 [已合并的 PR](https://github.com/continew-org/continew-admin/pulls?q=is%3Apr+is%3Amerged) 可提高合并率） 6. 提交 PR 后，系统会提示签署 CLA（贡献者协议）。请确保 commit 使用的邮箱与平台绑定邮箱一致（如果不一致，可以在本地通过 `git reset --soft HEAD~1` 回退，然后使用正确邮箱重新提交，最后 `git push -f` 即可，不需要重新创建 PR），然后使用该邮箱签署即可 7. 耐心等待维护者审核并合并您的 PR（建议通过交流群进行快捷沟通） 8. PR 合并后，下次贡献前请先同步最新代码，再重复步骤 3 开始 > [!IMPORTANT] > 为了确保项目质量和协作效率，请注意以下事项： > > 1. 代码和配置文件请参考已有风格，遵循清晰的结构与命名规范，提供完善的注释 > 2. 提交时，请按照 [Angular 提交规范](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) 编写 commit message（参考已有风格） ## 反馈交流 欢迎各位小伙伴儿扫描下方二维码加入项目交流群，与项目维护团队及其他大佬用户实时交流讨论。
二维码
## 鸣谢 ### 鸣谢 感谢参与贡献的每一位小伙伴🥰 ### 特别鸣谢 - 感谢 JetBrains 提供的 非商业开源软件开发授权 - 感谢 [Gi Demo ](https://gitee.com/lin0716/gi-demo) 开箱即用的 Vue 中后台管理系统前端模板 - 感谢项目使用或未使用到的每一款开源组件，致敬各位开源先驱 :fire: ## License - 遵循 Apache-2.0 开源许可协议 - Copyright © 2022-present Charles7c