NEZ-2446 feat：web terminal 样式调整

2022-12-14 17:36:52 +08:00
parent 44ef5ac612
commit 69b4faf3d2
7 changed files with 84 additions and 19 deletions
--- a/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss
+++ b/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss
@@ -72,6 +72,9 @@
        margin-right: 20px;
      }
    }
+    .el-input--suffix .el-input__inner{
+      padding-right: 106px;
+    }
  }
  .file-directory-content{
    height: calc(100% - 60px);
@@ -100,6 +103,14 @@
    box-sizing: border-box;
    padding-left: 10px;
    display: inline-block;
+    position: relative;
+    .nz-icon-link{
+      position: absolute;
+      font-size: 10px;
+      left: 7px;
+      bottom: -5px;
+      font-weight: 600;
+    }
  }
  .file-size{
    width: 15%;
--- a/nezha-fronted/src/components/cli/consoleNew.vue
+++ b/nezha-fronted/src/components/cli/consoleNew.vue
@@ -249,6 +249,7 @@ export default {
    closeSocket () {
      if (this.terminalSocket) {
        this.terminalSocket.close()
+        this.terminalSocket = ''
      }
      if (this.term) {
        this.term.destroy()
@@ -305,10 +306,12 @@ export default {
      })
    },
    enterStr (message) {
-      this.terminalSocket.send(message)
-      setTimeout(()=>{
-        this.terminalSocket.send('\n')
-      }, 100)
+      if (this.terminalSocket && this.terminal.isLogin) {
+        this.terminalSocket.send(message)
+        setTimeout(()=>{
+          this.terminalSocket.send('\n')
+        }, 100)
+      }
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/cli/fileDirectory.vue
+++ b/nezha-fronted/src/components/cli/fileDirectory.vue
@@ -15,8 +15,12 @@
          </span>
          <i class="nz-icon nz-icon-edit" @click="showEditPath"/>
        </span>
-      <span v-show="editPathShow">
-        <el-input  v-model="editPath" size="small" @keyup.enter.native="goEditPath"/>
+      <span v-show="editPathShow" style="display: inline-block;flex: 1;padding-right: 40px">
+        <el-input  v-model="editPath" size="mini" @keyup.enter.native="goEditPath">
+          <span slot="suffix">
+            {{$t('terminal.confirm')}}
+          </span>
+        </el-input>
      </span>
      <div class="path-option">
        <span style="margin-right: 5px">Show hide File: </span>
@@ -29,7 +33,19 @@
    <div style="padding: 0 20px;height: calc(100% - 50px)" v-my-loading="fileDirectoryLoading">
      <div class="directory-content-header">
        <div class="text-ellipsis file-name">
-          {{$t('overall.name')}}
+          <div class="file-arrow-header" >
+            <div>
+              {{$t('overall.name')}}
+            </div>
+            <div class="nz-arrow-box">
+              <div class="nz-arrow-up" :class="{
+            'is-select': nameOrderType === 'asc'
+            }" @click="orderBy('nameOrderType','asc' , 'size')"></div>
+              <div class="nz-arrow-down" :class="{
+            'is-select': nameOrderType === 'desc'
+            }" @click="orderBy('nameOrderType','desc', 'size')"></div>
+            </div>
+          </div>
        </div>
        <div class="text-ellipsis file-size">
          <div class="file-arrow-header" >
@@ -66,16 +82,18 @@
        </div>
      </div>
      <div class="file-directory-content">
-        <div v-if="fileDirectory !== '/'" @click="backFileDirectory" class="file-item">
+        <div v-if="fileDirectory !== '/'" @dblclick.prevent="backFileDirectory" class="file-item">
          <div class="text-ellipsis file-name">
-            <i class="nz-icon nz-icon-a-upperlevel" style="margin-right: 10px"/>
-            {{$t('terminal.back')}}
+            <i class="nz-icon nz-icon-Folder colorFA901C" style="margin-right: 3px"/>
+            <i class="nz-icon nz-icon-more1"/>
+<!--            {{$t('terminal.back')}}-->
          </div>
        </div>
-        <div v-for="(item,index) in fileList" :key="index" class="file-item" @click="selectFile(item)">
+        <div v-for="(item,index) in fileList" :key="index" class="file-item" onselectstart="return false;" style="-moz-user-select:none;" @dblclick.prevent="selectFile(item)">
          <div class="text-ellipsis file-name">
            <i class="nz-icon" :class="selIcon(item)"/>
-            {{item.name}}
+            <i class="nz-icon nz-icon-link" v-if="item.isLink"/>
+            {{item.name}} <span v-if="item.isLink">-> {{item.linkName}}</span>
          </div>
          <div class="text-ellipsis file-size">
            <span v-if="!item.isDir">{{bytes(item.size, 0, 0)}}</span>
@@ -243,6 +261,7 @@ export default {
      fileDirectory: '/',
      sizeOrderType: 0,
      dateOrderType: 0,
+      nameOrderType: 0,
      breadcrumb: [],
      fileList: [],
      oldFileList: [],
@@ -326,6 +345,7 @@ export default {
        const path = this.fileDirectory == '/' ? '' : this.fileDirectory
        this.getSftpPath(path + '/' + item.name)
      }
+      return false
    },
    showFileInfo (item) {
      this.fileInfo = item
@@ -352,6 +372,7 @@ export default {
      arr.pop()
      const path = arr.join('/')
      this.getSftpPath(path || '/')
+      return false
    },
    gotoPath (item, index) {
      const path = '/' + this.breadcrumb.slice(0, index + 1).join('/')
@@ -455,6 +476,15 @@ export default {
      if (item.isReg) {
        return 'nz-icon-File'
      }
+      if (item.isFifo) {
+        return 'nz-icon-guandaowenjian'
+      }
+      if (item.isSock) {
+        return 'nz-icon-taojieziwenjian'
+      }
+      if (item.isBlk) {
+        return 'nz-icon-kuaishebeiwenjian'
+      }
      return 'nz-icon-File'
    },
    selInfo (item, key) {
@@ -491,10 +521,10 @@ export default {
        return this.momentTz(item.uts * 1000)
      }
      if (key === 'Owner') {
-        return 'Owner'
+        return item.uid
      }
      if (key === 'group') {
-        return 'group'
+        return item.gid
      }
      if (key === 'permissionsString') {
        return item.permissionsString
@@ -505,6 +535,9 @@ export default {
      if (this[key] == orderType) {
        this[key] = 0
        this.fileList = this.oldFileList
+      } else if (orderType == 'nameOrderType') {
+        this[key] = orderType
+        this.fileList = this.$loadsh.orderBy(this.oldFileList, [user => user.name.toLowerCase()], [orderType])
      } else {
        this[key] = orderType
        this.fileList = this.$loadsh.orderBy(this.oldFileList, order, orderType)
--- a/nezha-fronted/src/components/cli/webSSHNew.vue
+++ b/nezha-fronted/src/components/cli/webSSHNew.vue
@@ -20,6 +20,7 @@
            <el-popover
              slot="label"
              placement="bottom"
+              :ref="'popover' + index"
              width="180"
              trigger="click"
              :popper-class="'popover-webshell popover-webshell-new'"
@@ -572,6 +573,7 @@ export default {
        name: newTabName,
        circleColor: 1, // 1 grey,2 green, 3 red
        uuid: uuid,
+        showTooltip: false,
        terminal: {
          name: newTabName,
          cols: 225,
@@ -619,6 +621,10 @@ export default {
      if (item.terminal.assetId) {
        const newTabName = ++this.tabIndex + ''
        this.editableTabsValue = newTabName
+        const console = JSON.parse(JSON.stringify(item))
+        console.name = newTabName
+        console.terminal.name = newTabName
+        console.terminal.isLogin = false
        this.editableTabs.push(console)
      } else {
        this.customConnect = {
@@ -628,6 +634,9 @@ export default {
        }
        this.customShow = true
      }
+      if (this.$refs['popover' + index] && this.$refs['popover' + index][0]) {
+        this.$refs['popover' + index][0].doClose()
+      }
    },
    debounce (operate, delay) {
      let time = null
@@ -653,12 +662,21 @@ export default {
    },
    reconnect (item, index) {
      this.$refs['console' + index][0].reconnect()
+      if (this.$refs['popover' + index] && this.$refs['popover' + index][0]) {
+        this.$refs['popover' + index][0].doClose()
+      }
    },
    showFileDir (item, index) {
      this.$refs['console' + index][0].showFileDir(true)
+      if (this.$refs['popover' + index] && this.$refs['popover' + index][0]) {
+        this.$refs['popover' + index][0].doClose()
+      }
    },
    closeShell (item, index) {
      this.removeTab(item.name)
+      if (this.$refs['popover' + index] && this.$refs['popover' + index][0]) {
+        this.$refs['popover' + index][0].doClose()
+      }
    },
    sendMessage (message) {
      this.editableTabs.forEach((item, index) => {
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -8,7 +8,7 @@ import VueResource from 'vue-resource'
 import bus from '@/libs/bus'
 Vue.use(VueResource)

-const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state', '/sys/appearance', '/i18n', '/externalTerminal'] // 免登陆白名单
+const loginWhiteList = ['/setup', '/sys/license/upload', '/sys/license/state', '/sys/appearance', '/i18n', '/terminal'] // 免登陆白名单
 const permissionWhiteList = ['/profile', '/menu', ...loginWhiteList] // 权限白名单
 router.beforeEach((to, from, next) => {
  if (window.entrance) {
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -177,7 +177,7 @@ export default new Router({
          component: resolve => require(['@/components/page/config/monitor'], resolve)
        },
        {
-          path: '/terminal',
+          path: '/terminalSetting',
          component: resolve => require(['@/components/page/config/terminal'], resolve)
        },
        {
@@ -223,7 +223,7 @@ export default new Router({
      ]
    },
    {
-      path: '/externalTerminal',
+      path: '/terminal',
      component: resolve => require(['@/components/cli/terminal'], resolve),
      meta: {
        hideHeader: true,
--- a/nezha-fronted/src/store/terminalFile.js
+++ b/nezha-fronted/src/store/terminalFile.js
@@ -33,7 +33,7 @@ const terminalFile = {
        })
      }
      if (state.externalTerminal) {
-        state.externalTerminalWindow = window.open('/ui/externalTerminal', 'terminal')
+        state.externalTerminalWindow = window.open('/ui/terminal', 'terminal')
      } else {
        state.externalTerminalWindow = ''
      }
@@ -51,7 +51,7 @@ const terminalFile = {
      if (state.externalTerminalWindow) {
        window.open('', 'terminal')
      } else {
-        state.externalTerminalWindow = window.open('/ui/externalTerminal', 'terminal')
+        state.externalTerminalWindow = window.open('/ui/terminal', 'terminal')
      }
      if (item) {
        state.externalTerminalWindow.postMessage(