gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-2446 feat： web terminal 新页面开发（通过浏览器新标签页方式打开）

Browse Source
This commit is contained in:
zhangyu
2022-12-09 21:56:35 +08:00
parent 132beefc1e
commit ea7fed7202
11 changed files with 101 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,10 +104,12 @@
.file-size{
width: 15%;
display: inline-block;
position: relative;
}
.file-date{
width: 25%;
display: inline-block;
position: relative;
}
.file-opt{
width: 14%;
@@ -116,6 +118,27 @@
margin-right: 20px;
}
}
.file-arrow-header{
display: inline-flex;align-items: center;width: 100%
}
.nz-arrow-box{
display: flex;flex-direction: column;align-items: center;margin-left: 7px
}
.nz-arrow-up{
margin-bottom: 5px;
}
.nz-arrow-up.is-select{
border-bottom:5px solid $--color-primary; /* 定义底部颜色 */
}
.nz-arrow-down.is-select{
border-top:5px solid $--color-primary; /* 定义底部颜色 */
}
.nz-icon-caret-up {
position: absolute;
}
.nz-icon-caret-down {
position: absolute;
}
.file-item{
font-family: Roboto-Regular;
font-size: 14px;
@@ -153,3 +176,25 @@
}
}
}
div.nz-arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* 右透明 */
border-right:5px solid transparent; /*右透明 */
border-bottom:5px solid $--color-text-disabled; /* 定义底部颜色 */
font-size:0px;
line-height:0px;
cursor: pointer;
}
/* css3三角形（向下 ▼） */
div.nz-arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid $--color-text-disabled;
font-size:0px;
line-height:0px;
cursor: pointer;
}

1
nezha-fronted/src/components/chart/chartDataFormat.js
View File

@@ -700,7 +700,6 @@ const unitOptions = [
]
const units = []
window.addEventListener('load', function () {
console.log(13213)
if (units.length < 1) {
unitOptions.forEach((item, index) => {
item.children.forEach((n, i) => {

1
nezha-fronted/src/components/cli/console.vue
View File

@@ -300,7 +300,6 @@ export default {
// 错误
this.terminalSocket.onerror = (e) => {
this.isLogin = false
console.log(this.isLogin, 'close')
}
// 选中 复制
this.term.on('selection', function () {})

9
nezha-fronted/src/components/cli/consoleNew.vue
View File

@@ -126,7 +126,6 @@ export default {
authPinTip: this.$loadsh.get(this.terminal, 'custom.authPinTip', '')
}
this.$post('/terminal/login', params).then(res => {
console.log(res)
if (res.code == 200) {
this.terminal.uuid = res.data.uuid
this.$forceUpdate()
@@ -234,7 +233,6 @@ export default {
// 错误
this.terminalSocket.onerror = (e) => {
this.terminal.isLogin = false
console.log(this.terminal.isLogin, 'close')
}
// 选中 复制
this.term.on('selection', function () {})
@@ -262,7 +260,6 @@ export default {
this.term && this.term.setOption('fontSize', fontSize)
const consoleBox = document.getElementById('ternimalContainer' + this.idIndex)
const width = document.body.clientWidth// 可视宽度
console.log(consoleBox.offsetHeight)
let height = parseInt(consoleBox.offsetHeight)
if (height == null || !height) { height = this.termimalHeight }
const winStyle = {
@@ -306,6 +303,12 @@ export default {
this.animateCSS(this.$refs.fileDirectory.$el, animationClass).then((message) => {
this.fileDirectoryShow = show
})
},
enterStr (message) {
this.terminalSocket.send(message)
setTimeout(()=>{
this.terminalSocket.send('\n')
}, 100)
}
},
mounted () {

39
nezha-fronted/src/components/cli/fileDirectory.vue
View File

@@ -32,11 +32,35 @@
{{$t('overall.name')}}
</div>
<div class="text-ellipsis file-size">
<div class="file-arrow-header" >
<div>
{{$t('backup.size')}}
</div>
<div class="nz-arrow-box">
<div class="nz-arrow-up" :class="{
'is-select': sizeOrderType === 'asc'
}" @click="orderBy('sizeOrderType','asc' , 'size')"></div>
<div class="nz-arrow-down" :class="{
'is-select': sizeOrderType === 'desc'
}" @click="orderBy('sizeOrderType','desc', 'size')"></div>
</div>
</div>
</div>
<div class="text-ellipsis file-date">
<div class="file-arrow-header">
<div>
{{$t('issue.createTime')}}
</div>
<div class="nz-arrow-box" style="">
<div class="nz-arrow-up" :class="{
'is-select': dateOrderType === 'asc'
}" @click="orderBy('dateOrderType','asc', 'cts')"></div>
<div class="nz-arrow-down" :class="{
'is-select': dateOrderType === 'desc'
}" @click="orderBy('dateOrderType','desc', 'cts')"></div>
</div>
</div>
</div>
<div class="text-ellipsis file-opt">
{{$t('overall.option')}}
</div>
@@ -217,8 +241,11 @@ export default {
data () {
return {
fileDirectory: '/',
sizeOrderType: 0,
dateOrderType: 0,
breadcrumb: [],
fileList: [],
oldFileList: [],
newFolderBoxShow: false,
folder: '',
fileDirectoryLoading: false,
@@ -288,7 +315,6 @@ export default {
this.editPathShow = false
},
goEditPath () {
console.log('123123123')
this.getSftpPath(this.editPath)
setTimeout(() => {
this.editPath = ''
@@ -302,7 +328,6 @@ export default {
}
},
showFileInfo (item) {
console.log(item)
this.fileInfo = item
this.fileInfoShow = true
},
@@ -344,6 +369,7 @@ export default {
this.fileDirectoryLoading = false
this.fileDirectory = res.data.path
this.fileList = res.data.list
this.oldFileList = res.data.list
this.editPath = ''
this.breadcrumb = res.data.path.split('/').filter(item => item)
} else {
@@ -475,6 +501,15 @@ export default {
}
return '-'
},
orderBy (key, orderType, order) {
if (this[key] == orderType) {
this[key] = 0
this.fileList = this.oldFileList
} else {
this[key] = orderType
this.fileList = this.$loadsh.orderBy(this.oldFileList, order, orderType)
}
},
tableOperation ([command, row, param]) {
switch (command) {
case 'rename':

1
nezha-fronted/src/components/cli/fileListState.vue
View File

@@ -110,7 +110,6 @@ export default {
methods: {
bytes: chartDataFormat.getUnit(7).compute,
customColorMethod (percentage, item) {
console.log(item)
if (percentage < 100) {
return '#3B92F1'
} else {

6
nezha-fronted/src/components/cli/terminal.vue
View File

@@ -11,7 +11,7 @@
</div>
<fileListState v-clickoutside="hideFileState" ref="fileListState"/>
<webSSHNew ref="websshNew" />
<el-input :placeholder="'发送文本到所有SSH终端'" size="small" class="shell-input" v-model="message"/>
<el-input :placeholder="'发送文本到所有SSH终端'" size="small" class="shell-input" v-model="message" @keyup.enter.native="sendMessage"/>
</div>
</template>
@@ -59,7 +59,6 @@ export default {
)
}
window.addEventListener('message', function (e) {
console.log(e)
if (e.data) {
try {
const data = JSON.parse(e.data)
@@ -81,6 +80,9 @@ export default {
},
hideFileState () {
this.$refs.fileListState.fileStateShow(false, this.fileListStateType)
},
sendMessage () {
this.$refs.websshNew.sendMessage(this.message)
}
},
beforeDestroy () {

8
nezha-fronted/src/components/cli/webSSHNew.vue
View File

@@ -610,12 +610,12 @@ export default {
})
} else {
console.terminal.username = ''
console.terminal.terminalType = this.customConnect.authProtocol
this.editableTabsValue = newTabName
this.editableTabs.push(console)
}
},
duplicate (item, index) {
console.log(item, index)
if (item.terminal.assetId) {
const newTabName = ++this.tabIndex + ''
this.editableTabsValue = newTabName
@@ -652,7 +652,6 @@ export default {
}
},
reconnect (item, index) {
console.log(item, index)
this.$refs['console' + index][0].reconnect()
},
showFileDir (item, index) {
@@ -660,6 +659,11 @@ export default {
},
closeShell (item, index) {
this.removeTab(item.name)
},
sendMessage (message) {
this.editableTabs.forEach((item, index) => {
this.$refs['console' + index][0].enterStr(message)
})
}
},
watch: {

1
nezha-fronted/src/components/layout/home.vue
View File

@@ -60,7 +60,6 @@ export default {
}
},
mounted () {
console.log(this.$router, this.$route)
},
destroyed () {
localStorage.removeItem('moduleProjectId')

1
nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
View File

@@ -4,7 +4,6 @@ import vm from '../../../../entrance/app/main'
import exportHtml from '../../../../entrance/exportHtml/exportHtml'
// const vm = window.dataJson ? exportHtml : app
window.addEventListener('load', function () {
console.log(123213)
if (!window.dataJson) {
commonOption.toolbox.feature.dataZoom.title.zoom = vm.$i18n.t('overall.toolBox.zoom')
commonOption.toolbox.feature.dataZoom.title.back = vm.$i18n.t('overall.toolBox.back')

4
nezha-fronted/src/store/terminalFile.js
View File

@@ -26,7 +26,6 @@ const terminalFile = {
if (!state.messageFunction) {
state.messageFunction = true
window.addEventListener('message', function (e) {
console.log(e)
const data = JSON.parse(e.data) // e.data 里面有自己所传的所有参数 可以根据参数做自己的判断
if (data.close) {
state.externalTerminal = false
@@ -39,11 +38,8 @@ const terminalFile = {
state.externalTerminalWindow = ''
}
if (item && state.externalTerminal) {
console.log('onloda', state.externalTerminalWindow)
state.externalTerminalWindow.addEventListener('load', () => {
console.log(123123123123123)
setTimeout(() => {
console.log('time')
state.externalTerminalWindow.postMessage(
JSON.stringify(item)
)