新版前端UI，预发布2.6.4版本。 (#1735)
* fix: 修改 layout 中相关 emit 和 重复声明的 theme ，采用最新的vue api * fix：修改 eslintrc 的配置文件，删除大多数无用配置 * fix: 修复 layout 切换手机样式模糊层的 bug * feature: 重构 layout , 添加暗黑模式 ， 删除侧边栏颜色 * fix:细节调整，activeColor摘除。 * feature:右侧滚动模式调整 * feature:无用代码剔除 * fix: 修复暗黑模式相关细节 * fix: custome config layout * feature:样式细节调整 * fix: 增加前端样式配置文件 * feature:调整基础配置，增加表格边框 * feature:buttomInfo取消底色，a标签更改为活跃色 * feature:调整阴影颜色和配置同步 * feature:版本调整2.6.3==>2.6.4 --------- Co-authored-by: bypanghu <bypanghu@163.com>
This commit is contained in:
PiexlMax(奇淼
bypanghu
@@ -0,0 +1,23 @@
|
||||
<!--
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<el-carousel class=" h-40">
|
||||
<el-carousel-item v-for="(item , index) in banners" :key="index">
|
||||
<el-image :src="item" class="" fit="contain"></el-image>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const banners = [
|
||||
"https://qmplusimg.henrongyi.top/171163573320240328-221254.jpg",
|
||||
"https://qmplusimg.henrongyi.top/1657463878org.png"
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!--
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-400 rounded shadow" :class="[
|
||||
customClass || '',
|
||||
withoutPadding ? 'p-0' : 'p-4'
|
||||
]"
|
||||
>
|
||||
<div v-if="title" class="flex justify-between items-center">
|
||||
<div class="text-base font-bold">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-if="showAction" class="text-sm text-active cursor-pointer">
|
||||
查看更多
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showAction: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
withoutPadding: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,183 @@
|
||||
<!--
|
||||
本组件参考 arco-pro 的实现 将 ts 改为 js 写法
|
||||
https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/views/dashboard/workplace/components/content-chart.vue
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<Chart :height="height" :option="chartOption" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Chart from "@/components/charts/index.vue";
|
||||
import useChartOption from '@/hooks/charts';
|
||||
import { graphic } from 'echarts'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useAppStore } from '@/pinia'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const appStore = useAppStore()
|
||||
const { config } = storeToRefs(appStore)
|
||||
defineProps({
|
||||
height: {
|
||||
type: String,
|
||||
default: '128px',
|
||||
},
|
||||
})
|
||||
const dotColor = computed(() => {
|
||||
console.log(appStore.theme)
|
||||
return appStore.theme === 'dark' ? '#333' : '#E5E8EF'
|
||||
})
|
||||
const graphicFactory = (side) => {
|
||||
return {
|
||||
type: 'text',
|
||||
bottom: '8',
|
||||
...side,
|
||||
style: {
|
||||
text: '',
|
||||
textAlign: 'center',
|
||||
fill: '#4E5969',
|
||||
fontSize: 12,
|
||||
},
|
||||
};
|
||||
}
|
||||
const xAxis = ref(["2024-1", "2024-2", "2024-3", "2024-4", "2024-5", "2024-6", "2024-7", "2024-8"]);
|
||||
const chartsData = ref([12,22,32,45,32,78,89,92]);
|
||||
const graphicElements = ref([
|
||||
graphicFactory({ left: '5%' }),
|
||||
graphicFactory({ right: 0 }),
|
||||
]);
|
||||
const { chartOption } = useChartOption(() => {
|
||||
return {
|
||||
grid: {
|
||||
left: '40',
|
||||
right: '0',
|
||||
top: '10',
|
||||
bottom: '30',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
offset: 2,
|
||||
data: xAxis.value,
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
color: '#4E5969',
|
||||
formatter(value, idx) {
|
||||
if (idx === 0) return '';
|
||||
if (idx === xAxis.value.length - 1) return '';
|
||||
return `${value}`;
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: (idx) => {
|
||||
if (idx === 0) return false;
|
||||
if (idx === xAxis.value.length - 1) return false;
|
||||
return true;
|
||||
},
|
||||
lineStyle: {
|
||||
color: dotColor.value,
|
||||
},
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: `${config.value.primaryColor}FF`,
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter(value, idx) {
|
||||
if (idx === 0) return value;
|
||||
return `${value}k`;
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: dotColor.value,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params) {
|
||||
const [firstElement] = params
|
||||
return `<div>
|
||||
<p class="tooltip-title">${firstElement.axisValueLabel}</p>
|
||||
<div class="content-panel"><span>总内容量</span><span class="tooltip-value">${(
|
||||
Number(firstElement.value) * 10000
|
||||
).toLocaleString()}</span></div>
|
||||
</div>`;
|
||||
},
|
||||
className: 'echarts-tooltip-diy',
|
||||
},
|
||||
graphic: {
|
||||
elements: graphicElements.value,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: chartsData.value,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
// symbol: 'circle',
|
||||
symbolSize: 12,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: new graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: `${config.value.primaryColor}80`,
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: `${config.value.primaryColor}92`,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `${config.value.primaryColor}FF`,
|
||||
},
|
||||
]),
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: `${config.value.primaryColor}20`,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `${config.value.primaryColor}08`,
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!--
|
||||
本组件参考 arco-pro 的实现 将 ts 改为 js 写法
|
||||
https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/views/dashboard/workplace/components/content-chart.vue
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
@desc: 人数统计图表
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<Chart :height="height" :option="chartOption" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Chart from "@/components/charts/index.vue";
|
||||
import useChartOption from '@/hooks/charts';
|
||||
import { graphic } from 'echarts'
|
||||
import { ref } from 'vue';
|
||||
import { storeToRefs } from "pinia"
|
||||
import { useAppStore } from '@/pinia'
|
||||
const appStore = useAppStore()
|
||||
const { config } = storeToRefs(appStore)
|
||||
|
||||
const prop = defineProps({
|
||||
height: {
|
||||
type: String,
|
||||
default: '128px',
|
||||
},
|
||||
data : {
|
||||
type : Array,
|
||||
default : () => []
|
||||
}
|
||||
})
|
||||
const graphicFactory = (side) => {
|
||||
return {
|
||||
type: 'text',
|
||||
bottom: '8',
|
||||
...side,
|
||||
style: {
|
||||
text: '',
|
||||
textAlign: 'center',
|
||||
fill: '#4E5969',
|
||||
fontSize: 12,
|
||||
},
|
||||
};
|
||||
}
|
||||
const graphicElements = ref([
|
||||
graphicFactory({ left: '5%' }),
|
||||
graphicFactory({ right: 0 }),
|
||||
]);
|
||||
const { chartOption } = useChartOption(() => {
|
||||
return {
|
||||
grid: {
|
||||
left: '40',
|
||||
right: '0',
|
||||
top: '10',
|
||||
bottom: '30',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
offset: 2,
|
||||
show : false,
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
graphic: {
|
||||
elements: graphicElements.value,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: prop.data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 12,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: new graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: `${config.value.primaryColor}32`,
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: `${config.value.primaryColor}64`,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `${config.value.primaryColor}FF`,
|
||||
},
|
||||
]),
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: `${config.value.primaryColor}20`,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: `${config.value.primaryColor}08`,
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!--
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div v-if="title" class="font-bold">
|
||||
{{ title }}
|
||||
</div>
|
||||
<slot v-else name="title" />
|
||||
</div>
|
||||
<div class=" w-full relative">
|
||||
<div v-if="type !== 4">
|
||||
<div class="mt-4 text-gray-600 text-3xl font-mono">
|
||||
<el-statistic :value="268500" />
|
||||
</div>
|
||||
<div class="mt-2 text-green-600 text-sm font-bold font-mono">
|
||||
+80% <el-icon><TopRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" absolute top-0 right-2 w-[50%] h-20">
|
||||
<charts-people-number v-if="type === 1" :data="data[0]" height="100%" />
|
||||
<charts-people-number v-if="type === 2" :data="data[1]" height="100%" />
|
||||
<charts-people-number v-if="type === 3" :data="data[2]" height="100%" />
|
||||
</div>
|
||||
<charts-content-number v-if="type === 4" height="14rem" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
|
||||
import chartsPeopleNumber from "./charts-people-numbers.vue"
|
||||
import chartsContentNumber from "./charts-content-numbers.vue"
|
||||
defineProps({
|
||||
type :{
|
||||
type : Number,
|
||||
default : 1
|
||||
},
|
||||
title : {
|
||||
type : String,
|
||||
default : ""
|
||||
}
|
||||
})
|
||||
|
||||
const data = [
|
||||
[12, 22, 32, 45, 32, 78, 89, 92],
|
||||
[1, 2, 43, 5, 67, 78, 89, 12],
|
||||
[12, 22, 32, 45, 32, 78, 89, 92],
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
import GvaBanner from "./banner.vue"
|
||||
import GvaCard from "./card.vue"
|
||||
import GvaChart from "./charts.vue"
|
||||
import GvaTable from "./table.vue"
|
||||
import GvaNotice from "./notice.vue"
|
||||
import GvaQuickLink from "./quickLinks.vue"
|
||||
import GvaWiki from "./wiki.vue"
|
||||
|
||||
export {
|
||||
GvaBanner,
|
||||
GvaCard,
|
||||
GvaChart,
|
||||
GvaTable,
|
||||
GvaNotice,
|
||||
GvaQuickLink,
|
||||
GvaWiki
|
||||
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<!--
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<el-scrollbar>
|
||||
<div v-for="(item , index) in notices" :key="index" class="flex items-center mb-1.5 gap-3">
|
||||
<el-tag :type="item.type" size="small">
|
||||
{{ item.typeTitle }}
|
||||
</el-tag>
|
||||
<div class="text-xs text-gray-700 dark:text-gray-300 line-clamp-1">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const notices = [
|
||||
{
|
||||
type : 'primary',
|
||||
typeTitle : "公告",
|
||||
title : "公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1公告1",
|
||||
},
|
||||
{
|
||||
type : 'success',
|
||||
typeTitle : "通知",
|
||||
title : "通知1通知1通知1通知1通知1通知1通知1通知1通知1通知1通知1通知1通知1通知1",
|
||||
},
|
||||
{
|
||||
type : 'warning',
|
||||
typeTitle : "警告",
|
||||
title : "警告1警告1警告1警告1警告1警告1警告1警告1警告1警告1警告1警告1警告1警告1",
|
||||
},
|
||||
{
|
||||
type : 'danger',
|
||||
typeTitle : "错误",
|
||||
title : "错误1错误1错误1错误1错误1错误1错误1错误1错误1错误1错误1错误1错误1",
|
||||
},
|
||||
{
|
||||
type : 'info',
|
||||
typeTitle : "信息",
|
||||
title : "信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1信息1",
|
||||
},
|
||||
{
|
||||
type : 'primary',
|
||||
typeTitle : "公告",
|
||||
title : "公告2",
|
||||
},
|
||||
{
|
||||
type : 'success',
|
||||
typeTitle : "通知",
|
||||
title : "通知2",
|
||||
},
|
||||
{
|
||||
type : 'warning',
|
||||
typeTitle : "警告",
|
||||
title : "警告2",
|
||||
},
|
||||
{
|
||||
type : 'danger',
|
||||
typeTitle : "错误",
|
||||
title : "错误2",
|
||||
},
|
||||
{
|
||||
type : 'info',
|
||||
typeTitle : "信息",
|
||||
title : "信息2",
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!--
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<div class="mt-8 w-full">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 3xl:grid-cols-4">
|
||||
<div v-for="(item, index ) in shortcuts" :key="index" class="flex flex-col items-center mb-3 group ">
|
||||
<div class="w-8 h-8 rounded bg-gray-200 dark:bg-slate-500 flex items-center justify-center group-hover:bg-blue-400 cursor-pointer group-hover:text-white">
|
||||
<el-icon><Message /></el-icon>
|
||||
</div>
|
||||
<div class="text-xs mt-2 text-gray-700 dark:text-gray-300">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 mt-8">
|
||||
<div v-for="(item, index ) in recentVisits" :key="index" class="flex flex-col items-center mb-3 group">
|
||||
<div class="w-8 h-8 rounded bg-gray-200 dark:bg-slate-500 flex items-center justify-center group-hover:bg-blue-400 cursor-pointer group-hover:text-white">
|
||||
<el-icon><Message /></el-icon>
|
||||
</div>
|
||||
<div class="text-xs mt-2 text-gray-700 dark:text-gray-300">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const shortcuts = [
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接1",
|
||||
},
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接2",
|
||||
},
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接3",
|
||||
},
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接4",
|
||||
},
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接5",
|
||||
},
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接6",
|
||||
}
|
||||
]
|
||||
|
||||
const recentVisits = [
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接1",
|
||||
},
|
||||
{
|
||||
icon : "",
|
||||
title : "快捷链接2",
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!--
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="ranking" label="排名" width="80" align="center" />
|
||||
<el-table-column prop="title" label="内容标题" show-overflow-tooltip />
|
||||
<el-table-column prop="click_num" label="点击量" width="100" />
|
||||
<el-table-column prop="daily_increase" label="日涨幅" width="100" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const tableData = [
|
||||
{
|
||||
ranking: 1,
|
||||
title : "经济日报：财政政策要精准提升效能",
|
||||
click_num : 123,
|
||||
daily_increase : 0.1
|
||||
},
|
||||
{
|
||||
ranking: 2,
|
||||
title : "经济日报：财政政策要精准提升效能",
|
||||
click_num : 123,
|
||||
daily_increase : 0.1
|
||||
},
|
||||
{
|
||||
ranking: 3,
|
||||
title : "经济日报：财政政策要精准提升效能",
|
||||
click_num : 123,
|
||||
daily_increase : 0.1
|
||||
},
|
||||
{
|
||||
ranking: 4,
|
||||
title : "经济日报：财政政策要精准提升效能",
|
||||
click_num : 123,
|
||||
daily_increase : 0.1
|
||||
},
|
||||
{
|
||||
ranking: 5,
|
||||
title : "经济日报：财政政策要精准提升效能",
|
||||
click_num : 123,
|
||||
daily_increase : 0.1
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!--
|
||||
@auther: bypanghu<bypanghu@163.com>
|
||||
@date: 2024/5/8
|
||||
!-->
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<a v-for="item in wikis" :key="item.url" :href="item.url" class="text-sm text-gray-700 dark:text-gray-300 no-underline hover:text-active " target="_blank">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const wikis = [
|
||||
{
|
||||
title: 'Vue3',
|
||||
url : 'https://v3.cn.vuejs.org/guide/introduction.html'
|
||||
},
|
||||
{
|
||||
title: 'GIN 文档',
|
||||
url : 'https://gin-gonic.com/'
|
||||
},
|
||||
{
|
||||
title : "GVA 文档",
|
||||
url : 'https://www.gin-vue-admin.com/'
|
||||
},
|
||||
{
|
||||
title : "插件市场",
|
||||
url : 'https://plugin.gin-vue-admin.com/'
|
||||
},
|
||||
{
|
||||
title : "github 仓库",
|
||||
url : 'https://github.com/flipped-aurora/gin-vue-admin'
|
||||
}
|
||||
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<div class="dashboard-line-box">
|
||||
<div class="dashboard-line-title">
|
||||
访问趋势
|
||||
</div>
|
||||
<div
|
||||
ref="echart"
|
||||
class="dashboard-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { useWindowResize } from '@/hooks/use-windows-resize'
|
||||
var dataAxis = []
|
||||
for (var i = 1; i < 13; i++) {
|
||||
dataAxis.push(`${i}月`)
|
||||
}
|
||||
var data = [
|
||||
220,
|
||||
182,
|
||||
191,
|
||||
234,
|
||||
290,
|
||||
330,
|
||||
310,
|
||||
123,
|
||||
442,
|
||||
321,
|
||||
90,
|
||||
149,
|
||||
]
|
||||
var yMax = 500
|
||||
var dataShadow = []
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
dataShadow.push(yMax)
|
||||
}
|
||||
|
||||
let chart = null
|
||||
const echart = ref(null)
|
||||
|
||||
useWindowResize(() => {
|
||||
if (!chart) {
|
||||
return
|
||||
}
|
||||
chart.resize()
|
||||
})
|
||||
|
||||
const initChart = () => {
|
||||
if (chart) {
|
||||
chart = null
|
||||
}
|
||||
chart = echarts.init(echart.value)
|
||||
setOptions()
|
||||
}
|
||||
const setOptions = () => {
|
||||
chart.setOption({
|
||||
grid: {
|
||||
left: '40',
|
||||
right: '20',
|
||||
top: '40',
|
||||
bottom: '20',
|
||||
},
|
||||
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',
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: '#188df0',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: '#188df0',
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async() => {
|
||||
await nextTick()
|
||||
initChart()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (!chart) {
|
||||
return
|
||||
}
|
||||
chart.dispose()
|
||||
chart = null
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-line-box {
|
||||
.dashboard-line {
|
||||
background-color: #fff;
|
||||
height: 360px;
|
||||
width: 100%;
|
||||
}
|
||||
.dashboard-line-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<div class="commit-table">
|
||||
<div class="commit-table-title">
|
||||
更新日志
|
||||
</div>
|
||||
<div class="log">
|
||||
<div
|
||||
v-for="(item,key) in dataTimeline"
|
||||
:key="key"
|
||||
class="log-item"
|
||||
>
|
||||
<div class="flex-1 flex key-box">
|
||||
<span
|
||||
class="key"
|
||||
:class="key<3&&'top'"
|
||||
>{{ key+1 }}</span>
|
||||
</div>
|
||||
<div class="flex-5 flex message">{{ item.message }}</div>
|
||||
<div class="flex-3 flex form">{{ item.from }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Commits } from '@/api/github'
|
||||
import { formatTimeToStr } from '@/utils/date.js'
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'DashboardTable',
|
||||
})
|
||||
|
||||
const loading = ref(true)
|
||||
const dataTimeline = ref([])
|
||||
|
||||
const loadCommits = () => {
|
||||
Commits(0).then(({ data }) => {
|
||||
loading.value = false
|
||||
data.forEach((element, index) => {
|
||||
if (element.commit.message && index < 10) {
|
||||
dataTimeline.value.push({
|
||||
from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'),
|
||||
title: element.commit.author.name,
|
||||
showDayAndMonth: true,
|
||||
message: element.commit.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
loadCommits()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commit-table{
|
||||
background-color: #fff;
|
||||
height: 400px;
|
||||
&-title{
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.log{
|
||||
&-item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 14px;
|
||||
.key-box{
|
||||
justify-content: center;
|
||||
}
|
||||
.key{
|
||||
&.top{
|
||||
background: #314659;
|
||||
color: #FFFFFF;;
|
||||
}
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #F0F2F5;
|
||||
text-align: center;
|
||||
color:rgba($color: #000000, $alpha: 0.65)
|
||||
}
|
||||
.message{
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.form{
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.flex{
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.flex-1{
|
||||
flex:1;
|
||||
}
|
||||
.flex-2{
|
||||
flex:2;
|
||||
}
|
||||
.flex-3{
|
||||
flex:3;
|
||||
}
|
||||
.flex-4{
|
||||
flex:4;
|
||||
}
|
||||
.flex-5{
|
||||
flex:5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,257 +1,43 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="gva-card-box">
|
||||
<div class="gva-card gva-top-card">
|
||||
<div class="gva-top-card-left">
|
||||
<div class="gva-top-card-left-title">早安，管理员，请开始一天的工作吧</div>
|
||||
<div class="gva-top-card-left-dot">{{ weatherInfo }}</div>
|
||||
<el-row class="my-8 w-[500px]">
|
||||
<el-col
|
||||
:span="8"
|
||||
:xs="24"
|
||||
:sm="8"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<el-icon class="dashboard-icon">
|
||||
<sort />
|
||||
</el-icon>
|
||||
今日流量 (1231231)
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
:xs="24"
|
||||
:sm="8"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<el-icon class="dashboard-icon">
|
||||
<avatar />
|
||||
</el-icon>
|
||||
总用户数 (24001)
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="8"
|
||||
:xs="24"
|
||||
:sm="8"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<el-icon class="dashboard-icon">
|
||||
<comment />
|
||||
</el-icon>
|
||||
好评率 (99%)
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="gva-top-card-left-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="gva-top-card-left-item">
|
||||
插件仓库：
|
||||
<a
|
||||
style="color:#409EFF"
|
||||
target="view_window"
|
||||
href="https://plugin.gin-vue-admin.com/#/layout/home"
|
||||
>https://plugin.gin-vue-admin.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="@/assets/dashboard.png"
|
||||
class="gva-top-card-right"
|
||||
alt
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gva-card-box">
|
||||
<div class="gva-card quick-entrance">
|
||||
<div class="gva-card-title">快捷入口</div>
|
||||
<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 }"
|
||||
>
|
||||
<el-icon>
|
||||
<component
|
||||
:is="card.icon"
|
||||
:style="{ color: card.color }"
|
||||
/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<p>{{ card.label }}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gva-card-box">
|
||||
<div class="gva-card">
|
||||
<div class="gva-card-title">数据统计</div>
|
||||
<div class="p-4">
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="18"
|
||||
>
|
||||
<echarts-line />
|
||||
</el-col>
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="6"
|
||||
>
|
||||
<dashboard-table />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-7 p-2 gap-4 md:gap-2 gva-container2">
|
||||
<gva-card custom-class="col-span-1 lg:col-span-2 h-32">
|
||||
<gva-chart :type="1" title="访问人数" />
|
||||
</gva-card>
|
||||
<gva-card custom-class="col-span-1 lg:col-span-2 h-32 ">
|
||||
<gva-chart :type="2" title="新增客户" />
|
||||
</gva-card>
|
||||
<gva-card custom-class="col-span-1 lg:col-span-2 h-32">
|
||||
<gva-chart :type="3" title="解决数量" />
|
||||
</gva-card>
|
||||
<gva-card title="快捷功能" show-action custom-class="col-start-1 md:col-start-3 lg:col-start-7 row-span-2 h-38">
|
||||
<gva-quick-link />
|
||||
</gva-card>
|
||||
<gva-card title="内容数据" custom-class="col-span-1 md:col-span-2 md:row-start-2 lg:col-span-6 col-start-1 row-span-2">
|
||||
<gva-chart :type="4" />
|
||||
</gva-card>
|
||||
<gva-card without-padding custom-class="overflow-hidden h-40 md:row-start-8 md:col-start-3 lg:row-start-3 lg:col-start-7" >
|
||||
<gva-banner />
|
||||
</gva-card>
|
||||
|
||||
<gva-card title="线上热门内容" custom-class="col-span-1 md:col-span-3 row-span-2">
|
||||
<gva-table />
|
||||
</gva-card>
|
||||
<gva-card title="线上热门内容" custom-class="col-span-1 md:col-span-3 row-span-2">
|
||||
<gva-table />
|
||||
</gva-card>
|
||||
|
||||
<gva-card title="公告" show-action custom-class="col-span-1 lg:col-start-7">
|
||||
<gva-notice />
|
||||
</gva-card>
|
||||
<gva-card title="文档" show-action custom-class="col-span-1 md:col-start-2 md:col-span-1 lg:col-start-7">
|
||||
<gva-wiki />
|
||||
</gva-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EchartsLine from '@/view/dashboard/dashboardCharts/echartsLine.vue'
|
||||
import DashboardTable from '@/view/dashboard/dashboardTable/dashboardTable.vue'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useWeatherInfo } from '@/view/dashboard/weather.js'
|
||||
import SelectImage from '@/components/selectImage/selectImage.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Dashboard'
|
||||
})
|
||||
|
||||
const weatherInfo = useWeatherInfo()
|
||||
|
||||
const toolCards = ref([
|
||||
{
|
||||
label: '用户管理',
|
||||
icon: 'monitor',
|
||||
name: 'user',
|
||||
color: '#ff9c6e',
|
||||
bg: 'rgba(255, 156, 110,.3)'
|
||||
},
|
||||
{
|
||||
label: '角色管理',
|
||||
icon: 'setting',
|
||||
name: 'authority',
|
||||
color: '#69c0ff',
|
||||
bg: 'rgba(105, 192, 255,.3)'
|
||||
},
|
||||
{
|
||||
label: '菜单管理',
|
||||
icon: 'menu',
|
||||
name: 'menu',
|
||||
color: '#b37feb',
|
||||
bg: 'rgba(179, 127, 235,.3)'
|
||||
},
|
||||
{
|
||||
label: '代码生成器',
|
||||
icon: 'cpu',
|
||||
name: 'autoCode',
|
||||
color: '#ffd666',
|
||||
bg: 'rgba(255, 214, 102,.3)'
|
||||
},
|
||||
{
|
||||
label: '表单生成器',
|
||||
icon: 'document-checked',
|
||||
name: 'formCreate',
|
||||
color: '#ff85c0',
|
||||
bg: 'rgba(255, 133, 192,.3)'
|
||||
},
|
||||
{
|
||||
label: '关于我们',
|
||||
icon: 'user',
|
||||
name: 'about',
|
||||
color: '#5cdbd3',
|
||||
bg: 'rgba(92, 219, 211,.3)'
|
||||
}
|
||||
])
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const toTarget = (name) => {
|
||||
router.push({ name })
|
||||
}
|
||||
|
||||
import { GvaTable, GvaChart, GvaWiki , GvaNotice , GvaQuickLink , GvaCard , GvaBanner } from "./componenst"
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
@apply p-0;
|
||||
.gva-card-box{
|
||||
@apply p-4;
|
||||
&+.gva-card-box{
|
||||
@apply pt-0;
|
||||
}
|
||||
}
|
||||
.gva-card {
|
||||
@apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
|
||||
.gva-card-title{
|
||||
@apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
|
||||
}
|
||||
}
|
||||
.gva-top-card {
|
||||
@apply h-72 flex items-center justify-between text-gray-500;
|
||||
&-left {
|
||||
@apply h-full flex flex-col w-auto;
|
||||
&-title {
|
||||
@apply text-3xl text-gray-600;
|
||||
}
|
||||
&-dot {
|
||||
@apply mt-4 text-gray-600 text-lg;
|
||||
}
|
||||
&-item{
|
||||
+.gva-top-card-left-item{
|
||||
margin-top: 24px;
|
||||
}
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
}
|
||||
::v-deep(.el-card__header){
|
||||
@apply p-0 border-gray-200;
|
||||
}
|
||||
.card-header{
|
||||
@apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
|
||||
}
|
||||
.quick-entrance-items {
|
||||
@apply flex items-center justify-center text-center text-gray-800;
|
||||
.quick-entrance-item {
|
||||
@apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
|
||||
&:hover{
|
||||
@apply shadow-lg;
|
||||
}
|
||||
&-icon {
|
||||
@apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
|
||||
}
|
||||
p {
|
||||
@apply mt-2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-icon {
|
||||
@apply flex items-center text-xl mr-2 text-blue-400;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
|
||||
import axios from 'axios'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const weatherInfo = ref('今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。')
|
||||
const amapKey = '8e8baa8a7317586c29ec694895de6e0a'
|
||||
|
||||
export const useWeatherInfo = () => {
|
||||
ip()
|
||||
return weatherInfo
|
||||
}
|
||||
|
||||
export const ip = async() => {
|
||||
// key换成你自己的 https://console.amap.com/dev/index
|
||||
if (amapKey === '') {
|
||||
return false
|
||||
}
|
||||
const res = await axios.get('https://restapi.amap.com/v3/ip?key=' + amapKey)
|
||||
if (res.data.adcode) {
|
||||
getWeather(res.data.adcode)
|
||||
}
|
||||
}
|
||||
|
||||
const getWeather = async(code) => {
|
||||
const response = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=' + amapKey + '&extensions=base&city=' + code)
|
||||
if (response.data.status === '1') {
|
||||
const s = response.data.lives[0]
|
||||
weatherInfo.value = s.city + ' 天气：' + s.weather + ' 温度：' + s.temperature + '摄氏度 风向：' + s.winddirection + ' 风力：' + s.windpower + '级 空气湿度：' + s.humidity
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user