From e212955613d6a2b064889bdd2a7fe5abb19af013 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Mon, 18 May 2026 16:33:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=88=E5=B9=B6=E5=BF=AB=E9=80=9F?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5=E6=A3=80=E6=B5=8B=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |  7 +++
 frontend/src/components/DatabasePanel.vue | 68 ++++++++++++++++-------
 2 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index 91ba02a..e0ee3e9 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -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` 计算状态；当存在活动任务或任务状态未完成/失败时，上传区和已选文件列表不再渲染。
diff --git a/frontend/src/components/DatabasePanel.vue b/frontend/src/components/DatabasePanel.vue
index b59cca0..38cecd2 100644
--- a/frontend/src/components/DatabasePanel.vue
+++ b/frontend/src/components/DatabasePanel.vue
@@ -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;