47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { useTheme, useApp } from '../../contexts';
|
||
|
|
|
||
|
|
const tabs = [
|
||
|
|
{ id: 'docs', label: '文档管理' },
|
||
|
|
{ id: 'compliance', label: '合规分析' },
|
||
|
|
{ id: 'status', label: '系统状态' },
|
||
|
|
{ id: 'rag', label: '法规对话' },
|
||
|
|
];
|
||
|
|
|
||
|
|
export const Tabs: React.FC = () => {
|
||
|
|
const { theme } = useTheme();
|
||
|
|
const { activeTab, setActiveTab } = useApp();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav
|
||
|
|
className="h-[56px] flex items-center"
|
||
|
|
style={{
|
||
|
|
padding: '0 48px',
|
||
|
|
borderBottom: `1px solid ${theme.border}`,
|
||
|
|
backgroundColor: theme.bg,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{tabs.map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab.id}
|
||
|
|
onClick={() => setActiveTab(tab.id as any)}
|
||
|
|
style={{
|
||
|
|
height: 56,
|
||
|
|
padding: '0 32px',
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: activeTab === tab.id ? 600 : 400,
|
||
|
|
color: activeTab === tab.id ? theme.accent : theme.text3,
|
||
|
|
background: 'transparent',
|
||
|
|
border: 'none',
|
||
|
|
borderBottom: activeTab === tab.id ? `3px solid ${theme.accent}` : '3px solid transparent',
|
||
|
|
marginBottom: -1,
|
||
|
|
cursor: 'pointer',
|
||
|
|
transition: 'all 0.2s ease',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{tab.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
};
|