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 搜索 >>

提交 1f6e35ee 编写于 作者: P piexlmax
浏览文件
操作

首页优化

上级 69c485cc
隐藏空白更改
内联 并排
Showing with 329 addition and 280 deletion
web/package-lock.json
浏览文件 @ 1f6e35ee
{
"name": "gin-vue-admin",
"version": "0.1.0",
"version": "2.3.5",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......@@ -2381,6 +2381,7 @@
"version": "3.1.2",
"resolved": "https://registry.npm.taobao.org/anymatch/download/anymatch-3.1.2.tgz?cache=0&sync_timestamp=1617747806715&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fanymatch%2Fdownload%2Fanymatch-3.1.2.tgz",
"integrity": "sha1-wFV8CWrzLxBhmPT04qODU343hxY=",
"dev": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
......@@ -2800,7 +2801,8 @@
"binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.2.0.tgz",
"integrity": "sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0="
"integrity": "sha1-dfUC7q+f/eQvyYgpZFvk6na9ni0=",
"dev": true
},
"bindings": {
"version": "1.5.0",
......@@ -3256,6 +3258,7 @@
"version": "3.5.2",
"resolved": "https://registry.nlark.com/chokidar/download/chokidar-3.5.2.tgz",
"integrity": "sha1-26OXb8rbAW9m/TZQIdkWANAcHnU=",
"dev": true,
"requires": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
......@@ -3271,6 +3274,7 @@
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz",
"integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
"dev": true,
"requires": {
"fill-range": "^7.0.1"
}
......@@ -3279,6 +3283,7 @@
"version": "7.0.1",
"resolved": "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz",
"integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
"dev": true,
"requires": {
"to-regex-range": "^5.0.1"
}
......@@ -3286,12 +3291,14 @@
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
"integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss="
"integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
"dev": true
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz",
"integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
"dev": true,
"requires": {
"is-number": "^7.0.0"
}
......@@ -4773,6 +4780,14 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "4.9.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"zrender": "4.3.2"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
......@@ -5806,6 +5821,7 @@
"version": "2.3.2",
"resolved": "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz?cache=0&sync_timestamp=1612536546156&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffsevents%2Fdownload%2Ffsevents-2.3.2.tgz",
"integrity": "sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro=",
"dev": true,
"optional": true
},
"function-bind": {
......@@ -5892,6 +5908,7 @@
"version": "5.1.2",
"resolved": "https://registry.nlark.com/glob-parent/download/glob-parent-5.1.2.tgz?cache=0&sync_timestamp=1626760200164&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-5.1.2.tgz",
"integrity": "sha1-hpgyxYA0/mikCTwX3BXoNA2EAcQ=",
"dev": true,
"requires": {
"is-glob": "^4.0.1"
}
......@@ -6766,6 +6783,7 @@
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/is-binary-path/download/is-binary-path-2.1.0.tgz",
"integrity": "sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=",
"dev": true,
"requires": {
"binary-extensions": "^2.0.0"
}
......@@ -6892,7 +6910,8 @@
"is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz",
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
"dev": true
},
"is-fullwidth-code-point": {
"version": "3.0.0",
......@@ -6904,6 +6923,7 @@
"version": "4.0.1",
"resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz",
"integrity": "sha1-dWfb6fL14kZ7x3q4PEopSCQHpdw=",
"dev": true,
"requires": {
"is-extglob": "^2.1.1"
}
......@@ -7922,7 +7942,8 @@
"normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/normalize-path/download/normalize-path-3.0.0.tgz",
"integrity": "sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU="
"integrity": "sha1-Dc1p/yOhybEf0JeDFmRKA4ghamU=",
"dev": true
},
"normalize-range": {
"version": "0.1.2",
......@@ -8472,7 +8493,8 @@
"picomatch": {
"version": "2.3.0",
"resolved": "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz",
"integrity": "sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI="
"integrity": "sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=",
"dev": true
},
"pify": {
"version": "4.0.1",
......@@ -9468,6 +9490,7 @@
"version": "3.6.0",
"resolved": "https://registry.nlark.com/readdirp/download/readdirp-3.6.0.tgz",
"integrity": "sha1-dKNwvYVxFuJFspzJc0DNQxoCpsc=",
"dev": true,
"requires": {
"picomatch": "^2.2.1"
}
......@@ -9866,6 +9889,7 @@
"version": "1.38.1",
"resolved": "https://registry.nlark.com/sass/download/sass-1.38.1.tgz?cache=0&sync_timestamp=1629764768435&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsass%2Fdownload%2Fsass-1.38.1.tgz",
"integrity": "sha1-VN+xf7FohGtYUDJLgvxi3Gj1G60=",
"dev": true,
"requires": {
"chokidar": ">=3.0.0 <4.0.0"
}
......@@ -12539,6 +12563,11 @@
"dev": true
}
}
},
"zrender": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
"integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}
web/src/components/dashbordCharts/echartsLine.vue
浏览文件 @ 1f6e35ee
<template>
<div class="dashbord-line" style="height: 400px;width: 100%;"></div>
<div class="dashbord-line-box">
<div class="dashbord-line-title">Gva 仓库commit 记录</div>
<div
ref="echart"
class="dashbord-line"
/>
</div>
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import echarts from 'echarts'
require('echarts/theme/macarons')
var dataAxis = [];
for (var i = 1 ; i < 21 ; i++){
dataAxis.push(`${i}号`)
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 = [];
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 = []
// eslint-disable-next-line no-redeclare
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
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;
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.$refs.echart, 'macarons')
this.setOptions()
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions();
setOptions() {
this.chart.setOption({
xAxis: {
data: dataAxis,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
z: 10,
},
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
}
]
});
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;
.dashbord-line-box {
padding: 20px;
.dashbord-line {
background-color: #fff;
height: 360px;
width: calc(100% - 40px);
}
.dashbord-line-title {
color: rgb(56, 137, 206);
font-size: 18px;
}
}
</style>
\ No newline at end of file
</style>
web/src/components/dashbordTable/dashbordTable.vue
浏览文件 @ 1f6e35ee
<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>
<div class="commit-table">
<div class="commit-table-title">Gva 仓库commit 记录</div>
<el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
<el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
<el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
<el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
</el-table>
</div>
</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,
})
}
})
})
},
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
</style>
web/src/view/dashboard/index.vue
浏览文件 @ 1f6e35ee
<template>
<div class="page">
<div class="mycard dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-sort icon"></i>今日流量 (1231231)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-custom icon"></i>总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<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 class="page">
<div class="mycard dashbord1">
<div class="dashbord1-left">
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
<div class="dashbord1-left-rows">
<el-row :gutter="20">
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-sort icon" />今日流量 (1231231)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-custom icon" />总用户数 (24001)
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<i class="el-icon-s-comment icon" />好评率 (99%)
</div>
</el-col>
</el-row>
</div>
<div class="mycard dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
</div>
</div>
</div>
<img src="@/assets/dashbord.png" class="dashbord1-right" alt>
</div>
<div class="mycard dashbord2">
<div>
<div class="dashbord2-item">
使用教学：
<a
style="color:#409EFF"
target="view_window"
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
</div>
<div class="dashbord2-item">
插件仓库：
<a
style="color:#409EFF"
target="view_window"
href="https://github.com/flipped-aurora/gva-plugins"
>https://github.com/flipped-aurora/gva-plugins</a>
</div>
</div>
</div>
<el-card class="mycard quick-entrance">
<template #header>
<div class="card-header">
<span>快捷入口</span>
</div>
</template>
<el-row :gutter="20">
<el-col
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>
<el-card class="mycard quick-entrance">
<template #header>
<div class="card-header">
<span>快捷入口</span>
</div>
</template>
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
:key="key"
:span="4"
:xs="8"
class="quick-entrance-items"
@click="toTarget(card.name)"
>
<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 />
</el-col>
<el-col :xs="24" :sm="8">
<dashbord-table />
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
export default {
components: {
echartsLine,
dashbordTable
},
data() {
return {
toolCards: [
{
label: '用户管理',
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e',
bg: 'rgba(255, 156, 110,.3)'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff',
bg: 'rgba(105, 192, 255,.3)'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb',
bg: 'rgba(179, 127, 235,.3)'
},
{
label: '代码生成器',
icon: ' el-icon-cpu',
name: 'autoCode',
color: '#ffd666',
bg: 'rgba(255, 214, 102,.3)'
},
{
label: '表单生成器',
icon: 'el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0',
bg: 'rgba(255, 133, 192,.3)'
},
{
label: '关于我们',
icon: ' el-icon-user',
name: 'about',
color: '#5cdbd3',
bg: 'rgba(92, 219, 211,.3)'
}
]
}
},
methods: {
toTarget(name) {
this.$router.push({ name })
components: {
echartsLine,
dashbordTable
},
data() {
return {
toolCards: [
{
label: '用户管理',
icon: 'el-icon el-icon-monitor',
name: 'user',
color: '#ff9c6e',
bg: 'rgba(255, 156, 110,.3)'
},
{
label: '角色管理',
icon: 'el-icon el-icon-setting',
name: 'authority',
color: '#69c0ff',
bg: 'rgba(105, 192, 255,.3)'
},
{
label: '菜单管理',
icon: 'el-icon el-icon-menu',
name: 'menu',
color: '#b37feb',
bg: 'rgba(179, 127, 235,.3)'
},
{
label: '代码生成器',
icon: ' el-icon-cpu',
name: 'autoCode',
color: '#ffd666',
bg: 'rgba(255, 214, 102,.3)'
},
{
label: '表单生成器',
icon: 'el-icon-document-checked',
name: 'formCreate',
color: '#ff85c0',
bg: 'rgba(255, 133, 192,.3)'
},
{
label: '关于我们',
icon: ' el-icon-user',
name: 'about',
color: '#5cdbd3',
bg: 'rgba(92, 219, 211,.3)'
}
]
}
},
methods: {
toTarget(name) {
this.$router.push({ name })
}
}
}
</script>
......@@ -277,4 +276,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或