feat(structure): add DDL tab to table structure editor (#893)

Closes #836

Co-authored-by: dqn <someonegdeng@qq.com>

apps/desktop/src/components/structure/TableStructureEditor.vue

@@ -98,6 +98,23 @@ const activeTab = ref("columns");
 const loading = ref(false);
 const saving = ref(false);
 const sqlPreviewLoading = ref(false);
+const ddlContent = ref("");
+const ddlLoading = ref(false);
+const ddlFetched = ref(false);
+
+async function fetchDdl() {
+  if (!props.connectionId || !props.database || !props.tableName || ddlFetched.value) return;
+  ddlLoading.value = true;
+  try {
+    ddlContent.value = await api.getTableDdl(props.connectionId, props.database, metadataSchema.value, props.tableName);
+    ddlFetched.value = true;
+  } catch (e: any) {
+    ddlContent.value = `-- Error: ${e?.message || e}`;
+    ddlFetched.value = true;
+  } finally {
+    ddlLoading.value = false;
+  }
+}
 const errorMessage = ref("");
 const columns = ref<EditableStructureColumn[]>([]);
 const indexes = ref<EditableStructureIndex[]>([]);
@@ -432,6 +449,8 @@ function resetState() {
   warnings.value = [];
   foreignKeys.value = [];
   triggers.value = [];
+  ddlContent.value = "";
+  ddlFetched.value = false;
   newTableName.value = "";
   tableComment.value = "";
   originalTableComment.value = "";
@@ -776,6 +795,12 @@ watch(refreshVersion, (version, previous) => {
   if (version === previous || !version || isCreateMode.value) return;
   void loadStructure(true);
 });
+
+watch(activeTab, (tab) => {
+  if (tab === "ddl") {
+    void fetchDdl();
+  }
+});
 </script>
 
 <template>
@@ -846,6 +871,7 @@ watch(refreshVersion, (version, previous) => {
               <TabsTrigger value="indexes">{{ t("structureEditor.indexes") }}</TabsTrigger>
               <TabsTrigger value="foreignKeys">{{ t("structureEditor.foreignKeys") }}</TabsTrigger>
               <TabsTrigger value="triggers">{{ t("structureEditor.triggers") }}</TabsTrigger>
+              <TabsTrigger value="ddl" v-if="!isCreateMode">DDL</TabsTrigger>
             </TabsList>
             <div class="flex shrink-0 items-center gap-1.5">
               <div class="flex items-center gap-1.5">
@@ -1444,6 +1470,18 @@ watch(refreshVersion, (version, previous) => {
               </div>
             </div>
           </TabsContent>
+
+          <TabsContent value="ddl" class="m-0 min-h-0 flex-1 overflow-auto p-[var(--structure-cell-px)]">
+            <div v-if="ddlLoading" class="flex items-center justify-center gap-2 py-10 text-muted-foreground">
+              <Loader2 class="h-4 w-4 animate-spin" />
+              {{ t("common.loading") }}
+            </div>
+            <pre
+              v-else
+              class="m-0 min-h-0 flex-1 whitespace-pre p-3 font-mono text-xs leading-5 select-text"
+              v-html="ddlContent ? (sqlHighlighter?.(ddlContent) ?? ddlContent) : t('structureEditor.emptyReadonly')"
+            ></pre>
+          </TabsContent>
         </Tabs>
       </div>
 

apps/desktop/src/i18n/locales/en.ts

@@ -1256,6 +1256,7 @@ export default {
     indexes: "Indexes",
     foreignKeys: "Foreign Keys",
     triggers: "Triggers",
+    ddl: "DDL",
     addColumn: "Add Column",
     addIndex: "Add Index",
     columnName: "Column",

apps/desktop/src/i18n/locales/es.ts

@@ -1066,6 +1066,7 @@ export default {
     indexes: "Índices",
     foreignKeys: "Claves foráneas",
     triggers: "Disparadores",
+    ddl: "DDL",
     addColumn: "Agregar columna",
     addIndex: "Agregar índice",
     columnName: "Columna",

apps/desktop/src/i18n/locales/it.ts

@@ -1199,6 +1199,7 @@ export default {
     indexes: "Indici",
     foreignKeys: "Chiavi Esterne",
     triggers: "Trigger",
+    ddl: "DDL",
     addColumn: "Aggiungi Colonna",
     addIndex: "Aggiungi Indice",
     columnName: "Colonna",

apps/desktop/src/i18n/locales/pt-BR.ts

@@ -1194,6 +1194,7 @@ export default {
     indexes: "Índices",
     foreignKeys: "Chaves estrangeiras",
     triggers: "Triggers",
+    ddl: "DDL",
     addColumn: "Adicionar coluna",
     addIndex: "Adicionar índice",
     columnName: "Coluna",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -1229,6 +1229,7 @@ export default {
     indexes: "索引",
     foreignKeys: "外键",
     triggers: "触发器",
+    ddl: "DDL",
     addColumn: "新增字段",
     addIndex: "新增索引",
     columnName: "字段名",

apps/desktop/src/i18n/locales/zh-TW.ts

@@ -1130,6 +1130,7 @@ export default {
     indexes: "索引",
     foreignKeys: "外鍵",
     triggers: "觸發器",
+    ddl: "DDL",
     addColumn: "新增欄位",
     addIndex: "新增索引",
     columnName: "欄位",