mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-05-23 18:09:17 +08:00
style(workbench): perfect style
This commit is contained in:
chansee97
parent
c5b893ad95
commit
6ff682798a
@ -7,7 +7,7 @@ const router = useRouter()
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex-col-center">
|
<div class="flex-col-center h-full">
|
||||||
<img
|
<img
|
||||||
v-if="type === '403'"
|
v-if="type === '403'"
|
||||||
src="@/assets/svg/error-403.svg"
|
src="@/assets/svg/error-403.svg"
|
||||||
|
|||||||
@ -5,8 +5,7 @@ import lib from '@/../package.json'
|
|||||||
<template>
|
<template>
|
||||||
<n-space vertical>
|
<n-space vertical>
|
||||||
<n-card title="关于">
|
<n-card title="关于">
|
||||||
Nova-admin是一款基于Vue3+vite+TypeScript+Navie
|
Nova-admin是一款基于Vue3+vite+TypeScript+NavieUI的后台管理模板，力求使用简约的代码实现完备功能，降低学习门槛和维护成本，让大家能早点下班做自己的事情
|
||||||
UI的后台管理模板，力求使用简约的代码实现完备功能，降低学习门槛和维护成本，让大家能早点下班做自己的事情
|
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card title="信息">
|
<n-card title="信息">
|
||||||
<n-descriptions
|
<n-descriptions
|
||||||
@ -25,6 +24,17 @@ import lib from '@/../package.json'
|
|||||||
Github
|
Github
|
||||||
</n-button>
|
</n-button>
|
||||||
</n-descriptions-item>
|
</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-descriptions-item label="预览地址">
|
||||||
<n-button
|
<n-button
|
||||||
text
|
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">
|
<script setup lang="ts">
|
||||||
|
import Chart from './components/chart.vue'
|
||||||
import { useAuthStore } from '@/store'
|
import { useAuthStore } from '@/store'
|
||||||
|
|
||||||
const { userInfo } = useAuthStore()
|
const { userInfo } = useAuthStore()
|
||||||
@ -9,144 +10,89 @@ const { userInfo } = useAuthStore()
|
|||||||
:x-gap="16"
|
:x-gap="16"
|
||||||
:y-gap="16"
|
:y-gap="16"
|
||||||
>
|
>
|
||||||
<n-gi :span="24">
|
<n-gi :span="16">
|
||||||
<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-space
|
<n-space
|
||||||
vertical
|
vertical
|
||||||
:size="16"
|
:size="16"
|
||||||
>
|
>
|
||||||
<n-card title="项目">
|
<n-card style="--n-padding-left: 0;">
|
||||||
<template #header-extra>
|
<Chart />
|
||||||
<n-button
|
</n-card>
|
||||||
type="primary"
|
<n-card>
|
||||||
quaternary
|
|
||||||
>
|
|
||||||
更多
|
|
||||||
</n-button>
|
|
||||||
</template>
|
|
||||||
<n-grid
|
<n-grid
|
||||||
:x-gap="8"
|
:x-gap="8"
|
||||||
:y-gap="8"
|
:y-gap="8"
|
||||||
>
|
>
|
||||||
<n-gi :span="8">
|
<n-gi :span="6">
|
||||||
<n-card
|
<n-card>
|
||||||
title="卡片"
|
<n-thing>
|
||||||
hoverable
|
<template #avatar>
|
||||||
>
|
<n-el>
|
||||||
卡片内容
|
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||||
<template #action>
|
<e-icon :size="26" icon="icon-park-outline:user" />
|
||||||
#action
|
</n-icon-wrapper>
|
||||||
</template>
|
</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-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="6">
|
||||||
<n-card
|
<n-card>
|
||||||
title="卡片"
|
<n-thing>
|
||||||
hoverable
|
<template #avatar>
|
||||||
>
|
<n-el>
|
||||||
卡片内容
|
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||||
<template #action>
|
<e-icon :size="26" icon="icon-park-outline:every-user" />
|
||||||
#action
|
</n-icon-wrapper>
|
||||||
</template>
|
</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-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="6">
|
||||||
<n-card
|
<n-card>
|
||||||
title="卡片"
|
<n-thing>
|
||||||
hoverable
|
<template #avatar>
|
||||||
>
|
<n-el>
|
||||||
卡片内容
|
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||||
<template #action>
|
<e-icon :size="26" icon="icon-park-outline:preview-open" />
|
||||||
#action
|
</n-icon-wrapper>
|
||||||
</template>
|
</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-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="8">
|
<n-gi :span="6">
|
||||||
<n-card
|
<n-card>
|
||||||
title="卡片"
|
<n-thing>
|
||||||
hoverable
|
<template #avatar>
|
||||||
>
|
<n-el>
|
||||||
卡片内容
|
<n-icon-wrapper :size="46" color="var(--success-color)" :border-radius="999">
|
||||||
<template #action>
|
<e-icon :size="26" icon="icon-park-outline:star" />
|
||||||
#action
|
</n-icon-wrapper>
|
||||||
</template>
|
</n-el>
|
||||||
</n-card>
|
</template>
|
||||||
</n-gi>
|
<template #header>
|
||||||
<n-gi :span="8">
|
<n-statistic label="收藏数">
|
||||||
<n-card
|
<n-number-animation show-separator :from="0" :to="7739" />
|
||||||
title="卡片"
|
</n-statistic>
|
||||||
hoverable
|
</template>
|
||||||
>
|
</n-thing>
|
||||||
卡片内容
|
|
||||||
<template #action>
|
|
||||||
#action
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</n-gi>
|
|
||||||
<n-gi :span="8">
|
|
||||||
<n-card
|
|
||||||
title="卡片"
|
|
||||||
hoverable
|
|
||||||
>
|
|
||||||
卡片内容
|
|
||||||
<template #action>
|
|
||||||
#action
|
|
||||||
</template>
|
|
||||||
</n-card>
|
</n-card>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
@ -221,7 +167,7 @@ const { userInfo } = useAuthStore()
|
|||||||
</n-card>
|
</n-card>
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-gi>
|
</n-gi>
|
||||||
<n-gi :span="7">
|
<n-gi :span="8">
|
||||||
<n-space
|
<n-space
|
||||||
vertical
|
vertical
|
||||||
:size="16"
|
:size="16"
|
||||||
@ -280,61 +226,43 @@ const { userInfo } = useAuthStore()
|
|||||||
</n-list-item>
|
</n-list-item>
|
||||||
</n-list>
|
</n-list>
|
||||||
</n-card>
|
</n-card>
|
||||||
<n-card title="快捷入口">
|
<n-grid
|
||||||
<n-grid
|
:x-gap="8"
|
||||||
:x-gap="8"
|
:y-gap="8"
|
||||||
:y-gap="8"
|
>
|
||||||
>
|
<n-gi :span="12">
|
||||||
<n-gi :span="8">
|
<n-card>
|
||||||
<n-card
|
<n-flex vertical align="center">
|
||||||
title="卡片"
|
<n-text depth="3">
|
||||||
hoverable
|
订单数
|
||||||
>
|
</n-text>
|
||||||
卡片内容
|
<n-icon-wrapper :size="46" :border-radius="999">
|
||||||
</n-card>
|
<e-icon :size="26" icon="icon-park-outline:all-application" />
|
||||||
</n-gi>
|
</n-icon-wrapper>
|
||||||
<n-gi :span="8">
|
<n-text strong class="text-2xl">
|
||||||
<n-card
|
1,234,123
|
||||||
title="卡片"
|
</n-text>
|
||||||
hoverable
|
</n-flex>
|
||||||
>
|
</n-card>
|
||||||
卡片内容
|
</n-gi>
|
||||||
</n-card>
|
<n-gi :span="12">
|
||||||
</n-gi>
|
<n-card>
|
||||||
<n-gi :span="8">
|
<n-flex vertical align="center">
|
||||||
<n-card
|
<n-text depth="3">
|
||||||
title="卡片"
|
待办
|
||||||
hoverable
|
</n-text>
|
||||||
>
|
<n-el>
|
||||||
卡片内容
|
<n-icon-wrapper :size="46" color="var(--warning-color)" :border-radius="999">
|
||||||
</n-card>
|
<e-icon :size="26" icon="icon-park-outline:list-bottom" />
|
||||||
</n-gi>
|
</n-icon-wrapper>
|
||||||
<n-gi :span="8">
|
</n-el>
|
||||||
<n-card
|
<n-text strong class="text-2xl">
|
||||||
title="卡片"
|
78
|
||||||
hoverable
|
</n-text>
|
||||||
>
|
</n-flex>
|
||||||
卡片内容
|
</n-card>
|
||||||
</n-card>
|
</n-gi>
|
||||||
</n-gi>
|
</n-grid>
|
||||||
<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-card title="任务进度">
|
<n-card title="任务进度">
|
||||||
<n-timeline>
|
<n-timeline>
|
||||||
<n-timeline-item content="啊" />
|
<n-timeline-item content="啊" />
|
||||||
|
|||||||
@ -21,17 +21,10 @@ const rules = {
|
|||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
message: '请输入密码',
|
message: '请输入密码',
|
||||||
},
|
},
|
||||||
code: {
|
|
||||||
required: true,
|
|
||||||
trigger: 'blur',
|
|
||||||
min: 4,
|
|
||||||
message: '最短长度为 4',
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
const formValue = ref({
|
const formValue = ref({
|
||||||
account: 'super',
|
account: 'super',
|
||||||
pwd: '123456',
|
pwd: '123456',
|
||||||
code: '1234',
|
|
||||||
})
|
})
|
||||||
const isRemember = ref(false)
|
const isRemember = ref(false)
|
||||||
const isLoading = ref(false)
|
const isLoading = ref(false)
|
||||||
@ -83,12 +76,6 @@ checkUserAccount()
|
|||||||
</template>
|
</template>
|
||||||
</n-input>
|
</n-input>
|
||||||
</n-form-item>
|
</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">
|
<n-space vertical :size="20">
|
||||||
<div class="flex-y-center justify-between">
|
<div class="flex-y-center justify-between">
|
||||||
<n-checkbox v-model:checked="isRemember">
|
<n-checkbox v-model:checked="isRemember">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user