92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Base } from "./table/index";
|
|
import { markService } from "../modules/mark-service";
|
|
import { SigmaGraph } from "./graph/sigma/index";
|
|
import { DocsComponent } from "./docs";
|
|
import { MarkDetailList } from "./card/MarkDetailList";
|
|
|
|
const tabs = [
|
|
{
|
|
key: 'table',
|
|
title: '表格'
|
|
},
|
|
{
|
|
key: 'card',
|
|
title: '卡片'
|
|
},
|
|
{
|
|
key: 'graph',
|
|
title: '关系图'
|
|
},
|
|
{
|
|
key: 'docs',
|
|
title: '文档'
|
|
},
|
|
{
|
|
key: 'world',
|
|
title: '世界'
|
|
}
|
|
];
|
|
|
|
export const BaseApp = () => {
|
|
const [activeTab, setActiveTab] = useState('table');
|
|
const [dataSource, setDataSource] = useState<any[]>([]);
|
|
useEffect(() => {
|
|
getMarks();
|
|
}, []);
|
|
const getMarks = async () => {
|
|
const marks = await markService.getAllMarks();
|
|
setDataSource(marks);
|
|
}
|
|
const renderContent = () => {
|
|
switch (activeTab) {
|
|
case 'table':
|
|
return <Base dataSource={dataSource} />;
|
|
case 'graph':
|
|
return (
|
|
<div className="w-full h-96">
|
|
<SigmaGraph dataSource={dataSource} />
|
|
</div>
|
|
);
|
|
case 'card':
|
|
return <MarkDetailList data={dataSource} />;
|
|
case 'docs':
|
|
return <DocsComponent dataSource={dataSource} />;
|
|
case 'world':
|
|
return (
|
|
<div className="flex items-center justify-center h-96 text-gray-500">
|
|
世界模块暂未实现
|
|
</div>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full h-full">
|
|
{/* Tab 导航栏 */}
|
|
<div className="border-b border-gray-200">
|
|
<nav className="flex space-x-8">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={`py-2 px-4 border-b-2 font-medium text-sm transition-all duration-200 ease-in-out transform cursor-pointer ${activeTab === tab.key
|
|
? 'border-blue-500 text-blue-600 bg-blue-50'
|
|
: 'border-transparent text-gray-500'
|
|
}`}
|
|
>
|
|
{tab.title}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Tab 内容区域 */}
|
|
<div className="flex-1 h-full">
|
|
{renderContent()}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |