style: 收紧系统设置页头部布局
This commit is contained in:
@@ -1,4 +1,9 @@
|
|||||||
# 项目上下文记录
|
# 项目上下文记录
|
||||||
|
## 2026-05-21:收紧系统设置页头部空间
|
||||||
|
|
||||||
|
- 系统设置页移除了内容卡片内重复的“系统设置/更新时间”标题栏,保留外层统一页面标题,减少首屏垂直空间占用。
|
||||||
|
- 配置更新时间改为页面头部动作区的文本项,显示在“下载配置”按钮左侧;窄屏下沿用全局头部规则隐藏辅助文本。
|
||||||
|
|
||||||
## 2026-05-21:增加下载完成提示弹窗
|
## 2026-05-21:增加下载完成提示弹窗
|
||||||
|
|
||||||
- 数据表 CSV/XLSX 导出、历史数据压缩包下载和配置文件下载在下载流程完成后会弹出 Naive UI 成功对话框,使用绿色成功图标提示用户文件已下载完成。
|
- 数据表 CSV/XLSX 导出、历史数据压缩包下载和配置文件下载在下载流程完成后会弹出 Naive UI 成功对话框,使用绿色成功图标提示用户文件已下载完成。
|
||||||
|
|||||||
@@ -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() }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user