fix: 优化界面样式和布局

This commit is contained in:
2026-07-19 17:29:02 +08:00
parent 1bef01c0b2
commit 0c07a7c623
3 changed files with 43 additions and 6 deletions

View File

@@ -71,10 +71,12 @@ function handleSwitchTab(tab) {
tab="仪表盘"
>
<div class="tab-content dashboard-content">
<Dashboard
@switch-tab="handleSwitchTab"
@edit-server="handleEditServer"
/>
<div class="dashboard-scroll-wrapper">
<Dashboard
@switch-tab="handleSwitchTab"
@edit-server="handleEditServer"
/>
</div>
</div>
</n-tab-pane>
<n-tab-pane
@@ -129,12 +131,20 @@ html, body, #app {
.tab-content {
box-sizing: border-box;
padding: 12px 0;
padding: 0 0 16px 0;
height: calc(100vh - 50px);
overflow: hidden;
}
.dashboard-content {
display: flex;
flex-direction: column;
overflow: hidden;
}
.dashboard-scroll-wrapper {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
@@ -157,7 +167,6 @@ html, body, #app {
box-sizing: border-box;
height: 100%;
min-height: 0;
padding-right: 4px;
overflow: hidden;
}

View File

@@ -231,6 +231,17 @@ function handleDelete(server) {
.server-url {
margin-top: 4px;
overflow: hidden;
}
.server-url :deep(.n-tag) {
max-width: 100%;
}
.server-url :deep(.n-tag__content) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.server-bottom {

View File

@@ -95,6 +95,7 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
>{{ store.activeServer.value.status === 'connected' ? '已连接' : store.activeServer.value.status === 'connecting' ? '连接中...' : '未连接' }}</n-tag>
</template>
<n-descriptions
class="server-descriptions"
:column="2"
size="small"
bordered
@@ -182,6 +183,22 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
max-width: 900px;
}
.server-descriptions :deep(.n-descriptions-table) {
table-layout: fixed;
width: 100%;
}
.server-descriptions :deep(.n-descriptions-table-header),
.server-descriptions :deep(.n-descriptions-table-content) {
width: 25%;
}
.server-descriptions :deep(.n-descriptions-table-content) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status-dot {
display: inline-block;
width: 8px;