feat(project): 完善监控页内容

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',
             },

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;

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>

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>

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>

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>

src/views/test/test3/index.vue

@@ -1,14 +1,7 @@
 <template>
-  <div text-center c-red>
+  <div></div>
-    I prove that you have made the jump test3.
-    <n-button strong secondary type="success" @click="testMsg">testMsg</n-button>
-  </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
-const testMsg = () => {
-  window.$message.error('Once upon a time you dressed so fine');
-};
-</script>
 
 <style scoped></style>