admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update LayoutRenderer.vue

Browse Source
This commit is contained in:
Baobhan Sith
2025-04-17 17:27:09 +08:00
parent fe67f2adf0
commit 26b56e7631
1 changed files with 64 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/LayoutRenderer.vue
+64 -3
View File
@@ -1,5 +1,7 @@
<script setup lang="ts">
import { computed, defineAsyncComponent, type PropType, type Component } from 'vue';
// 添加依赖 font-awesome
import '@fortawesome/fontawesome-free/css/all.min.css';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css'; // 引入 splitpanes 样式
import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store';
@@ -251,7 +253,13 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
v-bind="componentProps"
/>
</keep-alive>
<div v-if="!activeSession" class="pane-placeholder">无活动会话</div> <!-- 处理无活动会话的情况 -->
<div v-if="!activeSession" class="pane-placeholder empty-session">
<div class="empty-session-content">
<i class="fas fa-terminal-slash"></i>
<span>无活动会话</span>
<div class="empty-session-tip">请先连接一个会话</div>
</div>
</div>
</template>
<!-- FileManager 需要 keep-alive 处理 -->
<template v-else-if="layoutNode.component === 'fileManager'">
@@ -263,7 +271,13 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
v-bind="componentProps"
/>
</keep-alive>
<div v-if="!activeSession" class="pane-placeholder">无活动会话</div>
<div v-if="!activeSession" class="pane-placeholder empty-session">
<div class="empty-session-content">
<i class="fas fa-terminal-slash"></i>
<span>无活动会话</span>
<div class="empty-session-tip">请先连接一个会话</div>
</div>
</div>
</template>
<!-- StatusMonitor 仅在有活动会话时渲染，并添加 key (无 keep-alive) -->
<template v-else-if="layoutNode.component === 'statusMonitor'">
@@ -273,7 +287,13 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
:key="activeSessionId"
v-bind="componentProps"
/>
<div v-else class="pane-placeholder">无活动会话</div>
<div v-else class="pane-placeholder empty-session">
<div class="empty-session-content">
<i class="fas fa-terminal-slash"></i>
<span>无活动会话</span>
<div class="empty-session-tip">请先连接一个会话</div>
</div>
</div>
</template>
<!-- 其他面板正常渲染 (不依赖 activeSession 的) -->
<template v-else-if="currentComponent">
@@ -331,6 +351,47 @@ const handlePaneResize = (eventData: { panes: Array<{ size: number; [key: string
font-size: 0.9em;
padding: 1rem;
}
/* 增强空会话显示样式 */
:deep(.empty-session) {
background-color: #fcfcfc;
border-radius: 8px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
:deep(.empty-session-content) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
width: 100%;
height: 100%;
}
:deep(.empty-session-content i) {
font-size: 2.5rem;
margin-bottom: 0.75rem;
color: #d1d5db;
}
:deep(.empty-session-content span) {
font-size: 1.1rem;
font-weight: 500;
color: #9ca3af;
margin-bottom: 0.5rem;
}
:deep(.empty-session-tip) {
font-size: 0.85rem;
color: #c0c5cc;
margin-top: 0.5rem;
}
:deep(.layout-pane-wrapper > .pane-placeholder.error) {
color: #dc3545; /* 错误用红色 */
background-color: #fdd;