⚡ 修改终端标签颜色显示.
This commit is contained in:
@@ -5,6 +5,7 @@ import com.orion.lang.exception.argument.InvalidArgumentException;
|
|||||||
import com.orion.lang.utils.Exceptions;
|
import com.orion.lang.utils.Exceptions;
|
||||||
import com.orion.lang.utils.Strings;
|
import com.orion.lang.utils.Strings;
|
||||||
import com.orion.net.host.SessionHolder;
|
import com.orion.net.host.SessionHolder;
|
||||||
|
import com.orion.net.host.SessionLogger;
|
||||||
import com.orion.net.host.SessionStore;
|
import com.orion.net.host.SessionStore;
|
||||||
import com.orion.visor.framework.common.constant.Const;
|
import com.orion.visor.framework.common.constant.Const;
|
||||||
import com.orion.visor.framework.common.utils.CryptoUtils;
|
import com.orion.visor.framework.common.utils.CryptoUtils;
|
||||||
@@ -40,6 +41,7 @@ public class SessionStores {
|
|||||||
CURRENT_ADDRESS.set(address);
|
CURRENT_ADDRESS.set(address);
|
||||||
// 创建会话
|
// 创建会话
|
||||||
SessionHolder sessionHolder = SessionHolder.create();
|
SessionHolder sessionHolder = SessionHolder.create();
|
||||||
|
sessionHolder.setLogger(SessionLogger.INFO);
|
||||||
SessionStore session = createSessionStore(conn, sessionHolder);
|
SessionStore session = createSessionStore(conn, sessionHolder);
|
||||||
// 连接
|
// 连接
|
||||||
session.connect();
|
session.connect();
|
||||||
|
|||||||
@@ -175,7 +175,7 @@
|
|||||||
import { downloadExecCommandLogFile } from '@/api/exec/exec-command-log';
|
import { downloadExecCommandLogFile } from '@/api/exec/exec-command-log';
|
||||||
import { downloadExecJobLogFile } from '@/api/job/exec-job-log';
|
import { downloadExecJobLogFile } from '@/api/job/exec-job-log';
|
||||||
import { downloadFile } from '@/utils/file';
|
import { downloadFile } from '@/utils/file';
|
||||||
import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
|
import XtermSearchModal from '@/components/xterm/search-modal/index.vue';
|
||||||
import '@xterm/xterm/css/xterm.css';
|
import '@xterm/xterm/css/xterm.css';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import type { ImageAddon } from '@xterm/addon-image';
|
|||||||
import type { Unicode11Addon } from '@xterm/addon-unicode11';
|
import type { Unicode11Addon } from '@xterm/addon-unicode11';
|
||||||
|
|
||||||
// 默认字体
|
// 默认字体
|
||||||
export const defaultFontFamily = 'Courier New, Monaco, courier, monospace';
|
export const defaultFontFamily = 'Consolas, Courier New, Monaco, courier, monospace';
|
||||||
|
|
||||||
// 默认主题
|
// 默认主题
|
||||||
export const defaultTheme = {
|
export const defaultTheme = {
|
||||||
|
|||||||
@@ -199,6 +199,7 @@
|
|||||||
height: var(--header-height);
|
height: var(--header-height);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
transition: all .3s;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -11,7 +11,10 @@
|
|||||||
<!-- 右侧按钮 -->
|
<!-- 右侧按钮 -->
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<a-space class="panel-extra">
|
<a-space class="panel-extra">
|
||||||
<span class="extra-icon" @click="close">
|
<!-- 关闭 -->
|
||||||
|
<span class="extra-icon"
|
||||||
|
title="关闭面板"
|
||||||
|
@click="close">
|
||||||
<icon-close />
|
<icon-close />
|
||||||
</span>
|
</span>
|
||||||
</a-space>
|
</a-space>
|
||||||
@@ -21,7 +24,10 @@
|
|||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<template #title>
|
<template #title>
|
||||||
<span class="tab-title-wrapper usn"
|
<span class="tab-title-wrapper usn"
|
||||||
:style="{ 'border-bottom': `2px ${tab.color || 'transparent'} solid` }"
|
:style="{
|
||||||
|
'--color': getDictValue(tabColorKey, tab.color, 'color', 'transparent'),
|
||||||
|
'--bg': panel.active === tab.key ? getDictValue(tabColorKey, tab.color, 'bg', 'transparent') : 'transparent',
|
||||||
|
}"
|
||||||
@dblclick="copySession(tab, index)">
|
@dblclick="copySession(tab, index)">
|
||||||
<span class="tab-title-icon">
|
<span class="tab-title-icon">
|
||||||
<component :is="tab.icon" />
|
<component :is="tab.icon" />
|
||||||
@@ -47,8 +53,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { ISshSession, ITerminalTabManager, TerminalPanelTabItem } from '../../types/define';
|
import type { ISshSession, ITerminalTabManager, TerminalPanelTabItem } from '../../types/define';
|
||||||
import { watch } from 'vue';
|
import { watch } from 'vue';
|
||||||
import { useTerminalStore } from '@/store';
|
import { useDictStore, useTerminalStore } from '@/store';
|
||||||
import { PanelSessionType } from '../../types/const';
|
import { tabColorKey, PanelSessionType } from '../../types/const';
|
||||||
import SshView from '../ssh/ssh-view.vue';
|
import SshView from '../ssh/ssh-view.vue';
|
||||||
import SftpView from '../sftp/sftp-view.vue';
|
import SftpView from '../sftp/sftp-view.vue';
|
||||||
|
|
||||||
@@ -60,6 +66,7 @@
|
|||||||
const emits = defineEmits(['close', 'openNewConnect']);
|
const emits = defineEmits(['close', 'openNewConnect']);
|
||||||
|
|
||||||
const { sessionManager, copySession } = useTerminalStore();
|
const { sessionManager, copySession } = useTerminalStore();
|
||||||
|
const { getDictValue } = useDictStore();
|
||||||
|
|
||||||
// 监听 tab 切换
|
// 监听 tab 切换
|
||||||
watch(() => props.panel.active, (active, before) => {
|
watch(() => props.panel.active, (active, before) => {
|
||||||
@@ -107,12 +114,28 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 11px 18px 9px 14px;
|
padding: 11px 18px 9px 14px;
|
||||||
margin: 0 2px;
|
background: var(--bg);
|
||||||
|
position: relative;
|
||||||
|
transition: all .3s;
|
||||||
|
|
||||||
.tab-title-icon {
|
.tab-title-icon {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
filter: brightness(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
width: calc(100% - 3px);
|
||||||
|
height: 2px;
|
||||||
|
background: var(--color);
|
||||||
|
position: absolute;
|
||||||
|
left: 1px;
|
||||||
|
bottom: -1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-extra {
|
.panel-extra {
|
||||||
|
|||||||
@@ -22,11 +22,11 @@
|
|||||||
:filter-option="labelFilter">
|
:filter-option="labelFilter">
|
||||||
<!-- label -->
|
<!-- label -->
|
||||||
<template #label="{ data }">
|
<template #label="{ data }">
|
||||||
<span :style="{ fontFamily: data.value }">{{ data.label }}</span>
|
<span :style="{ fontFamily: data.value === '_' ? defaultFontFamily : data.value }">{{ data.label }}</span>
|
||||||
</template>
|
</template>
|
||||||
<!-- 选项 -->
|
<!-- 选项 -->
|
||||||
<template #option="{ data }">
|
<template #option="{ data }">
|
||||||
<span :style="{ fontFamily: data.value }">{{ data.label }}</span>
|
<span :style="{ fontFamily: data.value === '_' ? defaultFontFamily : data.value }">{{ data.label }}</span>
|
||||||
</template>
|
</template>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
<template v-for="color in toOptions(tabColorKey)">
|
<template v-for="color in toOptions(tabColorKey)">
|
||||||
<div class="color-wrapper"
|
<div class="color-wrapper"
|
||||||
:class="[formModel.color === color.value ? 'selected-color' : '']"
|
:class="[formModel.color === color.value ? 'selected-color' : '']"
|
||||||
:style="{ '--color': `${color.value}` }"
|
:style="{ '--color': `${color.color}` }"
|
||||||
@click="clickColor(color.value as string)">
|
@click="clickColor(color.value as string)">
|
||||||
<div class="color-item">
|
<div class="color-item">
|
||||||
<div class="color-item-dot" />
|
<div class="color-item-dot" />
|
||||||
|
|||||||
@@ -6,9 +6,10 @@
|
|||||||
<div class="ssh-header-left">
|
<div class="ssh-header-left">
|
||||||
<!-- 主机地址 -->
|
<!-- 主机地址 -->
|
||||||
<span class="address-wrapper">
|
<span class="address-wrapper">
|
||||||
|
<span class="text-copy"
|
||||||
|
:title="tab.address"
|
||||||
|
@click="copy(tab.address as string, true)">
|
||||||
{{ tab.address }}
|
{{ tab.address }}
|
||||||
<span class="address-copy copy-right" title="复制" @click="copy(tab.address as string)">
|
|
||||||
<icon-copy />
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -79,7 +80,7 @@
|
|||||||
import IconActions from '../layout/icon-actions.vue';
|
import IconActions from '../layout/icon-actions.vue';
|
||||||
import SshContextMenu from './ssh-context-menu.vue';
|
import SshContextMenu from './ssh-context-menu.vue';
|
||||||
import SftpUploadModal from '../sftp/sftp-upload-modal.vue';
|
import SftpUploadModal from '../sftp/sftp-upload-modal.vue';
|
||||||
import XtermSearchModal from '@/components/xtrem/search-modal/index.vue';
|
import XtermSearchModal from '@/components/xterm/search-modal/index.vue';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
tab: TerminalPanelTabItem;
|
tab: TerminalPanelTabItem;
|
||||||
@@ -182,7 +183,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-left {
|
&-left {
|
||||||
width: 34%;
|
width: 25%;
|
||||||
|
|
||||||
.address-wrapper {
|
.address-wrapper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -190,16 +191,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
.address-copy {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.address-copy {
|
|
||||||
display: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: 'IP:';
|
content: 'IP:';
|
||||||
padding-right: 4px;
|
padding-right: 4px;
|
||||||
@@ -208,7 +199,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-right {
|
&-right {
|
||||||
width: 66%;
|
width: 75%;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
.command-input {
|
.command-input {
|
||||||
|
|||||||
@@ -157,12 +157,14 @@
|
|||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 卸载时清除 cache
|
// 卸载时清除 cache
|
||||||
useCacheStore().reset('authorizedHostKeys', 'authorizedHostIdentities', 'commandSnippetGroups', 'pathBookmarkGroups');
|
useCacheStore().reset('authorizedHostKeys', 'authorizedHostIdentities', 'commandSnippetGroups', 'pathBookmarkGroups');
|
||||||
// 移除关闭视口事件
|
|
||||||
window.removeEventListener('beforeunload', handleBeforeUnload);
|
|
||||||
// 去除 body style
|
// 去除 body style
|
||||||
document.body.removeAttribute('terminal-theme');
|
document.body.removeAttribute('terminal-theme');
|
||||||
// 重置 title
|
// 重置 title
|
||||||
document.title = originTitle;
|
document.title = originTitle;
|
||||||
|
// 移除关闭视口事件
|
||||||
|
if (!debug) {
|
||||||
|
window.removeEventListener('beforeunload', handleBeforeUnload);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user