From debedb6224e37c00517fb47a1724a334b57b408a Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Fri, 30 Sep 2022 16:09:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E5=AE=8C=E5=96=84=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E9=A1=B5=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/module/user.ts                   |  14 +--
 src/components/custom/EIcon.vue       |   2 +-
 src/layouts/BasicLayout/index.vue     |  21 +++-
 src/views/dashboard/monitor/index.vue | 158 +++++++++++++++++++++++++-
 src/views/test/test2/detail/index.vue |   2 +-
 src/views/test/test2/index.vue        |  10 +-
 src/views/test/test3/index.vue        |  11 +-
 7 files changed, 190 insertions(+), 28 deletions(-)

diff --git a/mock/module/user.ts b/mock/module/user.ts
index 27c8bb0..4c4da44 100644
--- a/mock/module/user.ts
+++ b/mock/module/user.ts
@@ -19,7 +19,7 @@ const userRoutes = [
     path: '/dashboard',
     redirect: '/dashboard/workbench',
     meta: {
-      title: '分析页',
+      title: '仪表盘',
       requiresAuth: true,
       icon: 'icon-park-outline:analysis',
     },
@@ -49,7 +49,7 @@ const userRoutes = [
     path: '/test',
     redirect: '/test/test1',
     meta: {
-      title: '测试专题',
+      title: '多级菜单演示',
       requiresAuth: true,
       icon: 'icon-park-outline:ambulance',
     },
@@ -58,7 +58,7 @@ const userRoutes = [
         name: 'test1',
         path: '/test/test1',
         meta: {
-          title: '测试专题1',
+          title: '多级菜单1',
           requiresAuth: true,
           icon: 'icon-park-outline:alarm',
         },
@@ -67,7 +67,7 @@ const userRoutes = [
         name: 'test2',
         path: '/test/test2',
         meta: {
-          title: '测试专题2',
+          title: '多级菜单2',
           requiresAuth: true,
           icon: 'icon-park-outline:pic',
         },
@@ -76,7 +76,7 @@ const userRoutes = [
             name: 'test2_detail',
             path: '/test/test2/detail',
             meta: {
-              title: '测试专题2的详情页',
+              title: '多级菜单2的详情页',
               requiresAuth: true,
               icon: 'icon-park-outline:tool',
               hide: true,
@@ -89,7 +89,7 @@ const userRoutes = [
         name: 'test3',
         path: '/test/test3',
         meta: {
-          title: '测试专题3',
+          title: '多级菜单3',
           requiresAuth: true,
           icon: 'icon-park-outline:tool',
         },
@@ -98,7 +98,7 @@ const userRoutes = [
             name: 'test4',
             path: '/test/test3/test4',
             meta: {
-              title: '测试专题4',
+              title: '多级菜单3-1',
               requiresAuth: true,
               icon: 'icon-park-outline:tool',
             },
diff --git a/src/components/custom/EIcon.vue b/src/components/custom/EIcon.vue
index 573b47e..119bf00 100644
--- a/src/components/custom/EIcon.vue
+++ b/src/components/custom/EIcon.vue
@@ -8,7 +8,7 @@
 import { Icon } from '@iconify/vue';
 const props = withDefaults(
   defineProps<{
-    icon: string;
+    icon?: string;
     color?: string;
     size?: number;
     depth?: 1 | 2 | 3 | 4 | 5;
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 9450fd5..f2c60c1 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -36,22 +36,31 @@
         </div>
       </n-layout-header>
       <n-layout-header
+        v-if="appStore.showTabs"
         :position="appStore.fixedHeader ? 'absolute' : 'static'"
         class="z-1"
-        :class="{ 'm-t-60px': appStore.fixedHeader }"
+        :class="{ 'm-t-61px': appStore.fixedHeader }"
       >
-        <TabBar v-if="appStore.showTabs" class="h-45px" />
+        <TabBar class="h-45px" />
       </n-layout-header>
-      <div class="p-16px" :class="{ 'p-t-121px': appStore.fixedHeader, 'p-b-56px': appStore.fixedFooter }">
-        <n-layout-content class="bg-transparent">
+
+      <n-layout-content class="bg-transparent">
+        <div
+          class="p-16px"
+          :class="{
+            'p-b-56px': appStore.fixedFooter,
+            'p-t-122px': appStore.fixedHeader && appStore.showTabs,
+            'p-t-77px': appStore.fixedHeader && !appStore.showTabs,
+          }"
+        >
           <router-view v-slot="{ Component }">
             <transition name="fade-slide" appear mode="out-in">
               <component :is="Component" v-if="appStore.loadFlag" />
             </transition>
           </router-view>
-        </n-layout-content>
+        </div>
         <BackTop />
-      </div>
+      </n-layout-content>
       <n-layout-footer :position="appStore.fixedFooter ? 'absolute' : 'static'" bordered class="flex-center h-40px">
         {{ appStore.footerText }}
       </n-layout-footer>
diff --git a/src/views/dashboard/monitor/index.vue b/src/views/dashboard/monitor/index.vue
index a3f9495..07a1eac 100644
--- a/src/views/dashboard/monitor/index.vue
+++ b/src/views/dashboard/monitor/index.vue
@@ -1,7 +1,161 @@
 <template>
-  <div>监控页</div>
+  <div>
+    <n-grid :x-gap="16" :y-gap="16">
+      <n-gi :span="6">
+        <n-card>
+          <n-space justify="space-between" align="center">
+            <n-statistic label="访问量">
+              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
+            </n-statistic>
+            <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>
+            </n-space>
+          </template>
+        </n-card>
+      </n-gi>
+      <n-gi :span="6">
+        <n-card>
+          <n-space justify="space-between" align="center">
+            <n-statistic label="下载量">
+              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
+            </n-statistic>
+            <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>
+            </n-space>
+          </template>
+        </n-card>
+      </n-gi>
+      <n-gi :span="6">
+        <n-card>
+          <n-space justify="space-between" align="center">
+            <n-statistic label="浏览量">
+              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
+            </n-statistic>
+            <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>
+            </n-space>
+          </template>
+        </n-card>
+      </n-gi>
+      <n-gi :span="6">
+        <n-card>
+          <n-space justify="space-between" align="center">
+            <n-statistic label="注册量">
+              <n-number-animation ref="numberAnimationInstRef" :from="0" :to="12039" show-separator />
+            </n-statistic>
+            <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>
+            </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>
+        </n-card>
+      </n-gi>
+      <n-gi :span="8">
+        <n-card
+          title="访问来源"
+          :segmented="{
+            content: true,
+          }"
+        >
+          1
+        </n-card>
+      </n-gi>
+      <n-gi :span="16">
+        <n-card
+          title="成交记录"
+          :segmented="{
+            content: true,
+          }"
+        >
+          <template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
+          <n-table :bordered="false" :single-line="false">
+            <thead>
+              <tr>
+                <th>交易名称</th>
+                <th>开始时间</th>
+                <th>结束时间</th>
+                <th>进度</th>
+                <th>状态</th>
+              </tr>
+            </thead>
+            <tbody>
+              <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">
+                    {{ item.status }}
+                  </n-tag>
+                </td>
+              </tr>
+            </tbody>
+          </n-table>
+        </n-card>
+      </n-gi>
+    </n-grid>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<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: '已完成',
+  },
+];
+</script>
 
 <style scoped></style>
diff --git a/src/views/test/test2/detail/index.vue b/src/views/test/test2/detail/index.vue
index e639079..00ea2df 100644
--- a/src/views/test/test2/detail/index.vue
+++ b/src/views/test/test2/detail/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div text-center c-yellow>I prove that you have made the ju mp test2-deail.</div>
+  <div text-center>这是详情子页，他不会出现在侧边栏</div>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/src/views/test/test2/index.vue b/src/views/test/test2/index.vue
index 133e467..1afe3bc 100644
--- a/src/views/test/test2/index.vue
+++ b/src/views/test/test2/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <div text-center c-yellow>I prove that you have made the ju mp test2.</div>
+  <div text-center>
+    I prove that you have made the ju mp test2.
+    <n-button @click="routerPush('/test/test2/detail')">跳转详情子页</n-button>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useAppRouter } from '@/hook';
+const { routerPush } = useAppRouter();
+</script>
 
 <style scoped></style>
diff --git a/src/views/test/test3/index.vue b/src/views/test/test3/index.vue
index 68f4731..fb62d1f 100644
--- a/src/views/test/test3/index.vue
+++ b/src/views/test/test3/index.vue
@@ -1,14 +1,7 @@
 <template>
-  <div text-center c-red>
-    I prove that you have made the jump test3.
-    <n-button strong secondary type="success" @click="testMsg">testMsg</n-button>
-  </div>
+  <div></div>
 </template>
 
-<script setup lang="ts">
-const testMsg = () => {
-  window.$message.error('Once upon a time you dressed so fine');
-};
-</script>
+<script setup lang="ts"></script>
 
 <style scoped></style>