u

code/link/link-frontend/src/layout/index.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '../stores/userStore'
+import { useWebSocket } from '../stores/websocketStore'
+
+const websocket = useWebSocket()
+const userStore = useUserStore()
+
+const router = useRouter()
+
+const activeIndex = ref('/home')
+
+onMounted(() => {
+  router.afterEach((to) => {
+    activeIndex.value = to.path
+  })
+})
+
+function toPath(url) {
+  if (url === '/login') {
+    console.log(userStore.isLogined())
+
+    if (userStore.isLogined()) {
+      websocket.disconnect()
+      userStore.resetUserInfo()
+    }
+    router.push(url)
+  }
+  else {
+    router.push(url)
+  }
+}
+</script>
+
+<template>
+  <div class="layout">
+    <el-menu
+      v-model="activeIndex"
+      :default-active="activeIndex"
+      mode="horizontal"
+      active-text-color="#1553f1"
+    >
+      <el-menu-item index="/home" @click="toPath('/home')">
+        首页
+      </el-menu-item>
+      <el-menu-item index="/im" @click="toPath('/im')">
+        IM即时通信
+      </el-menu-item>
+      <el-menu-item index="/login" @click="toPath('/login')">
+        登录
+      </el-menu-item>
+    </el-menu>
+    <div class="layout-main">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  & *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  & *::-webkit-scrollbar-track {
+    background-color: #fff;
+    border-radius: 3px;
+  }
+
+  & *::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+  }
+
+  & *::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .el-menu--horizontal {
+    width: 100%;
+  }
+
+  .layout-main {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    scrollbar-gutter: stable both-edges;
+  }
+}
+</style>