mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-05-22 01:15:42 +08:00
style(workbench): perfect style
This commit is contained in:
chansee97
parent
c5b893ad95
commit
6ff682798a
@ -7,7 +7,7 @@ const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-col-center">
|
||||
<div class="flex-col-center h-full">
|
||||
<img
|
||||
v-if="type === '403'"
|
||||
src="@/assets/svg/error-403.svg"
|
||||
|
||||
@ -5,8 +5,7 @@ import lib from '@/../package.json'
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-card title="关于">
|
||||
Nova-admin是一款基于Vue3+vite+TypeScript+Navie
|
||||
UI的后台管理模板，力求使用简约的代码实现完备功能，降低学习门槛和维护成本，让大家能早点下班做自己的事情
|
||||
Nova-admin是一款基于Vue3+vite+TypeScript+NavieUI的后台管理模板，力求使用简约的代码实现完备功能，降低学习门槛和维护成本，让大家能早点下班做自己的事情
|
||||
</n-card>
|
||||
<n-card title="信息">
|
||||
<n-descriptions
|
||||
@ -25,6 +24,17 @@ import lib from '@/../package.json'
|
||||
Github
|
||||
</n-button>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="Github">
|
||||
<n-button
|
||||
text
|
||||
tag="a"
|
||||
href="https://gitee.com/chansee97/nova-admin"
|
||||
target="_blank"
|
||||
type="primary"
|
||||
>
|
||||
Gitee
|
||||
</n-button>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="预览地址">
|
||||
<n-button
|
||||
text
|
||||
|
||||
114
src/views/dashboard/workbench/components/chart.vue
Normal file
114
src/views/dashboard/workbench/components/chart.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<script setup lang="ts">
|
||||
import { type ECOption, useEcharts } from '@/hooks'
|
||||
// 折线图
|
||||
const lineOptions = ref<ECOption>({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '0%',
|
||||
top: '0%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: '#37a2da',
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
stack: 'Total',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0.25,
|
||||
color: '#37a2da',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#fff',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
color: '#9fe6b8',
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
stack: 'Total',
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0.25,
|
||||
color: '#9fe6b8',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#fff',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
],
|
||||
}) as Ref<ECOption>
|
||||
const { domRef: lineRef } = useEcharts(lineOptions)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="lineRef"
|
||||
class="h-400px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import Chart from './components/chart.vue'
|
||||
import { useAuthStore } from '@/store'
|
||||
|
||||
const { userInfo } = useAuthStore()
|
||||
@ -9,144 +10,89 @@ const { userInfo } = useAuthStore()
|
||||
:x-gap="16"
|
||||
:y-gap="16"
|
||||
>
|
||||
<n-gi :span="24">
|
||||
<n-card>
|
||||
<n-space justify="space-between">
|
||||
<div class="flex-y-center">
|
||||
<n-avatar
|
||||
round
|
||||
:size="64"
|
||||
:src="userInfo?.avatar"
|
||||
/>
|
||||
<div class="pl-12px">
|
||||
<h3 class="text-18px font-semibold">
|
||||
您好，{{ userInfo?.nickname }},今天又是充满活力的一天！
|
||||
</h3>
|
||||
<p class="leading-30px text-[#999]">
|
||||
今日多云转晴，20℃ - 25℃！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<n-row class="w-450px">
|
||||
<n-col :span="10">
|
||||
<n-statistic
|
||||
label="统计数据"
|
||||
:value="99"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-icon-park-outline-chart-histogram />
|
||||
</template>
|
||||
<template #suffix>
|
||||
/ 100
|
||||
</template>
|
||||
</n-statistic>
|
||||
</n-col>
|
||||
<n-col :span="10">
|
||||
<n-statistic
|
||||
label="活跃用户"
|
||||
value="34,123"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-icon-park-outline-customer />
|
||||
</template>
|
||||
</n-statistic>
|
||||
</n-col>
|
||||
<n-col :span="4">
|
||||
<n-statistic
|
||||
label="待办"
|
||||
:value="18"
|
||||
>
|
||||
<template #prefix>
|
||||
<i-icon-park-outline-list-checkbox />
|
||||
</template>
|
||||
</n-statistic>
|
||||
</n-col>
|
||||
</n-row>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="17">
|
||||
<n-gi :span="16">
|
||||
<n-space
|
||||
vertical
|
||||
:size="16"
|
||||
>
|
||||
<n-card title="项目">
|
||||
<template #header-extra>
|
||||
<n-button
|
||||
type="primary"
|
||||
quaternary
|
||||
>
|
||||
更多
|
||||
</n-button>
|
||||
</template>
|
||||
<n-card style="--n-padding-left: 0;">
|
||||
<Chart />
|
||||
</n-card>
|
||||
<n-card>
|
||||
<n-grid
|
||||
:x-gap="8"
|
||||
:y-gap="8"
|
||||
>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-thing>
|
||||
<template #avatar>
|
||||
<n-el>
|
||||
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||
<e-icon :size="26" icon="icon-park-outline:user" />
|
||||
</n-icon-wrapper>
|
||||
</n-el>
|
||||
</template>
|
||||
<template #header>
|
||||
<n-statistic label="活跃用户">
|
||||
<n-number-animation show-separator :from="0" :to="12039" />
|
||||
</n-statistic>
|
||||
</template>
|
||||
</n-thing>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-thing>
|
||||
<template #avatar>
|
||||
<n-el>
|
||||
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||
<e-icon :size="26" icon="icon-park-outline:every-user" />
|
||||
</n-icon-wrapper>
|
||||
</n-el>
|
||||
</template>
|
||||
<template #header>
|
||||
<n-statistic label="用户">
|
||||
<n-number-animation show-separator :from="0" :to="44039" />
|
||||
</n-statistic>
|
||||
</template>
|
||||
</n-thing>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-thing>
|
||||
<template #avatar>
|
||||
<n-el>
|
||||
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||
<e-icon :size="26" icon="icon-park-outline:preview-open" />
|
||||
</n-icon-wrapper>
|
||||
</n-el>
|
||||
</template>
|
||||
<template #header>
|
||||
<n-statistic label="浏览量">
|
||||
<n-number-animation show-separator :from="0" :to="551039" />
|
||||
</n-statistic>
|
||||
</template>
|
||||
</n-thing>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-thing>
|
||||
<template #avatar>
|
||||
<n-el>
|
||||
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||
<e-icon :size="26" icon="icon-park-outline:star" />
|
||||
</n-icon-wrapper>
|
||||
</n-el>
|
||||
</template>
|
||||
<template #header>
|
||||
<n-statistic label="收藏数">
|
||||
<n-number-animation show-separator :from="0" :to="7739" />
|
||||
</n-statistic>
|
||||
</template>
|
||||
</n-thing>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
@ -221,7 +167,7 @@ const { userInfo } = useAuthStore()
|
||||
</n-card>
|
||||
</n-space>
|
||||
</n-gi>
|
||||
<n-gi :span="7">
|
||||
<n-gi :span="8">
|
||||
<n-space
|
||||
vertical
|
||||
:size="16"
|
||||
@ -280,61 +226,43 @@ const { userInfo } = useAuthStore()
|
||||
</n-list-item>
|
||||
</n-list>
|
||||
</n-card>
|
||||
<n-card title="快捷入口">
|
||||
<n-grid
|
||||
:x-gap="8"
|
||||
:y-gap="8"
|
||||
>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="8">
|
||||
<n-card
|
||||
title="卡片"
|
||||
hoverable
|
||||
>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</n-card>
|
||||
<n-grid
|
||||
:x-gap="8"
|
||||
:y-gap="8"
|
||||
>
|
||||
<n-gi :span="12">
|
||||
<n-card>
|
||||
<n-flex vertical align="center">
|
||||
<n-text depth="3">
|
||||
订单数
|
||||
</n-text>
|
||||
<n-icon-wrapper :size="46" :border-radius="999">
|
||||
<e-icon :size="26" icon="icon-park-outline:all-application" />
|
||||
</n-icon-wrapper>
|
||||
<n-text strong class="text-2xl">
|
||||
1,234,123
|
||||
</n-text>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="12">
|
||||
<n-card>
|
||||
<n-flex vertical align="center">
|
||||
<n-text depth="3">
|
||||
待办
|
||||
</n-text>
|
||||
<n-el>
|
||||
<n-icon-wrapper :size="46" color="var(--warning-color)" :border-radius="999">
|
||||
<e-icon :size="26" icon="icon-park-outline:list-bottom" />
|
||||
</n-icon-wrapper>
|
||||
</n-el>
|
||||
<n-text strong class="text-2xl">
|
||||
78
|
||||
</n-text>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
<n-card title="任务进度">
|
||||
<n-timeline>
|
||||
<n-timeline-item content="啊" />
|
||||
|
||||
@ -21,17 +21,10 @@ const rules = {
|
||||
trigger: 'blur',
|
||||
message: '请输入密码',
|
||||
},
|
||||
code: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
min: 4,
|
||||
message: '最短长度为 4',
|
||||
},
|
||||
}
|
||||
const formValue = ref({
|
||||
account: 'super',
|
||||
pwd: '123456',
|
||||
code: '1234',
|
||||
})
|
||||
const isRemember = ref(false)
|
||||
const isLoading = ref(false)
|
||||
@ -83,12 +76,6 @@ checkUserAccount()
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<n-form-item path="code">
|
||||
<n-space align="center">
|
||||
<n-input v-model:value="formValue.code" clearable placeholder="输入验证码" :maxlength="4" />
|
||||
<div>验证码</div>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
<n-space vertical :size="20">
|
||||
<div class="flex-y-center justify-between">
|
||||
<n-checkbox v-model:checked="isRemember">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user