From 1db641bca9cc96e0c61cd436c2fc9026b0946300 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Mon, 6 Jul 2026 11:10:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(sql-console):=20SqlConsoleTab=20?=
 =?UTF-8?q?=E6=94=B9=E7=94=A8=20SqlResultTable=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

删除调用方对 Vec<Vec<Value>> → Vec<Vec<String>> 的预处理（保留类型
信息），结果表格段替换为 <SqlResultTable>，空结果集分支保留。
---
 src/components/sql_result_table.rs |  2 +-
 src/pages/admin/system.rs          | 56 +++++-------------------------
 2 files changed, 9 insertions(+), 49 deletions(-)

diff --git a/src/components/sql_result_table.rs b/src/components/sql_result_table.rs
index c90ef6b..cbf8dc4 100644
--- a/src/components/sql_result_table.rs
+++ b/src/components/sql_result_table.rs
@@ -10,7 +10,7 @@ use dioxus::prelude::*;
 use crate::api::database::sql_console::SqlResult;
 use crate::components::ui::ADMIN_TABLE_CLASS;
 
-/// 一行展开详情区中 `<pre>` 的最大高度（超出纵向滚动，避免大 jsonb 撑爆页面）。
+/// 一行展开详情区容器的最大高度（超出纵向滚动，避免大 jsonb 撑爆页面）。
 const EXPAND_MAX_HEIGHT_CLASS: &str = "max-h-80";
 /// 文本单元格的列宽上限（Tailwind 任意值，约束长文本不无限拉伸）。
 const TEXT_CELL_MAX_WIDTH_CLASS: &str = "max-w-[24rem]";
diff --git a/src/pages/admin/system.rs b/src/pages/admin/system.rs
index b2ee277..ada7c57 100644
--- a/src/pages/admin/system.rs
+++ b/src/pages/admin/system.rs
@@ -682,6 +682,7 @@ fn SqlConsoleTab() -> Element {
     use crate::api::database::sql_console::{execute_sql, ExecuteSqlOpts};
     #[cfg(target_arch = "wasm32")]
     use crate::api::database::schema::get_db_schema;
+    use crate::components::sql_result_table::SqlResultTable;
     use crate::components::ui::ADMIN_TABLE_CLASS;
     #[cfg(target_arch = "wasm32")]
     use crate::codemirror_bridge;
@@ -874,28 +875,6 @@ fn SqlConsoleTab() -> Element {
         .map(|r| r.statement_type.clone())
         .unwrap_or_default();
     let truncated = current_result.as_ref().map(|r| r.truncated).unwrap_or(false);
-    // 结果行预格式化（避免在 rsx for 循环体内格式化）
-    let result_rows: Vec<Vec<String>> = current_result
-        .as_ref()
-        .map(|r| {
-            r.rows
-                .iter()
-                .map(|row| {
-                    row.iter()
-                        .map(|cell| match cell {
-                            serde_json::Value::Null => "NULL".to_string(),
-                            serde_json::Value::String(s) => s.clone(),
-                            other => other.to_string(),
-                        })
-                        .collect()
-                })
-                .collect()
-        })
-        .unwrap_or_default();
-    let result_columns: Vec<String> = current_result
-        .as_ref()
-        .map(|r| r.columns.clone())
-        .unwrap_or_default();
     let explain = current_result.as_ref().and_then(|r| r.explain.clone());
 
     rsx! {
@@ -989,34 +968,15 @@ fn SqlConsoleTab() -> Element {
             }
 
             // 结果表格
-            if !result_rows.is_empty() {
-                div { class: "{ADMIN_TABLE_CLASS}",
-                    div { class: "overflow-x-auto",
-                        table { class: "w-full text-sm",
-                            thead {
-                                tr { class: "border-b border-paper-border text-left text-paper-secondary",
-                                    for col in result_columns.iter() {
-                                        th { class: "px-4 py-2 font-medium whitespace-nowrap", "{col}" }
-                                    }
-                                }
-                            }
-                            tbody {
-                                for row in result_rows.iter() {
-                                    tr { class: "border-b border-paper-border last:border-0 hover:bg-paper-entry transition-colors",
-                                        for cell in row.iter() {
-                                            td { class: "px-4 py-2 font-mono text-xs text-paper-secondary", "{cell}" }
-                                        }
-                                    }
-                                }
-                            }
-                        }
+            if let Some(res) = &current_result {
+                if !res.rows.is_empty() {
+                    SqlResultTable { result: res.clone() }
+                } else if res.statement_type.to_uppercase().contains("SELECT") {
+                    // 有结果但无行：SELECT 返回空集的友好提示
+                    div { class: "{ADMIN_TABLE_CLASS} px-4 py-8 text-center text-sm text-[var(--color-paper-tertiary)]",
+                        "查询成功，无返回行"
                     }
                 }
-            } else if current_result.is_some() && stmt_type.to_uppercase().contains("SELECT") {
-                // 有结果但无行：SELECT 返回空集的友好提示
-                div { class: "{ADMIN_TABLE_CLASS} px-4 py-8 text-center text-sm text-[var(--color-paper-tertiary)]",
-                    "查询成功，无返回行"
-                }
             }
 
             // EXPLAIN 输出