移除 unplugin-vue-router 插件 & 固定菜单

@types/components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
     AnalysisReportPreview: typeof import('./../src/components/AnalysisReportPreview.vue')['default']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARadio: typeof import('ant-design-vue/es')['Radio']

src/pages/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import router              from '@/router';
 import { useAccountStore } from '@/stores';
 import { LogoutOutlined }  from '@ant-design/icons-vue';
 import { useElementSize }  from '@vueuse/core';
 
+import type { MenuProps } from 'ant-design-vue';
+
 import { storeToRefs } from 'pinia';
 
 
@@ -14,17 +15,55 @@ const { local } = storeToRefs(Account);
 const titleRef = ref();
 const { width } = useElementSize(titleRef, void 0, { box: 'border-box' });
 
+const menus: MenuProps['items'] = [
+  { label: '中医调理 ', title: ' 中医调理', key: '/patient/room' },
+  { label: '患者管理 ', title: ' 患者管理', key: '/patient/history' },
+  {
+    label: '系统设置 ', title: ' 系统设置', key: '/system',
+    children: [
+      { label: '角色管理 ', key: '/system/role' },
+      { label: '用户管理 ', key: '/system/user' },
+      { label: '标签管理 ', key: '/system/tag' },
+
+    ],
+  },
+];
+
+const router = useRouter();
+const selectedKeys = computed(() => {
+  return [ router.currentRoute.value.path ];
+});
+
+watchEffect(() => {
+  const path = router.currentRoute.value.path;
+  console.log(path, '120-->');
+});
+
+const selectMenuItem = ({ item, key, keyPath }) => {
+  router.push({ path: key }).then();
+  console.log({ item, key, keyPath });
+};
+
+
 function handleLogout() {
   Account.$reset();
   router.replace({ path: '/login' });
 }
+
+const current = ref<string[]>([]);
 </script>
 <template>
   <div class="page-container flex flex-col h-vh w-vw">
     <header class="flex-none flex items-center h-60px">
       <div ref="titleRef" class="title flex-none">{{ title }}</div>
-      <div class="menus flex-auto"></div>
+      <div class="app-header-menus-wrapper flex-auto">
+        <a-menu
+          mode="horizontal" :items="menus"
+          :selectedKeys="selectedKeys" @click="selectMenuItem"
+        />
+      </div>
       <div class="account">
+        {{ current }}
         <a-avatar size="large" :src="local?.avatar">{{ local?.name?.slice(0, 1) }}</a-avatar>
         <span class="m-x-2">{{ local?.name }}</span>
         <LogoutOutlined class="cursor-pointer" @click="handleLogout" />
@@ -52,8 +91,54 @@ function handleLogout() {
       text-align: center;
     }
   }
+
   > main {
     --page-main-container: calc(100vh - 60px);
   }
 }
+
+.app-header-menus-wrapper {
+  margin-left: 12px;
+  height: 100%;
+
+  :deep(.ant-menu) {
+    height: 100%;
+    color: #fff;
+    background-color: transparent;
+
+    &.ant-menu-horizontal {
+      line-height: normal;
+
+      .ant-menu-item,
+      .ant-menu-submenu .ant-menu-submenu-title, {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+      }
+
+      .ant-menu-submenu {
+        padding: 0;
+        .ant-menu-submenu-title {
+          padding: 0 16px;
+        }
+      }
+    }
+
+    > .ant-menu-item-selected,
+    > .ant-menu-submenu-selected, {
+      background-color: #3a5788;
+      color: #fff;
+    }
+
+    .ant-menu-item-selected::after {
+      display: none;
+    }
+
+    .ant-menu-submenu-selected > .ant-menu-submenu-title {
+      color: inherit;
+    }
+  }
+}
 </style>

src/router/index.ts

@@ -1,10 +1,37 @@
+import pinia, { useAccountStore }         from '@/stores';
 import { createRouter, createWebHistory } from 'vue-router';
-import { routes }                         from 'vue-router/auto-routes';
 
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
+  routes: [
+    { path: '/login', component: () => import('@/pages/login.vue') },
+    {
+      path: '/',
+      component: () => import(`@/pages/index.vue`),
+      children: [
+        { path: 'patient/history', component: () => import(`@/pages/index/patient/history.vue`) },
+        {
+          path: 'patient/room', components: {
+            default: () => import(`@/pages/index/patient/room@default.vue`),
+            aside: () => import(`@/pages/index/patient/room@aside.vue`),
+          },
+        },
+        {
+          path: 'system', children: [
+            { path: 'user', component: () => import(`@/pages/index/system/user.vue`) },
+            { path: 'role', component: () => import(`@/pages/index/system/role.vue`) },
+            { path: 'tag', component: () => import(`@/pages/index/system/tag.vue`) },
+          ],
+        },
+        { path: '', redirect: '/patient/history' },
+      ],
+      beforeEnter(to, from, next) {
+        if ( useAccountStore(pinia).token ) next()
+        else next({ path: '/login' });
+      },
+    },
+  ],
 });
 
 export default router;