feat： terminal 添加水印

nezha-fronted/src/assets/css/common.scss

@@ -732,3 +732,6 @@ i.nz-icon-override{
   color: #EC7F66;
   margin-right: 4px;
 }
+.xterm .xterm-viewport {
+  background-color: transparent !important;
+}

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

@@ -1,5 +1,5 @@
 <template>
-    <div :id="'ternimalContainer'+idIndex" class="console">
+    <div :id="'ternimalContainer'+idIndex" class="console" v-watermark="{text: waterMarkText, text1: terminal.host || '',  textColor: 'rgba(215, 215, 215, 0.5)'}">
       <div :id="'terminal'+idIndex" style="height: 100%;width: 100%"></div>
       <fileDirectory :host="host" v-clickoutside="closeFileDir" :uuid="terminal.uuid" v-show="fileDirectoryShow" @close="showFileDir(false)" :fileDirectoryShow="fileDirectoryShow" ref="fileDirectory"/>
     </div>
@@ -25,6 +25,7 @@ export default {
     },
     fontSize: {}
   },
+  inject: ['terminalSetting'],
   data () {
     return {
       term: null,
@@ -49,7 +50,8 @@ export default {
       inputSecret: false,
       userName: '',
       fileDirectoryShow: false,
-      host: ''
+      host: '',
+      waterMarkText: 'Nezha'
     }
   },
   watch: {
@@ -95,7 +97,9 @@ export default {
         cursorStyle: 'block', // 光标样式  null | 'block' | 'underline' | 'bar'
         disableStdin: false, // 是否应禁用输入
         fontSize: 16,
-        lineHeight: 1.2
+        lineHeight: 1.2,
+        allowTransparency: true,
+        background: 'transparent'
       })
       this.term.open(terminalContainer)
       this.term.focus()
@@ -115,6 +119,7 @@ export default {
       let url = ''
       this.terminal.height = document.body.clientHeight - 100
       this.terminal.width = document.body.clientWidth
+      this.waterMarkText = this.terminal.userName
       if (this.terminal.type === 'asset') {
         url = baseUrl + '/terminal.ws?width=' + this.terminal.width + '&height=' + this.terminal.height + '&cols=' + this.term.cols + '&rows=' + this.term.rows + '&token=' + token + '&assetId=' + this.terminal.assetId + '&accountId=' + this.terminal.accountId + '&uuid=' + this.terminal.uuid
       } else if (this.terminal.type === 'custom') {
@@ -273,7 +278,7 @@ export default {
       })
     },
     clearTerminal () {
-      this.term.clear()
+      this.term.reset()
     },
     enterStr (message) {
       if (this.terminalSocket && this.terminal.isLogin) {
@@ -292,6 +297,7 @@ export default {
   },
   mounted () {
     this.beforeCreate()
+    console.log(this.terminalSetting)
   },
   beforeDestroy () {
     this.closeSocket()

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

@@ -63,6 +63,11 @@ export default {
     webSSHNew,
     fileListState
   },
+  provide () {
+    return {
+      terminalSetting: this.terminalSetting
+    }
+  },
   data () {
     return {
       imageUrl,
@@ -73,7 +78,16 @@ export default {
       placeholder: this.$t('terminal.placeholder'),
       visible: false,
       // 历史命令记录
-      historyArr: []
+      historyArr: [],
+      terminalSetting: {
+        watermark: false,
+        scrollbackLines: 25000,
+        rightClick: 'menu',
+        wordSeparator: "\\ :;~`!@#$%^&*()-=+|[]{}'\",.<>/?",
+        copyOnSelect: false,
+        copyWithFormatting: false,
+        copyTrimEnd: false
+      }
     }
   },
   computed: {

nezha-fronted/src/components/common/js/tools.js

@@ -1122,3 +1122,43 @@ export const loadMore = {
     }
   }
 }
+// 水印
+export const watermark = {
+  bind (el, binding) {
+    const text = binding.value.text
+    const text1 = binding.value.text1
+    const font = binding.value.font || '24px Roboto-Regular'
+    const textColor = binding.value.textColor || 'rgba(215, 215, 215, 0.5)'
+    const width = binding.value.width || 400
+    const height = binding.value.height || 200
+    const textRotate = binding.value.textRotate || -30
+    addWaterMarker(el, text, font, textColor, width, height, textRotate, text1)
+  },
+  update (el, binding) {
+    const text = binding.value.text
+    const text1 = binding.value.text1
+    const font = binding.value.font || '16px Roboto-Regular'
+    const textColor = binding.value.textColor || 'rgba(215, 215, 215, 0.5)'
+    const width = binding.value.width || 400
+    const height = binding.value.height || 200
+    const textRotate = binding.value.textRotate || -20
+    addWaterMarker(el, text, font, textColor, width, height, textRotate, text1)
+  },
+}
+function addWaterMarker (parentNode, text, font, textColor, width, height, textRotate, text1) {
+  const can = document.createElement('canvas')
+  parentNode.appendChild(can)
+  can.width = width
+  can.height = height
+  can.style.display = 'none'
+  const cans = can.getContext('2d')
+  cans.moveTo(10, 10)
+  cans.rotate(textRotate * Math.PI / 180)
+  cans.font = font
+  cans.fillStyle = textColor
+  cans.textAlign = 'center'
+  cans.textBaseline = 'middle'
+  cans.fillText(text, 200, 150)
+  cans.fillText(text1, 200, 170)
+  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
+}

nezha-fronted/src/entrance/app/main.js

@@ -23,7 +23,7 @@ import VueClipboard from 'vue-clipboard2'
 import 'pl-table/themes/index.css'
 import { post, get, put, del } from '@/http.js'
 import { Meta2d } from '@meta2d/core'
-import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange, myLoading, loadMore } from '@/components/common/js/tools.js'
+import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange, myLoading, loadMore, watermark } from '@/components/common/js/tools.js'
 import * as tools from '@/components/common/js/tools.js'
 import * as constants from '@/components/common/js/constants.js'
 
@@ -182,6 +182,7 @@ Vue.mixin({
 /* 指令 */
 Vue.directive('cancel', cancelWithChange)
 Vue.directive('clickoutside', clickoutside)
+Vue.directive('watermark', watermark)
 Vue.directive('loadMore', loadMore)
 Vue.directive('myLoading', myLoading)
 window.resizing = false