diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f65f25..5c10ff5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/web/src/assets/scss/element/dark.scss b/web/src/assets/scss/element/dark.scss index 794eeab..edb3016 100644 --- a/web/src/assets/scss/element/dark.scss +++ b/web/src/assets/scss/element/dark.scss @@ -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; - } - } - } } diff --git a/web/src/assets/scss/global.scss b/web/src/assets/scss/global.scss index ed16ea2..c04c282 100644 --- a/web/src/assets/scss/global.scss +++ b/web/src/assets/scss/global.scss @@ -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; -} +} \ No newline at end of file diff --git a/web/src/views/terminal/components/terminal-tab.vue b/web/src/views/terminal/components/terminal-tab.vue index a68b510..6a9ac37 100644 --- a/web/src/views/terminal/components/terminal-tab.vue +++ b/web/src/views/terminal/components/terminal-tab.vue @@ -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 { diff --git a/web/src/views/terminal/components/terminal.vue b/web/src/views/terminal/components/terminal.vue index ea92bb3..941a7f7 100644 --- a/web/src/views/terminal/components/terminal.vue +++ b/web/src/views/terminal/components/terminal.vue @@ -27,16 +27,22 @@ - + 设置 -