From 62ef50fb765698f583bd12c3ec9849231911ea03 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sun, 5 Jul 2026 00:15:02 -0600
Subject: [PATCH] Move SQL table picker next to the language selector

Previously the candidate-table dropdown lived inside SqlSection's
content pane; moved it into the header alongside SelectLanguage so
table selection is visible regardless of scroll position.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/SelectSqlTable.vue | 22 +++++++++++++
 src/desktop/Header.vue            |  4 ++-
 src/desktop/SqlSection.vue        | 52 ++++++++-----------------------
 3 files changed, 38 insertions(+), 40 deletions(-)
 create mode 100644 src/components/SelectSqlTable.vue

diff --git a/src/components/SelectSqlTable.vue b/src/components/SelectSqlTable.vue
new file mode 100644
index 0000000..7e453dd
--- /dev/null
+++ b/src/components/SelectSqlTable.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { SelectOption } from "naive-ui"
+import { computed } from "vue"
+import { selectedTableId } from "../composables/sqlTable"
+import { sqlTables } from "../data/sqlTables"
+
+const tableOptions = computed<SelectOption[]>(() =>
+  sqlTables.map((table) => ({ value: table.id, label: table.label })),
+)
+</script>
+<template>
+  <n-select
+    class="select"
+    :options="tableOptions"
+    v-model:value="selectedTableId"
+  />
+</template>
+<style scoped>
+.select {
+  width: 125px;
+}
+</style>
diff --git a/src/desktop/Header.vue b/src/desktop/Header.vue
index d86dc93..f84ac97 100644
--- a/src/desktop/Header.vue
+++ b/src/desktop/Header.vue
@@ -2,8 +2,9 @@
 import { Icon } from "@iconify/vue"
 import { useMessage } from "naive-ui"
 import SelectLanguage from "../components/SelectLanguage.vue"
+import SelectSqlTable from "../components/SelectSqlTable.vue"
 import ThemeButton from "../components/ThemeButton.vue"
-import { loading, run, share, size } from "../composables/code"
+import { code, loading, run, share, size } from "../composables/code"
 
 const message = useMessage()
 
@@ -34,6 +35,7 @@ function handleShare() {
           <template #prefix>字号</template>
         </n-input-number>
         <SelectLanguage />
+        <SelectSqlTable v-if="code.language === 'sql'" />
         <n-button type="primary" @click="run" :disabled="loading">
           运行 (F5)
         </n-button>
diff --git a/src/desktop/SqlSection.vue b/src/desktop/SqlSection.vue
index c32f985..77593ff 100644
--- a/src/desktop/SqlSection.vue
+++ b/src/desktop/SqlSection.vue
@@ -5,10 +5,6 @@ import { selectedTableId } from "../composables/sqlTable"
 import { sqlTables } from "../data/sqlTables"
 import OutputSection from "./OutputSection.vue"
 
-const tableOptions = computed(() =>
-  sqlTables.map((table) => ({ value: table.id, label: table.label })),
-)
-
 const selectedTable = computed(
   () =>
     sqlTables.find((table) => table.id === selectedTableId.value) ??
@@ -17,39 +13,17 @@ const selectedTable = computed(
 </script>
 
 <template>
-  <n-flex vertical class="sql-section">
-    <n-select
-      class="table-select"
-      v-model:value="selectedTableId"
-      :options="tableOptions"
-    />
-    <n-split
-      direction="vertical"
-      :default-size="1 / 3"
-      :min="1 / 5"
-      :max="3 / 5"
-    >
-      <template #1>
-        <CodeEditor
-          :model-value="selectedTable.setupSql"
-          language="sql"
-          readonly
-          label="表结构与初始数据"
-        />
-      </template>
-      <template #2>
-        <OutputSection />
-      </template>
-    </n-split>
-  </n-flex>
+  <n-split direction="vertical" :default-size="1 / 3" :min="1 / 5" :max="3 / 5">
+    <template #1>
+      <CodeEditor
+        :model-value="selectedTable.setupSql"
+        language="sql"
+        readonly
+        label="表结构与初始数据"
+      />
+    </template>
+    <template #2>
+      <OutputSection />
+    </template>
+  </n-split>
 </template>
-
-<style scoped>
-.sql-section {
-  height: 100%;
-}
-.table-select {
-  margin: 12px 20px 0;
-  width: 160px;
-}
-</style>