db manager

frontend/components/common/settings/info-tab.tsx

@@ -1,14 +1,9 @@
 "use client"
 
-import {useState} from "react"
-import {Database, Download, Info, Loader2, Server} from "lucide-react"
+import {Info, Server} from "lucide-react"
 import packageJson from "../../../package.json"
-import {AdminService, apiConfig} from "@/lib/services"
+import {apiConfig} from "@/lib/services"
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Button} from "@/components/ui/button"
-import {Badge} from "@/components/ui/badge"
-import {useQuery} from "@tanstack/react-query"
-import {toast} from "sonner"
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
@@ -25,37 +20,6 @@ interface InfoTabProps {
 }
 
 export function InfoTab({ systemConfigsLength, authSourcesLength }: InfoTabProps) {
-  const [exporting, setExporting] = useState(false)
-
-  const dbInfoQuery = useQuery({
-    queryKey: ["admin", "db-info"],
-    queryFn: () => AdminService.getDatabaseInfo(),
-  })
-
-  const dbInfo = dbInfoQuery.data
-
-  const handleExport = async () => {
-    setExporting(true)
-    try {
-      const { blob, filename } = await AdminService.exportDatabase()
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement("a")
-      a.href = url
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      a.remove()
-      URL.revokeObjectURL(url)
-      toast.success("数据库导出成功", { description: `文件已下载：${filename}` })
-    } catch (err) {
-      toast.error("数据库导出失败", {
-        description: err instanceof Error ? err.message : "请求时发生未知错误",
-      })
-    } finally {
-      setExporting(false)
-    }
-  }
-
   return (
     <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
       <Card className="border border-dashed shadow-sm">
@@ -99,69 +63,6 @@ export function InfoTab({ systemConfigsLength, authSourcesLength }: InfoTabProps
           <InfoRow label="认证源数量" value={`${authSourcesLength} 个`} />
         </CardContent>
       </Card>
-
-      {/* 数据库信息卡片 */}
-      <Card className="border border-dashed shadow-sm lg:col-span-2">
-        <CardHeader className="border-b border-dashed pb-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="p-1.5 rounded-lg bg-muted text-muted-foreground">
-                <Database className="size-4" />
-              </div>
-              <div>
-                <CardTitle className="text-base font-semibold">数据库信息</CardTitle>
-                <CardDescription className="text-xs">当前使用的数据库类型及连接信息</CardDescription>
-              </div>
-            </div>
-            <Button
-              id="db-export-btn"
-              size="sm"
-              variant="outline"
-              className="h-8 text-xs gap-1.5"
-              onClick={handleExport}
-              disabled={exporting || dbInfoQuery.isLoading}
-            >
-              {exporting ? (
-                <Loader2 className="size-3 animate-spin" />
-              ) : (
-                <Download className="size-3" />
-              )}
-              {exporting ? "导出中..." : "数据导出"}
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="pt-4">
-          {dbInfoQuery.isLoading ? (
-            <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
-              <Loader2 className="size-3 animate-spin" />
-              加载数据库信息中...
-            </div>
-          ) : dbInfoQuery.isError ? (
-            <p className="text-xs text-destructive py-2">获取数据库信息失败</p>
-          ) : (
-            <>
-              <div className="flex items-center justify-between gap-4 border-b border-dashed py-2">
-                <span className="text-xs text-muted-foreground">数据库类型</span>
-                <Badge
-                  variant="secondary"
-                  className={
-                    dbInfo?.type === "postgres"
-                      ? "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400 border-none text-[11px]"
-                      : "bg-amber-500/10 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400 border-none text-[11px]"
-                  }
-                >
-                  {dbInfo?.type === "postgres" ? "PostgreSQL" : "SQLite"}
-                </Badge>
-              </div>
-              <InfoRow
-                label={dbInfo?.type === "postgres" ? "数据库名称" : "数据库文件"}
-                value={dbInfo?.name}
-              />
-              <InfoRow label="版本信息" value={dbInfo?.version} />
-            </>
-          )}
-        </CardContent>
-      </Card>
     </div>
   )
 }

frontend/components/common/settings/other-tab.tsx

@@ -4,6 +4,7 @@ import {useMemo} from "react"
 import {useMutation, useQueryClient} from "@tanstack/react-query"
 import {
   CreditCard,
+  Database,
   FileText,
   FolderOpen,
   Home,
@@ -37,6 +38,7 @@ const MENU_GROUPS = [
       { path: "/admin/files", label: "文件管理", description: "查看用户上传文件并清理多余文件", icon: FolderOpen },
       { path: "/admin/tasks", label: "任务管理", description: "查看和调度系统异步及定时任务", icon: Layers },
       { path: "/admin/system", label: "系统配置", description: "管理和维护系统基础键值对配置", icon: ShieldCheck },
+      { path: "/admin/database", label: "数据管理", description: "监控物理数据库状态、分页浏览表数据及交互式 SQL 查询", icon: Database },
       { path: "/admin/logs", label: "系统日志", description: "查看异步任务执行日志和系统运行情况", icon: Terminal },
       { path: "/admin/settings", label: "系统设置", description: "配置安全验证、邮箱服务及目录显示", icon: Settings, readOnly: true },
     ]