style(ui): 优化全局背景与组件视觉样式

RATING3PRO · RATING3PRO · commit a941e20c871a · 2026-03-31T05:21:38.000+08:00
- 移除 Geist 字体依赖，简化布局
- 将背景点阵图案改为模糊半透明效果，提升视觉层次
- 为输入框、选择器、按钮等组件添加毛玻璃背景和柔和阴影
- 调整焦点环颜色与边框透明度，增强整体现代感
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,9 +1,19 @@
 @import "tailwindcss";
 
 body {
-  @apply bg-zinc-50 text-zinc-900;
+  @apply bg-zinc-100 text-zinc-900 relative;
   min-height: 100vh;
-  /* subtle dot pattern for a modern look */
-  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+}
+
+body::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  /* Darker dots */
+  background-image: radial-gradient(#9ca3af 1.5px, transparent 1.5px);
   background-size: 24px 24px;
+  /* Apply blur to the background dots */
+  filter: blur(1px);
+  opacity: 0.6;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,17 +1,6 @@
 import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Secure DoH Proxy | Fast & Privacy-First DNS",
   description: "High-performance, multi-upstream DNS over HTTPS proxy deployed on Cloudflare Edge. Support for Cloudflare, Google, AliDNS, DNSPod, and custom providers.",
@@ -35,9 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className="antialiased">
         {children}
       </body>
     </html>
diff --git a/src/components/DnsTester.tsx b/src/components/DnsTester.tsx
@@ -88,7 +88,7 @@ export default function DnsTester() {
               type="text"
               value={domain}
               onChange={(e) => setDomain(e.target.value)}
-              className="w-full px-4 py-2.5 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-zinc-900 focus:border-transparent outline-none transition-all bg-white/50"
+              className="w-full px-4 py-2.5 rounded-xl border border-white/50 focus:ring-2 focus:ring-zinc-400 focus:border-transparent outline-none transition-all bg-white/40 backdrop-blur-sm shadow-sm"
               placeholder="example.com"
               required
             />
@@ -99,7 +99,7 @@ export default function DnsTester() {
             <select
               value={type}
               onChange={(e) => setType(e.target.value)}
-              className="w-full px-4 py-2.5 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-zinc-900 focus:border-transparent outline-none transition-all bg-white/50"
+              className="w-full px-4 py-2.5 rounded-xl border border-white/50 focus:ring-2 focus:ring-zinc-400 focus:border-transparent outline-none transition-all bg-white/40 backdrop-blur-sm shadow-sm"
             >
               {recordTypes.map((t) => (
                 <option key={t} value={t}>{t}</option>
@@ -117,10 +117,10 @@ export default function DnsTester() {
                 type="button"
                 onClick={() => setProviderId(p.id)}
                 className={clsx(
-                  "px-4 py-2 rounded-full text-sm font-medium transition-all border",
+                  "px-4 py-2 rounded-full text-sm font-medium transition-all border backdrop-blur-md",
                   providerId === p.id
-                    ? "bg-zinc-900 text-white border-zinc-900 shadow-sm"
-                    : "bg-white/50 text-zinc-500 border-zinc-200 hover:border-zinc-300 hover:text-zinc-800"
+                    ? "bg-zinc-900/80 text-white border-zinc-700/50 shadow-md"
+                    : "bg-white/40 text-zinc-600 border-white/50 hover:bg-white/60 hover:text-zinc-900 shadow-sm"
                 )}
               >
                 {p.name}
@@ -136,7 +136,7 @@ export default function DnsTester() {
               type="url"
               value={manualUrl}
               onChange={(e) => setManualUrl(e.target.value)}
-              className="w-full px-4 py-2.5 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-zinc-900 focus:border-transparent outline-none transition-all bg-white/50"
+              className="w-full px-4 py-2.5 rounded-xl border border-white/50 focus:ring-2 focus:ring-zinc-400 focus:border-transparent outline-none transition-all bg-white/40 backdrop-blur-sm shadow-sm"
               placeholder="https://example.com/dns-query"
               required
             />
@@ -149,7 +149,7 @@ export default function DnsTester() {
         <button
           type="submit"
           disabled={loading}
-          className="w-full py-3 mt-2 bg-zinc-900 text-white font-medium rounded-xl shadow-sm hover:bg-zinc-800 transition-all disabled:opacity-70 disabled:hover:bg-zinc-900 flex items-center justify-center space-x-2"
+          className="w-full py-3 mt-2 bg-zinc-900/80 backdrop-blur-md text-white font-medium rounded-xl shadow-md border border-zinc-700/50 hover:bg-zinc-800/90 transition-all disabled:opacity-70 disabled:hover:bg-zinc-900/80 flex items-center justify-center space-x-2"
         >
           {loading ? (
             <>
