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

✨ 优化终端回显

Browse Source
This commit is contained in:
chaos-zhu 2024-08-18 18:10:59 +08:00
parent a6b2ed5d8f
commit e0673293ef
5 changed files with 64 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -1,3 +1,9 @@
## [2.2.2](https://github.com/chaos-zhu/easynode/releases) (2024-08-xx)
### Features
* 支持菜单栏的折叠与展开 ✔
## [2.2.1](https://github.com/chaos-zhu/easynode/releases) (2024-08-18)
### Features

89
web/src/assets/scss/element/dark.scss
View File

@ -64,94 +64,17 @@ html.dark {
}
// scroll-bar
::-webkit-scrollbar {
background-color: var(--el-scrollbar-bg-color) !important;
}
::-webkit-scrollbar-thumb {
background-color: var(--el-border-color-darker) !important;
background-color: #5c5c5c;
border-radius: 10px;
transition: all .2s ease-in-out;
}
.layout-sidebar-container {
background-color: var(--bg-color) !important;
::-webkit-scrollbar-thumb:hover {
cursor: pointer;
background-color: #6d6d6d;
}
.app-main-container {
background-color: var(--main-bg-color) !important;
.card {
background-color: var(--bg-color) !important;
}
}
.layout-footer-container {
color: var(--el-text-color-regular) !important;
background-color: var(--main-bg-color) !important;
}
.fold-unfold {
color: #fff !important;
}
// .el-menu,
// .el-sub-menu,
// .el-menu-item,
// .el-sub-menu__title {
// background-color: var(--bg-color) !important;
// &:not(.is-active) {
// color: #bdbdc0 !important;
// }
// &.is-active {
// color: #fff !important;
// background-color: #000 !important;
// }
// }
.el-menu-item:not(.is-active):hover {
color: var(--el-menu-active-color);
}
.nav-bar-container {
background-color: var(--bg-color) !important;
}
.table-header {
.el-icon {
color: #fff;
}
}
.tabs-bar-container {
background-color: var(--bg-color) !important;
border-top: 1px solid var(--el-border-color-light) !important;
.tabs-action {
.el-icon {
color: #fff !important;
}
}
.fold-unfold {
color: #fff;
}
.el-tabs__item.is-active {
color: var(--el-color-primary);
background-color: var(--main-bg-color) !important;
.el-icon {
color: var(--el-color-primary) !important;
}
}
.el-tabs__item:not(.is_active):hover {
background-color: var(--main-bg-color) !important;
.el-icon {
color: var(--el-color-primary) !important;
}
}
}
}

40
web/src/assets/scss/global.scss
View File

@ -1,35 +1,45 @@
// 滚动条
html, body, div, ul, section, textarea {
html,
body,
div,
ul,
section,
textarea {
box-sizing: border-box;
// 滚动条整体部分
&::-webkit-scrollbar {
height: 5px;
width: 5px;
background-color: #ffffff;
width: 6px;
height: 6px;
}
// 底层轨道
&::-webkit-scrollbar-track {
background-color: #ffffff;
border-radius: 3px;
}
// &::-webkit-scrollbar-track {
// background-color: #ffffff;
// border-radius: 3px;
// }
// 滚动滑块
&::-webkit-scrollbar-thumb {
border-radius: 3px;
// background-color: #1989fa;
background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#a18cd1), to(#fbc2eb), color-stop(.6, #54DE5D));
background-color: #0003;
border-radius: 10px;
transition: all .2s ease-in-out;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #067ef7;
cursor: pointer;
background-color: #0000004d;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
}
}
::view-transition-new(root),
::view-transition-old(root) {
/* 关闭默认动画，否则影响自定义动画的执行 */
animation: none;
/* 关闭默认动画，否则影响自定义动画的执行 */
animation: none;
}
// 全局背景
@ -44,4 +54,4 @@ body {
.link {
color: var(--el-color-primary);
cursor: pointer;
}
}

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

@ -240,19 +240,21 @@ const onResize = () => {
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'
// })
// panes.forEach((item, index) => {
// item.style.display = temp[index]
// })
timer.value = setTimeout(async () => {
// 由于非当前的el-tab-pane的display属性为none, 调用fitAddon.value?.fit()时无法获取宽高，因此先展示，再fit，最后再隐藏
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()
let { rows, cols } = term.value
socket.value?.emit('resize', { rows, cols })
panes.forEach((item, index) => {
item.style.display = temp[index]
})
}, 200)
}
@ -432,10 +434,12 @@ defineExpose({
height: 100%;
}
:deep(.xterm-viewport),
:deep(.xterm-viewport) {
overflow-y: auto;
}
:deep(.xterm-screen) {
padding: 0 0 0 10px;
border-radius: var(--el-border-radius-base);
}
}
.terminal_command_history {

21
web/src/views/terminal/components/terminal.vue
View File

@ -27,16 +27,22 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- <el-dropdown trigger="click" max-height="50vh">
<span class="link_text">主题<el-icon><arrow-down /></el-icon></span>
<el-dropdown trigger="click">
<span class="link_text">分屏<el-icon><arrow-down /></el-icon></span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(value, key) in themeList" :key="key" @click="handleChangeTheme(key)">
<span :style="{color: key === themeName ? 'var(--el-menu-active-color)' : ''}">{{ key }}</span>
<el-dropdown-item @click="handleFullScreen">
<span>双屏</span>
</el-dropdown-item>
<el-dropdown-item @click="handleFullScreen">
<span>三屏</span>
</el-dropdown-item>
<el-dropdown-item @click="handleFullScreen">
<span>四屏</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown> -->
</el-dropdown>
<el-dropdown trigger="click">
<span class="link_text">设置<el-icon><arrow-down /></el-icon></span>
<template #dropdown>
@ -50,11 +56,6 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- <el-dropdown trigger="click">
<span class="link_text">设置
<el-icon class="hidden_icon"><arrow-down /></el-icon>
</span>
</el-dropdown> -->
</div>
<div class="right_overview">
<div class="switch_wrap">