1694 lines
72 KiB
TypeScript
1694 lines
72 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { Database, Mail, Shield, Server, SlidersHorizontal, KeyRound, FolderGit2, Palette, HardDrive } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Textarea } from '@/components/ui/textarea';
|
||
import { Spinner } from '@/components/ui/spinner';
|
||
import { notify } from '@/lib/notify';
|
||
import { api } from '../../api/client';
|
||
import { useAdminGuard } from '../../layouts/AdminLayout';
|
||
import { invalidateForumLimitsCache } from '../../hooks/useForumLimits';
|
||
import { DEFAULT_BRANDING, seedSiteBrandingCache } from '../../hooks/useSiteBranding';
|
||
import { clearAllFeedCache } from '../../utils/feedCache';
|
||
import { normalizeAsideWidgets, resolveAsideWidgets, mergeForumLimitsWithAsideWidgets, resolveSavedAsideWidgets } from '../../utils/asideWidgets';
|
||
import AsideWidgetList from '../../components/admin/AsideWidgetList';
|
||
import type { AdminSettings, ForumLimits, MailConfig, OIDCConfig, OAuthClient, GiteaSyncConfig, StorageConfig, SiteBranding, AsideWidget } from '../../api/types';
|
||
import { DEFAULT_ASIDE_WIDGETS } from '../../api/types';
|
||
|
||
type TabId = 'branding' | 'limits' | 'mail' | 'oidc' | 'gitea' | 'storage' | 'filter' | 'system';
|
||
|
||
type NumberLimitKey = {
|
||
[K in keyof ForumLimits]: ForumLimits[K] extends number ? K : never;
|
||
}[keyof ForumLimits];
|
||
|
||
type SettingRow = {
|
||
key: NumberLimitKey;
|
||
label: string;
|
||
unit?: string;
|
||
hint?: string;
|
||
min?: number;
|
||
};
|
||
|
||
type SettingSection = {
|
||
id: string;
|
||
title: string;
|
||
summary: string;
|
||
rows: SettingRow[];
|
||
};
|
||
|
||
const SETTING_SECTIONS: SettingSection[] = [
|
||
{
|
||
id: 'rule',
|
||
title: '编辑规则',
|
||
summary: '控制普通用户修改自己帖子 / 评论的时限（0 = 不限）',
|
||
rows: [
|
||
{ key: 'post_edit_window_hours', label: '帖子可编辑时限', unit: '小时', hint: '0 = 不限', min: 0 },
|
||
{ key: 'comment_edit_window_minutes', label: '评论可编辑时限', unit: '分钟', hint: '0 = 不限', min: 0 },
|
||
],
|
||
},
|
||
{
|
||
id: 'rate',
|
||
title: '操作限流',
|
||
summary: '同一用户或 IP 在窗口期内的最大请求次数',
|
||
rows: [
|
||
{ key: 'rate_limit_window_sec', label: '限流窗口', unit: '秒', min: 10 },
|
||
{ key: 'rate_limit_post', label: '发帖', unit: '次', min: 1 },
|
||
{ key: 'rate_limit_comment', label: '评论', unit: '次', min: 1 },
|
||
{ key: 'rate_limit_register', label: '注册', unit: '次', min: 1 },
|
||
{ key: 'rate_limit_login', label: '登录', unit: '次', min: 1 },
|
||
],
|
||
},
|
||
{
|
||
id: 'content',
|
||
title: '内容长度',
|
||
summary: '发帖与评论的字数上限，服务端强制校验',
|
||
rows: [
|
||
{ key: 'post_title_max', label: '帖子标题', unit: '字', min: 1 },
|
||
{ key: 'post_tags_max', label: '帖子标签', unit: '字', hint: '0 = 不限', min: 0 },
|
||
{ key: 'post_content_max', label: '帖子正文', unit: '字', hint: '0 = 不限', min: 0 },
|
||
{ key: 'comment_max', label: '评论内容', unit: '字', min: 1 },
|
||
],
|
||
},
|
||
{
|
||
id: 'search',
|
||
title: '搜索与列表',
|
||
summary: '关键词长度与首页每页条数',
|
||
rows: [
|
||
{ key: 'search_keyword_min', label: '关键词最短', unit: '字', min: 0 },
|
||
{ key: 'search_keyword_max', label: '关键词最长', unit: '字', min: 1 },
|
||
{ key: 'page_size_default', label: '每页显示条数', unit: '条', hint: '首页列表分页大小', min: 1 },
|
||
],
|
||
},
|
||
{
|
||
id: 'user',
|
||
title: '用户账号',
|
||
summary: '注册、改密、头像与签名限制',
|
||
rows: [
|
||
{ key: 'password_min_len', label: '密码最短', unit: '位', min: 4 },
|
||
{ key: 'avatar_max_mb', label: '头像上限', unit: 'MB', min: 1 },
|
||
{ key: 'signature_max', label: '签名上限', unit: '字', min: 0 },
|
||
],
|
||
},
|
||
];
|
||
|
||
type BoolLimitKey =
|
||
| 'open_posts_in_new_tab'
|
||
| 'open_content_links_in_new_tab';
|
||
|
||
const NAV_TOGGLES: { key: BoolLimitKey; label: string; hint: string }[] = [
|
||
{
|
||
key: 'open_posts_in_new_tab',
|
||
label: '打开帖子时新开标签页',
|
||
hint: '首页、热门、收藏等入口打开帖子详情',
|
||
},
|
||
{
|
||
key: 'open_content_links_in_new_tab',
|
||
label: '帖子正文链接新开标签页',
|
||
hint: '正文内的外链与站内链接均在新标签打开',
|
||
},
|
||
];
|
||
|
||
const TABS: { id: TabId; label: string; icon: typeof SlidersHorizontal }[] = [
|
||
{ id: 'branding', label: '站点与呈现', icon: Palette },
|
||
{ id: 'limits', label: '论坛限制', icon: SlidersHorizontal },
|
||
{ id: 'mail', label: '邮件服务', icon: Mail },
|
||
{ id: 'oidc', label: 'OIDC / SSO', icon: KeyRound },
|
||
{ id: 'gitea', label: 'Gitea 同步', icon: FolderGit2 },
|
||
{ id: 'storage', label: '对象存储', icon: HardDrive },
|
||
{ id: 'filter', label: '敏感词', icon: Shield },
|
||
{ id: 'system', label: '系统维护', icon: Server },
|
||
];
|
||
|
||
const EMPTY_MAIL: MailConfig = {
|
||
enabled: false,
|
||
host: '',
|
||
port: 465,
|
||
username: '',
|
||
from: '',
|
||
from_name: '姜十三论坛',
|
||
encryption: 'ssl',
|
||
has_password: false,
|
||
};
|
||
|
||
const EMPTY_OIDC: OIDCConfig = {
|
||
enabled: false,
|
||
root_url: '',
|
||
ready: false,
|
||
group_claim: 'groups',
|
||
admin_group: 'gitea-admin',
|
||
user_group: 'gitea-users',
|
||
client_count: 0,
|
||
};
|
||
|
||
/** 就绪需：已启用 + 已持久化 ROOT_URL + 至少一个启用中的应用 */
|
||
function oidcStatusLabel(oidc: OIDCConfig, appCount: number): string {
|
||
if (oidc.ready) return '已就绪';
|
||
if (!oidc.enabled) return '未启用';
|
||
const reasons: string[] = [];
|
||
// discovery_url 仅在服务端已保存 ROOT_URL 时返回；表单里填写但未点保存时仍为空
|
||
if (!oidc.discovery_url) reasons.push('保存 ROOT_URL');
|
||
if (appCount < 1 && (oidc.client_count ?? 0) < 1) reasons.push('至少一个应用');
|
||
if (reasons.length === 0) reasons.push('点击「保存全局设置」刷新状态');
|
||
return `未就绪（需${reasons.join('、')}）`;
|
||
}
|
||
|
||
const EMPTY_GITEA: GiteaSyncConfig = {
|
||
enabled: false,
|
||
base_url: '',
|
||
has_token: false,
|
||
sync_interval_min: 60,
|
||
ready: false,
|
||
repo_count: 0,
|
||
};
|
||
|
||
const EMPTY_STORAGE: StorageConfig = {
|
||
type: 'local',
|
||
endpoint: '',
|
||
region: 'us-east-1',
|
||
bucket: '',
|
||
access_key: '',
|
||
public_base_url: '',
|
||
prefix: '',
|
||
force_path_style: true,
|
||
has_secret_key: false,
|
||
ready: true,
|
||
image_delivery: 'webp',
|
||
};
|
||
|
||
function giteaStatusLabel(gitea: GiteaSyncConfig): string {
|
||
if (gitea.ready) return `已就绪 · ${gitea.repo_count} 个仓库`;
|
||
if (!gitea.enabled) return '未启用';
|
||
const reasons: string[] = [];
|
||
if (!gitea.base_url.trim()) reasons.push('BASE_URL');
|
||
if (!gitea.has_token) reasons.push('Token');
|
||
if (reasons.length === 0) reasons.push('保存后生效');
|
||
return `未就绪（需${reasons.join('、')}）`;
|
||
}
|
||
|
||
function storageStatusLabel(storage: StorageConfig): string {
|
||
if (storage.type === 'local') return '本地磁盘';
|
||
if (storage.ready) return 'S3 已就绪';
|
||
const reasons: string[] = [];
|
||
if (!storage.endpoint.trim()) reasons.push('Endpoint');
|
||
if (!storage.bucket.trim()) reasons.push('Bucket');
|
||
if (!storage.access_key.trim()) reasons.push('Access Key');
|
||
if (!storage.has_secret_key) reasons.push('Secret Key');
|
||
if (!storage.public_base_url.trim()) reasons.push('公开访问地址');
|
||
if (reasons.length === 0) reasons.push('保存后生效');
|
||
return `未就绪（需${reasons.join('、')}）`;
|
||
}
|
||
|
||
function SettingTable({
|
||
sections,
|
||
limits,
|
||
onChange,
|
||
}: {
|
||
sections: SettingSection[];
|
||
limits: ForumLimits;
|
||
onChange: (key: NumberLimitKey, value: string) => void;
|
||
}) {
|
||
return (
|
||
<div className="admin-settings-sections">
|
||
{sections.map(section => (
|
||
<section key={section.id} className="admin-settings-section" id={`settings-${section.id}`}>
|
||
<div className="admin-settings-section-head">
|
||
<h3>{section.title}</h3>
|
||
<p>{section.summary}</p>
|
||
</div>
|
||
<div className="admin-settings-table" role="group" aria-label={section.title}>
|
||
{section.rows.map(row => (
|
||
<div key={row.key} className="admin-settings-row">
|
||
<label htmlFor={`limit-${row.key}`} className="admin-settings-row-label">
|
||
{row.label}
|
||
</label>
|
||
<div className="admin-settings-row-input">
|
||
<Input
|
||
id={`limit-${row.key}`}
|
||
type="number"
|
||
min={row.min ?? 0}
|
||
value={limits[row.key]}
|
||
onChange={e => onChange(row.key, e.target.value)}
|
||
className="admin-settings-input"
|
||
/>
|
||
{row.unit && <span className="admin-settings-unit">{row.unit}</span>}
|
||
</div>
|
||
<span className="admin-settings-row-hint">{row.hint ?? ''}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function AdminSettingsPage() {
|
||
const { ready } = useAdminGuard();
|
||
const [settings, setSettings] = useState<AdminSettings | null>(null);
|
||
const [limits, setLimits] = useState<ForumLimits | null>(null);
|
||
const [asideWidgets, setAsideWidgets] = useState<AsideWidget[]>(DEFAULT_ASIDE_WIDGETS);
|
||
const [branding, setBranding] = useState<SiteBranding>(DEFAULT_BRANDING);
|
||
const [mail, setMail] = useState<MailConfig>(EMPTY_MAIL);
|
||
const [oidc, setOidc] = useState<OIDCConfig>(EMPTY_OIDC);
|
||
const [gitea, setGitea] = useState<GiteaSyncConfig>(EMPTY_GITEA);
|
||
const [storage, setStorage] = useState<StorageConfig>(EMPTY_STORAGE);
|
||
const [oauthClients, setOauthClients] = useState<OAuthClient[]>([]);
|
||
const [clientForm, setClientForm] = useState({
|
||
client_id: 'gitea',
|
||
name: 'Gitea',
|
||
redirect_uris: 'https://git.iioio.com/user/oauth2/jiang13/callback',
|
||
enabled: true,
|
||
});
|
||
const [editingClientId, setEditingClientId] = useState<number | null>(null);
|
||
const [revealedSecret, setRevealedSecret] = useState<string | null>(null);
|
||
const [testTo, setTestTo] = useState('');
|
||
const [filterWords, setFilterWords] = useState('');
|
||
const [activeTab, setActiveTab] = useState<TabId>('branding');
|
||
const [loading, setLoading] = useState(true);
|
||
const [backing, setBacking] = useState(false);
|
||
const [savingBranding, setSavingBranding] = useState(false);
|
||
const [uploadingBrand, setUploadingBrand] = useState<'logo' | 'favicon' | 'og_image' | null>(null);
|
||
const [savingForum, setSavingForum] = useState(false);
|
||
const [savingMail, setSavingMail] = useState(false);
|
||
const [savingOidc, setSavingOidc] = useState(false);
|
||
const [savingGitea, setSavingGitea] = useState(false);
|
||
const [savingStorage, setSavingStorage] = useState(false);
|
||
const [syncingGitea, setSyncingGitea] = useState(false);
|
||
const [savingClient, setSavingClient] = useState(false);
|
||
const [testingMail, setTestingMail] = useState(false);
|
||
const [savingFilter, setSavingFilter] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (!ready) return;
|
||
api.adminSettings()
|
||
.then(s => {
|
||
setSettings(s);
|
||
const loadedAsideWidgets = normalizeAsideWidgets(
|
||
resolveAsideWidgets({
|
||
aside_widgets: s.limits?.aside_widgets,
|
||
aside_show_tag_cloud: s.limits?.aside_show_tag_cloud ?? false,
|
||
aside_show_recent_comments: s.limits?.aside_show_recent_comments ?? false,
|
||
aside_show_friend_links: s.limits?.aside_show_friend_links ?? true,
|
||
}),
|
||
);
|
||
setAsideWidgets(loadedAsideWidgets);
|
||
const baseLimits: ForumLimits = {
|
||
open_posts_in_new_tab: true,
|
||
open_content_links_in_new_tab: true,
|
||
aside_show_tag_cloud: false,
|
||
aside_show_recent_comments: false,
|
||
aside_show_friend_links: true,
|
||
aside_widgets: loadedAsideWidgets,
|
||
nav_show_friend_links: true,
|
||
footer_show_friend_links: true,
|
||
feed_list_style: 'title',
|
||
permalink_enabled: false,
|
||
permalink_ext: 'html',
|
||
...s.limits,
|
||
};
|
||
setLimits(mergeForumLimitsWithAsideWidgets(baseLimits, loadedAsideWidgets));
|
||
setBranding({ ...DEFAULT_BRANDING, ...(s.branding ?? {}) });
|
||
setMail({ ...EMPTY_MAIL, ...s.mail, password: '' });
|
||
setOidc({ ...EMPTY_OIDC, ...(s.oidc ?? {}) });
|
||
setGitea({ ...EMPTY_GITEA, ...(s.gitea ?? {}), token: '' });
|
||
setStorage({ ...EMPTY_STORAGE, ...(s.storage ?? {}), secret_key: '' });
|
||
setOauthClients(s.oauth_clients ?? []);
|
||
setFilterWords(s.filter_words);
|
||
if (s.mail?.from) setTestTo(s.mail.from);
|
||
})
|
||
.finally(() => setLoading(false));
|
||
}, [ready]);
|
||
|
||
const handleLimitChange = (key: NumberLimitKey, value: string) => {
|
||
const n = parseInt(value, 10);
|
||
if (Number.isNaN(n)) return;
|
||
setLimits(prev => prev ? { ...prev, [key]: n } : prev);
|
||
};
|
||
|
||
const handleBoolLimitChange = (key: BoolLimitKey, checked: boolean) => {
|
||
setLimits(prev => prev ? { ...prev, [key]: checked } : prev);
|
||
};
|
||
|
||
const handleAsideWidgetsChange = (widgets: AsideWidget[]) => {
|
||
const normalized = normalizeAsideWidgets(widgets);
|
||
setAsideWidgets(normalized);
|
||
setLimits(prev => prev ? mergeForumLimitsWithAsideWidgets(prev, normalized) : prev);
|
||
};
|
||
|
||
const applySavedForumLimits = (savedWidgets: AsideWidget[], response: ForumLimits): ForumLimits => {
|
||
const nextWidgets = resolveSavedAsideWidgets(savedWidgets, response.aside_widgets);
|
||
const merged = mergeForumLimitsWithAsideWidgets(response, nextWidgets);
|
||
setAsideWidgets(nextWidgets);
|
||
setLimits(merged);
|
||
return merged;
|
||
};
|
||
|
||
const applyBranding = (next: SiteBranding) => {
|
||
setBranding({ ...DEFAULT_BRANDING, ...next });
|
||
setSettings(s => s ? { ...s, branding: next } : s);
|
||
seedSiteBrandingCache(next);
|
||
};
|
||
|
||
const handleSaveBranding = async () => {
|
||
if (!limits) return;
|
||
setSavingBranding(true);
|
||
try {
|
||
const r = await api.adminUpdateBranding(branding);
|
||
applyBranding(r.branding);
|
||
const forumPayload = mergeForumLimitsWithAsideWidgets(limits, asideWidgets);
|
||
// 伪静态、右侧栏、浏览与链接、列表呈现同属站点呈现，一并保存
|
||
const forum = await api.adminUpdateForumSettings(forumPayload);
|
||
applySavedForumLimits(asideWidgets, forum.limits);
|
||
clearAllFeedCache();
|
||
notify.success('站点设置已保存');
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingBranding(false);
|
||
}
|
||
};
|
||
|
||
const handleUploadBrandAsset = async (kind: 'logo' | 'favicon' | 'og_image', file: File | undefined) => {
|
||
if (!file) return;
|
||
setUploadingBrand(kind);
|
||
try {
|
||
const r = await api.adminUploadBrandingAsset(kind, file);
|
||
notify.success(r.message);
|
||
applyBranding(r.branding);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '上传失败');
|
||
} finally {
|
||
setUploadingBrand(null);
|
||
}
|
||
};
|
||
|
||
const handleClearBrandAsset = async (kind: 'logo' | 'favicon' | 'og_image') => {
|
||
setUploadingBrand(kind);
|
||
try {
|
||
const r = await api.adminClearBrandingAsset(kind);
|
||
notify.success(r.message);
|
||
applyBranding(r.branding);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '清除失败');
|
||
} finally {
|
||
setUploadingBrand(null);
|
||
}
|
||
};
|
||
|
||
const handleSaveForumSettings = async () => {
|
||
if (!limits) return;
|
||
setSavingForum(true);
|
||
try {
|
||
const forumPayload = mergeForumLimitsWithAsideWidgets(limits, asideWidgets);
|
||
const r = await api.adminUpdateForumSettings(forumPayload);
|
||
notify.success(r.message);
|
||
invalidateForumLimitsCache();
|
||
clearAllFeedCache();
|
||
const merged = applySavedForumLimits(asideWidgets, r.limits);
|
||
setSettings(s => s ? { ...s, limits: merged } : s);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingForum(false);
|
||
}
|
||
};
|
||
|
||
const handleSaveMailSettings = async () => {
|
||
setSavingMail(true);
|
||
try {
|
||
const payload: MailConfig = {
|
||
...mail,
|
||
password: mail.password?.trim() ? mail.password : undefined,
|
||
};
|
||
const r = await api.adminUpdateMailSettings(payload);
|
||
notify.success(r.message);
|
||
setMail({ ...r.mail, password: '' });
|
||
setSettings(s => s ? { ...s, mail: r.mail } : s);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingMail(false);
|
||
}
|
||
};
|
||
|
||
const handleSaveOidcSettings = async () => {
|
||
setSavingOidc(true);
|
||
try {
|
||
const r = await api.adminUpdateOIDCSettings(oidc);
|
||
notify.success(r.message);
|
||
setOidc({ ...EMPTY_OIDC, ...r.oidc });
|
||
setSettings(s => s ? { ...s, oidc: r.oidc } : s);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingOidc(false);
|
||
}
|
||
};
|
||
|
||
const handleSaveGiteaSettings = async () => {
|
||
setSavingGitea(true);
|
||
try {
|
||
const payload: GiteaSyncConfig = {
|
||
...gitea,
|
||
token: gitea.token?.trim() ? gitea.token : undefined,
|
||
};
|
||
const r = await api.adminUpdateGiteaSettings(payload);
|
||
notify.success(r.message);
|
||
setGitea({ ...EMPTY_GITEA, ...r.gitea, token: '' });
|
||
setSettings(s => s ? { ...s, gitea: r.gitea } : s);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingGitea(false);
|
||
}
|
||
};
|
||
|
||
const handleSaveStorageSettings = async () => {
|
||
setSavingStorage(true);
|
||
try {
|
||
const payload: StorageConfig = {
|
||
...storage,
|
||
secret_key: storage.secret_key?.trim() ? storage.secret_key : undefined,
|
||
};
|
||
const r = await api.adminUpdateStorageSettings(payload);
|
||
notify.success(r.message);
|
||
setStorage({ ...EMPTY_STORAGE, ...r.storage, secret_key: '' });
|
||
setSettings(s => s ? { ...s, storage: r.storage } : s);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingStorage(false);
|
||
}
|
||
};
|
||
|
||
const handleSyncGitea = async () => {
|
||
setSyncingGitea(true);
|
||
try {
|
||
const r = await api.adminSyncGitea();
|
||
notify.success(r.message);
|
||
setGitea({ ...EMPTY_GITEA, ...r.gitea, token: '' });
|
||
setSettings(s => s ? { ...s, gitea: r.gitea } : s);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '同步失败');
|
||
} finally {
|
||
setSyncingGitea(false);
|
||
}
|
||
};
|
||
|
||
const refreshClients = (clients: OAuthClient[], nextOidc?: OIDCConfig) => {
|
||
setOauthClients(clients);
|
||
if (nextOidc) {
|
||
setOidc({ ...EMPTY_OIDC, ...nextOidc });
|
||
setSettings(s => s ? { ...s, oidc: nextOidc, oauth_clients: clients } : s);
|
||
} else {
|
||
setSettings(s => s ? { ...s, oauth_clients: clients } : s);
|
||
}
|
||
};
|
||
|
||
const resetClientForm = () => {
|
||
setEditingClientId(null);
|
||
setClientForm({
|
||
client_id: 'gitea',
|
||
name: 'Gitea',
|
||
redirect_uris: 'https://git.iioio.com/user/oauth2/jiang13/callback',
|
||
enabled: true,
|
||
});
|
||
};
|
||
|
||
const handleSaveOAuthClient = async () => {
|
||
setSavingClient(true);
|
||
try {
|
||
if (editingClientId) {
|
||
const r = await api.adminUpdateOAuthClient(editingClientId, {
|
||
name: clientForm.name,
|
||
redirect_uris: clientForm.redirect_uris,
|
||
enabled: clientForm.enabled,
|
||
});
|
||
notify.success(r.message);
|
||
if (r.client.client_secret) setRevealedSecret(r.client.client_secret);
|
||
const list = await api.adminListOAuthClients();
|
||
refreshClients(list.clients, r.oidc);
|
||
resetClientForm();
|
||
} else {
|
||
const r = await api.adminCreateOAuthClient({
|
||
client_id: clientForm.client_id,
|
||
name: clientForm.name,
|
||
redirect_uris: clientForm.redirect_uris,
|
||
enabled: clientForm.enabled,
|
||
});
|
||
notify.success(r.message);
|
||
if (r.client.client_secret) setRevealedSecret(r.client.client_secret);
|
||
const list = await api.adminListOAuthClients();
|
||
refreshClients(list.clients, r.oidc);
|
||
resetClientForm();
|
||
}
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingClient(false);
|
||
}
|
||
};
|
||
|
||
const handleRotateSecret = async (id: number) => {
|
||
if (!window.confirm('确定轮换密钥？旧密钥将立即失效。')) return;
|
||
setSavingClient(true);
|
||
try {
|
||
const row = oauthClients.find(c => c.id === id);
|
||
if (!row) return;
|
||
const r = await api.adminUpdateOAuthClient(id, {
|
||
name: row.name,
|
||
redirect_uris: row.redirect_uris,
|
||
enabled: row.enabled,
|
||
rotate_secret: true,
|
||
});
|
||
notify.success(r.message);
|
||
if (r.client.client_secret) setRevealedSecret(r.client.client_secret);
|
||
const list = await api.adminListOAuthClients();
|
||
refreshClients(list.clients, r.oidc);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '轮换失败');
|
||
} finally {
|
||
setSavingClient(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteOAuthClient = async (id: number) => {
|
||
if (!window.confirm('确定删除该 OAuth 应用？')) return;
|
||
try {
|
||
const r = await api.adminDeleteOAuthClient(id);
|
||
notify.success(r.message);
|
||
const list = await api.adminListOAuthClients();
|
||
refreshClients(list.clients, r.oidc);
|
||
if (editingClientId === id) resetClientForm();
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '删除失败');
|
||
}
|
||
};
|
||
|
||
const handleTestMail = async () => {
|
||
if (!testTo.trim()) {
|
||
notify.error('请填写测试收件邮箱');
|
||
return;
|
||
}
|
||
setTestingMail(true);
|
||
try {
|
||
const r = await api.adminTestMail(testTo.trim());
|
||
notify.success(r.message);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '发送失败');
|
||
} finally {
|
||
setTestingMail(false);
|
||
}
|
||
};
|
||
|
||
const handleSaveFilterWords = async () => {
|
||
setSavingFilter(true);
|
||
try {
|
||
const r = await api.adminUpdateFilterWords(filterWords);
|
||
notify.success(r.message);
|
||
setSettings(s => s ? { ...s, filter_words: filterWords, filter_word_count: r.word_count } : s);
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setSavingFilter(false);
|
||
}
|
||
};
|
||
|
||
const handleBackup = async () => {
|
||
setBacking(true);
|
||
try {
|
||
const r = await api.adminBackup();
|
||
notify.success(r.message);
|
||
window.location.href = r.download;
|
||
} catch (e: unknown) {
|
||
notify.error(e instanceof Error ? e.message : '备份失败');
|
||
} finally {
|
||
setBacking(false);
|
||
}
|
||
};
|
||
|
||
if (!ready || loading) {
|
||
return <div className="flex justify-center py-16"><Spinner size="lg" /></div>;
|
||
}
|
||
if (!settings || !limits) return null;
|
||
|
||
return (
|
||
<div className="admin-settings-page">
|
||
<header className="admin-page-head">
|
||
<h1>系统设置</h1>
|
||
<p>管理论坛运行规则、邮件、OIDC/SSO、敏感词与数据维护</p>
|
||
</header>
|
||
|
||
<nav className="admin-settings-tabs" aria-label="设置分类">
|
||
{TABS.map(({ id, label, icon: Icon }) => (
|
||
<button
|
||
key={id}
|
||
type="button"
|
||
className={`admin-settings-tab${activeTab === id ? ' active' : ''}`}
|
||
onClick={() => setActiveTab(id)}
|
||
aria-selected={activeTab === id}
|
||
>
|
||
<Icon size={15} />
|
||
{label}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
|
||
{activeTab === 'branding' && limits && (
|
||
<div className="admin-settings-panel admin-mail-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">
|
||
<span>站点与呈现</span>
|
||
<span className="admin-settings-card-badge">{branding.name}</span>
|
||
</div>
|
||
<div className="admin-card-body admin-mail-body admin-brand-sections">
|
||
<div className="admin-brand-preview">
|
||
{branding.logo ? (
|
||
<img src={branding.logo} alt="" className="admin-brand-preview-logo" />
|
||
) : (
|
||
<span className="admin-brand-preview-mark">{branding.logo_mark}</span>
|
||
)}
|
||
<div>
|
||
<strong>{branding.name}</strong>
|
||
{branding.slogan && <p className="admin-mail-field-hint" style={{ marginTop: 4 }}>{branding.slogan}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
<section className="admin-settings-section" id="settings-brand-identity">
|
||
<div className="admin-settings-section-head">
|
||
<h3>品牌标识</h3>
|
||
<p>名称、标语、简介与字标；简介用于右侧栏顶部展示与搜索引擎 description</p>
|
||
</div>
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="brand-name">论坛名称</label>
|
||
<Input
|
||
id="brand-name"
|
||
value={branding.name}
|
||
onChange={e => setBranding(b => ({ ...b, name: e.target.value }))}
|
||
placeholder="姜十三论坛"
|
||
maxLength={64}
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="brand-mark">字标（无 Logo 时显示）</label>
|
||
<Input
|
||
id="brand-mark"
|
||
value={branding.logo_mark}
|
||
onChange={e => setBranding(b => ({ ...b, logo_mark: e.target.value.slice(0, 2) }))}
|
||
placeholder="姜"
|
||
maxLength={2}
|
||
/>
|
||
<span className="admin-mail-field-hint">建议 1 个汉字或字母</span>
|
||
</div>
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="brand-slogan">标语</label>
|
||
<Input
|
||
id="brand-slogan"
|
||
value={branding.slogan}
|
||
onChange={e => setBranding(b => ({ ...b, slogan: e.target.value }))}
|
||
placeholder="拾三一隅，自在交流"
|
||
maxLength={200}
|
||
/>
|
||
<span className="admin-mail-field-hint">短句，出现在浏览器标题与页脚</span>
|
||
</div>
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="brand-description">站点简介</label>
|
||
<Textarea
|
||
id="brand-description"
|
||
value={branding.description ?? ''}
|
||
onChange={e => setBranding(b => ({ ...b, description: e.target.value }))}
|
||
placeholder="一两段话介绍本站定位与内容，便于搜索引擎与访客理解"
|
||
maxLength={500}
|
||
rows={3}
|
||
/>
|
||
<span className="admin-mail-field-hint">
|
||
用于右侧栏顶部论坛简介与 SEO description；未填写时回退到标语（建议 80–160 字）
|
||
</span>
|
||
</div>
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="brand-keywords">SEO 关键词</label>
|
||
<Input
|
||
id="brand-keywords"
|
||
value={branding.keywords ?? ''}
|
||
onChange={e => setBranding(b => ({ ...b, keywords: e.target.value }))}
|
||
placeholder="论坛,社区,技术交流"
|
||
maxLength={200}
|
||
/>
|
||
<span className="admin-mail-field-hint">
|
||
用于 meta keywords；用逗号分隔，最多 20 个（支持中文逗号）
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="admin-settings-section" id="settings-brand-assets">
|
||
<div className="admin-settings-section-head">
|
||
<h3>视觉资源</h3>
|
||
<p>站点 Logo、浏览器标签图标与默认社交分享图</p>
|
||
</div>
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="brand-logo-file">站点 Logo</label>
|
||
<div className="admin-brand-upload-row">
|
||
<Input
|
||
id="brand-logo-file"
|
||
type="file"
|
||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||
onChange={e => {
|
||
const f = e.target.files?.[0];
|
||
void handleUploadBrandAsset('logo', f);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
{branding.logo && (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
loading={uploadingBrand === 'logo'}
|
||
onClick={() => void handleClearBrandAsset('logo')}
|
||
>
|
||
清除
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<span className="admin-mail-field-hint">
|
||
{uploadingBrand === 'logo' ? '上传中…' : '保留原图并生成 WebP，最大 2MB'}
|
||
</span>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="brand-favicon-file">Favicon</label>
|
||
<div className="admin-brand-upload-row">
|
||
<Input
|
||
id="brand-favicon-file"
|
||
type="file"
|
||
accept="image/png,image/jpeg,image/gif,image/webp,image/x-icon,image/vnd.microsoft.icon"
|
||
onChange={e => {
|
||
const f = e.target.files?.[0];
|
||
void handleUploadBrandAsset('favicon', f);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
{branding.favicon && (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
loading={uploadingBrand === 'favicon'}
|
||
onClick={() => void handleClearBrandAsset('favicon')}
|
||
>
|
||
清除
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<span className="admin-mail-field-hint">
|
||
{branding.favicon ? `当前：${branding.favicon}` : '浏览器标签图标'}
|
||
</span>
|
||
</div>
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="brand-og-image-file">默认社交分享图（OG Image）</label>
|
||
<div className="admin-brand-upload-row">
|
||
<Input
|
||
id="brand-og-image-file"
|
||
type="file"
|
||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||
onChange={e => {
|
||
const f = e.target.files?.[0];
|
||
void handleUploadBrandAsset('og_image', f);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
{branding.og_image && (
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
loading={uploadingBrand === 'og_image'}
|
||
onClick={() => void handleClearBrandAsset('og_image')}
|
||
>
|
||
清除
|
||
</Button>
|
||
)}
|
||
</div>
|
||
<span className="admin-mail-field-hint">
|
||
{uploadingBrand === 'og_image'
|
||
? '上传中…'
|
||
: branding.og_image
|
||
? `当前：${branding.og_image}；建议 1200×630，用于微信/社交预览；未设置时回退 Logo`
|
||
: '建议 1200×630，用于微信/社交预览；未设置时回退 Logo'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="admin-settings-section" id="settings-brand-footer">
|
||
<div className="admin-settings-section-head">
|
||
<h3>页脚信息</h3>
|
||
<p>备案号显示在站点底部；友情链接请在「社区 → 友情链接」管理</p>
|
||
</div>
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="brand-icp">ICP 备案号</label>
|
||
<Input
|
||
id="brand-icp"
|
||
value={branding.icp_beian ?? ''}
|
||
onChange={e => setBranding(b => ({ ...b, icp_beian: e.target.value }))}
|
||
placeholder="京ICP备xxxxxxxx号"
|
||
maxLength={64}
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="brand-icp-url">ICP 跳转链接</label>
|
||
<Input
|
||
id="brand-icp-url"
|
||
value={branding.icp_beian_url ?? ''}
|
||
onChange={e => setBranding(b => ({ ...b, icp_beian_url: e.target.value }))}
|
||
placeholder="https://beian.miit.gov.cn/"
|
||
maxLength={512}
|
||
/>
|
||
<span className="admin-mail-field-hint">留空则用工信部默认页</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="admin-settings-section" id="settings-aside">
|
||
<div className="admin-settings-section-head">
|
||
<h3>右侧栏组件</h3>
|
||
<p>「站点简介」固定在最上方；以下模块可拖拽排序，保存后同步影响桌面右侧栏与手机「社区动态」抽屉</p>
|
||
</div>
|
||
<AsideWidgetList
|
||
widgets={asideWidgets}
|
||
onChange={handleAsideWidgetsChange}
|
||
/>
|
||
</section>
|
||
|
||
<section className="admin-settings-section" id="settings-nav">
|
||
<div className="admin-settings-section-head">
|
||
<h3>浏览与链接</h3>
|
||
<p>控制打开帖子与正文链接时是否新开浏览器标签页</p>
|
||
</div>
|
||
<div className="admin-settings-table" role="group" aria-label="浏览与链接">
|
||
{NAV_TOGGLES.map(row => (
|
||
<div key={row.key} className="admin-settings-row">
|
||
<span className="admin-settings-row-label" id={`limit-label-${row.key}`}>
|
||
{row.label}
|
||
</span>
|
||
<div className="admin-settings-row-input">
|
||
<button
|
||
type="button"
|
||
id={`limit-${row.key}`}
|
||
role="switch"
|
||
aria-checked={!!limits[row.key]}
|
||
aria-labelledby={`limit-label-${row.key}`}
|
||
className={`admin-settings-switch${limits[row.key] ? ' is-on' : ''}`}
|
||
onClick={() => handleBoolLimitChange(row.key, !limits[row.key])}
|
||
>
|
||
<span className="admin-settings-switch-ui" aria-hidden />
|
||
</button>
|
||
</div>
|
||
<span className="admin-settings-row-hint">{row.hint}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="admin-settings-section" id="settings-feed-list">
|
||
<div className="admin-settings-section-head">
|
||
<h3>列表呈现</h3>
|
||
<p>首页及帖子列表的信息密度与缩略图展示</p>
|
||
</div>
|
||
<div className="admin-settings-table" role="group" aria-label="列表呈现">
|
||
<div className="admin-settings-row">
|
||
<span className="admin-settings-row-label" id="limit-label-feed_list_style">
|
||
帖子列表样式
|
||
</span>
|
||
<div className="admin-settings-row-input admin-settings-row-input--stack">
|
||
<div className="admin-permalink-presets">
|
||
{([
|
||
{ value: 'title' as const, label: '仅标题' },
|
||
{ value: 'excerpt' as const, label: '标题+摘要' },
|
||
{ value: 'thumbnail' as const, label: '标题+摘要+缩略图' },
|
||
]).map(opt => (
|
||
<button
|
||
key={opt.value}
|
||
type="button"
|
||
className={`admin-permalink-chip${limits.feed_list_style === opt.value ? ' is-active' : ''}`}
|
||
onClick={() => setLimits(prev => prev ? { ...prev, feed_list_style: opt.value } : prev)}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<span className="admin-settings-row-hint">
|
||
仅标题最紧凑；摘要模式增加一行预览；缩略图模式在有站内配图时右侧显示封面
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="admin-settings-section" id="settings-permalink">
|
||
<div className="admin-settings-section-head">
|
||
<h3>伪静态 URL</h3>
|
||
<p>为帖子 / 用户生成带后缀的规范链接，非规范路径会 301 跳转</p>
|
||
</div>
|
||
<div className="admin-settings-table" role="group" aria-label="伪静态">
|
||
<div className="admin-settings-row">
|
||
<span className="admin-settings-row-label" id="limit-label-permalink_enabled">
|
||
启用伪静态
|
||
</span>
|
||
<div className="admin-settings-row-input">
|
||
<button
|
||
type="button"
|
||
id="limit-permalink_enabled"
|
||
role="switch"
|
||
aria-checked={!!limits.permalink_enabled}
|
||
aria-labelledby="limit-label-permalink_enabled"
|
||
className={`admin-settings-switch${limits.permalink_enabled ? ' is-on' : ''}`}
|
||
onClick={() => setLimits(prev => prev ? { ...prev, permalink_enabled: !prev.permalink_enabled } : prev)}
|
||
>
|
||
<span className="admin-settings-switch-ui" aria-hidden />
|
||
</button>
|
||
</div>
|
||
<span className="admin-settings-row-hint">关闭：/post/123 · 开启：/post/123.后缀</span>
|
||
</div>
|
||
<div className="admin-settings-row">
|
||
<span className="admin-settings-row-label" id="limit-label-permalink_ext">
|
||
URL 后缀
|
||
</span>
|
||
<div className="admin-settings-row-input admin-settings-row-input--stack">
|
||
<div className="admin-permalink-presets">
|
||
{(['html', 'htm', 'shtml'] as const).map(ext => (
|
||
<button
|
||
key={ext}
|
||
type="button"
|
||
className={`admin-permalink-chip${limits.permalink_ext === ext ? ' is-active' : ''}`}
|
||
disabled={!limits.permalink_enabled}
|
||
onClick={() => setLimits(prev => prev ? { ...prev, permalink_ext: ext } : prev)}
|
||
>
|
||
.{ext}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<Input
|
||
id="limit-permalink_ext"
|
||
value={limits.permalink_ext}
|
||
disabled={!limits.permalink_enabled}
|
||
placeholder="html"
|
||
aria-labelledby="limit-label-permalink_ext"
|
||
onChange={e => {
|
||
const v = e.target.value.replace(/^\./, '').toLowerCase();
|
||
setLimits(prev => prev ? { ...prev, permalink_ext: v } : prev);
|
||
}}
|
||
/>
|
||
</div>
|
||
<span className="admin-settings-row-hint">
|
||
预览：
|
||
<code className="admin-permalink-preview">
|
||
/post/123{limits.permalink_enabled ? `.${(limits.permalink_ext || 'html').replace(/^\./, '')}` : ''}
|
||
</code>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div className="admin-settings-bar">
|
||
<p>保存后立即影响顶栏、页脚、列表样式、链接打开方式、伪静态链接与浏览器标题</p>
|
||
<Button onClick={handleSaveBranding} loading={savingBranding}>
|
||
保存站点设置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'limits' && (
|
||
<div className="admin-settings-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">
|
||
<span>论坛限制</span>
|
||
<span className="admin-settings-card-badge">共 {SETTING_SECTIONS.length} 组</span>
|
||
</div>
|
||
<div className="admin-card-body">
|
||
<SettingTable sections={SETTING_SECTIONS} limits={limits} onChange={handleLimitChange} />
|
||
</div>
|
||
</div>
|
||
<div className="admin-settings-bar">
|
||
<p>修改后请点击保存，新规则立即对全部用户生效</p>
|
||
<Button onClick={handleSaveForumSettings} loading={savingForum}>
|
||
保存论坛限制
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'mail' && (
|
||
<div className="admin-settings-panel admin-mail-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">
|
||
<span>SMTP 邮件配置</span>
|
||
<span className={`admin-mail-status${mail.enabled ? ' is-on' : ''}`}>
|
||
<span className="admin-mail-status-dot" aria-hidden />
|
||
{mail.enabled ? '已启用' : '未启用'}
|
||
</span>
|
||
</div>
|
||
<div className="admin-card-body admin-mail-body">
|
||
<label className="admin-mail-switch" htmlFor="mail-enabled">
|
||
<input
|
||
id="mail-enabled"
|
||
type="checkbox"
|
||
checked={mail.enabled}
|
||
onChange={e => setMail(m => ({ ...m, enabled: e.target.checked }))}
|
||
/>
|
||
<span className="admin-mail-switch-ui" aria-hidden />
|
||
<span className="admin-mail-switch-copy">
|
||
<strong>启用邮件服务</strong>
|
||
<small>开启并填写完整后，新用户注册需邮箱验证码；首个管理员可在未配置时直接注册</small>
|
||
</span>
|
||
</label>
|
||
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="mail-host">SMTP 主机</label>
|
||
<Input
|
||
id="mail-host"
|
||
value={mail.host}
|
||
onChange={e => setMail(m => ({ ...m, host: e.target.value }))}
|
||
placeholder="smtp.example.com"
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="mail-port">端口</label>
|
||
<Input
|
||
id="mail-port"
|
||
type="number"
|
||
min={1}
|
||
value={mail.port}
|
||
onChange={e => setMail(m => ({ ...m, port: parseInt(e.target.value, 10) || 0 }))}
|
||
/>
|
||
<span className="admin-mail-field-hint">常用 465 / 587</span>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="mail-encryption">加密方式</label>
|
||
<select
|
||
id="mail-encryption"
|
||
className="admin-mail-select"
|
||
value={mail.encryption}
|
||
onChange={e => setMail(m => ({
|
||
...m,
|
||
encryption: e.target.value as MailConfig['encryption'],
|
||
}))}
|
||
>
|
||
<option value="ssl">SSL / TLS（465）</option>
|
||
<option value="starttls">STARTTLS（587）</option>
|
||
<option value="none">无加密</option>
|
||
</select>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="mail-username">用户名</label>
|
||
<Input
|
||
id="mail-username"
|
||
value={mail.username}
|
||
onChange={e => setMail(m => ({ ...m, username: e.target.value }))}
|
||
placeholder="SMTP 登录账号"
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="mail-password">密码</label>
|
||
<Input
|
||
id="mail-password"
|
||
type="password"
|
||
value={mail.password || ''}
|
||
onChange={e => setMail(m => ({ ...m, password: e.target.value }))}
|
||
placeholder={mail.has_password ? '已设置，留空不改' : '密码或授权码'}
|
||
autoComplete="new-password"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="mail-from">发件地址</label>
|
||
<Input
|
||
id="mail-from"
|
||
type="email"
|
||
value={mail.from}
|
||
onChange={e => setMail(m => ({ ...m, from: e.target.value }))}
|
||
placeholder="noreply@example.com"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="mail-from-name">发件人名称</label>
|
||
<Input
|
||
id="mail-from-name"
|
||
value={mail.from_name}
|
||
onChange={e => setMail(m => ({ ...m, from_name: e.target.value }))}
|
||
placeholder="姜十三论坛"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-mail-test">
|
||
<div className="admin-mail-test-head">
|
||
<strong>发送测试</strong>
|
||
<span>请先保存配置，再向指定邮箱发一封测试信</span>
|
||
</div>
|
||
<div className="admin-mail-test-row">
|
||
<Input
|
||
id="mail-test-to"
|
||
type="email"
|
||
value={testTo}
|
||
onChange={e => setTestTo(e.target.value)}
|
||
placeholder="your@email.com"
|
||
aria-label="测试收件邮箱"
|
||
/>
|
||
<Button variant="outline" onClick={handleTestMail} loading={testingMail}>
|
||
发送测试
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-settings-bar">
|
||
<p>保存后立即生效，注册页将按配置要求邮箱验证码</p>
|
||
<Button onClick={handleSaveMailSettings} loading={savingMail}>
|
||
保存邮件设置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'oidc' && (
|
||
<div className="admin-settings-panel admin-mail-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">
|
||
<span>OIDC Provider（全局）</span>
|
||
<span className={`admin-mail-status${oidc.ready ? ' is-on' : ''}`}>
|
||
<span className="admin-mail-status-dot" aria-hidden />
|
||
{oidcStatusLabel(oidc, oauthClients.length)}
|
||
</span>
|
||
</div>
|
||
<div className="admin-card-body admin-mail-body">
|
||
<label className="admin-mail-switch" htmlFor="oidc-enabled">
|
||
<input
|
||
id="oidc-enabled"
|
||
type="checkbox"
|
||
checked={oidc.enabled}
|
||
onChange={e => setOidc(o => ({ ...o, enabled: e.target.checked }))}
|
||
/>
|
||
<span className="admin-mail-switch-ui" aria-hidden />
|
||
<span className="admin-mail-switch-copy">
|
||
<strong>启用 OIDC</strong>
|
||
<small>开启后，Gitea 等可将本论坛作为身份源；已登录用户跳转静默授权</small>
|
||
</span>
|
||
</label>
|
||
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="oidc-root-url">对外公网地址（ROOT_URL）</label>
|
||
<Input
|
||
id="oidc-root-url"
|
||
value={oidc.root_url}
|
||
onChange={e => setOidc(o => ({ ...o, root_url: e.target.value }))}
|
||
placeholder="https://bbs.iioio.com"
|
||
autoComplete="off"
|
||
/>
|
||
<span className="admin-mail-field-hint">无尾斜杠；作为 OIDC Issuer</span>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="oidc-group-claim">用户组 Claim 名</label>
|
||
<Input
|
||
id="oidc-group-claim"
|
||
value={oidc.group_claim}
|
||
onChange={e => setOidc(o => ({ ...o, group_claim: e.target.value }))}
|
||
placeholder="groups"
|
||
/>
|
||
<span className="admin-mail-field-hint">Gitea「用户组 Claim 名称」填此项</span>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="oidc-user-group">普通用户组值</label>
|
||
<Input
|
||
id="oidc-user-group"
|
||
value={oidc.user_group}
|
||
onChange={e => setOidc(o => ({ ...o, user_group: e.target.value }))}
|
||
placeholder="gitea-users"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="oidc-admin-group">管理员组值</label>
|
||
<Input
|
||
id="oidc-admin-group"
|
||
value={oidc.admin_group}
|
||
onChange={e => setOidc(o => ({ ...o, admin_group: e.target.value }))}
|
||
placeholder="gitea-admin"
|
||
/>
|
||
<span className="admin-mail-field-hint">Gitea「管理员用户组」填此项</span>
|
||
</div>
|
||
</div>
|
||
|
||
{oidc.discovery_url && (
|
||
<div className="admin-mail-test">
|
||
<div className="admin-mail-test-head">
|
||
<strong>给 Gitea 填写</strong>
|
||
<span>Provider 选 OpenID Connect；可选填 groups 映射管理员</span>
|
||
</div>
|
||
<code className="admin-oidc-url">{oidc.discovery_url}</code>
|
||
{oidc.logout_url && <code className="admin-oidc-url">登出：{oidc.logout_url}</code>}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-settings-bar">
|
||
<p>全局配置保存后立即生效；应用凭证在下方管理（密钥 bcrypt 存储）</p>
|
||
<Button onClick={handleSaveOidcSettings} loading={savingOidc}>
|
||
保存全局设置
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="admin-card admin-settings-card" style={{ marginTop: 16 }}>
|
||
<div className="admin-card-head">
|
||
<span>OAuth 应用</span>
|
||
<span className="admin-settings-card-badge">{oauthClients.length} 个</span>
|
||
</div>
|
||
<div className="admin-card-body admin-mail-body">
|
||
{revealedSecret && (
|
||
<div className="admin-mail-test">
|
||
<div className="admin-mail-test-head">
|
||
<strong>客户端密钥（仅显示一次）</strong>
|
||
<span>请立即复制到 Gitea，离开后无法再查看明文</span>
|
||
</div>
|
||
<code className="admin-oidc-url">{revealedSecret}</code>
|
||
<Button variant="outline" className="mt-2" onClick={() => setRevealedSecret(null)}>已保存，关闭提示</Button>
|
||
</div>
|
||
)}
|
||
|
||
{oauthClients.length > 0 && (
|
||
<div className="admin-oauth-list">
|
||
{oauthClients.map(c => (
|
||
<div key={c.id} className="admin-oauth-row">
|
||
<div>
|
||
<strong>{c.name}</strong>
|
||
<div className="admin-mail-field-hint">
|
||
{c.client_id} · {c.enabled ? '启用' : '停用'} · {c.redirect_uris}
|
||
</div>
|
||
</div>
|
||
<div className="admin-oauth-actions">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => {
|
||
setEditingClientId(c.id);
|
||
setClientForm({
|
||
client_id: c.client_id,
|
||
name: c.name,
|
||
redirect_uris: c.redirect_uris,
|
||
enabled: c.enabled,
|
||
});
|
||
}}
|
||
>
|
||
编辑
|
||
</Button>
|
||
<Button variant="outline" size="sm" onClick={() => handleRotateSecret(c.id)} loading={savingClient}>
|
||
轮换密钥
|
||
</Button>
|
||
<Button variant="outline" size="sm" onClick={() => handleDeleteOAuthClient(c.id)}>
|
||
删除
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div className="admin-mail-grid" style={{ marginTop: 12 }}>
|
||
{!editingClientId && (
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="oauth-client-id">客户端 ID</label>
|
||
<Input
|
||
id="oauth-client-id"
|
||
value={clientForm.client_id}
|
||
onChange={e => setClientForm(f => ({ ...f, client_id: e.target.value }))}
|
||
placeholder="gitea"
|
||
/>
|
||
</div>
|
||
)}
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="oauth-client-name">显示名称</label>
|
||
<Input
|
||
id="oauth-client-name"
|
||
value={clientForm.name}
|
||
onChange={e => setClientForm(f => ({ ...f, name: e.target.value }))}
|
||
placeholder="Gitea"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="oauth-redirect">回调地址</label>
|
||
<Textarea
|
||
id="oauth-redirect"
|
||
value={clientForm.redirect_uris}
|
||
onChange={e => setClientForm(f => ({ ...f, redirect_uris: e.target.value }))}
|
||
rows={2}
|
||
placeholder="https://git.iioio.com/user/oauth2/jiang13/callback"
|
||
/>
|
||
</div>
|
||
<label className="admin-mail-switch" htmlFor="oauth-enabled">
|
||
<input
|
||
id="oauth-enabled"
|
||
type="checkbox"
|
||
checked={clientForm.enabled}
|
||
onChange={e => setClientForm(f => ({ ...f, enabled: e.target.checked }))}
|
||
/>
|
||
<span className="admin-mail-switch-ui" aria-hidden />
|
||
<span className="admin-mail-switch-copy">
|
||
<strong>启用此应用</strong>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="admin-settings-bar" style={{ marginTop: 8 }}>
|
||
<p>{editingClientId ? `正在编辑 #${editingClientId}` : '新建时自动生成密钥（仅显示一次）'}</p>
|
||
<div className="admin-settings-bar-actions">
|
||
{editingClientId && (
|
||
<Button variant="outline" onClick={resetClientForm}>取消编辑</Button>
|
||
)}
|
||
<Button onClick={handleSaveOAuthClient} loading={savingClient}>
|
||
{editingClientId ? '保存应用' : '创建应用'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'gitea' && (
|
||
<div className="admin-settings-panel admin-mail-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">
|
||
<span>Gitea 仓库同步</span>
|
||
<span className={`admin-mail-status${gitea.ready ? ' is-on' : ''}`}>
|
||
<span className="admin-mail-status-dot" aria-hidden />
|
||
{giteaStatusLabel(gitea)}
|
||
</span>
|
||
</div>
|
||
<div className="admin-card-body admin-mail-body">
|
||
<label className="admin-mail-switch" htmlFor="gitea-enabled">
|
||
<input
|
||
id="gitea-enabled"
|
||
type="checkbox"
|
||
checked={gitea.enabled}
|
||
onChange={e => setGitea(g => ({ ...g, enabled: e.target.checked }))}
|
||
/>
|
||
<span className="admin-mail-switch-ui" aria-hidden />
|
||
<span className="admin-mail-switch-copy">
|
||
<strong>启用同步</strong>
|
||
<small>按论坛用户名匹配 Gitea login，拉取公开仓库供「开源码桶」页展示</small>
|
||
</span>
|
||
</label>
|
||
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="gitea-base-url">Gitea 地址（BASE_URL）</label>
|
||
<Input
|
||
id="gitea-base-url"
|
||
value={gitea.base_url}
|
||
onChange={e => setGitea(g => ({ ...g, base_url: e.target.value }))}
|
||
placeholder="https://git.iioio.com"
|
||
autoComplete="off"
|
||
/>
|
||
<span className="admin-mail-field-hint">无尾斜杠</span>
|
||
</div>
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="gitea-token">Access Token</label>
|
||
<Input
|
||
id="gitea-token"
|
||
type="password"
|
||
value={gitea.token ?? ''}
|
||
onChange={e => setGitea(g => ({ ...g, token: e.target.value }))}
|
||
placeholder={gitea.has_token ? '已配置，留空则保持不变' : '只读 Token'}
|
||
autoComplete="new-password"
|
||
/>
|
||
<span className="admin-mail-field-hint">需能列出用户公开仓库</span>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="gitea-interval">同步间隔</label>
|
||
<Input
|
||
id="gitea-interval"
|
||
type="number"
|
||
min={5}
|
||
max={1440}
|
||
value={gitea.sync_interval_min}
|
||
onChange={e => setGitea(g => ({
|
||
...g,
|
||
sync_interval_min: Number.parseInt(e.target.value, 10) || 60,
|
||
}))}
|
||
/>
|
||
<span className="admin-mail-field-hint">分钟，最小 5</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-settings-bar">
|
||
<p>保存后按间隔自动同步；也可立即手动拉取</p>
|
||
<div className="admin-settings-bar-actions">
|
||
<Button variant="outline" onClick={handleSyncGitea} loading={syncingGitea} disabled={!gitea.ready}>
|
||
立即同步
|
||
</Button>
|
||
<Button onClick={handleSaveGiteaSettings} loading={savingGitea}>
|
||
保存同步设置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'storage' && (
|
||
<div className="admin-settings-panel admin-mail-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">
|
||
<span>上传对象存储</span>
|
||
<span className={`admin-mail-status${storage.ready ? ' is-on' : ''}`}>
|
||
<span className="admin-mail-status-dot" aria-hidden />
|
||
{storageStatusLabel(storage)}
|
||
</span>
|
||
</div>
|
||
<div className="admin-card-body admin-mail-body">
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="storage-type">存储类型</label>
|
||
<select
|
||
id="storage-type"
|
||
className="admin-mail-select"
|
||
value={storage.type}
|
||
onChange={e => setStorage(s => ({
|
||
...s,
|
||
type: e.target.value === 's3' ? 's3' : 'local',
|
||
}))}
|
||
>
|
||
<option value="local">本地磁盘（data/uploads）</option>
|
||
<option value="s3">S3 兼容（MinIO / OSS / 七牛等）</option>
|
||
</select>
|
||
<span className="admin-mail-field-hint">头像、帖子图、站点品牌图均走此后端</span>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="storage-image-delivery">图片展示方案</label>
|
||
<select
|
||
id="storage-image-delivery"
|
||
className="admin-mail-select"
|
||
value={storage.image_delivery || 'webp'}
|
||
onChange={e => setStorage(s => ({
|
||
...s,
|
||
image_delivery: e.target.value === 'original' ? 'original' : 'webp',
|
||
}))}
|
||
>
|
||
<option value="webp">使用 WebP（省流量，仍保留原图）</option>
|
||
<option value="original">使用原图（体积更大）</option>
|
||
</select>
|
||
<span className="admin-mail-field-hint">
|
||
静态图上传后同时保存原图与 WebP；此项只影响新上传写入正文/头像的 URL。动图 GIF 始终保留原文件
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{storage.type === 's3' && (
|
||
<>
|
||
<div className="admin-mail-grid">
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="storage-endpoint">Endpoint</label>
|
||
<Input
|
||
id="storage-endpoint"
|
||
value={storage.endpoint}
|
||
onChange={e => setStorage(s => ({ ...s, endpoint: e.target.value }))}
|
||
placeholder="https://s3.example.com"
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="storage-region">Region</label>
|
||
<Input
|
||
id="storage-region"
|
||
value={storage.region}
|
||
onChange={e => setStorage(s => ({ ...s, region: e.target.value }))}
|
||
placeholder="us-east-1"
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="storage-bucket">Bucket</label>
|
||
<Input
|
||
id="storage-bucket"
|
||
value={storage.bucket}
|
||
onChange={e => setStorage(s => ({ ...s, bucket: e.target.value }))}
|
||
placeholder="jiang13"
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="storage-access-key">Access Key</label>
|
||
<Input
|
||
id="storage-access-key"
|
||
value={storage.access_key}
|
||
onChange={e => setStorage(s => ({ ...s, access_key: e.target.value }))}
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="storage-secret-key">Secret Key</label>
|
||
<Input
|
||
id="storage-secret-key"
|
||
type="password"
|
||
value={storage.secret_key ?? ''}
|
||
onChange={e => setStorage(s => ({ ...s, secret_key: e.target.value }))}
|
||
placeholder={storage.has_secret_key ? '已配置，留空则保持不变' : 'Secret Key'}
|
||
autoComplete="new-password"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field admin-mail-field--span2">
|
||
<label htmlFor="storage-public-base">公开访问地址</label>
|
||
<Input
|
||
id="storage-public-base"
|
||
value={storage.public_base_url}
|
||
onChange={e => setStorage(s => ({ ...s, public_base_url: e.target.value }))}
|
||
placeholder="https://cdn.example.com/forum"
|
||
autoComplete="off"
|
||
/>
|
||
<span className="admin-mail-field-hint">无尾斜杠；上传后返回此前缀下的绝对 URL</span>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label htmlFor="storage-prefix">对象前缀（可选）</label>
|
||
<Input
|
||
id="storage-prefix"
|
||
value={storage.prefix}
|
||
onChange={e => setStorage(s => ({ ...s, prefix: e.target.value }))}
|
||
placeholder="forum/"
|
||
autoComplete="off"
|
||
/>
|
||
</div>
|
||
<div className="admin-mail-field">
|
||
<label className="admin-mail-switch" htmlFor="storage-path-style" style={{ marginTop: 22 }}>
|
||
<input
|
||
id="storage-path-style"
|
||
type="checkbox"
|
||
checked={storage.force_path_style}
|
||
onChange={e => setStorage(s => ({ ...s, force_path_style: e.target.checked }))}
|
||
/>
|
||
<span className="admin-mail-switch-ui" aria-hidden />
|
||
<span className="admin-mail-switch-copy">
|
||
<strong>Path-Style</strong>
|
||
<small>MinIO 等多为开启；AWS S3 官方多为关闭</small>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<p className="admin-mail-field-hint" style={{ marginTop: 8 }}>
|
||
请确保 Bucket 已配置公开读或 CDN 回源可读；本程序不代设 ACL。
|
||
</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-settings-bar">
|
||
<p>保存后立即生效，无需重启；切换存储后端或展示方案不会改写历史帖子里的图片 URL</p>
|
||
<Button onClick={handleSaveStorageSettings} loading={savingStorage}>
|
||
保存存储设置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'filter' && (
|
||
<div className="admin-settings-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">
|
||
<span>敏感词过滤</span>
|
||
<span className="admin-settings-card-badge">{settings.filter_word_count} 个词条</span>
|
||
</div>
|
||
<div className="admin-card-body admin-settings-filter-body">
|
||
<p className="admin-settings-filter-tip">
|
||
每行一个词，<code>#</code> 开头为注释。保存后写入 <code>filter_words.txt</code> 并立即生效。
|
||
</p>
|
||
<Textarea
|
||
rows={16}
|
||
value={filterWords}
|
||
onChange={e => setFilterWords(e.target.value)}
|
||
className="admin-settings-filter-textarea"
|
||
spellCheck={false}
|
||
placeholder={'# 示例\n违禁词\n广告刷单'}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="admin-settings-bar">
|
||
<p>敏感词会在发帖、评论、昵称等文本中自动替换为 *</p>
|
||
<Button onClick={handleSaveFilterWords} loading={savingFilter}>
|
||
保存敏感词
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'system' && (
|
||
<div className="admin-settings-panel">
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">运行信息</div>
|
||
<div className="admin-card-body">
|
||
<dl className="admin-settings-info">
|
||
<div className="admin-settings-info-row">
|
||
<dt>数据目录</dt>
|
||
<dd><code>{settings.data_dir}</code></dd>
|
||
</div>
|
||
<div className="admin-settings-info-row">
|
||
<dt>数据库</dt>
|
||
<dd><code>{settings.db_path}</code></dd>
|
||
</div>
|
||
<div className="admin-settings-info-row">
|
||
<dt>敏感词文件</dt>
|
||
<dd><code>{settings.filter_path}</code></dd>
|
||
</div>
|
||
<div className="admin-settings-info-row">
|
||
<dt>监听端口</dt>
|
||
<dd>{settings.port}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="admin-card admin-settings-card">
|
||
<div className="admin-card-head">数据备份</div>
|
||
<div className="admin-card-body admin-settings-backup-body">
|
||
<p>导出当前 SQLite 数据库副本，便于迁移或灾难恢复。</p>
|
||
<p className="admin-settings-backup-name">
|
||
文件名：<code>jiang13_backup_YYYYMMDD_HHMMSS.db</code>
|
||
</p>
|
||
<Button onClick={handleBackup} loading={backing}>
|
||
<Database size={16} />
|
||
立即备份并下载
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|