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

@@ -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>

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>

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-split direction="vertical" :default-size="1 / 3" :min="1 / 5" :max="3 / 5">
-    <n-select
+    <template #1>
-      class="table-select"
+      <CodeEditor
-      v-model:value="selectedTableId"
+        :model-value="selectedTable.setupSql"
-      :options="tableOptions"
+        language="sql"
-    />
+        readonly
-    <n-split
+        label="表结构与初始数据"
-      direction="vertical"
+      />
-      :default-size="1 / 3"
+    </template>
-      :min="1 / 5"
+    <template #2>
-      :max="3 / 5"
+      <OutputSection />
-    >
+    </template>
-      <template #1>
+  </n-split>
-        <CodeEditor
-          :model-value="selectedTable.setupSql"
-          language="sql"
-          readonly
-          label="表结构与初始数据"
-        />
-      </template>
-      <template #2>
-        <OutputSection />
-      </template>
-    </n-split>
-  </n-flex>
 </template>
-
-<style scoped>
-.sql-section {
-  height: 100%;
-}
-.table-select {
-  margin: 12px 20px 0;
-  width: 160px;
-}
-</style>