shuguang/easynode
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ optimization

Browse Source
This commit is contained in:
chaoszhu 2024-07-16 16:24:17 +08:00
parent f2fe091d2d
commit 62478abf95
22 changed files with 1845 additions and 2099 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/app/socket/monitor.js
View File

@ -12,7 +12,7 @@ async function getIpInfo() {
consola.success('getIpInfo Success: ', new Date())
ipInfo = data
} catch (error) {
consola.error('getIpInfo Error: ', new Date(), error)
consola.error('getIpInfo Error: ', new Date(), error.message)
}
}

0
server/app/socket/sftp-cache/.gitkeep
View File

2
server/app/utils/tools.js
View File

@ -77,7 +77,7 @@ const getNetIPInfo = async (searchIp = '') => {
consola.info('查询IP信息：', validInfo)
return validInfo || { ip: '获取IP信息API出错,请排查或更新API', country: '未知', city: '未知', date }
} catch (error) {
consola.error('getIpInfo Error: ', error)
// consola.error('getIpInfo Error: ', error)
return {
ip: '未知',
country: '未知',

18
web/src/components/code-edit/index.vue
View File

@ -2,7 +2,7 @@
<el-dialog
v-model="visible"
width="80%"
:top="'20px'"
:top="'30px'"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
@ -10,7 +10,7 @@
custom-class="container"
@closed="handleClosed"
>
<template #title>
<template #header>
<div class="title">
FileName - <span>{{ status }}</span>
</div>
@ -30,8 +30,8 @@
/>
<template #footer>
<footer>
<div>
<el-select v-model="curLang" placeholder="Select language" size="small">
<div class="select_wrap">
<el-select v-model="curLang" placeholder="Select language">
<el-option
v-for="item in languageKey"
:key="item"
@ -56,7 +56,7 @@ import languages from './languages'
import { sortString, getSuffix } from '@/utils'
const languageKey = sortString(Object.keys(languages))
// console.log('languages: ', languages)
// console.log('languages: ', languageKey)
export default {
name: 'CodeEdit',
@ -139,8 +139,8 @@ export default {
case 'md': return this.curLang = 'markdown'
case 'py': return this.curLang = 'python'
default:
console.log('不支持的文件类型: ', newVal)
console.log('默认: ', 'shell')
// console.log('不支持的文件类型: ', newVal)
// console.log('默认: ', 'shell')
return this.curLang = 'shell'
}
} catch (error) {
@ -229,6 +229,10 @@ export default {
align-items: center;
padding: 0 15px;
justify-content: space-between;
.select_wrap {
width: 150px;
margin-right: 15px;
}
}
}
</style>

86
web/src/components/input-command/index.vue
View File

@ -1,25 +1,13 @@
<template>
<el-dialog
v-model="visible"
width="800px"
:top="'20vh'"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
center
custom-class="container"
>
<template #title>
<el-dialog v-model="visible" width="800px" :top="'20vh'" :close-on-click-modal="false" :close-on-press-escape="false"
:show-close="false" center custom-class="container">
<template #header>
<div class="title">
输入多行命令发送到终端执行
</div>
</template>
<el-input
v-model="command"
:autosize="{ minRows: 10, maxRows: 20 }"
type="textarea"
placeholder="Please input command"
/>
<el-input v-model="command" :autosize="{ minRows: 10, maxRows: 20 }" type="textarea"
placeholder="Please input command" />
<template #footer>
<footer>
<div class="btns">
@ -30,48 +18,42 @@
</template>
</el-dialog>
</template>
<script setup>
import { ref, computed } from 'vue'
<script>
export default {
name: 'InputCommand',
props: {
show: {
required: true,
type: Boolean
}
},
emits: ['update:show', 'closed', 'input-command',],
data() {
return {
command: ''
}
},
computed: {
visible: {
get() {
return this.show
},
set(newVal) {
this.$emit('update:show', newVal)
}
}
},
methods: {
handleSave() {
this.$emit('input-command', this.command)
}
const props = defineProps({
show: {
required: true,
type: Boolean
}
})
const emit = defineEmits(['update:show', 'closed', 'input-command'])
const command = ref('')
const visible = computed({
get() {
return props.show
},
set(newVal) {
emit('update:show', newVal)
}
})
const handleSave = () => {
emit('input-command', command.value)
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
<style lang="scss">
.container {
.el-dialog__header {
padding: 5px 0;
.title {
color: #409eff;
text-align: left;
@ -80,17 +62,21 @@ export default {
font-size: 13px;
}
}
.el-dialog__body {
padding: 10px!important;
padding: 10px !important;
}
.el-dialog__footer {
padding: 10px 0;
}
footer {
display: flex;
align-items: center;
padding: 0 15px;
justify-content: space-between;
.btns {
width: 100%;
display: flex;

16
web/src/router/index.js
View File

@ -1,19 +1,19 @@
import { createRouter, createWebHistory } from 'vue-router'
import hostList from '@views/list/index.vue'
import login from '@views/login/index.vue'
import terminal from '@views/terminal/index.vue'
import test from '@views/test/index.vue'
// import hostList from '@views/list/index.vue'
// import login from '@views/login/index.vue'
// import terminal from '@views/terminal/index.vue'
// import test from '@views/test/index.vue'
// const hostList = () => import('@views/list/index.vue')
// const login = () => import('@views/login/index.vue')
// const terminal = () => import('@views/terminal/index.vue')
const hostList = () => import('@views/list/index.vue')
const login = () => import('@views/login/index.vue')
const terminal = () => import('@views/terminal/index.vue')
const routes = [
{ path: '/', component: hostList },
{ path: '/login', component: login },
{ path: '/terminal', component: terminal },
{ path: '/test', component: test },
// { path: '/test', component: test },
]
export default createRouter({

368
web/src/views/list/components/host-card.vue
View File

@ -6,16 +6,9 @@
</div>
<div class="info">
<div class="weizhi field">
<el-popover
placement="bottom-start"
:width="200"
trigger="hover"
>
<el-popover placement="bottom-start" :width="200" trigger="hover">
<template #reference>
<svg-icon
name="icon-fuwuqi"
class="svg-icon"
/>
<svg-icon name="icon-fuwuqi" class="svg-icon" />
</template>
<div class="field-detail">
<h2>系统</h2>
@ -40,16 +33,9 @@
</div>
</div>
<div class="weizhi field">
<el-popover
placement="bottom-start"
:width="200"
trigger="hover"
>
<el-popover placement="bottom-start" :width="200" trigger="hover">
<template #reference>
<svg-icon
name="icon-position"
class="svg-icon"
/>
<svg-icon name="icon-position" class="svg-icon" />
</template>
<div class="field-detail">
<h2>位置信息</h2>
@ -61,22 +47,15 @@
</div>
</el-popover>
<div class="fields">
<span>{{ `${ipInfo?.country || '--' } ${ipInfo?.regionName || '--'}` }}</span>
<span>{{ `${ipInfo?.country || '--'} ${ipInfo?.regionName || '--'}` }}</span>
<!-- <span>{{ `${ipInfo?.country || '--' } ${ipInfo?.regionName || '--'} ${ipInfo?.city || '--'}` }}</span> -->
<span>{{ hostIp }}</span>
</div>
</div>
<div class="cpu field">
<el-popover
placement="bottom-start"
:width="200"
trigger="hover"
>
<el-popover placement="bottom-start" :width="200" trigger="hover">
<template #reference>
<svg-icon
name="icon-xingzhuang"
class="svg-icon"
/>
<svg-icon name="icon-xingzhuang" class="svg-icon" />
</template>
<div class="field-detail">
<h2>CPU</h2>
@ -86,21 +65,14 @@
</div>
</el-popover>
<div class="fields">
<span :style="{color: setColor(cpuInfo.cpuUsage)}">{{ cpuInfo.cpuUsage || '0' || '--' }}%</span>
<span :style="{ color: setColor(cpuInfo.cpuUsage) }">{{ cpuInfo.cpuUsage || '0' || '--' }}%</span>
<span>{{ cpuInfo.cpuCount || '--' }} 核心</span>
</div>
</div>
<div class="ram field">
<el-popover
placement="bottom-start"
:width="200"
trigger="hover"
>
<el-popover placement="bottom-start" :width="200" trigger="hover">
<template #reference>
<svg-icon
name="icon-neicun1"
class="svg-icon"
/>
<svg-icon name="icon-neicun1" class="svg-icon" />
</template>
<div class="field-detail">
<h2>内存</h2>
@ -111,21 +83,15 @@
</div>
</el-popover>
<div class="fields">
<span :style="{color: setColor(memInfo.usedMemPercentage)}">{{ $tools.toFixed(memInfo.usedMemPercentage) }}%</span>
<span :style="{ color: setColor(memInfo.usedMemPercentage) }">{{ $tools.toFixed(memInfo.usedMemPercentage)
}}%</span>
<span>{{ $tools.toFixed(memInfo.usedMemMb / 1024) }} | {{ $tools.toFixed(memInfo.totalMemMb / 1024) }} GB</span>
</div>
</div>
<div class="yingpan field">
<el-popover
placement="bottom-start"
:width="200"
trigger="hover"
>
<el-popover placement="bottom-start" :width="200" trigger="hover">
<template #reference>
<svg-icon
name="icon-xingzhuang1"
class="svg-icon"
/>
<svg-icon name="icon-xingzhuang1" class="svg-icon" />
</template>
<div class="field-detail">
<h2>存储</h2>
@ -136,21 +102,14 @@
</div>
</el-popover>
<div class="fields">
<span :style="{color: setColor(driveInfo.usedPercentage)}">{{ driveInfo.usedPercentage || '--' }}%</span>
<span :style="{ color: setColor(driveInfo.usedPercentage) }">{{ driveInfo.usedPercentage || '--' }}%</span>
<span>{{ driveInfo.usedGb || '--' }} | {{ driveInfo.totalGb || '--' }} GB</span>
</div>
</div>
<div class="wangluo field">
<el-popover
placement="bottom-start"
:width="200"
trigger="hover"
>
<el-popover placement="bottom-start" :width="200" trigger="hover">
<template #reference>
<svg-icon
name="icon-wangluo1"
class="svg-icon"
/>
<svg-icon name="icon-wangluo1" class="svg-icon" />
</template>
<div class="field-detail">
<h2>网卡</h2>
@ -159,11 +118,7 @@
<div>↑ {{ $tools.toFixed(netstatInfo.netTotal?.outputMb) || 0 }}MB / s</div>
<div>↓ {{ $tools.toFixed(netstatInfo.netTotal?.inputMb) || 0 }}MB / s</div>
</h3> -->
<div
v-for="(value, key) in netstatInfo.netCards"
:key="key"
style="display: flex; flex-direction: column;"
>
<div v-for="(value, key) in netstatInfo.netCards" :key="key" style="display: flex; flex-direction: column;">
<h3>
<span>{{ key }}</span>
<div>↑ {{ $tools.formatNetSpeed(value?.outputMb) || 0 }}</div>
@ -178,11 +133,7 @@
</div>
</div>
<div class="fields terminal">
<el-dropdown
class="web-ssh"
type="primary"
trigger="click"
>
<el-dropdown class="web-ssh" type="primary" trigger="click">
<!-- <el-button type="primary" @click="handleSSH">Web SSH</el-button> -->
<el-button type="primary">功能</el-button>
<template #dropdown>
@ -197,183 +148,135 @@
</el-dropdown>
</div>
</div>
<SSHForm
v-model:show="sshFormVisible"
:temp-host="tempHost"
:name="name"
/>
<SSHForm v-model:show="sshFormVisible" :temp-host="tempHost" :name="name" />
</el-card>
</template>
<script>
<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import SSHForm from './ssh-form.vue'
export default {
name: 'HostCard',
components: {
SSHForm
const { proxy: { $api, $tools } } = getCurrentInstance()
const props = defineProps({
hostInfo: {
required: true,
type: Object
},
props: {
hostInfo: {
required: true,
type: Object
},
hiddenIp: {
required: true,
type: [Number, Boolean,]
}
},
emits: ['update-list', 'update-host',],
data() {
return {
sshFormVisible: false,
tempHost: ''
}
},
computed: {
hostIp() {
let ip = this.ipInfo?.query || this.host || '--'
try {
// let formatIp = ip.replace(/(?<=\d*\.\d*\.)(\d*)/g, (matchStr) => matchStr.replace(/\d/g, '*'))
let formatIp = ip.replace(/\d/g, '*').split('.').map((item) => item.padStart(3, '*')).join('.')
return this.hiddenIp ? formatIp : ip
} catch (error) {
return ip
}
},
host() {
return this.hostInfo?.host
},
name() {
return this.hostInfo?.name
},
ping() {
return this.hostInfo?.ping || ''
},
expiredTime() {
return this.$tools.formatTimestamp(this.hostInfo?.expired, 'date')
},
consoleUrl() {
return this.hostInfo?.consoleUrl
},
ipInfo() {
return this.hostInfo?.ipInfo || {}
},
isError() {
return !Boolean(this.hostInfo?.osInfo) // 没获取系统信息默认未连接
},
cpuInfo() {
return this.hostInfo?.cpuInfo || {}
},
memInfo() {
return this.hostInfo?.memInfo || {}
},
osInfo() {
return this.hostInfo?.osInfo || {}
},
driveInfo() {
return this.hostInfo?.driveInfo || {}
},
netstatInfo() {
let { total: netTotal, ...netCards } = this.hostInfo?.netstatInfo || {}
return { netTotal, netCards: netCards || {} }
},
openedCount() {
return this.hostInfo?.openedCount || 0
}
},
mounted() {
// if (data?.message === 'private range') {
// data.country = '本地'
// data.city = '局域网'
// }
},
methods: {
setColor(num){
num = Number(num)
return num ? (num < 80 ? '#595959' : ((num >= 80 && num < 90) ? '#FF6600' : '#FF0000')) : '#595959'
},
handleUpdate() {
let { name, host, hostInfo: { expired, expiredNotify, group, consoleUrl, remark } } = this
this.$emit('update-host', { name, host, expired, expiredNotify, group, consoleUrl, remark })
},
handleToConsole() {
window.open(this.consoleUrl)
},
async handleSSH() {
let { host, name } = this
let { data } = await this.$api.existSSH(host)
console.log('是否存在凭证:', data)
if (data) return window.open(`/terminal?host=${ host }&name=${ name }`)
if (!host) {
return ElMessage({
message: '请等待获取服务器ip或刷新页面重试',
type: 'warning',
center: true
})
}
this.tempHost = host
this.sshFormVisible = true
},
async handleRemoveSSH() {
ElMessageBox.confirm(
'确认删除SSH凭证',
'Warning',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(async () => {
let { host } = this
let { data } = await this.$api.removeSSH(host)
ElMessage({
message: data,
type: 'success',
center: true
})
})
},
handleRemoveHost() {
ElMessageBox.confirm(
'确认删除主机',
'Warning',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(async () => {
let { host } = this
let { data } = await this.$api.removeHost({ host })
ElMessage({
message: data,
type: 'success',
center: true
})
this.$emit('update-list')
})
}
hiddenIp: {
required: true,
type: [Number, Boolean]
}
})
const emit = defineEmits(['update-list', 'update-host'])
const sshFormVisible = ref(false)
const tempHost = ref('')
const hostIp = computed(() => {
let ip = props.hostInfo?.ipInfo?.query || props.hostInfo?.host || '--'
try {
let formatIp = ip.replace(/\d/g, '*').split('.').map((item) => item.padStart(3, '*')).join('.')
return props.hiddenIp ? formatIp : ip
} catch (error) {
return ip
}
})
const host = computed(() => props.hostInfo?.host)
const name = computed(() => props.hostInfo?.name)
const ping = computed(() => props.hostInfo?.ping || '')
const expiredTime = computed(() => $tools.formatTimestamp(props.hostInfo?.expired, 'date'))
const consoleUrl = computed(() => props.hostInfo?.consoleUrl)
const ipInfo = computed(() => props.hostInfo?.ipInfo || {})
const isError = computed(() => !Boolean(props.hostInfo?.osInfo))
const cpuInfo = computed(() => props.hostInfo?.cpuInfo || {})
const memInfo = computed(() => props.hostInfo?.memInfo || {})
const osInfo = computed(() => props.hostInfo?.osInfo || {})
const driveInfo = computed(() => props.hostInfo?.driveInfo || {})
const netstatInfo = computed(() => {
let { total: netTotal, ...netCards } = props.hostInfo?.netstatInfo || {}
return { netTotal, netCards: netCards || {} }
})
const openedCount = computed(() => props.hostInfo?.openedCount || 0)
const setColor = (num) => {
num = Number(num)
return num ? (num < 80 ? '#595959' : (num >= 80 && num < 90 ? '#FF6600' : '#FF0000')) : '#595959'
}
const handleUpdate = () => {
let { expired, expiredNotify, group, consoleUrl, remark } = props.hostInfo
emit('update-host', { name: name.value, host: host.value, expired, expiredNotify, group, consoleUrl, remark })
}
const handleToConsole = () => {
window.open(consoleUrl.value)
}
const handleSSH = async () => {
let { data } = await $api.existSSH(host.value)
if (data) return window.open(`/terminal?host=${host.value}&name=${name.value}`)
if (!host.value) {
return ElMessage({
message: '请等待获取服务器ip或刷新页面重试',
type: 'warning',
center: true
})
}
tempHost.value = host.value
sshFormVisible.value = true
}
const handleRemoveSSH = async () => {
ElMessageBox.confirm('确认删除SSH凭证', 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let { data } = await $api.removeSSH(host.value)
ElMessage({
message: data,
type: 'success',
center: true
})
})
}
const handleRemoveHost = async () => {
ElMessageBox.confirm('确认删除主机', 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let { data } = await $api.removeHost({ host: host.value })
ElMessage({
message: data,
type: 'success',
center: true
})
emit('update-list')
})
}
</script>
<style lang="scss" scoped>
.host-card {
margin: 0px 30px 20px;
transition: all 0.5s;
position: relative;
&:hover {
box-shadow:0px 0px 15px rgba(6, 30, 37, 0.5);
box-shadow: 0px 0px 15px rgba(6, 30, 37, 0.5);
}
.host-state {
position: absolute;
top: 0px;
left: 0px;
span {
font-size: 8px;
// transform: rotate(-45deg);
@ -381,35 +284,43 @@ export default {
display: inline-block;
padding: 3px 5px;
}
.online {
color: #009933;
background-color: #e8fff3;
}
.offline {
color: #FF0033;
background-color: #fff5f8;
}
}
.info {
display: flex;
align-items: center;
height: 50px;
& > div {
&>div {
flex: 1
}
.field {
height: 100%;
display: flex;
align-items: center;
.svg-icon {
width: 25px;
height: 25px;
color: #1989fa;
cursor: pointer;
}
.fields {
display: flex;
flex-direction: column;
// justify-content: center;
span {
padding: 3px 0;
@ -418,17 +329,21 @@ export default {
font-size: 13px;
color: #595959;
}
.name {
display: inline-block;
height: 19px;
cursor: pointer;
&:hover {
text-decoration-line: underline;
text-decoration-color: #1989fa;
.svg-icon {
display: inline-block;
}
}
.svg-icon {
display: none;
width: 13px;
@ -437,7 +352,9 @@ export default {
}
}
}
.web-ssh {
// ::v-deep has been deprecated. Use :deep(<inner-selector>) instead.
:deep(.el-dropdown__caret-button) {
margin-left: -5px;
@ -451,17 +368,20 @@ export default {
.field-detail {
display: flex;
flex-direction: column;
h2 {
font-weight: 600;
font-size: 16px;
margin: 0px 0 8px 0;
}
h3 {
span {
font-weight: 600;
color: #797979;
}
}
span {
display: inline-block;
margin: 4px 0;

197
web/src/views/list/components/host-form.vue
View File

@ -8,7 +8,7 @@
@closed="handleClosed"
>
<el-form
ref="form"
ref="formRef"
:model="hostForm"
:rules="rules"
:hide-required-asterisk="true"
@ -103,111 +103,100 @@
</el-dialog>
</template>
<script>
const resetForm = () => {
return {
group: 'default',
name: '',
host: '',
expired: null,
expiredNotify: false,
consoleUrl: '',
remark: ''
}
}
export default {
name: 'HostForm',
props: {
show: {
required: true,
type: Boolean
},
defaultData: {
required: false,
type: Object,
default: null
}
},
emits: ['update:show', 'update-list', 'closed',],
data() {
return {
hostForm: resetForm(),
oldHost: '',
groupList: [],
rules: {
group: { required: true, message: '选择一个分组' },
name: { required: true, message: '输入主机别名', trigger: 'change' },
host: { required: true, message: '输入IP/域名', trigger: 'change' },
expired: { required: false },
expiredNotify: { required: false },
consoleUrl: { required: false },
remark: { required: false }
}
}
},
computed: {
visible: {
get() {
return this.show
},
set(newVal) {
this.$emit('update:show', newVal)
}
},
title() {
return this.defaultData ? '修改服务器' : '新增服务器'
},
formRef() {
return this.$refs['form']
}
},
watch: {
show(newVal) {
if(!newVal) return
this.getGroupList()
}
},
methods: {
getGroupList() {
this.$api.getGroupList()
.then(({ data }) => {
this.groupList = data
})
},
handleClosed() {
console.log('handleClosed')
this.hostForm = resetForm()
this.$emit('closed')
this.$nextTick(() => this.formRef.resetFields())
},
setDefaultData() {
if(!this.defaultData) return
let { name, host, expired, expiredNotify, consoleUrl, group, remark } = this.defaultData
this.oldHost = host // 保存旧的host用于后端查找
this.hostForm = { name, host, expired, expiredNotify, consoleUrl, group, remark }
<script setup>
import { ref, reactive, computed, watch, getCurrentInstance, nextTick } from 'vue'
},
handleSave() {
this.formRef.validate()
.then(async () => {
if(!this.hostForm.expired || !this.hostForm.expiredNotify) {
this.hostForm.expired = null
this.hostForm.expiredNotify = false
}
if(this.defaultData) {
let { oldHost } = this
let { msg } = await this.$api.updateHost(Object.assign({}, this.hostForm, { oldHost }))
this.$message({ type: 'success', center: true, message: msg })
}else {
let { msg } = await this.$api.saveHost(this.hostForm)
this.$message({ type: 'success', center: true, message: msg })
}
this.visible = false
this.$emit('update-list')
this.hostForm = resetForm()
})
}
const { proxy: { $api, $message } } = getCurrentInstance()
const props = defineProps({
show: {
required: true,
type: Boolean
},
defaultData: {
required: false,
type: Object,
default: null
}
})
const emit = defineEmits(['update:show', 'update-list', 'closed'])
const resetForm = () => ({
group: 'default',
name: '',
host: '',
expired: null,
expiredNotify: false,
consoleUrl: '',
remark: ''
})
const hostForm = reactive(resetForm())
const oldHost = ref('')
const groupList = ref([])
const rules = reactive({
group: { required: true, message: '选择一个分组' },
name: { required: true, message: '输入主机别名', trigger: 'change' },
host: { required: true, message: '输入IP/域名', trigger: 'change' },
expired: { required: false },
expiredNotify: { required: false },
consoleUrl: { required: false },
remark: { required: false }
})
const formRef = ref(null)
const visible = computed({
get: () => props.show,
set: (newVal) => emit('update:show', newVal)
})
const title = computed(() => props.defaultData ? '修改服务器' : '新增服务器')
watch(() => props.show, (newVal) => {
if (!newVal) return
getGroupList()
})
const getGroupList = () => {
$api.getGroupList()
.then(({ data }) => {
groupList.value = data
})
}
const handleClosed = () => {
// console.log('handleClosed')
Object.assign(hostForm, resetForm())
emit('closed')
nextTick(() => formRef.value.resetFields())
}
const setDefaultData = () => {
if (!props.defaultData) return
let { name, host, expired, expiredNotify, consoleUrl, group, remark } = props.defaultData
oldHost.value = host
Object.assign(hostForm, { name, host, expired, expiredNotify, consoleUrl, group, remark })
}
const handleSave = () => {
formRef.value.validate()
.then(async () => {
if (!hostForm.expired || !hostForm.expiredNotify) {
hostForm.expired = null
hostForm.expiredNotify = false
}
if (props.defaultData) {
let { msg } = await $api.updateHost(Object.assign({}, hostForm, { oldHost: oldHost.value }))
$message({ type: 'success', center: true, message: msg })
} else {
let { msg } = await $api.saveHost(hostForm)
$message({ type: 'success', center: true, message: msg })
}
visible.value = false
emit('update-list')
Object.assign(hostForm, resetForm())
})
}
</script>

190
web/src/views/list/components/setting-tab/email-list.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-loading="loading">
<el-form
ref="email-form"
ref="emailFormRef"
:model="emailForm"
:rules="rules"
:inline="true"
@ -61,7 +61,7 @@
<el-table-column prop="email" label="Email" />
<el-table-column prop="name" label="服务商" />
<el-table-column label="操作">
<template #default="{row}">
<template #default="{ row }">
<el-button
type="primary"
:loading="row.loading"
@ -81,99 +81,103 @@
</div>
</template>
<script>
export default {
name: 'UserEmailList',
data() {
return {
loading: false,
userEmailList: [],
supportEmailList: [],
emailForm: {
target: 'qq',
auth: {
user: '',
pass: ''
}
},
rules: {
'auth.user': { required: true, type: 'email', message: '需输入邮箱', trigger: 'change' },
'auth.pass': { required: true, message: '需输入SMTP授权码', trigger: 'change' }
}
}
},
mounted() {
this.getUserEmailList()
this.getSupportEmailList()
},
methods: {
getUserEmailList() {
this.loading = true
this.$api.getUserEmailList()
.then(({ data }) => {
this.userEmailList = data.map(item => {
item.loading = false
return item
})
})
.finally(() => this.loading = false)
},
getSupportEmailList() {
this.$api.getSupportEmailList()
.then(({ data }) => {
this.supportEmailList = data
})
},
addEmail() {
let emailFormRef = this.$refs['email-form']
emailFormRef.validate()
.then(() => {
this.$api.updateUserEmailList({ ...this.emailForm })
.then(() => {
this.$message.success('添加成功, 点击[测试]按钮发送测试邮件')
let { target } = this.emailForm
this.emailForm = { target, auth: { user: '', pass: '' } }
this.$nextTick(() => emailFormRef.resetFields())
this.getUserEmailList()
})
})
},
pushTestEmail(row) {
row.loading = true
const { email: toEmail } = row
this.$api.pushTestEmail({ isTest: true, toEmail })
.then(() => {
this.$message.success(`发送成功, 请检查邮箱: ${ toEmail }`)
})
.catch((error) => {
this.$notification({
title: '发送测试邮件失败, 请检查邮箱SMTP配置',
message: error.response?.data.msg,
type: 'error'
})
})
.finally(() => {
row.loading = false
})
},
deleteUserEmail({ email }) {
this.$messageBox.confirm(
`确认删除邮箱：${ email }`,
'Warning',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(async () => {
await this.$api.deleteUserEmail(email)
this.$message.success('success')
this.getUserEmailList()
})
}
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy: { $api, $message, $messageBox, $notification } } = getCurrentInstance()
const loading = ref(false)
const userEmailList = ref([])
const supportEmailList = ref([])
const emailFormRef = ref(null)
const emailForm = reactive({
target: 'qq',
auth: {
user: '',
pass: ''
}
})
const rules = reactive({
'auth.user': { required: true, type: 'email', message: '需输入邮箱', trigger: 'change' },
'auth.pass': { required: true, message: '需输入SMTP授权码', trigger: 'change' }
})
const getUserEmailList = () => {
loading.value = true
$api.getUserEmailList()
.then(({ data }) => {
userEmailList.value = data.map(item => {
item.loading = false
return item
})
})
.finally(() => loading.value = false)
}
const getSupportEmailList = () => {
$api.getSupportEmailList()
.then(({ data }) => {
supportEmailList.value = data
})
}
const addEmail = () => {
emailFormRef.value.validate()
.then(() => {
$api.updateUserEmailList({ ...emailForm })
.then(() => {
$message.success('添加成功, 点击[测试]按钮发送测试邮件')
let { target } = emailForm
emailForm.target = target
emailForm.auth.user = ''
emailForm.auth.pass = ''
getUserEmailList()
})
})
}
const pushTestEmail = (row) => {
row.loading = true
const { email: toEmail } = row
$api.pushTestEmail({ isTest: true, toEmail })
.then(() => {
$message.success(`发送成功, 请检查邮箱: ${toEmail}`)
})
.catch((error) => {
$notification({
title: '发送测试邮件失败, 请检查邮箱SMTP配置',
message: error.response?.data.msg,
type: 'error'
})
})
.finally(() => {
row.loading = false
})
}
const deleteUserEmail = ({ email }) => {
$messageBox.confirm(
`确认删除邮箱：${email}`,
'Warning',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(async () => {
await $api.deleteUserEmail(email)
$message.success('success')
getUserEmailList()
})
}
onMounted(() => {
getUserEmailList()
getSupportEmailList()
})
</script>
<style lang="scss" scoped>

215
web/src/views/list/components/setting-tab/group.vue
View File

@ -1,6 +1,6 @@
<template>
<el-form
ref="group-form"
ref="groupFormRef"
:model="groupForm"
:rules="rules"
:inline="true"
@ -17,7 +17,6 @@
/>
</el-form-item>
<el-form-item label="" prop="index" style="width: 200px;">
<!-- <el-input-number v-model="groupForm.index" :min="1" :max="10" /> -->
<el-input
v-model.number="groupForm.index"
clearable
@ -51,7 +50,7 @@
<el-table-column prop="id" label="ID" />
<el-table-column prop="name" label="分组名称" />
<el-table-column label="关联服务器数量">
<template #default="{row}">
<template #default="{ row }">
<el-popover
v-if="row.hosts.list.length !== 0"
placement="right"
@ -73,7 +72,7 @@
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="{row}">
<template #default="{ row }">
<el-button type="primary" @click="handleChange(row)">修改</el-button>
<el-button v-show="row.id !== 'default'" type="danger" @click="deleteGroup(row)">删除</el-button>
</template>
@ -86,7 +85,7 @@
:close-on-click-modal="false"
>
<el-form
ref="update-form"
ref="updateFormRef"
:model="updateForm"
:rules="rules"
:hide-required-asterisk="true"
@ -119,109 +118,113 @@
</el-dialog>
</template>
<script>
export default {
name: 'NotifyList',
data() {
return {
loading: false,
visible: false,
groupList: [],
groupForm: {
name: '',
index: ''
},
updateForm: {
name: '',
index: ''
},
rules: {
'name': { required: true, message: '需输入分组名称', trigger: 'change' },
'index': { required: true, type: 'number', message: '需输入数字', trigger: 'change' }
<script setup>
import { ref, reactive, computed, onMounted, getCurrentInstance } from 'vue'
const { proxy: { $api, $message, $messageBox, $store } } = getCurrentInstance()
const loading = ref(false)
const visible = ref(false)
const groupList = ref([])
const groupForm = reactive({
name: '',
index: ''
})
const updateForm = reactive({
name: '',
index: ''
})
const rules = reactive({
name: { required: true, message: '需输入分组名称', trigger: 'change' },
index: { required: true, type: 'number', message: '需输入数字', trigger: 'change' }
})
const groupFormRef = ref(null)
const updateFormRef = ref(null)
const hostGroupInfo = computed(() => {
const total = $store.hostList.length
const notGroupCount = $store.hostList.reduce((prev, next) => {
if (!next.group) prev++
return prev
}, 0)
return { total, notGroupCount }
})
const list = computed(() => {
return groupList.value.map(item => {
const hosts = $store.hostList.reduce((prev, next) => {
if (next.group === item.id) {
prev.count++
prev.list.push(next)
}
}
},
computed: {
hostGroupInfo() {
let total = this.$store.hostList.length
let notGroupCount = this.$store.hostList.reduce((prev, next) => {
if(!next.group) prev++
return prev
}, 0)
return { total, notGroupCount }
},
list() {
return this.groupList.map(item => {
let hosts = this.$store.hostList.reduce((prev, next) => {
if(next.group === item.id) {
prev.count++
prev.list.push(next)
}
return prev
}, { count: 0, list: [] })
return { ...item, hosts }
})
}
},
mounted() {
this.getGroupList()
},
methods: {
getGroupList() {
this.loading = true
this.$api.getGroupList()
.then(({ data }) => {
this.groupList = data
this.groupForm.index = data.length
})
.finally(() => this.loading = false)
},
addGroup() {
let formRef = this.$refs['group-form']
formRef.validate()
.then(() => {
const { name, index } = this.groupForm
this.$api.addGroup({ name, index })
.then(() => {
this.$message.success('success')
this.groupForm = { name: '', index: '' }
this.$nextTick(() => formRef.resetFields())
this.getGroupList()
})
})
},
handleChange({ id, name, index }) {
this.updateForm = { id, name, index }
this.visible = true
},
updateGroup() {
let formRef = this.$refs['update-form']
formRef.validate()
.then(() => {
const { id, name, index } = this.updateForm
this.$api.updateGroup(id, { name, index })
.then(() => {
this.$message.success('success')
this.visible = false
this.getGroupList()
})
})
},
deleteGroup({ id, name }) {
this.$messageBox.confirm( `确认删除分组：${ name }`, 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
await this.$api.deleteGroup(id)
await this.$store.getHostList()
this.$message.success('success')
this.getGroupList()
})
}
}
return prev
}, { count: 0, list: [] })
return { ...item, hosts }
})
})
const getGroupList = () => {
loading.value = true
$api.getGroupList()
.then(({ data }) => {
groupList.value = data
groupForm.index = data.length
})
.finally(() => loading.value = false)
}
const addGroup = () => {
groupFormRef.value.validate()
.then(() => {
const { name, index } = groupForm
$api.addGroup({ name, index })
.then(() => {
$message.success('success')
groupForm.name = ''
groupForm.index = ''
getGroupList()
})
})
}
const handleChange = ({ id, name, index }) => {
updateForm.id = id
updateForm.name = name
updateForm.index = index
visible.value = true
}
const updateGroup = () => {
updateFormRef.value.validate()
.then(() => {
const { id, name, index } = updateForm
$api.updateGroup(id, { name, index })
.then(() => {
$message.success('success')
visible.value = false
getGroupList()
})
})
}
const deleteGroup = ({ id, name }) => {
$messageBox.confirm(`确认删除分组：${name}`, 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(async () => {
await $api.deleteGroup(id)
await $store.getHostList()
$message.success('success')
getGroupList()
})
}
onMounted(() => {
getGroupList()
})
</script>
<style lang="scss" scoped>

72
web/src/views/list/components/setting-tab/notify-list.vue
View File

@ -1,5 +1,4 @@
<template>
<!-- 提示 -->
<el-alert type="success" :closable="false">
<template #title>
<span style="letter-spacing: 2px;"> Tips: 请添加邮箱并确保测试邮件通过 </span>
@ -21,43 +20,42 @@
</el-table>
</template>
<script>
export default {
name: 'NotifyList',
data() {
return {
notifyListLoading: false,
notifyList: []
}
},
mounted() {
this.getNotifyList()
},
methods: {
getNotifyList(flag = true) {
if(flag) this.notifyListLoading = true
this.$api.getNotifyList()
.then(({ data }) => {
this.notifyList = data.map((item) => {
item.loading = false
return item
})
})
.finally(() => this.notifyListLoading = false)
},
async handleChangeSw(row) {
row.loading = true
const { type, sw } = row
try {
await this.$api.updateNotifyList({ type, sw })
// if(this.userEmailList.length === 0) this.$message.warning('未配置邮箱, 此开关将不会生效')
} finally {
row.loading = true
}
this.getNotifyList(false)
}
}
<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy: { $api, $message } } = getCurrentInstance()
const notifyListLoading = ref(false)
const notifyList = ref([])
const getNotifyList = (flag = true) => {
if (flag) notifyListLoading.value = true
$api.getNotifyList()
.then(({ data }) => {
notifyList.value = data.map((item) => {
item.loading = false
return item
})
})
.finally(() => notifyListLoading.value = false)
}
const handleChangeSw = async (row) => {
row.loading = true
const { type, sw } = row
try {
await $api.updateNotifyList({ type, sw })
// if (this.userEmailList.length === 0) $message.warning('未配置邮箱, 此开关将不会生效')
} finally {
row.loading = false
}
getNotifyList(false)
}
onMounted(() => {
getNotifyList()
})
</script>
<style lang="scss" scoped>

73
web/src/views/list/components/setting-tab/password.vue
View File

@ -1,6 +1,6 @@
<template>
<el-form
ref="form"
ref="formRef"
class="password-form"
:model="formData"
:rules="rules"
@ -40,46 +40,39 @@
</el-form>
</template>
<script>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { RSAEncrypt } from '@utils/index.js'
export default {
name: 'UpdatePassword',
data() {
return {
loading: false,
formData: {
oldPwd: '',
newPwd: '',
confirmPwd: ''
},
rules: {
oldPwd: { required: true, message: '输入旧密码', trigger: 'change' },
newPwd: { required: true, message: '输入新密码', trigger: 'change' },
confirmPwd: { required: true, message: '输入确认密码', trigger: 'change' }
}
}
},
computed: {
formRef() {
return this.$refs['form']
}
},
methods: {
handleUpdate() {
this.formRef.validate()
.then(async () => {
let { oldPwd, newPwd, confirmPwd } = this.formData
if(newPwd !== confirmPwd) return this.$message.error({ center: true, message: '两次密码输入不一致' })
oldPwd = RSAEncrypt(oldPwd)
newPwd = RSAEncrypt(newPwd)
let { msg } = await this.$api.updatePwd({ oldPwd, newPwd })
this.$message({ type: 'success', center: true, message: msg })
this.formData = { oldPwd: '', newPwd: '', confirmPwd: '' }
this.formRef.resetFields()
})
}
}
const { proxy: { $api, $message } } = getCurrentInstance()
const loading = ref(false)
const formRef = ref(null)
const formData = reactive({
oldPwd: '',
newPwd: '',
confirmPwd: ''
})
const rules = reactive({
oldPwd: { required: true, message: '输入旧密码', trigger: 'change' },
newPwd: { required: true, message: '输入新密码', trigger: 'change' },
confirmPwd: { required: true, message: '输入确认密码', trigger: 'change' }
})
const handleUpdate = () => {
formRef.value.validate()
.then(async () => {
let { oldPwd, newPwd, confirmPwd } = formData
if(newPwd !== confirmPwd) return $message.error({ center: true, message: '两次密码输入不一致' })
oldPwd = RSAEncrypt(oldPwd)
newPwd = RSAEncrypt(newPwd)
let { msg } = await $api.updatePwd({ oldPwd, newPwd })
$message({ type: 'success', center: true, message: msg })
formData.oldPwd = ''
formData.newPwd = ''
formData.confirmPwd = ''
formRef.value.resetFields()
})
}
</script>
@ -87,4 +80,4 @@ export default {
.password-form {
width: 500px;
}
</style>
</style>

52
web/src/views/list/components/setting-tab/record.vue
View File

@ -15,36 +15,32 @@
</el-table>
</template>
<script>
export default {
name: 'LoginRecord',
data() {
return {
loginRecordList: [],
loading: false
}
},
created() {
this.handleLookupLoginRecord()
},
methods: {
handleLookupLoginRecord() {
this.loading = true
this.$api.getLoginRecord()
.then(({ data }) => {
this.loginRecordList = data.map((item) => {
item.date = this.$tools.formatTimestamp(item.date)
return item
})
})
.finally(() => {
this.loading = false
})
}
}
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
const { proxy: { $api, $tools } } = getCurrentInstance()
const loginRecordList = ref([])
const loading = ref(false)
const handleLookupLoginRecord = () => {
loading.value = true
$api.getLoginRecord()
.then(({ data }) => {
loginRecordList.value = data.map((item) => {
item.date = $tools.formatTimestamp(item.date)
return item
})
})
.finally(() => {
loading.value = false
})
}
onMounted(() => {
handleLookupLoginRecord()
})
</script>
<style lang="scss" scoped>
</style>

81
web/src/views/list/components/setting-tab/sort.vue
View File

@ -19,53 +19,51 @@
<span>{{ item.name }}</span>
</li>
</transition-group>
<div style="display: flex; justify-content: center;margin-top: 25px">
<div style="display: flex; justify-content: center; margin-top: 25px">
<el-button type="primary" @click="handleUpdateSort">
保存
</el-button>
</div>
</template>
<script>
export default {
name: 'HostSort',
emits: ['update-list',],
data() {
return {
targetIndex: 0,
list: []
}
},
created() {
this.list = this.$store.hostList.map(({ name, host }) => ({ name, host }))
},
methods: {
dragstart(index) {
// console.log('拖动目标：', index)
this.targetIndex = index
},
dragenter(e, curIndex) {
e.preventDefault()
if (this.targetIndex !== curIndex) {
// console.log('拖动进入：', curIndex)
let target = this.list.splice(this.targetIndex, 1)[0]
this.list.splice(curIndex, 0, target)
this.targetIndex = curIndex // 每次拖动排序后重置目标元素下标
}
},
dragover(e) {
e.preventDefault()
},
handleUpdateSort() {
let { list } = this
this.$api.updateHostSort({ list })
.then(({ msg }) => {
this.$message({ type: 'success', center: true, message: msg })
this.$store.sortHostList(this.list)
})
}
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
const emit = defineEmits(['update-list'])
const { proxy: { $api, $message, $store } } = getCurrentInstance()
const targetIndex = ref(0)
const list = ref([])
const dragstart = (index) => {
targetIndex.value = index
}
const dragenter = (e, curIndex) => {
e.preventDefault()
if (targetIndex.value !== curIndex) {
let target = list.value.splice(targetIndex.value, 1)[0]
list.value.splice(curIndex, 0, target)
targetIndex.value = curIndex
}
}
const dragover = (e) => {
e.preventDefault()
}
const handleUpdateSort = () => {
$api.updateHostSort({ list: list.value })
.then(({ msg }) => {
$message({ type: 'success', center: true, message: msg })
$store.sortHostList(list.value)
emit('update-list', list.value) // 触发自定义事件
})
}
onMounted(() => {
list.value = $store.hostList.map(({ name, host }) => ({ name, host }))
})
</script>
<style lang="scss" scoped>
@ -82,18 +80,15 @@ export default {
cursor: move;
font-size: 12px;
color: #595959;
// width: 300px;
padding: 0 20px;
margin: 0 auto;
// background: #c8c8c8;
border-radius: 4px;
color: #000;
margin-bottom: 6px;
height: 35px;
line-height: 35px;
&:hover {
box-shadow: var(--el-box-shadow
);
box-shadow: var(--el-box-shadow);
}
}
.dialog-footer {

56
web/src/views/list/components/setting.vue
View File

@ -6,10 +6,7 @@
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-tabs
style="height: 500px;"
tab-position="left"
>
<el-tabs style="height: 500px;" tab-position="left">
<el-tab-pane label="分组管理">
<Group />
</el-tab-pane>
@ -17,7 +14,7 @@
<Record />
</el-tab-pane>
<el-tab-pane label="主机排序" lazy>
<Sort @update-list="$emit('update-list')" />
<Sort @update-list="emitUpdateList" />
</el-tab-pane>
<el-tab-pane label="全局通知" lazy>
<NotifyList />
@ -32,8 +29,8 @@
</el-dialog>
</template>
<script>
<script setup>
import { computed } from 'vue'
import NotifyList from './setting-tab/notify-list.vue'
import EmailList from './setting-tab/email-list.vue'
import Sort from './setting-tab/sort.vue'
@ -41,37 +38,22 @@ import Record from './setting-tab/record.vue'
import Group from './setting-tab/group.vue'
import Password from './setting-tab/password.vue'
export default {
name: 'Setting',
components: {
NotifyList,
EmailList,
Sort,
Record,
Group,
Password
},
props: {
show: {
required: true,
type: Boolean
}
},
emits: ['update:show', 'update-list',],
data() {
return {
}
},
computed: {
visible: {
get() {
return this.show
},
set(newVal) {
this.$emit('update:show', newVal)
}
}
const props = defineProps({
show: {
required: true,
type: Boolean
}
})
const emit = defineEmits(['update:show', 'update-list'])
const visible = computed({
get: () => props.show,
set: (newVal) => emit('update:show', newVal)
})
const emitUpdateList = () => {
emit('update-list')
}
</script>

212
web/src/views/list/components/ssh-form.vue
View File

@ -3,10 +3,10 @@
v-model="visible"
title="SSH连接"
:close-on-click-modal="false"
@closed="$nextTick(() => formRef.resetFields())"
@closed="clearFormInfo"
>
<el-form
ref="form"
ref="formRef"
:model="sshForm"
:rules="rules"
:hide-required-asterisk="true"
@ -55,7 +55,7 @@
选择私钥...
</el-button>
<input
ref="privateKey"
ref="privateKeyRef"
type="file"
name="privateKey"
style="display: none;"
@ -86,121 +86,117 @@
<span class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="handleSaveSSH">保存</el-button>
<!-- <el-button type="primary" @click="handleSaveSSH">保存并连接</el-button> -->
</span>
</template>
</el-dialog>
</template>
<script>
import $api from '@/api'
<script setup>
import { ref, reactive, computed, watch, getCurrentInstance, nextTick } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { randomStr, AESEncrypt, RSAEncrypt } from '@utils/index.js'
export default {
name: 'SSHForm',
props: {
show: {
required: true,
type: Boolean
},
tempHost: {
required: true,
type: String
},
name: {
required: true,
type: String
}
const props = defineProps({
show: {
required: true,
type: Boolean
},
emits: ['update:show',],
data() {
return {
sshForm: {
host: '',
port: 22,
username: '',
type: 'privateKey',
password: '',
privateKey: '',
command: ''
},
defaultUsers: [
{ value: 'root' },
{ value: 'ubuntu' },
],
rules: {
host: { required: true, message: '需输入主机', trigger: 'change' },
port: { required: true, message: '需输入端口', trigger: 'change' },
username: { required: true, message: '需输入用户名', trigger: 'change' },
type: { required: true },
password: { required: true, message: '需输入密码', trigger: 'change' },
privateKey: { required: true, message: '需输入密钥', trigger: 'change' },
command: { required: false }
}
}
tempHost: {
required: true,
type: String
},
computed: {
visible: {
get() {
return this.show
},
set(newVal) {
this.$emit('update:show', newVal)
}
},
formRef() {
return this.$refs['form']
}
},
watch: {
tempHost: {
handler(newVal) {
this.sshForm.host = newVal
}
}
},
methods: {
handleClickUploadBtn() {
this.$refs['privateKey'].click()
},
handleSelectPrivateKeyFile(event) {
let file = event.target.files[0]
let reader = new FileReader()
reader.onload = (e) => {
this.sshForm.privateKey = e.target.result
this.$refs['privateKey'].value = ''
}
reader.readAsText(file)
},
handleSaveSSH() {
this.formRef.validate()
.then(async () => {
let randomKey = randomStr(16)
let formData = JSON.parse(JSON.stringify(this.sshForm))
// 加密传输
if(formData.password) formData.password = AESEncrypt(formData.password, randomKey)
if(formData.privateKey) formData.privateKey = AESEncrypt(formData.privateKey, randomKey)
formData.randomKey = RSAEncrypt(randomKey)
await $api.updateSSH(formData)
this.$notification({
title: '保存成功',
message: '下次点击 [Web SSH] 可直接登录终端\n如无法登录请 [移除凭证] 后重新添加',
type: 'success'
})
this.visible = false
// this.$message({ type: 'success', center: true, message: data })
// setTimeout(() => {
// window.open(`/terminal?host=${ this.tempHost }&name=${ this.name }`)
// }, 1000)
})
},
userSearch(keyword, cb) {
let res = keyword
? this.defaultUsers.filter((item) => item.value.includes(keyword))
: this.defaultUsers
cb(res)
}
name: {
required: true,
type: String
}
})
const emit = defineEmits(['update:show'])
const formRef = ref(null)
const privateKeyRef = ref(null)
const sshForm = reactive({
host: '',
port: 22,
username: '',
type: 'privateKey',
password: '',
privateKey: '',
command: ''
})
const defaultUsers = [
{ value: 'root' },
{ value: 'ubuntu' },
]
const rules = reactive({
host: { required: true, message: '需输入主机', trigger: 'change' },
port: { required: true, message: '需输入端口', trigger: 'change' },
username: { required: true, message: '需输入用户名', trigger: 'change' },
type: { required: true },
password: { required: true, message: '需输入密码', trigger: 'change' },
privateKey: { required: true, message: '需输入密钥', trigger: 'change' },
command: { required: false }
})
const { proxy: { $api, $tools } } = getCurrentInstance()
const visible = computed({
get() {
return props.show
},
set(newVal) {
emit('update:show', newVal)
}
})
watch(() => props.tempHost, (newVal) => {
sshForm.host = newVal
})
const handleClickUploadBtn = () => {
privateKeyRef.value.click()
}
const handleSelectPrivateKeyFile = (event) => {
let file = event.target.files[0]
let reader = new FileReader()
reader.onload = (e) => {
sshForm.privateKey = e.target.result
privateKeyRef.value.value = ''
}
reader.readAsText(file)
}
const handleSaveSSH = () => {
formRef.value.validate()
.then(async () => {
let randomKey = randomStr(16)
let formData = JSON.parse(JSON.stringify(sshForm))
// 加密传输
if (formData.password) formData.password = AESEncrypt(formData.password, randomKey)
if (formData.privateKey) formData.privateKey = AESEncrypt(formData.privateKey, randomKey)
formData.randomKey = RSAEncrypt(randomKey)
await $api.updateSSH(formData)
ElNotification({
title: '保存成功',
message: '下次点击 [Web SSH] 可直接登录终端\n如无法登录请 [移除凭证] 后重新添加',
type: 'success'
})
visible.value = false
})
}
const userSearch = (keyword, cb) => {
let res = keyword
? defaultUsers.filter((item) => item.value.includes(keyword))
: defaultUsers
cb(res)
}
const clearFormInfo = () => {
nextTick(() => formRef.value.resetFields())
}
</script>

190
web/src/views/list/index.vue
View File

@ -45,118 +45,106 @@
/>
</template>
<script>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import { io } from 'socket.io-client'
import HostForm from './components/host-form.vue'
import Setting from './components/setting.vue'
import HostCard from './components/host-card.vue'
export default {
name: 'App',
components: {
HostCard,
HostForm,
Setting
},
data() {
return {
socket: null,
loading: true,
hostListStatus: [],
updateHostData: null,
hostFormVisible: false,
settingVisible: false,
hiddenIp: Number(localStorage.getItem('hiddenIp') || 0)
}
},
mounted() {
this.getHostList()
},
beforeUnmount() {
this.socket?.close && this.socket.close()
},
methods: {
handleLogout() {
this.$store.clearJwtToken()
this.$message({ type: 'success', message: '已安全退出', center: true })
this.$router.push('/login')
},
async getHostList() {
try {
this.loading = true
await this.$store.getHostList()
this.connectIo()
} catch(err) {
this.loading = false
}
},
connectIo() {
let socket = io(this.$serviceURI, {
path: '/clients',
forceNew: true, // 强制新的实例
reconnectionDelay: 5000,
reconnectionAttempts: 2 // 每5s后尝试重新连接次数
})
this.socket = socket
socket.on('connect', () => {
let flag = 5
this.loading = false
console.log('clients websocket 已连接: ', socket.id)
let token = this.$store.token
socket.emit('init_clients_data', { token })
socket.on('clients_data', (data) => {
if((flag++ % 5) === 0) this.$store.getHostPing()
this.hostListStatus = this.$store.hostList.map(item => {
const { host } = item
if(data[host] === null) return { ...item }// 为null时表示该服务器断开连接
return Object.assign({}, item, data[host])
})
})
socket.on('token_verify_fail', (message) => {
this.$notification({
title: '鉴权失败',
message,
type: 'error'
})
this.$router.push('/login')
})
})
socket.on('disconnect', () => {
// this.$notification({
// title: 'server websocket error',
// message: '与服务器连接断开',
// type: 'error'
// })
console.error('clients websocket 连接断开')
})
socket.on('connect_error', (message) => {
this.loading = false
console.error('clients websocket 连接出错: ', message)
})
},
handleUpdateList() {
this.socket.close && this.socket.close()
this.getHostList()
},
handleUpdateHost(defaultData) {
this.hostFormVisible = true
this.updateHostData = defaultData
},
handleHiddenIP() {
this.hiddenIp = this.hiddenIp ? 0 : 1
localStorage.setItem('hiddenIp', String(this.hiddenIp))
}
const { proxy: { $store, $api, $message, $notification, $router, $serviceURI } } = getCurrentInstance()
const socket = ref(null)
const loading = ref(true)
const hostListStatus = ref([])
const updateHostData = ref(null)
const hostFormVisible = ref(false)
const settingVisible = ref(false)
const hiddenIp = ref(Number(localStorage.getItem('hiddenIp') || 0))
const handleLogout = () => {
$store.clearJwtToken()
$message({ type: 'success', message: '已安全退出', center: true })
$router.push('/login')
}
const getHostList = async () => {
try {
loading.value = true
await $store.getHostList()
connectIo()
} catch (err) {
loading.value = false
}
}
const connectIo = () => {
let socketInstance = io($serviceURI, {
path: '/clients',
forceNew: true,
reconnectionDelay: 5000,
reconnectionAttempts: 2
})
socket.value = socketInstance
socketInstance.on('connect', () => {
let flag = 5
loading.value = false
console.log('clients websocket 已连接: ', socketInstance.id)
let token = $store.token
socketInstance.emit('init_clients_data', { token })
socketInstance.on('clients_data', (data) => {
if ((flag++ % 5) === 0) $store.getHostPing()
hostListStatus.value = $store.hostList.map(item => {
const { host } = item
if (data[host] === null) return { ...item }
return Object.assign({}, item, data[host])
})
})
socketInstance.on('token_verify_fail', (message) => {
$notification({
title: '鉴权失败',
message,
type: 'error'
})
$router.push('/login')
})
})
socketInstance.on('disconnect', () => {
console.error('clients websocket 连接断开')
})
socketInstance.on('connect_error', (message) => {
loading.value = false
console.error('clients websocket 连接出错: ', message)
})
}
const handleUpdateList = () => {
if (socket.value) socket.value.close()
getHostList()
}
const handleUpdateHost = (defaultData) => {
hostFormVisible.value = true
updateHostData.value = defaultData
}
const handleHiddenIP = () => {
hiddenIp.value = hiddenIp.value ? 0 : 1
localStorage.setItem('hiddenIp', String(hiddenIp.value))
}
onMounted(() => {
getHostList()
})
onBeforeUnmount(() => {
if (socket.value) socket.value.close()
})
</script>
<style lang="scss" scoped>
$height:70px;
header {
// position: sticky;
// top: 0px;
// z-index: 1;
// background: rgba(255,255,255,0);
padding: 0 30px;
height: $height;
display: flex;
@ -194,4 +182,4 @@ footer {
font-weight: 600;
}
}
</style>
</style>

166
web/src/views/login/index.vue
View File

@ -1,148 +1,98 @@
<template>
<el-dialog
v-model="visible"
width="500px"
:top="'30vh'"
destroy-on-close
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
center
>
<el-dialog v-model="visible" width="500px" :top="'30vh'" destroy-on-close :close-on-click-modal="false"
:close-on-press-escape="false" :show-close="false" center>
<template #header>
<h2 v-if="notKey" style="color: #f56c6c;"> Error </h2>
<h2 v-else style="color: #409eff;"> LOGIN </h2>
</template>
<div v-if="notKey">
<el-alert
title="Error: 用于加密的公钥获取失败，请尝试重新启动或部署服务"
type="error"
show-icon
/>
<el-alert title="Error: 用于加密的公钥获取失败，请尝试重新启动或部署服务" type="error" show-icon />
</div>
<div v-else>
<el-form
ref="login-form"
:model="loginForm"
:rules="rules"
:hide-required-asterisk="true"
label-suffix="："
label-width="90px"
>
<el-form ref="loginFormRefs" :model="loginForm" :rules="rules" :hide-required-asterisk="true" label-suffix="："
label-width="90px">
<el-form-item prop="pwd" label="密码">
<el-input
v-model.trim="loginForm.pwd"
type="password"
placeholder="Please input password"
autocomplete="off"
:trigger-on-focus="false"
clearable
show-password
@keyup.enter="handleLogin"
/>
<el-input v-model.trim="loginForm.pwd" type="password" placeholder="Please input password" autocomplete="off"
:trigger-on-focus="false" clearable show-password @keyup.enter="handleLogin" />
</el-form-item>
<el-form-item
v-show="false"
prop="pwd"
label="密码"
>
<el-form-item v-show="false" prop="pwd" label="密码">
<el-input v-model.trim="loginForm.pwd" />
</el-form-item>
<el-form-item
prop="jwtExpires"
label="有效期"
>
<el-form-item prop="jwtExpires" label="有效期">
<el-radio-group v-model="isSession" class="login-indate">
<el-radio :value="true">一次性会话</el-radio>
<el-radio :value="false">自定义(小时)</el-radio>
<el-input-number
v-model="loginForm.jwtExpires"
:disabled="isSession"
placeholder="单位：小时"
class="input"
:min="1"
:max="72"
value-on-clear="min"
size="small"
controls-position="right"
/>
<el-input-number v-model="loginForm.jwtExpires" :disabled="isSession" placeholder="单位：小时" class="input"
:min="1" :max="72" value-on-clear="min" size="small" controls-position="right" />
</el-radio-group>
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button
type="primary"
:loading="loading"
@click="handleLogin"
>登录</el-button>
<el-button type="primary" :loading="loading" @click="handleLogin">登录</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { RSAEncrypt } from '@utils/index.js'
// import { useRouter } from 'vue-router'
// import useStore from '@store/index'
export default {
name: 'App',
data() {
return {
isSession: true,
visible: true,
notKey: false,
loading: false,
loginForm: {
pwd: '',
jwtExpires: 8
},
rules: {
pwd: { required: true, message: '需输入密码', trigger: 'change' }
}
// const router = useRouter()
const { proxy: { $store, $api, $message, $router } } = getCurrentInstance()
const loginFormRefs = ref(null)
const isSession = ref(true)
const visible = ref(true)
const notKey = ref(false)
const loading = ref(false)
const loginForm = reactive({
pwd: '',
jwtExpires: 8,
})
const rules = reactive({
pwd: { required: true, message: '需输入密码', trigger: 'change' },
})
const handleLogin = () => {
loginFormRefs.value.validate().then(() => {
let jwtExpires = isSession.value ? '12h' : `${loginForm.jwtExpires}h`
if (!isSession.value) {
localStorage.setItem('jwtExpires', loginForm.jwtExpires)
}
},
async created() {
if(localStorage.getItem('jwtExpires')) this.loginForm.jwtExpires = Number(localStorage.getItem('jwtExpires'))
// console.log(localStorage.getItem('jwtExpires'))
// 获取公钥
let { data } = await this.$api.getPubPem()
if (!data) return (this.notKey = true)
localStorage.setItem('publicKey', data)
},
methods: {
handleLogin() {
this.$refs['login-form'].validate().then(() => {
let { isSession, loginForm: { pwd, jwtExpires } } = this
if(isSession) jwtExpires = '12h' // 一次性token有效期12h，存储sessionStroage
else {
localStorage.setItem('jwtExpires', jwtExpires)
jwtExpires = `${ jwtExpires }h`
}
const ciphertext = RSAEncrypt(pwd)
if(ciphertext === -1) return this.$message.error({ message: '公钥加载失败', center: true })
this.loading = true
// console.log('加密后：', ciphertext)
this.$api.login({ ciphertext, jwtExpires })
.then(({ data, msg }) => {
let { token } = data
this.$store.setJwtToken(token, isSession)
this.$message.success({ message: msg || 'success', center: true })
this.$router.push('/')
})
.finally(() => {
this.loading = false
})
const ciphertext = RSAEncrypt(loginForm.pwd)
if (ciphertext === -1) return $message.error({ message: '公钥加载失败', center: true })
loading.value = true
$api.login({ ciphertext, jwtExpires })
.then(({ data, msg }) => {
const { token } = data
$store.setJwtToken(token, isSession.value)
$message.success({ message: msg || 'success', center: true })
$router.push('/')
})
}
}
.finally(() => {
loading.value = false
})
})
}
onMounted(async () => {
if (localStorage.getItem('jwtExpires')) loginForm.jwtExpires = Number(localStorage.getItem('jwtExpires'))
const { data } = await $api.getPubPem()
if (!data) return (notKey.value = true)
localStorage.setItem('publicKey', data)
})
</script>
<style lang="scss" scoped>
.login-indate {
display: flex;
flex-wrap: nowrap;
.input {
margin-left: -25px;
// width: auto;

374
web/src/views/terminal/components/info-side.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="info-container" :style="{width: visible ? `250px` : 0}">
<div class="info-container" :style="{ width: visible ? `250px` : 0 }">
<header>
<a href="/">
<img src="@/assets/logo-easynode.png" alt="logo">
@ -12,12 +12,7 @@
</div> -->
</header>
<el-divider class="first-divider" content-position="center">POSITION</el-divider>
<el-descriptions
class="margin-top"
:column="1"
size="small"
border
>
<el-descriptions class="margin-top" :column="1" size="small" border>
<el-descriptions-item>
<template #label>
<div class="item-title">
@ -48,24 +43,14 @@
</el-descriptions>
<el-divider content-position="center">INDICATOR</el-divider>
<el-descriptions
class="margin-top"
:column="1"
size="small"
border
>
<el-descriptions class="margin-top" :column="1" size="small" border>
<el-descriptions-item>
<template #label>
<div class="item-title">
CPU
</div>
</template>
<el-progress
:text-inside="true"
:stroke-width="18"
:percentage="cpuUsage"
:color="handleColor(cpuUsage)"
/>
<el-progress :text-inside="true" :stroke-width="18" :percentage="cpuUsage" :color="handleColor(cpuUsage)" />
</el-descriptions-item>
<el-descriptions-item>
<template #label>
@ -73,12 +58,8 @@
内存
</div>
</template>
<el-progress
:text-inside="true"
:stroke-width="18"
:percentage="usedMemPercentage"
:color="handleColor(usedMemPercentage)"
/>
<el-progress :text-inside="true" :stroke-width="18" :percentage="usedMemPercentage"
:color="handleColor(usedMemPercentage)" />
<div class="position-right">
{{ $tools.toFixed(memInfo.usedMemMb / 1024) }}/{{ $tools.toFixed(memInfo.totalMemMb / 1024) }}G
</div>
@ -89,12 +70,8 @@
硬盘
</div>
</template>
<el-progress
:text-inside="true"
:stroke-width="18"
:percentage="usedPercentage"
:color="handleColor(usedPercentage)"
/>
<el-progress :text-inside="true" :stroke-width="18" :percentage="usedPercentage"
:color="handleColor(usedPercentage)" />
<div class="position-right">
{{ driveInfo.usedGb || '--' }}/{{ driveInfo.totalGb || '--' }}G
</div>
@ -119,12 +96,7 @@
</el-descriptions>
<el-divider content-position="center">INFORMATION</el-divider>
<el-descriptions
class="margin-top"
:column="1"
size="small"
border
>
<el-descriptions class="margin-top" :column="1" size="small" border>
<el-descriptions-item>
<template #label>
<div class="item-title">
@ -188,181 +160,167 @@
</el-descriptions>
<el-divider content-position="center">FEATURE</el-divider>
<el-button
:type="sftpStatus ? 'primary' : 'success'"
style="display: block;width: 80%;margin: 30px auto;"
@click="handleSftp"
>
<el-button :type="sftpStatus ? 'primary' : 'success'" style="display: block;width: 80%;margin: 30px auto;"
@click="handleSftp">
{{ sftpStatus ? '关闭SFTP' : '连接SFTP' }}
</el-button>
<el-button
:type="inputCommandStatus ? 'primary' : 'success'"
style="display: block;width: 80%;margin: 30px auto;"
@click="clickInputCommand"
>
<el-button :type="inputCommandStyle ? 'primary' : 'success'" style="display: block;width: 80%;margin: 30px auto;"
@click="clickInputCommand">
命令输入框
</el-button>
</div>
</template>
<script>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, computed, getCurrentInstance } from 'vue'
import socketIo from 'socket.io-client'
export default {
name: 'InfoSide',
props: {
token: {
required: true,
type: String
},
host: {
required: true,
type: String
},
visible: {
required: true,
type: Boolean
}
},
emits: ['connect-sftp', 'click-input-command',],
data() {
return {
socket: null,
name: '',
hostData: null,
ping: 0,
pingTimer: null,
sftpStatus: false,
inputCommandStatus: false
}
},
computed: {
ipInfo() {
return this.hostData?.ipInfo || {}
},
isError() {
return !Boolean(this.hostData?.osInfo) // 没获取系统信息默认未连接
},
cpuInfo() {
return this.hostData?.cpuInfo || {}
},
memInfo() {
return this.hostData?.memInfo || {}
},
osInfo() {
return this.hostData?.osInfo || {}
},
driveInfo() {
return this.hostData?.driveInfo || {}
},
netstatInfo() {
let { total: netTotal, ...netCards } = this.hostData?.netstatInfo || {}
return { netTotal, netCards: netCards || {} }
},
openedCount() {
return this.hostData?.openedCount || 0
},
cpuUsage() {
return Number(this.cpuInfo?.cpuUsage) || 0
},
usedMemPercentage() {
return Number(this.memInfo?.usedMemPercentage) || 0
},
usedPercentage() {
return Number(this.driveInfo?.usedPercentage) || 0
},
output() {
let outputMb = Number(this.netstatInfo.netTotal?.outputMb) || 0
if(outputMb >= 1 ) return `${ outputMb.toFixed(2) } MB/s`
return `${ (outputMb * 1024).toFixed(1) } KB/s`
},
input() {
let inputMb = Number(this.netstatInfo.netTotal?.inputMb) || 0
if(inputMb >= 1 ) return `${ inputMb.toFixed(2) } MB/s`
return `${ (inputMb * 1024).toFixed(1) } KB/s`
}
},
created() {
this.name = this.$route.query.name || ''
if(!this.host || !this.name) return this.$message.error('参数错误')
this.connectIO()
},
beforeUnmount() {
this.socket && this.socket.close()
this.pingTimer && clearInterval(this.pingTimer)
},
methods: {
handleSftp() {
this.sftpStatus = !this.sftpStatus
this.$emit('connect-sftp', this.sftpStatus)
},
clickInputCommand() {
this.inputCommandStatus = true
this.$emit('click-input-command')
},
connectIO() {
let { host, token } = this
this.socket = socketIo(this.$serviceURI, {
path: '/host-status',
forceNew: true, // 强制新的实例
timeout: 5000,
reconnectionDelay: 3000,
reconnectionAttempts: 3
})
this.socket.on('connect', () => {
console.log('/host-status socket已连接：', this.socket.id)
this.socket.emit('init_host_data', { token, host })
this.getHostPing()
this.socket.on('host_data', (hostData) => {
if(!hostData) return this.hostData = null
this.hostData = hostData
})
})
const { proxy: { $router, $serviceURI, $message, $notification, $tools } } = getCurrentInstance()
this.socket.on('connect_error', (err) => {
console.error('host status websocket 连接错误：', err)
this.$notification({
title: '连接客户端失败(重连中...)',
message: '请检查客户端服务是否正常',
type: 'error'
})
})
const props = defineProps({
token: {
required: true,
type: String
},
host: {
required: true,
type: String
},
visible: {
required: true,
type: Boolean
},
showInputCommand: {
required: true,
type: Boolean
},
})
this.socket.on('disconnect', () => {
this.hostData = null
this.$notification({
title: '客户端连接主动断开(重连中...)',
message: '请检查客户端服务是否正常',
type: 'error'
})
})
},
async handleCopy() {
await navigator.clipboard.writeText(this.host)
this.$message.success({ message: 'success', center: true })
},
handleColor(num) {
if(num < 65) return '#8AE234'
if(num < 85) return '#FFD700'
if(num < 90) return '#FFFF33'
if(num <= 100) return '#FF3333'
},
getHostPing() {
this.pingTimer = setInterval(() => {
this.$tools.ping(`http://${ this.host }:22022`)
.then(res => {
this.ping = res
if(!import.meta.env.DEV) {
// console.clear()
console.warn('Please tick \'Preserve Log\'')
}
})
}, 3000)
}
const emit = defineEmits(['update:inputCommandStyle', 'connect-sftp', 'click-input-command'])
const socket = ref(null)
const name = ref('')
const hostData = ref(null)
const ping = ref(0)
const pingTimer = ref(null)
const sftpStatus = ref(false)
const ipInfo = computed(() => hostData.value?.ipInfo || {})
const isError = computed(() => !Boolean(hostData.value?.osInfo))
const cpuInfo = computed(() => hostData.value?.cpuInfo || {})
const memInfo = computed(() => hostData.value?.memInfo || {})
const osInfo = computed(() => hostData.value?.osInfo || {})
const driveInfo = computed(() => hostData.value?.driveInfo || {})
const netstatInfo = computed(() => {
let { total: netTotal, ...netCards } = hostData.value?.netstatInfo || {}
return { netTotal, netCards: netCards || {} }
})
const openedCount = computed(() => hostData.value?.openedCount || 0)
const cpuUsage = computed(() => Number(cpuInfo.value?.cpuUsage) || 0)
const usedMemPercentage = computed(() => Number(memInfo.value?.usedMemPercentage) || 0)
const usedPercentage = computed(() => Number(driveInfo.value?.usedPercentage) || 0)
const output = computed(() => {
let outputMb = Number(netstatInfo.value.netTotal?.outputMb) || 0
if (outputMb >= 1) return `${outputMb.toFixed(2)} MB/s`
return `${(outputMb * 1024).toFixed(1)} KB/s`
})
const input = computed(() => {
let inputMb = Number(netstatInfo.value.netTotal?.inputMb) || 0
if (inputMb >= 1) return `${inputMb.toFixed(2)} MB/s`
return `${(inputMb * 1024).toFixed(1)} KB/s`
})
const inputCommandStyle = computed({
get: () => props.showInputCommand,
set: (val) => {
emit('update:inputCommandStyle', val)
}
})
const handleSftp = () => {
sftpStatus.value = !sftpStatus.value
emit('connect-sftp', sftpStatus.value)
}
const clickInputCommand = () => {
inputCommandStyle.value = true
emit('click-input-command')
}
const connectIO = () => {
const { host, token } = props
socket.value = socketIo($serviceURI, {
path: '/host-status',
forceNew: true,
timeout: 5000,
reconnectionDelay: 3000,
reconnectionAttempts: 3
})
socket.value.on('connect', () => {
console.log('/host-status socket已连接：', socket.value.id)
socket.value.emit('init_host_data', { token, host })
getHostPing()
socket.value.on('host_data', (data) => {
if (!data) return hostData.value = null
hostData.value = data
})
})
socket.value.on('connect_error', (err) => {
console.error('host status websocket 连接错误：', err)
$notification({
title: '连接客户端失败(重连中...)',
message: '请检查客户端服务是否正常',
type: 'error'
})
})
socket.value.on('disconnect', () => {
hostData.value = null
$notification({
title: '客户端连接主动断开(重连中...)',
message: '请检查客户端服务是否正常',
type: 'error'
})
})
}
const handleCopy = async () => {
await navigator.clipboard.writeText(props.host)
$message.success({ message: 'success', center: true })
}
const handleColor = (num) => {
if (num < 65) return '#8AE234'
if (num < 85) return '#FFD700'
if (num < 90) return '#FFFF33'
if (num <= 100) return '#FF3333'
}
const getHostPing = () => {
pingTimer.value = setInterval(() => {
$tools.ping(`http://${props.host}:22022`)
.then(res => {
ping.value = res
if (!import.meta.env.DEV) {
console.warn('Please tick \'Preserve Log\'')
}
})
}, 3000)
}
onMounted(() => {
name.value = $router.currentRoute.value.query.name || ''
if (!props.host || !name.value) return $message.error('参数错误')
connectIO()
})
onBeforeUnmount(() => {
socket.value && socket.value.close()
pingTimer.value && clearInterval(pingTimer.value)
})
</script>
<style lang="scss" scoped>
.info-container {
// min-width: 250px;
@ -372,6 +330,7 @@ export default {
overflow: scroll;
background-color: #fff; //#E0E2EF;
transition: all 0.3s;
header {
display: flex;
justify-content: space-between;
@ -379,11 +338,13 @@ export default {
height: 30px;
margin: 10px;
position: relative;
img {
cursor: pointer;
height: 80%;
}
}
// 表格中系统标识的title
.item-title {
user-select: none;
@ -392,6 +353,7 @@ export default {
min-width: 30px;
max-width: 30px;
}
.host-ping {
display: inline-block;
font-size: 13px;
@ -399,35 +361,43 @@ export default {
background-color: #e8fff3;
padding: 0 5px;
}
// 分割线title
:deep(.el-divider__text) {
color: #a0cfff;
padding: 0 8px;
user-select: none;
}
// 分割线间距
:deep(.el-divider--horizontal) {
margin: 28px 0 10px;
}
.first-divider {
margin: 15px 0 10px;
}
// 表格
:deep(.el-descriptions__table) {
tr {
display: flex;
.el-descriptions__label {
min-width: 35px;
flex-shrink: 0;
}
.el-descriptions__content {
position: relative;
flex: 1;
display: flex;
align-items: center;
.el-progress {
width: 100%;
}
// 进度条右边参数定位
.position-right {
position: absolute;
@ -436,36 +406,44 @@ export default {
}
}
}
// 进度条
:deep(.el-progress-bar__inner) {
display: flex;
align-items: center;
.el-progress-bar__innerText {
display: flex;
span {
color: #000;
}
}
}
// 网络
.netstat-info {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.wrap {
flex: 1;
display: flex;
align-items: center;
// justify-content: center;
padding: 0 5px;
img {
width: 15px;
margin-right: 5px;
}
.upload {
color: #CF8A20;
}
.download {
color: #67c23a;
}

784
web/src/views/terminal/components/sftp-footer.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="sftp-container">
<div ref="adjust" class="adjust" />
<div ref="adjustRef" class="adjust" />
<section>
<div class="left box">
<div class="header">
@ -62,10 +62,10 @@
<img
src="@/assets/image/system/upload.png"
style=" width: 19px; height: 19px; "
@click="$refs['upload_file'].click()"
@click="uploadFileRef.click()"
>
<input
ref="upload_file"
ref="uploadFileRef"
type="file"
style="display: none;"
multiple
@ -101,7 +101,7 @@
</div>
<ul
v-if="fileList.length !== 0"
ref="child-dir"
ref="childDirRef"
v-loading="childDirLoading"
element-loading-text="加载中..."
class="dir-list"
@ -132,7 +132,8 @@
</div>
</template>
<script>
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import socketIo from 'socket.io-client'
import CodeEdit from '@/components/code-edit/index.vue'
import { isDir, isFile, sortDirTree, downloadFile } from '@/utils'
@ -142,408 +143,391 @@ import fileIcon from '@/assets/image/system/file.png'
import unknowIcon from '@/assets/image/system/unknow.png'
const { io } = socketIo
export default {
name: 'Sftp',
components: { CodeEdit },
props: {
token: {
required: true,
type: String
},
host: {
required: true,
type: String
}
},
emits: ['resize',],
data() {
return {
visible: false,
originalCode: '',
filename: '',
filterKey: '',
socket: null,
icons: {
'-': fileIcon,
l: linkIcon,
d: dirIcon,
c: dirIcon,
p: unknowIcon,
s: unknowIcon,
b: unknowIcon
},
paths: ['/',],
rootLs: [],
childDir: [],
childDirLoading: false,
curTarget: null,
showFileProgress: false,
upFileProgress: 0,
curUploadFileName: ''
}
},
computed: {
curPath() {
return this.paths.join('/').replace(/\/{2,}/g, '/')
},
fileList() {
return this.childDir.filter(({ name }) => name.includes(this.filterKey))
}
},
mounted() {
this.connectSftp()
this.adjustHeight()
},
beforeUnmount() {
this.socket && this.socket.close()
},
methods: {
connectSftp() {
let { host, token } = this
this.socket = io(this.$serviceURI, {
path: '/sftp',
forceNew: false, // 强制新的连接
reconnectionAttempts: 1 // 尝试重新连接次数
})
this.socket.on('connect', () => {
console.log('/sftp socket已连接：', this.socket.id)
this.listenSftp()
// 验证身份并连接终端
this.socket.emit('create', { host, token })
this.socket.on('root_ls', (tree) => {
// console.log(tree)
let temp = sortDirTree(tree).filter((item) => isDir(item.type)) // 只保留文件夹类型的文件
temp.unshift({ name: '/', type: 'd' })
this.rootLs = temp
})
this.socket.on('create_fail', (message) => {
// console.error(message)
this.$notification({
title: 'Sftp连接失败',
message,
type: 'error'
})
})
this.socket.on('token_verify_fail', () => {
this.$notification({
title: 'Error',
message: 'token校验失败，需重新登录',
type: 'error'
})
// this.$router.push('/login')
})
})
this.socket.on('disconnect', () => {
console.warn('sftp websocket 连接断开')
if(this.showFileProgress) {
this.$notification({
title: '上传失败',
message: '请检查socket服务是否正常',
type: 'error'
})
this.handleRefresh()
this.resetFileStatusFlag()
}
})
this.socket.on('connect_error', (err) => {
console.error('sftp websocket 连接错误：', err)
this.$notification({
title: 'sftp连接失败',
message: '请检查socket服务是否正常',
type: 'error'
})
})
},
// 这个方法连接socket只能调用一次，否则on回调会执行多次
listenSftp() {
this.socket.on('dir_ls', (dirLs) => {
// console.log('dir_ls: ', dirLs)
this.childDir = sortDirTree(dirLs)
this.childDirLoading = false
})
this.socket.on('not_exists_dir', (errMsg) => {
this.$message.error(errMsg)
this.childDirLoading = false
})
this.socket.on('rm_success', (res) => {
this.$message.success(res)
this.childDirLoading = false
this.handleRefresh()
})
// this.socket.on('down_dir_success', (res) => {
// console.log(res)
// this.$message.success(res)
// this.childDirLoading = false
// })
this.socket.on('down_file_success', (res) => {
const { buffer, name } = res
downloadFile({ buffer, name })
this.$message.success('success')
this.resetFileStatusFlag()
})
this.socket.on('preview_file_success', (res) => {
const { buffer, name } = res
console.log('preview_file: ', name, buffer)
// String.fromCharCode.apply(null, new Uint8Array(temp1))
this.originalCode = new TextDecoder().decode(buffer)
this.filename = name
this.visible = true
})
this.socket.on('sftp_error', (res) => {
console.log('操作失败:', res)
this.$message.error(res)
this.resetFileStatusFlag()
})
this.socket.on('up_file_progress', (res) => {
// console.log('上传进度:', res)
// 浏览器到服务端占比50%，服务端到服务器占比50%
let progress = Math.ceil(50 + (res / 2))
this.upFileProgress = progress > 100 ? 100 : progress
})
this.socket.on('down_file_progress', (res) => {
// console.log('下载进度:', res)
this.upFileProgress = res
})
},
openRootChild(item) {
const { name, type } = item
if(isDir(type)) {
this.childDirLoading = true
this.paths.length = 2
this.paths[1] = name
this.$refs['child-dir']?.scrollTo(0, 0)
this.openDir()
this.filterKey = '' // 移除搜索条件
}else {
console.log('暂不支持打开文件', name, type)
this.$message.warning(`暂不支持打开文件${ name } ${ type }`)
}
},
openTarget(item) {
console.log(item)
const { name, type, size } = item
if(isDir(type)) {
this.paths.push(name)
this.$refs['child-dir']?.scrollTo(0, 0)
this.openDir()
} else if(isFile(type)) {
if(size/1024/1024 > 1) return this.$message.warning('暂不支持打开1M及以上文件, 请下载本地查看')
const path = this.getPath(name)
this.socket.emit('down_file', { path, name, size, target: 'preview' })
} else {
this.$message.warning(`暂不支持打开文件${ name } ${ type }`)
}
},
handleSaveCode(code) {
// console.log('code: ', code)
let file = new TextEncoder('utf-8').encode(code)
let name = this.filename
const fullPath = this.getPath(name)
const targetPath = this.curPath
this.socket.emit('up_file', { targetPath, fullPath, name, file })
},
handleClosedCode() {
this.filename = ''
this.originalCode = ''
},
selectFile(item) {
this.curTarget = item
},
handleReturn() {
if(this.paths.length === 1) return
this.paths.pop()
this.openDir()
},
handleRefresh() {
this.openDir()
},
handleDownload() {
if(this.curTarget === null) return this.$message.warning('先选择一个文件')
const { name, size, type } = this.curTarget
if(isDir(type)) return this.$message.error('暂不支持下载文件夹')
this.$messageBox.confirm( `确认下载：${ name }`, 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.childDirLoading = true
const path = this.getPath(name)
if(isDir(type)) {
// '暂不支持下载文件夹'
// this.socket.emit('down_dir', path)
}else if(isFile(type)) {
this.showFileProgress = true
this.socket.emit('down_file', { path, name, size, target: 'down' })
}else {
this.$message.error('不支持下载的文件类型')
}
})
},
handleDelete() {
if(this.curTarget === null) return this.$message.warning('先选择一个文件(夹)')
const { name, type } = this.curTarget
this.$messageBox.confirm( `确认删除：${ name }`, 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.childDirLoading = true
const path = this.getPath(name)
if(isDir(type)) {
this.socket.emit('rm_dir', path)
}else {
this.socket.emit('rm_file', path)
}
})
},
async handleUpload(event) {
if(this.showFileProgress) return this.$message.warning('需等待当前任务完成')
let { files } = event.target
for(let file of files) {
console.log(file)
try {
await this.uploadFile(file)
} catch (error) {
this.$message.error(error)
}
}
this.$refs['upload_file'].value = ''
},
uploadFile(file) {
return new Promise((resolve, reject) => {
if(!file) return reject('file is not defined')
if((file.size/1024/1024)> 1000) {
this.$message.warn('用网页传这么大文件你是认真的吗?')
}
let reader = new FileReader()
reader.onload = async (e) => {
// console.log('buffer:', e.target.result)
const { name } = file
const fullPath = this.getPath(name)
const targetPath = this.curPath
this.curUploadFileName = name
this.socket.emit('create_cache_dir', { targetPath, name })
// 每次上传只监听一次，多次监听会导致回调重复执行
this.socket.once('create_cache_success', async () => {
let start = 0
let end = 0
let range = 1024 * 512 // 每段512KB
let size = file.size
let fileIndex = 0
let multipleFlag = false // 用于防止上一个文件失败导致多次执行once
try {
console.log('=========开始上传分片=========')
this.upFileProgress = 0
this.showFileProgress = true
this.childDirLoading = true
let totalSliceCount = Math.ceil(size / range)
while(end < size) {
fileIndex++
end += range
let sliceFile = file.slice(start, end)
start = end
await this.uploadSliceFile({ name, sliceFile, fileIndex })
// 浏览器到服务端占比50%，服务端到服务器占比50%
this.upFileProgress = parseInt((fileIndex / totalSliceCount * 100) / 2)
}
console.log('=========分片上传完成(等待服务端上传至客户端)=========')
this.socket.emit('up_file_slice_over', { name, fullPath, range, size })
this.socket.once('up_file_success', (res) => {
if(multipleFlag) return
console.log('=========服务端上传至客户端上传完成✔=========')
// console.log('up_file_success:', res)
// this.$message.success(res)
this.handleRefresh()
this.resetFileStatusFlag()
multipleFlag = true
resolve()
})
this.socket.once('up_file_fail', (res) => {
if(multipleFlag) return
console.log('=========服务端上传至客户端上传失败❌=========')
// console.log('up_file_fail:', res)
this.$message.error(res)
this.handleRefresh()
this.resetFileStatusFlag()
multipleFlag = true
reject()
})
} catch (err) {
reject(err)
let errMsg = `上传失败, ${ err }`
console.error(errMsg)
this.$message.error(errMsg)
this.handleRefresh()
this.resetFileStatusFlag()
}
})
}
reader.readAsArrayBuffer(file)
})
},
resetFileStatusFlag() {
this.upFileProgress = 0
this.curUploadFileName = ''
this.showFileProgress = false
this.childDirLoading = false
},
uploadSliceFile(fileInfo) {
return new Promise((resolve, reject) => {
this.socket.emit('up_file_slice', fileInfo)
this.socket.once('up_file_slice_success', () => {
resolve()
})
this.socket.once('up_file_slice_fail', () => {
reject('分片文件上传失败')
})
this.socket.once('not_exists_dir', (errMsg) => {
reject(errMsg)
})
})
},
openDir() {
this.childDirLoading = true
this.curTarget = null
this.socket.emit('open_dir', this.curPath)
},
getPath(name = '') {
return this.curPath.length === 1 ? `/${ name }` : `${ this.curPath }/${ name }`
},
adjustHeight() {
let startAdjust = false
let timer = null
this.$nextTick(() => {
let sftpHeight = localStorage.getItem('sftpHeight')
if(sftpHeight) document.querySelector('.sftp-container').style.height = sftpHeight
else document.querySelector('.sftp-container').style.height = '33vh' // 默认占据页面高度1/3
this.$refs['adjust'].addEventListener('mousedown', () => {
// console.log('开始调整')
startAdjust = true
})
document.addEventListener('mousemove', (e) => {
if(!startAdjust) return
if(timer) clearTimeout(timer)
timer = setTimeout(() => {
sftpHeight = `calc(100vh - ${ e.pageY }px)`
document.querySelector('.sftp-container').style.height = sftpHeight
this.$emit('resize')
})
})
document.addEventListener('mouseup', (e) => {
if(!startAdjust) return
startAdjust = false
sftpHeight = `calc(100vh - ${ e.pageY }px)`
localStorage.setItem('sftpHeight', sftpHeight)
})
const props = defineProps({
token: {
required: true,
type: String
},
host: {
required: true,
type: String
}
})
const emit = defineEmits(['resize'])
const { proxy: { $notification, $message, $messageBox, $serviceURI, $nextTick } } = getCurrentInstance()
const visible = ref(false)
const originalCode = ref('')
const filename = ref('')
const filterKey = ref('')
const socket = ref(null)
const icons = {
'-': fileIcon,
l: linkIcon,
d: dirIcon,
c: dirIcon,
p: unknowIcon,
s: unknowIcon,
b: unknowIcon
}
const paths = ref(['/',])
const rootLs = ref([])
const childDir = ref([])
const childDirLoading = ref(false)
const curTarget = ref(null)
const showFileProgress = ref(false)
const upFileProgress = ref(0)
const curUploadFileName = ref('')
const adjustRef = ref(null)
const childDirRef = ref(null)
const uploadFileRef = ref(null)
const curPath = computed(() => paths.value.join('/').replace(/\/{2,}/g, '/'))
const fileList = computed(() => childDir.value.filter(({ name }) => name.includes(filterKey.value)))
onMounted(() => {
connectSftp()
adjustHeight()
})
onBeforeUnmount(() => {
if (socket.value) socket.value.close()
})
const connectSftp = () => {
socket.value = io($serviceURI, {
path: '/sftp',
forceNew: false,
reconnectionAttempts: 1
})
socket.value.on('connect', () => {
console.log('/sftp socket已连接：', socket.value.id)
listenSftp()
socket.value.emit('create', { host: props.host, token: props.token })
socket.value.on('root_ls', (tree) => {
let temp = sortDirTree(tree).filter((item) => isDir(item.type))
temp.unshift({ name: '/', type: 'd' })
rootLs.value = temp
})
socket.value.on('create_fail', (message) => {
$notification({
title: 'Sftp连接失败',
message,
type: 'error'
})
})
socket.value.on('token_verify_fail', () => {
$notification({
title: 'Error',
message: 'token校验失败，需重新登录',
type: 'error'
})
})
})
socket.value.on('disconnect', () => {
console.warn('sftp websocket 连接断开')
if (showFileProgress.value) {
$notification({
title: '上传失败',
message: '请检查socket服务是否正常',
type: 'error'
})
handleRefresh()
resetFileStatusFlag()
}
})
socket.value.on('connect_error', (err) => {
console.error('sftp websocket 连接错误：', err)
$notification({
title: 'sftp连接失败',
message: '请检查socket服务是否正常',
type: 'error'
})
})
}
const listenSftp = () => {
socket.value.on('dir_ls', (dirLs) => {
childDir.value = sortDirTree(dirLs)
childDirLoading.value = false
})
socket.value.on('not_exists_dir', (errMsg) => {
$message.error(errMsg)
childDirLoading.value = false
})
socket.value.on('rm_success', (res) => {
$message.success(res)
childDirLoading.value = false
handleRefresh()
})
socket.value.on('down_file_success', (res) => {
const { buffer, name } = res
downloadFile({ buffer, name })
$message.success('success')
resetFileStatusFlag()
})
socket.value.on('preview_file_success', (res) => {
const { buffer, name } = res
originalCode.value = new TextDecoder().decode(buffer)
filename.value = name
visible.value = true
})
socket.value.on('sftp_error', (res) => {
$message.error(res)
resetFileStatusFlag()
})
socket.value.on('up_file_progress', (res) => {
let progress = Math.ceil(50 + (res / 2))
upFileProgress.value = progress > 100 ? 100 : progress
})
socket.value.on('down_file_progress', (res) => {
upFileProgress.value = res
})
}
const openRootChild = (item) => {
const { name, type } = item
if (isDir(type)) {
childDirLoading.value = true
paths.value.length = 2
paths.value[1] = name
$nextTick(() => {
if (childDirRef.value) childDirRef.value.scrollTo(0, 0)
})
openDir()
filterKey.value = ''
} else {
$message.warning(`暂不支持打开文件${name} ${type}`)
}
}
const openTarget = (item) => {
const { name, type, size } = item
if (isDir(type)) {
paths.value.push(name)
$nextTick(() => {
if (childDirRef.value) childDirRef.value.scrollTo(0, 0)
})
openDir()
} else if (isFile(type)) {
if (size / 1024 / 1024 > 1) return $message.warning('暂不支持打开1M及以上文件, 请下载本地查看')
const path = getPath(name)
socket.value.emit('down_file', { path, name, size, target: 'preview' })
} else {
$message.warning(`暂不支持打开文件${name} ${type}`)
}
}
const handleSaveCode = (code) => {
let file = new TextEncoder('utf-8').encode(code)
let name = filename.value
const fullPath = getPath(name)
const targetPath = curPath.value
socket.value.emit('up_file', { targetPath, fullPath, name, file })
}
const handleClosedCode = () => {
filename.value = ''
originalCode.value = ''
}
const selectFile = (item) => {
curTarget.value = item
}
const handleReturn = () => {
if (paths.value.length === 1) return
paths.value.pop()
openDir()
}
const handleRefresh = () => {
openDir()
}
const handleDownload = () => {
if (curTarget.value === null) return $message.warning('先选择一个文件')
const { name, size, type } = curTarget.value
if (isDir(type)) return $message.error('暂不支持下载文件夹')
$messageBox.confirm(`确认下载：${name}`, 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
childDirLoading.value = true
const path = getPath(name)
if (isDir(type)) {
// '暂不支持下载文件夹'
} else if (isFile(type)) {
showFileProgress.value = true
socket.value.emit('down_file', { path, name, size, target: 'down' })
} else {
$message.error('不支持下载的文件类型')
}
})
}
const handleDelete = () => {
if (curTarget.value === null) return $message.warning('先选择一个文件(夹)')
const { name, type } = curTarget.value
$messageBox.confirm(`确认删除：${name}`, 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
childDirLoading.value = true
const path = getPath(name)
if (isDir(type)) {
socket.value.emit('rm_dir', path)
} else {
socket.value.emit('rm_file', path)
}
})
}
const handleUpload = async (event) => {
if (showFileProgress.value) return $message.warning('需等待当前任务完成')
let { files } = event.target
for (let file of files) {
try {
await uploadFile(file)
} catch (error) {
$message.error(error)
}
}
uploadFileRef.value = null
}
const uploadFile = (file) => {
return new Promise((resolve, reject) => {
if (!file) return reject('file is not defined')
if ((file.size / 1024 / 1024) > 1000) {
$message.warn('用网页传这么大文件你是认真的吗?')
}
let reader = new
FileReader()
reader.onload = async (e) => {
const { name } = file
const fullPath = getPath(name)
const targetPath = curPath.value
curUploadFileName.value = name
socket.value.emit('create_cache_dir', { targetPath, name })
socket.value.once('create_cache_success', async () => {
let start = 0
let end = 0
const range = 1024 * 512 // 每段512KB
const size = file.size
let fileIndex = 0
let multipleFlag = false
try {
upFileProgress.value = 0
showFileProgress.value = true
childDirLoading.value = true
const totalSliceCount = Math.ceil(size / range)
while (end < size) {
fileIndex++
end += range
const sliceFile = file.slice(start, end)
start = end
await uploadSliceFile({ name, sliceFile, fileIndex })
upFileProgress.value = parseInt((fileIndex / totalSliceCount * 100) / 2)
}
socket.value.emit('up_file_slice_over', { name, fullPath, range, size })
socket.value.once('up_file_success', (res) => {
if (multipleFlag) return
handleRefresh()
resetFileStatusFlag()
multipleFlag = true
resolve()
})
socket.value.once('up_file_fail', (res) => {
if (multipleFlag) return
$message.error(res)
handleRefresh()
resetFileStatusFlag()
multipleFlag = true
reject()
})
} catch (err) {
reject(err)
const errMsg = `上传失败, ${err}`
$message.error(errMsg)
handleRefresh()
resetFileStatusFlag()
}
})
}
reader.readAsArrayBuffer(file)
})
}
const resetFileStatusFlag = () => {
upFileProgress.value = 0
curUploadFileName.value = ''
showFileProgress.value = false
childDirLoading.value = false
}
const uploadSliceFile = (fileInfo) => {
return new Promise((resolve, reject) => {
socket.value.emit('up_file_slice', fileInfo)
socket.value.once('up_file_slice_success', () => {
resolve()
})
socket.value.once('up_file_slice_fail', () => {
reject('分片文件上传失败')
})
socket.value.once('not_exists_dir', (errMsg) => {
reject(errMsg)
})
})
}
const openDir = () => {
childDirLoading.value = true
curTarget.value = null
socket.value.emit('open_dir', curPath.value)
}
const getPath = (name = '') => {
return curPath.value.length === 1 ? `/${name}` : `${curPath.value}/${name}`
}
const adjustHeight = () => {
let startAdjust = false
let timer = null
$nextTick(() => {
let sftpHeight = localStorage.getItem('sftpHeight')
if (sftpHeight) document.querySelector('.sftp-container').style.height = sftpHeight
else document.querySelector('.sftp-container').style.height = '33vh'
adjustRef.value.addEventListener('mousedown', () => {
startAdjust = true
})
document.addEventListener('mousemove', (e) => {
if (!startAdjust) return
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
sftpHeight = `calc(100vh - ${e.pageY}px)`
document.querySelector('.sftp-container').style.height = sftpHeight
emit('resize')
})
})
document.addEventListener('mouseup', (e) => {
if (!startAdjust) return
startAdjust = false
sftpHeight = `calc(100vh - ${e.pageY}px)`
localStorage.setItem('sftpHeight', sftpHeight)
})
})
}
</script>
<style lang="scss" scoped>
.sftp-container {
position: relative;

479
web/src/views/terminal/components/terminal-tab.vue
View File

@ -8,10 +8,11 @@
粘贴
</el-button> -->
</header>
<div ref="terminal" class="terminal-container" />
<div ref="terminalRefs" class="terminal-container" />
</template>
<script>
<script setup>
import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import { Terminal } from 'xterm'
import 'xterm/css/xterm.css'
import { FitAddon } from 'xterm-addon-fit'
@ -21,242 +22,242 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
import socketIo from 'socket.io-client'
const { io } = socketIo
export default {
name: 'Terminal',
props: {
token: {
required: true,
type: String
},
host: {
required: true,
type: String
}
const { proxy: { $api, $serviceURI, $notification, $router, $messageBox } } = getCurrentInstance()
const props = defineProps({
token: {
required: true,
type: String
},
data() {
return {
socket: null,
term: null,
command: '',
timer: null,
fitAddon: null,
searchBar: null,
isManual: false // 是否手动断开的socket连接
}
host: {
required: true,
type: String
},
async mounted() {
this.createLocalTerminal()
await this.getCommand()
this.connectIO()
},
beforeUnmount() {
// this.term.dispose() // 销毁终端
this.isManual = true
this.socket?.close() // 关闭socket连接
window.removeEventListener('resize', this.handleResize) // 移除resize监听
},
methods: {
async getCommand() {
let { data } = await this.$api.getCommand(this.host)
if(data) this.command = data
},
connectIO() {
let { host, token } = this
this.socket = io(this.$serviceURI, {
path: '/terminal',
forceNew: false, // 强制新的连接
reconnectionAttempts: 1 // 尝试重新连接次数
})
this.socket.on('connect', () => {
console.log('/terminal socket已连接：', this.socket.id)
// 验证身份并连接终端
this.socket.emit('create', { host, token })
this.socket.on('connect_success', () => {
this.onData() // 监听输入输出
this.socket.on('connect_terminal', () => {
this.onResize() // 自适应窗口(终端创建完成再适应)
this.onFindText() // 查找插件
this.onWebLinks() // link链接识别插件
if(this.command) this.socket.emit('input', this.command + '\n')
})
})
this.socket.on('create_fail', (message) => {
console.error(message)
this.$notification({
title: '创建失败',
message,
type: 'error'
})
})
this.socket.on('token_verify_fail', () => {
this.$notification({
title: 'Error',
message: 'token校验失败，请重新登录',
type: 'error'
})
this.$router.push('/login')
})
this.socket.on('connect_fail', (message) => {
console.error(message)
this.$notification({
title: '连接失败',
message,
type: 'error'
})
})
})
this.socket.on('disconnect', () => {
console.warn('terminal websocket 连接断开')
if(!this.isManual) this.reConnect()
})
this.socket.on('connect_error', (err) => {
console.error('terminal websocket 连接错误：', err)
this.$notification({
title: '终端连接失败',
message: '请检查socket服务是否正常',
type: 'error'
})
})
},
reConnect() {
this.socket.close && this.socket.close()
this.$messageBox.alert(
'<strong>终端连接断开</strong>',
'Error',
{
dangerouslyUseHTMLString: true,
confirmButtonText: '刷新页面'
}
).then(() => {
// this.fitAddon && this.fitAddon.dispose()
// this.term && this.term.dispose()
// this.connectIO()
location.reload()
})
},
createLocalTerminal() {
// https://xtermjs.org/docs/api/terminal/interfaces/iterminaloptions/
let term = new Terminal({
rendererType: 'dom', // 渲染类型 canvas dom
bellStyle: 'sound',
// bellSound: './tip.mp3',
convertEol: true, // 启用时，光标将设置为下一行的开头
cursorBlink: true, // 光标闪烁
disableStdin: false, // 是否应禁用输入
fontSize: 18,
minimumContrastRatio: 7, // 文字对比度
theme: {
foreground: '#ECECEC', // 字体
background: '#000000', // 背景色
cursor: 'help', // 设置光标
selection: '#ff9900', // 选择文字颜色
lineHeight: 20
}
})
this.term = term
term.open(this.$refs['terminal'])
term.writeln('\x1b[1;32mWelcome to EasyNode terminal\x1b[0m.')
term.writeln('\x1b[1;32mAn experimental Web-SSH Terminal\x1b[0m.')
// 换行并输入起始符 $
// term.prompt = () => {
// term.write('\r\n\x1b[33m$ \x1b[0m ')
// }
term.focus()
this.onSelectionChange()
},
onResize() {
this.fitAddon = new FitAddon()
this.term.loadAddon(this.fitAddon)
this.fitAddon.fit()
let { rows, cols } = this.term
this.socket.emit('resize', { rows, cols }) // 首次fit完成后resize一次
window.addEventListener('resize', this.handleResize)
},
handleResize() {
if(this.timer) clearTimeout(this.timer)
this.timer = setTimeout(() => {
let temp = []
let panes= Array.from(document.getElementsByClassName('el-tab-pane'))
// 先block
panes.forEach((item, index) => {
temp[index] = item.style.display
item.style.display = 'block'
})
this.fitAddon?.fit() // 需要获取元素宽度(而element tab组件会display:none隐藏非当前tab)
// 还原
panes.forEach((item, index) => {
item.style.display = temp[index]
})
let { rows, cols } = this.term
// console.log('resize: ', { rows, cols })
this.socket?.emit('resize', { rows, cols })
}, 200)
},
onWebLinks() {
this.term.loadAddon(new WebLinksAddon())
},
onFindText() {
const searchAddon = new SearchAddon()
this.searchBar = new SearchBarAddon({ searchAddon })
this.term.loadAddon(searchAddon)
// searchAddon.findNext('SSH', { decorations: { activeMatchBackground: '#ff0000' } })
this.term.loadAddon(this.searchBar)
// this.searchBar.show()
},
onSelectionChange() {
this.term.onSelectionChange(() => {
let str = this.term.getSelection()
if(!str) return
const text = new Blob([str,], { type: 'text/plain' })
// eslint-disable-next-line no-undef
const item = new ClipboardItem({
'text/plain': text
})
navigator.clipboard.write([item,])
// this.$message.success('copy success')
})
},
onData() {
this.socket.on('output', (str) => {
this.term.write(str)
})
this.term.onData((key) => {
let acsiiCode = key.codePointAt()
// console.log(acsiiCode)
if(acsiiCode === 22) return this.handlePaste() // ctrl + v
if(acsiiCode === 6) return this.searchBar.show() // ctrl + f
this.socket.emit('input', key)
})
// this.term.onKey(({ key }) => { // , domEvent
// // https://blog.csdn.net/weixin_30311605/article/details/98277379
// let acsiiCode = key.codePointAt() // codePointAt转换成ASCII码
// // console.log({ acsiiCode, domEvent })
// if(acsiiCode === 22) return this.handlePaste() // ctrl + v
// this.socket.emit('input', key)
// })
},
handleClear() {
this.term.clear()
},
async handlePaste() {
let str = await navigator.clipboard.readText()
// this.term.paste(str)
this.socket.emit('input', str)
this.term.focus()
},
// 供父组件调用
focusTab() {
this.term.blur()
setTimeout(() => {
this.term.focus()
}, 200)
},
// 供父组件调用
handleInputCommand(command) {
this.socket.emit('input', command)
}
tabKey: {
required: true,
type: String
}
})
const socket = ref(null)
const term = ref(null)
const command = ref('')
const timer = ref(null)
const fitAddon = ref(null)
const searchBar = ref(null)
const isManual = ref(false)
const terminalRefs = ref(null)
const tabKey = ref(props.tabKey)
const getCommand = async () => {
let { data } = await $api.getCommand(props.host)
if (data) command.value = data
}
const connectIO = () => {
const { host, token } = props
socket.value = io($serviceURI, {
path: '/terminal',
forceNew: false,
reconnectionAttempts: 1
})
socket.value.on('connect', () => {
console.log('/terminal socket已连接：', socket.value.id)
socket.value.emit('create', { host, token })
socket.value.on('connect_success', () => {
onData()
socket.value.on('connect_terminal', () => {
onResize()
onFindText()
onWebLinks()
if (command.value) socket.value.emit('input', command.value + '\n')
})
})
socket.value.on('create_fail', (message) => {
console.error(message)
$notification({
title: '创建失败',
message,
type: 'error'
})
})
socket.value.on('token_verify_fail', () => {
$notification({
title: 'Error',
message: 'token校验失败，请重新登录',
type: 'error'
})
$router.push('/login')
})
socket.value.on('connect_fail', (message) => {
console.error(message)
$notification({
title: '连接失败',
message,
type: 'error'
})
})
})
socket.value.on('disconnect', () => {
console.warn('terminal websocket 连接断开')
if (!isManual.value) reConnect()
})
socket.value.on('connect_error', (err) => {
console.error('terminal websocket 连接错误：', err)
$notification({
title: '终端连接失败',
message: '请检查socket服务是否正常',
type: 'error'
})
})
}
const reConnect = () => {
socket.value.close && socket.value.close()
$messageBox.alert(
'<strong>终端连接断开</strong>',
'Error',
{
dangerouslyUseHTMLString: true,
confirmButtonText: '刷新页面'
}
).then(() => {
location.reload()
})
}
const createLocalTerminal = () => {
let terminal = new Terminal({
rendererType: 'dom',
bellStyle: 'sound',
convertEol: true,
cursorBlink: true,
disableStdin: false,
fontSize: 18,
minimumContrastRatio: 7,
theme: {
foreground: '#ECECEC',
background: '#000000',
cursor: 'help',
selection: '#ff9900',
lineHeight: 20
}
})
term.value = terminal
terminal.open(terminalRefs.value)
terminal.writeln('\x1b[1;32mWelcome to EasyNode terminal\x1b[0m.')
terminal.writeln('\x1b[1;32mAn experimental Web-SSH Terminal\x1b[0m.')
terminal.focus()
onSelectionChange()
}
const onResize = () => {
fitAddon.value = new FitAddon()
term.value.loadAddon(fitAddon.value)
fitAddon.value.fit()
let { rows, cols } = term.value
socket.value.emit('resize', { rows, cols })
window.addEventListener('resize', handleResize)
}
const handleResize = () => {
if (timer.value) clearTimeout(timer.value)
timer.value = setTimeout(() => {
let temp = []
let panes = Array.from(document.getElementsByClassName('el-tab-pane'))
panes.forEach((item, index) => {
temp[index] = item.style.display
item.style.display = 'block'
})
fitAddon.value?.fit()
panes.forEach((item, index) => {
item.style.display = temp[index]
})
let { rows, cols } = term.value
socket.value?.emit('resize', { rows, cols })
focusTab()
}, 200)
}
const onWebLinks = () => {
term.value.loadAddon(new WebLinksAddon())
}
const onFindText = () => {
const searchAddon = new SearchAddon()
searchBar.value = new SearchBarAddon({ searchAddon })
term.value.loadAddon(searchAddon)
term.value.loadAddon(searchBar.value)
}
const onSelectionChange = () => {
term.value.onSelectionChange(() => {
let str = term.value.getSelection()
if (!str) return
const text = new Blob([str], { type: 'text/plain' })
const item = new ClipboardItem({
'text/plain': text
})
navigator.clipboard.write([item])
})
}
const onData = () => {
socket.value.on('output', (str) => {
term.value.write(str)
})
term.value.onData((key) => {
let acsiiCode = key.codePointAt()
if (acsiiCode === 22) return handlePaste()
if (acsiiCode === 6) return searchBar.value.show()
socket.value.emit('input', key)
})
}
const handleClear = () => {
term.value.clear()
}
const handlePaste = async () => {
let str = await navigator.clipboard.readText()
socket.value.emit('input', str)
term.value.focus()
}
const focusTab = () => {
term.value.blur()
setTimeout(() => {
term.value.focus()
}, 200)
}
const handleInputCommand = (command) => {
socket.value.emit('input', command)
}
onMounted(async () => {
createLocalTerminal()
await getCommand()
connectIO()
})
onBeforeUnmount(() => {
isManual.value = true
socket.value?.close()
window.removeEventListener('resize', handleResize)
})
defineExpose({
focusTab,
handleResize,
handleInputCommand,
tabKey
})
</script>
<style lang="scss" scoped>
@ -266,11 +267,15 @@ header {
right: 10px;
top: 50px;
}
.terminal-container {
height: 100%;
:deep(.xterm-viewport), :deep(.xterm-screen) {
width: 100%!important;
height: 100%!important;
:deep(.xterm-viewport),
:deep(.xterm-screen) {
width: 100% !important;
height: 100% !important;
// 滚动条整体部分
&::-webkit-scrollbar {
height: 5px;

311
web/src/views/terminal/index.vue
View File

@ -1,195 +1,168 @@
<template>
<div class="container">
<InfoSide
ref="info-side"
:token="token"
:host="host"
:visible="visible"
@connect-sftp="connectSftp"
@click-input-command="clickInputComand"
/>
<InfoSide ref="infoSideRef" :showInputCommand.sync="showInputCommand" :token="token" :host="host" :visible="visible" @connect-sftp="connectSftp"
@click-input-command="clickInputCommand" />
<section>
<div class="terminals">
<el-button class="full-screen-button" type="success" @click="handleFullScreen">
{{ isFullScreen ? '退出全屏' : '全屏' }}
</el-button>
<div class="visible" @click="handleVisibleSidebar">
<svg-icon
name="icon-jiantou_zuoyouqiehuan"
class="svg-icon"
/>
<svg-icon name="icon-jiantou_zuoyouqiehuan" class="svg-icon" />
</div>
<el-tabs
v-model="activeTab"
type="border-card"
addable
tab-position="top"
@tab-remove="removeTab"
@tab-change="tabChange"
@tab-add="tabAdd"
>
<el-tab-pane
v-for="item in terminalTabs"
:key="item.key"
:label="item.title"
:name="item.key"
:closable="closable"
>
<TerminalTab :ref="item.key" :token="token" :host="host" />
<el-tabs v-model="activeTab" type="border-card" addable tab-position="top" @tab-remove="removeTab"
@tab-change="tabChange" @tab-add="tabAdd">
<el-tab-pane v-for="item in terminalTabs" :key="item.key" :label="item.title" :name="item.key"
:closable="closable">
<TerminalTab ref="terminalTabRefs" :token="token" :host="host" :tab-key="item.key" />
</el-tab-pane>
</el-tabs>
</div>
<div v-if="showSftp" class="sftp">
<SftpFooter
:token="token"
:host="host"
@resize="resizeTerminal"
/>
<SftpFooter :token="token" :host="host" @resize="resizeTerminal" />
</div>
</section>
<InputCommand
v-model:show="showInputCommand"
@input-command="handleInputCommand"
/>
<InputCommand v-model:show="showInputCommand" @input-command="handleInputCommand" />
</div>
</template>
<script>
<script setup>
import { ref, reactive, computed, onBeforeMount, getCurrentInstance, watch } from 'vue'
import TerminalTab from './components/terminal-tab.vue'
import InfoSide from './components/info-side.vue'
import SftpFooter from './components/sftp-footer.vue'
import InputCommand from '@/components/input-command/index.vue'
export default {
name: 'Terminals',
components: {
TerminalTab,
InfoSide,
SftpFooter,
InputCommand
},
data() {
return {
name: '',
host: '',
token: this.$store.token,
activeTab: '',
terminalTabs: [],
isFullScreen: false,
timer: null,
showSftp: false,
showInputCommand: false,
visible: true
}
},
computed: {
closable() {
return this.terminalTabs.length > 1
}
},
watch: {
showInputCommand(newVal) {
if(!newVal) this.$refs['info-side'].inputCommandStatus = false
}
},
created() {
if (!this.token) return this.$router.push('login')
let { host, name } = this.$route.query
this.name = name
this.host = host
document.title = `${ document.title }-${ name }`
const { proxy: { $store, $router, $route, $nextTick } } = getCurrentInstance()
const name = ref('')
const host = ref('')
const token = $store.token
const activeTab = ref('')
const terminalTabs = reactive([])
const isFullScreen = ref(false)
const timer = ref(null)
const showSftp = ref(false)
const showInputCommand = ref(false)
const visible = ref(true)
const infoSideRef = ref(null)
const terminalTabRefs = ref([])
const closable = computed(() => terminalTabs.length > 1)
onBeforeMount(() => {
if (!token) return $router.push('login')
let { host: routeHost, name: routeName } = $route.query
name.value = routeName
host.value = routeHost
document.title = `${document.title}-${routeName}`
let key = Date.now().toString()
terminalTabs.push({ title: routeName, key })
activeTab.value = key
registryDbClick()
})
// const windowBeforeUnload = () => {
// window.onbeforeunload = () => {
// return ''
// }
// }
const connectSftp = (flag) => {
showSftp.value = flag
resizeTerminal()
}
const clickInputCommand = () => {
showInputCommand.value = true
}
const tabAdd = () => {
if (timer.value) clearTimeout(timer.value)
timer.value = setTimeout(() => {
let title = name.value
let key = Date.now().toString()
this.terminalTabs.push({ title: name, key })
this.activeTab = key
this.registryDbClick()
},
// mounted() {
// window.onbeforeunload = () => {
// return ''
// }
// },
methods: {
connectSftp(flag) {
this.showSftp = flag
this.resizeTerminal()
},
clickInputComand() {
this.showInputCommand = true
},
tabAdd() {
if(this.timer) clearTimeout(this.timer)
this.timer = setTimeout(() => {
let { name } = this
let title = name
let key = Date.now().toString()
this.terminalTabs.push({ title, key })
this.activeTab = key
this.registryDbClick()
}, 200)
},
removeTab(removeKey) {
let idx = this.terminalTabs.findIndex(({ key }) => removeKey === key)
this.terminalTabs.splice(idx, 1)
if(removeKey !== this.activeTab) return
this.activeTab = this.terminalTabs[0].key
},
tabChange(key) {
this.$refs[key][0].focusTab()
},
handleFullScreen() {
if(this.isFullScreen) document.exitFullscreen()
else document.getElementsByClassName('terminals')[0].requestFullscreen()
this.isFullScreen = !this.isFullScreen
},
registryDbClick() {
this.$nextTick(() => {
let tabItems = Array.from(document.getElementsByClassName('el-tabs__item'))
tabItems.forEach(item => {
item.removeEventListener('dblclick', this.handleDblclick)
item.addEventListener('dblclick', this.handleDblclick)
})
})
},
handleDblclick(e) {
if(this.terminalTabs.length > 1) {
let key = e.target.id.substring(4)
// console.log('dblclick', key)
this.removeTab(key)
}
},
handleVisibleSidebar() {
this.visible = !this.visible
this.resizeTerminal()
},
resizeTerminal() {
let terminals = this.$refs
for(let terminal in terminals) {
const { handleResize } = this.$refs[terminal][0] || {}
handleResize && handleResize()
}
},
handleInputCommand(command) {
// console.log(command)
this.$refs[this.activeTab][0].handleInputCommand(`${ command }\n`)
this.showInputCommand = false
}
terminalTabs.push({ title, key })
activeTab.value = key
tabChange(key)
registryDbClick()
}, 200)
}
const removeTab = (removeKey) => {
let idx = terminalTabs.findIndex(({ key }) => removeKey === key)
terminalTabs.splice(idx, 1)
if (removeKey !== activeTab.value) return
activeTab.value = terminalTabs[0].key
}
const tabChange = async (key) => {
await $nextTick()
const curTabTerminal = terminalTabRefs.value.find(({ tabKey }) => key === tabKey)
curTabTerminal?.focusTab()
}
const handleFullScreen = () => {
if (isFullScreen.value) document.exitFullscreen()
else document.getElementsByClassName('terminals')[0].requestFullscreen()
isFullScreen.value = !isFullScreen.value
}
const registryDbClick = () => {
$nextTick(() => {
let tabItems = Array.from(document.getElementsByClassName('el-tabs__item'))
tabItems.forEach(item => {
item.removeEventListener('dblclick', handleDblclick)
item.addEventListener('dblclick', handleDblclick)
})
})
}
const handleDblclick = (e) => {
if (terminalTabs.length > 1) {
let key = e.target.id.substring(4)
// console.log('dblclick', key)
removeTab(key)
}
}
const handleVisibleSidebar = () => {
visible.value = !visible.value
resizeTerminal()
}
const resizeTerminal = () => {
for (let terminalTabRef of terminalTabRefs.value) {
const { handleResize } = terminalTabRef || {}
handleResize && handleResize()
}
}
const handleInputCommand = async (command) => {
const curTabTerminal = terminalTabRefs.value.find(({ tabKey }) => activeTab.value === tabKey)
await $nextTick()
curTabTerminal?.focusTab()
curTabTerminal.handleInputCommand(`${command}\n`)
showInputCommand.value = false
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
height: 100vh;
section {
flex: 1;
display: flex;
flex-direction: column;
width: calc(100vw - 250px); // 减去左边栏
.terminals {
min-height: 150px;
flex: 1;
position: relative;
.full-screen-button {
position: absolute;
right: 10px;
@ -197,9 +170,11 @@ export default {
z-index: 99999;
}
}
.sftp {
border: 1px solid rgb(236, 215, 187);
}
.visible {
position: absolute;
z-index: 999999;
@ -207,6 +182,7 @@ export default {
left: 5px;
cursor: pointer;
transition: all 0.3s;
&:hover {
transform: scale(1.1);
}
@ -219,47 +195,46 @@ export default {
.el-tabs {
border: none;
}
.el-tabs--border-card>.el-tabs__content {
padding: 0;
padding: 0;
}
.el-tabs__header {
position: sticky;
top: 0;
z-index: 1;
user-select: none;
}
.el-tabs__nav-scroll {
.el-tabs__nav {
padding-left: 60px;
// padding-left: 60px;
}
}
.el-tabs__new-tab {
position: absolute;
left: 18px;
font-size: 50px;
z-index: 98;
// &::before {
// font-family: iconfont;
// content: '\eb0d';
// font-size: 12px;
// font-size: 18px;
// position: absolute;
// left: -28px;
// }
}
.el-tabs--border-card {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
// .el-tabs--border-card {
// height: 100%;
// overflow: hidden;
// display: flex;
// flex-direction: column;
// }
.el-tabs__content {
flex: 1;
}
.el-icon.is-icon-close {
position: absolute;
font-size: 13px;
position: absolute;
right: 0px;
top: 2px;
}
</style>