refactor: 重构首页
This commit is contained in:
zclzone
parent
72857b3862
commit
4bd50e2f9e
@ -37,12 +37,14 @@
|
||||
"@wangeditor/editor-for-vue": "5.1.12",
|
||||
"axios": "^1.5.0",
|
||||
"dayjs": "^1.11.9",
|
||||
"echarts": "^5.4.3",
|
||||
"lodash-es": "^4.17.21",
|
||||
"md-editor-v3": "^4.4.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.1.6",
|
||||
"vite": "^4.4.9",
|
||||
"vue": "3.3.4",
|
||||
"vue-echarts": "^6.6.1",
|
||||
"vue-router": "^4.2.4",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
|
||||
2571
pnpm-lock.yaml
generated
2571
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,45 +1,59 @@
|
||||
<template>
|
||||
<AppPage :show-footer="true">
|
||||
<div flex-1>
|
||||
<n-card rounded-10>
|
||||
<div flex items-center>
|
||||
<img rounded-full width="60" :src="userStore.avatar" />
|
||||
<div ml-20>
|
||||
<p text-16>Hello, {{ userStore.name }}</p>
|
||||
<p mt-5 text-12 op-60>今天又是元气满满的一天</p>
|
||||
</div>
|
||||
<div ml-auto flex items-center>
|
||||
<n-statistic label="待办" :value="4">
|
||||
<template #suffix>/ 10</template>
|
||||
</n-statistic>
|
||||
<n-statistic label="Stars" ml-80 w-100>
|
||||
<a href="https://github.com/zclzone/vue-naive-admin">
|
||||
<img alt="stars" src="https://badgen.net/github/stars/zclzone/vue-naive-admin" />
|
||||
</a>
|
||||
</n-statistic>
|
||||
<n-statistic label="Forks" ml-80 w-100>
|
||||
<a href="https://github.com/zclzone/vue-naive-admin">
|
||||
<img alt="forks" src="https://badgen.net/github/forks/zclzone/vue-naive-admin" />
|
||||
</a>
|
||||
</n-statistic>
|
||||
<div class="flex">
|
||||
<n-card class="w-30%">
|
||||
<div class="flex items-center">
|
||||
<n-avatar round :size="60" :src="userStore.avatar" />
|
||||
<div class="ml-20 flex-col">
|
||||
<span class="text-20 opacity-80">Hello, {{ userStore.name }}</span>
|
||||
<span class="mt-4 opacity-50">今日事，今日毕。</span>
|
||||
</div>
|
||||
</div>
|
||||
</n-card>
|
||||
|
||||
<n-card title="项目" size="small" :segmented="true" mt-15 rounded-10>
|
||||
<p class="mt-20 text-14 opacity-60">一个人几乎可以在任何他怀有无限热忱的事情上成功。</p>
|
||||
<p class="mt-12 text-right text-12 opacity-40">—— 查尔斯·史考伯</p>
|
||||
</n-card>
|
||||
<n-card class="ml-12 w-70%">
|
||||
<h3 class="text-20 font-normal opacity-90">⚡️欢迎使用 Vue Naive Admin</h3>
|
||||
<p class="mt-8 opacity-60">
|
||||
这是一款基于 Vue3 + Vite + Pinia + Unocss + Naive UI 的轻量级后台管理模板。！！
|
||||
</p>
|
||||
<footer class="mt-24 flex items-center justify-end">
|
||||
<n-button
|
||||
tag="a"
|
||||
href="https://zclzone.github.io/vue-naive-admin-docs"
|
||||
target="_blank"
|
||||
type="primary"
|
||||
ghost
|
||||
>
|
||||
开发文档
|
||||
</n-button>
|
||||
<n-button
|
||||
tag="a"
|
||||
href="https://github.com/zclzone/vue-naive-admin"
|
||||
target="_blank"
|
||||
type="primary"
|
||||
class="ml-12"
|
||||
>
|
||||
代码仓库
|
||||
</n-button>
|
||||
</footer>
|
||||
</n-card>
|
||||
</div>
|
||||
<div class="mt-12 flex">
|
||||
<n-card title="项目" segmented>
|
||||
<template #header-extra>
|
||||
<n-button text type="primary">更多</n-button>
|
||||
</template>
|
||||
<div flex flex-wrap justify-between>
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<n-card
|
||||
v-for="i in 10"
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
class="mb-10 mt-10 w-300 flex-shrink-0 cursor-pointer"
|
||||
hover:card-shadow
|
||||
title="Vue Naive Admin"
|
||||
size="small"
|
||||
class="my-6 w-320 flex-shrink-0 cursor-pointer hover:card-shadow"
|
||||
title="Vue Naive Admin"
|
||||
>
|
||||
<p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
|
||||
<p class="op-60">一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
|
||||
</n-card>
|
||||
<div h-0 w-300></div>
|
||||
<div h-0 w-300></div>
|
||||
@ -47,12 +61,131 @@
|
||||
<div h-0 w-300></div>
|
||||
</div>
|
||||
</n-card>
|
||||
|
||||
<n-card class="ml-12" title="技术栈" segmented>
|
||||
<VChart :option="skillsOption" class="wh-full" autoresize />
|
||||
</n-card>
|
||||
</div>
|
||||
|
||||
<n-card class="mt-12" title="趋势" segmented>
|
||||
<VChart :option="trendOption" class="h-480 w-full" autoresize />
|
||||
</n-card>
|
||||
</AppPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useUserStore } from '@/store'
|
||||
import * as echarts from 'echarts/core'
|
||||
import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
|
||||
import { BarChart, LineChart, PieChart } from 'echarts/charts'
|
||||
import { UniversalTransition } from 'echarts/features'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import VChart from 'vue-echarts'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
echarts.use([
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
BarChart,
|
||||
LineChart,
|
||||
CanvasRenderer,
|
||||
UniversalTransition,
|
||||
PieChart,
|
||||
])
|
||||
|
||||
const trendOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
data: ['star', 'fork'],
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 3000,
|
||||
interval: 500,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'star',
|
||||
type: 'line',
|
||||
data: [200, 320, 520, 550, 600, 805, 888, 950, 1300, 2503, 2702, 2712],
|
||||
},
|
||||
{
|
||||
name: 'fork',
|
||||
yAxisIndex: 1,
|
||||
type: 'bar',
|
||||
data: [40, 72, 110, 115, 121, 175, 180, 201, 260, 398, 423, 455],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const skillsOption = {
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
top: '5%',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter(param) {
|
||||
return param.name + ' (' + param.percent + '%)'
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 38.5, name: 'Vue' },
|
||||
{ value: 37.0, name: 'JavaScript' },
|
||||
{ value: 6.5, name: 'CSS' },
|
||||
{ value: 6.2, name: 'HTML' },
|
||||
{ value: 1.8, name: 'Other' },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user