+ {/* 顶部编辑工具栏 */}
+
+
+
+ SQL 编辑器
+
+
+
+ {/* 快速模板 */}
+
+ 快速模板:
+
+
+
+ {/* 控制按钮 */}
+
+
+
+
+
+
+
+ {/* 上半区：编辑器输入框 */}
+
+ setSqlQuery(value)}
+ className="h-full text-xs font-mono"
+ basicSetup={{
+ lineNumbers: true,
+ foldGutter: true,
+ dropCursor: true,
+ allowMultipleSelections: false,
+ indentOnInput: true,
+ }}
+ />
+
+
+ {/* 拖动分割线 */}
+
+
+ {/* 下半区：查看结果 (可滑动查看) */}
+
+ {/* 结果栏工具提示 */}
+
+ 执行输出
+ {sqlResult && (
+
+ 类型: {sqlResult.type.toUpperCase()} | 耗时: {sqlResult.execution_time_ms} ms
+
+ )}
+
+
+ {/* 滚动结果内容 */}
+
+ {executingSQL && (
+
+
+ 正在在数据库执行查询，请稍候...
+
+ )}
+
+ {sqlError && (
+
+
SQL 执行报错 (Error):
+
{sqlError}
+
+ )}
+
+ {sqlResult && (
+
+ {sqlResult.type === "select" && sqlResult.columns && sqlResult.columns.length > 0 && (
+
+
+
+
+ {sqlResult.columns.map((col) => (
+ {col}
+ ))}
+
+
+
+ {sqlResult.results && sqlResult.results.length > 0 ? (
+ sqlResult.results.map((row, rIndex) => (
+
+ {sqlResult.columns!.map((col) => (
+
+
+ {formatCellValue(row[col])}
+
+
+ ))}
+
+ ))
+ ) : (
+
+
+ 查询结果为空
+
+
+ )}
+
+
+
+ )}
+
+ {sqlResult.type === "exec" && (
+
+
SQL 执行成功
+
+ 受影响行数: {sqlResult.affected_rows} 行，耗时 {sqlResult.execution_time_ms} 毫秒。
+
+
+ )}
+
+ )}
+
+ {!executingSQL && !sqlResult && !sqlError && (
+
+
+ 编辑器就绪，请在上方编写 SQL 并运行查看结果
+
+ )}
+
+
+