9/20

src/layout/index.vue

@@ -1,38 +1,31 @@
 <template>
   <!-- 👇 加这一层全局缩放容器 -->
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <div :class="classObj" :style="{ '--current-color': theme }" class="app-wrapper">
     <side-bar class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container" id="main-container">
+    <div id="main-container" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
       <div class="navbarContant">
         <navbar ref="navbarRef" @set-layout="setLayout" />
       </div>
       <app-main />
-      <i class="bgColor" v-if="bgColorStore.isShow"></i>
+      <i v-if="bgColorStore.isShow" class="bgColor"></i>
       <settings ref="settingRef" />
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-// ==========================================
-// ✅ 第1步：统一 import
-// ==========================================
+<script lang="ts" setup>
 import { ref, computed, watchEffect, onMounted, onUnmounted } from 'vue';
 import { useWindowSize } from '@vueuse/core';
 import SideBar from './components/Sidebar/index.vue';
 import { AppMain, Navbar, Settings } from './components';
 import { useAppStore } from '@/store/modules/app';
 import { useSettingsStore } from '@/store/modules/settings';
-// import { NavTypeEnum } from '@/enums/NavTypeEnum';
 import { useBgColor } from '@/store/modules/bgColor';
-import { initWebSocket } from '@/utils/websocket';
-import { initSSE } from '@/utils/sse';
+import { initWebSocket, closeWebSocket } from '@/utils/websocket'; // 新增 closeWebSocket
+import { initSSE, closeSSE } from '@/utils/sse'; // 引入 closeSSE
 
 const bgColorStore = useBgColor();
 
-// ==========================================
-// ✅ 第2步：缩放逻辑（从旧 script 移过来）
-// ==========================================
+// ======================缩放逻辑======================
 const scale = ref(1);
 const DESIGN_WIDTH = 1920;
 
@@ -44,17 +37,14 @@ const calcScale = () => {
   scale.value = ratio;
 };
 
-let timer: any = null;
+let timer: number | null = null;
 const resize = () => {
   clearTimeout(timer);
-  timer = setTimeout(calcScale, 100);
+  timer = window.setTimeout(calcScale, 100);
 };
 
-// ==========================================
-// ✅ 第3步：生命周期钩子（统一写在这里）
-// ==========================================
+// ======================生命周期======================
 onMounted(() => {
-  // 缩放初始化
   calcScale();
   window.addEventListener('resize', resize);
 
@@ -68,24 +58,18 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', resize);
-  clearTimeout(timer);
+  if (timer) clearTimeout(timer);
+
+  closeWebSocket();
+  closeSSE();
 });
 
-// ==========================================
-// ✅ 第4步：原有业务逻辑
-// ==========================================
+// ======================原有业务逻辑======================
 const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
 const sidebar = computed(() => useAppStore().sidebar);
 const device = computed(() => useAppStore().device);
 const needTagsView = computed(() => settingsStore.tagsView);
-// const fixedHeader = computed(() => settingsStore.fixedHeader);
-// const layout = computed(() => settingsStore.navType);
-
-// const showSidebar = computed(() => {
-//   if (sidebar.value.hide) return false;
-//   return layout.value === NavTypeEnum.LEFT || layout.value === NavTypeEnum.MIX;
-// });
 
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
@@ -112,10 +96,6 @@ watchEffect(() => {
 const navbarRef = ref<InstanceType<typeof Navbar>>();
 const settingRef = ref<InstanceType<typeof Settings>>();
 
-// const handleClickOutside = () => {
-//   useAppStore().closeSideBar({ withoutAnimation: false });
-// };
-
 const setLayout = () => {
   settingRef.value?.openSetting();
 };