prettier

frontend/components/common/settings/appearance.tsx

@@ -1,209 +1,251 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import Link from "next/link"
-import { Moon, Sun, Loader2, Check, Monitor } from "lucide-react"
-import { useTheme } from "next-themes"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
-import { useCustomTheme } from "@/lib/theme"
-import { cn } from "@/lib/utils"
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
+import * as React from 'react';
+import Link from 'next/link';
+import { Check, Loader2, Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { useCustomTheme } from '@/lib/theme';
+import { cn } from '@/lib/utils';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
 
 function ThemeModeSection() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   const modes = [
-    { id: "light", name: "明亮", icon: Sun },
-    { id: "dark", name: "黑暗", icon: Moon },
-    { id: "system", name: "自动", icon: Monitor }
-  ]
+    { id: 'light', name: '明亮', icon: Sun },
+    { id: 'dark', name: '黑暗', icon: Moon },
+    { id: 'system', name: '自动', icon: Monitor },
+  ];
 
   if (!mounted) {
     return (
-      <div className="space-y-6">
+      <div className='space-y-6'>
         <div>
-          <h2 className="font-medium text-sm text-foreground">主题模式</h2>
-          <p className="text-xs text-muted-foreground">
+          <h2 className='font-medium text-sm text-foreground'>主题模式</h2>
+          <p className='text-xs text-muted-foreground'>
             选择应用程序的整体明暗主题
           </p>
         </div>
-        <div className="flex gap-2">
+        <div className='flex gap-2'>
           {modes.map((mode) => {
-            const Icon = mode.icon
+            const Icon = mode.icon;
             return (
               <Button
                 key={mode.id}
-                variant="secondary"
-                size="sm"
-                className="flex-1 text-xs"
+                variant='secondary'
+                size='sm'
+                className='flex-1 text-xs'
               >
-                {Icon && <Icon className="size-3 mr-1" />}
+                {Icon && <Icon className='size-3 mr-1' />}
                 {mode.name}
               </Button>
-            )
+            );
           })}
         </div>
       </div>
-    )
+    );
   }
 
   return (
-    <div className="space-y-6">
+    <div className='space-y-6'>
       <div>
-        <h2 className="font-medium text-sm text-foreground">主题模式</h2>
-        <p className="text-xs text-muted-foreground">
+        <h2 className='font-medium text-sm text-foreground'>主题模式</h2>
+        <p className='text-xs text-muted-foreground'>
           选择应用程序的整体明暗主题
         </p>
       </div>
 
-      <div className="flex gap-2">
+      <div className='flex gap-2'>
         {modes.map((mode) => {
-          const Icon = mode.icon
-          const isActive = theme === mode.id
+          const Icon = mode.icon;
+          const isActive = theme === mode.id;
 
           return (
             <Button
               key={mode.id}
-              variant={isActive ? "default" : "secondary"}
-              size="sm"
+              variant={isActive ? 'default' : 'secondary'}
+              size='sm'
               onClick={() => setTheme(mode.id)}
-              className="flex-1 text-xs"
+              className='flex-1 text-xs'
             >
-              {Icon && <Icon className="size-3 mr-1" />}
+              {Icon && <Icon className='size-3 mr-1' />}
               {mode.name}
             </Button>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
 }
 
 function InterfaceAppearanceSection() {
-  const { themes, currentThemeId, setTheme: setCustomTheme, isLoading } = useCustomTheme()
-  const { theme: mode } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-  const [switching, setSwitching] = React.useState<string | null>(null)
+  const {
+    themes,
+    currentThemeId,
+    setTheme: setCustomTheme,
+    isLoading,
+  } = useCustomTheme();
+  const { theme: mode } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+  const [switching, setSwitching] = React.useState<string | null>(null);
 
   React.useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   const handleSetTheme = (themeId: string) => {
-    if (switching === themeId) return
-    setSwitching(themeId)
+    if (switching === themeId) return;
+    setSwitching(themeId);
     try {
-      setCustomTheme(themeId)
-      const themeName = themes.find(t => t.id === themeId)?.name || themeId
-      toast.success(`外观已切换为 ${ themeName }`)
+      setCustomTheme(themeId);
+      const themeName = themes.find((t) => t.id === themeId)?.name || themeId;
+      toast.success(`外观已切换为 ${themeName}`);
     } catch {
-      toast.error("切换失败")
+      toast.error('切换失败');
     } finally {
-      setSwitching(null)
+      setSwitching(null);
     }
-  }
+  };
 
-  const isDark = mounted && (mode === 'dark' || (mode === 'system' && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches))
+  const isDark =
+    mounted &&
+    (mode === 'dark' ||
+      (mode === 'system' &&
+        typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches));
 
   return (
-    <div className="space-y-6">
+    <div className='space-y-6'>
       <div>
-        <h2 className="font-medium text-sm text-foreground">界面外观</h2>
-        <p className="text-xs text-muted-foreground">
+        <h2 className='font-medium text-sm text-foreground'>界面外观</h2>
+        <p className='text-xs text-muted-foreground'>
           选择界面的配色方案和视觉风格
         </p>
       </div>
 
       <div>
         {isLoading ? (
-          <div className="flex items-center justify-center p-12">
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground/50" />
+          <div className='flex items-center justify-center p-12'>
+            <Loader2 className='h-8 w-8 animate-spin text-muted-foreground/50' />
           </div>
         ) : (
-          <div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
+          <div className='grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6'>
             {themes.map((theme) => {
-              const isActive = currentThemeId === theme.id || (!currentThemeId && theme.id === "default.css")
-              const isSwitching = switching === theme.id
-              const colors = isDark ? theme.colors.dark : theme.colors.light
+              const isActive =
+                currentThemeId === theme.id ||
+                (!currentThemeId && theme.id === 'default.css');
+              const isSwitching = switching === theme.id;
+              const colors = isDark ? theme.colors.dark : theme.colors.light;
 
               return (
                 <div
                   key={theme.id}
                   onClick={() => handleSetTheme(theme.id)}
                   className={cn(
-                    "group relative cursor-pointer rounded-xl border transition-all overflow-hidden",
+                    'group relative cursor-pointer rounded-xl border transition-all overflow-hidden',
                     isActive
-                      ? "border-primary ring-2 ring-primary/20"
-                      : "border-border hover:border-border/50 hover:shadow-md"
+                      ? 'border-primary ring-2 ring-primary/20'
+                      : 'border-border hover:border-border/50 hover:shadow-md',
                   )}
                 >
                   <div
-                    className="aspect-[4/3] w-full relative"
-                    style={{ backgroundColor: colors.background || colors['background'] }}
+                    className='aspect-[4/3] w-full relative'
+                    style={{
+                      backgroundColor:
+                        colors.background || colors['background'],
+                    }}
                   >
-                    <div className="flex h-full p-2 gap-2">
+                    <div className='flex h-full p-2 gap-2'>
                       <div
-                        className="w-1/4 h-full rounded-sm opacity-80"
-                        style={{ backgroundColor: colors.sidebar || colors['sidebar'] }}
+                        className='w-1/4 h-full rounded-sm opacity-80'
+                        style={{
+                          backgroundColor: colors.sidebar || colors['sidebar'],
+                        }}
                       />
-                      <div className="flex-1 space-y-1.5 pt-1">
+                      <div className='flex-1 space-y-1.5 pt-1'>
                         <div
-                          className="h-1.5 w-1/3 rounded-full opacity-90"
-                          style={{ backgroundColor: colors.primary || colors['primary'] }}
+                          className='h-1.5 w-1/3 rounded-full opacity-90'
+                          style={{
+                            backgroundColor:
+                              colors.primary || colors['primary'],
+                          }}
                         />
                         <div
-                          className="h-8 w-full rounded-sm opacity-40"
-                          style={{ backgroundColor: colors.sidebar || colors['sidebar'] }}
+                          className='h-8 w-full rounded-sm opacity-40'
+                          style={{
+                            backgroundColor:
+                              colors.sidebar || colors['sidebar'],
+                          }}
                         />
                         <div
-                          className="h-4 w-1/2 rounded-sm opacity-30"
-                          style={{ backgroundColor: colors.sidebar || colors['sidebar'] }}
+                          className='h-4 w-1/2 rounded-sm opacity-30'
+                          style={{
+                            backgroundColor:
+                              colors.sidebar || colors['sidebar'],
+                          }}
                         />
                       </div>
                     </div>
 
                     {isActive && !isSwitching && (
-                      <div className="absolute top-2 right-2 z-10 bg-primary text-primary-foreground rounded-full p-0.5 shadow-sm">
-                        <Check className="h-3 w-3" />
+                      <div className='absolute top-2 right-2 z-10 bg-primary text-primary-foreground rounded-full p-0.5 shadow-sm'>
+                        <Check className='h-3 w-3' />
                       </div>
                     )}
                   </div>
 
-                  <div className="p-2 border-t border-border/50 bg-card">
-                    <div className={cn("text-[10px] font-medium text-center truncate transition-colors", isActive ? "text-primary" : "text-muted-foreground")}>
+                  <div className='p-2 border-t border-border/50 bg-card'>
+                    <div
+                      className={cn(
+                        'text-[10px] font-medium text-center truncate transition-colors',
+                        isActive ? 'text-primary' : 'text-muted-foreground',
+                      )}
+                    >
                       {theme.name}
                     </div>
                   </div>
                 </div>
-              )
+              );
             })}
           </div>
         )}
       </div>
     </div>
-  )
+  );
 }
 
 export function AppearanceMain() {
   return (
-    <div className="py-6 space-y-6">
-      <div className="font-semibold">
+    <div className='py-6 space-y-6'>
+      <div className='font-semibold'>
         <Breadcrumb>
           <BreadcrumbList>
             <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link href="/settings" className="text-base text-primary">设置</Link>
+                <Link href='/settings' className='text-base text-primary'>
+                  设置
+                </Link>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
-              <BreadcrumbPage className="text-base font-semibold">外观设置</BreadcrumbPage>
+              <BreadcrumbPage className='text-base font-semibold'>
+                外观设置
+              </BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>
@@ -213,12 +255,14 @@ export function AppearanceMain() {
 
       <InterfaceAppearanceSection />
 
-      <div className="space-y-4 opacity-50 pointer-events-none grayscale">
-        <h2 className="font-medium text-sm text-muted-foreground">即将推出</h2>
-        <div className="bg-muted/30 rounded-xl p-6 h-32 flex items-center justify-center border border-border/50">
-          <span className="text-sm text-muted-foreground">更多自定义选项正在开发中...</span>
+      <div className='space-y-4 opacity-50 pointer-events-none grayscale'>
+        <h2 className='font-medium text-sm text-muted-foreground'>即将推出</h2>
+        <div className='bg-muted/30 rounded-xl p-6 h-32 flex items-center justify-center border border-border/50'>
+          <span className='text-sm text-muted-foreground'>
+            更多自定义选项正在开发中...
+          </span>
         </div>
       </div>
     </div>
-  )
+  );
 }