refactor: Consolidate configuration management with Zustand store

app/api/admin-contact/route.ts

@@ -1,12 +0,0 @@
-import { getRequestContext } from "@cloudflare/next-on-pages"
-
-export const runtime = "edge"
-
-export async function GET() {
-  const env = getRequestContext().env
-  const adminContact = await env.SITE_CONFIG.get("ADMIN_CONTACT")
-
-  return Response.json({
-    adminContact: adminContact || ""
-  })
-} 

app/api/config/route.ts

@@ -15,7 +15,7 @@ export async function GET() {
 
   return Response.json({
     defaultRole: defaultRole || ROLES.CIVILIAN,
-    emailDomains: emailDomains || "",
+    emailDomains: emailDomains || "moemail.app",
     adminContact: adminContact || "",
     maxEmails: maxEmails || EMAIL_CONFIG.MAX_ACTIVE_EMAILS.toString()
   })

app/api/emails/domains/route.ts

@@ -1,18 +0,0 @@
-import { getRequestContext } from "@cloudflare/next-on-pages"
-import { NextResponse } from "next/server"
-
-export const runtime = "edge"
-
-export async function GET() {
-  try {
-    const domainString = await getRequestContext().env.SITE_CONFIG.get("EMAIL_DOMAINS")
-
-    return NextResponse.json({ domains: domainString ? domainString.split(',') : ["moemail.app"] })
-  } catch (error) {
-    console.error('Failed to fetch domains:', error)
-    return NextResponse.json(
-      { error: "获取域名列表失败" },
-      { status: 500 }
-    )
-  }
-} 

app/components/emails/create-dialog.tsx

@@ -12,16 +12,17 @@ import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { EXPIRY_OPTIONS } from "@/types/email"
 import { useCopy } from "@/hooks/use-copy"
+import { useConfig } from "@/hooks/use-config"
 
 interface CreateDialogProps {
   onEmailCreated: () => void
 }
 
 export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
+  const { config } = useConfig()  
   const [open, setOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const [emailName, setEmailName] = useState("")
-  const [domains, setDomains] = useState<string[]>([])
   const [currentDomain, setCurrentDomain] = useState("")
   const [expiryTime, setExpiryTime] = useState(EXPIRY_OPTIONS[1].value.toString())
   const { toast } = useToast()
@@ -83,16 +84,11 @@ export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
     }
   }
 
-  const fetchDomains = async () => {
-    const response = await fetch("/api/emails/domains");
-    const data = (await response.json()) as { domains: string[] };
-    setDomains(data.domains || []);
-    setCurrentDomain(data.domains[0] || "");
-  };
-
   useEffect(() => {
-    fetchDomains()
-  }, [])
+    if ((config?.emailDomainsArray?.length ?? 0) > 0) {
+      setCurrentDomain(config?.emailDomainsArray[0] ?? "")
+    }
+  }, [config])
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -114,13 +110,13 @@ export function CreateDialog({ onEmailCreated }: CreateDialogProps) {
               placeholder="输入邮箱名"
               className="flex-1"
             />
-            {domains.length > 1 && (
+            {(config?.emailDomainsArray?.length ?? 0) > 1 && (
               <Select value={currentDomain} onValueChange={setCurrentDomain}>
                 <SelectTrigger className="w-[180px]">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {domains.map(d => (
+                  {config?.emailDomainsArray?.map(d => (
                     <SelectItem key={d} value={d}>@{d}</SelectItem>
                   ))}
                 </SelectContent>

app/components/emails/email-list.tsx

@@ -21,6 +21,7 @@ import {
 } from "@/components/ui/alert-dialog"
 import { ROLES } from "@/lib/permissions"
 import { useUserRole } from "@/hooks/use-user-role"
+import { useConfig } from "@/hooks/use-config"
 
 interface Email {
   id: string
@@ -42,6 +43,7 @@ interface EmailResponse {
 
 export function EmailList({ onEmailSelect, selectedEmailId }: EmailListProps) {
   const { data: session } = useSession()
+  const { config } = useConfig()
   const { role } = useUserRole()
   const [emails, setEmails] = useState<Email[]>([])
   const [loading, setLoading] = useState(true)
@@ -49,22 +51,9 @@ export function EmailList({ onEmailSelect, selectedEmailId }: EmailListProps) {
   const [nextCursor, setNextCursor] = useState<string | null>(null)
   const [loadingMore, setLoadingMore] = useState(false)
   const [total, setTotal] = useState(0)
-  const [maxEmails, setMaxEmails] = useState<number>(EMAIL_CONFIG.MAX_ACTIVE_EMAILS)
   const [emailToDelete, setEmailToDelete] = useState<Email | null>(null)
   const { toast } = useToast()
 
-  const fetchMaxEmails = async () => {
-    try {
-      const res = await fetch("/api/config")
-      if (res.ok) {
-        const data = await res.json() as { maxEmails: string }
-        setMaxEmails(Number(data.maxEmails))
-      }
-    } catch (error) {
-      console.error("Failed to fetch max emails:", error)
-    }
-  }
-
   const fetchEmails = async (cursor?: string) => {
     try {
       const url = new URL("/api/emails", window.location.origin)
@@ -125,10 +114,6 @@ export function EmailList({ onEmailSelect, selectedEmailId }: EmailListProps) {
 
   useEffect(() => {
     if (session) fetchEmails()
-    if (session && role !== ROLES.EMPEROR) {
-      fetchMaxEmails()
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session])
 
   const handleDelete = async (email: Email) => {
@@ -189,7 +174,7 @@ export function EmailList({ onEmailSelect, selectedEmailId }: EmailListProps) {
               {role === ROLES.EMPEROR ? (
                 `${total}/∞ 个邮箱`
               ) : (
-                `${total}/${maxEmails} 个邮箱`
+                `${total}/${config?.maxEmails || EMAIL_CONFIG.MAX_ACTIVE_EMAILS} 个邮箱`
               )}
             </span>
           </div>

app/components/no-permission-dialog.tsx

@@ -2,10 +2,10 @@
 
 import { Button } from "@/components/ui/button"
 import { useRouter } from "next/navigation"
-import { useAdminContact } from "@/hooks/use-admin-contact"
+import { useConfig } from "@/hooks/use-config"
 export function NoPermissionDialog() {
   const router = useRouter()
-  const { adminContact } = useAdminContact()
+  const { config } = useConfig()
 
   return (
     <div className="fixed inset-0 bg-background/50 backdrop-blur-sm z-50">
@@ -15,8 +15,8 @@ export function NoPermissionDialog() {
             <h1 className="text-xl md:text-2xl font-bold">权限不足</h1>
             <p className="text-sm md:text-base text-muted-foreground">你没有权限访问此页面，请联系网站管理员</p>
             {
-              adminContact && (
-                <p className="text-sm md:text-base text-muted-foreground">管理员联系方式：{adminContact}</p>
+              config?.adminContact && (
+                <p className="text-sm md:text-base text-muted-foreground">管理员联系方式：{config.adminContact}</p>
               )
             }
             <Button 

app/components/profile/api-key-panel.tsx

@@ -20,7 +20,7 @@ import { Label } from "@/components/ui/label"
 import { useCopy } from "@/hooks/use-copy"
 import { useRolePermission } from "@/hooks/use-role-permission"
 import { PERMISSIONS } from "@/lib/permissions"
-import { useAdminContact } from "@/hooks/use-admin-contact"
+import { useConfig } from "@/hooks/use-config"
 
 type ApiKey = {
   id: string
@@ -68,7 +68,7 @@ export function ApiKeyPanel() {
     }
   }, [canManageApiKey])
 
-  const { adminContact } = useAdminContact()
+  const { config } = useConfig()
 
   const createApiKey = async () => {
     if (!newKeyName.trim()) return
@@ -248,8 +248,8 @@ export function ApiKeyPanel() {
             <p>需要公爵或更高权限才能管理 API Key</p>
             <p className="mt-2">请联系网站管理员升级您的角色</p>
             {
-              adminContact && (
-                <p className="mt-2">管理员联系方式：{adminContact}</p>
+              config?.adminContact && (
+                <p className="mt-2">管理员联系方式：{config.adminContact}</p>
               )
             }
           </div>

app/hooks/use-admin-contact.ts

@@ -1,38 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { useToast } from "@/components/ui/use-toast"
-
-export function useAdminContact() {
-  const [adminContact, setAdminContact] = useState("")
-  const [loading, setLoading] = useState(true)
-  const { toast } = useToast()
-
-  const fetchAdminContact = async () => {
-    try {
-      const res = await fetch("/api/admin-contact")
-      if (!res.ok) throw new Error("获取管理员联系方式失败")
-      const data = await res.json() as { adminContact: string }
-      setAdminContact(data.adminContact)
-    } catch (error) {
-      console.error(error)
-      toast({
-        title: "获取失败",
-        description: "获取管理员联系方式失败",
-        variant: "destructive"
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    fetchAdminContact()
-  }, [])
-
-  return {
-    adminContact,
-    loading,
-    refreshAdminContact: fetchAdminContact
-  }
-} 

app/hooks/use-config.ts

@@ -0,0 +1,62 @@
+"use client"
+
+import { create } from "zustand"
+import { Role, ROLES } from "@/lib/permissions"
+import { EMAIL_CONFIG } from "@/config"
+import { useEffect } from "react"
+
+interface Config {
+  defaultRole: Exclude<Role, typeof ROLES.EMPEROR>
+  emailDomains: string
+  emailDomainsArray: string[]
+  adminContact: string
+  maxEmails: number
+}
+
+interface ConfigStore {
+  config: Config | null
+  loading: boolean
+  error: string | null
+  fetch: () => Promise<void>
+}
+
+const useConfigStore = create<ConfigStore>((set) => ({
+  config: null,
+  loading: false,
+  error: null,
+  fetch: async () => {
+    try {
+      set({ loading: true, error: null })
+      const res = await fetch("/api/config")
+      if (!res.ok) throw new Error("获取配置失败")
+      const data = await res.json() as Config
+      set({
+        config: {
+          defaultRole: data.defaultRole || ROLES.CIVILIAN,
+          emailDomains: data.emailDomains,
+          emailDomainsArray: data.emailDomains.split(','),
+          adminContact: data.adminContact || "",
+          maxEmails: Number(data.maxEmails) || EMAIL_CONFIG.MAX_ACTIVE_EMAILS
+        },
+        loading: false
+      })
+    } catch (error) {
+      set({ 
+        error: error instanceof Error ? error.message : "获取配置失败",
+        loading: false 
+      })
+    }
+  }
+}))
+
+export function useConfig() {
+  const store = useConfigStore()
+
+  useEffect(() => {
+    if (!store.config && !store.loading) {
+      store.fetch()
+    }
+  }, [store.config, store.loading])
+
+  return store
+}