From 264cc119cb4354d298ad230f7f9b4f074aff675e Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Mon, 9 Jan 2023 18:07:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(dashborad):=20=E5=AE=8C=E5=96=84=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                 |  33 ++---
 package.json                          |   2 +-
 src/views/dashboard/monitor/index.vue | 188 +++++++++++++++++++-------
 3 files changed, 156 insertions(+), 67 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6ecbf36..06e2085 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -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
 }
diff --git a/package.json b/package.json
index 142e161..65531d8 100644
--- a/package.json
+++ b/package.json
@@ -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"
diff --git a/src/views/dashboard/monitor/index.vue b/src/views/dashboard/monitor/index.vue
index 07a1eac..4b0a13a 100644
--- a/src/views/dashboard/monitor/index.vue
+++ b/src/views/dashboard/monitor/index.vue
@@ -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>