style: 压缩系统设置页布局高度
This commit is contained in:
@@ -1,5 +1,10 @@
|
||||
# 项目上下文记录
|
||||
|
||||
## 2026-05-19:压缩系统设置页布局高度
|
||||
|
||||
- `frontend/src/styles.css` 调整系统设置页为固定高度布局,外层 `settings-workspace` 减小 padding 并隐藏溢出,避免主内容区出现整页滚动条。
|
||||
- 字段映射配置卡片高度限制为 620px,内容通过卡片内部滚动区域浏览,避免规则映射页被字段列表撑高。
|
||||
|
||||
## 2026-05-19:拆分系统设置页并支持远程源文件自动清理
|
||||
|
||||
- `frontend/src/components/SettingsPanel.vue` 的系统设置改为 Naive UI Tabs:连接配置页放数据库配置和远程数据源,规则映射页放 Sheet 过滤规则和字段映射配置,修改密码独立一页,避免设置内容堆在一个长页面。
|
||||
|
||||
+48
-10
@@ -1175,12 +1175,17 @@ select {
|
||||
|
||||
/* ==================== Settings ==================== */
|
||||
.settings-workspace {
|
||||
min-height: 100%;
|
||||
padding: 24px 32px 40px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 14px 22px 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-tabs-card {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-card-header {
|
||||
@@ -1192,11 +1197,33 @@ select {
|
||||
}
|
||||
|
||||
.settings-tabs-card > .n-card__content {
|
||||
padding-top: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 20px 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-tabs-card > .n-card__content > .n-tabs {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.settings-tabs {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-tabs .n-tab-pane {
|
||||
padding-top: 16px;
|
||||
height: 100%;
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-tabs .n-tabs-pane-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-section-grid,
|
||||
@@ -1212,6 +1239,8 @@ select {
|
||||
|
||||
.settings-rules-grid {
|
||||
grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.4fr);
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.settings-security-panel {
|
||||
@@ -1242,7 +1271,10 @@ select {
|
||||
|
||||
.field-mapping-card {
|
||||
min-width: 0;
|
||||
height: fit-content;
|
||||
height: min(620px, 100%);
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.field-mapping-card > .n-card-header {
|
||||
@@ -1257,7 +1289,9 @@ select {
|
||||
}
|
||||
|
||||
.field-mapping-card > .n-card__content {
|
||||
max-height: calc(100vh - 280px);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
padding: 12px 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1309,7 +1343,8 @@ select {
|
||||
}
|
||||
|
||||
.field-mapping-scroll {
|
||||
max-height: calc(100vh - 304px);
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.field-mapping-scroll .n-scrollbar-content {
|
||||
@@ -1538,9 +1573,12 @@ select {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field-mapping-card > .n-card__content,
|
||||
.field-mapping-scroll {
|
||||
max-height: none;
|
||||
.settings-tabs .n-tab-pane {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.field-mapping-card {
|
||||
height: 620px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user