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

2022-11-23 18:38:00 +08:00
parent 9566167ad5
commit 90b88d99f2
6 changed files with 103 additions and 28 deletions
--- a/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss
+++ b/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss
@@ -14,8 +14,19 @@
    background: #1E1E1E;
    box-sizing: border-box;
    color: #ffffff;
-    i {
-      margin-right: 22px;
+    .header-option{
+      >i {
+        margin-right: 22px;
+      }
+    }
+    .breadcrumb-item{
+      color: #ffffff
+    }
+    .breadcrumb-action{
+      cursor: pointer;
+    }
+    .breadcrumb-action:hover{
+      color: $--color-primary;
    }
  }
  .file-directory-content{
@@ -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;
  }
 }
--- a/nezha-fronted/src/assets/css/components/cli/fileListState.scss
+++ b/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;
+  }
 }
--- a/nezha-fronted/src/components/cli/console.vue
+++ b/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
--- a/nezha-fronted/src/components/cli/fileDirectory.vue
+++ b/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">
+      <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"
-      :append-to-body="true"
-      :width="'400px'"
-      >
+      @close="newFolder(false)"
+    >
      <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">
-        <el-button @click="newFolder(false)" size="small">{{$t('overall.cancel')}}</el-button>
-        <el-button type="primary" @click="newFolder(true)" size="small">{{$t('overall.create')}}</el-button>
-      </span>
+      <div slot="footer">
+        <div class="el-message-box__btns">
+          <button class="nz-btn el-button el-button--small el-button--default" @click="newFolder(false)">
+            <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
--- a/nezha-fronted/src/components/cli/fileListState.vue
+++ b/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.$store.dispatch('dispatchFileList', arr)
+      this.fileList.forEach(item => {
+        this.removeRecord(item)
+      })
+      setTimeout(() => {
+        this.$store.dispatch('dispatchFileList', [])
+      })
    }
  }
 }
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -326,9 +326,9 @@ export default {
      isFullScreen: false,
      closeConfirmShow: false,
      closeRemember: false,
-      initConsoleHeight: 300, // 只读,初始化高度
-      consoleHeight: 250, // console高度
-      resizeConsoleHeight: 250, // resize后的高度，用于记录最大化、最小化前的高度
+      initConsoleHeight: 500, // 只读,初始化高度
+      consoleHeight: 450, // console高度
+      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)
      }
-      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
      }