fix: 合并快速导入检测入口

This commit is contained in:
2026-05-18 16:33:24 +08:00
parent 1b489a01cd
commit e212955613
2 changed files with 54 additions and 21 deletions
+7
View File
@@ -1,5 +1,12 @@
# 项目上下文记录
## 2026-05-18:合并数据管理页快速导入检测入口
- `frontend/src/components/DatabasePanel.vue` 移除数据库状态卡片里的独立“重新检测”文字按钮,把刷新动作合并到“快速导入”的状态徽标上。
- 点击“可用 / 未启用 / 检测中”徽标会自动重新检测并刷新状态;成功不弹 toast,失败仍显示错误提示。
- 数据库状态卡片去掉为底部按钮预留的额外内边距,布局更紧凑。
- 已执行 `npm run build`,构建通过;未启动浏览器或 headless Chrome。
## 2026-05-18:处理任务运行时隐藏上传区域
- `frontend/src/components/FileWorkflow.vue` 新增 `taskInProgress` 计算状态;当存在活动任务或任务状态未完成/失败时,上传区和已选文件列表不再渲染。
+47 -21
View File
@@ -33,14 +33,19 @@
<div class="server-info-item">
<span class="info-label">快速导入:</span>
<span class="info-value">
<span class="status-badge" :class="databaseInfo?.load_data_infile ? 'success' : 'warning'">
{{ databaseInfo ? (databaseInfo.load_data_infile ? '可用' : '未启用') : '检测中' }}
</span>
<button
type="button"
class="status-badge status-action"
:class="loadDataInfileClass"
:disabled="testing"
aria-label="刷新快速导入状态"
title="刷新快速导入状态"
@click="testConnection"
>
{{ loadDataInfileText }}
</button>
</span>
</div>
<n-button size="tiny" text :loading="testing" class="connection-test" @click="testConnection(true)">
重新检测
</n-button>
</section>
</aside>
@@ -146,6 +151,14 @@ const loadingData = ref(false);
const testing = ref(false);
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
const loadDataInfileText = computed(() => {
if (testing.value || !databaseInfo.value) return '检测中';
return databaseInfo.value.load_data_infile ? '可用' : '未启用';
});
const loadDataInfileClass = computed(() => {
if (testing.value || !databaseInfo.value) return 'unknown';
return databaseInfo.value.load_data_infile ? 'success' : 'warning';
});
const columns = computed<DataTableColumns<RowData>>(() => {
const keys = rows.value.length
? Object.keys(rows.value[0])
@@ -174,7 +187,7 @@ onMounted(() => {
}
]
});
void testConnection(false);
void testConnection();
void loadTables();
});
@@ -182,15 +195,11 @@ onBeforeUnmount(() => {
resetPageHeader();
});
async function testConnection(showSuccessToast = true) {
async function testConnection() {
testing.value = true;
try {
const result = await apiPost<ApiMessage>('/api/database/test');
if (result.success) {
if (showSuccessToast) {
message.success(result.message || '连接测试完成');
}
} else {
if (!result.success) {
message.error(result.message || '数据库连接测试失败');
}
databaseInfo.value = await apiGet<DatabaseInfo>('/api/database/info');
@@ -455,7 +464,7 @@ function formatCell(value: unknown): string {
.database-server-info {
position: relative;
flex-shrink: 0;
padding: 10px 12px 28px;
padding: 10px 12px;
font-size: 12px;
background: var(--td-bg-color-secondarycontainer);
}
@@ -482,17 +491,40 @@ function formatCell(value: unknown): string {
}
.status-badge {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 112px;
overflow: hidden;
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
font-family: inherit;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
border: 0;
border-radius: 10px;
}
.status-action {
cursor: pointer;
transition: opacity var(--td-transition), box-shadow var(--td-transition), transform var(--td-transition);
}
.status-action:hover:not(:disabled) {
box-shadow: inset 0 0 0 1px currentColor;
}
.status-action:active:not(:disabled) {
transform: translateY(1px);
}
.status-action:disabled {
cursor: wait;
opacity: 0.78;
}
.status-badge.success {
color: var(--td-success-color);
background: var(--td-success-color-light);
@@ -508,12 +540,6 @@ function formatCell(value: unknown): string {
background: var(--td-bg-color-container-hover);
}
.connection-test {
position: absolute;
right: 10px;
bottom: 6px;
}
.database-content-pane {
display: flex;
flex: 1;