feat(project): 增加侧边菜单页面

mock/module/user.ts

@@ -51,7 +51,7 @@ const userRoutes = [
     meta: {
       title: '多级菜单演示',
       requiresAuth: true,
-      icon: 'icon-park-outline:ambulance',
+      icon: 'icon-park-outline:list',
     },
     children: [
       {
@@ -137,6 +137,94 @@ const userRoutes = [
       },
     ],
   },
+  {
+    name: 'plugin',
+    path: '/plugin',
+    redirect: '/plugin/charts',
+    meta: {
+      title: '组件示例',
+      requiresAuth: true,
+      icon: 'icon-park-outline:application-one',
+    },
+    children: [
+      {
+        name: 'plugin_charts',
+        path: '/plugin/charts',
+        meta: {
+          title: '图表',
+          requiresAuth: true,
+          icon: 'icon-park-outline:chart-line',
+        },
+        children: [
+          {
+            name: 'echarts',
+            path: '/plugin/charts/echarts',
+            meta: {
+              title: 'ECharts',
+              requiresAuth: true,
+              icon: 'icon-park-outline:chart-proportion',
+            },
+          },
+          {
+            name: 'antV',
+            path: '/plugin/charts/antV',
+            meta: {
+              title: 'antV',
+              requiresAuth: true,
+              icon: 'ant-design:ant-design-outlined',
+            },
+          },
+        ],
+      },
+      {
+        name: 'plugin_map',
+        path: '/plugin/map',
+        meta: {
+          title: '地图',
+          requiresAuth: true,
+          icon: 'carbon:map',
+        },
+      },
+      {
+        name: 'plugin_editor',
+        path: '/plugin/editor',
+        meta: {
+          title: '编辑器',
+          requiresAuth: true,
+          icon: 'icon-park-outline:editor',
+        },
+        children: [
+          {
+            name: 'md',
+            path: '/plugin/editor/md',
+            meta: {
+              title: 'MarkDown',
+              requiresAuth: true,
+              icon: 'ri:markdown-line',
+            },
+          },
+          {
+            name: 'rich',
+            path: '/plugin/editor/rich',
+            meta: {
+              title: '富文本',
+              requiresAuth: true,
+              icon: 'icon-park-outline:edit-one',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'about',
+    path: '/about',
+    meta: {
+      title: '关于',
+      requiresAuth: true,
+      icon: 'icon-park-outline:info',
+    },
+  },
 ];
 
 export default [

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "echarts": "^5.4.0",
     "pinia": "^2.0.20",
     "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.2.37",

src/layouts/BasicLayout/index.vue

@@ -43,7 +43,6 @@
       >
         <TabBar class="h-45px" />
       </n-layout-header>
-
       <n-layout-content class="bg-transparent">
         <div
           class="p-16px"
@@ -59,8 +58,8 @@
             </transition>
           </router-view>
         </div>
-        <BackTop />
       </n-layout-content>
+      <BackTop />
       <n-layout-footer :position="appStore.fixedFooter ? 'absolute' : 'static'" bordered class="flex-center h-40px">
         {{ appStore.footerText }}
       </n-layout-footer>

src/views/about/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>关于本项目</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/plugin/charts/antV/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>antV</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/plugin/charts/echarts/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>echarts</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/plugin/editor/md/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>markdown</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/plugin/editor/rich/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>富文本</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/plugin/map/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>地图示例</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>