From 5e440a7dc434c43eb828fa62cf9c12b0078b8565 Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期一, 20 一月 2025 11:36:18 +0800
Subject: [PATCH] !173 发布 5.3.0-BETA 公测版本 Merge pull request !173 from 疯狂的狮子Li/dev

---
 src/layout/index.vue |   98 +++++++++++++++++++++++++++++-------------------
 1 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/src/layout/index.vue b/src/layout/index.vue
index 8bc1c8b..207a470 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,10 +1,35 @@
-<script setup lang="ts">
-import SideBar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
+<template>
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <side-bar v-if="!sidebar.hide" class="sidebar-container" />
+    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+      <!-- <el-scrollbar>
+        <div :class="{ 'fixed-header': fixedHeader }">
+          <navbar ref="navbarRef" @setLayout="setLayout" />
+          <tags-view v-if="needTagsView" />
+        </div>
+        <app-main />
+        <settings ref="settingRef" />
+      </el-scrollbar> -->
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar ref="navbarRef" @set-layout="setLayout" />
+        <tags-view v-if="needTagsView" />
+      </div>
+      <app-main />
+      <settings ref="settingRef" />
+    </div>
+  </div>
+</template>
 
-const settingsStore = useSettingsStore()
+<script setup lang="ts">
+import SideBar from './components/Sidebar/index.vue';
+import { AppMain, Navbar, Settings, TagsView } from './components';
+import useAppStore from '@/store/modules/app';
+import useSettingsStore from '@/store/modules/settings';
+import { initWebSocket } from '@/utils/websocket';
+import { initSSE } from '@/utils/sse';
+
+const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
 const sidebar = computed(() => useAppStore().sidebar);
 const device = computed(() => useAppStore().device);
@@ -16,59 +41,53 @@
   openSidebar: sidebar.value.opened,
   withoutAnimation: sidebar.value.withoutAnimation,
   mobile: device.value === 'mobile'
-}))
+}));
 
 const { width } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
+  if (device.value === 'mobile') {
+    useAppStore().closeSideBar({ withoutAnimation: false });
   }
   if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({ withoutAnimation: true })
+    useAppStore().toggleDevice('mobile');
+    useAppStore().closeSideBar({ withoutAnimation: true });
   } else {
-    useAppStore().toggleDevice('desktop')
+    useAppStore().toggleDevice('desktop');
   }
-})
+});
 
-const navbarRef = ref(Navbar);
-const settingRef = ref(Settings);
+const navbarRef = ref<InstanceType<typeof Navbar>>();
+const settingRef = ref<InstanceType<typeof Settings>>();
 
 onMounted(() => {
   nextTick(() => {
-    navbarRef.value.initTenantList();
-  })
-})
+    navbarRef.value?.initTenantList();
+  });
+});
+
+onMounted(() => {
+  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
+});
+
+onMounted(() => {
+  initSSE(import.meta.env.VITE_APP_BASE_API + '/resource/sse');
+});
 
 const handleClickOutside = () => {
-  useAppStore().closeSideBar({ withoutAnimation: false })
-}
+  useAppStore().closeSideBar({ withoutAnimation: false });
+};
 
 const setLayout = () => {
-  settingRef.value.openSetting();
-}
+  settingRef.value?.openSetting();
+};
 </script>
 
-<template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <side-bar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar ref="navbarRef" @setLayout="setLayout" />
-        <tags-view v-if="needTagsView" />
-      </div>
-      <app-main />
-      <settings ref="settingRef" />
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  @import "@/assets/styles/variables.module.scss";
+@import '@/assets/styles/mixin.scss';
+@import '@/assets/styles/variables.module.scss';
 
 .app-wrapper {
   @include clearfix;
@@ -99,6 +118,7 @@
   z-index: 9;
   width: calc(100% - #{$base-sidebar-width});
   transition: width 0.28s;
+  background: $fixed-header-bg;
 }
 
 .hideSidebar .fixed-header {

--
Gitblit v1.9.3