From 03bea705e74d6f4226771c704a99734e1be46e2b Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 11 May 2026 11:45:05 +0800
Subject: [PATCH] feat(objects): edit database object source

---
 src/App.vue                              |  20 ++++
 src/components/layout/ContentArea.vue    |   2 +
 src/components/objects/ObjectBrowser.vue | 134 +++++++++++++++++++++--
 src/i18n/locales/en.ts                   |   1 +
 src/i18n/locales/zh-CN.ts                |   1 +
 src/lib/api.ts                           |   1 +
 src/lib/http.ts                          |  14 +++
 src/lib/objectSourceEditor.ts            |  42 +++++++
 src/lib/tauri.ts                         |  12 ++
 src/types/database.ts                    |   9 ++
 tests/objectSourceEditor.test.ts         |  44 ++++++++
 11 files changed, 272 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/objectSourceEditor.ts
 create mode 100644 tests/objectSourceEditor.test.ts

diff --git a/src/App.vue b/src/App.vue
index 68f7ba5a5..3be4fe3ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -319,6 +319,25 @@ async function onClickTable(tableName: string) {
   }
 }
 
+function openObjectSourceEditor(target: { title: string; sql: string; schema?: string }) {
+  const tab = activeTab.value;
+  if (!tab) return;
+  const existing = queryStore.tabs.find(
+    (item) =>
+      item.mode === "query" &&
+      item.connectionId === tab.connectionId &&
+      item.database === tab.database &&
+      item.title === target.title,
+  );
+  if (existing) {
+    queryStore.activeTabId = existing.id;
+    return;
+  }
+  const tabId = queryStore.createTab(tab.connectionId, tab.database, target.title);
+  if (target.schema) queryStore.updateSchema(tabId, target.schema);
+  queryStore.updateSql(tabId, target.sql);
+}
+
 async function changeActiveConnection(connectionId: string) {
   const tab = activeTab.value;
   if (!tab) return;
@@ -640,6 +659,7 @@ onUnmounted(() => {
                         tableName: target.tableName,
                       })
                   "
+                  @edit-object-source="openObjectSourceEditor"
                   @object-schema-change="(schema) => activeTab && queryStore.updateSchema(activeTab.id, schema)"
                 />
               </div>
diff --git a/src/components/layout/ContentArea.vue b/src/components/layout/ContentArea.vue
index 282fc0c36..690654051 100644
--- a/src/components/layout/ContentArea.vue
+++ b/src/components/layout/ContentArea.vue
@@ -46,6 +46,7 @@ const emit = defineEmits<{
   executeSql: [sql: string];
   clickTable: [tableName: string];
   openObjectTable: [target: { tableName: string; schema?: string }];
+  editObjectSource: [target: { title: string; sql: string; schema?: string }];
   objectSchemaChange: [schema: string | undefined];
 }>();
 
@@ -442,6 +443,7 @@ function onHandleCloseColumnPanel() {
         :database="activeTab.database"
         :schema="activeTab.objectBrowser?.schema"
         @open-table="emit('openObjectTable', $event)"
+        @edit-source="emit('editObjectSource', $event)"
         @schema-change="emit('objectSchemaChange', $event)"
       />
     </template>
diff --git a/src/components/objects/ObjectBrowser.vue b/src/components/objects/ObjectBrowser.vue
index 478c004c3..492f965fc 100644
--- a/src/components/objects/ObjectBrowser.vue
+++ b/src/components/objects/ObjectBrowser.vue
@@ -1,14 +1,29 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { RecycleScroller } from "vue-virtual-scroller";
-import { Braces, Eye, Loader2, RefreshCw, Search, ScrollText, Table2 } from "lucide-vue-next";
+import {
+  Braces,
+  Code2,
+  Copy,
+  Eye,
+  Loader2,
+  PencilLine,
+  RefreshCw,
+  Search,
+  ScrollText,
+  Table2,
+  WrapText,
+  X,
+} from "lucide-vue-next";
 import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import * as api from "@/lib/api";
-import type { ConnectionConfig, ObjectInfo } from "@/types/database";
+import type { ConnectionConfig, ObjectInfo, ObjectSourceKind } from "@/types/database";
 import { isSchemaAware } from "@/lib/databaseCapabilities";
+import { useToast } from "@/composables/useToast";
+import { buildEditableObjectSourceSql, objectSourceEditTabTitle } from "@/lib/objectSourceEditor";
 
 type ObjectRow = {
   id: string;
@@ -29,9 +44,11 @@ const props = defineProps<{
 const emit = defineEmits<{
   openTable: [target: { tableName: string; schema?: string }];
   schemaChange: [schema: string | undefined];
+  editSource: [target: { title: string; sql: string; schema?: string }];
 }>();
 
 const { t } = useI18n();
+const { toast } = useToast();
 
 const schemas = ref<string[]>([]);
 const selectedSchema = ref<string | undefined>(props.schema);
@@ -40,6 +57,11 @@ const search = ref("");
 const objectFilter = ref<ObjectFilter>("all");
 const loadingSchemas = ref(false);
 const loadingObjects = ref(false);
+const sourceLoading = ref(false);
+const sourceContent = ref("");
+const sourceError = ref("");
+const sourceRow = ref<ObjectRow | null>(null);
+const sourceWrap = ref(false);
 const error = ref("");
 let loadId = 0;
 
@@ -112,13 +134,73 @@ function iconClass(type: ObjectRow["type"]) {
   return "text-green-500";
 }
 
-function canOpen(row: ObjectRow) {
-  return row.type === "TABLE" || row.type === "VIEW";
+function canOpenSource(row: ObjectRow) {
+  return row.type === "VIEW" || row.type === "PROCEDURE" || row.type === "FUNCTION";
+}
+
+function sourceTitle(row: ObjectRow | null) {
+  if (!row) return t("objects.source");
+  return `${row.name} ${t("objects.source")}`;
 }
 
 function openRow(row: ObjectRow) {
-  if (!canOpen(row)) return;
-  emit("openTable", { tableName: row.name, schema: row.schema });
+  if (row.type === "TABLE") {
+    emit("openTable", { tableName: row.name, schema: row.schema });
+    return;
+  }
+  if (canOpenSource(row)) {
+    void openSource(row);
+  }
+}
+
+async function openSource(row: ObjectRow) {
+  sourceRow.value = row;
+  sourceContent.value = "";
+  sourceError.value = "";
+  sourceLoading.value = true;
+  try {
+    const result = await api.getObjectSource(
+      props.connection.id,
+      props.database,
+      row.schema || selectedSchema.value || props.database,
+      row.name,
+      row.type as ObjectSourceKind,
+    );
+    sourceContent.value = result.source;
+  } catch (e: any) {
+    sourceError.value = e?.message || String(e);
+  } finally {
+    sourceLoading.value = false;
+  }
+}
+
+function closeSource() {
+  sourceRow.value = null;
+  sourceContent.value = "";
+  sourceError.value = "";
+}
+
+function copySource() {
+  if (!sourceContent.value) return;
+  navigator.clipboard.writeText(sourceContent.value);
+  toast(t("grid.copied"));
+}
+
+function editSource() {
+  if (!sourceRow.value || !sourceContent.value) return;
+  const row = sourceRow.value;
+  const schema = row.schema || selectedSchema.value;
+  emit("editSource", {
+    title: objectSourceEditTabTitle(schema, row.name),
+    schema,
+    sql: buildEditableObjectSourceSql({
+      databaseType: props.connection.db_type,
+      objectType: row.type as ObjectSourceKind,
+      schema,
+      name: row.name,
+      source: sourceContent.value,
+    }),
+  });
 }
 
 async function loadSchemas() {
@@ -275,11 +357,11 @@ watch(
         <div class="truncate">{{ t("objects.schemaColumn") }}</div>
         <div v-if="hasComments" class="truncate">{{ t("objects.comment") }}</div>
       </div>
-      <RecycleScroller class="flex-1 min-h-0" :items="filteredRows" :item-size="38" key-field="id">
+      <RecycleScroller class="min-h-0 flex-1" :items="filteredRows" :item-size="38" key-field="id">
         <template #default="{ item }">
           <div
             class="grid h-[38px] cursor-pointer items-center gap-3 border-b px-3 hover:bg-accent/50"
-            :class="{ 'cursor-default hover:bg-transparent': !canOpen(item) }"
+            :class="{ 'bg-accent/40': sourceRow?.id === item.id }"
             :style="{ gridTemplateColumns }"
             @click="openRow(item)"
           >
@@ -295,6 +377,42 @@ watch(
           </div>
         </template>
       </RecycleScroller>
+      <div v-if="sourceRow" class="flex h-[42%] min-h-44 shrink-0 flex-col border-t bg-background">
+        <div class="flex h-8 shrink-0 items-center gap-2 border-b bg-muted/20 px-3">
+          <Code2 class="h-3.5 w-3.5 text-muted-foreground" />
+          <span class="min-w-0 flex-1 truncate text-xs font-medium">{{ sourceTitle(sourceRow) }}</span>
+          <Button variant="ghost" size="icon" class="h-5 w-5" :disabled="!sourceContent" @click="copySource">
+            <Copy class="h-3 w-3" />
+          </Button>
+          <Button variant="ghost" size="icon" class="h-5 w-5" :disabled="!sourceContent" @click="editSource">
+            <PencilLine class="h-3 w-3" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            class="h-5 w-5"
+            :class="{ 'bg-accent': sourceWrap }"
+            @click="sourceWrap = !sourceWrap"
+          >
+            <WrapText class="h-3 w-3" />
+          </Button>
+          <Button variant="ghost" size="icon" class="h-5 w-5" @click="closeSource">
+            <X class="h-3 w-3" />
+          </Button>
+        </div>
+        <div v-if="sourceLoading" class="flex flex-1 items-center justify-center">
+          <Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
+        </div>
+        <div v-else-if="sourceError" class="flex flex-1 items-center justify-center px-4 text-sm text-destructive">
+          {{ sourceError }}
+        </div>
+        <pre
+          v-else
+          class="min-w-0 flex-1 overflow-auto p-3 font-mono text-xs leading-5"
+          :class="sourceWrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre'"
+          >{{ sourceContent }}</pre
+        >
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index f542c11ab..9afea2a63 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -566,6 +566,7 @@ export default {
     function: "Function",
     name: "Name",
     type: "Type",
+    source: "Source",
     schemaColumn: "Schema",
     comment: "Comment",
     loadingSchemas: "Loading schemas...",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index e3d517359..2062e405a 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -553,6 +553,7 @@ export default {
     function: "函数",
     name: "名称",
     type: "类型",
+    source: "源代码",
     schemaColumn: "Schema",
     comment: "注释",
     loadingSchemas: "加载 Schema...",
diff --git a/src/lib/api.ts b/src/lib/api.ts
index ab54fb36d..ad7dadfa4 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -57,6 +57,7 @@ export const deleteSchemaCachePrefix = forward("deleteSchemaCachePrefix");
 export const listSchemas = forward("listSchemas");
 export const listTables = forward("listTables");
 export const listObjects = forward("listObjects");
+export const getObjectSource = forward("getObjectSource");
 export const getColumns = forward("getColumns");
 export const listIndexes = forward("listIndexes");
 export const listForeignKeys = forward("listForeignKeys");
diff --git a/src/lib/http.ts b/src/lib/http.ts
index 90a4467a0..cc0a84759 100644
--- a/src/lib/http.ts
+++ b/src/lib/http.ts
@@ -3,6 +3,8 @@ import type {
   DatabaseInfo,
   TableInfo,
   ObjectInfo,
+  ObjectSource,
+  ObjectSourceKind,
   ColumnInfo,
   IndexInfo,
   ForeignKeyInfo,
@@ -175,6 +177,18 @@ export async function listObjects(connectionId: string, database: string, schema
   return get(`/api/schema/objects?${qs({ connection_id: connectionId, database, schema })}`);
 }
 
+export async function getObjectSource(
+  connectionId: string,
+  database: string,
+  schema: string,
+  name: string,
+  objectType: ObjectSourceKind,
+): Promise<ObjectSource> {
+  return get(
+    `/api/schema/object-source?${qs({ connection_id: connectionId, database, schema, table: name, object_type: objectType })}`,
+  );
+}
+
 export async function getColumns(
   connectionId: string,
   database: string,
diff --git a/src/lib/objectSourceEditor.ts b/src/lib/objectSourceEditor.ts
new file mode 100644
index 000000000..62d95409a
--- /dev/null
+++ b/src/lib/objectSourceEditor.ts
@@ -0,0 +1,42 @@
+import type { DatabaseType, ObjectSourceKind } from "@/types/database";
+
+type BuildEditableObjectSourceSqlInput = {
+  databaseType: DatabaseType;
+  objectType: ObjectSourceKind;
+  schema?: string | null;
+  name: string;
+  source: string;
+};
+
+function quotePostgresIdentifier(value: string) {
+  return `"${value.replaceAll('"', '""')}"`;
+}
+
+function ensureSemicolon(sql: string) {
+  const trimmed = sql.trim();
+  return trimmed.endsWith(";") ? trimmed : `${trimmed};`;
+}
+
+function postgresQualifiedName(schema: string | null | undefined, name: string) {
+  return [schema, name]
+    .filter(Boolean)
+    .map((part) => quotePostgresIdentifier(part as string))
+    .join(".");
+}
+
+export function objectSourceEditTabTitle(schema: string | null | undefined, name: string) {
+  return `Edit source - ${[schema, name].filter(Boolean).join(".")}`;
+}
+
+export function buildEditableObjectSourceSql(input: BuildEditableObjectSourceSqlInput) {
+  const source = input.source.trim();
+  if (input.databaseType === "sqlserver") {
+    return source.replace(/^CREATE\s+(?!OR\s+ALTER\b)/i, "CREATE OR ALTER ");
+  }
+
+  if ((input.databaseType === "postgres" || input.databaseType === "gaussdb") && input.objectType === "VIEW") {
+    return `CREATE OR REPLACE VIEW ${postgresQualifiedName(input.schema, input.name)} AS\n${ensureSemicolon(source)}`;
+  }
+
+  return ensureSemicolon(source);
+}
diff --git a/src/lib/tauri.ts b/src/lib/tauri.ts
index 45e024428..0ef476b1d 100644
--- a/src/lib/tauri.ts
+++ b/src/lib/tauri.ts
@@ -5,6 +5,8 @@ import type {
   DatabaseInfo,
   TableInfo,
   ObjectInfo,
+  ObjectSource,
+  ObjectSourceKind,
   ColumnInfo,
   IndexInfo,
   ForeignKeyInfo,
@@ -144,6 +146,16 @@ export async function listObjects(connectionId: string, database: string, schema
   return invoke("list_objects", { connectionId, database, schema });
 }
 
+export async function getObjectSource(
+  connectionId: string,
+  database: string,
+  schema: string,
+  name: string,
+  objectType: ObjectSourceKind,
+): Promise<ObjectSource> {
+  return invoke("get_object_source", { connectionId, database, schema, name, objectType });
+}
+
 export async function listSchemas(connectionId: string, database: string): Promise<string[]> {
   return invoke("list_schemas", { connectionId, database });
 }
diff --git a/src/types/database.ts b/src/types/database.ts
index c1d0bbb2b..63b789206 100644
--- a/src/types/database.ts
+++ b/src/types/database.ts
@@ -100,6 +100,15 @@ export interface ObjectInfo {
   comment?: string | null;
 }
 
+export type ObjectSourceKind = "VIEW" | "PROCEDURE" | "FUNCTION";
+
+export interface ObjectSource {
+  name: string;
+  object_type: ObjectSourceKind;
+  schema?: string | null;
+  source: string;
+}
+
 export interface ColumnInfo {
   name: string;
   data_type: string;
diff --git a/tests/objectSourceEditor.test.ts b/tests/objectSourceEditor.test.ts
new file mode 100644
index 000000000..774a425cf
--- /dev/null
+++ b/tests/objectSourceEditor.test.ts
@@ -0,0 +1,44 @@
+import { strict as assert } from "node:assert";
+import test from "node:test";
+import { buildEditableObjectSourceSql, objectSourceEditTabTitle } from "../src/lib/objectSourceEditor.ts";
+
+test("SQL Server object source opens as CREATE OR ALTER", () => {
+  const sql = buildEditableObjectSourceSql({
+    databaseType: "sqlserver",
+    objectType: "PROCEDURE",
+    schema: "dbo",
+    name: "usp_demo",
+    source: "CREATE PROCEDURE dbo.usp_demo AS SELECT 1;",
+  });
+
+  assert.equal(sql, "CREATE OR ALTER PROCEDURE dbo.usp_demo AS SELECT 1;");
+});
+
+test("SQL Server existing CREATE OR ALTER source is preserved", () => {
+  const sql = buildEditableObjectSourceSql({
+    databaseType: "sqlserver",
+    objectType: "VIEW",
+    schema: "dbo",
+    name: "vw_demo",
+    source: "CREATE OR ALTER VIEW dbo.vw_demo AS SELECT 1 AS id;",
+  });
+
+  assert.equal(sql, "CREATE OR ALTER VIEW dbo.vw_demo AS SELECT 1 AS id;");
+});
+
+test("Postgres view body opens as CREATE OR REPLACE VIEW", () => {
+  const sql = buildEditableObjectSourceSql({
+    databaseType: "postgres",
+    objectType: "VIEW",
+    schema: "public",
+    name: "active users",
+    source: " SELECT id, name FROM users WHERE active ",
+  });
+
+  assert.equal(sql, 'CREATE OR REPLACE VIEW "public"."active users" AS\nSELECT id, name FROM users WHERE active;');
+});
+
+test("object source edit tab title is stable per schema and object", () => {
+  assert.equal(objectSourceEditTabTitle("dbo", "usp_demo"), "Edit source - dbo.usp_demo");
+  assert.equal(objectSourceEditTabTitle(undefined, "usp_demo"), "Edit source - usp_demo");
+});