Skip to content

G
gin-vue-admin

梁国权 / gin-vue-admin
与 Fork 源项目一致

Fork自 FLIPPED-AURORA / gin-vue-admin

通知 2
Star 0
Fork 0
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 69c485cc 编写于 作者: Mr.奇淼（'s avatar Mr.奇淼（ 提交者： GitHub
浏览文件
操作

Merge pull request #657 from bypanghu/gva-vue3-2.4.5 

Gva vue3 2.4.5
上级 1886bf54 dd67b51d
展开全部 隐藏空白更改
内联 并排
Showing with 9620 addition and 179 deletion
web/package.json
浏览文件 @ 69c485cc
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^0.19.2", "axios": "^0.19.2",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"echarts": "4.9.0",
"element-plus": "^1.1.0-beta.4", "element-plus": "^1.1.0-beta.4",
"highlight.js": "^10.6.0", "highlight.js": "^10.6.0",
"marked": "^2.0.0", "marked": "^2.0.0",
...@@ -17,7 +18,6 @@ ...@@ -17,7 +18,6 @@
"path": "^0.12.7", "path": "^0.12.7",
"qs": "^6.8.0", "qs": "^6.8.0",
"quill": "^1.3.7", "quill": "^1.3.7",
"sass": "^1.34.1",
"screenfull": "^5.0.2", "screenfull": "^5.0.2",
"script-ext-html-webpack-plugin": "^2.1.4", "script-ext-html-webpack-plugin": "^2.1.4",
"spark-md5": "^3.0.1", "spark-md5": "^3.0.1",
......
web/src/components/dashbordCharts/echartsLine.vue 0 → 100644
浏览文件 @ 69c485cc
<template>
<div class="dashbord-line" style="height: 400px;width: 100%;"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons");
var dataAxis = [];
for (var i = 1 ; i < 21 ; i++){
dataAxis.push(`${i}号`)
}
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
export default {
name: "line",
data() {
return {
chart: null,
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions();
},
setOptions() {
this.chart.setOption({
title: {
text: 'GVA 图标示例',
},
xAxis: {
data: dataAxis,
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{
type: 'bar',
itemStyle: {
borderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]
),
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]
)
}
},
data: data
}
]
});
},
},
};
</script>
<style lang="scss" scoped>
.dashbord-line {
margin: 20px 0;
padding: 20px;
background-color: #fff;
}
</style>
\ No newline at end of file
web/src/components/dashbordTable/dashbordTable.vue 0 → 100644
浏览文件 @ 69c485cc
<template>
<div class="commit-table">
<div class="commit-table-title">Gva 仓库commit 记录</div>
<el-table :data="dataTimeline" style="width: 100%" v-loading="loading">
<el-table-column prop="from" show-overflow-tooltip label="日期" width="180"></el-table-column>
<el-table-column prop="title" show-overflow-tooltip label="推送者" width="120"></el-table-column>
<el-table-column prop="message" show-overflow-tooltip label="commit 信息"></el-table-column>
</el-table>
</div>
</template>
<script>
import { Commits } from '@/api/github'
export default {
data() {
return {
loading: true,
dataTimeline: [],
}
},
created() {
this.loadCommits()
},
methods: {
loadCommits() {
Commits(0).then(({ data }) => {
this.loading = false
data.forEach((element , index) => {
if (element.commit.message && index < 6) {
this.dataTimeline.push({
from: new Date(element.commit.author.date),
title: element.commit.author.name,
showDayAndMonth: true,
message: element.commit.message,
})
}
})
})
},
}
}
</script>
<style lang="scss" scoped>
.commit-table{
margin: 20px 0;
padding: 20px;
background-color: #fff;
height: 400px;
&-title{
color: rgb(56,137,206);
font-size: 18px;
margin: 20px 0;
}
}
</style>
\ No newline at end of file
web/src/view/dashboard/index.vue
浏览文件 @ 69c485cc
<template> <template>
<div class="big"> <div class="page">
<el-row class="card"> <div class="mycard dashbord1">
<el-col :xs="24" :lg="16" :md="16" style="height:90px"> <div class="dashbord1-left">
<div class="car-left"> <div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<el-row> <div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<el-col :xs="4" :md="3" :lg="3"> <div class="dashbord1-left-rows">
<span class="card-img"> <el-row :gutter="20">
<img :src="userInfo.headerImg" alt=""> <el-col :span="8" :xs="24" :sm="8">
</span> <div class="flex-center">
</el-col> <i class="el-icon-sort icon"></i>今日流量 (1231231)
<el-col :xs="20" :lg="12" :md="12"> </div>
<div class="text"> </el-col>
<h4>早安，管理员， 请开始您一天的工作吧！</h4> <el-col :span="8" :xs="24" :sm="8">
<p class="tips-text"> <div class="flex-center">
<i class="el-icon-sunny el-icon" /> <i class="el-icon-s-custom icon"></i>总用户数 (24001)
<span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span> </div>
</p> </el-col>
</div> <el-col :span="8" :xs="24" :sm="8">
</el-col> <div class="flex-center">
</el-row> <i class="el-icon-s-comment icon"></i>好评率 (99%)
</div>
</el-col>
</el-row>
</div>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt />
</div> </div>
</el-col> <div class="mycard dashbord2">
<el-col :xs="24" :lg="8" :md="8"> <div>
<div class="car-right"> <div class="dashbord2-item">
<el-row> 使用教学：
<el-col :span="8"> <a
<div class="card-item"> style="color:#409EFF"
<span class="flow"><i class="el-icon-s-grid" /></span> target="view_window"
<span>今日流量 </span> href="https://www.bilibili.com/video/BV1Rg411u7xH/"
<b>13260</b> >https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div> </div>
</el-col> <div class="dashbord2-item">
<el-col :span="8"> 插件仓库：
<div class="card-item"> <a
<span class="user-number"> style="color:#409EFF"
<i class="el-icon-s-custom" /> target="view_window"
</span> href="https://github.com/flipped-aurora/gva-plugins"
<span>总用户 </span> >https://github.com/flipped-aurora/gva-plugins</a>
<b>48286</b> </div>
</div> </div>
</el-col> </div>
<el-col :span="8">
<div class="card-item"> <el-card class="mycard quick-entrance">
<span class="feedback"> <template #header>
<i class="el-icon-star-on" /> <div class="card-header">
</span> <span>快捷入口</span>
<span>好评率 </span> </div>
<b>98%</b> </template>
</div> <el-row :gutter="20">
</el-col> <el-col
</el-row> v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
@click="toTarget(card.name)"
class="quick-entrance-items"
>
<div class="quick-entrance-item">
<div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
<i :class="card.icon" :style="{ color: card.color }" />
</div>
<p>{{ card.label }}</p>
</div>
</el-col>
</el-row>
</el-card>
<!-- <div class="quick-entrance-title"></div> -->
<div class="mycard">
<el-row :gutter="0">
<el-col :xs="24" :sm="16">
<echarts-line></echarts-line>
</el-col>
<el-col :xs="24" :sm="8">
<dashbord-table></dashbord-table>
</el-col>
</el-row>
</div> </div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card shadow="hover">
<h2>
使用教学：<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Rg411u7xH/">https://www.bilibili.com/video/BV1Rg411u7xH/</a>
</h2>
<br>
<h2>
插件仓库：<a style="color:#409EFF" target="view_window" href="https://github.com/flipped-aurora/gva-plugins">https://github.com/flipped-aurora/gva-plugins</a>
</h2>
<div />
</el-card>
</el-col>
</el-row>
<div class="shadow">
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
@click="toTarget(card.name)"
>
<el-card shadow="hover" class="grid-content">
<i :class="card.icon" :style="{ color: card.color }" />
<p>{{ card.label }}</p>
</el-card>
</el-col>
</el-row>
</div> </div>
</div>
</template> </template>
<script> <script>
import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
import { mapGetters } from 'vuex' import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
export default { export default {
name: 'Dashboard', components: {
components: { echartsLine,
dashbordTable
}, },
data() { data() {
return { return {
toolCards: [ toolCards: [
{ {
label: '用户管理', label: '用户管理',
icon: 'el-icon el-icon-monitor', icon: 'el-icon el-icon-monitor',
name: 'user', name: 'user',
color: '#ff9c6e' color: '#ff9c6e',
}, bg: 'rgba(255, 156, 110,.3)'
{ },
label: '角色管理', {
icon: 'el-icon el-icon-setting', label: '角色管理',
name: 'authority', icon: 'el-icon el-icon-setting',
color: '#69c0ff' name: 'authority',
}, color: '#69c0ff',
{ bg: 'rgba(105, 192, 255,.3)'
label: '菜单管理', },
icon: 'el-icon el-icon-menu', {
name: 'menu', label: '菜单管理',
color: '#b37feb' icon: 'el-icon el-icon-menu',
}, name: 'menu',
{ color: '#b37feb',
label: '代码生成器', bg: 'rgba(179, 127, 235,.3)'
icon: 'el-icon el-icon-cpu', },
name: 'autoCode', {
color: '#ffd666' label: '代码生成器',
}, icon: ' el-icon-cpu',
{ name: 'autoCode',
label: '表单生成器', color: '#ffd666',
icon: 'el-icon el-icon-document-checked', bg: 'rgba(255, 214, 102,.3)'
name: 'formCreate', },
color: '#ff85c0' {
}, label: '表单生成器',
{ icon: 'el-icon-document-checked',
label: '关于我们', name: 'formCreate',
icon: 'el-icon el-icon-user', color: '#ff85c0',
name: 'about', bg: 'rgba(255, 133, 192,.3)'
color: '#5cdbd3' },
{
label: '关于我们',
icon: ' el-icon-user',
name: 'about',
color: '#5cdbd3',
bg: 'rgba(92, 219, 211,.3)'
}
]
}
},
methods: {
toTarget(name) {
this.$router.push({ name })
} }
]
}
},
computed: {
...mapGetters('user', ['userInfo'])
},
methods: {
toTarget(name) {
this.$router.push({ name })
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.big { @mixin flex-center {
margin: 100px 0 0 0; display: flex;
padding-top: 10px; align-items: center;
background-color: rgb(243, 243, 243); }
.top { .page {
width: 100%; background: #f0f2f5;
height: 360px; padding: 0;
margin-top: 20px;
overflow: hidden; .mycard {
.chart-container { background-color: #fff;
position: relative; border-radius: 10px;
width: 100%; height: auto;
height: 100%; padding: 10px 30px;
padding: 20px; overflow: hidden;
background-color: #fff; margin-bottom: 15px;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
}
.dashbord1 {
height: 120px;
@include flex-center;
justify-content: space-between;
color: #777;
&-left {
&-title {
margin-top: 15px;
font-size: 22px;
color: #000;
}
&-dot {
font-size: 14px;
margin-top: 10px;
}
&-rows {
// margin-top: 15px;
width: 600px;
align-items: center;
}
}
&-right {
height: 600px;
width: 600px;
margin-top: -20px;
}
} }
} .dashbord2 {
.mid { @include flex-center;
width: 100%; justify-content: flex-start;
height: 380px; height: 60px;
.chart-wrapper { &-item {
height: 340px; line-height: 25px;
background: #fff; }
padding: 16px 16px 0;
margin-bottom: 32px;
} }
} .quick-entrance-title {
.bottom { height: 30px;
width: 100%; font-size: 22px;
height: 420px; color: #333;
// margin: 20px 0; width: 100%;
.el-row { border-bottom: 1px solid #eee;
margin-right: 4px !important;
} }
.chart-player { .quick-entrance-items {
width: 100%; @include flex-center;
height: 270px; justify-content: center;
padding: 10px; text-align: center;
background-color: #fff; color: #333;
.quick-entrance-item {
height: auto;
text-align: center;
// align-items: center;
&-icon {
width: 50px;
height: 50px !important;
border-radius: 8px;
@include flex-center;
justify-content: center;
margin: 0 auto;
i {
font-size: 24px;
}
}
p {
margin-top: 10px;
}
}
} }
.iPlayer{ }
width: 100%; .icon {
height: 100%; font-size: 20px;
color: rgb(85, 160, 248);
width: 30px;
height: 30px;
margin-right: 10px;
@include flex-center;
}
.flex-center {
@include flex-center;
}
//小屏幕不显示右侧，将登陆框居中
@media (max-width: 750px) {
.mycard {
padding: 20px 10px !important;
.dashbord1 {
height: auto;
&-left {
&-title {
font-size: 20px !important;
}
&-rows {
margin-top: 15px;
align-items: center;
}
}
&-right {
display: none;
}
}
.dashbord2 {
&-item {
line-height: 20px;
}
}
.icon {
font-size: 18px;
}
} }
}
} }
</style> </style>
\ No newline at end of file
web/src/view/dashboard/index1.vue 0 → 100644
浏览文件 @ 69c485cc
<template>
<div class="big">
<el-row class="card">
<el-col :xs="24" :lg="16" :md="16" style="height:90px">
<div class="car-left">
<el-row>
<el-col :xs="4" :md="3" :lg="3">
<span class="card-img">
<img :src="userInfo.headerImg" alt="">
</span>
</el-col>
<el-col :xs="20" :lg="12" :md="12">
<div class="text">
<h4>早安，管理员， 请开始您一天的工作吧！</h4>
<p class="tips-text">
<i class="el-icon-sunny el-icon" />
<span>今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</span>
</p>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :xs="24" :lg="8" :md="8">
<div class="car-right">
<el-row>
<el-col :span="8">
<div class="card-item">
<span class="flow"><i class="el-icon-s-grid" /></span>
<span>今日流量 </span>
<b>13260</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="user-number">
<i class="el-icon-s-custom" />
</span>
<span>总用户 </span>
<b>48286</b>
</div>
</el-col>
<el-col :span="8">
<div class="card-item">
<span class="feedback">
<i class="el-icon-star-on" />
</span>
<span>好评率 </span>
<b>98%</b>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<el-row>
<el-col>
<el-card shadow="hover">
<h2>
使用教学：<a style="color:#409EFF" target="view_window" href="https://www.bilibili.com/video/BV1Rg411u7xH/">https://www.bilibili.com/video/BV1Rg411u7xH/</a>
</h2>
<br>
<h2>
插件仓库：<a style="color:#409EFF" target="view_window" href="https://github.com/flipped-aurora/gva-plugins">https://github.com/flipped-aurora/gva-plugins</a>
</h2>
<div />
</el-card>
</el-col>
</el-row>
<div class="shadow">
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
@click="toTarget(card.name)"
>
<el-card shadow="hover" class="grid-content">
<i :class="card.icon" :style="{ color: card.color }" />
<p>{{ card.label }}</p>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Dashboard',
components: {
},
data() {
return {
toolCards: [
{
label: '用户管理',
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb'
},
{
label: '代码生成器',
icon: 'el-icon el-icon-cpu',
name: 'autoCode',
color: '#ffd666'
},
{
label: '表单生成器',
icon: 'el-icon el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0'
},
{
label: '关于我们',
icon: 'el-icon el-icon-user',
name: 'about',
color: '#5cdbd3'
}
]
}
},
computed: {
...mapGetters('user', ['userInfo'])
},
methods: {
toTarget(name) {
this.$router.push({ name })
}
}
}
</script>
<style lang="scss" scoped>
.big {
margin: 100px 0 0 0;
padding-top: 10px;
background-color: rgb(243, 243, 243);
.top {
width: 100%;
height: 360px;
margin-top: 20px;
overflow: hidden;
.chart-container {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
background-color: #fff;
}
}
.mid {
width: 100%;
height: 380px;
.chart-wrapper {
height: 340px;
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
.bottom {
width: 100%;
height: 420px;
// margin: 20px 0;
.el-row {
margin-right: 4px !important;
}
.chart-player {
width: 100%;
height: 270px;
padding: 10px;
background-color: #fff;
}
.iPlayer{
width: 100%;
height: 100%;
}
}
}
</style>
web/yarn.lock 0 → 100644
浏览文件 @ 69c485cc
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或