1014 lines
44 KiB
TypeScript
1014 lines
44 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||
import { Textarea } from '@/components/ui/textarea';
|
||
import { Switch } from '@/components/ui/switch';
|
||
import { useSiteConfig } from '@/lib/site-config';
|
||
import { useAuth } from '@/lib/auth-store';
|
||
import { Crown, Globe, Loader2, Logs, Mail, Save, Send, ToggleLeft, Upload } from 'lucide-react';
|
||
import { toast } from 'sonner';
|
||
// ============================================================
|
||
// Tab 6: Settings
|
||
// ============================================================
|
||
|
||
type EmailSettingsForm = {
|
||
enabled: boolean;
|
||
smtpHost: string;
|
||
smtpPort: number;
|
||
smtpSecure: boolean;
|
||
smtpUser: string;
|
||
smtpPassword: string;
|
||
smtpPasswordPreview: string;
|
||
fromEmail: string;
|
||
fromName: string;
|
||
replyTo: string;
|
||
appName: string;
|
||
appBaseUrl: string;
|
||
logoUrl: string;
|
||
contactEmail: string;
|
||
copyright: string;
|
||
codeLength: number;
|
||
codeCharset: 'alphanumeric' | 'numeric' | 'letters';
|
||
codeTtlMinutes: number;
|
||
};
|
||
|
||
type EmailRecipient = {
|
||
id: string;
|
||
email: string;
|
||
nickname: string;
|
||
phone: string | null;
|
||
avatarUrl: string | null;
|
||
emailVerified: boolean;
|
||
};
|
||
|
||
type SettingsSection = 'site' | 'footer' | 'logs' | 'email' | 'mail' | 'features';
|
||
|
||
const DEFAULT_EMAIL_SETTINGS: EmailSettingsForm = {
|
||
enabled: false,
|
||
smtpHost: '',
|
||
smtpPort: 465,
|
||
smtpSecure: true,
|
||
smtpUser: '',
|
||
smtpPassword: '',
|
||
smtpPasswordPreview: '****',
|
||
fromEmail: '',
|
||
fromName: '妙境官方通知',
|
||
replyTo: '',
|
||
appName: '妙境',
|
||
appBaseUrl: '',
|
||
logoUrl: '/logo.png',
|
||
contactEmail: '',
|
||
copyright: '',
|
||
codeLength: 6,
|
||
codeCharset: 'alphanumeric',
|
||
codeTtlMinutes: 5,
|
||
};
|
||
|
||
function SectionMenu<T extends string>({
|
||
items,
|
||
activeValue,
|
||
onChange,
|
||
}: {
|
||
items: Array<{ value: T; label: string; description?: string }>;
|
||
activeValue: T;
|
||
onChange: (value: T) => void;
|
||
}) {
|
||
return (
|
||
<div className="overflow-x-auto rounded-lg border border-border bg-card p-1">
|
||
<div className="flex min-w-max gap-1">
|
||
{items.map(item => {
|
||
const active = activeValue === item.value;
|
||
return (
|
||
<button
|
||
key={item.value}
|
||
type="button"
|
||
onClick={() => onChange(item.value)}
|
||
className={`min-w-40 rounded-md px-4 py-3 text-left transition-colors ${
|
||
active ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
|
||
}`}
|
||
>
|
||
<span className="block text-sm font-semibold">{item.label}</span>
|
||
{item.description && <span className="mt-1 block text-xs opacity-75">{item.description}</span>}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function SettingsTab() {
|
||
const { config: siteConfig, loaded: siteConfigLoaded, saveSiteConfig } = useSiteConfig();
|
||
const { accessToken } = useAuth();
|
||
const logoInputRef = useRef<HTMLInputElement>(null);
|
||
const faviconInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
// Local form state (not committed until save)
|
||
const [formSiteName, setFormSiteName] = useState('');
|
||
const [formTabTitle, setFormTabTitle] = useState('');
|
||
const [formLogoBase64, setFormLogoBase64] = useState<string | null>(null);
|
||
const [formFaviconBase64, setFormFaviconBase64] = useState<string | null>(null);
|
||
const [formMembershipEnabled, setFormMembershipEnabled] = useState(true);
|
||
const [formTermsOfService, setFormTermsOfService] = useState('');
|
||
const [formPrivacyPolicy, setFormPrivacyPolicy] = useState('');
|
||
const [formAboutUs, setFormAboutUs] = useState('');
|
||
const [formHelpCenter, setFormHelpCenter] = useState('');
|
||
const [formFilingInfo, setFormFilingInfo] = useState('');
|
||
const [formFilingUrl, setFormFilingUrl] = useState('');
|
||
const [formPublicSecurityFilingInfo, setFormPublicSecurityFilingInfo] = useState('');
|
||
const [formPublicSecurityFilingUrl, setFormPublicSecurityFilingUrl] = useState('');
|
||
const [formLogRetentionDays, setFormLogRetentionDays] = useState(30);
|
||
const [saving, setSaving] = useState(false);
|
||
const [initialized, setInitialized] = useState(false);
|
||
const [emailSettings, setEmailSettings] = useState<EmailSettingsForm>(DEFAULT_EMAIL_SETTINGS);
|
||
const [emailPreviewHtml, setEmailPreviewHtml] = useState('');
|
||
const [emailLoading, setEmailLoading] = useState(false);
|
||
const [emailSaving, setEmailSaving] = useState(false);
|
||
const [emailTesting, setEmailTesting] = useState(false);
|
||
const [testEmail, setTestEmail] = useState('');
|
||
const [mailMode, setMailMode] = useState<'all' | 'selected'>('selected');
|
||
const [mailKind, setMailKind] = useState<'notification' | 'admin'>('notification');
|
||
const [mailTitle, setMailTitle] = useState('');
|
||
const [mailContent, setMailContent] = useState('');
|
||
const [mailButtonText, setMailButtonText] = useState('');
|
||
const [mailButtonUrl, setMailButtonUrl] = useState('');
|
||
const [recipientQuery, setRecipientQuery] = useState('');
|
||
const [recipientTotal, setRecipientTotal] = useState(0);
|
||
const [recipientResults, setRecipientResults] = useState<EmailRecipient[]>([]);
|
||
const [selectedRecipients, setSelectedRecipients] = useState<EmailRecipient[]>([]);
|
||
const [recipientsLoading, setRecipientsLoading] = useState(false);
|
||
const [mailSending, setMailSending] = useState(false);
|
||
const [activeSection, setActiveSection] = useState<SettingsSection>('site');
|
||
|
||
// Sync site config to form when loaded
|
||
useEffect(() => {
|
||
if (siteConfigLoaded && !initialized) {
|
||
setFormSiteName(siteConfig.siteName);
|
||
setFormTabTitle(siteConfig.siteTabTitle);
|
||
setFormTermsOfService(siteConfig.termsOfService);
|
||
setFormPrivacyPolicy(siteConfig.privacyPolicy);
|
||
setFormAboutUs(siteConfig.aboutUs);
|
||
setFormHelpCenter(siteConfig.helpCenter);
|
||
setFormFilingInfo(siteConfig.filingInfo);
|
||
setFormFilingUrl(siteConfig.filingUrl);
|
||
setFormPublicSecurityFilingInfo(siteConfig.publicSecurityFilingInfo);
|
||
setFormPublicSecurityFilingUrl(siteConfig.publicSecurityFilingUrl);
|
||
setFormLogRetentionDays(siteConfig.logRetentionDays);
|
||
setInitialized(true);
|
||
}
|
||
}, [siteConfig, siteConfigLoaded, initialized]);
|
||
|
||
useEffect(() => {
|
||
setFormMembershipEnabled(siteConfig.membershipEnabled !== false);
|
||
}, [siteConfig.membershipEnabled]);
|
||
|
||
const loadEmailSettings = useCallback(async () => {
|
||
if (!accessToken) return;
|
||
setEmailLoading(true);
|
||
try {
|
||
const response = await fetch('/api/admin/email-settings', {
|
||
headers: { Authorization: `Bearer ${accessToken}` },
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) throw new Error(data.error || '邮箱配置加载失败');
|
||
setEmailSettings({ ...DEFAULT_EMAIL_SETTINGS, ...(data.settings || {}), smtpPassword: '' });
|
||
setEmailPreviewHtml(data.preview || '');
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : '邮箱配置加载失败');
|
||
} finally {
|
||
setEmailLoading(false);
|
||
}
|
||
}, [accessToken]);
|
||
|
||
useEffect(() => {
|
||
loadEmailSettings();
|
||
}, [loadEmailSettings]);
|
||
|
||
const loadEmailRecipients = useCallback(async (query = '') => {
|
||
if (!accessToken) return;
|
||
setRecipientsLoading(true);
|
||
try {
|
||
const params = new URLSearchParams();
|
||
if (query.trim()) params.set('q', query.trim());
|
||
params.set('limit', '40');
|
||
const response = await fetch(`/api/admin/email-recipients?${params.toString()}`, {
|
||
headers: { Authorization: `Bearer ${accessToken}` },
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) throw new Error(data.error || '收件用户加载失败');
|
||
setRecipientResults(Array.isArray(data.users) ? data.users : []);
|
||
setRecipientTotal(Number(data.total || 0));
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : '收件用户加载失败');
|
||
} finally {
|
||
setRecipientsLoading(false);
|
||
}
|
||
}, [accessToken]);
|
||
|
||
useEffect(() => {
|
||
if (mailMode !== 'selected') return;
|
||
const timer = window.setTimeout(() => {
|
||
loadEmailRecipients(recipientQuery);
|
||
}, 250);
|
||
return () => window.clearTimeout(timer);
|
||
}, [mailMode, recipientQuery, loadEmailRecipients]);
|
||
|
||
useEffect(() => {
|
||
if (mailMode === 'all') {
|
||
loadEmailRecipients('');
|
||
}
|
||
}, [mailMode, loadEmailRecipients]);
|
||
|
||
const handleFileUpload = async (
|
||
file: File,
|
||
setter: (val: string | null) => void,
|
||
maxSizeKB: number = 2048,
|
||
targetSize: number = 64,
|
||
) => {
|
||
if (file.size > maxSizeKB * 1024) {
|
||
toast.error(`文件大小不能超过 ${maxSizeKB >= 1024 ? `${maxSizeKB / 1024}MB` : `${maxSizeKB}KB`}`);
|
||
return;
|
||
}
|
||
|
||
// SVG: read as text data URL directly
|
||
if (file.type === 'image/svg+xml') {
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
const result = e.target?.result as string;
|
||
if (result) setter(result);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
return;
|
||
}
|
||
|
||
// PNG/JPG: resize to target dimensions
|
||
try {
|
||
const bitmap = await createImageBitmap(file);
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = targetSize;
|
||
canvas.height = targetSize;
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) { toast.error('浏览器不支持 Canvas'); return; }
|
||
ctx.drawImage(bitmap, 0, 0, targetSize, targetSize);
|
||
bitmap.close();
|
||
setter(canvas.toDataURL('image/png'));
|
||
} catch {
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
const result = e.target?.result as string;
|
||
if (result) setter(result);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
setSaving(true);
|
||
try {
|
||
await saveSiteConfig({
|
||
siteName: formSiteName,
|
||
siteTabTitle: formTabTitle,
|
||
logoBase64: formLogoBase64 || undefined,
|
||
faviconBase64: formFaviconBase64 || undefined,
|
||
membershipEnabled: formMembershipEnabled,
|
||
termsOfService: formTermsOfService,
|
||
privacyPolicy: formPrivacyPolicy,
|
||
aboutUs: formAboutUs,
|
||
helpCenter: formHelpCenter,
|
||
filingInfo: formFilingInfo,
|
||
filingUrl: formFilingUrl,
|
||
publicSecurityFilingInfo: formPublicSecurityFilingInfo,
|
||
publicSecurityFilingUrl: formPublicSecurityFilingUrl,
|
||
logRetentionDays: formLogRetentionDays,
|
||
});
|
||
// Clear pending uploads after save
|
||
setFormLogoBase64(null);
|
||
setFormFaviconBase64(null);
|
||
toast.success('网站配置已保存，所有访客将看到更新');
|
||
} catch (err) {
|
||
toast.error(err instanceof Error ? err.message : '保存失败');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleMembershipToggle = async (checked: boolean) => {
|
||
setFormMembershipEnabled(checked);
|
||
try {
|
||
await saveSiteConfig({ membershipEnabled: checked });
|
||
toast.success(checked ? '会员功能已开启' : '会员功能已关闭');
|
||
} catch (err) {
|
||
setFormMembershipEnabled(!checked);
|
||
toast.error(err instanceof Error ? err.message : '会员功能保存失败');
|
||
}
|
||
};
|
||
|
||
const handleEmailSettingChange = <K extends keyof EmailSettingsForm>(key: K, value: EmailSettingsForm[K]) => {
|
||
setEmailSettings(prev => ({ ...prev, [key]: value }));
|
||
};
|
||
|
||
const handleSaveEmailSettings = async () => {
|
||
if (!accessToken) return;
|
||
setEmailSaving(true);
|
||
try {
|
||
const payload = {
|
||
...emailSettings,
|
||
smtpPassword: emailSettings.smtpPassword || undefined,
|
||
};
|
||
const response = await fetch('/api/admin/email-settings', {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: `Bearer ${accessToken}`,
|
||
},
|
||
body: JSON.stringify(payload),
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) throw new Error(data.error || '邮箱配置保存失败');
|
||
setEmailSettings({ ...DEFAULT_EMAIL_SETTINGS, ...(data.settings || {}), smtpPassword: '' });
|
||
toast.success(data.message || '邮箱配置已保存');
|
||
loadEmailSettings();
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : '邮箱配置保存失败');
|
||
} finally {
|
||
setEmailSaving(false);
|
||
}
|
||
};
|
||
|
||
const handleSendTestEmail = async () => {
|
||
if (!accessToken) return;
|
||
if (!testEmail) {
|
||
toast.error('请填写测试收件邮箱');
|
||
return;
|
||
}
|
||
setEmailTesting(true);
|
||
try {
|
||
const response = await fetch('/api/admin/email-settings', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: `Bearer ${accessToken}`,
|
||
},
|
||
body: JSON.stringify({ to: testEmail }),
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) throw new Error(data.error || '测试邮件发送失败');
|
||
toast.success(data.message || '测试邮件已发送');
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : '测试邮件发送失败');
|
||
} finally {
|
||
setEmailTesting(false);
|
||
}
|
||
};
|
||
|
||
const selectedRecipientIds = useMemo(
|
||
() => new Set(selectedRecipients.map(user => user.id)),
|
||
[selectedRecipients],
|
||
);
|
||
|
||
const toggleRecipient = (user: EmailRecipient) => {
|
||
setSelectedRecipients(prev => {
|
||
if (prev.some(item => item.id === user.id)) {
|
||
return prev.filter(item => item.id !== user.id);
|
||
}
|
||
return [...prev, user];
|
||
});
|
||
};
|
||
|
||
const handleSendUserEmail = async () => {
|
||
if (!accessToken) return;
|
||
if (!mailTitle.trim() || !mailContent.trim()) {
|
||
toast.error('请填写邮件标题和正文内容');
|
||
return;
|
||
}
|
||
if (mailMode === 'selected' && selectedRecipients.length === 0) {
|
||
toast.error('请至少选择一个收件用户');
|
||
return;
|
||
}
|
||
|
||
const confirmed = window.confirm(
|
||
mailMode === 'all'
|
||
? `确定要发送给全部 ${recipientTotal || '非管理员'} 用户吗？`
|
||
: `确定要发送给 ${selectedRecipients.length} 个指定用户吗？`,
|
||
);
|
||
if (!confirmed) return;
|
||
|
||
setMailSending(true);
|
||
try {
|
||
const response = await fetch('/api/admin/send-email', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Authorization: `Bearer ${accessToken}`,
|
||
},
|
||
body: JSON.stringify({
|
||
mode: mailMode,
|
||
userIds: mailMode === 'selected' ? selectedRecipients.map(user => user.id) : undefined,
|
||
mailKind,
|
||
title: mailTitle,
|
||
content: mailContent,
|
||
buttonText: mailButtonText || undefined,
|
||
buttonUrl: mailButtonUrl || undefined,
|
||
}),
|
||
});
|
||
const data = await response.json().catch(() => ({}));
|
||
if (!response.ok) throw new Error(data.error || data.message || '邮件发送失败');
|
||
toast.success(data.message || '邮件已发送');
|
||
if (!data.failedCount) {
|
||
setMailTitle('');
|
||
setMailContent('');
|
||
setMailButtonText('');
|
||
setMailButtonUrl('');
|
||
setSelectedRecipients([]);
|
||
}
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : '邮件发送失败');
|
||
} finally {
|
||
setMailSending(false);
|
||
}
|
||
};
|
||
|
||
const currentLogoSrc = formLogoBase64 || siteConfig.logoUrl || '/logo.png';
|
||
const currentFaviconSrc = formFaviconBase64 || siteConfig.faviconUrl || '/favicon.png';
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<SectionMenu
|
||
items={[
|
||
{ value: 'site', label: '网站配置', description: '名称、Logo、备案' },
|
||
{ value: 'footer', label: '页脚页面', description: '关于、条款、隐私、帮助' },
|
||
{ value: 'logs', label: '日志设置', description: `保存 ${formLogRetentionDays} 天` },
|
||
{ value: 'email', label: '邮箱服务', description: emailSettings.enabled ? '已启用' : '未启用' },
|
||
{ value: 'mail', label: '用户邮件', description: mailMode === 'all' ? '全部用户' : `${selectedRecipients.length} 个收件人` },
|
||
{ value: 'features', label: '功能开关', description: formMembershipEnabled ? '会员功能开启' : '会员功能关闭' },
|
||
]}
|
||
activeValue={activeSection}
|
||
onChange={setActiveSection}
|
||
/>
|
||
|
||
{/* Site Config */}
|
||
{activeSection === 'site' && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Globe className="h-5 w-5 text-primary" />
|
||
网站配置
|
||
</CardTitle>
|
||
<CardDescription>自定义网站名称、Logo 和浏览器标签页图标，保存后所有访客可见</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Site Name */}
|
||
<div className="space-y-2">
|
||
<Label>网站名称</Label>
|
||
<p className="text-xs text-muted-foreground">显示在导航栏、首页标题等位置</p>
|
||
<Input
|
||
value={formSiteName}
|
||
onChange={e => setFormSiteName(e.target.value)}
|
||
placeholder="妙境"
|
||
/>
|
||
</div>
|
||
|
||
{/* Browser Tab Title */}
|
||
<div className="space-y-2">
|
||
<Label>浏览器标签页标题</Label>
|
||
<p className="text-xs text-muted-foreground">显示在浏览器标签页上的文字</p>
|
||
<Input
|
||
value={formTabTitle}
|
||
onChange={e => setFormTabTitle(e.target.value)}
|
||
placeholder="妙境 - AI创作平台"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid gap-4 lg:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>备案信息</Label>
|
||
<p className="text-xs text-muted-foreground">显示在网站页脚，例如：京ICP备XXXXXXXX号</p>
|
||
<Input
|
||
value={formFilingInfo}
|
||
onChange={e => setFormFilingInfo(e.target.value)}
|
||
placeholder="京ICP备XXXXXXXX号"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>备案跳转地址</Label>
|
||
<p className="text-xs text-muted-foreground">留空则备案信息仅展示不可点击</p>
|
||
<Input
|
||
value={formFilingUrl}
|
||
onChange={e => setFormFilingUrl(e.target.value)}
|
||
placeholder="https://beian.miit.gov.cn/"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4 lg:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>公安备案信息</Label>
|
||
<p className="text-xs text-muted-foreground">显示在网站页脚，例如：京公网安备 XXXXXXXXXXXXXX号</p>
|
||
<Input
|
||
value={formPublicSecurityFilingInfo}
|
||
onChange={e => setFormPublicSecurityFilingInfo(e.target.value)}
|
||
placeholder="京公网安备 XXXXXXXXXXXXXX号"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>公安备案跳转地址</Label>
|
||
<p className="text-xs text-muted-foreground">留空则公安备案信息仅展示不可点击</p>
|
||
<Input
|
||
value={formPublicSecurityFilingUrl}
|
||
onChange={e => setFormPublicSecurityFilingUrl(e.target.value)}
|
||
placeholder="https://www.beian.gov.cn/portal/registerSystemInfo"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Logo Upload */}
|
||
<div className="space-y-2">
|
||
<Label>网站 Logo</Label>
|
||
<p className="text-xs text-muted-foreground">
|
||
支持 PNG / JPG / SVG 格式，建议尺寸 64×64px，正方形，最大 2MB
|
||
</p>
|
||
<div className="flex items-center gap-4">
|
||
<div className="h-16 w-16 rounded-lg border border-border bg-muted flex items-center justify-center overflow-hidden shrink-0">
|
||
<img src={currentLogoSrc} alt="Logo" className="h-full w-full object-contain" />
|
||
</div>
|
||
<div className="flex flex-col gap-2">
|
||
<input
|
||
ref={logoInputRef}
|
||
type="file"
|
||
accept=".png,.jpg,.jpeg,.svg"
|
||
className="hidden"
|
||
onChange={e => {
|
||
const file = e.target.files?.[0];
|
||
if (file) handleFileUpload(file, setFormLogoBase64, 2048, 64);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => logoInputRef.current?.click()}
|
||
>
|
||
<Upload className="h-3.5 w-3.5 mr-1.5" />
|
||
上传 Logo
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Favicon Upload */}
|
||
<div className="space-y-2">
|
||
<Label>浏览器标签页图标 (Favicon)</Label>
|
||
<p className="text-xs text-muted-foreground">
|
||
支持 PNG / JPG / SVG 格式，建议尺寸 32×32px 或 64×64px，正方形，最大 1MB
|
||
</p>
|
||
<div className="flex items-center gap-4">
|
||
<div className="h-12 w-12 rounded border border-border bg-muted flex items-center justify-center overflow-hidden shrink-0">
|
||
<img src={currentFaviconSrc} alt="Favicon" className="h-full w-full object-contain" />
|
||
</div>
|
||
<div className="flex flex-col gap-2">
|
||
<input
|
||
ref={faviconInputRef}
|
||
type="file"
|
||
accept=".png,.jpg,.jpeg,.svg"
|
||
className="hidden"
|
||
onChange={e => {
|
||
const file = e.target.files?.[0];
|
||
if (file) handleFileUpload(file, setFormFaviconBase64, 1024, 32);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => faviconInputRef.current?.click()}
|
||
>
|
||
<Upload className="h-3.5 w-3.5 mr-1.5" />
|
||
上传图标
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Save Button */}
|
||
<div className="pt-2">
|
||
<Button onClick={handleSave} disabled={saving} className="gap-1.5">
|
||
<Save className="h-4 w-4" />
|
||
{saving ? '保存中...' : '保存网站配置'}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{activeSection === 'footer' && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Globe className="h-5 w-5 text-primary" />
|
||
页脚页面
|
||
</CardTitle>
|
||
<CardDescription>配置首页右下角“关于我们、使用条款、隐私政策、帮助中心”对应页面内容</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="grid gap-4 lg:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>关于我们</Label>
|
||
<Textarea
|
||
value={formAboutUs}
|
||
onChange={e => setFormAboutUs(e.target.value)}
|
||
placeholder="请输入关于我们页面内容"
|
||
className="min-h-64 resize-y"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>帮助中心</Label>
|
||
<Textarea
|
||
value={formHelpCenter}
|
||
onChange={e => setFormHelpCenter(e.target.value)}
|
||
placeholder="请输入帮助中心页面内容"
|
||
className="min-h-64 resize-y"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>使用条款</Label>
|
||
<p className="text-xs text-muted-foreground">同时用于注册前必须阅读的服务条款弹窗</p>
|
||
<Textarea
|
||
value={formTermsOfService}
|
||
onChange={e => setFormTermsOfService(e.target.value)}
|
||
placeholder="请输入使用条款内容"
|
||
className="min-h-64 resize-y"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>隐私政策</Label>
|
||
<p className="text-xs text-muted-foreground">同时用于注册前必须阅读的隐私政策弹窗</p>
|
||
<Textarea
|
||
value={formPrivacyPolicy}
|
||
onChange={e => setFormPrivacyPolicy(e.target.value)}
|
||
placeholder="请输入隐私政策内容"
|
||
className="min-h-64 resize-y"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="pt-2">
|
||
<Button onClick={handleSave} disabled={saving} className="gap-1.5">
|
||
<Save className="h-4 w-4" />
|
||
{saving ? '保存中...' : '保存页脚页面'}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{activeSection === 'logs' && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Logs className="h-5 w-5 text-primary" />
|
||
日志设置
|
||
</CardTitle>
|
||
<CardDescription>配置平台日志的自动保存时间，最长 90 天，到期后系统会自动删除过期日志</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-5">
|
||
<div className="max-w-md space-y-2">
|
||
<Label>日志保存时间（天）</Label>
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
max={90}
|
||
value={formLogRetentionDays}
|
||
onChange={e => setFormLogRetentionDays(Math.min(90, Math.max(1, Number(e.target.value || 30))))}
|
||
/>
|
||
<p className="text-xs text-muted-foreground">保存后会同步影响管理后台“系统日志”页面的自动清理策略。</p>
|
||
</div>
|
||
<div className="pt-2">
|
||
<Button onClick={handleSave} disabled={saving} className="gap-1.5">
|
||
<Save className="h-4 w-4" />
|
||
{saving ? '保存中...' : '保存日志设置'}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Email SMTP Config */}
|
||
{activeSection === 'email' && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Mail className="h-5 w-5 text-primary" />
|
||
火山引擎域名邮箱
|
||
</CardTitle>
|
||
<CardDescription>配置 service@你的火山引擎托管域名.com 这类发件邮箱，用于注册验证、找回密码和系统通知</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="flex items-center justify-between rounded-lg border border-border p-4">
|
||
<div>
|
||
<p className="font-medium text-sm">启用邮箱服务</p>
|
||
<p className="text-xs text-muted-foreground">关闭后不会发送验证码邮件，新用户注册验证码会不可用。</p>
|
||
</div>
|
||
<Switch
|
||
checked={emailSettings.enabled}
|
||
onCheckedChange={(checked) => handleEmailSettingChange('enabled', checked)}
|
||
disabled={emailLoading}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label>SMTP 地址</Label>
|
||
<Input value={emailSettings.smtpHost} onChange={e => handleEmailSettingChange('smtpHost', e.target.value)} placeholder="smtp.your-domain.com / smtp.exmail.qq.com" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>SMTP 端口</Label>
|
||
<Input type="number" value={emailSettings.smtpPort} onChange={e => handleEmailSettingChange('smtpPort', Number(e.target.value) || 465)} placeholder="465" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>SMTP 账号</Label>
|
||
<Input value={emailSettings.smtpUser} onChange={e => handleEmailSettingChange('smtpUser', e.target.value)} placeholder="service@your-domain.com" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>SMTP 授权码</Label>
|
||
<Input
|
||
type="password"
|
||
value={emailSettings.smtpPassword}
|
||
onChange={e => handleEmailSettingChange('smtpPassword', e.target.value)}
|
||
placeholder={emailSettings.smtpPasswordPreview ? `已保存：${emailSettings.smtpPasswordPreview}` : '输入授权码'}
|
||
/>
|
||
<p className="text-xs text-muted-foreground">授权码会加密存储；留空表示不修改已保存授权码。</p>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>发件人邮箱</Label>
|
||
<Input value={emailSettings.fromEmail} onChange={e => handleEmailSettingChange('fromEmail', e.target.value)} placeholder="service@your-domain.com" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>发件人名称</Label>
|
||
<Input value={emailSettings.fromName} onChange={e => handleEmailSettingChange('fromName', e.target.value)} placeholder="妙境官方通知" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>回复邮箱</Label>
|
||
<Input value={emailSettings.replyTo} onChange={e => handleEmailSettingChange('replyTo', e.target.value)} placeholder="support@your-domain.com" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>应用访问地址</Label>
|
||
<Input value={emailSettings.appBaseUrl} onChange={e => handleEmailSettingChange('appBaseUrl', e.target.value)} placeholder="http://192.168.217.130:5000" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>邮件 Logo 地址</Label>
|
||
<Input value={emailSettings.logoUrl} onChange={e => handleEmailSettingChange('logoUrl', e.target.value)} placeholder="/logo.png" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>联系邮箱</Label>
|
||
<Input value={emailSettings.contactEmail} onChange={e => handleEmailSettingChange('contactEmail', e.target.value)} placeholder="support@your-domain.com" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>验证码位数</Label>
|
||
<Input type="number" min={4} max={10} value={emailSettings.codeLength} onChange={e => handleEmailSettingChange('codeLength', Number(e.target.value) || 6)} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>验证码有效期（分钟）</Label>
|
||
<Input type="number" min={1} max={30} value={emailSettings.codeTtlMinutes} onChange={e => handleEmailSettingChange('codeTtlMinutes', Number(e.target.value) || 5)} />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>验证码字符类型</Label>
|
||
<Select value={emailSettings.codeCharset} onValueChange={value => handleEmailSettingChange('codeCharset', value as EmailSettingsForm['codeCharset'])}>
|
||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="alphanumeric">数字 + 字母</SelectItem>
|
||
<SelectItem value="numeric">仅数字</SelectItem>
|
||
<SelectItem value="letters">仅字母</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>是否使用 SSL/TLS</Label>
|
||
<div className="flex h-10 items-center gap-3 rounded-md border border-border px-3">
|
||
<Switch checked={emailSettings.smtpSecure} onCheckedChange={(checked) => handleEmailSettingChange('smtpSecure', checked)} />
|
||
<span className="text-sm text-muted-foreground">465 通常开启，587 通常关闭并使用 STARTTLS</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>版权信息</Label>
|
||
<Input value={emailSettings.copyright} onChange={e => handleEmailSettingChange('copyright', e.target.value)} placeholder="© 2026 妙境. All rights reserved." />
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-3 rounded-lg border border-border p-4 md:flex-row md:items-end">
|
||
<div className="flex-1 space-y-2">
|
||
<Label>测试收件邮箱</Label>
|
||
<Input value={testEmail} onChange={e => setTestEmail(e.target.value)} placeholder="your@email.com" />
|
||
</div>
|
||
<Button variant="outline" className="gap-2" onClick={handleSendTestEmail} disabled={emailTesting}>
|
||
{emailTesting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
|
||
发送测试邮件
|
||
</Button>
|
||
<Button className="gap-2" onClick={handleSaveEmailSettings} disabled={emailSaving}>
|
||
{emailSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||
保存邮箱配置
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{activeSection === 'mail' && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Send className="h-5 w-5 text-primary" />
|
||
用户邮件
|
||
</CardTitle>
|
||
<CardDescription>使用当前固定 UI 邮件模板，发送给全部非管理员用户或指定用户</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="space-y-4 rounded-lg border border-border p-4">
|
||
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||
<div>
|
||
<p className="text-sm font-medium">给用户发送邮件</p>
|
||
<p className="text-xs text-muted-foreground">使用当前固定 UI 邮件模板，可发送给全部非管理员用户，或指定一个/多个用户。</p>
|
||
</div>
|
||
<div className="flex rounded-lg border border-border bg-muted/30 p-1">
|
||
<button
|
||
type="button"
|
||
className={`rounded-md px-3 py-1.5 text-sm font-medium transition ${mailMode === 'selected' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
|
||
onClick={() => setMailMode('selected')}
|
||
>
|
||
指定用户
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`rounded-md px-3 py-1.5 text-sm font-medium transition ${mailMode === 'all' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}`}
|
||
onClick={() => setMailMode('all')}
|
||
>
|
||
全部用户
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{mailMode === 'selected' ? (
|
||
<div className="space-y-3">
|
||
<div className="grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
|
||
<div className="space-y-2">
|
||
<Label>搜索收件用户</Label>
|
||
<Input
|
||
value={recipientQuery}
|
||
onChange={e => setRecipientQuery(e.target.value)}
|
||
placeholder="搜索邮箱、昵称、手机号"
|
||
/>
|
||
</div>
|
||
<Button variant="outline" onClick={() => loadEmailRecipients(recipientQuery)} disabled={recipientsLoading}>
|
||
{recipientsLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
|
||
搜索
|
||
</Button>
|
||
</div>
|
||
<div className="max-h-56 space-y-2 overflow-y-auto rounded-lg border border-border bg-muted/20 p-2">
|
||
{recipientResults.length > 0 ? recipientResults.map(user => {
|
||
const selected = selectedRecipientIds.has(user.id);
|
||
return (
|
||
<button
|
||
key={user.id}
|
||
type="button"
|
||
className={`flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2 text-left transition ${selected ? 'border-primary/70 bg-primary/10' : 'border-border bg-background/70 hover:bg-muted/50'}`}
|
||
onClick={() => toggleRecipient(user)}
|
||
>
|
||
<span className="min-w-0">
|
||
<span className="block truncate text-sm font-medium">{user.nickname}</span>
|
||
<span className="block truncate text-xs text-muted-foreground">{user.email}</span>
|
||
</span>
|
||
<span className="shrink-0 text-xs text-muted-foreground">{selected ? '已选择' : user.emailVerified ? '已验证' : '未验证'}</span>
|
||
</button>
|
||
);
|
||
}) : (
|
||
<div className="flex h-20 items-center justify-center text-sm text-muted-foreground">
|
||
{recipientsLoading ? '正在加载用户...' : '暂无可选用户'}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{selectedRecipients.length > 0 && (
|
||
<div className="flex flex-wrap gap-2">
|
||
{selectedRecipients.map(user => (
|
||
<button
|
||
key={user.id}
|
||
type="button"
|
||
className="rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs text-foreground"
|
||
onClick={() => toggleRecipient(user)}
|
||
title="点击移除"
|
||
>
|
||
{user.nickname} · {user.email} ×
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-lg border border-primary/20 bg-primary/5 p-3 text-sm text-muted-foreground">
|
||
将发送给所有非管理员、账号启用且填写了有效邮箱的用户。当前可发送用户约 {recipientTotal || 0} 个，管理员账号会自动排除。
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>邮件类型</Label>
|
||
<Select value={mailKind} onValueChange={value => setMailKind(value as 'notification' | 'admin')}>
|
||
<SelectTrigger><SelectValue /></SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="notification">通知邮件</SelectItem>
|
||
<SelectItem value="admin">管理员邮件</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>邮件标题</Label>
|
||
<Input value={mailTitle} onChange={e => setMailTitle(e.target.value)} maxLength={120} placeholder="例如：平台功能更新通知" />
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>按钮文字（可选）</Label>
|
||
<Input value={mailButtonText} onChange={e => setMailButtonText(e.target.value)} maxLength={40} placeholder="查看详情" />
|
||
</div>
|
||
<div className="space-y-2 md:col-span-2">
|
||
<Label>按钮链接（可选）</Label>
|
||
<Input value={mailButtonUrl} onChange={e => setMailButtonUrl(e.target.value)} placeholder="https:// 或 http:// 开头" />
|
||
</div>
|
||
<div className="space-y-2 md:col-span-2">
|
||
<Label>邮件正文</Label>
|
||
<Textarea
|
||
value={mailContent}
|
||
onChange={e => setMailContent(e.target.value)}
|
||
maxLength={5000}
|
||
className="min-h-36"
|
||
placeholder="填写需要发送给用户的通知内容，支持换行。"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||
<p className="text-xs text-muted-foreground">
|
||
{mailMode === 'all' ? '批量发送可能需要一些时间，请避免重复点击。' : `已选择 ${selectedRecipients.length} 个收件用户。`}
|
||
</p>
|
||
<Button className="gap-2" onClick={handleSendUserEmail} disabled={mailSending}>
|
||
{mailSending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
|
||
{mailMode === 'all' ? '发送给全部用户' : '发送给指定用户'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-lg border border-border bg-muted/30 p-4">
|
||
<p className="mb-3 text-sm font-medium">邮件模板预览</p>
|
||
<div className="overflow-hidden rounded-lg border border-border bg-background">
|
||
{emailPreviewHtml ? (
|
||
<iframe title="邮件模板预览" srcDoc={emailPreviewHtml} className="h-[420px] w-full bg-background" />
|
||
) : (
|
||
<div className="flex h-40 items-center justify-center text-sm text-muted-foreground">保存或刷新配置后显示模板预览</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-lg border border-primary/20 bg-primary/5 p-4 text-sm text-muted-foreground">
|
||
<p className="font-medium text-foreground">火山引擎域名配置提醒</p>
|
||
<p className="mt-2">如果域名 DNS 托管在火山引擎云解析，请进入：云解析 DNS 控制台 / 公网域名管理 / 选择域名 / 记录管理 / 添加记录。</p>
|
||
<p className="mt-1">火山引擎云解析负责 DNS；SMTP 地址以你实际开通的邮箱服务或自建邮件服务器为准，例如自建 smtp.your-domain.com、腾讯企业邮 smtp.exmail.qq.com、阿里云企业邮箱 smtp.mxhichina.com。</p>
|
||
<p className="mt-1">为降低进入垃圾箱概率，请添加 SPF、DKIM、DMARC，并确保发件人邮箱域名、SMTP 登录账号和 DNS 授权记录一致。</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Feature Toggles */}
|
||
{activeSection === 'features' && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<ToggleLeft className="h-5 w-5 text-primary" />
|
||
功能开关
|
||
</CardTitle>
|
||
<CardDescription>控制前台页面的功能显示</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between p-4 rounded-lg border border-border">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||
<Crown className="h-5 w-5" />
|
||
</div>
|
||
<div>
|
||
<p className="font-medium text-sm">会员功能</p>
|
||
<p className="text-xs text-muted-foreground">关闭后隐藏会员、积分、订单、额度和积分消耗提示，并禁用系统默认 API 配置</p>
|
||
</div>
|
||
</div>
|
||
<Switch
|
||
checked={formMembershipEnabled}
|
||
onCheckedChange={handleMembershipToggle}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|