设置界面优化

frontend/components/common/settings/files.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import Link from "next/link"
 import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
 import {AnimatePresence, motion} from "motion/react"
 import {
@@ -11,7 +10,6 @@ import {
   FileImage,
   FileText,
   FileVideo,
-  Folder,
   Loader2,
   Search,
   Trash2,
@@ -21,14 +19,6 @@ import {
 import {toast} from "sonner"
 
 import {Button} from "@/components/ui/button"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
 import {Input} from "@/components/ui/input"
 import {Badge} from "@/components/ui/badge"
 import {
@@ -148,32 +138,13 @@ export function FilesMain() {
       transition={{ duration: 0.35, ease: "easeOut" }}
       className="py-6 space-y-6 max-w-6xl mx-auto"
     >
-      {/* Breadcrumb */}
-      <div className="font-semibold">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link href="/settings" className="text-base text-primary">设置</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage className="text-base font-semibold">文件管理</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
 
       {/* 头部 */}
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b pb-5">
         <div className="flex items-center gap-4">
-          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-500 to-indigo-600 text-white shadow-lg shadow-sky-500/20">
-            <Folder className="size-6" />
-          </div>
           <div>
             <h1 className="text-xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent">
-              我的文件
+              文件管理
             </h1>
             <p className="text-sm text-muted-foreground">
               管理您上传的所有文件，支持下载和批量操作

frontend/components/common/settings/security.tsx

@@ -2,22 +2,14 @@
 
 import {useEffect, useMemo, useState} from "react"
 import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
-import {Fingerprint, Globe, Loader2, Lock, Pencil, Plus, Settings, ShieldCheck, Trash2, UserPlus} from "lucide-react"
-import Link from "next/link"
+import {Fingerprint, Globe, Loader2, Lock, Pencil, Plus, Settings, Trash2, UserPlus} from "lucide-react"
 import {useRouter} from "next/navigation"
 import {motion} from "motion/react"
 
 import {Button} from "@/components/ui/button"
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
 import {Switch} from "@/components/ui/switch"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator
-} from "@/components/ui/breadcrumb"
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
 import {useAuth} from "@/components/providers/auth-provider"
 import {AuthSourceModal} from "@/components/common/settings/auth-source-modal"
 import {AdminService} from "@/lib/services"
@@ -163,196 +155,194 @@ export function SecurityMain() {
       transition={{ duration: 0.35, ease: "easeOut" }}
       className="py-6 space-y-6 max-w-4xl mx-auto px-4"
     >
-      <div className="font-semibold">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink asChild>
-                <Link href="/settings" className="text-base text-primary">设置</Link>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage className="text-base font-semibold">安全设置</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
+      <Tabs defaultValue="security" className="w-full">
+        <TabsList className="w-full overflow-x-auto">
+          <TabsTrigger value="security" className="px-0 pb-2 text-xs font-semibold">
+            系统安全设置
+          </TabsTrigger>
+          <TabsTrigger value="operation" className="px-0 pb-2 text-xs font-semibold">
+            运营设置
+          </TabsTrigger>
+          <TabsTrigger value="system" className="px-0 pb-2 text-xs font-semibold">
+            系统设置
+          </TabsTrigger>
+          <TabsTrigger value="other" className="px-0 pb-2 text-xs font-semibold">
+            其他设置
+          </TabsTrigger>
+          <TabsTrigger value="info" className="px-0 pb-2 text-xs font-semibold">
+            系统信息
+          </TabsTrigger>
+        </TabsList>
 
-      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 border-b pb-5">
-        <div className="flex items-center gap-4">
-          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-lg shadow-indigo-500/20">
-            <ShieldCheck className="size-6 animate-pulse" />
-          </div>
-          <div>
-            <h1 className="text-xl font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent">系统安全设置</h1>
-            <p className="text-sm text-muted-foreground">管理系统安全控制及身份验证源</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-6">
-        {/* 系统登录与注册控制 */}
-        <Card className="border border-dashed shadow-sm">
-          <CardHeader className="border-b border-dashed pb-4">
-            <div className="flex items-center gap-2">
-              <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
-                <Settings className="size-4" />
-              </div>
-              <div>
-                <CardTitle className="text-base font-semibold">系统安全与注册控制</CardTitle>
-                <CardDescription className="text-xs">配置系统的登录限制与用户自主注册权限</CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent className="pt-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {SECURITY_KEYS.map((item) => {
-                const config = configs[item.key]
-                const checked = config ? config.value === "true" : false
-                const Icon = item.icon
-                return (
-                  <div
-                    key={item.key}
-                    className="flex items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 hover:border-indigo-500/30 transition-all duration-300 shadow-sm"
-                  >
-                    <div className="space-y-1">
-                      <div className="flex items-center gap-2">
-                        {Icon && <Icon className="size-4 text-indigo-500" />}
-                        <span className="font-medium text-sm text-foreground">{item.title}</span>
-                      </div>
-                      <p className="text-xs text-muted-foreground leading-relaxed pr-2">{item.description}</p>
-                    </div>
-                    <Switch
-                      checked={checked}
-                      disabled={updateConfigMutation.isPending}
-                      onCheckedChange={(value) => handleToggle(item.key, value)}
-                    />
+        <TabsContent value="security" className="pt-4">
+          <div className="space-y-6">
+            {/* 系统登录与注册控制 */}
+            <Card className="border border-dashed shadow-sm">
+              <CardHeader className="border-b border-dashed pb-4">
+                <div className="flex items-center gap-2">
+                  <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+                    <Settings className="size-4" />
                   </div>
-                )
-              })}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* 认证源配置管理 */}
-        <Card className="border border-dashed shadow-sm">
-          <CardHeader className="border-b border-dashed pb-4 flex flex-row items-center justify-between gap-4">
-            <div className="flex items-center gap-2">
-              <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
-                <Globe className="size-4" />
-              </div>
-              <div>
-                <CardTitle className="text-base font-semibold">认证源管理</CardTitle>
-                <CardDescription className="text-xs">添加、修改并启用系统自定义的 OIDC 认证源</CardDescription>
-              </div>
-            </div>
-            <Button
-              type="button"
-              size="sm"
-              onClick={() => {
-                setSelectedSource(null)
-                setAuthSourceModalOpen(true)
-              }}
-              variant="secondary"
-            >
-              <Plus className="mr-1.5 size-3.5" />
-              新增认证源
-            </Button>
-          </CardHeader>
-          <CardContent className="pt-6 space-y-3">
-            {authSourcesQuery.isPending ? (
-              <div className="flex items-center justify-center p-8">
-                <Loader2 className="size-6 animate-spin text-muted-foreground/50" />
-              </div>
-            ) : (authSourcesQuery.data ?? []).length > 0 ? (
-              (authSourcesQuery.data ?? []).map((source) => (
-                <div
-                  key={source.id}
-                  className="flex items-center justify-between rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 transition-all duration-300 shadow-sm"
-                >
-                  <div className="space-y-1.5">
-                    <div className="flex items-center gap-2">
-                      <span className="font-semibold text-sm text-foreground">{source.display_name || source.name}</span>
-                      <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${
-                        source.is_active
-                          ? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
-                          : "bg-amber-500/10 text-amber-500 border-amber-500/20"
-                      }`}>
-                        {source.is_active ? "已启用" : "已禁用"}
-                      </span>
-                    </div>
-                    <div className="text-xs text-muted-foreground font-mono">
-                      标识符: {source.name} · 类型: {source.type.toUpperCase()}
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-4">
-                    <span className={`text-xs px-2.5 py-1 rounded-lg border font-medium hidden sm:inline-block ${
-                      source.client_secret_configured
-                        ? "bg-indigo-500/5 text-indigo-500 border-indigo-500/10"
-                        : "bg-rose-500/5 text-rose-500 border-rose-500/10"
-                    }`}>
-                      {source.client_secret_configured ? "Secret 已配置" : "Secret 未配置"}
-                    </span>
-
-                    <div className="flex items-center gap-2">
-                      <Switch
-                        checked={source.is_active}
-                        disabled={toggleSourceMutation.isPending}
-                        className="scale-90 mr-2"
-                        onCheckedChange={() => toggleSourceMutation.mutate(source)}
-                      />
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="size-8 text-muted-foreground hover:text-indigo-500 hover:bg-indigo-500/10 rounded-lg transition-colors"
-                        onClick={() => {
-                          setSelectedSource(source)
-                          setAuthSourceModalOpen(true)
-                        }}
-                      >
-                        <Pencil className="size-4" />
-                      </Button>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="size-8 text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg transition-colors"
-                        disabled={deleteSourceMutation.isPending}
-                        onClick={() => {
-                          if (window.confirm(`确定删除认证源「${source.display_name || source.name}」吗？`)) {
-                            deleteSourceMutation.mutate(source.id)
-                          }
-                        }}
-                      >
-                        <Trash2 className="size-4" />
-                      </Button>
-                    </div>
+                  <div>
+                    <CardTitle className="text-base font-semibold">系统安全与注册控制</CardTitle>
+                    <CardDescription className="text-xs">配置系统的登录限制与用户自主注册权限</CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="pt-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {SECURITY_KEYS.map((item) => {
+                    const config = configs[item.key]
+                    const checked = config ? config.value === "true" : false
+                    const Icon = item.icon
+                    return (
+                      <div
+                        key={item.key}
+                        className="flex items-center justify-between gap-4 rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 hover:border-indigo-500/30 transition-all duration-300 shadow-sm"
+                      >
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-2">
+                            {Icon && <Icon className="size-4 text-indigo-500" />}
+                            <span className="font-medium text-sm text-foreground">{item.title}</span>
+                          </div>
+                          <p className="text-xs text-muted-foreground leading-relaxed pr-2">{item.description}</p>
+                        </div>
+                        <Switch
+                          checked={checked}
+                          disabled={updateConfigMutation.isPending}
+                          onCheckedChange={(value) => handleToggle(item.key, value)}
+                        />
+                      </div>
+                    )
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 认证源配置管理 */}
+            <Card className="border border-dashed shadow-sm">
+              <CardHeader className="border-b border-dashed pb-4 flex flex-row items-center justify-between gap-4">
+                <div className="flex items-center gap-2">
+                  <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-500">
+                    <Globe className="size-4" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-base font-semibold">认证源管理</CardTitle>
+                    <CardDescription className="text-xs">添加、修改并启用系统自定义的 OIDC 认证源</CardDescription>
                   </div>
                 </div>
-              ))
-            ) : (
-              <div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center gap-3">
-                <span>暂无配置的认证源，点击上方按钮新增</span>
                 <Button
                   type="button"
                   size="sm"
-                  variant="outline"
                   onClick={() => {
                     setSelectedSource(null)
                     setAuthSourceModalOpen(true)
                   }}
-                  className="border-dashed"
+                  variant="secondary"
                 >
                   <Plus className="mr-1.5 size-3.5" />
                   新增认证源
                 </Button>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
+              </CardHeader>
+              <CardContent className="pt-6 space-y-3">
+                {authSourcesQuery.isPending ? (
+                  <div className="flex items-center justify-center p-8">
+                    <Loader2 className="size-6 animate-spin text-muted-foreground/50" />
+                  </div>
+                ) : (authSourcesQuery.data ?? []).length > 0 ? (
+                  (authSourcesQuery.data ?? []).map((source) => (
+                    <div
+                      key={source.id}
+                      className="flex items-center justify-between rounded-xl border border-dashed p-4 bg-card hover:bg-muted/10 transition-all duration-300 shadow-sm"
+                    >
+                      <div className="space-y-1.5">
+                        <div className="flex items-center gap-2">
+                          <span className="font-semibold text-sm text-foreground">{source.display_name || source.name}</span>
+                          <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${
+                            source.is_active
+                              ? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
+                              : "bg-amber-500/10 text-amber-500 border-amber-500/20"
+                          }`}>
+                            {source.is_active ? "已启用" : "已禁用"}
+                          </span>
+                        </div>
+                        <div className="text-xs text-muted-foreground font-mono">
+                          标识符: {source.name} · 类型: {source.type.toUpperCase()}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <span className={`text-xs px-2.5 py-1 rounded-lg border font-medium hidden sm:inline-block ${
+                          source.client_secret_configured
+                            ? "bg-indigo-500/5 text-indigo-500 border-indigo-500/10"
+                            : "bg-rose-500/5 text-rose-500 border-rose-500/10"
+                        }`}>
+                          {source.client_secret_configured ? "Secret 已配置" : "Secret 未配置"}
+                        </span>
+
+                        <div className="flex items-center gap-2">
+                          <Switch
+                            checked={source.is_active}
+                            disabled={toggleSourceMutation.isPending}
+                            className="scale-90 mr-2"
+                            onCheckedChange={() => toggleSourceMutation.mutate(source)}
+                          />
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-8 text-muted-foreground hover:text-indigo-500 hover:bg-indigo-500/10 rounded-lg transition-colors"
+                            onClick={() => {
+                              setSelectedSource(source)
+                              setAuthSourceModalOpen(true)
+                            }}
+                          >
+                            <Pencil className="size-4" />
+                          </Button>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="size-8 text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 rounded-lg transition-colors"
+                            disabled={deleteSourceMutation.isPending}
+                            onClick={() => {
+                              if (window.confirm(`确定删除认证源「${source.display_name || source.name}」吗？`)) {
+                                deleteSourceMutation.mutate(source.id)
+                              }
+                            }}
+                          >
+                            <Trash2 className="size-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  <div className="rounded-xl border border-dashed border-border/50 px-4 py-8 text-center text-xs text-muted-foreground bg-muted/5 flex flex-col items-center justify-center gap-3">
+                    <span>暂无配置的认证源，点击上方按钮新增</span>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => {
+                        setSelectedSource(null)
+                        setAuthSourceModalOpen(true)
+                      }}
+                      className="border-dashed"
+                    >
+                      <Plus className="mr-1.5 size-3.5" />
+                      新增认证源
+                    </Button>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+        <TabsContent value="operation" />
+        <TabsContent value="system" />
+        <TabsContent value="other" />
+        <TabsContent value="info" />
+      </Tabs>
 
       <AuthSourceModal
         isOpen={authSourceModalOpen}
@@ -367,4 +357,3 @@ export function SecurityMain() {
     </motion.div>
   )
 }
-