个人信息页面增强

frontend/components/common/settings/security.tsx

@@ -3,19 +3,29 @@
 import {useEffect, useMemo, useState} from "react"
 import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
 import {
+  CreditCard,
+  FileText,
   Fingerprint,
+  FolderOpen,
   Globe,
+  Home,
   Info,
+  Layers,
+  LayoutList,
   Loader2,
   Lock,
   Mail,
+  Palette,
   Pencil,
   Plus,
   Server,
   Settings,
   Shield,
+  ShieldCheck,
+  Terminal,
   Trash2,
-  UserPlus
+  UserPlus,
+  UserRound
 } from "lucide-react"
 import {useRouter} from "next/navigation"
 import {motion} from "motion/react"
@@ -93,6 +103,34 @@ function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
 
 
 
+const MENU_GROUPS = [
+  {
+    name: "基础菜单",
+    items: [
+      { path: "/home", label: "首页", description: "系统控制台/个人首页", icon: Home },
+    ]
+  },
+  {
+    name: "管理菜单",
+    items: [
+      { path: "/admin/users", label: "用户管理", description: "查看和管理系统用户列表及其状态", icon: UserRound },
+      { path: "/admin/files", label: "文件管理", description: "查看用户上传文件并清理多余文件", icon: FolderOpen },
+      { path: "/admin/tasks", label: "任务管理", description: "查看和调度系统异步及定时任务", icon: Layers },
+      { path: "/admin/system", label: "系统配置", description: "管理和维护系统基础键值对配置", icon: ShieldCheck },
+      { path: "/admin/logs", label: "系统日志", description: "查看异步任务执行日志和系统运行情况", icon: Terminal },
+      { path: "/admin/settings", label: "系统设置", description: "配置安全验证、邮箱服务及目录显示", icon: Settings, readOnly: true },
+    ]
+  },
+  {
+    name: "文档菜单",
+    items: [
+      { path: "/components", label: "组件库", description: "内置 UI 组件的展示、调试与参考", icon: Palette },
+      { path: "/docs/api", label: "接口文档", description: "系统 Swagger 交互式 API 接口文档", icon: CreditCard },
+      { path: "/docs/how-to-use", label: "使用文档", description: "面向开发与运营的部署使用指南", icon: FileText },
+    ]
+  }
+] as const
+
 export function SecurityMain() {
   const queryClient = useQueryClient()
   const { user, loading } = useAuth()
@@ -170,6 +208,7 @@ export function SecurityMain() {
     },
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["admin", "system-configs"] })
+      await queryClient.invalidateQueries({ queryKey: ["public-config"] })
       toast.success("系统安全配置已更新")
     },
     onError: (error: Error) => {
@@ -177,6 +216,39 @@ export function SecurityMain() {
     },
   })
 
+  const menuDisplayConfig = useMemo(() => {
+    const raw = configs["menu_display_config"]?.value
+    if (!raw) return {} as Record<string, boolean>
+    try {
+      return JSON.parse(raw) as Record<string, boolean>
+    } catch {
+      return {} as Record<string, boolean>
+    }
+  }, [configs])
+
+  const updateMenuConfigMutation = useMutation({
+    mutationFn: async ({ path, enabled }: { path: string; enabled: boolean }) => {
+      const newConfig = { ...menuDisplayConfig, [path]: enabled }
+      const currentCfg = configs["menu_display_config"]
+      await AdminService.updateSystemConfig("menu_display_config", {
+        value: JSON.stringify(newConfig),
+        description: currentCfg?.description || "目录显示配置（JSON 字符串，格式为 {url: enabled}）",
+      })
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["admin", "system-configs"] })
+      await queryClient.invalidateQueries({ queryKey: ["public-config"] })
+      toast.success("目录显示配置已更新")
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "更新配置失败")
+    },
+  })
+
+  const handleMenuToggle = (path: string, checked: boolean) => {
+    updateMenuConfigMutation.mutate({ path, enabled: checked })
+  }
+
   const toggleSourceMutation = useMutation({
     mutationFn: async (source: AuthSource) => {
       await AdminService.toggleAuthSource(source.id, { is_active: !source.is_active })
@@ -828,7 +900,79 @@ export function SecurityMain() {
         <TabsContent value="status" className="pt-4">
           <SystemStatusManager />
         </TabsContent>
-        <TabsContent value="other" />
+        <TabsContent value="other" className="pt-4">
+          <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">
+                  <LayoutList className="size-4" />
+                </div>
+                <div>
+                  <CardTitle className="text-base font-semibold">目录显示管理</CardTitle>
+                  <CardDescription className="text-xs">
+                    配置系统左侧菜单的显示与隐藏状态，适用于所有登录用户。
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="pt-6 space-y-6">
+              {MENU_GROUPS.map((group) => (
+                <div key={group.name} className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-semibold text-muted-foreground tracking-wider uppercase">
+                      {group.name}
+                    </span>
+                    <div className="h-px bg-border/40 flex-1" />
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {group.items.map((item) => {
+                      const Icon = item.icon
+                      const isReadOnly = "readOnly" in item && item.readOnly
+                      const checked = menuDisplayConfig[item.path] !== false
+
+                      return (
+                        <div
+                          key={item.path}
+                          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.5 flex-1 min-w-0 pr-2">
+                            <div className="flex items-center gap-2">
+                              {Icon && <Icon className="size-4 text-indigo-500 shrink-0" />}
+                              <span className="font-medium text-sm text-foreground truncate">{item.label}</span>
+                              {isReadOnly && (
+                                <span className="text-[9px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground border shrink-0">
+                                  不可隐藏
+                                </span>
+                              )}
+                            </div>
+                            <p className="text-xs text-muted-foreground leading-normal line-clamp-2">
+                              {item.description}
+                            </p>
+                          </div>
+                          <div className="flex items-center">
+                            <Switch
+                              checked={checked}
+                              disabled={isReadOnly || updateMenuConfigMutation.isPending}
+                              onCheckedChange={(val) => handleMenuToggle(item.path, val)}
+                            />
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              ))}
+
+              <div className="p-3.5 rounded-lg border border-dashed border-indigo-500/20 bg-indigo-500/5 flex items-start gap-2.5">
+                <Info className="size-4 text-indigo-500 shrink-0 mt-0.5" />
+                <div className="text-xs text-muted-foreground leading-relaxed">
+                  <span className="font-semibold text-foreground">安全提示：</span>
+                  为了防止管理员在关闭“系统设置”后导致无法重新访问此配置页，系统限制了“系统设置”的关闭权限。其它所有菜单均可自由开关，隐藏后对应的分组标题在为空时也会自动隐藏。
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
         <TabsContent value="info" className="pt-4">
           <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
             <Card className="border border-dashed shadow-sm">