Yuemin.Mao
36f1d9af27
- Created StatusPage component with system stats, configuration, and indexed documents overview. - Added RagChatPage component for chat functionality. - Introduced global CSS styles for light and dark themes, including utility classes and animations. - Defined TypeScript types for compliance, documents, and themes. - Configured Tailwind CSS for dynamic theming and custom animations. - Set up TypeScript configuration for app and node environments. - Initialized Vite configuration for React project.
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: 'RAG对话' },
|
|
];
|
|
|
|
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>
|
|
);
|
|
}; |