fix: 优化界面样式和布局
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user