logan
14e394fb09
- 新增 5 种登录页组件: SplitView/CenteredCard/SidePanel/FullImage/MinimalDark - 提取 useLogin hook 共享登录逻辑 - LoginPage 改为风格分发器, localStorage(login-style) 控制渲染 - SettingsPage 新增外观设置 tab: 主题切换 + 登录风格选择器(含缩略图预览) - AppearanceSettings 组件: 5 种风格卡片式切换 - 文档全面更新为 Go/Gin 架构: - ARCHITECTURE.md: Go 项目结构/handler/GORM 模型/中间件/LDAP/驱动矩阵 - FEATURES.md: v0.3.1 功能清单含登录主题系统 - ROADMAP.md: Python→Go 迁移历史 + Sprint 计划
58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { useState } from 'react';
|
|
import PlatformConfigPage from './PlatformConfigPage';
|
|
import AuditRulesPage from './AuditRulesPage';
|
|
import AnnouncementPage from './AnnouncementPage';
|
|
import NotificationPage from './NotificationPage';
|
|
import LdapConfigPage from './LdapConfigPage';
|
|
import AppearanceSettings from './AppearanceSettings';
|
|
|
|
const tabs = [
|
|
{ id: 'appearance', label: '外观设置', icon: '🎨' },
|
|
{ id: 'platform', label: '平台配置', icon: '⚙️' },
|
|
{ id: 'rules', label: '审核规则', icon: '🛡️' },
|
|
{ id: 'notification', label: '消息推送', icon: '🔔' },
|
|
{ id: 'ldap', label: 'LDAP', icon: '🔐' },
|
|
] as const;
|
|
|
|
type TabId = typeof tabs[number]['id'];
|
|
|
|
export default function SettingsPage() {
|
|
const [activeTab, setActiveTab] = useState<TabId>('appearance');
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div>
|
|
<h1 className="text-xl font-semibold">系统设置</h1>
|
|
<p className="text-sm text-[var(--dg-text-muted)] mt-1">管理平台外观、配置、审核规则、消息推送和 LDAP 认证</p>
|
|
</div>
|
|
|
|
{/* Tab 导航 */}
|
|
<div className="flex gap-1 p-1 bg-[var(--dg-bg-tertiary)] rounded-xl w-fit">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
|
activeTab === tab.id
|
|
? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] shadow-sm'
|
|
: 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
|
|
}`}
|
|
>
|
|
<span>{tab.icon}</span>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 内容区 */}
|
|
<div>
|
|
{activeTab === 'appearance' && <AppearanceSettings />}
|
|
{activeTab === 'platform' && <PlatformConfigPage />}
|
|
{activeTab === 'rules' && <AuditRulesPage />}
|
|
{activeTab === 'notification' && <NotificationPage />}
|
|
{activeTab === 'ldap' && <LdapConfigPage />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|