+ {Array.from({ length: 6 }).map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+ )
+
+ // 渲染 SQL 查询控台全屏视图
+ if (showConsole) {
+ return (
+
+ {/* 顶部控制与标题 */}
+
+
+ 功能区
+ 数据库导出及自定义高级 SQL 执行终端
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/app/(main)/admin/database/page.tsx b/frontend/app/(main)/admin/database/page.tsx
index 9d9e9b4c..24d40dea 100644
--- a/frontend/app/(main)/admin/database/page.tsx
+++ b/frontend/app/(main)/admin/database/page.tsx
@@ -1,313 +1,5 @@
-"use client"
-
-import * as React from "react"
-import {useCallback, useEffect, useState} from "react"
-import {toast} from "sonner"
-import {
- Activity,
- Cpu,
- Database,
- Download,
- FileText,
- HardDrive,
- Layers,
- RefreshCw,
- Server,
- Terminal,
-} from "lucide-react"
-
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
-import {Button} from "@/components/ui/button"
-import {Skeleton} from "@/components/ui/skeleton"
-import type {DBOverview} from "@/lib/services"
-import services, {AdminService} from "@/lib/services"
-
-import {TableBrowser} from "@/components/common/admin/database-table-browser"
-import {CacheManager} from "@/components/common/admin/database-cache-manager"
-import {SQLConsole} from "@/components/common/admin/database-sql-console"
-
-/**
- * 格式化数字，每3位加逗号
- */
-const formatNumber = (num: number | string) => {
- if (num === undefined || num === null) return "0"
- return num.toString().replace(/\B(?=(\d{3})+(?!\B))/g, ",")
-}
+import {DatabasePageClient} from "./page-client"
export default function DatabasePage() {
- // 核心状态
- const [overview, setOverview] = useState
+
+
+ {/* 1. 概览指标卡片组 */}
+ {loadingOverview ? (
+ renderOverviewSkeleton()
+ ) : (
+ overview && (
+
+
+
+
+
+ 数据管理
+
+ {/* 卡片1: 数据库类型 */}
+
+
+ 数据库类型
+
+
+
+
+
+ {/* 卡片2: 数据库版本 */}
+
+
+ 版本信息
+
+
+
+
+
+ {/* 卡片3: 数据库名称 */}
+
+
+ 名称/路径
+
+
+
+
+
+ {/* 卡片4: 数据库大小 */}
+
+
+ 数据库大小
+
+
+
+
+
+ {/* 卡片5: 表数量 */}
+
+
+ 物理数据表
+
+
+
+
+
+ {/* 卡片6: 连接数 */}
+
+
+ 活跃连接数
+
+
+
+
+
+ )
+ )}
+
+ {/* 2. 数据表浏览器区块 */}
+ {overview.type}
+
+ {overview.version.split(" ").slice(0, 2).join(" ")}
+
+
+ {overview.name.substring(overview.name.lastIndexOf("/") + 1)}
+
+ {overview.size}
+ {formatNumber(overview.table_count)}
+ {formatNumber(overview.connections)}
+
+ {/* 功能一: 数据库导出 */}
+
+
+
+
+ {/* 功能二: SQL 查询终端 */}
+
+
+
+
+
+ 直接导出并下载物理数据库镜像文件（SQLite 导出 .db，PostgreSQL 导出为打包的 .sql 文本文件） +
+
+
+
+
+
+
+
+ 打开在线 SQL 控制终端，执行原生的 SQL 进行数据筛选、更新、调试或性能优化 +
+
- {Array.from({ length: 6 }).map((_, i) => (
-
-
-
-
-
-
- ))}
-
- )
-
- // 渲染 SQL 查询控台全屏视图
- if (showConsole) {
- return (
-
- {/* 顶部控制与标题 */}
-
-
- 功能区
- 数据库导出及自定义高级 SQL 执行终端
-
-
-
-
-
- )
-}
+ return
-
-
- {/* 1. 概览指标卡片组 */}
- {loadingOverview ? (
- renderOverviewSkeleton()
- ) : (
- overview && (
-
-
-
-
-
- 数据管理
-
- {/* 卡片1: 数据库类型 */}
-
-
- 数据库类型
-
-
-
-
-
- {/* 卡片2: 数据库版本 */}
-
-
- 版本信息
-
-
-
-
-
- {/* 卡片3: 数据库名称 */}
-
-
- 名称/路径
-
-
-
-
-
- {/* 卡片4: 数据库大小 */}
-
-
- 数据库大小
-
-
-
-
-
- {/* 卡片5: 表数量 */}
-
-
- 物理数据表
-
-
-
-
-
- {/* 卡片6: 连接数 */}
-
-
- 活跃连接数
-
-
-
-
-
- )
- )}
-
- {/* 2. 数据表浏览器区块 */}
- {overview.type}
-
- {overview.version.split(" ").slice(0, 2).join(" ")}
-
-
- {overview.name.substring(overview.name.lastIndexOf("/") + 1)}
-
- {overview.size}
- {formatNumber(overview.table_count)}
- {formatNumber(overview.connections)}
-
- {/* 功能一: 数据库导出 */}
-
-
-
-
- {/* 功能二: SQL 查询终端 */}
-
-
-
-
-
- 直接导出并下载物理数据库镜像文件（SQLite 导出 .db，PostgreSQL 导出为打包的 .sql 文本文件） -
-
-
-
-
-
-
-
- 打开在线 SQL 控制终端，执行原生的 SQL 进行数据筛选、更新、调试或性能优化 -
-
+ {/* Header */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/app/(main)/admin/logs/page.tsx b/frontend/app/(main)/admin/logs/page.tsx
index 488485c3..09e44106 100644
--- a/frontend/app/(main)/admin/logs/page.tsx
+++ b/frontend/app/(main)/admin/logs/page.tsx
@@ -14,53 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-"use client"
-
-import {Activity, BarChart3, Terminal} from "lucide-react"
-
-import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
-import {AppLogs} from "@/components/common/admin/app-logs"
-import {AccessLogs} from "@/components/common/admin/access-logs"
-import {AccessAnalytics} from "@/components/common/admin/access-analytics"
+import {LogsPageClient} from "./page-client"
export default function LogsPage() {
- return (
-
+
+ {/* Tabs Layout */}
+
+
+ 系统日志
+
- {/* Header */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
+ return
-
- {/* Tabs Layout */}
-
-
- 系统日志
-
+
+ )
+ }
+
+ return (
+
+
+
+
+ 系统设置
+
-
- )
- }
-
- return (
-
-
-
-
- 系统设置
-
+
+
)}
diff --git a/frontend/components/auth/login-form.tsx b/frontend/components/auth/login-form.tsx
index c89fd715..97784f2a 100644
--- a/frontend/components/auth/login-form.tsx
+++ b/frontend/components/auth/login-form.tsx
@@ -16,7 +16,8 @@ import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
import {CapWidget} from "@/components/auth/cap-widget"
import {AuthHeading} from "@/components/auth/auth-shell"
import {OTPForm} from "./otp-form"
-import services from "@/lib/services"
+import {AuthService} from "@/lib/services/auth"
+import {ConfigService} from "@/lib/services/config"
import type {LoginRequest} from "@/lib/services/auth/types"
import {safeRedirectTarget} from "@/lib/utils"
@@ -64,13 +65,12 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
const publicConfigQuery = useQuery({
queryKey: ["public-config"],
- queryFn: () => services.config.getPublicConfig(),
+ queryFn: () => ConfigService.getPublicConfig(),
})
const authSourcesQuery = useQuery({
queryKey: ["auth-sources"],
- queryFn: () => services.auth.getAuthSources(),
- enabled: configBool(publicConfigQuery.data?.oidc_login_enabled, true),
+ queryFn: () => AuthService.getAuthSources(),
})
const capEnabled = configBool(publicConfigQuery.data?.cap_login_enabled, false)
@@ -85,7 +85,7 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
capTokenRef.current = null
setCapReady(false)
}
- return services.auth.login(req, Object.keys(headers).length ? headers : undefined)
+ return AuthService.login(req, Object.keys(headers).length ? headers : undefined)
},
onSuccess: (user) => {
setUser(user)
@@ -170,7 +170,7 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
try {
setErrorMessage("")
persistRedirectTarget(searchParams)
- const { authorize_url } = await services.auth.getAuthorizeUrl(sourceName)
+ const { authorize_url } = await AuthService.getAuthorizeUrl(sourceName)
window.location.href = authorize_url
} catch (error) {
toast.error(error instanceof Error ? error.message : "第三方登录失败")
@@ -194,7 +194,8 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
configBool(publicConfigQuery.data?.password_register_enabled, true)
const passwordLoginEnabled = configBool(publicConfigQuery.data?.password_login_enabled, true)
- const authSources = authSourcesQuery.data ?? []
+ const oidcLoginEnabled = configBool(publicConfigQuery.data?.oidc_login_enabled, true)
+ const authSources = oidcLoginEnabled ? (authSourcesQuery.data ?? []) : []
const loginDisabled =
!passwordLoginEnabled ||
diff --git a/frontend/components/auth/login-page.tsx b/frontend/components/auth/login-page.tsx
index 52a4ba14..11fe7b09 100644
--- a/frontend/components/auth/login-page.tsx
+++ b/frontend/components/auth/login-page.tsx
@@ -9,7 +9,7 @@ import {LoginForm} from "@/components/auth/login-form"
import {AuthShell} from "@/components/auth/auth-shell"
import {Check} from "lucide-react"
-import services from "@/lib/services"
+import {AuthService} from "@/lib/services/auth"
import {useAuth} from "@/components/providers/auth-provider"
import {safeRedirectTarget} from "@/lib/utils"
@@ -84,7 +84,7 @@ export function LoginPage() {
setIsProcessingCallback(true)
try {
- const result = await services.auth.handleCallback({ state, code })
+ const result = await AuthService.handleCallback({ state, code })
if (result.status === "need_bind") {
toast.info("您的第三方账号未绑定本地账号，系统已关闭注册。请登录已有本地账号进行绑定。")
setIsProcessingCallback(false)
diff --git a/frontend/components/auth/register-form.tsx b/frontend/components/auth/register-form.tsx
index e9008542..d5112c98 100644
--- a/frontend/components/auth/register-form.tsx
+++ b/frontend/components/auth/register-form.tsx
@@ -13,7 +13,8 @@ import {Spinner} from "@/components/ui/spinner"
import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
import {AuthHeading} from "@/components/auth/auth-shell"
import {CapWidget} from "@/components/auth/cap-widget"
-import services from "@/lib/services"
+import {AuthService} from "@/lib/services/auth"
+import {ConfigService} from "@/lib/services/config"
import type {RegisterRequest} from "@/lib/services/auth/types"
import {safeRedirectTarget} from "@/lib/utils"
@@ -53,7 +54,7 @@ export function RegisterForm() {
const publicConfigQuery = useQuery({
queryKey: ["public-config"],
- queryFn: () => services.config.getPublicConfig(),
+ queryFn: () => ConfigService.getPublicConfig(),
})
const redirectTarget = useMemo(
@@ -110,7 +111,7 @@ export function RegisterForm() {
capTokenRef.current = null
setCapReady(false)
}
- return services.auth.register(req, Object.keys(headers).length ? headers : undefined)
+ return AuthService.register(req, Object.keys(headers).length ? headers : undefined)
},
onSuccess: (user) => {
setUser(user)
@@ -135,7 +136,7 @@ export function RegisterForm() {
capTokenRef.current = null
setCapReady(false)
}
- return services.auth.sendEmailCode(targetEmail, "register", Object.keys(headers).length ? headers : undefined)
+ return AuthService.sendEmailCode(targetEmail, "register", Object.keys(headers).length ? headers : undefined)
},
onSuccess: () => {
setRegisterCooldown(60)
diff --git a/frontend/components/common/admin/access-analytics.tsx b/frontend/components/common/admin/access-analytics.tsx
index 8421ebfa..cb9f7e4c 100644
--- a/frontend/components/common/admin/access-analytics.tsx
+++ b/frontend/components/common/admin/access-analytics.tsx
@@ -20,7 +20,7 @@ import {useCallback, useEffect, useState} from "react"
import {BarChart3, Globe, RefreshCw, TrendingUp, Users, XCircle} from "lucide-react"
import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from "recharts"
-import {AdminService} from "@/lib/services"
+import {AdminService} from "@/lib/services/admin"
import {ErrorInline} from "@/components/layout/error"
import {LoadingStateWithBorder} from "@/components/layout/loading"
import {EmptyStateWithBorder} from "@/components/layout/empty"
diff --git a/frontend/components/common/admin/access-logs.tsx b/frontend/components/common/admin/access-logs.tsx
index 2341e909..df20fdd1 100644
--- a/frontend/components/common/admin/access-logs.tsx
+++ b/frontend/components/common/admin/access-logs.tsx
@@ -16,12 +16,13 @@ limitations under the License.
"use client"
-import {useCallback, useEffect, useState} from "react"
+import {useMemo, useState} from "react"
+import {useQuery} from "@tanstack/react-query"
import {toast} from "sonner"
import {format} from "date-fns"
import {Activity, ChevronLeft, ChevronRight, Copy, Eye, RotateCcw, Search, XCircle} from "lucide-react"
-import {AdminService} from "@/lib/services"
+import {AdminService} from "@/lib/services/admin"
import {ErrorInline} from "@/components/layout/error"
import {LoadingStateWithBorder} from "@/components/layout/loading"
import {EmptyStateWithBorder} from "@/components/layout/empty"
@@ -47,6 +48,8 @@ interface AccessLog {
created_at: string
}
+const PAGE_SIZE = 15
+
function formatDateTime(value?: string | null) {
if (!value) return "-"
const date = new Date(value)
@@ -66,15 +69,13 @@ function statusVariant(status: number) {
return "secondary"
}
-export function AccessLogs() {
- const [loading, setLoading] = useState(true)
- const [error, setError] = useState
-