NEZ-2514 fix ： Web terminal界面样式调整

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

@@ -159,7 +159,7 @@
     height: 24px;
   }
   .file-item:hover{
-    background: rgba(255,134,0,0.50);
+    background: $--table-row-hover-background-color;
     font-family: Roboto-Regular;
   }
   .my-loading-box{
@@ -185,6 +185,10 @@
       flex-shrink: 1;
     }
   }
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
 }
 div.nz-arrow-up {
   width:0px;

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

@@ -30,6 +30,7 @@
     line-height: 48px;
     display: flex;
     justify-content: space-between;
+    margin-bottom: 8px;
     > i {
       color: $--color-text-primary;
     }

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

@@ -178,6 +178,23 @@
       width: 20px;
       margin-right: 10px;
     }
+    .personal-avatar {
+      cursor: pointer;
+      span {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+        text-align: center;
+        line-height: 24px;
+        background: $--profile-span-background-color;
+        font-size: 14px;
+        color: $--profile-span-color;
+        letter-spacing: 0;
+        font-weight: 500;
+        text-transform: capitalize;
+        border-radius: 100%;
+      }
+    }
   }
   .right-tip {
     position: absolute;

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,90 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "33693407",
+      "name": "普通文件",
+      "font_class": "putongwenjian",
+      "unicode": "e7bf",
+      "unicode_decimal": 59327
+    },
+    {
+      "icon_id": "33693408",
+      "name": "目录文件",
+      "font_class": "muluwenjian",
+      "unicode": "e7c0",
+      "unicode_decimal": 59328
+    },
+    {
+      "icon_id": "33693409",
+      "name": "块设备文件",
+      "font_class": "kuaishebeiwenjian",
+      "unicode": "e7c1",
+      "unicode_decimal": 59329
+    },
+    {
+      "icon_id": "33693410",
+      "name": "目录文件链接",
+      "font_class": "muluwenjianlianjie",
+      "unicode": "e7c2",
+      "unicode_decimal": 59330
+    },
+    {
+      "icon_id": "33693411",
+      "name": "普通文件链接",
+      "font_class": "putongwenjianlianjie",
+      "unicode": "e7c3",
+      "unicode_decimal": 59331
+    },
+    {
+      "icon_id": "33693412",
+      "name": "管道文件链接",
+      "font_class": "guandaowenjianlianjie",
+      "unicode": "e7c4",
+      "unicode_decimal": 59332
+    },
+    {
+      "icon_id": "33693413",
+      "name": "24gl-fileText",
+      "font_class": "taojieziwenjian",
+      "unicode": "e7c5",
+      "unicode_decimal": 59333
+    },
+    {
+      "icon_id": "33693414",
+      "name": "管道文件",
+      "font_class": "guandaowenjian",
+      "unicode": "e7c7",
+      "unicode_decimal": 59335
+    },
+    {
+      "icon_id": "33693415",
+      "name": "套接字文件链接",
+      "font_class": "taojieziwenjianlianjie",
+      "unicode": "e7c8",
+      "unicode_decimal": 59336
+    },
+    {
+      "icon_id": "33693416",
+      "name": "链接文件",
+      "font_class": "lianjiewenjian",
+      "unicode": "e7c9",
+      "unicode_decimal": 59337
+    },
+    {
+      "icon_id": "33693417",
+      "name": "字符设备文件",
+      "font_class": "zifushebeiwenjian1",
+      "unicode": "e7ca",
+      "unicode_decimal": 59338
+    },
+    {
+      "icon_id": "33693418",
+      "name": "字符设备文件链接",
+      "font_class": "zifushebeiwenjianlianjie",
+      "unicode": "e7cb",
+      "unicode_decimal": 59339
+    },
     {
       "icon_id": "16639137",
       "name": "history",
@@ -33,13 +117,6 @@
       "unicode": "e7bd",
       "unicode_decimal": 59325
     },
-    {
-      "icon_id": "33343790",
-      "name": "目录链接",
-      "font_class": "mululianjie1",
-      "unicode": "e7bc",
-      "unicode_decimal": 59324
-    },
     {
       "icon_id": "680988",
       "name": "属性",
@@ -47,76 +124,6 @@
       "unicode": "e785",
       "unicode_decimal": 59269
     },
-    {
-      "icon_id": "33167519",
-      "name": "套接字文件",
-      "font_class": "taojieziwenjian",
-      "unicode": "e7bb",
-      "unicode_decimal": 59323
-    },
-    {
-      "icon_id": "33165863",
-      "name": "套接字文件链接",
-      "font_class": "taojieziwenjianlianjie",
-      "unicode": "e7ba",
-      "unicode_decimal": 59322
-    },
-    {
-      "icon_id": "33158668",
-      "name": "文件链接",
-      "font_class": "wenjianlianjie",
-      "unicode": "e7b5",
-      "unicode_decimal": 59317
-    },
-    {
-      "icon_id": "33158669",
-      "name": "管道文件链接",
-      "font_class": "guandaowenjianlianjie",
-      "unicode": "e7b6",
-      "unicode_decimal": 59318
-    },
-    {
-      "icon_id": "33158670",
-      "name": "块设备文件链接",
-      "font_class": "kuaishebeiwenjianlianjie",
-      "unicode": "e7b7",
-      "unicode_decimal": 59319
-    },
-    {
-      "icon_id": "33158671",
-      "name": "字符串设备文件链接",
-      "font_class": "zifuchuanshebeiwenjianlianjie",
-      "unicode": "e7b8",
-      "unicode_decimal": 59320
-    },
-    {
-      "icon_id": "33158636",
-      "name": "管道文件",
-      "font_class": "guandaowenjian",
-      "unicode": "e7b1",
-      "unicode_decimal": 59313
-    },
-    {
-      "icon_id": "33158637",
-      "name": "链接文件",
-      "font_class": "lianjiewenjian",
-      "unicode": "e7b2",
-      "unicode_decimal": 59314
-    },
-    {
-      "icon_id": "33158639",
-      "name": "块设备文件",
-      "font_class": "kuaishebeiwenjian",
-      "unicode": "e7b3",
-      "unicode_decimal": 59315
-    },
-    {
-      "icon_id": "33158641",
-      "name": "字符设备文件",
-      "font_class": "zifushebeiwenjian",
-      "unicode": "e7b4",
-      "unicode_decimal": 59316
-    },
     {
       "icon_id": "33112141",
       "name": "home",

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

@@ -86,7 +86,9 @@
            style="-moz-user-select:none;">
         <div v-if="fileDirectory !== '/'" @dblclick.prevent="backFileDirectory" class="file-item">
           <div class="text-ellipsis file-name">
-            <i class="nz-icon nz-icon-Folder colorFA901C" style="margin-right: 3px"/>
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href='#nz-icon-muluwenjian'></use>
+            </svg>
             ..
 <!--            {{$t('terminal.back')}}-->
           </div>
@@ -100,8 +102,10 @@
           @dblclick.prevent="selectFile(item)"
         >
           <div class="text-ellipsis file-name">
-            <i class="nz-icon" :class="selIcon(item)"/>
+<!--            <i class="nz-icon" :class=""/>-->
-            <i class="nz-icon nz-icon-link" v-if="item.isLink"/>
+            <svg class="icon" aria-hidden="true">
+              <use :xlink:href='selIcon(item)'></use>
+            </svg>
             {{item.name}} <span v-if="item.isLink">-> {{item.linkName}}</span>
           </div>
           <div class="text-ellipsis file-size">
@@ -232,7 +236,9 @@
     >
       <div v-if="fileInfo">
         <div class="file-info-item-header">
-          <i class="nz-icon" :class="selIcon(fileInfo)"/>
+          <svg class="icon" aria-hidden="true">
+            <use :xlink:href='selIcon(fileInfo)'></use>
+          </svg>
           {{fileInfo.name}}
         </div>
         <div v-for="item in fileAttr" :key="item.name" class="file-info-item">
@@ -505,23 +511,29 @@ export default {
     },
     selIcon (item) {
       // console.log(item)
-      const hz = item.name.split('.')[1]
+      let str = ''
       if (item.isDir) {
-        return 'nz-icon-Folder colorFA901C'
+        str = '#nz-icon-muluwenjian'
       }
       if (item.isReg) {
-        return 'nz-icon-File'
+        str = '#nz-icon-putongwenjian'
       }
       if (item.isFifo) {
-        return 'nz-icon-guandaowenjian'
+        str = '#nz-icon-guandaowenjian1'
       }
       if (item.isSock) {
-        return 'nz-icon-taojieziwenjian'
+        str = '#nz-icon-taojieziwenjian'
       }
       if (item.isBlk) {
-        return 'nz-icon-kuaishebeiwenjian'
+        str = '#nz-icon-zifushebeiwenjian1'
       }
-      return 'nz-icon-File'
+      if (item.isLink) {
+        str += 'lianjie'
+      }
+      if (str) {
+        return str
+      }
+      return '#nz-icon-muluwenjian'
     },
     selInfo (item, key) {
       if (key === 'isDir') {

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

@@ -7,7 +7,21 @@
           <i class="nz-icon nz-icon-a-filetransfer" :title="$t('terminal.filetransfer')"></i>
           <span v-show="fileList.length>0" class="right-tip">{{fileList.length<=99?fileList.length:'99+'}}</span>
         </div>
-        {{name}}</div>
+        <div class="personal" id="personal">
+          <el-dropdown trigger="click">
+            <div class="personal-avatar"><span>{{name ? name.substr(0, 1) : ''}}</span>&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
+            <el-dropdown-menu  slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top" style="width: 142px; line-height: 36px;">
+              <div class="personal-dropdown">
+                <div class="personal-dropdown__username">{{name}}</div>
+                <div class="personal-dropdown__name">@{{name}}</div>
+              </div>
+              <el-dropdown-item>
+                <div id="header-to-logout" @click="logout"><i class="nz-icon nz-icon-exit"></i>{{$t('overall.signOut')}}</div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
     </div>
     <fileListState v-clickoutside="hideFileState" ref="fileListState"/>
     <webSSHNew ref="websshNew" />
@@ -42,6 +56,7 @@ import webSSHNew from '@/components/cli/webSSHNew'
 import fileListState from './fileListState'
 import imageUrl from '@/assets/img/logo1-2.png'
 import bus from '@/libs/bus'
+import { mapActions } from 'vuex'
 export default {
   name: 'terminal',
   components: {
@@ -80,6 +95,7 @@ export default {
   mounted () {
     const self = this
     this.name = localStorage.getItem('nz-username')
+    this.username = localStorage.getItem('nz-username')
     window.onbeforeunload = () => {
       const opener = window.opener
       opener.postMessage(
@@ -103,6 +119,7 @@ export default {
     })
   },
   methods: {
+    ...mapActions(['logoutSuccess']),
     clickout () {
       this.visible = false
     },
@@ -157,7 +174,13 @@ export default {
       }
       localStorage.setItem('nz-history-terminal', JSON.stringify(historyArr))
       this.getHistory()
-    }, 100)
+    }, 100),
+    logout () {
+      this.$get('logout').then(() => {
+        this.logoutSuccess()
+        document.location.href = '/'
+      })
+    }
   }
 }
 </script>

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

@@ -48,7 +48,7 @@
                 </div>
                 <div class="webshell-box-item webshell-box-bottom" @click="closeShell(item,index)">
                   <div >
-                    <i class="nz-icon nz-icon-close"/>
+                    <i class="nz-icon nz-icon-guanbi2"/>
                     {{$t('overall.close')}}
                   </div>
                 </div>