From 28d57c8c3941995f182fd7a27a8e7fa94f7d8895 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Wed, 29 Oct 2025 16:17:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/index.vue | 83 +++++++++++++++++++++------------
 src/pages/system/user.vue       |  8 ++++
 src/router/index.js             |  8 +++-
 3 files changed, 67 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/system/user.vue

diff --git a/src/components/layout/index.vue b/src/components/layout/index.vue
index 8b314a7..935f554 100644
--- a/src/components/layout/index.vue
+++ b/src/components/layout/index.vue
@@ -1,38 +1,59 @@
 <template>
     <div>
-    <t-layout style="height: 100vh;width: 100vw;">
-        <t-aside>
-            <t-menu theme="light" default-value="item1" style="margin-right: 40px">
-                <template #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>
+        <t-layout style="height: 100vh;width: 100vw;">
+            <t-aside>
+                <t-menu theme="light" default-value="item1" style="margin-right: 40px" @change="handleMenuChange" v-model="activeMenu">
+                    <template #logo>
+                        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
                     </template>
-                </t-head-menu>
-            </t-header>
-            <t-content>
-                
-            </t-content>
+                    <t-menu-item v-for="route in menuRoutes" :key="route.name" :value="route.name"
+                        :disabled="route.meta?.disabled">
+                        {{ route.name }}
+                    </t-menu-item>
+                </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>
\ No newline at end of file
diff --git a/src/pages/system/user.vue b/src/pages/system/user.vue
new file mode 100644
index 0000000..2741ee7
--- /dev/null
+++ b/src/pages/system/user.vue
@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <h1>User</h1>
+        <p>User page content</p>
+    </div>
+</template>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index c10261b..541dbbe 100644
--- a/src/router/index.js
+++ b/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"),
+          },
         ],
-      }
+      },
+      
     ],
   },
 ];