From a6b2ed5d8f5b4222050d4021de5a57e1d4a8e607 Mon Sep 17 00:00:00 2001
From: chaos-zhu <ggchaos1022@gmail.com>
Date: Sun, 18 Aug 2024 17:39:32 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=94=AF=E6=8C=81=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=A0=8F=E6=8A=98=E5=8F=A0=E4=B8=8E=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/aside-box.vue              | 51 ++++++++++++++-----
 web/src/store/index.js                        |  8 ++-
 .../terminal/components/terminal-tab.vue      | 30 ++++++-----
 .../views/terminal/components/terminal.vue    |  3 +-
 4 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/web/src/components/aside-box.vue b/web/src/components/aside-box.vue
index b9361ca..726c53b 100644
--- a/web/src/components/aside-box.vue
+++ b/web/src/components/aside-box.vue
@@ -2,18 +2,22 @@
   <div class="aside_container">
     <div class="logo_wrap">
       <img src="@/assets/logo.png" alt="logo">
-      <h1>EasyNode</h1>
+      <Transition name="el-fade-in-linear">
+        <h1 v-show="!menuCollapse">EasyNode</h1>
+      </Transition>
     </div>
     <el-menu
       :default-active="defaultActiveMenu"
+      :collapse="menuCollapse"
       class="menu"
+      :collapse-transition="true"
       @select="handleSelect"
     >
       <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.index">
+        <el-icon>
+          <component :is="item.icon" />
+        </el-icon>
         <template #title>
-          <el-icon>
-            <component :is="item.icon" />
-          </el-icon>
           <span>{{ item.name }}</span>
         </template>
       </el-menu-item>
@@ -21,6 +25,10 @@
     <!-- <div class="logout_wrap">
       <el-button type="info" link @click="handleLogout">退出登录</el-button>
     </div> -->
+    <div class="collapse" @click="handleCollapse">
+      <el-icon v-if="menuCollapse"><Expand /></el-icon>
+      <el-icon v-else><Fold /></el-icon>
+    </div>
   </div>
 </template>
 
@@ -33,7 +41,9 @@ import {
   ScaleToOriginal,
   ArrowRight,
   Pointer,
-  FolderOpened
+  FolderOpened,
+  Expand,
+  Fold
 } from '@element-plus/icons-vue'
 import { useRoute } from 'vue-router'
 
@@ -79,6 +89,8 @@ let menuList = reactive([
   },
 ])
 
+let menuCollapse = computed(() => $store.menuCollapse)
+
 // eslint-disable-next-line no-useless-escape
 const regex = /^\/([^\/]+)/
 let defaultActiveMenu = computed(() => {
@@ -96,13 +108,16 @@ const handleSelect = (path) => {
   // console.log(path)
   $router.push(path)
 }
+
+const handleCollapse = () => {
+  $store.setMenuCollapse(!menuCollapse.value)
+}
 </script>
 
 <style lang="scss" scoped>
 .aside_container {
   background-color: #fff;
-  border-right: 1px solid var(--el-menu-border-color);
-  width: 180px;
+  // width: 180px;
   display: flex;
   flex-direction: column;
   :deep(.el-menu) {
@@ -110,20 +125,28 @@ const handleSelect = (path) => {
   }
   .logo_wrap {
     display: flex;
-    justify-content: center;
     align-items: center;
-    padding: 15px 0;
+    padding: 15px 0 15px 20px;
+    position: relative;
     img {
       height: 30px;
       width: 30px;
     }
     h1 {
+      position: absolute;
+      left: 52px;
+      font-size: 14px;
+      // color: #1890ff;
+    }
+  }
+  .collapse {
+    margin-top: auto;
+    margin-left: auto;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    cursor: pointer;
+    &:hover {
       color: #1890ff;
-      font-size: 16px;
-      margin: 0 5px;
-      font-weight: 600;
-      font-size: 16px;
-      vertical-align: middle;
     }
   }
   .logout_wrap {
diff --git a/web/src/store/index.js b/web/src/store/index.js
index 91fbf3d..2510365 100644
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -16,7 +16,8 @@ const useStore = defineStore({
     user: localStorage.getItem('user') || null,
     token: sessionStorage.getItem('token') || localStorage.getItem('token') || null,
     title: '',
-    isDark: false
+    isDark: false,
+    menuCollapse: localStorage.getItem('menuCollapse') === 'true'
   }),
   actions: {
     async setJwtToken(token, isSession = true) {
@@ -162,6 +163,11 @@ const useStore = defineStore({
         isDark = systemTheme
       }
       this.setTheme(isDark, false)
+    },
+    setMenuCollapse() {
+      let newState = !this.menuCollapse
+      localStorage.setItem('menuCollapse', newState)
+      this.$patch({ menuCollapse: newState })
     }
   }
 })
diff --git a/web/src/views/terminal/components/terminal-tab.vue b/web/src/views/terminal/components/terminal-tab.vue
index a5275f9..a68b510 100644
--- a/web/src/views/terminal/components/terminal-tab.vue
+++ b/web/src/views/terminal/components/terminal-tab.vue
@@ -70,6 +70,13 @@ const fontSize = computed(() => props.fontSize)
 const background = computed(() => props.background)
 const hostObj = computed(() => props.hostObj)
 const host = computed(() => hostObj.value.host)
+let menuCollapse = computed(() => $store.menuCollapse)
+
+watch(menuCollapse, () => {
+  nextTick(() => {
+    handleResize()
+  })
+})
 
 watch(theme, () => {
   nextTick(() => {
@@ -81,7 +88,8 @@ watch(theme, () => {
 watch(fontSize, () => {
   nextTick(() => {
     terminal.value.options.fontSize = fontSize.value
-    fitAddon.value.fit()
+    // fitAddon.value.fit()
+    handleResize()
   })
 })
 
@@ -233,19 +241,18 @@ const onResize = () => {
 const handleResize = () => {
   if (timer.value) clearTimeout(timer.value)
   timer.value = setTimeout(() => {
-    let temp = []
-    let panes = Array.from(document.getElementsByClassName('el-tab-pane'))
-    panes.forEach((item, index) => {
-      temp[index] = item.style.display
-      item.style.display = 'block'
-    })
+    // let temp = []
+    // let panes = Array.from(document.getElementsByClassName('el-tab-pane'))
+    // panes.forEach((item, index) => {
+    //   temp[index] = item.style.display
+    //   item.style.display = 'block'
+    // })
+    // panes.forEach((item, index) => {
+    //   item.style.display = temp[index]
+    // })
     fitAddon.value?.fit()
-    panes.forEach((item, index) => {
-      item.style.display = temp[index]
-    })
     let { rows, cols } = term.value
     socket.value?.emit('resize', { rows, cols })
-    focusTab()
   }, 200)
 }
 
@@ -429,7 +436,6 @@ defineExpose({
     :deep(.xterm-screen) {
       padding: 0 0 0 10px;
       border-radius: var(--el-border-radius-base);
-      // background-color: rgba(0, 0, 0, 0.6);
     }
   }
   .terminal_command_history {
diff --git a/web/src/views/terminal/components/terminal.vue b/web/src/views/terminal/components/terminal.vue
index aac425d..ea92bb3 100644
--- a/web/src/views/terminal/components/terminal.vue
+++ b/web/src/views/terminal/components/terminal.vue
@@ -381,8 +381,7 @@ const handleInputCommand = async (command) => {
   height: 100%;
 
   :deep(.el-tabs__content) {
-    flex: 1;
-    width: 100%;
+    // width: 100%;
     padding: 0 0 5px 0;
   }