From 41e23cccc370bddf9582d58bbed39ad3e7189fc4 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sat, 30 May 2026 11:22:17 +0800
Subject: [PATCH] feat(desktop): improve sql file preview

---
 .../sql-file/SqlFileExecutionDialog.vue       | 38 +++++++++++++++----
 apps/desktop/src/i18n/locales/en.ts           |  2 +
 apps/desktop/src/i18n/locales/es.ts           |  2 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |  2 +
 crates/dbx-web/src/routes/sql_file.rs         |  2 +-
 src-tauri/src/commands/sql_file.rs            |  2 +-
 6 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue b/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue
index 1957b10f2b..25003f4152 100644
--- a/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue
+++ b/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue
@@ -97,6 +97,17 @@ const progressPercent = computed(() => {
   if (current <= 0) return running.value ? 8 : 0;
   return Math.min(95, Math.max(8, Math.round((attempted / current) * 100)));
 });
+const previewLineCount = computed(() => preview.value?.preview.split(/\r\n|\r|\n/).length ?? 0);
+const previewLineNumbers = computed(() => Array.from({ length: previewLineCount.value }, (_, index) => index + 1));
+const previewIsTruncated = computed(() => {
+  if (!preview.value) return false;
+  return preview.value.sizeBytes > preview.value.preview.length;
+});
+const previewLineSummary = computed(() =>
+  previewIsTruncated.value
+    ? t("sqlFile.previewingFirstLines", { count: previewLineCount.value })
+    : t("sqlFile.previewingLines", { count: previewLineCount.value }),
+);
 
 function connectionIconType(id: string) {
   const config = store.getConfig(id);
@@ -393,7 +404,7 @@ watch(
 
 <template>
   <Dialog :open="open" @update:open="handleOpenChange">
-    <DialogScrollContent class="sm:max-w-[620px] min-w-0 overflow-hidden" :trap-focus="false" @interact-outside.prevent>
+    <DialogScrollContent class="sm:max-w-[860px] min-w-0 overflow-hidden" :trap-focus="false" @interact-outside.prevent>
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <FileCode class="w-4 h-4" />
@@ -428,18 +439,31 @@ watch(
             </Button>
           </div>
 
-          <div v-if="preview" class="min-w-0 max-w-full border rounded-md overflow-hidden">
+          <div v-if="preview" class="min-w-0 max-w-full overflow-hidden rounded-md border">
             <div class="flex items-center justify-between gap-3 px-3 py-2 text-xs border-b bg-muted/40">
               <div class="min-w-0 flex items-center gap-2">
                 <FileCode class="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                 <span class="font-medium truncate">{{ preview.fileName }}</span>
               </div>
-              <span class="text-muted-foreground shrink-0">{{ formatBytes(preview.sizeBytes) }}</span>
+              <div class="flex shrink-0 items-center gap-2 text-muted-foreground">
+                <span>{{ previewLineSummary }}</span>
+                <span class="h-3 w-px bg-border" />
+                <span>{{ formatBytes(preview.sizeBytes) }}</span>
+              </div>
+            </div>
+            <div
+              class="sql-file-preview-viewer flex min-h-56 max-h-[min(42vh,360px)] max-w-full overflow-auto bg-muted/15 text-xs"
+            >
+              <div
+                class="sticky left-0 z-10 select-none border-r bg-background/95 px-2 py-3 text-right font-mono leading-5 text-muted-foreground/70"
+              >
+                <div v-for="lineNumber in previewLineNumbers" :key="lineNumber">{{ lineNumber }}</div>
+              </div>
+              <pre
+                class="min-w-max flex-1 p-3 font-mono leading-5 whitespace-pre"
+                v-html="highlight(preview.preview)"
+              ></pre>
             </div>
-            <pre
-              class="max-h-40 max-w-full overflow-auto p-3 text-xs font-mono whitespace-pre bg-muted/15"
-              v-html="highlight(preview.preview)"
-            ></pre>
           </div>
         </div>
 
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 6a962e6730..bcb331269c 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -1292,6 +1292,8 @@ export default {
     file: "File",
     selectSqlFile: "Select SQL file",
     browse: "Browse",
+    previewingLines: "Previewing {count} lines",
+    previewingFirstLines: "Previewing first {count} lines",
     target: "Target",
     connection: "Connection",
     selectConnection: "Select connection",
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index fa9eadb67c..26427901d6 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -1184,6 +1184,8 @@ export default {
     file: "Archivo",
     selectSqlFile: "Seleccionar archivo SQL",
     browse: "Examinar",
+    previewingLines: "Vista previa de {count} líneas",
+    previewingFirstLines: "Vista previa de las primeras {count} líneas",
     target: "Destino",
     connection: "Conexión",
     selectConnection: "Seleccionar conexión",
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index cefe7bb530..b1bedbeb86 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -1268,6 +1268,8 @@ export default {
     file: "文件",
     selectSqlFile: "选择 SQL 文件",
     browse: "浏览",
+    previewingLines: "预览 {count} 行",
+    previewingFirstLines: "预览前 {count} 行",
     target: "目标",
     connection: "连接",
     selectConnection: "选择连接",
diff --git a/crates/dbx-web/src/routes/sql_file.rs b/crates/dbx-web/src/routes/sql_file.rs
index 3874de37b2..d1d6d5e64a 100644
--- a/crates/dbx-web/src/routes/sql_file.rs
+++ b/crates/dbx-web/src/routes/sql_file.rs
@@ -51,7 +51,7 @@ pub async fn preview_sql_file(
 
         let size_bytes = data.len() as u64;
         let content = sql::decode_sql_file_bytes(&data).map_err(AppError)?;
-        let preview: String = content.chars().take(5000).collect();
+        let preview: String = content.chars().take(20_000).collect();
 
         return Ok(Json(serde_json::json!({
             "fileName": file_name,
diff --git a/src-tauri/src/commands/sql_file.rs b/src-tauri/src/commands/sql_file.rs
index 62b3850aa7..614c2b2693 100644
--- a/src-tauri/src/commands/sql_file.rs
+++ b/src-tauri/src/commands/sql_file.rs
@@ -46,7 +46,7 @@ pub async fn preview_sql_file(file_path: String) -> Result<SqlFilePreview, Strin
     let path = PathBuf::from(&file_path);
     let metadata = tokio::fs::metadata(&path).await.map_err(|e| e.to_string())?;
     let bytes = tokio::fs::read(&path).await.map_err(|e| e.to_string())?;
-    let preview = decode_sql_file_bytes(&bytes)?.chars().take(5000).collect();
+    let preview = decode_sql_file_bytes(&bytes)?.chars().take(20_000).collect();
 
     Ok(SqlFilePreview {
         file_name: path.file_name().and_then(|name| name.to_str()).unwrap_or("script.sql").to_string(),