From 76a73d2a86d7c36a70637d1600655c6952d5793e Mon Sep 17 00:00:00 2001
From: Nixevol <guaotiantang@gmail.com>
Date: Thu, 25 Jun 2026 02:40:30 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=95=B0=E6=8D=AE=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=BA=93=E9=80=89=E6=8B=A9=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/project_context.md                   |   6 ++
 frontend/src/components/DatabasePanel.vue | 102 +++++++++++++++++++---
 2 files changed, 97 insertions(+), 11 deletions(-)

diff --git a/docs/project_context.md b/docs/project_context.md
index ef56744..e961e29 100644
--- a/docs/project_context.md
+++ b/docs/project_context.md
@@ -724,3 +724,9 @@
 - 后端数据库接口新增 `database_source` 参数，`main` 保持原有直连 MySQL / Metrix 仓库逻辑，`cell_data` 使用 `CellData.MySQL_DBInfo` 创建独立 MySQL 仓库。表列表、表结构、分页数据、清空、删除、删除全部、执行 SQL 和导出均按该参数选择数据库。
 - CellData 数据库当前只支持直连 MySQL 配置；Metrix 仓库模式只影响主数据库。
 - 验证：`python -m compileall -q app` 通过；`frontend` `npm run build` 通过（仅既有大 chunk 提示）；构建产物与 Python 缓存已清理。
+
+## 2026-06-25：数据管理数据库选择改为弹窗列表
+
+- 数据管理页不再用下拉框切换数据库，改为表标题旁的图标按钮打开「选择数据库」弹窗；弹窗内为固定高度列表，超出高度滚动。
+- 选择项仍来自主数据库与 CellData 数据库配置，后续新增更多数据库时继续扩展同一列表，不占用侧栏宽度。
+- 验证：`frontend` `npm run build` 通过（仅既有大 chunk 提示）；构建产物已清理。
diff --git a/frontend/src/components/DatabasePanel.vue b/frontend/src/components/DatabasePanel.vue
index 550f5e3..aac9365 100644
--- a/frontend/src/components/DatabasePanel.vue
+++ b/frontend/src/components/DatabasePanel.vue
@@ -5,13 +5,19 @@
         <div class="database-table-pane-header">
           <div class="database-source-header">
             <h2>表</h2>
-            <n-select
-              v-model:value="selectedDatabaseSource"
+            <span class="database-source-name">{{ selectedDatabaseSourceLabel }}</span>
+            <n-button
+              quaternary
+              circle
               size="small"
-              class="database-source-select"
-              :options="databaseSourceOptions"
-              @update:value="switchDatabaseSource"
-            />
+              aria-label="切换数据库"
+              title="切换数据库"
+              @click="databaseSourceModalVisible = true"
+            >
+              <template #icon>
+                <n-icon><ServerOutline /></n-icon>
+              </template>
+            </n-button>
           </div>
           <n-button
             quaternary
@@ -224,17 +230,40 @@
       </div>
     </template>
   </n-modal>
+
+  <n-modal
+    v-model:show="databaseSourceModalVisible"
+    preset="card"
+    class="database-source-modal"
+    title="选择数据库"
+    style="width: min(420px, calc(100vw - 32px))"
+  >
+    <n-scrollbar class="database-source-options">
+      <button
+        v-for="option in databaseSourceOptions"
+        :key="String(option.value)"
+        type="button"
+        class="database-source-option"
+        :class="{ active: selectedDatabaseSource === option.value }"
+        @click="switchDatabaseSource(String(option.value))"
+      >
+        <span>{{ option.label }}</span>
+        <span v-if="selectedDatabaseSource === option.value" class="database-source-current">当前</span>
+      </button>
+    </n-scrollbar>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
 import { computed, onActivated, onBeforeUnmount, onMounted, ref } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { useDialog, useMessage } from 'naive-ui';
-import type { DataTableColumns, DropdownOption, SelectOption } from 'naive-ui';
+import type { DataTableColumns, DropdownOption } from 'naive-ui';
 import {
   ChevronForwardOutline,
   CloudDownloadOutline,
   RefreshOutline,
+  ServerOutline,
   TrashOutline
 } from '@vicons/ionicons5';
 
@@ -246,13 +275,18 @@ import { resetPageHeader, setPageHeader } from '../composables/pageHeader';
 type RowData = Record<string, unknown>;
 type DownloadFormat = 'csv' | 'xlsx';
 type DatabaseSource = 'main' | 'cell_data';
+interface DatabaseSourceOption {
+  label: string;
+  value: DatabaseSource;
+}
 
 const COLUMN_MIN_WIDTH = 140;
 const message = useMessage();
 const dialog = useDialog();
 const databaseInfo = ref<DatabaseInfo | null>(null);
 const selectedDatabaseSource = ref<DatabaseSource>('main');
-const databaseSourceOptions = ref<SelectOption[]>([
+const databaseSourceModalVisible = ref(false);
+const databaseSourceOptions = ref<DatabaseSourceOption[]>([
   { label: '主数据库', value: 'main' },
   { label: 'CellData', value: 'cell_data' }
 ]);
@@ -275,6 +309,9 @@ const columnSchemaExpanded = ref(false);
 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 || '主数据库'
+));
 const downloading = computed(() => Boolean(downloadingFormat.value));
 const exportButtonText = computed(() => (
   downloadingFormat.value ? `导出 ${downloadingFormat.value.toUpperCase()}...` : '导出'
@@ -417,7 +454,10 @@ async function loadTables() {
 }
 
 function switchDatabaseSource(value: string) {
-  selectedDatabaseSource.value = value === 'cell_data' ? 'cell_data' : 'main';
+  const nextSource: DatabaseSource = value === 'cell_data' ? 'cell_data' : 'main';
+  databaseSourceModalVisible.value = false;
+  if (selectedDatabaseSource.value === nextSource) return;
+  selectedDatabaseSource.value = nextSource;
   resetTableState();
   void testConnection();
   void loadTables();
@@ -732,8 +772,48 @@ function formatCell(value: unknown): string {
   gap: 8px;
 }
 
-.database-source-select {
-  width: 150px;
+.database-source-name {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--td-text-color-secondary);
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.database-source-options {
+  max-height: 320px;
+}
+
+.database-source-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  color: var(--td-text-color-primary);
+  font: inherit;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--td-border-color-light);
+  cursor: pointer;
+}
+
+.database-source-option:hover {
+  background: var(--td-bg-color-container-hover);
+}
+
+.database-source-option.active {
+  color: var(--td-brand-color);
+  font-weight: 600;
+  background: var(--td-brand-color-light);
+}
+
+.database-source-current {
+  flex: 0 0 auto;
+  font-size: 12px;
 }
 
 .database-table-list-wrap {