feat: 完成动态菜单和API权限检查功能

novalon-manage-web/src/layouts/DefaultLayout.vue

@@ -17,70 +17,11 @@
         active-text-color="#409eff"
         router
       >
-        <el-menu-item index="/dashboard">
-          <el-icon><Odometer /></el-icon>
-          <span>仪表盘</span>
-        </el-menu-item>
-        <el-sub-menu index="system">
-          <template #title>
-            <el-icon><Setting /></el-icon>
-            <span>系统管理</span>
-          </template>
-          <el-menu-item index="/users">
-            用户管理
-          </el-menu-item>
-          <el-menu-item index="/roles">
-            角色管理
-          </el-menu-item>
-          <el-menu-item index="/menus">
-            菜单管理
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="config">
-          <template #title>
-            <el-icon><Tools /></el-icon>
-            <span>系统配置</span>
-          </template>
-          <el-menu-item index="/dict">
-            字典管理
-          </el-menu-item>
-          <el-menu-item index="/sys/config">
-            参数配置
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="audit">
-          <template #title>
-            <el-icon><Document /></el-icon>
-            <span>审计中心</span>
-          </template>
-          <el-menu-item index="/loginlog">
-            登录日志
-          </el-menu-item>
-          <el-menu-item index="/oplog">
-            操作日志
-          </el-menu-item>
-          <el-menu-item index="/exceptionlog">
-            异常日志
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="notify">
-          <template #title>
-            <el-icon><Bell /></el-icon>
-            <span>通知中心</span>
-          </template>
-          <el-menu-item index="/notice">
-            通知公告
-          </el-menu-item>
-        </el-sub-menu>
-        <el-sub-menu index="file">
-          <template #title>
-            <el-icon><Folder /></el-icon>
-            <span>文件管理</span>
-          </template>
-          <el-menu-item index="/files">
-            文件列表
-          </el-menu-item>
-        </el-sub-menu>
+        <menu-item
+          v-for="menu in menuTree"
+          :key="menu.id"
+          :menu="menu"
+        />
       </el-menu>
     </el-aside>
     <el-container>
@@ -123,22 +64,24 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import {
-  Odometer, Setting, Tools, Document, Bell, Folder,
-  Fold, Expand
-} from '@element-plus/icons-vue'
+import { Fold, Expand } from '@element-plus/icons-vue'
+import { usePermissionStore } from '@/stores/permission'
+import MenuItem from '@/components/MenuItem.vue'
 
 const router = useRouter()
 const route = useRoute()
 const collapsed = ref(false)
 const username = ref(localStorage.getItem('username') || 'Admin')
+const permissionStore = usePermissionStore()
 
 const activeMenu = computed(() => route.path)
+const menuTree = computed(() => permissionStore.menus)
 
 const handleCommand = (command: string) => {
   if (command === 'profile') {
     router.push('/profile')
   } else if (command === 'logout') {
+    permissionStore.clearPermissionData()
     localStorage.clear()
     router.push('/login')
   }
@@ -148,6 +91,8 @@ onMounted(() => {
   const token = localStorage.getItem('token')
   if (!token) {
     router.push('/login')
+  } else if (!permissionStore.loaded) {
+    permissionStore.initFromStorage()
   }
 })
 </script>