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

View File

@@ -231,6 +231,17 @@ function handleDelete(server) {
.server-url { .server-url {
margin-top: 4px; 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 { .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> >{{ store.activeServer.value.status === 'connected' ? '已连接' : store.activeServer.value.status === 'connecting' ? '连接中...' : '未连接' }}</n-tag>
</template> </template>
<n-descriptions <n-descriptions
class="server-descriptions"
:column="2" :column="2"
size="small" size="small"
bordered bordered
@@ -182,6 +183,22 @@ const emit = defineEmits(['switch-tab', 'edit-server']);
max-width: 900px; 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 { .status-dot {
display: inline-block; display: inline-block;
width: 8px; width: 8px;