mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 19:41:59 +08:00
feat(dashborad): 完善仪表盘
This commit is contained in:
Coffee-crocodile
parent
9eff695622
commit
264cc119cb
33
.vscode/settings.json
vendored
33
.vscode/settings.json
vendored
@ -1,20 +1,17 @@
|
||||
{
|
||||
// 主题
|
||||
// "workbench.colorTheme": "Atom One Light",
|
||||
// 缩进
|
||||
"editor.tabSize": 2,
|
||||
// 保存eslint校验
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"eslint.format.enable": true,
|
||||
// 校验那些文件
|
||||
"eslint.validate": ["typescript", "javascript", "vue", "html"],
|
||||
"nuxt.isNuxtApp": false,
|
||||
// 终端显示
|
||||
"eslint.alwaysShowStatus": true,
|
||||
// 加载配置文件
|
||||
"eslint.options": { "configFile": ".eslintrc.js" },
|
||||
// 保存自动格式化
|
||||
"editor.formatOnSave": true,
|
||||
// 缩进
|
||||
"editor.tabSize": 2,
|
||||
// 保存eslint校验
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true
|
||||
},
|
||||
"eslint.format.enable": true,
|
||||
// 校验那些文件
|
||||
"eslint.validate": ["typescript", "javascript", "vue", "html"],
|
||||
// 终端显示
|
||||
"eslint.alwaysShowStatus": true,
|
||||
// 加载配置文件
|
||||
"eslint.options": { "configFile": ".eslintrc.js" },
|
||||
// 保存自动格式化
|
||||
"editor.formatOnSave": true
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
"dev:prod": "cross-env VITE_SERVICE_ENV=prod vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.json --fix",
|
||||
"lint": "eslint . --fix",
|
||||
"prepare": "husky install",
|
||||
"commit": "cz",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
|
||||
|
||||
@ -1,83 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-grid :x-gap="16" :y-gap="16">
|
||||
<n-grid
|
||||
:x-gap="16"
|
||||
:y-gap="16"
|
||||
>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-space
|
||||
justify="space-between"
|
||||
align="center"
|
||||
>
|
||||
<n-statistic label="访问量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
<n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="12039"
|
||||
show-separator
|
||||
/>
|
||||
</n-statistic>
|
||||
<n-icon color="#de4307" size="42">
|
||||
<n-icon
|
||||
color="#de4307"
|
||||
size="42"
|
||||
>
|
||||
<i-icon-park-outline-chart-histogram />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计访问数</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
<span><n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="322039"
|
||||
show-separator
|
||||
/></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-space
|
||||
justify="space-between"
|
||||
align="center"
|
||||
>
|
||||
<n-statistic label="下载量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
<n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="12039"
|
||||
show-separator
|
||||
/>
|
||||
</n-statistic>
|
||||
<n-icon color="#ffb549" size="42">
|
||||
<n-icon
|
||||
color="#ffb549"
|
||||
size="42"
|
||||
>
|
||||
<i-icon-park-outline-chart-graph />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计下载量</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
<span><n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="322039"
|
||||
show-separator
|
||||
/></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-space
|
||||
justify="space-between"
|
||||
align="center"
|
||||
>
|
||||
<n-statistic label="浏览量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
<n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="12039"
|
||||
show-separator
|
||||
/>
|
||||
</n-statistic>
|
||||
<n-icon color="#1687a7" size="42">
|
||||
<n-icon
|
||||
color="#1687a7"
|
||||
size="42"
|
||||
>
|
||||
<i-icon-park-outline-average />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计浏览量</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
<span><n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="322039"
|
||||
show-separator
|
||||
/></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="6">
|
||||
<n-card>
|
||||
<n-space justify="space-between" align="center">
|
||||
<n-space
|
||||
justify="space-between"
|
||||
align="center"
|
||||
>
|
||||
<n-statistic label="注册量">
|
||||
<n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
|
||||
<n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="12039"
|
||||
show-separator
|
||||
/>
|
||||
</n-statistic>
|
||||
<n-icon color="#42218E" size="42">
|
||||
<n-icon
|
||||
color="#42218E"
|
||||
size="42"
|
||||
>
|
||||
<i-icon-park-outline-chart-pie />
|
||||
</n-icon>
|
||||
</n-space>
|
||||
<template #footer>
|
||||
<n-space justify="space-between">
|
||||
<span>累计注册量</span>
|
||||
<span><n-number-animation ref="numberAnimationInstRef" :from="0" :to="322039" show-separator /></span>
|
||||
<span><n-number-animation
|
||||
ref="numberAnimationInstRef"
|
||||
:from="0"
|
||||
:to="322039"
|
||||
show-separator
|
||||
/></span>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
<n-gi :span="24">
|
||||
<n-card content-style="padding: 0;">
|
||||
<n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;">
|
||||
<n-tab-pane name="流量趋势">流量趋势</n-tab-pane>
|
||||
<n-tab-pane name="访问量趋势">访问量趋势</n-tab-pane>
|
||||
<n-tabs
|
||||
type="line"
|
||||
size="large"
|
||||
:tabs-padding="20"
|
||||
pane-style="padding: 20px;"
|
||||
>
|
||||
<n-tab-pane name="流量趋势">
|
||||
流量趋势
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="访问量趋势">
|
||||
访问量趋势
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
@ -98,8 +174,18 @@
|
||||
content: true,
|
||||
}"
|
||||
>
|
||||
<template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
|
||||
<n-table :bordered="false" :single-line="false">
|
||||
<template #header-extra>
|
||||
<n-button
|
||||
type="primary"
|
||||
quaternary
|
||||
>
|
||||
更多
|
||||
</n-button>
|
||||
</template>
|
||||
<n-table
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>交易名称</th>
|
||||
@ -110,13 +196,19 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in tableData" :key="item.id">
|
||||
<tr
|
||||
v-for="item in tableData"
|
||||
:key="item.id"
|
||||
>
|
||||
<td>{{ item.name }}</td>
|
||||
<td>{{ item.start }}</td>
|
||||
<td>{{ item.end }}</td>
|
||||
<td>{{ item.prograss }}%</td>
|
||||
<td>
|
||||
<n-tag :bordered="false" type="info">
|
||||
<n-tag
|
||||
:bordered="false"
|
||||
type="info"
|
||||
>
|
||||
{{ item.status }}
|
||||
</n-tag>
|
||||
</td>
|
||||
@ -131,30 +223,30 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
const tableData = [
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称1',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '100',
|
||||
status: '已完成',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称2',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '50',
|
||||
status: '交易中',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称3',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '100',
|
||||
status: '已完成',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称1',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '100',
|
||||
status: '已完成',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称2',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '50',
|
||||
status: '交易中',
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
name: '商品名称3',
|
||||
start: '2022-02-02',
|
||||
end: '2022-02-02',
|
||||
prograss: '100',
|
||||
status: '已完成',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user