From ef04acba6b8f96af923f908f9dc7a64b535d4258 Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Thu, 25 Jun 2026 02:53:31 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=95=B0=E6=8D=AE=E5=BA=93=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=BC=B9=E7=AA=97=E6=98=BE=E7=A4=BA=E7=9C=9F=E5=AE=9E?=
 =?UTF-8?q?=E5=BA=93=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |  2 +-
 frontend/src/components/DatabasePanel.vue | 32 ++++++++++++++++-------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index 036761d..e167ae6 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -728,5 +728,5 @@
 ## 2026-06-25：数据管理数据库选择改为弹窗列表
 
 - 数据管理页不再用下拉框切换数据库，改为表标题旁的图标按钮打开「选择数据库」弹窗；弹窗内为固定高度列表，超出高度滚动。
-- 左侧标题只显示分类名（主数据库 / CellData），不显示具体库名，也不再显示“表”字；选择项后续新增更多数据库时继续扩展同一列表，不占用侧栏宽度。
+- 左侧标题只显示分类名（主数据库 / CellData），不显示具体库名，也不再显示“表”字；弹窗列表显示真实库名（如 `主数据库：CapacityReport`）。选择项后续新增更多数据库时继续扩展同一列表，不占用侧栏宽度。
 - 验证：`frontend` `npm run build` 通过（仅既有大 chunk 提示）；构建产物已清理。
diff --git a/frontend/src/components/DatabasePanel.vue b/frontend/src/components/DatabasePanel.vue
index b7e821c..3b6fc78 100644
--- a/frontend/src/components/DatabasePanel.vue
+++ b/frontend/src/components/DatabasePanel.vue
@@ -267,7 +267,7 @@ import {
 } from '@vicons/ionicons5';
 
 import { apiGet, apiPost, download } from '../api/client';
-import type { ApiMessage, DatabaseInfo, TableData, TableInfo } from '../types';
+import type { ApiMessage, AppConfig, DatabaseInfo, TableData, TableInfo } from '../types';
 import { showDownloadCompleteDialog } from '../composables/downloadFeedback';
 import { resetPageHeader, setPageHeader } from '../composables/pageHeader';
 
@@ -277,6 +277,8 @@ type DatabaseSource = 'main' | 'cell_data';
 interface DatabaseSourceOption {
   label: string;
   value: DatabaseSource;
+  title: string;
+  databaseName: string;
 }
 
 const COLUMN_MIN_WIDTH = 140;
@@ -286,8 +288,8 @@ const databaseInfo = ref<DatabaseInfo | null>(null);
 const selectedDatabaseSource = ref<DatabaseSource>('main');
 const databaseSourceModalVisible = ref(false);
 const databaseSourceOptions = ref<DatabaseSourceOption[]>([
-  { label: '主数据库', value: 'main' },
-  { label: 'CellData', value: 'cell_data' }
+  { label: '主数据库', value: 'main', title: '主数据库', databaseName: '' },
+  { label: 'CellData', value: 'cell_data', title: 'CellData', databaseName: '' }
 ]);
 const tables = ref<string[]>([]);
 const selectedTable = ref<string | null>(null);
@@ -309,7 +311,7 @@ let tableLoadToken = 0;
 
 const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));
 const selectedDatabaseSourceLabel = computed(() => (
-  databaseSourceOptions.value.find(option => option.value === selectedDatabaseSource.value)?.label || '主数据库'
+  databaseSourceOptions.value.find(option => option.value === selectedDatabaseSource.value)?.title || '主数据库'
 ));
 const downloading = computed(() => Boolean(downloadingFormat.value));
 const exportButtonText = computed(() => (
@@ -405,11 +407,23 @@ async function testConnection() {
   }
 }
 
-function loadDatabaseSourceOptions() {
-  databaseSourceOptions.value = [
-    { label: '主数据库', value: 'main' },
-    { label: 'CellData', value: 'cell_data' }
-  ];
+async function loadDatabaseSourceOptions() {
+  try {
+    const config = await apiGet<AppConfig>('/api/config');
+    const mainName = config.warehouse_type === 'metrix'
+      ? (config.metrix.target_database || 'Metrix')
+      : (config.mysql.dbname || '主数据库');
+    const cellName = config.cell_data?.mysql?.dbname || 'CellData';
+    databaseSourceOptions.value = [
+      { label: `主数据库：${mainName}`, value: 'main', title: '主数据库', databaseName: mainName },
+      { label: `CellData：${cellName}`, value: 'cell_data', title: 'CellData', databaseName: cellName }
+    ];
+  } catch {
+    databaseSourceOptions.value = [
+      { label: '主数据库', value: 'main', title: '主数据库', databaseName: '' },
+      { label: 'CellData', value: 'cell_data', title: 'CellData', databaseName: '' }
+    ];
+  }
 }
 
 async function loadTables() {