499 lines
26 KiB
TypeScript
499 lines
26 KiB
TypeScript
import { App, Button, Form, Input, InputNumber, Select, Skeleton, Switch } from "antd";
|
||
import { AlertTriangle, AtSign, BadgeCheck, KeyRound, MailCheck, RefreshCw, RotateCcw, Save, Send, Server } from "lucide-react";
|
||
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
|
||
import { useBlocker } from "react-router";
|
||
|
||
import { cn } from "@/lib/utils";
|
||
import { getAdminEmailSetting, updateAdminEmailSetting, type EmailSetting } from "@/services/api/wallet";
|
||
import { AdminStatusBadge, configuredSecretText, SettingsSectionCard } from "./admin-ui";
|
||
|
||
type EmailFormValues = Pick<EmailSetting, "enabled" | "host" | "port" | "username" | "password" | "encryption" | "fromEmail" | "fromName">;
|
||
|
||
export default function EmailSettingsPanel() {
|
||
const { message, modal } = App.useApp();
|
||
const [setting, setSetting] = useState<EmailSetting | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [refreshing, setRefreshing] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [dirty, setDirty] = useState(false);
|
||
const [draftEnabled, setDraftEnabled] = useState(false);
|
||
const [loadError, setLoadError] = useState("");
|
||
const [saveError, setSaveError] = useState("");
|
||
const [form] = Form.useForm<EmailFormValues>();
|
||
const requestVersionRef = useRef(0);
|
||
const navigationConfirmOpenRef = useRef(false);
|
||
const navigationTriggerRef = useRef<HTMLElement | null>(null);
|
||
|
||
const load = useCallback(
|
||
async (initial = false, announce = false) => {
|
||
const requestVersion = ++requestVersionRef.current;
|
||
if (initial) setLoading(true);
|
||
else setRefreshing(true);
|
||
setLoadError("");
|
||
try {
|
||
const result = await getAdminEmailSetting();
|
||
if (requestVersion !== requestVersionRef.current) return;
|
||
if (!isEmailSetting(result.setting)) throw new Error("服务端返回的邮件配置格式无效");
|
||
setSetting(result.setting);
|
||
setDirty(false);
|
||
setSaveError("");
|
||
if (announce) message.success("已重新读取当前邮件服务配置");
|
||
} catch (error) {
|
||
if (requestVersion !== requestVersionRef.current) return;
|
||
const errorMessage = error instanceof Error ? error.message : "读取邮件配置失败";
|
||
setLoadError(errorMessage);
|
||
if (!initial) message.error(errorMessage);
|
||
} finally {
|
||
if (requestVersion === requestVersionRef.current) {
|
||
setLoading(false);
|
||
setRefreshing(false);
|
||
}
|
||
}
|
||
},
|
||
[message],
|
||
);
|
||
|
||
useEffect(() => {
|
||
void load(true);
|
||
return () => {
|
||
requestVersionRef.current += 1;
|
||
};
|
||
}, [load]);
|
||
|
||
useEffect(() => {
|
||
if (loading || !setting) return;
|
||
form.setFieldsValue(toEmailFormValues(setting));
|
||
setDraftEnabled(setting.enabled);
|
||
}, [form, loading, setting]);
|
||
|
||
const blocker = useBlocker(dirty && !saving);
|
||
|
||
useEffect(() => {
|
||
const beforeUnload = (event: BeforeUnloadEvent) => {
|
||
if (!dirty || saving) return;
|
||
event.preventDefault();
|
||
};
|
||
window.addEventListener("beforeunload", beforeUnload);
|
||
return () => window.removeEventListener("beforeunload", beforeUnload);
|
||
}, [dirty, saving]);
|
||
|
||
useEffect(() => {
|
||
if (blocker.state !== "blocked" || navigationConfirmOpenRef.current) return;
|
||
navigationConfirmOpenRef.current = true;
|
||
navigationTriggerRef.current = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
|
||
modal.confirm({
|
||
title: "放弃邮件服务调整？",
|
||
content: "当前 SMTP 表单有尚未保存的调整，离开后这些内容会丢失。服务端正在使用的邮件配置不会改变。",
|
||
okText: "放弃并离开",
|
||
cancelText: "继续编辑",
|
||
okButtonProps: { danger: true },
|
||
onOk: () => {
|
||
navigationConfirmOpenRef.current = false;
|
||
navigationTriggerRef.current = null;
|
||
blocker.proceed();
|
||
},
|
||
onCancel: () => {
|
||
navigationConfirmOpenRef.current = false;
|
||
blocker.reset();
|
||
window.requestAnimationFrame(() => {
|
||
const fallback = document.querySelector<HTMLButtonElement>(".admin-email-command-actions button");
|
||
const target = navigationTriggerRef.current?.isConnected ? navigationTriggerRef.current : fallback;
|
||
target?.focus();
|
||
navigationTriggerRef.current = null;
|
||
});
|
||
},
|
||
});
|
||
}, [blocker, modal]);
|
||
|
||
const resetDraft = () => {
|
||
if (!setting || saving) return;
|
||
form.setFieldsValue(toEmailFormValues(setting));
|
||
form.setFields([]);
|
||
setDraftEnabled(setting.enabled);
|
||
setDirty(false);
|
||
setSaveError("");
|
||
message.info("已撤销邮件服务的未保存调整");
|
||
};
|
||
|
||
const requestRefresh = () => {
|
||
if (!dirty) {
|
||
void load(false, true);
|
||
return;
|
||
}
|
||
modal.confirm({
|
||
title: "放弃调整并重新读取？",
|
||
content: "重新读取会丢弃当前 SMTP 表单中的未保存内容，并以服务端配置为准。",
|
||
okText: "放弃并刷新",
|
||
cancelText: "继续编辑",
|
||
okButtonProps: { danger: true },
|
||
onOk: () => load(false, true),
|
||
});
|
||
};
|
||
|
||
const save = async (values: EmailFormValues) => {
|
||
const expected = normalizeEmailFormValues(values);
|
||
setSaving(true);
|
||
setSaveError("");
|
||
try {
|
||
const result = await updateAdminEmailSetting(expected);
|
||
if (!isEmailSetting(result.setting) || !emailResponseMatches(result.setting, expected)) throw new Error("服务端返回的邮件配置与本次保存内容不一致，请重新读取后核对");
|
||
setSetting(result.setting);
|
||
form.setFieldsValue(toEmailFormValues(result.setting));
|
||
setDraftEnabled(result.setting.enabled);
|
||
setDirty(false);
|
||
message.success("注册邮件配置已保存");
|
||
} catch (error) {
|
||
const errorMessage = error instanceof Error ? error.message : "保存邮件配置失败";
|
||
setSaveError(`${errorMessage}。未自动重试，请重新读取当前配置后再决定是否保存。`);
|
||
message.error(errorMessage);
|
||
throw error;
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const submitSave = async () => {
|
||
let values: EmailFormValues;
|
||
try {
|
||
values = await form.validateFields();
|
||
} catch {
|
||
return;
|
||
}
|
||
const validationError = validateEmailDraft(values, setting);
|
||
if (validationError) {
|
||
message.error(validationError);
|
||
return;
|
||
}
|
||
try {
|
||
await save(values);
|
||
} catch {
|
||
// 保存错误已在 save 中就地提示。
|
||
}
|
||
};
|
||
|
||
const toggleEnabled = (enabled: boolean) => {
|
||
if (!setting || saving) return;
|
||
form.setFieldValue("enabled", enabled);
|
||
setDraftEnabled(enabled);
|
||
setDirty(hasEmailChanges({ ...form.getFieldsValue(true), enabled }, setting));
|
||
setSaveError("");
|
||
};
|
||
|
||
if (loading && !setting) {
|
||
return (
|
||
<div className="admin-settings-stack admin-email-settings" aria-label="正在读取邮件服务配置" role="status">
|
||
<div className="admin-email-loading-card">
|
||
<Skeleton active paragraph={{ rows: 7 }} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!setting) {
|
||
return (
|
||
<div className="admin-settings-stack admin-email-settings">
|
||
<div className="admin-email-load-error" role="alert">
|
||
<span className="admin-email-load-error-icon">
|
||
<AlertTriangle className="size-5" aria-hidden="true" />
|
||
</span>
|
||
<div>
|
||
<h2>无法读取邮件服务配置</h2>
|
||
<p>{loadError || "当前没有可显示的配置，请稍后重试。"}</p>
|
||
</div>
|
||
<Button icon={<RefreshCw className="size-4" />} loading={refreshing} onClick={() => void load(false, true)}>
|
||
重新读取
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const currentValues = normalizeEmailFormValues(form.getFieldsValue(true));
|
||
const smtpReady = Boolean(currentValues.host && currentValues.port && currentValues.fromEmail);
|
||
|
||
return (
|
||
<div className="admin-settings-stack admin-email-settings">
|
||
<div className={cn("admin-email-command-bar", dirty && "is-dirty")}>
|
||
<div className="admin-email-command-copy" aria-live="polite">
|
||
<span className="admin-email-command-icon">
|
||
<MailCheck className="size-4" aria-hidden="true" />
|
||
</span>
|
||
<div>
|
||
<strong>{dirty ? "有未保存的邮件调整" : `注册验证码：${setting.enabled ? "已启用" : "未启用"}`}</strong>
|
||
<p>{dirty ? "完成当前配置后保存生效。" : formatSettingTime(setting.updatedAt, "使用系统默认值")}</p>
|
||
</div>
|
||
</div>
|
||
<div className="admin-email-command-actions">
|
||
{dirty ? (
|
||
<Button icon={<RotateCcw className="size-4" />} disabled={saving} onClick={resetDraft}>
|
||
撤销调整
|
||
</Button>
|
||
) : null}
|
||
<Button icon={<RefreshCw className="size-4" />} loading={refreshing} disabled={saving} onClick={requestRefresh}>
|
||
刷新状态
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{loadError || saveError ? (
|
||
<div className="admin-email-inline-alert" role="alert">
|
||
<AlertTriangle className="size-4 shrink-0" aria-hidden="true" />
|
||
<span>{saveError || `${loadError}。页面仍显示上一次成功读取的配置。`}</span>
|
||
</div>
|
||
) : null}
|
||
|
||
<div id="admin-email-delivery" className="admin-settings-anchor">
|
||
<SettingsSectionCard
|
||
className="admin-email-section admin-email-delivery-section"
|
||
icon={<Send className="size-4" aria-hidden="true" />}
|
||
title="1. 是否发送注册邮箱验证码"
|
||
description="这是邮件服务的主开关。关闭时不需要配置 SMTP；开启后再填写连接与发件信息。"
|
||
status={<AdminStatusBadge label={draftEnabled ? (dirty && !setting.enabled ? "待启用" : "已启用") : dirty && setting.enabled ? "待停用" : "未启用"} tone={dirty ? "warning" : draftEnabled ? "success" : "neutral"} />}
|
||
footer={
|
||
!draftEnabled ? (
|
||
<>
|
||
<div className="admin-email-footer-note">
|
||
<BadgeCheck className="size-4" aria-hidden="true" />
|
||
<span>关闭后，普通邮箱注册不再要求邮箱验证码。</span>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{dirty ? (
|
||
<Button icon={<RotateCcw className="size-4" />} disabled={saving} onClick={resetDraft}>
|
||
撤销
|
||
</Button>
|
||
) : null}
|
||
<Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={!dirty || loading || refreshing} onClick={() => void submitSave()}>
|
||
保存设置
|
||
</Button>
|
||
</div>
|
||
</>
|
||
) : undefined
|
||
}
|
||
>
|
||
<div className="admin-email-delivery-policy">
|
||
<span className="admin-email-policy-icon">
|
||
<MailCheck className="size-5" aria-hidden="true" />
|
||
</span>
|
||
<div className="admin-email-policy-copy">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<strong>发送注册邮箱验证码</strong>
|
||
<AdminStatusBadge label="保存后生效" tone="info" />
|
||
</div>
|
||
<p>启用后，普通邮箱注册需要获取并校验 6 位验证码；邮件发送失败时不会创建可用验证码。</p>
|
||
<span>关闭只停止后续验证码邮件，不改变新用户注册开关，也不影响已有账号。</span>
|
||
</div>
|
||
<Switch checked={draftEnabled} disabled={loading || refreshing || saving} aria-label="发送注册邮箱验证码" onChange={toggleEnabled} />
|
||
</div>
|
||
</SettingsSectionCard>
|
||
</div>
|
||
|
||
{draftEnabled ? (
|
||
<div id="admin-email-smtp" className="admin-settings-anchor">
|
||
<SettingsSectionCard
|
||
className="admin-email-section admin-email-configuration-section"
|
||
icon={<Server className="size-4" aria-hidden="true" />}
|
||
title="2. 配置 SMTP 连接与发件身份"
|
||
description="填写邮件服务器、身份验证和发件人信息。保存不会主动探测或发送测试邮件。"
|
||
status={<AdminStatusBadge label={dirty ? "待保存" : smtpReady ? "已配置" : "待配置"} tone={dirty ? "warning" : smtpReady ? "success" : "neutral"} />}
|
||
footer={
|
||
<>
|
||
<div className="admin-email-footer-note">
|
||
<BadgeCheck className="size-4" aria-hidden="true" />
|
||
<span>SMTP 密码由服务端加密保存且不回显明文</span>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{dirty ? (
|
||
<Button icon={<RotateCcw className="size-4" />} disabled={saving} onClick={resetDraft}>
|
||
撤销
|
||
</Button>
|
||
) : null}
|
||
<Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={!dirty || loading || refreshing} onClick={() => void submitSave()}>
|
||
保存并启用
|
||
</Button>
|
||
</div>
|
||
</>
|
||
}
|
||
>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
requiredMark={false}
|
||
disabled={loading || refreshing || saving}
|
||
onValuesChange={() => {
|
||
const values = form.getFieldsValue(true);
|
||
setDraftEnabled(Boolean(values.enabled));
|
||
setDirty(hasEmailChanges(values, setting));
|
||
setSaveError("");
|
||
}}
|
||
>
|
||
<Form.Item name="enabled" valuePropName="checked" hidden>
|
||
<Switch />
|
||
</Form.Item>
|
||
|
||
<div className="admin-email-form-section">
|
||
<FormSectionTitle icon={<Server className="size-4" />} title="服务器连接" description="填写 SMTP 主机、端口和传输加密；STARTTLS 通常使用 587，直接 TLS 通常使用 465。" />
|
||
<div className="admin-email-form-grid is-connection">
|
||
<Form.Item name="host" label="SMTP 主机" extra="仅填写主机名或 IP，不包含协议和端口。">
|
||
<Input autoComplete="off" placeholder="smtp.example.com" />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="port"
|
||
label="SMTP 端口"
|
||
rules={[
|
||
{
|
||
validator: (_, value: number | null | undefined) => (!draftEnabled || (Number(value) >= 1 && Number(value) <= 65535) ? Promise.resolve() : Promise.reject(new Error("请输入 1 至 65535 的端口"))),
|
||
},
|
||
]}
|
||
>
|
||
<InputNumber min={1} max={65535} precision={0} placeholder="587" controls={false} />
|
||
</Form.Item>
|
||
<Form.Item name="encryption" label="连接加密" rules={[{ required: true, message: "请选择连接加密方式" }]}>
|
||
<Select
|
||
options={[
|
||
{ label: "STARTTLS（推荐，通常 587）", value: "starttls" },
|
||
{ label: "直接 TLS（通常 465）", value: "tls" },
|
||
{ label: "无加密（仅限可信网络）", value: "none" },
|
||
]}
|
||
/>
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-email-form-section">
|
||
<FormSectionTitle icon={<KeyRound className="size-4" />} title="SMTP 身份验证" description="服务器要求登录时填写账号和密码；密码留空会保留服务端已配置值。" />
|
||
<div className="admin-email-form-grid">
|
||
<Form.Item name="username" label="SMTP 用户名" extra="通常是完整邮箱地址；无需验证的服务器可留空。">
|
||
<Input autoComplete="off" placeholder="mailer@example.com" />
|
||
</Form.Item>
|
||
<Form.Item name="password" label={setting.hasPassword ? `SMTP 密码（${configuredSecretText}）` : "SMTP 密码"} extra="只在需要新增或替换密码时填写。">
|
||
<Input.Password autoComplete="new-password" placeholder={setting.hasPassword ? "留空保留原密码" : "SMTP 密码或服务商授权码"} />
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-email-form-section">
|
||
<FormSectionTitle icon={<AtSign className="size-4" />} title="发件人身份" description="这组名称和地址会显示在注册验证码邮件的 From 信息中。" />
|
||
<div className="admin-email-form-grid">
|
||
<Form.Item
|
||
name="fromEmail"
|
||
label="发件邮箱"
|
||
rules={[
|
||
{
|
||
validator: (_, value: string | undefined) => (!draftEnabled || !value || isValidEmail(value.trim()) ? Promise.resolve() : Promise.reject(new Error("请输入有效的发件邮箱"))),
|
||
},
|
||
]}
|
||
extra="通常需要与 SMTP 账号或服务商验证域名一致。"
|
||
>
|
||
<Input autoComplete="off" inputMode="email" placeholder="noreply@example.com" />
|
||
</Form.Item>
|
||
<Form.Item
|
||
name="fromName"
|
||
label="发件人名称"
|
||
rules={[
|
||
{
|
||
validator: (_, value: string | undefined) => (!draftEnabled || !value || !/[\r\n]/.test(value) ? Promise.resolve() : Promise.reject(new Error("发件人名称不能包含换行"))),
|
||
},
|
||
]}
|
||
extra="留空时服务端使用“影策”。"
|
||
>
|
||
<Input placeholder="影策" />
|
||
</Form.Item>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
</SettingsSectionCard>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function FormSectionTitle({ icon, title, description }: { icon: ReactNode; title: string; description: string }) {
|
||
return (
|
||
<div className="admin-email-form-section-heading">
|
||
<span>{icon}</span>
|
||
<div>
|
||
<h3>{title}</h3>
|
||
<p>{description}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function toEmailFormValues(setting: EmailSetting): EmailFormValues {
|
||
return {
|
||
enabled: setting.enabled,
|
||
host: setting.host,
|
||
port: setting.port,
|
||
username: setting.username,
|
||
password: "",
|
||
encryption: setting.encryption,
|
||
fromEmail: setting.fromEmail,
|
||
fromName: setting.fromName,
|
||
};
|
||
}
|
||
|
||
function normalizeEmailFormValues(values: Partial<EmailFormValues>): EmailFormValues {
|
||
return {
|
||
enabled: Boolean(values.enabled),
|
||
host: values.host?.trim() || "",
|
||
port: Number(values.port) || 587,
|
||
username: values.username?.trim() || "",
|
||
password: values.password?.trim() || "",
|
||
encryption: values.encryption === "tls" || values.encryption === "none" ? values.encryption : "starttls",
|
||
fromEmail: values.fromEmail?.trim().toLowerCase() || "",
|
||
fromName: values.fromName?.trim() || "影策",
|
||
};
|
||
}
|
||
|
||
function hasEmailChanges(values: Partial<EmailFormValues>, setting: EmailSetting | null) {
|
||
if (!setting) return false;
|
||
const draft = normalizeEmailFormValues(values);
|
||
const saved = normalizeEmailFormValues(toEmailFormValues(setting));
|
||
if (draft.password) return true;
|
||
return (Object.keys(saved) as Array<keyof EmailFormValues>).some((key) => key !== "password" && draft[key] !== saved[key]);
|
||
}
|
||
|
||
function validateEmailDraft(values: EmailFormValues, setting: EmailSetting | null) {
|
||
const draft = normalizeEmailFormValues(values);
|
||
if (!draft.enabled) return "";
|
||
if (/\r|\n/.test(draft.fromName)) return "发件人名称不能包含换行";
|
||
if (!draft.host || draft.port < 1 || draft.port > 65535 || !draft.fromEmail) return "启用注册邮件前请完整填写 SMTP 主机、端口和发件邮箱";
|
||
if (!isValidEmail(draft.fromEmail)) return "发件邮箱格式不正确";
|
||
if (draft.username && !draft.password && !setting?.hasPassword) return "SMTP 用户名已填写，请同时填写密码或服务商授权码";
|
||
return "";
|
||
}
|
||
|
||
function emailResponseMatches(setting: EmailSetting, expected: EmailFormValues) {
|
||
const actual = normalizeEmailFormValues(toEmailFormValues(setting));
|
||
const fields: Array<keyof EmailFormValues> = ["enabled", "host", "port", "username", "encryption", "fromEmail", "fromName"];
|
||
if (expected.password && !setting.hasPassword) return false;
|
||
return fields.every((key) => actual[key] === expected[key]);
|
||
}
|
||
|
||
function isEmailSetting(value: unknown): value is EmailSetting {
|
||
if (!value || typeof value !== "object") return false;
|
||
const setting = value as Partial<EmailSetting>;
|
||
return (
|
||
typeof setting.enabled === "boolean" &&
|
||
typeof setting.host === "string" &&
|
||
typeof setting.port === "number" &&
|
||
typeof setting.username === "string" &&
|
||
["starttls", "tls", "none"].includes(setting.encryption || "") &&
|
||
typeof setting.fromEmail === "string" &&
|
||
typeof setting.fromName === "string" &&
|
||
typeof setting.hasPassword === "boolean"
|
||
);
|
||
}
|
||
|
||
function isValidEmail(value: string) {
|
||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
||
}
|
||
|
||
function formatSettingTime(value: string | undefined, fallback: string) {
|
||
if (!value) return fallback;
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime()) || date.getFullYear() < 2000) return fallback;
|
||
return `更新于 ${date.toLocaleString("zh-CN", { hour12: false })}`;
|
||
}
|