✨ 新增全屏&UI调整

README.md

@@ -1,11 +1,15 @@
-# EasyNode
+# EasyNode v2.0
 
-> 一个简易的个人Linux服务器管理面板(基于Node.js).
+> 一个功能完善的Linux服务器SSH终端面板.
 
-> 前端仓库地址：https://github.com/chaos-zhu/easynode_web
+> [!WARNING]
+> 初次部署EasyNode，登录系统后务必记得修改默认账户密码 `admin/admin`！
 
-<!-- - [EasyNode](#easynode) -->
+> [!WARNING]
-  - [功能简介](#功能简介)
+> 强烈建议使用 **iptables** 或 **fail2ban** 等安全服务限制IP访问，谨慎暴露面板服务到公网。
+
+
+  <!-- - [功能简介](#功能简介)
   - [安装指南](#安装指南)
     - [服务端安装](#服务端安装)
       - [Docker镜像](#docker镜像)
@@ -135,11 +139,7 @@ wget -qO- --no-check-certificate https://ghproxy.com/https://raw.githubuserconte
 
 ## 升级指南
 
-- **v1.2 to v1.3**
+2.0版本无论前后端均作了大量的重构工作，1.0版本**不支持**无感升级到2.0版本
-
-因储存方式变更，需重新安装服务
-
-- **v1.1 to v1.2**
 
 ### 服务端
 
@@ -182,4 +182,4 @@ wget -qO- --no-check-certificate https://ghproxy.com/https://raw.githubuserconte
 
 ## License
 
-[MIT](LICENSE). Copyright (c).
+[MIT](LICENSE). Copyright (c). -->

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

@@ -2,10 +2,11 @@
   <div class="terminal_wrap">
     <div class="info_box">
       <div class="top">
+        <el-icon>
+          <FullScreen class="full_icon" @click="handleFullScreen" />
+        </el-icon>
         <el-dropdown trigger="click">
           <div class="action_wrap">
-            <!-- 全屏 -->
-            <el-icon><FullScreen /></el-icon>
             <span class="link_host">连接<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
           </div>
           <template #dropdown>
@@ -17,35 +18,13 @@
           </template>
         </el-dropdown>
       </div>
-      <InfoSide
+      <InfoSide ref="infoSideRef" v-model:show-input-command="showInputCommand" :host-info="curHost" :visible="visible"
-        ref="infoSideRef"
+        @click-input-command="clickInputCommand" />
-        v-model:show-input-command="showInputCommand"
-        :host-info="curHost"
-        :visible="visible"
-        @click-input-command="clickInputCommand"
-      />
     </div>
     <div class="terminals_sftp_wrap">
-      <!-- <el-button class="full-screen-button" type="success" @click="handleFullScreen">
+      <el-tabs v-model="activeTabIndex" type="border-card" tab-position="top" @tab-remove="removeTab"
-        {{ isFullScreen ? '退出全屏' : '全屏' }}
+        @tab-change="tabChange">
-      </el-button> -->
+        <el-tab-pane v-for="(item, index) in terminalTabs" :key="index" :label="item.name" :name="index" :closable="true">
-      <!-- <div class="visible" @click="handleVisibleSidebar">
-        <svg-icon name="icon-jiantou_zuoyouqiehuan" class="svg-icon" />
-      </div> -->
-      <el-tabs
-        v-model="activeTabIndex"
-        type="border-card"
-        tab-position="top"
-        @tab-remove="removeTab"
-        @tab-change="tabChange"
-      >
-        <el-tab-pane
-          v-for="(item, index) in terminalTabs"
-          :key="index"
-          :label="item.name"
-          :name="index"
-          :closable="true"
-        >
           <div class="tab_content_wrap" :style="{ height: mainHeight + 'px' }">
             <TerminalTab ref="terminalTabRefs" :host="item.host" />
             <Sftp :host="item.host" @resize="resizeTerminal" />
@@ -148,7 +127,7 @@ const removeTab = (index) => {
 
 const handleFullScreen = () => {
   if (isFullScreen.value) document.exitFullscreen()
-  else document.getElementsByClassName('tab_content_wrap')[0].requestFullscreen()
+  else document.getElementsByClassName('terminals_sftp_wrap')[0].requestFullscreen()
   isFullScreen.value = !isFullScreen.value
 }
 
@@ -183,7 +162,7 @@ const handleInputCommand = async (command) => {
   const curTabTerminal = terminalTabRefs.value[activeTabIndex.value]
   await $nextTick()
   curTabTerminal?.focusTab()
-  curTabTerminal.handleInputCommand(`${ command }\n`)
+  curTabTerminal.handleInputCommand(`${command}\n`)
   showInputCommand.value = false
 }
 </script>
@@ -213,20 +192,24 @@ const handleInputCommand = async (command) => {
     overflow: auto;
     display: flex;
     flex-direction: column;
+
     .top {
+      height: 39px;
+      flex-shrink: 0;
       position: sticky;
       top: 0px;
       z-index: 1;
       background-color: rgb(255, 255, 255);
-      padding-right: 15px;
+      padding: 0 15px;
       display: flex;
-      :deep(.el-dropdown) {
+      align-items: center;
-        margin-left: auto;
+      justify-content: space-between;
+      .full_icon {
+        font-size: 15px;
+        color: var(--el-color-primary);
+        cursor: pointer;
       }
       .action_wrap {
-        height: 39px;
-        display: flex;
-        align-items: center;
         .link_host {
           font-size: var(--el-font-size-base);
           color: var(--el-color-primary);
@@ -235,6 +218,7 @@ const handleInputCommand = async (command) => {
       }
     }
   }
+
   .terminals_sftp_wrap {
     height: 100%;
     overflow: hidden;
@@ -279,34 +263,3 @@ const handleInputCommand = async (command) => {
   }
 }
 </style>
-
-<style lang="scss">
-
-// .el-tabs__header {
-//   position: sticky;
-//   top: 0;
-//   z-index: 1;
-//   user-select: none;
-// }
-
-// .el-tabs__new-tab {
-//   position: absolute;
-//   left: 18px;
-//   font-size: 50px;
-//   z-index: 98;
-// }
-
-// .el-tabs--border-card {
-//   height: 100%;
-//   overflow: hidden;
-//   display: flex;
-//   flex-direction: column;
-// }
-
-// .el-icon.is-icon-close {
-//   font-size: 13px;
-//   position: absolute;
-//   right: 0px;
-//   top: 2px;
-// }
-</style>