feat: refactor notification UI and remove background image

src/routes/domain.tsx

@@ -2,6 +2,7 @@
 import {
     addDomain,
     deleteDomain,
+    syncAllDomains,
     syncDomainWHOIS,
     updateDomain,
     useDomainList,
@@ -73,6 +74,7 @@ export default function DomainPage() {
         data: domainData,
         error,
         mutate,
+        isValidating,
     } = useSWR("/api/v1/domains", useDomainList, { revalidateOnFocus: false })
 
     useEffect(() => {
@@ -86,6 +88,16 @@ export default function DomainPage() {
         }
     }, [domainData, error])
 
+    const handleRefreshAll = async () => {
+        try {
+            await syncAllDomains()
+            toast.success("刷新成功", { description: "已触发所有域名的状态同步。" })
+            mutate()
+        } catch (err) {
+            toast.error("刷新失败", { description: (err as Error).message })
+        }
+    }
+
     const handleAddDomain = async () => {
         if (!newDomainName) {
             toast.error("请输入域名")
@@ -219,10 +231,10 @@ export default function DomainPage() {
                         <Button
                             variant="outline"
                             size="icon"
-                            onClick={() => mutate()}
-                            disabled={isLoading}
+                            onClick={handleRefreshAll}
+                            disabled={isValidating}
                         >
-                            <RefreshCw className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
+                            <RefreshCw className={`h-4 w-4 ${isValidating ? "animate-spin" : ""}`} />
                         </Button>
                         <Dialog open={isAddModalOpen} onOpenChange={setIsAddModalOpen}>
                             <DialogTrigger asChild>

src/routes/root.tsx

@@ -4,7 +4,8 @@ import { Toaster } from "@/components/ui/sonner"
 import useSetting from "@/hooks/useSetting"
 import i18n from "@/lib/i18n"
 import { InjectContext } from "@/lib/inject"
-import { useEffect } from "react"
+import { DateTime } from "luxon"
+import { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { Outlet } from "react-router-dom"
 
@@ -36,8 +37,10 @@ export default function Root() {
 
     return (
         <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-            <section className="text-sm mx-auto h-full flex flex-col justify-between">
-                <div>
+            <section
+                className="text-sm mx-auto h-full flex flex-col justify-between relative z-10 bg-background"
+            >
+                <div className="flex-1">
                     <Header />
                     <div className="max-w-5xl mx-auto">
                         <Outlet />

src/routes/settings.tsx

@@ -57,6 +57,8 @@ const settingFormSchema = z.object({
     custom_links: asOptionalField(z.string()),
     background_image_day: asOptionalField(z.string()),
     background_image_night: asOptionalField(z.string()),
+    telegram_bot_token: asOptionalField(z.string()),
+    telegram_admin_chat_id: asOptionalField(z.string()),
 })
 
 export default function SettingsPage() {
@@ -251,6 +253,32 @@ export default function SettingsPage() {
                                 </FormItem>
                             )}
                         />
+                        <FormField
+                            control={form.control}
+                            name="telegram_bot_token"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Telegram Bot Token</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="123456789:ABCDEF..." {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="telegram_admin_chat_id"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Telegram Admin Chat ID</FormLabel>
+                                    <FormControl>
+                                        <Input placeholder="12345678" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
                         <FormField
                             control={form.control}
                             name="language"