fix： termail 文件上传下载 样式调整

nezha-fronted/src/assets/css/components/cli/fileDirectory.scss

@@ -14,10 +14,21 @@
     background: #1E1E1E;
     box-sizing: border-box;
     color: #ffffff;
-    i {
+    .header-option{
+      >i {
         margin-right: 22px;
       }
     }
+    .breadcrumb-item{
+      color: #ffffff
+    }
+    .breadcrumb-action{
+      cursor: pointer;
+    }
+    .breadcrumb-action:hover{
+      color: $--color-primary;
+    }
+  }
   .file-directory-content{
     height: calc(100% - 26px);
     width: calc(100% - 15px);
@@ -34,7 +45,10 @@
   .file-directory-content::-webkit-scrollbar-thumb:hover {
     background: rgba(244,244,244,0.16);
     border-radius: 4px;
-    border:none
+    border:none;
+    .file-feature{
+      display: none;
+    }
   }
   .file-item{
     font-family: Roboto-Regular;
@@ -54,6 +68,7 @@
     .file-feature{
       width: 100px;
       flex-shrink: 1;
+      opacity: 0;
       >.nz-icon-download1 {
         margin-right: 24px;
       }
@@ -73,5 +88,11 @@
     color: #FF9230;
     line-height: 21px;
     font-weight: 400;
+    .file-feature{
+      opacity: 1;
+    }
+  }
+  .my-loading-box{
+    background: #1a1a1a;
   }
 }

nezha-fronted/src/assets/css/components/cli/fileListState.scss

@@ -28,6 +28,11 @@
     box-shadow: 0 1px 0 0 #19191C;
     padding: 0 20px;
     line-height: 48px;
+    display: flex;
+    justify-content: space-between;
+    > i {
+      color: #ffffff;
+    }
   }
   .file-state-panel-title{
     font-size: 14px;
@@ -110,4 +115,7 @@
   .translationOriginDown{
     transform-origin: 70% 0%
   }
+  .el-progress-bar__outer{
+    background-color: #19191C;
+  }
 }

nezha-fronted/src/components/cli/console.vue

@@ -10,7 +10,7 @@
     <div :id="'ternimalContainer'+idIndex" class="console">
       <div class="ternimal-header">
         <span style="color: #fff">
-          <div class="active-icon green-bg"></div>
+          <div class="active-icon" :class="isLogin ? 'green-bg': 'red-bg'"></div>
           {{userName}}
         </span>
         <span  style="color: #fff" v-show="isLogin">
@@ -19,7 +19,7 @@
         </span>
       </div>
         <div :id="'terminal'+idIndex" ></div>
-      <fileDirectory :uuid="terminal.uuid" v-show="fileDirectoryShow" @close="showFileDir(false)" :fileDirectoryShow="fileDirectoryShow" ref="fileDirectory"/>
+      <fileDirectory v-clickoutside="closeFileDir" :uuid="terminal.uuid" v-show="fileDirectoryShow" @close="showFileDir(false)" :fileDirectoryShow="fileDirectoryShow" ref="fileDirectory"/>
     </div>
 </template>
 <script>
@@ -194,7 +194,6 @@ export default {
         authPinTip: this.$loadsh.get(this.terminal, 'custom.authPinTip', '')
       }
       this.$post('/terminal/login', params).then(res => {
-        this.isLogin = true
         if (res.code == 200) {
           this.terminal.uuid = res.data.uuid
           this.userName = res.data.authUsername + '@' + res.data.host
@@ -232,6 +231,7 @@ export default {
       this.terminalSocket = new WebSocket(url)
       // 连接成功
       this.terminalSocket.onopen = () => {
+        this.isLogin = true
       }
       // 登录后，你输入的内容从后台服务返回
       this.term.on('data', function (data) {
@@ -245,7 +245,9 @@ export default {
       // 返回
       this.terminalSocket.onmessage = function (evt) {
         let backContent = evt.data
-
+        if (backContent.indexOf('Connection closed') !== -1 && backContent.indexOf('logout') !== -1) {
+          that.isLogin = false
+        }
         const welComIndex = backContent.indexOf(that.welcomeBackContent)
         if (welComIndex > -1) { // 无服务器信息（只与nezha进行了连接）
           const connectResult = {
@@ -288,13 +290,18 @@ export default {
       }
       // 关闭
       this.terminalSocket.onclose = () => {
+        this.isLogin = false
+        console.log(this.isLogin, 'close')
         // 报错sorry的，还没来得及看信息就关闭
         // this.$emit("closeConsole",this.terminal.name);//
         this.term && this.term.setOption('disableStdin', true)
       }
 
       // 错误
-      this.terminalSocket.onerror = (e) => {}
+      this.terminalSocket.onerror = (e) => {
+        this.isLogin = false
+        console.log(this.isLogin, 'close')
+      }
       // 选中 复制
       this.term.on('selection', function () {})
       this.term.attachCustomKeyEventHandler(function (ev) { })
@@ -353,6 +360,9 @@ export default {
       this.term.off('data')
       this.beforeCreate()
     },
+    closeFileDir () {
+      this.showFileDir(false)
+    },
     showFileDir (show) {
       if (JSON.stringify(show) == JSON.stringify(this.fileDirectoryShow)) {
         return

nezha-fronted/src/components/cli/fileDirectory.vue

@@ -1,8 +1,16 @@
 <template>
   <div class="fileDirectory" style="width: 100% !important;transform: scale(1) !important;">
     <div class="file-directory-header">
-      <span style="color: #fff">{{$t('terminal.sftp')}} <span style="color: #B7B7B7">{{fileDirectory}}</span></span>
       <span style="color: #fff">
+        {{$t('terminal.sftp')}}
+        <span style="color: #B7B7B7;margin-left: 10px">
+          <span @click="getSftpPath('/')" class="breadcrumb-item breadcrumb-action"><i class="nz-icon nz-icon-Computer"/></span>
+          <span v-for="(item,index) in breadcrumb" :key="index" class="breadcrumb-item">
+            /<span class="breadcrumb-action" @click="gotoPath(item,index)">{{item}}</span>
+          </span>
+        </span>
+      </span>
+      <span  style="color: #fff" class="header-option">
           <i class="nz-icon nz-icon-a-newfolder" @click="newFolderBoxShow = true"></i>
           <i class="nz-icon nz-icon-upload" @click="uploadFile"></i>
           <i class="nz-icon nz-icon-close" @click="$emit('close')"></i>
@@ -26,20 +34,29 @@
       </div>
     </div>
     <el-dialog
+      class="nz-dialog snapshot-dialog"
+      width="472px"
       :title='$t("overall.newFolder")'
+      destroy-on-close
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
       :visible.sync="newFolderBoxShow"
-      :modal-append-to-body="true"
+      @close="newFolder(false)"
-      :append-to-body="true"
-      :width="'400px'"
     >
       <div style="display: flex; align-items: center">
         <div style="width: 100px;flex-shrink: 1">{{$t('overall.folderName')}}</div>
         <el-input v-model="folder" size="small" style="flex: 1"/>
       </div>
-      <span slot="footer" class="dialog-footer">
+      <div slot="footer">
-        <el-button @click="newFolder(false)" size="small">{{$t('overall.cancel')}}</el-button>
+        <div class="el-message-box__btns">
-        <el-button type="primary" @click="newFolder(true)" size="small">{{$t('overall.create')}}</el-button>
+          <button class="nz-btn el-button el-button--small el-button--default" @click="newFolder(false)">
-      </span>
+            <span>{{$t('overall.cancel')}}</span>
+          </button>
+          <button class="nz-btn el-button--small nz-btn-style-normal" @click="newFolder(true)">
+            <span style="text-transform:Capitalize">{{$t('overall.create')}}</span>
+          </button>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -55,6 +72,7 @@ export default {
   data () {
     return {
       fileDirectory: '/',
+      breadcrumb: [],
       fileList: [],
       newFolderBoxShow: false,
       folder: '',
@@ -124,7 +142,14 @@ export default {
       const path = arr.join('/')
       this.getSftpPath(path || '/')
     },
+    gotoPath (item, index) {
+      console.log(item, index, this.breadcrumb.slice(0, index + 1))
+      const path = '/' + this.breadcrumb.slice(0, index + 1).join('/')
+      console.log(path)
+      this.getSftpPath(path || '/')
+    },
     getSftpPath (path) {
+      this.breadcrumb = path.split('/').filter(item => item)
       const params = {
         uuid: this.uuid,
         path: path

nezha-fronted/src/components/cli/fileListState.vue

@@ -3,7 +3,7 @@
 <!--    显示进度-->
     <div class="file-state-panel" v-show="fileStateBox && fileList.length" :style="{'top': position.top + 'px', right: '10px'}" ref="fileStatePanel" :class="position.top>0? 'translationOriginDown': 'translationOriginUp'">
       <div class="file-state-panel-header">
-        <span class="file-state-panel-title">{{$t('terminal.filetransfer')}}}</span>
+        <span class="file-state-panel-title">{{$t('terminal.filetransfer')}}</span>
         <i class="nz-icon nz-icon-Clear" @click="clearFileList"></i>
       </div>
       <div class="file-state-panel-content" v-if="fileList.length">
@@ -76,6 +76,9 @@ export default {
     fileList: {
       immediate: true,
       handler (n) {
+        if (!n.length) {
+          this.fileStateBox = false
+        }
         n.forEach(item => {
           if (!item.isStart) {
             item.total = 1
@@ -224,7 +227,7 @@ export default {
         }
       })
     },
-    nextUpload (item, tid){
+    nextUpload (item, tid) {
       // this.$message.success(response.msg)
       item.timer = setInterval(() => { // 上传 50-100
         item.tid = tid
@@ -266,8 +269,12 @@ export default {
       })
     },
     clearFileList () {
-      const arr = this.fileList.filter(item => !item.isFinish)
+      this.fileList.forEach(item => {
-      this.$store.dispatch('dispatchFileList', arr)
+        this.removeRecord(item)
+      })
+      setTimeout(() => {
+        this.$store.dispatch('dispatchFileList', [])
+      })
     }
   }
 }

nezha-fronted/src/components/cli/webSSH.vue

@@ -326,9 +326,9 @@ export default {
       isFullScreen: false,
       closeConfirmShow: false,
       closeRemember: false,
-      initConsoleHeight: 300, // 只读,初始化高度
+      initConsoleHeight: 500, // 只读,初始化高度
-      consoleHeight: 250, // console高度
+      consoleHeight: 450, // console高度
-      resizeConsoleHeight: 250, // resize后的高度，用于记录最大化、最小化前的高度
+      resizeConsoleHeight: 450, // resize后的高度，用于记录最大化、最小化前的高度
       currentTransform: 0,
       editableTabsValue: '-1', // 当前显示的console
       currentIndex: '-1',
@@ -545,10 +545,10 @@ export default {
           this.editableTabsValue = newTabName
           this.editableTabs.push(console)
         })
-        return
+      } else {
-      }
         this.editableTabsValue = newTabName
         this.editableTabs.push(console)
+      }
       setTimeout(function () {
         const tabScroll = document.getElementsByClassName('el-tabs__nav is-top')
         const tabViewWidth = document.getElementsByClassName('el-tabs__nav-scroll')
@@ -1042,6 +1042,10 @@ export default {
           })
           const targetDiv = document.getElementById('shell-service')
           targetDiv.style.height = this.webSSHHeight
+          if (!this.webSSHHeight) {
+            this.initConsoleHeight = this.initConsoleHeight > window.innerHeight * 0.4 ? this.initConsoleHeight : window.innerHeight
+            targetDiv.style.height = this.initConsoleHeight + 'px'
+          }
         }
         this.$store.state.consoleShow = false
       }