style: 收紧系统设置页头部布局

This commit is contained in:
2026-05-21 17:45:54 +08:00
parent b5b614423c
commit f2676a85b7
3 changed files with 7 additions and 17 deletions
+5
View File
@@ -1,4 +1,9 @@
# 项目上下文记录 # 项目上下文记录
## 2026-05-21:收紧系统设置页头部空间
- 系统设置页移除了内容卡片内重复的“系统设置/更新时间”标题栏,保留外层统一页面标题,减少首屏垂直空间占用。
- 配置更新时间改为页面头部动作区的文本项,显示在“下载配置”按钮左侧;窄屏下沿用全局头部规则隐藏辅助文本。
## 2026-05-21:增加下载完成提示弹窗 ## 2026-05-21:增加下载完成提示弹窗
- 数据表 CSV/XLSX 导出、历史数据压缩包下载和配置文件下载在下载流程完成后会弹出 Naive UI 成功对话框,使用绿色成功图标提示用户文件已下载完成。 - 数据表 CSV/XLSX 导出、历史数据压缩包下载和配置文件下载在下载流程完成后会弹出 Naive UI 成功对话框,使用绿色成功图标提示用户文件已下载完成。
+2 -7
View File
@@ -3,13 +3,6 @@
<input ref="configInput" class="hidden-input" type="file" accept=".json" @change="uploadConfigFile" /> <input ref="configInput" class="hidden-input" type="file" accept=".json" @change="uploadConfigFile" />
<n-card size="small" class="work-card settings-tabs-card"> <n-card size="small" class="work-card settings-tabs-card">
<template #header>
<div class="settings-card-header">
<span>系统设置</span>
<span class="muted-line">更新时间:{{ configUpdate || '-' }}</span>
</div>
</template>
<n-tabs type="line" animated class="settings-tabs"> <n-tabs type="line" animated class="settings-tabs">
<n-tab-pane name="connection" tab="连接配置"> <n-tab-pane name="connection" tab="连接配置">
<div class="settings-section-grid"> <div class="settings-section-grid">
@@ -331,6 +324,7 @@ const message = useMessage();
const dialog = useDialog(); const dialog = useDialog();
const configInput = ref<HTMLInputElement | null>(null); const configInput = ref<HTMLInputElement | null>(null);
const configUpdate = ref(''); const configUpdate = ref('');
const configUpdateText = computed(() => `更新时间:${configUpdate.value || '-'}`);
const loading = ref(false); const loading = ref(false);
const testingDb = ref(false); const testingDb = ref(false);
const testingRemote = ref(false); const testingRemote = ref(false);
@@ -404,6 +398,7 @@ const visibleFieldMappings = computed(() => {
onMounted(() => { onMounted(() => {
setPageHeader({ setPageHeader({
actions: [ actions: [
{ key: 'config-update', kind: 'text', label: configUpdateText },
{ key: 'download-config', label: '下载配置', icon: CloudDownloadOutline, onClick: downloadConfig }, { key: 'download-config', label: '下载配置', icon: CloudDownloadOutline, onClick: downloadConfig },
{ key: 'upload-config', label: '上传配置', icon: CloudUploadOutline, onClick: () => configInput.value?.click() } { key: 'upload-config', label: '上传配置', icon: CloudUploadOutline, onClick: () => configInput.value?.click() }
] ]
-10
View File
@@ -123,7 +123,6 @@ select {
width: 100%; width: 100%;
} }
.muted-line,
.page-subtitle { .page-subtitle {
overflow: hidden; overflow: hidden;
color: var(--td-text-color-placeholder); color: var(--td-text-color-placeholder);
@@ -1152,14 +1151,6 @@ select {
flex-direction: column; flex-direction: column;
} }
.settings-card-header {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
gap: 16px;
}
.settings-tabs-card > .n-card__content, .settings-tabs-card > .n-card__content,
.settings-tabs-card > .n-card-content { .settings-tabs-card > .n-card-content {
flex: 1; flex: 1;
@@ -1671,7 +1662,6 @@ select {
} }
.card-actions, .card-actions,
.settings-card-header,
.field-card-title-row, .field-card-title-row,
.extract-list-header { .extract-list-header {
align-items: stretch; align-items: stretch;