feat: add SqlSection UI wired into the desktop editor layout

Selecting SQL now shows a table picker, read-only setup-SQL preview,
and results panel instead of the Input/Output split, mirroring how
Turtle already replaces that pane with its own canvas.

src/desktop/Content.vue

@@ -3,6 +3,7 @@ import { code } from "../composables/code"
 import CodeSection from "./CodeSection.vue"
 import InputSection from "./InputSection.vue"
 import OutputSection from "./OutputSection.vue"
+import SqlSection from "./SqlSection.vue"
 import TurtleSection from "./TurtleSection.vue"
 </script>
 
@@ -14,7 +15,7 @@ import TurtleSection from "./TurtleSection.vue"
       </template>
       <template #2>
         <n-split
-          v-if="code.language !== 'turtle'"
+          v-if="code.language !== 'turtle' && code.language !== 'sql'"
           direction="vertical"
           :default-size="1 / 3"
           :min="1 / 5"
@@ -27,7 +28,8 @@ import TurtleSection from "./TurtleSection.vue"
             <OutputSection />
           </template>
         </n-split>
-        <TurtleSection v-else />
+        <TurtleSection v-else-if="code.language === 'turtle'" />
+        <SqlSection v-else />
       </template>
     </n-split>
   </n-layout-content>

src/desktop/SqlSection.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed } from "vue"
+import CodeEditor from "../components/CodeEditor.vue"
+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) ??
+    sqlTables[0],
+)
+</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>
+</template>
+
+<style scoped>
+.sql-section {
+  height: 100%;
+}
+.table-select {
+  margin: 12px 20px 0;
+  width: 160px;
+}
+</style>