Files
opsxsql/frontend/src/pages/SettingsPage.tsx
T
logan 8b921c6c83 refactor: mock清理+安全配置+通用组件+菜单优化
P0安全: SECRET_KEY/ADMIN_PASSWORD/CORS环境变量化, seed仅admin

P1Mock: mock.ts 301->88行, 删8数据mock+5generateMock, net-1300行

P2组件: useToast/useFetchList+ConfirmDialog/FormDialog

P3菜单: menuSections/menuItems->constants/menu.ts

P4API: NotificationsPage/WorkflowPage重写+RolesPage演示

测试: 1050passed, tsc clean
2026-05-24 02:42:29 +08:00

57 lines
2.0 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';
const tabs = [
{ id: 'platform', label: '平台配置', icon: '⚙️' },
{ id: 'rules', label: '审核规则', icon: '🛡️' },
{ id: 'announcement', 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>('platform');
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 === 'platform' && <PlatformConfigPage />}
{activeTab === 'rules' && <AuditRulesPage />}
{activeTab === 'announcement' && <AnnouncementPage />}
{activeTab === 'notification' && <NotificationPage />}
{activeTab === 'ldap' && <LdapConfigPage />}
</div>
</div>
);
}