Metrix/CapacityReport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 调整连接配置卡片布局

Browse Source
This commit is contained in:
nixevol
2026-05-19 12:12:25 +08:00
parent a3cc9f347c
commit 30346bd57c
3 changed files with 84 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/project_context.md
+6
View File
@@ -1,5 +1,11 @@
# 项目上下文记录 # 项目上下文记录
## 2026-05-19：调整连接配置页卡片布局
- `frontend/src/components/SettingsPanel.vue` 将连接配置页改成左列堆叠“数据库配置”和“处理历史保留”，右列显示“远程数据源”，避免右侧远程数据源卡片高度把处理历史保留卡片挤到很下面。
- `frontend/src/styles.css` 新增 `.settings-connection-stack`，左列卡片之间使用固定 18px 间距。
- 已执行 `npm run build`；已通过本机 Chrome DevTools 验证设置页中数据库配置与处理历史保留同列显示，间距为 18px，远程数据源位于右列。
## 2026-05-19：新增处理历史保留配置并完善配置导入导出 ## 2026-05-19：新增处理历史保留配置并完善配置导入导出
- `app/config.py` 新增 `HistoryRetention` 配置块，包含 `enabled` 和 `keep_count`；`keep_count=0` 表示不保留已结束处理历史，关闭开关时不自动删除历史。 - `app/config.py` 新增 `HistoryRetention` 配置块，包含 `enabled` 和 `keep_count`；`keep_count=0` 表示不保留已结束处理历史，关闭开关时不自动删除历史。
frontend/src/components/SettingsPanel.vue
+71 -69
View File
@@ -13,44 +13,78 @@
<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">
<n-card title="数据库配置" size="small" class="work-card"> <div class="settings-connection-stack">
<n-form label-placement="top"> <n-card title="数据库配置" size="small" class="work-card">
<n-grid :cols="12" :x-gap="12"> <n-form label-placement="top">
<n-gi :span="8"> <n-grid :cols="12" :x-gap="12">
<n-form-item label="主机地址"> <n-gi :span="8">
<n-input v-model:value="mysqlForm.host" placeholder="localhost" /> <n-form-item label="主机地址">
</n-form-item> <n-input v-model:value="mysqlForm.host" placeholder="localhost" />
</n-gi> </n-form-item>
<n-gi :span="4"> </n-gi>
<n-form-item label="端口"> <n-gi :span="4">
<n-input-number v-model:value="mysqlForm.port" class="full-width" :min="1" :max="65535" /> <n-form-item label="端口">
</n-form-item> <n-input-number v-model:value="mysqlForm.port" class="full-width" :min="1" :max="65535" />
</n-gi> </n-form-item>
</n-grid> </n-gi>
<n-form-item label="数据库名"> </n-grid>
<n-input v-model:value="mysqlForm.dbname" placeholder="CapacityReport" /> <n-form-item label="数据库名">
</n-form-item> <n-input v-model:value="mysqlForm.dbname" placeholder="CapacityReport" />
<n-grid :cols="12" :x-gap="12"> </n-form-item>
<n-gi :span="6"> <n-grid :cols="12" :x-gap="12">
<n-form-item label="用户名"> <n-gi :span="6">
<n-input v-model:value="mysqlForm.user" placeholder="root" /> <n-form-item label="用户名">
</n-form-item> <n-input v-model:value="mysqlForm.user" placeholder="root" />
</n-gi> </n-form-item>
<n-gi :span="6"> </n-gi>
<n-form-item label="密码"> <n-gi :span="6">
<n-input v-model:value="mysqlForm.passwd" type="password" show-password-on="click" /> <n-form-item label="密码">
</n-form-item> <n-input v-model:value="mysqlForm.passwd" type="password" show-password-on="click" />
</n-gi> </n-form-item>
</n-grid> </n-gi>
</n-form> </n-grid>
</n-form>
<template #footer> <template #footer>
<n-space justify="end"> <n-space justify="end">
<n-button type="primary" :loading="savingMysql" @click="saveMysql">保存配置</n-button> <n-button type="primary" :loading="savingMysql" @click="saveMysql">保存配置</n-button>
<n-button :loading="testingDb" @click="testDatabase">测试连接</n-button> <n-button :loading="testingDb" @click="testDatabase">测试连接</n-button>
</n-space> </n-space>
</template> </template>
</n-card> </n-card>
<n-card title="处理历史保留" size="small" class="work-card">
<n-form label-placement="top">
<n-grid :cols="12" :x-gap="12">
<n-gi :span="6">
<n-form-item label="自动清理处理历史">
<n-switch v-model:value="historyRetentionForm.enabled" />
</n-form-item>
</n-gi>
<n-gi :span="6">
<n-form-item label="保留最近次数">
<n-input-number
v-model:value="historyRetentionForm.keep_count"
class="full-width"
:min="0"
:precision="0"
:disabled="!historyRetentionForm.enabled"
/>
</n-form-item>
</n-gi>
</n-grid>
<p class="form-hint">关闭后不自动删除处理历史；启用后会在任务结束时自动清理，设置为 0 表示不保留历史，否则只保留最近指定次数的处理历史。</p>
</n-form>
<template #footer>
<n-space justify="end">
<n-button type="primary" :loading="savingHistoryRetention" @click="saveHistoryRetention">
保存配置
</n-button>
</n-space>
</template>
</n-card>
</div>
<n-card title="远程数据源" size="small" class="work-card"> <n-card title="远程数据源" size="small" class="work-card">
<n-form label-placement="top"> <n-form label-placement="top">
@@ -124,38 +158,6 @@
</n-space> </n-space>
</template> </template>
</n-card> </n-card>
<n-card title="处理历史保留" size="small" class="work-card">
<n-form label-placement="top">
<n-grid :cols="12" :x-gap="12">
<n-gi :span="6">
<n-form-item label="自动清理处理历史">
<n-switch v-model:value="historyRetentionForm.enabled" />
</n-form-item>
</n-gi>
<n-gi :span="6">
<n-form-item label="保留最近次数">
<n-input-number
v-model:value="historyRetentionForm.keep_count"
class="full-width"
:min="0"
:precision="0"
:disabled="!historyRetentionForm.enabled"
/>
</n-form-item>
</n-gi>
</n-grid>
<p class="form-hint">关闭后不自动删除处理历史；启用后会在任务结束时自动清理，设置为 0 表示不保留历史，否则只保留最近指定次数的处理历史。</p>
</n-form>
<template #footer>
<n-space justify="end">
<n-button type="primary" :loading="savingHistoryRetention" @click="saveHistoryRetention">
保存配置
</n-button>
</n-space>
</template>
</n-card>
</div> </div>
</n-tab-pane> </n-tab-pane>
frontend/src/styles.css
+7
View File
@@ -1232,6 +1232,13 @@ select {
scrollbar-width: thin; scrollbar-width: thin;
} }
.settings-connection-stack {
display: flex;
min-width: 0;
flex-direction: column;
gap: 18px;
}
.settings-section-grid::-webkit-scrollbar { .settings-section-grid::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;