From b30e8c9ee6cfe479ab76dc18213ac0869b13741f Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sun, 5 Jul 2026 00:02:57 -0600
Subject: [PATCH] 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    |  6 +++--
 src/desktop/SqlSection.vue | 55 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/desktop/SqlSection.vue

diff --git a/src/desktop/Content.vue b/src/desktop/Content.vue
index 852db90..22fdbb3 100644
--- a/src/desktop/Content.vue
+++ b/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>
diff --git a/src/desktop/SqlSection.vue b/src/desktop/SqlSection.vue
new file mode 100644
index 0000000..c32f985
--- /dev/null
+++ b/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>