mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-06 15:46:37 +08:00
[优化] go 引用调整
This commit is contained in:
ryan
@@ -0,0 +1,29 @@
|
||||
import {apiRequest} from '@/lib/api/client';
|
||||
import type {DnsAccountItem, DnsAccountMutationPayload,} from '@/features/dns-accounts/types';
|
||||
|
||||
export function getDnsAccounts() {
|
||||
return apiRequest<DnsAccountItem[]>('/dns-accounts/');
|
||||
}
|
||||
|
||||
export function createDnsAccount(payload: DnsAccountMutationPayload) {
|
||||
return apiRequest<DnsAccountItem>('/dns-accounts/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
}
|
||||
|
||||
export function updateDnsAccount(
|
||||
id: number,
|
||||
payload: DnsAccountMutationPayload,
|
||||
) {
|
||||
return apiRequest<DnsAccountItem>(`/dns-accounts/${id}/update`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteDnsAccount(id: number) {
|
||||
return apiRequest<void>(`/dns-accounts/${id}/delete`, {
|
||||
method: 'POST',
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
'use client';
|
||||
|
||||
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
|
||||
import {useMemo, useState} from 'react';
|
||||
import Link from 'next/link';
|
||||
import {useForm} from 'react-hook-form';
|
||||
|
||||
import {EmptyState} from '@/components/feedback/empty-state';
|
||||
import {ErrorState} from '@/components/feedback/error-state';
|
||||
import {InlineMessage} from '@/components/feedback/inline-message';
|
||||
import {LoadingState} from '@/components/feedback/loading-state';
|
||||
import {PageHeader} from '@/components/layout/page-header';
|
||||
import {AppCard} from '@/components/ui/app-card';
|
||||
import {AppModal} from '@/components/ui/app-modal';
|
||||
import {createDnsAccount, deleteDnsAccount, getDnsAccounts,} from '@/features/dns-accounts/api/dns-accounts';
|
||||
import type {DnsAccountItem} from '@/features/dns-accounts/types';
|
||||
import {getErrorMessage} from '@/features/websites/utils';
|
||||
import {
|
||||
DangerButton,
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
ResourceSelect,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import {formatDateTime} from '@/lib/utils/date';
|
||||
|
||||
export function DnsAccountsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<{
|
||||
tone: 'info' | 'success' | 'danger';
|
||||
message: string;
|
||||
} | null>(null);
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
|
||||
const dnsAccountsQuery = useQuery({
|
||||
queryKey: ['dns-accounts'],
|
||||
queryFn: getDnsAccounts,
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: deleteDnsAccount,
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: 'DNS 账号已删除。' });
|
||||
await queryClient.invalidateQueries({ queryKey: ['dns-accounts'] });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
},
|
||||
});
|
||||
|
||||
const handleDelete = (account: DnsAccountItem) => {
|
||||
if (!window.confirm(`确认删除 DNS 账号 ${account.name} 吗？`)) {
|
||||
return;
|
||||
}
|
||||
setFeedback(null);
|
||||
deleteMutation.mutate(account.id);
|
||||
};
|
||||
|
||||
const accounts = useMemo(
|
||||
() => dnsAccountsQuery.data ?? [],
|
||||
[dnsAccountsQuery.data],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title="DNS 账号"
|
||||
description="统一管理 DNS 服务商账号，用于 ACME 证书的 DNS 验证申请。"
|
||||
action={
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Link
|
||||
href="/website/certificate"
|
||||
className="inline-flex min-h-[46px] items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
|
||||
>
|
||||
返回
|
||||
</Link>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setIsCreateOpen(true)}
|
||||
>
|
||||
添加账号
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{feedback ? (
|
||||
<InlineMessage
|
||||
tone={feedback.tone}
|
||||
message={feedback.message}
|
||||
onClear={() => setFeedback(null)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<AppCard title="DNS 账号列表">
|
||||
{dnsAccountsQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : dnsAccountsQuery.isError ? (
|
||||
<ErrorState
|
||||
title="加载失败"
|
||||
description={getErrorMessage(dnsAccountsQuery.error)}
|
||||
/>
|
||||
) : accounts.length === 0 ? (
|
||||
<EmptyState
|
||||
title="暂无 DNS 账号"
|
||||
description="点击右上角“添加账号”开始录入。"
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{accounts.map((account) => (
|
||||
<div
|
||||
key={account.id}
|
||||
className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||||
{account.name}{' '}
|
||||
<span className="ml-2 text-xs font-normal text-[var(--foreground-secondary)]">
|
||||
({account.type})
|
||||
</span>
|
||||
</p>
|
||||
<div className="text-xs leading-5 text-[var(--foreground-secondary)]">
|
||||
<p>创建于：{formatDateTime(account.created_at)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<DangerButton
|
||||
type="button"
|
||||
onClick={() => handleDelete(account)}
|
||||
disabled={deleteMutation.isPending}
|
||||
className="px-3 py-2 text-xs"
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
{isCreateOpen && (
|
||||
<DnsAccountCreateModal
|
||||
isOpen={isCreateOpen}
|
||||
onClose={() => setIsCreateOpen(false)}
|
||||
onCreated={() => {
|
||||
setFeedback({ tone: 'success', message: 'DNS 账号已添加。' });
|
||||
setIsCreateOpen(false);
|
||||
queryClient.invalidateQueries({ queryKey: ['dns-accounts'] });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DnsAccountCreateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreated,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCreated: () => void;
|
||||
}) {
|
||||
const [error, setError] = useState('');
|
||||
const { register, handleSubmit, formState } = useForm({
|
||||
defaultValues: { name: '', type: 'cloudflare', authorization: '' },
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: createDnsAccount,
|
||||
onSuccess: onCreated,
|
||||
onError: (err) => setError(getErrorMessage(err)),
|
||||
});
|
||||
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
setError('');
|
||||
// for cloudflare we wrap the token in JSON if it isn't already (the backend expects JSON)
|
||||
let auth = values.authorization;
|
||||
if (!auth.startsWith('{')) {
|
||||
auth = JSON.stringify({ api_token: values.authorization });
|
||||
}
|
||||
createMutation.mutate({ ...values, authorization: auth });
|
||||
});
|
||||
|
||||
return (
|
||||
<AppModal isOpen={isOpen} onClose={onClose} title="添加 DNS 账号">
|
||||
<form onSubmit={onSubmit} className="space-y-5">
|
||||
{error && <InlineMessage tone="danger" message={error} />}
|
||||
<ResourceField
|
||||
label="账号名称"
|
||||
error={formState.errors.name?.message as string}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="Cloudlfare 邮箱账号"
|
||||
{...register('name', { required: '请输入名称' })}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="DNS 服务商">
|
||||
<ResourceSelect {...register('type')}>
|
||||
<option value="cloudflare">Cloudflare</option>
|
||||
</ResourceSelect>
|
||||
</ResourceField>
|
||||
<ResourceField label="API Token" hint="请勿使用 Global API Key">
|
||||
<ResourceInput
|
||||
{...register('authorization', { required: '请输入 Token' })}
|
||||
/>
|
||||
</ResourceField>
|
||||
<PrimaryButton type="submit" disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? '提交中...' : '提交'}
|
||||
</PrimaryButton>
|
||||
</form>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
export interface DnsAccountItem {
|
||||
id: number;
|
||||
name: string;
|
||||
type: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface DnsAccountMutationPayload {
|
||||
name: string;
|
||||
type: string;
|
||||
authorization: string;
|
||||
}
|
||||
Reference in New Issue
Block a user