feat(dashborad): 完善仪表盘

.vscode/settings.json

@@ -1,20 +1,17 @@
 {
-  // 主题
+	// 缩进
-  // "workbench.colorTheme": "Atom One Light",
+	"editor.tabSize": 2,
-  // 缩进
+	// 保存eslint校验
-  "editor.tabSize": 2,
+	"editor.codeActionsOnSave": {
-  // 保存eslint校验
+		"source.fixAll.eslint": true
-  "editor.codeActionsOnSave": {
+	},
-    "source.fixAll.eslint": true
+	"eslint.format.enable": true,
-  },
+	// 校验那些文件
-  "eslint.format.enable": true,
+	"eslint.validate": ["typescript", "javascript", "vue", "html"],
-  // 校验那些文件
+	// 终端显示
-  "eslint.validate": ["typescript", "javascript", "vue", "html"],
+	"eslint.alwaysShowStatus": true,
-  "nuxt.isNuxtApp": false,
+	// 加载配置文件
-  // 终端显示
+	"eslint.options": { "configFile": ".eslintrc.js" },
-  "eslint.alwaysShowStatus": true,
+	// 保存自动格式化
-  // 加载配置文件
+	"editor.formatOnSave": true
-  "eslint.options": { "configFile": ".eslintrc.js" },
-  // 保存自动格式化
-  "editor.formatOnSave": true,
 }

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"

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-tabs
-            <n-tab-pane name="流量趋势">流量趋势</n-tab-pane>
+            type="line"
-            <n-tab-pane name="访问量趋势">访问量趋势</n-tab-pane>
+            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>
+          <template #header-extra>
-          <n-table :bordered="false" :single-line="false">
+            <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,
+		id: 0,
-    name: '商品名称1',
+		name: '商品名称1',
-    start: '2022-02-02',
+		start: '2022-02-02',
-    end: '2022-02-02',
+		end: '2022-02-02',
-    prograss: '100',
+		prograss: '100',
-    status: '已完成',
+		status: '已完成',
-  },
+	},
-  {
+	{
-    id: 0,
+		id: 0,
-    name: '商品名称2',
+		name: '商品名称2',
-    start: '2022-02-02',
+		start: '2022-02-02',
-    end: '2022-02-02',
+		end: '2022-02-02',
-    prograss: '50',
+		prograss: '50',
-    status: '交易中',
+		status: '交易中',
-  },
+	},
-  {
+	{
-    id: 0,
+		id: 0,
-    name: '商品名称3',
+		name: '商品名称3',
-    start: '2022-02-02',
+		start: '2022-02-02',
-    end: '2022-02-02',
+		end: '2022-02-02',
-    prograss: '100',
+		prograss: '100',
-    status: '已完成',
+		status: '已完成',
-  },
+	},
 ];
 </script>