修改readme

This commit is contained in:
zsvg
2022-07-02 10:46:20 +08:00
parent 50fd356088
commit 3150bbaa32
4 changed files with 153 additions and 214 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
# port 端口号
VITE_PORT = 8888
VITE_PORT = 868
# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false
+40 -132
View File
@@ -1,139 +1,47 @@
<div align="center">
<img src="https://img-blog.csdnimg.cn/9efd5420327a46b7bd6d93524a97229d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_14,color_FFFFFF,t_70,g_se,x_16">
<p align="center">
<a href="https://v3.vuejs.org/" target="_blank">
<img src="https://img.shields.io/badge/vue.js-vue3.x-green" alt="vue">
</a>
<a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
<img src="https://img.shields.io/badge/element--plus-%3E1.0.0-blue" alt="element plus">
</a>
<a href="https://www.tslang.cn/" target="_blank">
<img src="https://img.shields.io/badge/typescript-%3E4.0.0-blue" alt="typescript">
</a>
<a href="https://vitejs.dev/" target="_blank">
<img src="https://img.shields.io/badge/vite-%3E2.0.0-yellow" alt="vite">
</a>
<a href="https://gitee.com/lyt-top/vue-next-admin/blob/master/LICENSE" target="_blank">
<img src="https://img.shields.io/badge/license-MIT-success" alt="license">
</a>
</p>
<p>&nbsp;</p>
</div>
<div align="center"><h1 align="center">vboot-vben</h1></div>
<div align="center"><h3 align="center">一个开箱即用的快速开发平台vue前端</h3></div>
#### 🌈 介绍
# 🍿 相关地址
* 体验地址1:[http://zsvg.gitee.io/vue](http://zsvg.gitee.io/vue) (基于Element-Plus)
* 体验地址2:[http://zsvg.gitee.io/vben](http://zsvg.gitee.io/vben) (基于Ant-Design-Vue)
* 文档地址 :[http://zsvg.gitee.io/vnds](http://zsvg.gitee.io/vnds)
* QQ交流群:[795417789](https://jq.qq.com/?_wv=1027&k=yoKKIlIG) (唯一交流群)
基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex,适配手机、平板、pc 的后台开源免费模板,希望减少工作量,帮助大家实现快速开发。
### 🍟 概述
* 基于JAVA/.NET实现的快速开发平台。模块化插件式开发,前后端分离,开箱即用。
* JAVA后端基于SpringBoot框架,数据库访问同时集成了Jpa与MyBatis-Plus,即可自动生成数据库表结构,又可灵活编写sql。
* .NET后端基于Furion框架,数据库访问使用Sqlsugar,codeFirst方式。
* 前端基于vue-next-admin/vben,引入了bpmn.js工作流、VForm可视化表单。
#### ⛱️ 线上预览
### 🍖 详细功能
1. 主控面板:控制台页面,可进行工作台,分析页,统计等功能的展示。
2. 部门管理:部门维护,支持多层级结构的树形结构。
3. 用户管理:用户维护,可设置用户部门,岗位,群组,职务,角色,数据权限等。
4. 岗位管理:岗位维护,岗位可作为用户的一个标签,岗位也可与权限等其他功能挂钩。
5. 群组管理:群组维护,群组可设置部门,用户,岗位,用于更广泛的权限设置。
6. 菜单管理:菜单目录,菜单,和按钮的维护是权限控制的基本单位。
7. 角色管理:角色绑定菜单后,可限制相关角色的人员登录系统的功能范围。
8. 字典管理:系统内各种枚举类型的维护。
9. 访问日志:用户的登录和退出日志的查看和管理。
10. 操作日志:用户的操作业务的日志的查看和管理。
11. 定时任务:定时任务的维护,通过cron表达式控制任务的执行频率。
12. 流程引擎:流程图展示,自解析bpmn.js,支持驳回、转办、废弃,跳转等功能
13. 在线表单:在线表单设计,配合流程可以实现表单数据流转
14. 消息机制:待办待阅功能,联通钉钉与企业微信接口
15. 代码生成:在线配置,一键生成前后端代码
- vue3.x 版本预览(vue-next-admin)<a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank">https://lyt-top.gitee.io/vue-next-admin-preview/#/login</a>
- vue2.x 版本预览(vue-prev-admin)<a href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank">https://lyt-top.gitee.io/vue-prev-admin-preview/#/login</a>
### ⚡ 近期计划
- [ ] 完善文档
- [ ] 完善工作流
#### 💒 代码仓库
### 💐 特别鸣谢
- 👉 eladmin:[https://gitee.com/elunez/eladmin](https://gitee.com/elunez/eladmin)
- 👉 ruoyi:[https://gitee.com/y_project/RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue)
- 👉 Vben-Admin:[https://vvbin.cn/doc-next](https://vvbin.cn/doc-next)
- 👉 vue-next-admin:[https://gitee.com/lyt-top/vue-next-admin](https://gitee.com/lyt-top/vue-next-admin)
- 👉 vxe-table:[https://gitee.com/xuliangzhan_admin/vxe-table](https://gitee.com/xuliangzhan_admin/vxe-table)
- 👉 VForm:[https://www.vform666.com](https://www.vform666.com/)
- vue3.x 版本 <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">https://gitee.com/lyt-top/vue-next-admin</a>
- vue2.x 版本 <a href="https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin" target="_blank">https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin</a>
#### 🚧 安装 cnpm、yarn
- 复制代码(桌面 cmd 运行) `npm install -g cnpm --registry=https://registry.npm.taobao.org`
- 复制代码(桌面 cmd 运行) `npm install -g yarn`
#### 🏭 环境支持
| Edge | last 2 versions | last 2 versions | last 2 versions |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
| ![Edge](https://cdn.jsdelivr.net/npm/@browser-logos/edge/edge_32x32.png) | ![Firefox](https://cdn.jsdelivr.net/npm/@browser-logos/firefox/firefox_32x32.png) | ![Chrome](https://cdn.jsdelivr.net/npm/@browser-logos/chrome/chrome_32x32.png) | ![Safari](https://cdn.jsdelivr.net/npm/@browser-logos/safari/safari_32x32.png) |
> 由于 Vue3 不再支持 IE11,故而 ElementPlus 也不支持 IE11 及之前版本。
#### ⚡ 使用说明
建议使用 cnpm,因为 yarn 有时会报错。<a href="http://nodejs.cn/" target="_blank">node 版本 > 12xx.xx.x</a>
```bash
# 克隆项目
git clone https://gitee.com/lyt-top/vue-next-admin.git
# 进入项目
cd vue-next-admin
# 安装依赖
cnpm install
# 运行项目
cnpm run dev
# 打包发布
cnpm run build
```
#### 💯 学习交流加 QQ 群
- 若加群了没同意(一般秒过),那就是群满了(500 人群),请换一个群试试。群会定期清理半年(6 个月)未发言的群友,资源有限,请谅解。建议勿加多群,可能会误伤!
- 查看开发文档:<a href="https://lyt-top.gitee.io/vue-next-admin-doc-preview" target="_blank">vue-next-admin-doc</a>
- 群号码:
1 群:<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">665452019</a>
2 群:<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">766356862</a>
3 群:<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">795345435</a>
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi">
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/user/qq1.png" width="220" height="220" alt="vue-next-admin 讨论群1" title="vue-next-admin 讨论群1"/>
</a>
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=zVfy3gNy7pNWVK3kMduDzwU369PZg2fw&jump_from=webapi">
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/user/qq2.png" width="220" height="220" alt="vue-next-admin 讨论群2" title="vue-next-admin 讨论群2"/>
</a>
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=02EWb5P2JkP-8iwzaDadgFdxA0HSHPpn&jump_from=webapi">
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/user/qq3.png" width="220" height="220" alt="vue-next-admin 讨论群3" title="vue-next-admin 讨论群3"/>
</a>
#### 💒 集成后端
- <a target="_blank" href="https://github.com/PandaGoAdmin/PandaX">@熊猫 PandaGoAdmin</a>
- <a target="_blank" href="https://toscode.gitee.com/GionConnection/gopro_free">@甜蜜蜜 GoPro 平台</a>
- <a target="_blank" href="https://gitee.com/GionConnection/niupi-free">@甜蜜蜜 NiuPi 平台</a>
- <a target="_blank" href="https://gitee.com/tiger1103/gfast/tree/os-v3/">@游子 GFast-V3</a>
- <a target="_blank" href="https://gitee.com/diygw/diygw-ui-php/">@diygw.com gw-ui-php</a>
- <a target="_blank" href="https://gitee.com/zsvg/vboot-net">@zsvg vboot-net</a>
- <a target="_blank" href="https://gitee.com/zsvg/vboot-java">@zsvg vboot-java</a>
#### ❤️ 鸣谢列表
- <a href="https://github.com/vuejs/vue" target="_blank">vue</a>
- <a href="https://github.com/vuejs/vue-next" target="_blank">vue-next</a>
- <a href="https://github.com/ElemeFE/element" target="_blank">element-ui</a>
- <a href="https://github.com/element-plus/element-plus" target="_blank">element-plus</a>
- <a href="https://github.com/vuejs/vue-router-next" target="_blank">vue-router-next</a>
- <a href="https://github.com/vuejs/vuex" target="_blank">vuex</a>
- <a href="https://github.com/apache/echarts" target="_blank">echarts</a>
- <a href="https://github.com/axios/axios" target="_blank">axios</a>
- <a href="https://github.com/zenorocha/clipboard.js" target="_blank">clipboard</a>
- <a href="https://github.com/inorganik/countUp.js" target="_blank">countUp</a>
- <a href="https://github.com/developit/mitt" target="_blank">mitt</a>
- <a href="https://github.com/rstacruz/nprogress" target="_blank">nprogress</a>
- <a href="https://github.com/sindresorhus/screenfull.js" target="_blank">screenfull</a>
- <a href="https://github.com/SortableJS/Sortable" target="_blank">sortablejs</a>
- <a href="https://github.com/sass/sass" target="_blank">sass</a>
- <a href="https://github.com/microsoft/TypeScript" target="_blank">typescript</a>
- <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
- <a href="https://github.com/wangeditor-team/wangEditor" target="_blank">wangeditor</a>
- <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
- <a href="https://github.com/davidshimjs/qrcodejs" target="_blank">qrcodejs</a>
- <a href="https://github.com/crabbly/Print.js" target="_blank">print-js</a>
- <a href="https://github.com/jbaysolutions/vue-grid-layout" target="_blank">vue-grid-layout</a>
- <a href="https://github.com/antoniandre/splitpanes" target="_blank">splitpanes</a>
- <a href="https://github.com/jsplumb/jsplumb" target="_blank">jsplumb</a>
#### 💕 特别感谢
特别感谢老哥们的建议、指导与帮忙。谢谢!
- <a href="https://gitee.com/click33/sa-plus" target="_blank">@省长</a>
- <a href="https://gitee.com/jskz/Jskz-SpringCloud" target="_blank">@唐参
- <a href="https://gitee.com/chuange" target="_blank">@川歌</a>
- @华仔
#### 💌 支持作者
如果觉得框架不错,或者已经在使用了,希望你可以去 <a target="_blank" href="https://github.com/lyt-Top/vue-next-admin">Github</a> 或者
<a target="_blank" href="https://gitee.com/lyt-top/vue-next-admin">Gitee</a> 帮我点个 ⭐ Star,这将是对我极大的鼓励与支持。
如果对您有帮助,点击右上角⭐Star⭐关注 ,感谢支持开源!
```
+1 -1
View File
@@ -179,7 +179,7 @@ export default defineComponent({
})
.catch(() => {});
} else if (path === 'wareHouse') {
window.open('https://gitee.com/lyt-top/vue-next-admin');
window.open('https://gitee.com/zsvg/vboot-vue');
} else {
router.push(path);
}
+111 -80
View File
@@ -1,65 +1,66 @@
<template>
<div class="app-container" style="overflow: hidden">
<el-row :gutter="10">
<el-col :lg="24" class="card-box" v-if="server.cpu" >
<el-col :lg="24" class="card-box" v-if="server.cpu">
<el-card class="box-card">
<template #header>
<span>系统状态</span>
</template>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="mr30">
<div class="title">CPU使用率</div>
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">当前空闲率:{{ server.cpu.free }}</div>
<div style="padding: 3px">系统使用率:{{ server.cpu.sys }}</div>
<div style="padding: 3px">用户使用率:{{ server.cpu.used }}</div>
<el-row>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<div class="title">CPU使用率</div>
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">当前空闲率:{{ server.cpu.free }}</div>
<div style="padding: 3px">系统使用率:{{ server.cpu.sys }}</div>
<div style="padding: 3px">用户使用率:{{ server.cpu.used }}</div>
</div>
</template>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.sys)"/>
</div>
</template>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.sys)"/>
</div>
</el-tooltip>
<div class="footer" v-if="server.sys">{{ server.cpu.cpuNum }} 核心</div>
</el-col>
</el-tooltip>
<div class="footer" v-if="server.sys">{{ server.cpu.cpuNum }} 核心</div>
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="mr30">
<div class="title">内存使用率</div>
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">总量:{{ server.mem.total }}</div>
<div style="padding: 3px">已使用:{{ server.mem.used }}</div>
<div style="padding: 3px">空闲:{{ server.mem.free }}</div>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<div class="title">内存使用率</div>
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">总量:{{ server.mem.total }}</div>
<div style="padding: 3px">已使用:{{ server.mem.used }}</div>
<div style="padding: 3px">空闲:{{ server.mem.free }}</div>
</div>
</template>
<div class="content">
<el-progress type="dashboard" :percentage="server.mem.usage"/>
</div>
</template>
</el-tooltip>
<div class="footer">{{ server.mem.used }}GB / {{ server.mem.total }}GB</div>
</el-col>
<div class="content">
<el-progress type="dashboard" :percentage="server.mem.usage"/>
</div>
</el-tooltip>
<div class="footer">{{ server.mem.used }}GB / {{ server.mem.total }}GB </div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<div class="title">JVM使用率</div>
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">总量:{{ server.jvm.total }}</div>
<div style="padding: 3px">已使用:{{ server.jvm.used }}</div>
<div style="padding: 3px">空闲:{{ server.jvm.free }}</div>
</div>
</template>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="mr30">
<div class="title">JVM使用率</div>
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">总量:{{ server.jvm.total }}</div>
<div style="padding: 3px">已使用:{{ server.jvm.used }}</div>
<div style="padding: 3px">空闲:{{ server.jvm.free }}</div>
<div class="content">
<el-progress type="dashboard" :percentage="server.jvm.usage"/>
</div>
</template>
<div class="content">
<el-progress type="dashboard" :percentage="server.jvm.usage"/>
</div>
</el-tooltip>
<div class="footer">{{ server.jvm.used }}GB / {{ server.jvm.total }}GB </div>
</el-col>
</el-tooltip>
<div class="footer">{{ server.jvm.used }}GB / {{ server.jvm.total }}GB</div>
</el-col>
</el-row>
</el-card>
</el-col>
@@ -68,24 +69,26 @@
<template #header>
<span>磁盘状态</span>
</template>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="mr30" v-for="sysFile in server.sysFiles" :key="sysFile.dirName">
<div class="title">{{ sysFile.dirName }}盘使用率</div>
<div class="content">
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">总量:{{ sysFile.total }}</div>
<div style="padding: 3px">空闲:{{ sysFile.free }}</div>
<div style="padding: 3px">已用:{{ sysFile.used }}</div>
<el-row>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="sysFile in server.sysFiles" :key="sysFile.dirName">
<div class="title">{{ sysFile.dirName }}盘使用率</div>
<div class="content">
<el-tooltip placement="top-end">
<template #content>
<div style="font-size: 12px">
<div style="padding: 3px">总量:{{ sysFile.total }}</div>
<div style="padding: 3px">空闲:{{ sysFile.free }}</div>
<div style="padding: 3px">已用:{{ sysFile.used }}</div>
</div>
</template>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(sysFile.usage)"/>
</div>
</template>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(sysFile.usage)"/>
</div>
</el-tooltip>
</div>
<div class="footer">{{ sysFile.used }}/{{ sysFile.total }}</div>
</el-col>
</el-tooltip>
</div>
<div class="footer">{{ sysFile.used }}/{{ sysFile.total }}</div>
</el-col>
</el-row>
</el-card>
</el-col>
@@ -143,28 +146,56 @@
<table cellspacing="0" style="width: 100%;table-layout:fixed;">
<tbody>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">Java名称</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">Java版本</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
<td class="el-table__cell is-leaf">
<div class="cell">Java名称</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">Java版本</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div>
</td>
</tr>
<tr>
<td class="el-table__cell is-leaf"><div class="cell">启动时间</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
<td class="el-table__cell is-leaf"><div class="cell">运行时长</div></td>
<td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
<td class="el-table__cell is-leaf">
<div class="cell">启动时间</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell">运行时长</div>
</td>
<td class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div>
</td>
</tr>
<tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
<td colspan="1" class="el-table__cell is-leaf">
<div class="cell">安装路径</div>
</td>
<td colspan="3" class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div>
</td>
</tr>
<tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
<td colspan="1" class="el-table__cell is-leaf">
<div class="cell">项目路径</div>
</td>
<td colspan="3" class="el-table__cell is-leaf">
<div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div>
</td>
</tr>
<tr>
<td colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></td>
<td colspan="3" class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div></td>
<td colspan="1" class="el-table__cell is-leaf">
<div class="cell">运行参数</div>
</td>
<td colspan="3" class="el-table__cell is-leaf">
<div class="cell" v-if="server.jvm">{{ server.jvm.inputArgs }}</div>
</td>
</tr>
</tbody>
</table>
@@ -197,7 +228,7 @@ onMounted(async () => {
const loading = ElLoading.service({
lock: true,
fullscreen: true,
text:'正在获取服务器监控数据,请稍等',
text: '正在获取服务器监控数据,请稍等',
background: 'rgba(0, 0, 0, 0.5)',
});
server.value = await request({