Buriburizaemon/admin-frontend-domain
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/admin-frontend-domain.git synced 2026-05-06 05:38:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: refactor notification UI and remove background image

Browse Source
This commit is contained in:
Bot
2026-04-28 00:04:16 +08:00
parent 1e4fae5306
commit 9720bc258f
6 changed files with 130 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/domain.ts
+5
View File
@@ -51,3 +51,8 @@ export const updateDomain = (
export const syncDomainWHOIS = (id: number) => {
return fetcher<Domain>(FetcherMethod.POST, `/api/v1/domains/${id}/sync`)
}
// 同步所有域名
export const syncAllDomains = () => {
return fetcher<any>(FetcherMethod.POST, "/api/v1/domains/sync-all")
}
src/components/notifier.tsx
+25 -27
View File
@@ -55,9 +55,9 @@ const notificationFormSchema = z.object({
request_type: z.coerce.number().int().min(1).max(255),
request_header: z.string(),
request_body: z.string(),
verify_tls: asOptionalField(z.boolean()),
skip_check: asOptionalField(z.boolean()),
format_metric_units: asOptionalField(z.boolean()),
verify_tls: z.boolean().default(false),
skip_check: z.boolean().default(false),
format_metric_units: z.boolean().default(false),
type: z.coerce.number().int().default(1),
})
@@ -75,9 +75,9 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
request_type: data.request_type ?? 1,
request_header: data.request_header ?? "",
request_body: data.request_body ?? "",
verify_tls: (data as any).verify_tls ?? false,
skip_check: (data as any).skip_check ?? false,
format_metric_units: (data as any).format_metric_units ?? false,
verify_tls: data.verify_tls ?? false,
skip_check: data.skip_check ?? false,
format_metric_units: data.format_metric_units ?? false,
type: data.type ?? 1,
}
: {
@@ -319,23 +319,25 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
)}
/>
)}
<div className="pt-4 border-t space-y-3">
<Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
{t("AdvancedSettings")}
</Label>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2">
<FormField
control={form.control}
name="verify_tls"
render={({ field }) => (
<FormItem className="flex items-center space-x-2">
<FormItem className="flex items-center space-x-2 space-y-0 py-1">
<FormControl>
<div className="flex items-center gap-2">
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
<Label className="text-sm">
{t("VerifyTLS")}
</Label>
</div>
</FormControl>
<FormMessage />
<FormLabel className="text-sm font-normal cursor-pointer">
{t("VerifyTLS")}
</FormLabel>
</FormItem>
)}
/>
@@ -343,19 +345,16 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
control={form.control}
name="skip_check"
render={({ field }) => (
<FormItem className="flex items-center space-x-2">
<FormItem className="flex items-center space-x-2 space-y-0 py-1">
<FormControl>
<div className="flex items-center gap-2">
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
<Label className="text-sm">
{t("DoNotSendTestMessage")}
</Label>
</div>
</FormControl>
<FormMessage />
<FormLabel className="text-sm font-normal cursor-pointer">
{t("DoNotSendTestMessage")}
</FormLabel>
</FormItem>
)}
/>
@@ -363,22 +362,21 @@ export const NotifierCard: React.FC<NotifierCardProps> = ({ data, mutate }) => {
control={form.control}
name="format_metric_units"
render={({ field }) => (
<FormItem className="flex items-center space-x-2">
<FormItem className="flex items-center space-x-2 space-y-0 py-1">
<FormControl>
<div className="flex items-center gap-2">
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
/>
<Label className="text-sm">
{t("FormatMetricUnits")}
</Label>
</div>
</FormControl>
<FormMessage />
<FormLabel className="text-sm font-normal cursor-pointer">
{t("FormatMetricUnits")}
</FormLabel>
</FormItem>
)}
/>
</div>
</div>
<DialogFooter className="justify-end">
<DialogClose asChild>
<Button type="button" className="my-2" variant="secondary">
src/components/theme-provider.tsx
+15 -8
View File
@@ -1,4 +1,5 @@
import { createContext, useContext, useEffect, useState } from "react"
import { DateTime } from "luxon"
export type Theme = "dark" | "light" | "system"
@@ -30,22 +31,28 @@ export function ThemeProvider({
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
)
const [hour, setHour] = useState(() => DateTime.now().hour)
useEffect(() => {
const timer = setInterval(() => {
setHour(DateTime.now().hour)
}, 60000)
return () => clearInterval(timer)
}, [])
useEffect(() => {
const root = window.document.documentElement
root.classList.remove("light", "dark")
let effectiveTheme = theme
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
root.classList.add(systemTheme)
return
const isNight = hour >= 18 || hour < 6
effectiveTheme = isNight ? "dark" : "light"
}
root.classList.add(theme)
}, [theme])
root.classList.add(effectiveTheme)
}, [theme, hour])
const value = {
theme,
src/routes/domain.tsx
+15 -3
View File
@@ -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
+6 -3
View File
@@ -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
+28
View File
@@ -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"