侧边栏

src/components/Layout.vue

@@ -11,22 +11,30 @@
       <el-menu :default-active="activeIndex" class="el-menu-part" router :collapse="isCollapse">
         <el-menu-item index="/">
           <el-icon>
-            <WarnTriangleFilled />
+            <House />
           </el-icon>
-          <template #title><span>告警展示</span></template>
+          <template #title><span>首页</span></template>
         </el-menu-item>
-        <el-menu-item index="/test">
+        <el-menu-item index="/alertManagement">
           <el-icon>
-            <document />
+            <Management />
           </el-icon>
-          <template #title><span>测试</span></template>
+          <template #title><span>告警列表</span></template>
+        </el-menu-item>
+        <el-menu-item index="/dataStatistics">
+          <el-icon><TrendCharts /></el-icon>
+          <template #title><span>数据统计</span></template>
+        </el-menu-item>
+        <el-menu-item index="/userList">
+          <el-icon><Avatar /></el-icon>
+          <template #title><span>用户管理</span></template>
         </el-menu-item>
         <el-sub-menu index="1">
           <template #title>
             <el-icon>
               <location />
             </el-icon>
-            <span>功能面板</span>
+            <span>面板测试</span>
           </template>
           <el-menu-item index="/alertChart">
             <el-icon>
@@ -46,13 +54,13 @@
     <div class="content-layout">
       <!-- 头部区域 -->
       <el-header class="nav-header">
-        
+
         <div class="header-right">
           <!-- 用户头像下拉菜单 -->
           <el-dropdown trigger="click">
             <span class="el-dropdown-link">
               <el-avatar shape="square"> 用户 </el-avatar>
-              <span class="username">Soybean</span>
+              <span class="username">{{ username }}</span>
             </span>
             <template #dropdown>
               <el-dropdown-menu>
@@ -61,7 +69,7 @@
                     <User />
                   </el-icon> 用户中心
                 </el-dropdown-item>
-                <el-dropdown-item>
+                <el-dropdown-item @click="onLogout">
                   <el-icon>
                     <SwitchButton />
                   </el-icon> 退出登录
@@ -86,8 +94,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import {
   Document,
   WarningFilled,
@@ -96,26 +104,58 @@ import {
   SwitchButton,
   WarnTriangleFilled,
   Setting,
-} from '@element-plus/icons-vue'
+  House,
-import { el } from 'element-plus/es/locale/index.mjs';
+  Grid,
+  Management,
+  TrendCharts,
+  Avatar
+} from '@element-plus/icons-vue';
+import { BoxApi } from '@/utils/boxApi';
+import { ElMessage } from 'element-plus';
 
 const route = useRoute();
+const router = useRouter();
 const activeIndex = ref(route.path);
+const isCollapse = ref(false);
 
-const isCollapse = ref(false)
+// 动态获取 username
-// const handleOpen = (key: string, keyPath: string[]) => {
+const username = ref(''); // 默认值为空
-//   console.log(key, keyPath)
-// }
-// const handleClose = (key: string, keyPath: string[]) => {
-//   console.log(key, keyPath)
-// }
 
+// 页面加载时，检查 localStorage 是否存储了用户名
+onMounted(() => {
+  const storedUsername = localStorage.getItem('username');
+  if (storedUsername) {
+    username.value = storedUsername;
+  } else {
+    username.value = '用户'; // 如果 localStorage 没有值，默认显示 "用户"
+  }
+});
+
+const apiInstance = new BoxApi();
+
+// 监听路由变化，更新菜单的 active 项
 watch(
   () => route.path,
   (newPath) => {
     activeIndex.value = newPath;
   }
 );
+
+// const onLogout = () => {
+//   localStorage.removeItem('alertToken');
+//   router.push('/login');
+// };
+const onLogout = async () => {
+  try {
+    localStorage.removeItem('alertToken');
+    ElMessage.success('退出登录成功');
+    router.push('/login');
+    await apiInstance.logout();
+  } catch (error: any) {
+    ElMessage.error(`后台接口调用失败: ${error.message}`);
+  }
+};
+
 </script>
 
 <style scoped>
@@ -241,5 +281,4 @@ watch(
   justify-content: center;
   text-align: center;
   /* flex-shrink: 0; */
-}
+}</style>
-</style>