From 130a33808e920486e4c7025ae813af7206dd9609 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 1 Jun 2026 23:52:01 +0800
Subject: [PATCH] feat(desktop): improve table structure editor

---
 .../structure/TableStructureEditor.vue        | 173 +++++++++++++-----
 .../src/lib/tableStructureEditorState.ts      |  12 ++
 crates/dbx-core/src/db/postgres.rs            |  27 ++-
 crates/dbx-core/src/db/sqlserver.rs           |   7 +-
 .../tableStructureEditorState.test.ts         |  14 ++
 5 files changed, 177 insertions(+), 56 deletions(-)

diff --git a/apps/desktop/src/components/structure/TableStructureEditor.vue b/apps/desktop/src/components/structure/TableStructureEditor.vue
index 09927c69b3..934f6b1d87 100644
--- a/apps/desktop/src/components/structure/TableStructureEditor.vue
+++ b/apps/desktop/src/components/structure/TableStructureEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from "vue";
 import { uuid } from "@/lib/utils";
 import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
@@ -97,6 +97,12 @@ const warnings = ref<string[]>([]);
 const foreignKeys = ref<ForeignKeyInfo[]>([]);
 const triggers = ref<TriggerInfo[]>([]);
 
+function isPlainModShortcut(event: KeyboardEvent, key: string): boolean {
+  if (event.isComposing || event.altKey || event.shiftKey) return false;
+  if (!event.metaKey && !event.ctrlKey) return false;
+  return event.key.toLowerCase() === key;
+}
+
 const structureDensityValues: StructureEditorDensity[] = ["compact", "standard", "comfortable"];
 const structureDensityMetrics: Record<
   StructureEditorDensity,
@@ -118,52 +124,52 @@ const structureDensityMetrics: Record<
   }
 > = {
   compact: {
-    columns: [24, 104, 120, 72, 54, 46, 92, 104, 104, 96],
-    indexes: [104, 156, 54, 78, 108, 128, 104, 62],
+    columns: [28, 120, 136, 82, 60, 52, 108, 124, 128, 108],
+    indexes: [120, 180, 60, 88, 124, 144, 120, 70],
     minColumnWidth: 24,
     minIndexColumnWidth: 48,
-    fontSize: 10,
-    shellPadding: 8,
-    cellPaddingX: 4,
-    cellPaddingY: 3,
-    headerPaddingY: 4,
-    controlHeight: 20,
-    controlPaddingX: 6,
-    iconSize: 12,
-    checkboxSize: 12,
-    lineHeight: 1.25,
-  },
-  standard: {
-    columns: [28, 128, 144, 96, 64, 56, 112, 128, 128, 128],
-    indexes: [132, 200, 64, 96, 132, 160, 132, 76],
-    minColumnWidth: 28,
-    minIndexColumnWidth: 60,
     fontSize: 11,
-    shellPadding: 12,
+    shellPadding: 10,
     cellPaddingX: 6,
     cellPaddingY: 4,
-    headerPaddingY: 6,
+    headerPaddingY: 5,
     controlHeight: 24,
     controlPaddingX: 8,
     iconSize: 14,
-    checkboxSize: 14,
+    checkboxSize: 13,
     lineHeight: 1.35,
   },
-  comfortable: {
-    columns: [32, 152, 168, 104, 76, 68, 136, 168, 152, 132],
-    indexes: [156, 232, 76, 112, 156, 192, 156, 92],
-    minColumnWidth: 32,
-    minIndexColumnWidth: 64,
+  standard: {
+    columns: [32, 144, 160, 104, 72, 64, 128, 152, 152, 136],
+    indexes: [148, 224, 72, 108, 148, 180, 148, 84],
+    minColumnWidth: 28,
+    minIndexColumnWidth: 60,
     fontSize: 12,
-    shellPadding: 14,
+    shellPadding: 12,
     cellPaddingX: 8,
-    cellPaddingY: 6,
-    headerPaddingY: 8,
+    cellPaddingY: 5,
+    headerPaddingY: 7,
     controlHeight: 28,
     controlPaddingX: 10,
     iconSize: 15,
-    checkboxSize: 15,
-    lineHeight: 1.45,
+    checkboxSize: 14,
+    lineHeight: 1.4,
+  },
+  comfortable: {
+    columns: [36, 168, 188, 116, 84, 76, 152, 188, 176, 148],
+    indexes: [176, 260, 84, 124, 176, 216, 176, 104],
+    minColumnWidth: 32,
+    minIndexColumnWidth: 64,
+    fontSize: 13,
+    shellPadding: 16,
+    cellPaddingX: 10,
+    cellPaddingY: 7,
+    headerPaddingY: 9,
+    controlHeight: 32,
+    controlPaddingX: 12,
+    iconSize: 16,
+    checkboxSize: 16,
+    lineHeight: 1.5,
   },
 };
 
@@ -346,6 +352,7 @@ const targetLabel = computed(() =>
 );
 
 let sqlPreviewRequestId = 0;
+let keydownListenerRegistered = false;
 
 async function refreshSqlPreview() {
   const requestId = ++sqlPreviewRequestId;
@@ -519,6 +526,7 @@ function canDropColumn(column: EditableStructureColumn): boolean {
 
 function addIndex() {
   if (!structureCapabilities.value.createIndex) return;
+  activeTab.value = "indexes";
   indexes.value.push({
     id: `new:${uuid()}`,
     name: "",
@@ -531,6 +539,14 @@ function addIndex() {
     comment: "",
     markedForDrop: false,
   });
+  void nextTick(() => {
+    const indexRows = rootRef.value?.querySelectorAll<HTMLElement>('[data-new-index-row="true"]');
+    const row = indexRows?.[indexRows.length - 1];
+    const input = row?.querySelector<HTMLInputElement>("[data-index-name-input]");
+    row?.scrollIntoView({ block: "nearest" });
+    input?.focus();
+    input?.select();
+  });
 }
 
 const availableColumnNames = computed(() =>
@@ -611,11 +627,56 @@ async function applyChanges() {
   }
 }
 
+function addItemForActiveTab(): boolean {
+  if (activeTab.value === "columns" && structureCapabilities.value.addColumn) {
+    void addColumn();
+    return true;
+  }
+  if (activeTab.value === "indexes" && structureCapabilities.value.createIndex) {
+    addIndex();
+    return true;
+  }
+  return false;
+}
+
+function onStructureEditorKeydown(event: KeyboardEvent) {
+  if (isPlainModShortcut(event, "s")) {
+    event.preventDefault();
+    event.stopPropagation();
+    void applyChanges();
+    return;
+  }
+  if (isPlainModShortcut(event, "n")) {
+    event.preventDefault();
+    event.stopPropagation();
+    addItemForActiveTab();
+  }
+}
+
+function registerStructureEditorShortcuts() {
+  if (keydownListenerRegistered) return;
+  keydownListenerRegistered = true;
+  window.addEventListener("keydown", onStructureEditorKeydown);
+}
+
+function unregisterStructureEditorShortcuts() {
+  if (!keydownListenerRegistered) return;
+  keydownListenerRegistered = false;
+  window.removeEventListener("keydown", onStructureEditorKeydown);
+}
+
 onMounted(() => {
   resetState();
+  registerStructureEditorShortcuts();
   void loadStructure();
 });
 
+onActivated(registerStructureEditorShortcuts);
+onDeactivated(unregisterStructureEditorShortcuts);
+onBeforeUnmount(() => {
+  unregisterStructureEditorShortcuts();
+});
+
 watch(
   [isCreateMode, databaseType, () => props.schema, () => props.tableName, newTableName, tableComment, columns, indexes],
   () => {
@@ -684,8 +745,8 @@ watch(
       {{ t("common.loading") }}
     </div>
 
-    <div v-else class="grid min-h-0 flex-1 grid-cols-[minmax(0,1fr)_300px] gap-2 overflow-hidden">
-      <div class="min-h-0 min-w-0 overflow-hidden rounded-md border">
+    <div v-else class="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden">
+      <div class="min-h-0 min-w-0 flex-1 overflow-hidden rounded-md border">
         <Tabs v-model="activeTab" class="flex h-full min-h-0 flex-col">
           <div class="flex shrink-0 items-center justify-between gap-2 border-b px-2 py-[var(--structure-header-py)]">
             <TabsList>
@@ -911,16 +972,15 @@ watch(
                       </template>
                       <!-- PostgreSQL: IDENTITY -->
                       <template v-else-if="databaseType === 'postgres'">
-                        <select
-                          :value="column.extra.identity?.generation ?? ''"
-                          class="h-[var(--structure-control-height)] rounded border bg-background px-[var(--structure-control-px)] text-[length:var(--structure-font-size)]"
-                          @change="
-                            (e) => {
-                              const v = (e.target as HTMLSelectElement).value;
-                              if (v) {
+                        <Select
+                          :model-value="column.extra.identity?.generation ?? 'none'"
+                          @update:model-value="
+                            (value: any) => {
+                              const generation = String(value ?? '');
+                              if (generation && generation !== 'none') {
                                 column.extra.identity = {
                                   ...column.extra.identity,
-                                  generation: v as 'BY DEFAULT' | 'ALWAYS',
+                                  generation: generation as 'BY DEFAULT' | 'ALWAYS',
                                 };
                               } else {
                                 column.extra.identity = undefined;
@@ -928,10 +988,17 @@ watch(
                             }
                           "
                         >
-                          <option value="">{{ t("structureEditor.no") }}</option>
-                          <option value="BY DEFAULT">BY DEFAULT</option>
-                          <option value="ALWAYS">ALWAYS</option>
-                        </select>
+                          <SelectTrigger
+                            class="h-[var(--structure-control-height)] w-28 rounded-md px-[var(--structure-control-px)] text-[length:var(--structure-font-size)]"
+                          >
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="none">{{ t("structureEditor.no") }}</SelectItem>
+                            <SelectItem value="BY DEFAULT">BY DEFAULT</SelectItem>
+                            <SelectItem value="ALWAYS">ALWAYS</SelectItem>
+                          </SelectContent>
+                        </Select>
                         <template v-if="column.extra.identity?.generation">
                           <Input
                             :model-value="column.extra.identity.seed?.toString() ?? ''"
@@ -1081,9 +1148,15 @@ watch(
                   v-for="index in indexes"
                   :key="index.id"
                   :class="index.markedForDrop ? 'bg-destructive/5 opacity-60' : ''"
+                  :data-new-index-row="!index.original ? 'true' : undefined"
                 >
                   <td :class="structureCellClass">
-                    <Input v-model="index.name" :class="structureControlClass" :disabled="!canEditIndexDraft(index)" />
+                    <Input
+                      v-model="index.name"
+                      :class="structureControlClass"
+                      :disabled="!canEditIndexDraft(index)"
+                      data-index-name-input
+                    />
                   </td>
                   <td :class="[structureCellClass, 'overflow-hidden']">
                     <DropdownMenu v-if="canEditIndexDraft(index)">
@@ -1282,7 +1355,7 @@ watch(
         </Tabs>
       </div>
 
-      <div class="flex min-h-0 min-w-0 flex-col overflow-hidden rounded-md border">
+      <div class="flex h-[28%] min-h-40 min-w-0 max-h-64 shrink-0 flex-col overflow-hidden rounded-md border">
         <div
           class="flex shrink-0 items-center justify-between border-b px-[var(--structure-cell-px)] py-[var(--structure-header-py)] text-[length:var(--structure-font-size)] font-medium"
         >
@@ -1302,7 +1375,7 @@ watch(
             <span v-else>{{ pendingStatements.length }}</span>
           </Badge>
         </div>
-        <div class="min-h-0 flex-1 overflow-auto p-2">
+        <div class="min-h-0 flex-1 overflow-auto p-2.5">
           <div v-if="warnings.length" class="mb-2 space-y-1">
             <div
               v-for="warning in warnings"
@@ -1315,7 +1388,7 @@ watch(
           </div>
           <pre
             v-if="pendingStatements.length"
-            class="whitespace-pre-wrap break-words rounded-md bg-muted/40 p-[var(--structure-cell-px)] font-mono text-[length:var(--structure-font-size)] leading-4"
+            class="whitespace-pre-wrap break-words rounded-md bg-muted/40 p-2.5 font-mono text-[calc(var(--structure-font-size)+1px)] leading-5"
             v-html="highlightedSql"
           />
           <div
diff --git a/apps/desktop/src/lib/tableStructureEditorState.ts b/apps/desktop/src/lib/tableStructureEditorState.ts
index 85c68e2b08..75af3af886 100644
--- a/apps/desktop/src/lib/tableStructureEditorState.ts
+++ b/apps/desktop/src/lib/tableStructureEditorState.ts
@@ -297,13 +297,25 @@ export function parseExtraToColumnExtra(extra: string | null | undefined, databa
   } else if (databaseType === "postgres") {
     const identityMatch = lower.match(/generated\s+(by\s+default|always)\s+as\s+identity/i);
     if (identityMatch) {
+      const sequenceMatch = lower.match(/start\s+with\s*(-?\d+)\s+increment\s+by\s*(-?\d+)/i);
       result.identity = {
         generation: identityMatch[1].toUpperCase() === "BY DEFAULT" ? "BY DEFAULT" : "ALWAYS",
       };
+      if (sequenceMatch) {
+        result.identity.seed = Number(sequenceMatch[1]);
+        result.identity.increment = Number(sequenceMatch[2]);
+      }
     }
   } else if (databaseType === "sqlserver") {
     if (lower.includes("identity")) {
       result.autoIncrement = true;
+      const identityMatch = lower.match(/identity\s*\(\s*(-?\d+)\s*,\s*(-?\d+)\s*\)/i);
+      if (identityMatch) {
+        result.identity = {
+          seed: Number(identityMatch[1]),
+          increment: Number(identityMatch[2]),
+        };
+      }
     }
   }
 
diff --git a/crates/dbx-core/src/db/postgres.rs b/crates/dbx-core/src/db/postgres.rs
index 012b682019..80e9323e50 100644
--- a/crates/dbx-core/src/db/postgres.rs
+++ b/crates/dbx-core/src/db/postgres.rs
@@ -885,6 +885,11 @@ pub async fn get_columns(pool: &Pool, schema: &str, table: &str) -> Result<Vec<C
                AND a.attnum = ANY(i.indkey) \
              ) AS is_pk, \
              col_description(a.attrelid, a.attnum) AS column_comment, \
+             CASE a.attidentity \
+               WHEN 'd' THEN 'generated by default as identity' || CASE WHEN pseq.seqstart IS NOT NULL THEN format(' (start with %s increment by %s)', pseq.seqstart, pseq.seqincrement) ELSE '' END \
+               WHEN 'a' THEN 'generated always as identity' || CASE WHEN pseq.seqstart IS NOT NULL THEN format(' (start with %s increment by %s)', pseq.seqstart, pseq.seqincrement) ELSE '' END \
+               ELSE NULL \
+             END AS column_extra, \
              CASE WHEN t.typname = 'numeric' AND a.atttypmod > 0 \
                THEN ((a.atttypmod - 4) >> 16) & 65535 ELSE NULL END AS numeric_precision, \
              CASE WHEN t.typname = 'numeric' AND a.atttypmod > 0 \
@@ -894,6 +899,8 @@ pub async fn get_columns(pool: &Pool, schema: &str, table: &str) -> Result<Vec<C
              FROM pg_attribute a \
              JOIN pg_type t ON t.oid = a.atttypid \
              LEFT JOIN pg_attrdef ad ON ad.adrelid = a.attrelid AND ad.adnum = a.attnum \
+             LEFT JOIN pg_depend dep ON dep.refobjid = a.attrelid AND dep.refobjsubid = a.attnum AND dep.deptype = 'i' \
+             LEFT JOIN pg_sequence pseq ON pseq.seqrelid = dep.objid \
              WHERE a.attrelid = (quote_ident($1) || '.' || quote_ident($2))::regclass \
              AND a.attnum > 0 AND NOT a.attisdropped \
              ORDER BY a.attnum",
@@ -912,11 +919,11 @@ pub async fn get_columns(pool: &Pool, schema: &str, table: &str) -> Result<Vec<C
                 is_nullable: row.get::<_, bool>(2),
                 column_default: row.try_get::<_, Option<String>>(3).ok().flatten(),
                 is_primary_key: row.get::<_, bool>(4),
-                extra: None,
+                extra: row.try_get::<_, Option<String>>(6).ok().flatten(),
                 comment: row.try_get::<_, Option<String>>(5).ok().flatten(),
-                numeric_precision: row.try_get::<_, Option<i32>>(6).ok().flatten(),
-                numeric_scale: row.try_get::<_, Option<i32>>(7).ok().flatten(),
-                character_maximum_length: row.try_get::<_, Option<i32>>(8).ok().flatten(),
+                numeric_precision: row.try_get::<_, Option<i32>>(7).ok().flatten(),
+                numeric_scale: row.try_get::<_, Option<i32>>(8).ok().flatten(),
+                character_maximum_length: row.try_get::<_, Option<i32>>(9).ok().flatten(),
             }
         })
         .collect())
@@ -1430,6 +1437,18 @@ mod tests {
         assert!(sql.contains("FOREIGN TABLE"));
     }
 
+    #[test]
+    fn postgres_column_metadata_reads_identity_extra() {
+        let source = include_str!("postgres.rs");
+        let get_columns = source.split("pub async fn get_columns").nth(1).unwrap();
+        let get_columns = get_columns.split("pub async fn list_indexes").next().unwrap();
+
+        assert!(get_columns.contains("a.attidentity"));
+        assert!(get_columns.contains("pg_sequence"));
+        assert!(get_columns.contains("generated by default as identity"));
+        assert!(get_columns.contains("generated always as identity"));
+    }
+
     #[test]
     fn list_objects_sql_includes_routines() {
         let sql = list_objects_sql(true);
diff --git a/crates/dbx-core/src/db/sqlserver.rs b/crates/dbx-core/src/db/sqlserver.rs
index ced42b6527..ad3990cf59 100644
--- a/crates/dbx-core/src/db/sqlserver.rs
+++ b/crates/dbx-core/src/db/sqlserver.rs
@@ -440,8 +440,8 @@ pub async fn get_columns(client: &mut SqlServerClient, schema: &str, table: &str
                 is_nullable: row.get::<&str, _>(2).unwrap_or("NO") == "YES",
                 column_default: row.get::<&str, _>(3).map(|s| s.to_string()),
                 is_primary_key: row.get::<i32, _>(4).unwrap_or(0) == 1,
-                extra: None,
-                comment: row.get::<&str, _>(9).filter(|s: &&str| !s.is_empty()).map(|s: &str| s.to_string()),
+                extra: row.get::<&str, _>(9).filter(|s: &&str| !s.is_empty()).map(|s: &str| s.to_string()),
+                comment: row.get::<&str, _>(10).filter(|s: &&str| !s.is_empty()).map(|s: &str| s.to_string()),
                 numeric_precision: num_prec,
                 numeric_scale: num_scale,
                 character_maximum_length: max_len,
@@ -457,11 +457,13 @@ fn sqlserver_columns_sql(schema: &str, table: &str) -> String {
         "SELECT c.COLUMN_NAME, c.DATA_TYPE, c.IS_NULLABLE, c.COLUMN_DEFAULT, \
          CASE WHEN kcu.COLUMN_NAME IS NOT NULL THEN 1 ELSE 0 END AS IS_PK, \
          c.NUMERIC_PRECISION, c.NUMERIC_SCALE, c.CHARACTER_MAXIMUM_LENGTH, c.DATETIME_PRECISION, \
+         ident.extra AS COLUMN_EXTRA, \
          ep.value AS COLUMN_COMMENT \
          FROM INFORMATION_SCHEMA.COLUMNS c \
          LEFT JOIN INFORMATION_SCHEMA.KEY_COLUMN_USAGE kcu \
            ON c.TABLE_SCHEMA = kcu.TABLE_SCHEMA AND c.TABLE_NAME = kcu.TABLE_NAME AND c.COLUMN_NAME = kcu.COLUMN_NAME \
            AND kcu.CONSTRAINT_NAME IN (SELECT CONSTRAINT_NAME FROM INFORMATION_SCHEMA.TABLE_CONSTRAINTS WHERE CONSTRAINT_TYPE = 'PRIMARY KEY' AND TABLE_SCHEMA = '{s}' AND TABLE_NAME = '{t}') \
+         OUTER APPLY (SELECT 'identity(' + CONVERT(VARCHAR(38), ic.seed_value) + ',' + CONVERT(VARCHAR(38), ic.increment_value) + ')' AS extra FROM sys.identity_columns ic WHERE ic.object_id = OBJECT_ID(QUOTENAME('{s}') + '.' + QUOTENAME('{t}')) AND ic.name = c.COLUMN_NAME) ident \
          OUTER APPLY (SELECT CAST(ep.value AS NVARCHAR(MAX)) AS value FROM sys.extended_properties ep WHERE ep.major_id = OBJECT_ID(QUOTENAME('{s}') + '.' + QUOTENAME('{t}')) AND ep.minor_id = COLUMNPROPERTY(OBJECT_ID(QUOTENAME('{s}') + '.' + QUOTENAME('{t}')), c.COLUMN_NAME, 'ColumnId') AND ep.name = N'MS_Description') ep \
          WHERE c.TABLE_SCHEMA = '{s}' AND c.TABLE_NAME = '{t}' \
          ORDER BY c.ORDINAL_POSITION"
@@ -805,6 +807,7 @@ mod tests {
 
         assert!(columns_sql.contains("TABLE_SCHEMA = 'd''bo'"));
         assert!(columns_sql.contains("TABLE_NAME = 't''able'"));
+        assert!(columns_sql.contains("sys.identity_columns"));
         assert!(indexes_sql.contains("OBJECT_ID('d''bo.t''able')"));
     }
 
diff --git a/packages/app-tests/tableStructureEditorState.test.ts b/packages/app-tests/tableStructureEditorState.test.ts
index 324e0f2c28..735cf381c8 100644
--- a/packages/app-tests/tableStructureEditorState.test.ts
+++ b/packages/app-tests/tableStructureEditorState.test.ts
@@ -106,6 +106,20 @@ test("parses PostgreSQL extra string to ColumnExtra", () => {
   assert.deepEqual(parseExtraToColumnExtra("GENERATED ALWAYS AS IDENTITY", "postgres"), {
     identity: { generation: "ALWAYS" },
   });
+  assert.deepEqual(parseExtraToColumnExtra("generated always as identity (start with 10 increment by 2)", "postgres"), {
+    identity: { generation: "ALWAYS", seed: 10, increment: 2 },
+  });
+});
+
+test("parses SQL Server identity extra string to ColumnExtra", () => {
+  assert.deepEqual(parseExtraToColumnExtra("identity(1,1)", "sqlserver"), {
+    autoIncrement: true,
+    identity: { seed: 1, increment: 1 },
+  });
+  assert.deepEqual(parseExtraToColumnExtra("IDENTITY(100, 5)", "sqlserver"), {
+    autoIncrement: true,
+    identity: { seed: 100, increment: 5 },
+  });
 });
 
 test("creates editable index drafts and splits pasted column lists", () => {