推翻重来.

This commit is contained in:
lijiahang
2024-01-31 19:02:43 +08:00
parent e9d338f66e
commit 66ab7a7637
15 changed files with 464 additions and 34 deletions

View File

@@ -97,7 +97,7 @@
<script lang="ts">
export default {
name: 'hostReviewConnectLogTable'
name: 'hostAuditConnectLogTable'
};
</script>

View File

@@ -7,7 +7,7 @@
<script lang="ts">
export default {
name: 'hostReviewConnectLog'
name: 'hostAuditConnectLog'
};
</script>

View File

@@ -0,0 +1,46 @@
<template>
<div>
<a-tooltip v-for="(action, index) in actions"
:key="index"
:position="position as any"
:mini="true"
:show-arrow="false"
content-class="terminal-tooltip-content"
:auto-fix-position="false"
:content="action.content">
<div class="terminal-sidebar-icon-wrapper" v-if="action.visible !== false">
<div class="terminal-sidebar-icon"
:class="[
iconClass,
action.disabled === true ? 'disabled-item' : '',
action.checked === true ? 'checked-item' : '',
]"
@click="action.disabled === true ? false : action.click()">
<component :is="action.icon" :style="action?.iconStyle" />
</div>
</div>
</a-tooltip>
</div>
</template>
<script lang="ts">
export default {
name: 'iconActions'
};
</script>
<script lang="ts" setup>
import type { SidebarAction } from '../../terminal/types/terminal.type';
import type { PropType } from 'vue';
defineProps({
actions: Array as PropType<Array<SidebarAction>>,
position: String,
iconClass: String,
});
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,231 @@
<template>
<div class="layout-header">
<!-- 左侧 logo -->
<!-- FIXME -->
<div class="layout-header-left">
<img alt="logo"
class="layout-header-logo-img"
draggable="false"
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image" />
<h5 class="layout-header-logo-text">Orion Ops Pro</h5>
</div>
<!-- 左侧 tabs -->
<div class="layout-header-tabs">
<a-tabs v-model:active-key="tabManager.active"
:editable="true"
:hide-content="true"
:auto-switch="true"
@tab-click="k => tabManager.clickTab(k as string)"
@delete="k => tabManager.deleteTab(k as string)">
<a-tab-pane v-for="tab in tabManager.items"
:key="tab.key"
:title="tab.title" />
</a-tabs>
</div>
<!-- 右侧操作 -->
<div class="layout-header-right">
<!-- 操作按钮 -->
<icon-actions class="layout-header-right-actions"
:actions="actions"
position="br"
icon-class="layout-header-icon" />
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'layoutHeader'
};
</script>
<script lang="ts" setup>
import type { SidebarAction } from '../../terminal/types/terminal.type';
import { useFullscreen } from '@vueuse/core';
import { computed } from 'vue';
import { useTerminalStore } from '@/store';
import IconActions from './icon-actions.vue';
const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
const { tabManager } = useTerminalStore();
// 顶部操作
const actions = computed<Array<SidebarAction>>(() => [
{
icon: isFullscreen.value ? 'icon-fullscreen-exit' : 'icon-fullscreen',
content: isFullscreen.value ? '点击退出全屏模式' : '点击切换全屏模式',
click: toggleFullScreen
},
]);
</script>
<style lang="less" scoped>
.layout-header {
--logo-width: 168px;
}
.layout-header {
height: 100%;
color: var(--color-header-text-2);
display: flex;
user-select: none;
&-left {
width: var(--logo-width);
display: flex;
align-items: center;
justify-content: flex-start;
}
&-logo-img {
padding-left: 6px;
width: 36px;
height: 36px;
}
&-logo-text {
margin: 0;
display: flex;
align-items: center;
padding: 0 8px;
font-size: 16px;
overflow: hidden;
white-space: nowrap;
}
&-tabs {
width: calc(100% - var(--logo-width) - var(--sidebar-icon-wrapper-size));
display: flex;
}
&-right {
width: var(--sidebar-icon-wrapper-size);
display: flex;
justify-content: flex-end;
&-actions {
width: var(--sidebar-icon-wrapper-size);
display: flex;
justify-content: flex-end;
}
}
:deep(&-icon) {
color: var(--color-header-text-2) !important;
&:hover {
background: var(--color-bg-header-icon-1) !important;
}
}
}
:deep(.arco-tabs-nav) {
height: 100%;
&::before {
display: none;
}
&-tab {
height: 100%;
}
&-ink {
display: none;
}
&-button .arco-icon-hover:hover {
color: var(--color-header-text-2);
&::before {
background: var(--color-bg-header-icon-1);
}
}
}
:deep(.arco-tabs-nav-type-line .arco-tabs-tab:hover .arco-tabs-tab-title::before) {
background: transparent;
}
:deep(.arco-tabs-tab) {
height: 100%;
margin: 0;
padding: 0;
color: var(--color-header-text-1);
background: var(--color-header-tabs-bg);
position: relative;
&:hover {
color: var(--color-header-text-2);
transition: .2s;
}
&::after {
content: '';
width: 54px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
right: 0;
top: 0;
}
&:hover::after {
background: linear-gradient(270deg, var(--color-gradient-start) 45%, var(--color-gradient-end) 120%);
}
.arco-tabs-tab-title {
padding: 11px 18px;
background: var(--color-header-tabs-bg);
font-size: 12px;
display: flex;
align-items: center;
&::before {
display: none;
}
}
&:hover .arco-tabs-tab-close-btn {
display: unset;
}
&-close-btn {
margin: 0 8px 0 0;
padding: 4px;
border-radius: 4px;
position: absolute;
right: 0;
z-index: 4;
display: none;
color: var(--color-header-text-2);
&:hover {
transition: .2s;
background: var(--color-bg-header-icon-1);
}
&::before {
display: none;
}
}
}
:deep(.arco-tabs-tab-active) {
background: var(--color-header-tabs-bg-hover);
color: var(--color-header-text-2) !important;
.arco-tabs-tab-title {
background: var(--color-header-tabs-bg-hover);
}
&:hover::after {
background: linear-gradient(270deg, var(--color-gradient-start) 45%, var(--color-gradient-end) 120%);
}
}
</style>

View File

@@ -0,0 +1,153 @@
<template>
<div class="host-space-layout" v-if="render">
<!-- 头部区域 -->
<header class="host-space-layout-header">
<layout-header />
</header>
<!-- 主体区域 -->
<main class="host-space-layout-main">
<!-- 左侧操作栏 -->
<div class="host-space-layout-left">
<terminal-left-sidebar />
</div>
<!-- 内容区域 -->
<div class="host-space-layout-content">
<!-- 主机加载中骨架 -->
<loading-skeleton v-if="contentLoading" />
<!-- 终端内容区域 -->
<terminal-content v-else />
</div>
<!-- 右侧操作栏 -->
<div class="host-space-layout-right">
<terminal-right-sidebar />
</div>
</main>
</div>
</template>
<script lang="ts">
export default {
name: 'hostSpace'
};
</script>
<script lang="ts" setup>
import { ref, onBeforeMount, onUnmounted, onMounted } from 'vue';
import { dictKeys, InnerTabs } from '../terminal/types/terminal.const';
import { useCacheStore, useDictStore, useTerminalStore } from '@/store';
import useLoading from '@/hooks/loading';
import TerminalLeftSidebar from '../terminal/components/layout/terminal-left-sidebar.vue';
import TerminalRightSidebar from '../terminal/components/layout/terminal-right-sidebar.vue';
import TerminalContent from '../terminal/components/layout/terminal-content.vue';
import LoadingSkeleton from '../terminal/components/layout/loading-skeleton.vue';
import '@/assets/style/host-space-layout.less';
import 'xterm/css/xterm.css';
import LayoutHeader from './components/layout-header.vue';
const terminalStore = useTerminalStore();
const dictStore = useDictStore();
const cacheStore = useCacheStore();
const { loading: contentLoading, setLoading: setContentLoading } = useLoading(true);
const originTitle = document.title;
const render = ref(false);
// 关闭视口处理
const handleBeforeUnload = (event: any) => {
event.preventDefault();
event.returnValue = confirm('系统可能不会保存您所做的更改');
};
// 加载用户终端偏好
onBeforeMount(async () => {
await terminalStore.fetchPreference();
// 设置系统主题配色
const dark = terminalStore.preference.theme.dark;
document.body.setAttribute('host-space-theme', dark ? 'dark' : 'light');
render.value = true;
});
// 加载字典值
onBeforeMount(async () => {
await dictStore.loadKeys([...dictKeys]);
});
// 加载主机信息
onMounted(async () => {
try {
await terminalStore.loadHosts();
} catch (e) {
} finally {
setContentLoading(false);
}
});
// 事件处理
onMounted(() => {
// 默认标题
document.title = InnerTabs.NEW_CONNECTION.title;
// 注册关闭视口事件
// FIXME 开发阶段
// window.addEventListener('beforeunload', handleBeforeUnload);
});
onUnmounted(() => {
// 卸载时清除 cache
cacheStore.reset('authorizedHostKeys', 'authorizedHostIdentities', 'commandSnippetGroups');
// 移除关闭视口事件
window.removeEventListener('beforeunload', handleBeforeUnload);
// 去除 body style
document.body.removeAttribute('host-space-theme');
// 重置 title
document.title = originTitle;
});
</script>
<style lang="less" scoped>
.host-space-layout {
width: 100%;
height: 100vh;
position: relative;
color: var(--color-content-text-2);
&-header {
width: 100%;
height: var(--header-height);
background: var(--color-bg-header);
position: relative;
}
&-main {
width: 100%;
height: calc(100% - var(--sidebar-width));
position: relative;
display: flex;
justify-content: space-between;
}
&-left, &-right {
width: var(--sidebar-width);
height: 100%;
background: var(--color-bg-sidebar);
border-top: 1px solid var(--color-bg-content);
overflow: hidden;
}
&-left {
border-right: 1px solid var(--color-bg-content);
}
&-right {
border-left: 1px solid var(--color-bg-content);
}
&-content {
width: calc(100% - var(--sidebar-width) * 2);
height: 100%;
background: var(--color-bg-content);
overflow: auto;
}
}
</style>

View File

@@ -1,303 +0,0 @@
// 亮色主题配色常量
body {
--color-bg-header: #232323;
--color-bg-sidebar: #F2F3F4;
--color-bg-content: #FEFEFE;
--color-sidebar-icon: #737070;
--color-sidebar-icon-bg: #D7D8DB;
--color-sidebar-icon-checked: #CBCCCF;
--color-sidebar-tooltip-text: rgba(255, 255, 255, .9);
--color-sidebar-tooltip-bg: rgb(29, 33, 41);
--color-content-text-1: rgba(0, 0, 0, .8);
--color-content-text-2: rgba(0, 0, 0, .85);
--color-content-text-3: rgba(0, 0, 0, .95);
--search-bg-focus: rgba(234, 234, 234, .75);
--search-bg: rgba(234, 234, 234, .95);
--search-color-text: #0E0E0E;
--search-color-text-focus: #0F0F0F;
--search-bg-icon-hover: rgba(12, 12, 12, .04);
--search-bg-icon-hover-focus: rgba(12, 12, 12, .08);
--search-bg-icon-selected: rgba(12, 12, 12, .06);
--search-bg-icon-selected-focus: rgba(12, 12, 12, .10);
}
// 暗色主题配色常量
body[terminal-theme='dark'] {
--color-bg-header: #232323;
--color-bg-sidebar: #2C2E31;
--color-bg-content: #1A1B1C;
--color-sidebar-icon: #C3C6C9;
--color-sidebar-icon-bg: #3D3E3F;
--color-sidebar-icon-checked: #51525C;
--color-sidebar-tooltip-text: rgba(255, 255, 255, .9);
--color-sidebar-tooltip-bg: var(--color-sidebar-icon-bg);
--color-content-text-1: rgba(255, 255, 255, .8);
--color-content-text-2: rgba(255, 255, 255, .85);
--color-content-text-3: rgba(255, 255, 255, .95);
--search-bg: rgba(12, 12, 12, .75);
--search-bg-focus: rgba(12, 12, 12, .95);
--search-color-text: #E0E0E0;
--search-color-text-focus: #F0F0F0;
--search-bg-icon-hover: rgba(255, 255, 255, .07);
--search-bg-icon-hover-focus: rgba(255, 255, 255, .12);
--search-bg-icon-selected: rgba(255, 255, 255, .12);
--search-bg-icon-selected-focus: rgba(255, 255, 255, .16);
}
// 布局常量
.host-layout {
--header-height: 44px;
--sidebar-width: 44px;
--sidebar-icon-wrapper-size: var(--header-height);
--sidebar-icon-size: 32px;
--sidebar-icon-font-size: 22px;
--color-bg-header-icon-1: #434343;
--color-header-tabs-bg: var(--color-bg-header);
--color-header-tabs-bg-hover: #434343;
--color-header-text-1: rgba(255, 255, 255, .75);
--color-header-text-2: rgba(255, 255, 255, .9);
--color-gradient-start: rgba(38, 38, 38, 1);
--color-gradient-end: rgba(38, 38, 38, 0);
}
// arco 亮色配色
body .host-layout, .arco-modal-container {
--color-white: #ffffff;
--color-black: #000000;
--color-border: rgb(var(--gray-3));
--color-bg-popup: var(--color-bg-5);
--color-bg-1: #fff;
--color-bg-2: #fff;
--color-bg-3: #fff;
--color-bg-4: #fff;
--color-bg-5: #fff;
--color-bg-white: #fff;
--color-neutral-1: rgb(var(--gray-1));
--color-neutral-2: rgb(var(--gray-2));
--color-neutral-3: rgb(var(--gray-3));
--color-neutral-4: rgb(var(--gray-4));
--color-neutral-5: rgb(var(--gray-5));
--color-neutral-6: rgb(var(--gray-6));
--color-neutral-7: rgb(var(--gray-7));
--color-neutral-8: rgb(var(--gray-8));
--color-neutral-9: rgb(var(--gray-9));
--color-neutral-10: rgb(var(--gray-10));
--color-text-1: var(--color-neutral-10);
--color-text-2: var(--color-neutral-8);
--color-text-3: var(--color-neutral-6);
--color-text-4: var(--color-neutral-4);
--color-border-1: var(--color-neutral-2);
--color-border-2: var(--color-neutral-3);
--color-border-3: var(--color-neutral-4);
--color-border-4: var(--color-neutral-6);
--color-fill-1: var(--color-neutral-1);
--color-fill-2: var(--color-neutral-2);
--color-fill-3: var(--color-neutral-3);
--color-fill-4: var(--color-neutral-4);
--color-primary-light-1: rgb(var(--primary-1));
--color-primary-light-2: rgb(var(--primary-2));
--color-primary-light-3: rgb(var(--primary-3));
--color-primary-light-4: rgb(var(--primary-4));
--color-link-light-1: rgb(var(--link-1));
--color-link-light-2: rgb(var(--link-2));
--color-link-light-3: rgb(var(--link-3));
--color-link-light-4: rgb(var(--link-4));
--color-secondary: var(--color-neutral-2);
--color-secondary-hover: var(--color-neutral-3);
--color-secondary-active: var(--color-neutral-4);
--color-secondary-disabled: var(--color-neutral-1);
--color-danger-light-1: rgb(var(--danger-1));
--color-danger-light-2: rgb(var(--danger-2));
--color-danger-light-3: rgb(var(--danger-3));
--color-danger-light-4: rgb(var(--danger-4));
--color-success-light-1: rgb(var(--success-1));
--color-success-light-2: rgb(var(--success-2));
--color-success-light-3: rgb(var(--success-3));
--color-success-light-4: rgb(var(--success-4));
--color-warning-light-1: rgb(var(--warning-1));
--color-warning-light-2: rgb(var(--warning-2));
--color-warning-light-3: rgb(var(--warning-3));
--color-warning-light-4: rgb(var(--warning-4));
--border-radius-none: 0;
--border-radius-small: 2px;
--border-radius-medium: 4px;
--border-radius-large: 8px;
--border-radius-circle: 50%;
--color-tooltip-bg: rgb(var(--gray-10));
--color-spin-layer-bg: rgba(255, 255, 255, 0.6);
--color-menu-dark-bg: #232324;
--color-menu-light-bg: #ffffff;
--color-menu-dark-hover: rgba(255, 255, 255, 0.04);
--color-mask-bg: rgba(29, 33, 41, 0.6);
}
// arco 暗色配色
body[terminal-theme='dark'],
body[terminal-theme='dark'] .host-layout,
body[terminal-theme='dark'] .arco-modal-container {
--color-white: rgba(255, 255, 255, 0.9);
--color-black: #000000;
--color-border: #333335;
--color-bg-popup: var(--color-bg-5);
--color-bg-1: #17171a;
--color-bg-2: #232324;
--color-bg-3: #2a2a2b;
--color-bg-4: #313132;
--color-bg-5: #373739;
--color-bg-white: #f6f6f6;
--color-neutral-1: rgba(255, 255, 255, 0.04);
--color-neutral-2: rgba(255, 255, 255, 0.08);
--color-neutral-3: rgba(255, 255, 255, 0.12);
--color-neutral-4: rgba(255, 255, 255, 0.16);
--color-text-1: rgba(255, 255, 255, 0.9);
--color-text-2: rgba(255, 255, 255, 0.7);
--color-text-3: rgba(255, 255, 255, 0.5);
--color-text-4: rgba(255, 255, 255, 0.3);
--color-fill-1: rgba(255, 255, 255, 0.04);
--color-fill-2: rgba(255, 255, 255, 0.08);
--color-fill-3: rgba(255, 255, 255, 0.12);
--color-fill-4: rgba(255, 255, 255, 0.16);
--color-primary-light-1: rgba(var(--primary-6), 0.2);
--color-primary-light-2: rgba(var(--primary-6), 0.35);
--color-primary-light-3: rgba(var(--primary-6), 0.5);
--color-primary-light-4: rgba(var(--primary-6), 0.65);
--color-secondary: rgba(var(--gray-9), 0.08);
--color-secondary-hover: rgba(var(--gray-8), 0.16);
--color-secondary-active: rgba(var(--gray-7), 0.24);
--color-secondary-disabled: rgba(var(--gray-9), 0.08);
--color-danger-light-1: rgba(var(--danger-6), 0.2);
--color-danger-light-2: rgba(var(--danger-6), 0.35);
--color-danger-light-3: rgba(var(--danger-6), 0.5);
--color-danger-light-4: rgba(var(--danger-6), 0.65);
--color-success-light-1: rgb(var(--success-6), 0.2);
--color-success-light-2: rgb(var(--success-6), 0.35);
--color-success-light-3: rgb(var(--success-6), 0.5);
--color-success-light-4: rgb(var(--success-6), 0.65);
--color-warning-light-1: rgb(var(--warning-6), 0.2);
--color-warning-light-2: rgb(var(--warning-6), 0.35);
--color-warning-light-3: rgb(var(--warning-6), 0.5);
--color-warning-light-4: rgb(var(--warning-6), 0.65);
--color-link-light-1: rgb(var(--link-6), 0.2);
--color-link-light-2: rgb(var(--link-6), 0.35);
--color-link-light-3: rgb(var(--link-6), 0.5);
--color-link-light-4: rgb(var(--link-6), 0.65);
--color-tooltip-bg: #373739;
--color-spin-layer-bg: rgba(51, 51, 51, 0.6);
--color-menu-dark-bg: #232324;
--color-menu-light-bg: #232324;
--color-menu-dark-hover: var(--color-fill-2);
--color-mask-bg: rgba(23, 23, 26, 0.6);
}
// 侧栏图标
.terminal-sidebar-icon-wrapper {
width: var(--sidebar-icon-wrapper-size);
height: var(--sidebar-icon-wrapper-size);
display: flex;
align-items: center;
justify-content: center;
.terminal-sidebar-icon {
width: var(--sidebar-icon-size);
height: var(--sidebar-icon-size);
font-size: var(--sidebar-icon-font-size);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-sidebar-icon);
border-radius: 4px;
border: 1px solid transparent;
transition: 0.1s cubic-bezier(0, 0, 1, 1);
cursor: pointer;
&:hover {
background: var(--color-sidebar-icon-bg);
}
&.checked-item {
background: var(--color-sidebar-icon-checked);
}
&.disabled-item {
cursor: not-allowed;
}
}
}
// 终端设置容器
.terminal-setting-container {
padding: 32px 16px 16px 16px;
width: 100%;
display: flex;
flex-direction: column;
.terminal-setting-wrapper {
min-width: 932px;
max-width: 90%;
margin: 0 auto;
position: relative;
}
.terminal-setting-title {
margin: 0 0 24px 0;
user-select: none;
font-size: 1.65em;
color: var(--color-content-text-3);
}
.terminal-setting-block {
color: var(--color-content-text-2);
margin-bottom: 24px;
}
.terminal-setting-subtitle-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.terminal-setting-subtitle {
margin: 0 0 16px 0;
user-select: none;
color: var(--color-content-text-3);
}
.terminal-setting-body {
display: flex;
&.block-body {
width: 100%;
padding: 16px;
border: 1px solid var(--color-fill-4);
border-radius: 4px;
}
}
}
// tooltip 内容
.terminal-tooltip-content {
color: var(--color-sidebar-tooltip-text);
background: var(--color-sidebar-tooltip-bg);
}
// 终端右键菜单
.terminal-context-menu {
.arco-dropdown-option {
padding: 0 6px;
line-height: 32px;
&-content {
width: 120px;
display: flex;
align-items: center;
}
}
&-icon {
font-size: 16px;
margin: 0 8px 0 4px;
}
}

View File

@@ -9,7 +9,7 @@
<!-- 内容区域 -->
<div class="terminal-setting-body setting-body">
<!-- 提示 -->
<a-alert class="mb16">点击保存按钮后需要刷新页面生效 (恢复默认配置后也需要点击保存按钮) (设置时需要避免使用浏览器内置快捷键)</a-alert>
<a-alert class="mb16">点击保存按钮后需要刷新页面生效 (恢复默认配置后也需要点击保存按钮) (设置时需要避免浏览器内置快捷键冲突)</a-alert>
<a-space class="action-container" size="mini">
<!-- 是否启用 -->
<a-switch v-model="value"

View File

@@ -41,7 +41,7 @@
import TerminalRightSidebar from './components/layout/terminal-right-sidebar.vue';
import TerminalContent from './components/layout/terminal-content.vue';
import LoadingSkeleton from './components/layout/loading-skeleton.vue';
import './assets/styles/layout.less';
import '@/assets/style/host-space-layout.less';
import 'xterm/css/xterm.css';
const terminalStore = useTerminalStore();
@@ -63,7 +63,7 @@
await terminalStore.fetchPreference();
// 设置系统主题配色
const dark = terminalStore.preference.theme.dark;
document.body.setAttribute('terminal-theme', dark ? 'dark' : 'light');
document.body.setAttribute('host-space-theme', dark ? 'dark' : 'light');
render.value = true;
});
@@ -97,7 +97,7 @@
// 移除关闭视口事件
window.removeEventListener('beforeunload', handleBeforeUnload);
// 去除 body style
document.body.removeAttribute('terminal-theme');
document.body.removeAttribute('host-space-theme');
// 重置 title
document.title = originTitle;
});

View File

@@ -1,5 +1,5 @@
// tab 类型
import { ShortcutKeyItem } from '@/views/host/terminal/types/terminal.type';
import { ShortcutKeyItem } from '@/views/host/space/types/terminal.type';
export const TerminalTabType = {
SETTING: 'setting',