推翻重来.
This commit is contained in:
@@ -97,7 +97,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'hostReviewConnectLogTable'
|
||||
name: 'hostAuditConnectLogTable'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'hostReviewConnectLog'
|
||||
name: 'hostAuditConnectLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
231
orion-ops-ui/src/views/host/space/components/layout-header.vue
Normal file
231
orion-ops-ui/src/views/host/space/components/layout-header.vue
Normal 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>
|
||||
153
orion-ops-ui/src/views/host/space/index.vue
Normal file
153
orion-ops-ui/src/views/host/space/index.vue
Normal 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>
|
||||
0
orion-ops-ui/src/views/host/space/types/const.ts
Normal file
0
orion-ops-ui/src/views/host/space/types/const.ts
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user