feat: 调整路由页面

src/components/layout/index.vue

@@ -1,38 +1,59 @@
 <template>
     <div>
-    <t-layout style="height: 100vh;width: 100vw;">
+        <t-layout style="height: 100vh;width: 100vw;">
-        <t-aside>
+            <t-aside>
-            <t-menu theme="light" default-value="item1" style="margin-right: 40px">
+                <t-menu theme="light" default-value="item1" style="margin-right: 40px" @change="handleMenuChange" v-model="activeMenu">
-                <template #logo>
+                    <template #logo>
-                    <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
+                        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
-                </template>
-                <t-menu-item value="item1"> 仪表盘 </t-menu-item>
-                <t-menu-item value="item2"> 资源列表 </t-menu-item>
-                <t-menu-item value="item3"> 根目录 </t-menu-item>
-                <t-menu-item value="item4" :disabled="true"> 调度平台 </t-menu-item>
-                <t-menu-item value="item5"> 精准监控 </t-menu-item>
-                <t-menu-item value="item6"> 消息区 </t-menu-item>
-                <t-menu-item value="item7"> 个人中心 </t-menu-item>
-                <t-menu-item value="item8"> 视频区 </t-menu-item>
-                <t-menu-item value="item9"> 资源编辑 </t-menu-item>
-            </t-menu>
-        </t-aside>
-        <t-layout>
-            <t-header>
-                <t-head-menu theme="light">
-                    <template #operations>
-                        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="search" /></a>
-                        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="notification-filled" /></a>
-                        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="home" /></a>
                     </template>
-                </t-head-menu>
+                    <t-menu-item v-for="route in menuRoutes" :key="route.name" :value="route.name"
-            </t-header>
+                        :disabled="route.meta?.disabled">
-            <t-content>
+                        {{ route.name }}
-                
+                    </t-menu-item>
-            </t-content>
+                </t-menu>
+            </t-aside>
+            <t-layout>
+                <t-header>
+                    <t-head-menu theme="light">
+                        <template #operations>
+                            <t-button theme="warning" @click="handleQuit">退出</t-button>
+                        </template>
+                    </t-head-menu>
+                </t-header>
+                <t-content>
+                    <router-view />
+                </t-content>
+            </t-layout>
         </t-layout>
-    </t-layout>
     </div>
 </template>
-<script setup lang="ts">
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+const menuRoutes = computed(() => {
+    const layoutRoute = router.getRoutes().find(r => r.name === 'Layout')
+    return layoutRoute?.children[0]?.children || []
+})
+
+const activeMenu = ref('')
+
+// 处理菜单点击
+const handleMenuChange = (menuName) => {
+    const targetRoute = menuRoutes.value.find(route => route.name === menuName)
+    if (targetRoute && !targetRoute.meta?.disabled) {
+        router.push(targetRoute.path)
+    }
+}
+
+watch(() => route.name, (newName) => {
+    activeMenu.value = newName
+}, { immediate: true })
+
+const handleQuit = () => {
+    window.location.replace('/login')
+}
 </script>

src/pages/system/user.vue

@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <h1>User</h1>
+        <p>User page content</p>
+    </div>
+</template>
+<script setup>
+</script>

src/router/index.js

@@ -20,8 +20,14 @@ const routes = [
             name: "主页",
             component: () => import("@/pages/home/index.vue"),
           },
+          {
+            path: "user",
+            name: "用户管理",
+            component: () => import("@/pages/system/user.vue"),
+          },
         ],
-      }
+      },
+      
     ],
   },
 ];