NEZ-2446 feat：web terminal 样式调整

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%;

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)
+      if (this.terminalSocket && this.terminal.isLogin) {
-      setTimeout(()=>{
+        this.terminalSocket.send(message)
-        this.terminalSocket.send('\n')
+        setTimeout(()=>{
-      }, 100)
+          this.terminalSocket.send('\n')
+        }, 100)
+      }
     }
   },
   mounted () {

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">
+      <span v-show="editPathShow" style="display: inline-block;flex: 1;padding-right: 40px">
-        <el-input  v-model="editPath" size="small" @keyup.enter.native="goEditPath"/>
+        <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"/>
+            <i class="nz-icon nz-icon-Folder colorFA901C" style="margin-right: 3px"/>
-            {{$t('terminal.back')}}
+            <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)

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) => {

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) {

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,

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(