refactor: Consolidate configuration management with Zustand store

This commit is contained in:
beilunyang
2025-03-01 10:29:50 +08:00
parent b1d898e298
commit ea7fd5490c
12 changed files with 110 additions and 129 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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

View File

@@ -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>