初步完成首页规划、以及子页面规划

13 files changed, 316 insertions, 180 deletions

diff --git a/package.json b/package.json
index 14d584f..74a524b 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@element-plus/icons-vue": "2.3.1",
     "axios": "1.6.4",
     "dayjs": "1.11.10",
+    "echarts": "^5.4.3",
     "element-plus": "2.4.4",
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
@@ -39,6 +40,7 @@
     "pinia": "2.1.7",
     "screenfull": "6.0.2",
     "vue": "3.4.5",
+    "vue-echarts": "^6.6.8",
     "vue-router": "4.2.5",
     "vue3-count-to": "^1.1.2",
     "vxe-table": "4.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e0dc3ad..cf0591e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
   dayjs:
     specifier: 1.11.10
     version: 1.11.10
+  echarts:
+    specifier: ^5.4.3
+    version: 5.4.3
   element-plus:
     specifier: 2.4.4
     version: 2.4.4([email protected])
@@ -47,6 +50,9 @@ dependencies:
   vue:
     specifier: 3.4.5
     version: 3.4.5([email protected])
+  vue-echarts:
+    specifier: ^6.6.8
+    version: 6.6.8([email protected])([email protected])
   vue-router:
     specifier: 4.2.5
     version: 4.2.5([email protected])
@@ -2445,6 +2451,13 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.4.4
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
     engines: {node: '>=14'}
@@ -4282,6 +4295,10 @@ packages:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -4821,6 +4838,10 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: true
@@ -5130,6 +5151,21 @@ packages:
     resolution: {integrity: sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ==}
     dev: false
 
+  /[email protected]([email protected]):
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.4.5([email protected])
+    dev: false
+
   /[email protected]([email protected]):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
@@ -5145,6 +5181,26 @@ packages:
       vue: 3.4.5([email protected])
     dev: false
 
+  /[email protected]([email protected])([email protected]):
+    resolution: {integrity: sha512-3EGrxKGCGjHnkhudRQQ4fkK5iJxxXNQ1fXvSWA/7mzR/oV7BBSHYvC3gDbG/WIW0A/Fcx2H8k5H3NDyWgjyi8g==}
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.5
+      '@vue/runtime-core': ^3.0.0
+      echarts: ^5.4.1
+      vue: ^2.6.12 || ^3.1.1
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      '@vue/runtime-core':
+        optional: true
+    dependencies:
+      echarts: 5.4.3
+      resize-detector: 0.3.0
+      vue: 3.4.5([email protected])
+      vue-demi: 0.13.11([email protected])
+    dev: false
+
   /[email protected]([email protected]):
     resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -5367,3 +5423,9 @@ packages:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
     engines: {node: '>=12.20'}
     dev: true
+
+  /[email protected]:
+    resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
diff --git a/src/assets/layouts/logo-text-1.png b/src/assets/layouts/logo-text-1.png
index 1112b25..d4da3be 100644
--- a/src/assets/layouts/logo-text-1.png
+++ b/src/assets/layouts/logo-text-1.png
diff --git a/src/assets/layouts/logo-text-2.png b/src/assets/layouts/logo-text-2.png
index 4515433..d4da3be 100644
--- a/src/assets/layouts/logo-text-2.png
+++ b/src/assets/layouts/logo-text-2.png
diff --git a/src/assets/layouts/oldlogo-text-1.png b/src/assets/layouts/oldlogo-text-1.png
new file mode 100644
index 0000000..1112b25
--- /dev/null
+++ b/src/assets/layouts/oldlogo-text-1.png
diff --git a/src/assets/layouts/oldlogo-text-2.png b/src/assets/layouts/oldlogo-text-2.png
new file mode 100644
index 0000000..4515433
--- /dev/null
+++ b/src/assets/layouts/oldlogo-text-2.png
diff --git a/src/layouts/components/Logo/index.vue b/src/layouts/components/Logo/index.vue
index aab1c33..24f9c00 100644
--- a/src/layouts/components/Logo/index.vue
+++ b/src/layouts/components/Logo/index.vue
@@ -34,8 +34,8 @@ const { layoutMode } = storeToRefs(settingsStore)
 .layout-logo-container {
   position: relative;
   width: 100%;
-  height: var(--v3-header-height);
-  line-height: var(--v3-header-height);
+  height: calc(var(--v3-header-height) - var(10px));
+  line-height: calc(var(--v3-header-height) - var(10px));
   background-color: transparent;
   text-align: center;
   overflow: hidden;
@@ -43,7 +43,8 @@ const { layoutMode } = storeToRefs(settingsStore)
     display: none;
   }
   .layout-logo-text {
-    height: 100%;
+    margin: 10px;
+    width: 80%;
     vertical-align: middle;
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index ea4fe2e..08e6247 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -62,192 +62,226 @@ export const constantRoutes: RouteRecordRaw[] = [
     ]
   },
   {
-    path: "/unocss",
+    path: "/data",
     component: Layouts,
-    redirect: "/unocss/index",
+    redirect: "/data",
     children: [
       {
-        path: "index",
-        component: () => import("@/views/unocss/index.vue"),
-        name: "UnoCSS",
+        path: "data",
+        component: () => import("@/views/data/index.vue"),
+        name: "Data",
         meta: {
-          title: "UnoCSS",
-          svgIcon: "unocss"
-        }
-      }
-    ]
-  },
-  {
-    path: "/link",
-    meta: {
-      title: "外链",
-      svgIcon: "link"
-    },
-    children: [
-      {
-        path: "https://juejin.cn/post/7089377403717287972",
-        component: () => {},
-        name: "Link1",
-        meta: {
-          title: "中文文档"
-        }
-      },
-      {
-        path: "https://juejin.cn/column/7207659644487139387",
-        component: () => {},
-        name: "Link2",
-        meta: {
-          title: "新手教程"
-        }
-      }
-    ]
-  },
-  {
-    path: "/table",
-    component: Layouts,
-    redirect: "/table/element-plus",
-    name: "Table",
-    meta: {
-      title: "表格",
-      elIcon: "Grid"
-    },
-    children: [
-      {
-        path: "element-plus",
-        component: () => import("@/views/table/element-plus/index.vue"),
-        name: "ElementPlus",
-        meta: {
-          title: "Element Plus",
-          keepAlive: true
-        }
-      },
-      {
-        path: "vxe-table",
-        component: () => import("@/views/table/vxe-table/index.vue"),
-        name: "VxeTable",
-        meta: {
-          title: "Vxe Table",
-          keepAlive: true
-        }
-      }
-    ]
-  },
-  {
-    path: "/menu",
-    component: Layouts,
-    redirect: "/menu/menu1",
-    name: "Menu",
-    meta: {
-      title: "多级路由",
-      svgIcon: "menu"
-    },
-    children: [
-      {
-        path: "menu1",
-        component: () => import("@/views/menu/menu1/index.vue"),
-        redirect: "/menu/menu1/menu1-1",
-        name: "Menu1",
-        meta: {
-          title: "menu1"
-        },
-        children: [
-          {
-            path: "menu1-1",
-            component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
-            name: "Menu1-1",
-            meta: {
-              title: "menu1-1",
-              keepAlive: true
-            }
-          },
-          {
-            path: "menu1-2",
-            component: () => import("@/views/menu/menu1/menu1-2/index.vue"),
-            redirect: "/menu/menu1/menu1-2/menu1-2-1",
-            name: "Menu1-2",
-            meta: {
-              title: "menu1-2"
-            },
-            children: [
-              {
-                path: "menu1-2-1",
-                component: () => import("@/views/menu/menu1/menu1-2/menu1-2-1/index.vue"),
-                name: "Menu1-2-1",
-                meta: {
-                  title: "menu1-2-1",
-                  keepAlive: true
-                }
-              },
-              {
-                path: "menu1-2-2",
-                component: () => import("@/views/menu/menu1/menu1-2/menu1-2-2/index.vue"),
-                name: "Menu1-2-2",
-                meta: {
-                  title: "menu1-2-2",
-                  keepAlive: true
-                }
-              }
-            ]
-          },
-          {
-            path: "menu1-3",
-            component: () => import("@/views/menu/menu1/menu1-3/index.vue"),
-            name: "Menu1-3",
-            meta: {
-              title: "menu1-3",
-              keepAlive: true
-            }
-          }
-        ]
-      },
-      {
-        path: "menu2",
-        component: () => import("@/views/menu/menu2/index.vue"),
-        name: "Menu2",
-        meta: {
-          title: "menu2",
-          keepAlive: true
+          title: "数据检索",
+          elIcon: "Grid",
+          affix: true
         }
       }
     ]
   },
   {
-    path: "/hook-demo",
+    path: "/stats",
     component: Layouts,
-    redirect: "/hook-demo/use-fetch-select",
-    name: "HookDemo",
-    meta: {
-      title: "Hook 示例",
-      elIcon: "Menu",
-      alwaysShow: true
-    },
+    redirect: "/stats",
     children: [
       {
-        path: "use-fetch-select",
-        component: () => import("@/views/hook-demo/use-fetch-select.vue"),
-        name: "UseFetchSelect",
+        path: "stats",
+        component: () => import("@/views/stats/index.vue"),
+        name: "Stats",
         meta: {
-          title: "useFetchSelect"
-        }
-      },
-      {
-        path: "use-fullscreen-loading",
-        component: () => import("@/views/hook-demo/use-fullscreen-loading.vue"),
-        name: "UseFullscreenLoading",
-        meta: {
-          title: "useFullscreenLoading"
-        }
-      },
-      {
-        path: "use-watermark",
-        component: () => import("@/views/hook-demo/use-watermark.vue"),
-        name: "UseWatermark",
-        meta: {
-          title: "useWatermark"
+          title: "分析统计",
+          elIcon: "DataAnalysis",
+          affix: true
         }
       }
     ]
   }
+  // {
+  //   path: "/unocss",
+  //   component: Layouts,
+  //   redirect: "/unocss/index",
+  //   children: [
+  //     {
+  //       path: "index",
+  //       component: () => import("@/views/unocss/index.vue"),
+  //       name: "UnoCSS",
+  //       meta: {
+  //         title: "UnoCSS",
+  //         svgIcon: "unocss"
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: "/link",
+  //   meta: {
+  //     title: "外链",
+  //     svgIcon: "link"
+  //   },
+  //   children: [
+  //     {
+  //       path: "https://juejin.cn/post/7089377403717287972",
+  //       component: () => {},
+  //       name: "Link1",
+  //       meta: {
+  //         title: "中文文档"
+  //       }
+  //     },
+  //     {
+  //       path: "https://juejin.cn/column/7207659644487139387",
+  //       component: () => {},
+  //       name: "Link2",
+  //       meta: {
+  //         title: "新手教程"
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: "/table",
+  //   component: Layouts,
+  //   redirect: "/table/element-plus",
+  //   name: "Table",
+  //   meta: {
+  //     title: "表格",
+  //     elIcon: "Grid"
+  //   },
+  //   children: [
+  //     {
+  //       path: "element-plus",
+  //       component: () => import("@/views/table/element-plus/index.vue"),
+  //       name: "ElementPlus",
+  //       meta: {
+  //         title: "Element Plus",
+  //         keepAlive: true
+  //       }
+  //     },
+  //     {
+  //       path: "vxe-table",
+  //       component: () => import("@/views/table/vxe-table/index.vue"),
+  //       name: "VxeTable",
+  //       meta: {
+  //         title: "Vxe Table",
+  //         keepAlive: true
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: "/menu",
+  //   component: Layouts,
+  //   redirect: "/menu/menu1",
+  //   name: "Menu",
+  //   meta: {
+  //     title: "多级路由",
+  //     svgIcon: "menu"
+  //   },
+  //   children: [
+  //     {
+  //       path: "menu1",
+  //       component: () => import("@/views/menu/menu1/index.vue"),
+  //       redirect: "/menu/menu1/menu1-1",
+  //       name: "Menu1",
+  //       meta: {
+  //         title: "menu1"
+  //       },
+  //       children: [
+  //         {
+  //           path: "menu1-1",
+  //           component: () => import("@/views/menu/menu1/menu1-1/index.vue"),
+  //           name: "Menu1-1",
+  //           meta: {
+  //             title: "menu1-1",
+  //             keepAlive: true
+  //           }
+  //         },
+  //         {
+  //           path: "menu1-2",
+  //           component: () => import("@/views/menu/menu1/menu1-2/index.vue"),
+  //           redirect: "/menu/menu1/menu1-2/menu1-2-1",
+  //           name: "Menu1-2",
+  //           meta: {
+  //             title: "menu1-2"
+  //           },
+  //           children: [
+  //             {
+  //               path: "menu1-2-1",
+  //               component: () => import("@/views/menu/menu1/menu1-2/menu1-2-1/index.vue"),
+  //               name: "Menu1-2-1",
+  //               meta: {
+  //                 title: "menu1-2-1",
+  //                 keepAlive: true
+  //               }
+  //             },
+  //             {
+  //               path: "menu1-2-2",
+  //               component: () => import("@/views/menu/menu1/menu1-2/menu1-2-2/index.vue"),
+  //               name: "Menu1-2-2",
+  //               meta: {
+  //                 title: "menu1-2-2",
+  //                 keepAlive: true
+  //               }
+  //             }
+  //           ]
+  //         },
+  //         {
+  //           path: "menu1-3",
+  //           component: () => import("@/views/menu/menu1/menu1-3/index.vue"),
+  //           name: "Menu1-3",
+  //           meta: {
+  //             title: "menu1-3",
+  //             keepAlive: true
+  //           }
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       path: "menu2",
+  //       component: () => import("@/views/menu/menu2/index.vue"),
+  //       name: "Menu2",
+  //       meta: {
+  //         title: "menu2",
+  //         keepAlive: true
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: "/hook-demo",
+  //   component: Layouts,
+  //   redirect: "/hook-demo/use-fetch-select",
+  //   name: "HookDemo",
+  //   meta: {
+  //     title: "Hook 示例",
+  //     elIcon: "Menu",
+  //     alwaysShow: true
+  //   },
+  //   children: [
+  //     {
+  //       path: "use-fetch-select",
+  //       component: () => import("@/views/hook-demo/use-fetch-select.vue"),
+  //       name: "UseFetchSelect",
+  //       meta: {
+  //         title: "useFetchSelect"
+  //       }
+  //     },
+  //     {
+  //       path: "use-fullscreen-loading",
+  //       component: () => import("@/views/hook-demo/use-fullscreen-loading.vue"),
+  //       name: "UseFullscreenLoading",
+  //       meta: {
+  //         title: "useFullscreenLoading"
+  //       }
+  //     },
+  //     {
+  //       path: "use-watermark",
+  //       component: () => import("@/views/hook-demo/use-watermark.vue"),
+  //       name: "UseWatermark",
+  //       meta: {
+  //         title: "useWatermark"
+  //       }
+  //     }
+  //   ]
+  // }
 ]
 
 /**
diff --git a/src/views/dashboard/components/Admin.vue b/src/views/dashboard/components/Admin.vue
index 574c71e..28ba504 100644
--- a/src/views/dashboard/components/Admin.vue
+++ b/src/views/dashboard/components/Admin.vue
@@ -1,3 +1,33 @@
+<script lang="ts" setup>
+import { ref } from "vue"
+import { use } from "echarts/core"
+import { LineChart } from "echarts/charts"
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components"
+import { SVGRenderer } from "echarts/renderers"
+import VChart from "vue-echarts"
+
+use([TitleComponent, TooltipComponent, LegendComponent, GridComponent, LineChart, SVGRenderer])
+
+const option = ref({
+  xAxis: {
+    type: "category",
+    data: ["2023年1月1日", "2023年1月2日", "2023年1月5日"]
+  },
+  yAxis: {
+    type: "value"
+  },
+  tooltip: {
+    trigger: "axis"
+  },
+  series: [
+    {
+      data: [120, 200, 15000],
+      type: "line"
+    }
+  ]
+})
+</script>
+
 <template>
   <div class="app-container">
     <!-- 系统实时状态 -->
@@ -37,9 +67,12 @@
           <template #header>
             <div class="fig-title">
               <Coin style="width: 2em; height: 2em; margin-right: 8px" />
-              <div class="card-title">已得到关联</div>
+              <div style="font-size: 24px; font-weight: 900">数据增长趋势</div>
             </div>
           </template>
+          <!-- 折线图展示数据增长过程，间隔为天 -->
+          <v-chart class="chart" :option="option" autoresize />
+          <template #footer>Footer content</template>
         </el-card>
       </el-col>
     </el-row>
@@ -48,6 +81,9 @@
 </template>
 
 <style lang="scss" scoped>
+.chart {
+  height: 60vh;
+}
 .el-row {
   margin-bottom: 20px;
 }
diff --git a/src/views/data/index.vue b/src/views/data/index.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/data/index.vue
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4523749..bb99c4e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,7 +3,7 @@ import { reactive, ref } from "vue"
 import { useRouter } from "vue-router"
 import { useUserStore } from "@/store/modules/user"
 import { type FormInstance, type FormRules } from "element-plus"
-import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
+import { User, Lock } from "@element-plus/icons-vue"
 import { getLoginCodeApi } from "@/api/login"
 import { type LoginRequestData } from "@/api/login/types/login"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
@@ -66,14 +66,14 @@ const createCode = () => {
 }
 
 /** 初始化验证码 */
-createCode()
+// createCode()
 </script>
 
 <template>
   <div class="login-container">
     <ThemeSwitch class="theme-switch" />
     <div class="login-card">
-      <div class="title">
+      <div class="title" style="margin: 20px">
         <img src="@/assets/layouts/logo-text-2.png" />
       </div>
       <div class="content">
@@ -99,7 +99,8 @@ createCode()
               show-password
             />
           </el-form-item>
-          <el-form-item prop="code">
+          <!-- 废弃验证码功能 -->
+          <!-- <el-form-item prop="code">
             <el-input
               v-model.trim="loginFormData.code"
               placeholder="验证码"
@@ -124,7 +125,7 @@ createCode()
                 </el-image>
               </template>
             </el-input>
-          </el-form-item>
+          </el-form-item> -->
           <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin">登 录</el-button>
         </el-form>
       </div>
diff --git a/src/views/stats/index.vue b/src/views/stats/index.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/views/stats/index.vue
diff --git a/vite.config.ts b/vite.config.ts
index 57b1e9e..e36de31 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,9 +25,9 @@ export default (configEnv: ConfigEnv): UserConfigExport => {
       /** 设置 host: true 才可以使用 Network 的形式，以 IP 访问项目 */
       host: true, // host: "0.0.0.0"
       /** 端口号 */
-      port: 3333,
+      port: 5678,
       /** 是否自动打开浏览器 */
-      open: false,
+      open: true,
       /** 跨域设置允许 */
       cors: true,
       /** 端口被占用时，是否直接退出 */