update
This commit is contained in:
Baobhan Sith
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="status-monitor">
|
||||
<h4>服务器状态</h4>
|
||||
<div v-if="!statusData" class="loading-status">
|
||||
<div v-if="!serverStatus" class="loading-status">
|
||||
等待数据...
|
||||
</div>
|
||||
<div v-else class="status-grid">
|
||||
@@ -19,14 +19,14 @@
|
||||
<div class="status-item">
|
||||
<label>CPU:</label>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" :style="{ width: `${statusData.cpuPercent ?? 0}%` }"></div>
|
||||
<div class="progress-bar" :style="{ width: `${serverStatus.cpuPercent ?? 0}%` }"></div>
|
||||
</div>
|
||||
<span>{{ statusData.cpuPercent?.toFixed(1) ?? 'N/A' }}%</span>
|
||||
<span>{{ serverStatus.cpuPercent?.toFixed(1) ?? 'N/A' }}%</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<label>内存:</label>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" :style="{ width: `${statusData.memPercent ?? 0}%` }"></div>
|
||||
<div class="progress-bar" :style="{ width: `${serverStatus.memPercent ?? 0}%` }"></div>
|
||||
</div>
|
||||
<span class="mem-disk-details">{{ memDisplay }}</span>
|
||||
</div>
|
||||
@@ -34,25 +34,25 @@
|
||||
<div class="status-item">
|
||||
<label>Swap:</label>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar swap-bar" :style="{ width: `${statusData.swapPercent ?? 0}%` }"></div>
|
||||
<div class="progress-bar swap-bar" :style="{ width: `${serverStatus.swapPercent ?? 0}%` }"></div>
|
||||
</div>
|
||||
<span class="mem-disk-details">{{ swapDisplay }}</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<label>磁盘 (/):</label>
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" :style="{ width: `${statusData.diskPercent ?? 0}%` }"></div>
|
||||
<div class="progress-bar" :style="{ width: `${serverStatus.diskPercent ?? 0}%` }"></div>
|
||||
</div>
|
||||
<span class="mem-disk-details">{{ diskDisplay }}</span>
|
||||
</div>
|
||||
<div class="status-item network-rate">
|
||||
<label>网络 ({{ statusData.netInterface || '...' }}):</label>
|
||||
<span class="rate down">⬇ {{ formatBytesPerSecond(statusData.netRxRate) }}</span>
|
||||
<span class="rate up">⬆ {{ formatBytesPerSecond(statusData.netTxRate) }}</span>
|
||||
<label>网络 ({{ serverStatus.netInterface || '...' }}):</label>
|
||||
<span class="rate down">⬇ {{ formatBytesPerSecond(serverStatus.netRxRate) }}</span>
|
||||
<span class="rate up">⬆ {{ formatBytesPerSecond(serverStatus.netTxRate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="error" class="status-error">
|
||||
错误: {{ error }}
|
||||
<div v-if="statusError" class="status-error">
|
||||
错误: {{ statusError }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -79,18 +79,19 @@ interface ServerStatus {
|
||||
osName?: string; // 操作系统名称
|
||||
}
|
||||
|
||||
// Props 用于接收父组件传递的状态数据和错误信息
|
||||
// 更新 Props 定义
|
||||
const props = defineProps<{
|
||||
statusData: ServerStatus | null;
|
||||
error?: string | null;
|
||||
sessionId: string; // 添加会话 ID
|
||||
serverStatus: ServerStatus | null; // 更改名称从 statusData 到 serverStatus
|
||||
statusError?: string | null; // 更改名称从 error 到 statusError
|
||||
}>();
|
||||
|
||||
// --- 缓存状态 ---
|
||||
const cachedCpuModel = ref<string | null>(null);
|
||||
const cachedOsName = ref<string | null>(null);
|
||||
|
||||
// 监听传入的 statusData 变化以更新缓存
|
||||
watch(() => props.statusData, (newData) => {
|
||||
// 监听传入的 serverStatus 变化以更新缓存 (更新引用)
|
||||
watch(() => props.serverStatus, (newData) => {
|
||||
if (newData) {
|
||||
// 仅当新数据有效时更新缓存
|
||||
if (newData.cpuModel !== undefined && newData.cpuModel !== null && newData.cpuModel !== '') {
|
||||
@@ -103,15 +104,15 @@ watch(() => props.statusData, (newData) => {
|
||||
// 如果 newData 为 null (例如断开连接)，不清除缓存
|
||||
}, { immediate: true }); // 立即执行一次以初始化缓存
|
||||
|
||||
// --- 显示计算属性 (包含缓存逻辑) ---
|
||||
// --- 显示计算属性 (包含缓存逻辑) - 更新引用 ---
|
||||
const displayCpuModel = computed(() => {
|
||||
// 优先使用当前有效数据，否则回退到缓存，最后是 'N/A'
|
||||
return (props.statusData?.cpuModel ?? cachedCpuModel.value) || 'N/A';
|
||||
return (props.serverStatus?.cpuModel ?? cachedCpuModel.value) || 'N/A';
|
||||
});
|
||||
|
||||
const displayOsName = computed(() => {
|
||||
// 优先使用当前有效数据，否则回退到缓存，最后是 'N/A'
|
||||
return (props.statusData?.osName ?? cachedOsName.value) || 'N/A';
|
||||
return (props.serverStatus?.osName ?? cachedOsName.value) || 'N/A';
|
||||
});
|
||||
|
||||
|
||||
@@ -133,9 +134,9 @@ const formatKbToGb = (kb?: number): string => {
|
||||
return `${gb.toFixed(1)} GB`;
|
||||
};
|
||||
|
||||
// 计算属性用于显示内存信息
|
||||
// 计算属性用于显示内存信息 (更新引用)
|
||||
const memDisplay = computed(() => {
|
||||
const data = props.statusData;
|
||||
const data = props.serverStatus;
|
||||
if (!data || data.memUsed === undefined || data.memTotal === undefined) return 'N/A'; // 检查数据有效性
|
||||
const percent = data.memPercent !== undefined ? `(${data.memPercent.toFixed(1)}%)` : '';
|
||||
// 确保 MB 值在是整数时不显示小数
|
||||
@@ -144,9 +145,9 @@ const memDisplay = computed(() => {
|
||||
return `${usedMb} MB / ${totalMb} MB ${percent}`;
|
||||
});
|
||||
|
||||
// 计算属性用于显示磁盘信息
|
||||
// 计算属性用于显示磁盘信息 (更新引用)
|
||||
const diskDisplay = computed(() => {
|
||||
const data = props.statusData;
|
||||
const data = props.serverStatus;
|
||||
if (!data || data.diskUsed === undefined || data.diskTotal === undefined) return 'N/A'; // 检查数据有效性
|
||||
// 百分比代表已用空间
|
||||
const percent = data.diskPercent !== undefined ? `(${data.diskPercent.toFixed(1)}%)` : '';
|
||||
@@ -154,9 +155,9 @@ const diskDisplay = computed(() => {
|
||||
return `${formatKbToGb(data.diskUsed)} / ${formatKbToGb(data.diskTotal)} ${percent}`;
|
||||
});
|
||||
|
||||
// 计算属性用于显示 Swap 信息
|
||||
// 计算属性用于显示 Swap 信息 (更新引用)
|
||||
const swapDisplay = computed(() => {
|
||||
const data = props.statusData;
|
||||
const data = props.serverStatus;
|
||||
// 处理 swap 可能为 undefined 或 0 的情况
|
||||
const used = data?.swapUsed ?? 0;
|
||||
const total = data?.swapTotal ?? 0;
|
||||
|
||||
@@ -7,6 +7,7 @@ import 'xterm/css/xterm.css'; // 引入 xterm 样式
|
||||
|
||||
// 定义 props 和 emits
|
||||
const props = defineProps<{
|
||||
sessionId: string; // 会话 ID
|
||||
stream?: ReadableStream<string>; // 用于接收来自 WebSocket 的数据流 (可选)
|
||||
options?: object; // xterm 的配置选项
|
||||
}>();
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
|
||||
// 定义会话状态的简化接口 (仅包含标签栏需要的信息)
|
||||
interface SessionTabInfo {
|
||||
sessionId: string;
|
||||
connectionName: string; // 显示在标签上的名称
|
||||
}
|
||||
|
||||
// 定义 Props
|
||||
const props = defineProps({
|
||||
sessions: {
|
||||
type: Array as PropType<SessionTabInfo[]>,
|
||||
required: true,
|
||||
},
|
||||
activeSessionId: {
|
||||
type: String as PropType<string | null>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['activate-session', 'close-session']);
|
||||
|
||||
const activateSession = (sessionId: string) => {
|
||||
if (sessionId !== props.activeSessionId) {
|
||||
emit('activate-session', sessionId);
|
||||
}
|
||||
};
|
||||
|
||||
const closeSession = (event: MouseEvent, sessionId: string) => {
|
||||
event.stopPropagation(); // 阻止事件冒泡到标签点击事件
|
||||
emit('close-session', sessionId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="terminal-tab-bar">
|
||||
<ul class="tab-list">
|
||||
<li
|
||||
v-for="session in sessions"
|
||||
:key="session.sessionId"
|
||||
:class="['tab-item', { active: session.sessionId === activeSessionId }]"
|
||||
@click="activateSession(session.sessionId)"
|
||||
:title="session.connectionName"
|
||||
>
|
||||
<span class="tab-name">{{ session.connectionName }}</span>
|
||||
<button class="close-tab-button" @click="closeSession($event, session.sessionId)" title="关闭标签页">
|
||||
× <!-- 使用 HTML 实体 '×' -->
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 可以添加一个 "+" 按钮来打开新标签/连接 -->
|
||||
<!-- <button class="add-tab-button">+</button> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.terminal-tab-bar {
|
||||
display: flex;
|
||||
background-color: #e0e0e0; /* 标签栏背景色 */
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
overflow-x: auto; /* 如果标签过多则允许水平滚动 */
|
||||
white-space: nowrap;
|
||||
padding: 0 0.5rem; /* 左右留出一点空间 */
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.8rem;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
background-color: #f0f0f0; /* 未激活标签背景 */
|
||||
color: #616161; /* 未激活标签文字颜色 */
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
max-width: 200px; /* 限制标签最大宽度 */
|
||||
position: relative; /* 为了关闭按钮定位 */
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
background-color: #e0e0e0; /* 悬停时背景 */
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
background-color: #ffffff; /* 激活标签背景 */
|
||||
color: #333333; /* 激活标签文字颜色 */
|
||||
border-bottom: 1px solid #ffffff; /* 覆盖底部边框，使其看起来与下方内容区域连接 */
|
||||
position: relative;
|
||||
z-index: 1; /* 确保激活标签在上方 */
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.8rem; /* 与关闭按钮的间距 */
|
||||
}
|
||||
|
||||
.close-tab-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #9e9e9e;
|
||||
cursor: pointer;
|
||||
font-size: 1.1em;
|
||||
padding: 0 0.3rem;
|
||||
line-height: 1;
|
||||
border-radius: 50%;
|
||||
margin-left: auto; /* 将按钮推到右侧 */
|
||||
}
|
||||
|
||||
.close-tab-button:hover {
|
||||
background-color: #bdbdbd;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tab-item.active .close-tab-button {
|
||||
color: #757575; /* 激活标签上的关闭按钮颜色 */
|
||||
}
|
||||
.tab-item.active .close-tab-button:hover {
|
||||
background-color: #e0e0e0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 可选：添加新标签按钮样式 */
|
||||
/*
|
||||
.add-tab-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.5rem 0.8rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
color: #616161;
|
||||
}
|
||||
.add-tab-button:hover {
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
*/
|
||||
</style>
|
||||
@@ -7,7 +7,12 @@ import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store
|
||||
import { useTagsStore, TagInfo } from '../stores/tags.store';
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['connect-request', 'request-add-connection', 'request-edit-connection']); // 添加新事件
|
||||
const emit = defineEmits([
|
||||
'connect-request', // 左键单击 - 请求激活或替换当前标签
|
||||
'open-new-session', // 中键单击 - 请求在新标签中打开
|
||||
'request-add-connection', // 右键菜单 - 添加
|
||||
'request-edit-connection' // 右键菜单 - 编辑
|
||||
]);
|
||||
|
||||
const { t } = useI18n();
|
||||
// const router = useRouter(); // 不再需要
|
||||
@@ -127,6 +132,12 @@ onMounted(() => {
|
||||
connectionsStore.fetchConnections();
|
||||
tagsStore.fetchTags();
|
||||
});
|
||||
|
||||
// 处理中键点击（在新标签页打开）
|
||||
const handleOpenInNewTab = (connectionId: number) => {
|
||||
emit('open-new-session', connectionId);
|
||||
closeContextMenu(); // 如果右键菜单是打开的，也关闭它
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -156,7 +167,9 @@ onMounted(() => {
|
||||
v-for="conn in group.connections"
|
||||
:key="conn.id"
|
||||
class="connection-item"
|
||||
@click="handleConnect(conn.id)"
|
||||
@click.left="handleConnect(conn.id)"
|
||||
@click.middle.prevent="handleOpenInNewTab(conn.id)"
|
||||
@auxclick.prevent="handleOpenInNewTab(conn.id)"
|
||||
@contextmenu.prevent="showContextMenu($event, conn)"
|
||||
>
|
||||
<i class="fas fa-server connection-icon"></i>
|
||||
|
||||
Reference in New Issue
Block a user