✨ 优化终端回显

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.2.2](https://github.com/chaos-zhu/easynode/releases) (2024-08-xx)
+
+### Features
+
+* 支持菜单栏的折叠与展开 ✔
+
 ## [2.2.1](https://github.com/chaos-zhu/easynode/releases) (2024-08-18)
 
 ### Features

web/src/assets/scss/element/dark.scss

@@ -64,94 +64,17 @@ html.dark {
   }
 
   // scroll-bar
-  ::-webkit-scrollbar {
-    background-color: var(--el-scrollbar-bg-color) !important;
-  }
-
   ::-webkit-scrollbar-thumb {
-    background-color: var(--el-border-color-darker) !important;
+    background-color: #5c5c5c;
+    border-radius: 10px;
+    transition: all .2s ease-in-out;
   }
-
+  ::-webkit-scrollbar-thumb:hover {
-  .layout-sidebar-container {
+    cursor: pointer;
-    background-color: var(--bg-color) !important;
+    background-color: #6d6d6d;
   }
 
-  .app-main-container {
-    background-color: var(--main-bg-color) !important;
-
-    .card {
-      background-color: var(--bg-color) !important;
-    }
-  }
-
-  .layout-footer-container {
-    color: var(--el-text-color-regular) !important;
-    background-color: var(--main-bg-color) !important;
-  }
-
-  .fold-unfold {
-    color: #fff !important;
-  }
-
-  // .el-menu,
-  // .el-sub-menu,
-  // .el-menu-item,
-  // .el-sub-menu__title {
-  //   background-color: var(--bg-color) !important;
-
-  //   &:not(.is-active) {
-  //     color: #bdbdc0 !important;
-  //   }
-
-  //   &.is-active {
-  //     color: #fff !important;
-  //     background-color: #000 !important;
-  //   }
-  // }
-
   .el-menu-item:not(.is-active):hover {
     color: var(--el-menu-active-color);
   }
-
-  .nav-bar-container {
-    background-color: var(--bg-color) !important;
-  }
-
-  .table-header {
-    .el-icon {
-      color: #fff;
-    }
-  }
-
-  .tabs-bar-container {
-    background-color: var(--bg-color) !important;
-    border-top: 1px solid var(--el-border-color-light) !important;
-
-    .tabs-action {
-      .el-icon {
-        color: #fff !important;
-      }
-    }
-
-    .fold-unfold {
-      color: #fff;
-    }
-
-    .el-tabs__item.is-active {
-      color: var(--el-color-primary);
-      background-color: var(--main-bg-color) !important;
-
-      .el-icon {
-        color: var(--el-color-primary) !important;
-      }
-    }
-
-    .el-tabs__item:not(.is_active):hover {
-      background-color: var(--main-bg-color) !important;
-
-      .el-icon {
-        color: var(--el-color-primary) !important;
-      }
-    }
-  }
 }

web/src/assets/scss/global.scss

@@ -1,35 +1,45 @@
 // 滚动条
-html, body, div, ul, section, textarea {
+html,
+body,
+div,
+ul,
+section,
+textarea {
   box-sizing: border-box;
+
   // 滚动条整体部分
   &::-webkit-scrollbar {
-    height: 5px;
+    width: 6px;
-    width: 5px;
+    height: 6px;
-    background-color: #ffffff;
   }
 
   // 底层轨道
-  &::-webkit-scrollbar-track {
+  // &::-webkit-scrollbar-track {
-    background-color: #ffffff;
+  //   background-color: #ffffff;
-    border-radius: 3px;
+  //   border-radius: 3px;
-  }
+  // }
 
   // 滚动滑块
   &::-webkit-scrollbar-thumb {
-    border-radius: 3px;
+    background-color: #0003;
-    // background-color: #1989fa;
+    border-radius: 10px;
-    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#a18cd1), to(#fbc2eb), color-stop(.6, #54DE5D));
+    transition: all .2s ease-in-out;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: #067ef7;
+    cursor: pointer;
+    background-color: #0000004d;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 10px;
   }
 }
 
 ::view-transition-new(root),
 ::view-transition-old(root) {
-/* 关闭默认动画，否则影响自定义动画的执行 */
+  /* 关闭默认动画，否则影响自定义动画的执行 */
-   animation: none;
+  animation: none;
 }
 
 // 全局背景
@@ -44,4 +54,4 @@ body {
 .link {
   color: var(--el-color-primary);
   cursor: pointer;
-}
+}

web/src/views/terminal/components/terminal-tab.vue

@@ -240,19 +240,21 @@ const onResize = () => {
 
 const handleResize = () => {
   if (timer.value) clearTimeout(timer.value)
-  timer.value = setTimeout(() => {
+  timer.value = setTimeout(async () => {
-    // let temp = []
+    // 由于非当前的el-tab-pane的display属性为none, 调用fitAddon.value?.fit()时无法获取宽高，因此先展示，再fit，最后再隐藏
-    // let panes = Array.from(document.getElementsByClassName('el-tab-pane'))
+    let temp = []
-    // panes.forEach((item, index) => {
+    let panes = Array.from(document.getElementsByClassName('el-tab-pane'))
-    //   temp[index] = item.style.display
+    panes.forEach((item, index) => {
-    //   item.style.display = 'block'
+      temp[index] = item.style.display
-    // })
+      item.style.display = 'block'
-    // panes.forEach((item, index) => {
+    })
-    //   item.style.display = temp[index]
-    // })
     fitAddon.value?.fit()
     let { rows, cols } = term.value
     socket.value?.emit('resize', { rows, cols })
+
+    panes.forEach((item, index) => {
+      item.style.display = temp[index]
+    })
   }, 200)
 }
 
@@ -432,10 +434,12 @@ defineExpose({
       height: 100%;
     }
 
-    :deep(.xterm-viewport),
+    :deep(.xterm-viewport) {
+      overflow-y: auto;
+    }
+
     :deep(.xterm-screen) {
       padding: 0 0 0 10px;
-      border-radius: var(--el-border-radius-base);
     }
   }
   .terminal_command_history {

web/src/views/terminal/components/terminal.vue

@@ -27,16 +27,22 @@
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <!-- <el-dropdown trigger="click" max-height="50vh">
+        <el-dropdown trigger="click">
-          <span class="link_text">主题<el-icon><arrow-down /></el-icon></span>
+          <span class="link_text">分屏<el-icon><arrow-down /></el-icon></span>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item v-for="(value, key) in themeList" :key="key" @click="handleChangeTheme(key)">
+              <el-dropdown-item @click="handleFullScreen">
-                <span :style="{color: key === themeName ? 'var(--el-menu-active-color)' : ''}">{{ key }}</span>
+                <span>双屏</span>
+              </el-dropdown-item>
+              <el-dropdown-item @click="handleFullScreen">
+                <span>三屏</span>
+              </el-dropdown-item>
+              <el-dropdown-item @click="handleFullScreen">
+                <span>四屏</span>
               </el-dropdown-item>
             </el-dropdown-menu>
           </template>
-        </el-dropdown> -->
+        </el-dropdown>
         <el-dropdown trigger="click">
           <span class="link_text">设置<el-icon><arrow-down /></el-icon></span>
           <template #dropdown>
@@ -50,11 +56,6 @@
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <!-- <el-dropdown trigger="click">
-          <span class="link_text">设置
-            <el-icon class="hidden_icon"><arrow-down /></el-icon>
-          </span>
-        </el-dropdown> -->
       </div>
       <div class="right_overview">
         <div class="switch_wrap">