prettier

2026-10-05 23:26:38 +08:00 · 2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
@@ -1,182 +1,210 @@
-"use client"
+'use client';

-import * as React from "react"
-import {useRef, useState} from "react"
-import {useTheme} from "next-themes"
-import CodeMirror from "@uiw/react-codemirror"
-import {sql} from "@codemirror/lang-sql"
-import {toast} from "sonner"
-import {ArrowLeft, Play, RefreshCw, Terminal, Trash2,} from "lucide-react"
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { useTheme } from 'next-themes';
+import CodeMirror from '@uiw/react-codemirror';
+import { sql } from '@codemirror/lang-sql';
+import { toast } from 'sonner';
+import { ArrowLeft, Play, RefreshCw, Terminal, Trash2 } from 'lucide-react';

-import {Button} from "@/components/ui/button"
-import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"
-import type {ExecuteSQLResponse} from "@/lib/services/db-manage"
-import {DbManageService} from "@/lib/services/db-manage"
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { ExecuteSQLResponse } from '@/lib/services/db-manage';
+import { DbManageService } from '@/lib/services/db-manage';

 /**
 * 格式化表格单元格内容
 */
 const formatCellValue = (val: unknown): string => {
-  if (val === null || val === undefined) return "-"
-  if (typeof val === "boolean") return val ? "true" : "false"
-  if (typeof val === "object") {
+  if (val === null || val === undefined) return '-';
+  if (typeof val === 'boolean') return val ? 'true' : 'false';
+  if (typeof val === 'object') {
    try {
-      return JSON.stringify(val)
+      return JSON.stringify(val);
    } catch {
-      return "[Object]"
+      return '[Object]';
    }
  }
-  return String(val)
-}
+  return String(val);
+};

 interface SQLConsoleProps {
-  dbType?: string // "postgres" | "sqlite"
-  onClose: () => void
+  dbType?: string; // "postgres" | "sqlite"
+  onClose: () => void;
 }

 export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
  // SQL 控制台状态
-  const [sqlQuery, setSqlQuery] = useState<string>("")
-  const [executingSQL, setExecutingSQL] = useState<boolean>(false)
-  const [sqlResult, setSqlResult] = useState<ExecuteSQLResponse | null>(null)
-  const [sqlError, setSqlError] = useState<string | null>(null)
+  const [sqlQuery, setSqlQuery] = useState<string>('');
+  const [executingSQL, setExecutingSQL] = useState<boolean>(false);
+  const [sqlResult, setSqlResult] = useState<ExecuteSQLResponse | null>(null);
+  const [sqlError, setSqlError] = useState<string | null>(null);

  // 拖拽与主题状态
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [editorHeight, setEditorHeight] = useState<number>(240)
-  const { resolvedTheme } = useTheme()
-  const cmTheme = resolvedTheme === "dark" ? "dark" : "light"
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [editorHeight, setEditorHeight] = useState<number>(240);
+  const { resolvedTheme } = useTheme();
+  const cmTheme = resolvedTheme === 'dark' ? 'dark' : 'light';

  const handleMouseDown = (e: React.MouseEvent) => {
-    e.preventDefault()
-    const startY = e.clientY
-    const startHeight = editorHeight
+    e.preventDefault();
+    const startY = e.clientY;
+    const startHeight = editorHeight;

    const handleMouseMove = (moveEvent: MouseEvent) => {
-      if (!containerRef.current) return
-      const deltaY = moveEvent.clientY - startY
-      const containerHeight = containerRef.current.getBoundingClientRect().height
-      const newHeight = startHeight + deltaY
+      if (!containerRef.current) return;
+      const deltaY = moveEvent.clientY - startY;
+      const containerHeight =
+        containerRef.current.getBoundingClientRect().height;
+      const newHeight = startHeight + deltaY;

      // Limit editor height between 80px and containerHeight - 80px
      if (newHeight > 80 && newHeight < containerHeight - 80) {
-        setEditorHeight(newHeight)
+        setEditorHeight(newHeight);
      }
-    }
+    };

    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove)
-      document.removeEventListener("mouseup", handleMouseUp)
-    }
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };

-    document.addEventListener("mousemove", handleMouseMove)
-    document.addEventListener("mouseup", handleMouseUp)
-  }
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };

  // 执行 SQL 查询
  const handleExecuteSQL = async () => {
-    if (!sqlQuery.trim()) return
-    setExecutingSQL(true)
-    setSqlResult(null)
-    setSqlError(null)
+    if (!sqlQuery.trim()) return;
+    setExecutingSQL(true);
+    setSqlResult(null);
+    setSqlError(null);
    try {
-      const result = await DbManageService.executeSQL(sqlQuery)
-      setSqlResult(result)
-      toast.success("SQL 执行成功")
+      const result = await DbManageService.executeSQL(sqlQuery);
+      setSqlResult(result);
+      toast.success('SQL 执行成功');
    } catch (err) {
-      setSqlError(err instanceof Error ? err.message : "未知执行错误")
-      toast.error("SQL 执行失败")
+      setSqlError(err instanceof Error ? err.message : '未知执行错误');
+      toast.error('SQL 执行失败');
    } finally {
-      setExecutingSQL(false)
+      setExecutingSQL(false);
    }
-  }
+  };

  // Preset SQL 选择器
  const handlePresetSQLChange = (query: string) => {
-    setSqlQuery(query)
-  }
+    setSqlQuery(query);
+  };

  const handleClose = () => {
-    setSqlResult(null)
-    setSqlError(null)
-    onClose()
-  }
+    setSqlResult(null);
+    setSqlError(null);
+    onClose();
+  };

  return (
-    <div className="py-6 px-1 space-y-6 w-full">
+    <div className='py-6 px-1 space-y-6 w-full'>
      {/* 顶部控制与标题 */}
-      <div className="flex items-center justify-between pb-2">
-        <div className="flex items-center gap-3">
+      <div className='flex items-center justify-between pb-2'>
+        <div className='flex items-center gap-3'>
          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8"
+            variant='outline'
+            size='icon'
+            className='h-8 w-8'
            onClick={handleClose}
          >
-            <ArrowLeft className="size-4" />
+            <ArrowLeft className='size-4' />
          </Button>
-          <div className="flex items-center gap-2">
-            <Terminal className="size-5 text-primary" />
+          <div className='flex items-center gap-2'>
+            <Terminal className='size-5 text-primary' />
            <div>
-              <h1 className="text-2xl font-semibold tracking-tight">SQL 查询终端</h1>
+              <h1 className='text-2xl font-semibold tracking-tight'>
+                SQL 查询终端
+              </h1>
            </div>
          </div>
        </div>
-        <div className="text-xs text-muted-foreground font-mono">
-          {dbType === "postgres" ? "PostgreSQL Connected" : "SQLite Connected"}
+        <div className='text-xs text-muted-foreground font-mono'>
+          {dbType === 'postgres' ? 'PostgreSQL Connected' : 'SQLite Connected'}
        </div>
      </div>

      {/* 类似于 VS Code 的单个整体编辑器+结果区域，固定高度，有分水岭拖拽调整大小 */}
      <div
        ref={containerRef}
-        className="w-full border border-border/40 bg-card/60 backdrop-blur-md rounded-lg overflow-hidden flex flex-col shadow-sm h-[calc(100vh-140px)] min-h-[500px]"
+        className='w-full border border-border/40 bg-card/60 backdrop-blur-md rounded-lg overflow-hidden flex flex-col shadow-sm h-[calc(100vh-140px)] min-h-[500px]'
      >
        {/* 顶部编辑工具栏 */}
-        <div className="flex items-center justify-between px-4 py-2 border-b bg-muted/40 shrink-0 gap-4 flex-wrap">
-          <div className="flex items-center gap-2">
-            <Terminal className="size-4 text-primary" />
-            <span className="text-xs font-semibold">SQL 编辑器</span>
+        <div className='flex items-center justify-between px-4 py-2 border-b bg-muted/40 shrink-0 gap-4 flex-wrap'>
+          <div className='flex items-center gap-2'>
+            <Terminal className='size-4 text-primary' />
+            <span className='text-xs font-semibold'>SQL 编辑器</span>
          </div>

-          <div className="flex items-center gap-3 flex-wrap">
+          <div className='flex items-center gap-3 flex-wrap'>
            {/* 快速模板 */}
-            <div className="flex items-center gap-1.5">
-              <span className="text-[11px] text-muted-foreground">快速模板:</span>
+            <div className='flex items-center gap-1.5'>
+              <span className='text-[11px] text-muted-foreground'>
+                快速模板:
+              </span>
              <Select onValueChange={handlePresetSQLChange}>
-                <SelectTrigger className="h-7 w-[180px] text-[11px] bg-background">
-                  <SelectValue placeholder="选择预设 SQL" />
+                <SelectTrigger className='h-7 w-[180px] text-[11px] bg-background'>
+                  <SelectValue placeholder='选择预设 SQL' />
                </SelectTrigger>
                <SelectContent>
-                  <SelectItem value="SELECT * FROM users LIMIT 10;">查询用户 (SELECT users)</SelectItem>
-                  <SelectItem value="SELECT * FROM uploads LIMIT 10;">查询文件 (SELECT uploads)</SelectItem>
-                  <SelectItem value="SELECT * FROM task_executions ORDER BY created_at DESC LIMIT 10;">查询任务流水 (SELECT task_executions)</SelectItem>
-                  <SelectItem value="SELECT sqlite_version();">SQLite 版本 (SQLite only)</SelectItem>
-                  <SelectItem value="SELECT version();">PostgreSQL 版本 (Postgres only)</SelectItem>
+                  <SelectItem value='SELECT * FROM users LIMIT 10;'>
+                    查询用户 (SELECT users)
+                  </SelectItem>
+                  <SelectItem value='SELECT * FROM uploads LIMIT 10;'>
+                    查询文件 (SELECT uploads)
+                  </SelectItem>
+                  <SelectItem value='SELECT * FROM task_executions ORDER BY created_at DESC LIMIT 10;'>
+                    查询任务流水 (SELECT task_executions)
+                  </SelectItem>
+                  <SelectItem value='SELECT sqlite_version();'>
+                    SQLite 版本 (SQLite only)
+                  </SelectItem>
+                  <SelectItem value='SELECT version();'>
+                    PostgreSQL 版本 (Postgres only)
+                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* 控制按钮 */}
-            <div className="flex items-center gap-1.5">
+            <div className='flex items-center gap-1.5'>
              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                onClick={() => setSqlQuery("")}
-                title="清空编辑器"
+                variant='ghost'
+                size='icon'
+                className='h-7 w-7 text-muted-foreground hover:text-foreground'
+                onClick={() => setSqlQuery('')}
+                title='清空编辑器'
              >
-                <Trash2 className="size-3.5" />
+                <Trash2 className='size-3.5' />
              </Button>
              <Button
-                size="sm"
-                className="h-7 px-3 gap-1 text-[11px]"
+                size='sm'
+                className='h-7 px-3 gap-1 text-[11px]'
                onClick={handleExecuteSQL}
                disabled={executingSQL || !sqlQuery.trim()}
              >
-                <Play className="size-3" />
-                {executingSQL ? "运行中..." : "运行"}
+                <Play className='size-3' />
+                {executingSQL ? '运行中...' : '运行'}
              </Button>
            </div>
          </div>
@@ -185,15 +213,15 @@ export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
        {/* 上半区：编辑器输入框 */}
        <div
          style={{ height: editorHeight }}
-          className="w-full overflow-hidden relative min-h-[100px] bg-background"
+          className='w-full overflow-hidden relative min-h-[100px] bg-background'
        >
          <CodeMirror
            value={sqlQuery}
-            height="100%"
+            height='100%'
            extensions={[sql()]}
            theme={cmTheme}
            onChange={(value) => setSqlQuery(value)}
-            className="h-full text-xs font-mono"
+            className='h-full text-xs font-mono'
            basicSetup={{
              lineNumbers: true,
              foldGutter: true,
@@ -207,82 +235,107 @@ export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
        {/* 拖动分割线 */}
        <div
          onMouseDown={handleMouseDown}
-          className="h-1.5 bg-border/60 hover:bg-primary/50 cursor-row-resize transition-colors flex items-center justify-center shrink-0 select-none z-10"
-          title="拖动调整大小"
+          className='h-1.5 bg-border/60 hover:bg-primary/50 cursor-row-resize transition-colors flex items-center justify-center shrink-0 select-none z-10'
+          title='拖动调整大小'
        >
-          <div className="w-8 h-1 rounded bg-muted-foreground/30" />
+          <div className='w-8 h-1 rounded bg-muted-foreground/30' />
        </div>

        {/* 下半区：查看结果 (可滑动查看) */}
-        <div className="flex-1 min-h-[100px] flex flex-col overflow-hidden bg-muted/10">
+        <div className='flex-1 min-h-[100px] flex flex-col overflow-hidden bg-muted/10'>
          {/* 结果栏工具提示 */}
-          <div className="flex items-center justify-between px-4 py-1.5 border-b bg-muted/20 shrink-0 text-[11px] text-muted-foreground font-mono">
-            <span className="font-semibold">执行输出</span>
+          <div className='flex items-center justify-between px-4 py-1.5 border-b bg-muted/20 shrink-0 text-[11px] text-muted-foreground font-mono'>
+            <span className='font-semibold'>执行输出</span>
            {sqlResult && (
              <span>
-                类型: {sqlResult.type.toUpperCase()} | 耗时: {sqlResult.execution_time_ms} ms
+                类型: {sqlResult.type.toUpperCase()} | 耗时:{' '}
+                {sqlResult.execution_time_ms} ms
              </span>
            )}
          </div>

          {/* 滚动结果内容 */}
-          <div className="flex-1 overflow-auto p-4 min-h-0">
+          <div className='flex-1 overflow-auto p-4 min-h-0'>
            {executingSQL && (
-              <div className="flex flex-col items-center justify-center h-full py-10 space-y-2">
-                <RefreshCw className="size-5 text-primary animate-spin" />
-                <span className="text-xs text-muted-foreground">正在在数据库执行查询，请稍候...</span>
+              <div className='flex flex-col items-center justify-center h-full py-10 space-y-2'>
+                <RefreshCw className='size-5 text-primary animate-spin' />
+                <span className='text-xs text-muted-foreground'>
+                  正在在数据库执行查询，请稍候...
+                </span>
              </div>
            )}

            {sqlError && (
-              <div className="bg-destructive/10 border border-destructive/20 text-destructive font-mono text-xs p-4 rounded-lg overflow-auto h-full max-h-[300px]">
-                <p className="font-semibold mb-1">SQL 执行报错 (Error):</p>
-                <pre className="whitespace-pre-wrap">{sqlError}</pre>
+              <div className='bg-destructive/10 border border-destructive/20 text-destructive font-mono text-xs p-4 rounded-lg overflow-auto h-full max-h-[300px]'>
+                <p className='font-semibold mb-1'>SQL 执行报错 (Error):</p>
+                <pre className='whitespace-pre-wrap'>{sqlError}</pre>
              </div>
            )}

            {sqlResult && (
-              <div className="h-full flex flex-col">
-                {sqlResult.type === "select" && sqlResult.columns && sqlResult.columns.length > 0 && (
-                  <div className="border rounded-md overflow-auto max-w-full max-h-full bg-background relative flex-1 min-h-0">
-                    <Table className="text-xs">
-                      <TableHeader className="bg-muted/40 font-semibold sticky top-0 z-10">
-                        <TableRow>
-                          {sqlResult.columns.map((col) => (
-                            <TableHead key={col} className="font-semibold text-foreground py-2">{col}</TableHead>
-                          ))}
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {sqlResult.results && sqlResult.results.length > 0 ? (
-                          sqlResult.results.map((row, rIndex) => (
-                            <TableRow key={rIndex} className="hover:bg-muted/10">
-                              {sqlResult.columns!.map((col) => (
-                                <TableCell key={col} className="font-mono py-1.5">
-                                  <span className="truncate max-w-[240px] block" title={formatCellValue(row[col])}>
-                                    {formatCellValue(row[col])}
-                                  </span>
-                                </TableCell>
-                              ))}
-                            </TableRow>
-                          ))
-                        ) : (
+              <div className='h-full flex flex-col'>
+                {sqlResult.type === 'select' &&
+                  sqlResult.columns &&
+                  sqlResult.columns.length > 0 && (
+                    <div className='border rounded-md overflow-auto max-w-full max-h-full bg-background relative flex-1 min-h-0'>
+                      <Table className='text-xs'>
+                        <TableHeader className='bg-muted/40 font-semibold sticky top-0 z-10'>
                          <TableRow>
-                            <TableCell colSpan={sqlResult.columns.length} className="text-center py-10 text-muted-foreground">
-                              查询结果为空
-                            </TableCell>
+                            {sqlResult.columns.map((col) => (
+                              <TableHead
+                                key={col}
+                                className='font-semibold text-foreground py-2'
+                              >
+                                {col}
+                              </TableHead>
+                            ))}
                          </TableRow>
-                        )}
-                      </TableBody>
-                    </Table>
-                  </div>
-                )}
+                        </TableHeader>
+                        <TableBody>
+                          {sqlResult.results && sqlResult.results.length > 0 ? (
+                            sqlResult.results.map((row, rIndex) => (
+                              <TableRow
+                                key={rIndex}
+                                className='hover:bg-muted/10'
+                              >
+                                {sqlResult.columns!.map((col) => (
+                                  <TableCell
+                                    key={col}
+                                    className='font-mono py-1.5'
+                                  >
+                                    <span
+                                      className='truncate max-w-[240px] block'
+                                      title={formatCellValue(row[col])}
+                                    >
+                                      {formatCellValue(row[col])}
+                                    </span>
+                                  </TableCell>
+                                ))}
+                              </TableRow>
+                            ))
+                          ) : (
+                            <TableRow>
+                              <TableCell
+                                colSpan={sqlResult.columns.length}
+                                className='text-center py-10 text-muted-foreground'
+                              >
+                                查询结果为空
+                              </TableCell>
+                            </TableRow>
+                          )}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  )}

-                {sqlResult.type === "exec" && (
-                  <div className="bg-primary/5 border border-primary/10 text-primary-foreground font-mono text-xs p-6 rounded-lg text-center my-auto">
-                    <p className="text-foreground text-sm font-semibold">SQL 执行成功</p>
-                    <p className="text-muted-foreground mt-2">
-                      受影响行数: {sqlResult.affected_rows} 行，耗时 {sqlResult.execution_time_ms} 毫秒。
+                {sqlResult.type === 'exec' && (
+                  <div className='bg-primary/5 border border-primary/10 text-primary-foreground font-mono text-xs p-6 rounded-lg text-center my-auto'>
+                    <p className='text-foreground text-sm font-semibold'>
+                      SQL 执行成功
+                    </p>
+                    <p className='text-muted-foreground mt-2'>
+                      受影响行数: {sqlResult.affected_rows} 行，耗时{' '}
+                      {sqlResult.execution_time_ms} 毫秒。
                    </p>
                  </div>
                )}
@@ -290,14 +343,16 @@ export function SQLConsole({ dbType, onClose }: SQLConsoleProps) {
            )}

            {!executingSQL && !sqlResult && !sqlError && (
-              <div className="flex flex-col items-center justify-center h-full py-10 text-muted-foreground opacity-60">
-                <Terminal className="size-8 mb-2" />
-                <span className="text-xs">编辑器就绪，请在上方编写 SQL 并运行查看结果</span>
+              <div className='flex flex-col items-center justify-center h-full py-10 text-muted-foreground opacity-60'>
+                <Terminal className='size-8 mb-2' />
+                <span className='text-xs'>
+                  编辑器就绪，请在上方编写 SQL 并运行查看结果
+                </span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
-  )
+  );
 }