feat(frontend): Day 6 - frontend basic architecture completed
This commit is contained in:
AI Clinical Dev Team
92
frontend/src/pages/AgentPage.tsx
Normal file
92
frontend/src/pages/AgentPage.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Card, Typography, Tag, Button, Space } from 'antd'
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
const { Title, Paragraph } = Typography
|
||||
|
||||
const AGENTS_MAP: Record<string, { name: string; icon: string; desc: string }> = {
|
||||
'topic-evaluation': { name: '选题评价', icon: '📊', desc: '评估研究选题的价值和可行性' },
|
||||
'picos-construction': { name: 'PICOS构建', icon: '🔍', desc: '构建研究问题的PICOS框架' },
|
||||
'literature-search': { name: '文献检索', icon: '📚', desc: '系统化检索相关医学文献' },
|
||||
'literature-screening': { name: '文献筛选', icon: '🎯', desc: '根据纳入排除标准筛选文献' },
|
||||
'data-extraction': { name: '数据提取', icon: '📋', desc: '从文献中提取关键数据' },
|
||||
'bias-assessment': { name: '偏倚评价', icon: '⚖️', desc: '评估研究偏倚风险' },
|
||||
'meta-analysis': { name: 'Meta分析', icon: '📈', desc: '进行统计学meta分析' },
|
||||
'forest-plot': { name: '森林图绘制', icon: '🌲', desc: '绘制meta分析森林图' },
|
||||
'results-interpretation': { name: '结果解读', icon: '💡', desc: '解读分析结果的临床意义' },
|
||||
'protocol-writing': { name: '方案撰写', icon: '📝', desc: '撰写研究方案' },
|
||||
'article-writing': { name: '文章撰写', icon: '✍️', desc: '撰写学术论文' },
|
||||
'submission-assistance': { name: '投稿辅助', icon: '📬', desc: '辅助期刊投稿' },
|
||||
}
|
||||
|
||||
const AgentPage = () => {
|
||||
const { agentId } = useParams<{ agentId: string }>()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const agent = agentId ? AGENTS_MAP[agentId] : null
|
||||
|
||||
if (!agent) {
|
||||
return (
|
||||
<Card>
|
||||
<Paragraph>智能体不存在</Paragraph>
|
||||
<Button onClick={() => navigate('/')}>返回首页</Button>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 头部 */}
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/')}>
|
||||
返回首页
|
||||
</Button>
|
||||
|
||||
<Card>
|
||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||
<div>
|
||||
<span style={{ fontSize: 48, marginRight: 16 }}>{agent.icon}</span>
|
||||
<Title level={2} style={{ display: 'inline', margin: 0 }}>
|
||||
{agent.name}
|
||||
</Title>
|
||||
<Tag color="blue" style={{ marginLeft: 16 }}>
|
||||
AI智能体
|
||||
</Tag>
|
||||
</div>
|
||||
<Paragraph type="secondary" style={{ fontSize: 16 }}>
|
||||
{agent.desc}
|
||||
</Paragraph>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* 功能区域 - 占位符 */}
|
||||
<Card title="智能对话区域" extra={<Tag color="orange">待开发</Tag>}>
|
||||
<div
|
||||
style={{
|
||||
height: 400,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: '#f5f5f5',
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Space direction="vertical" align="center">
|
||||
<div style={{ fontSize: 64 }}>💬</div>
|
||||
<Title level={4} type="secondary">
|
||||
对话系统开发中...
|
||||
</Title>
|
||||
<Paragraph type="secondary">
|
||||
Day 9-10 将实现完整的智能对话功能
|
||||
</Paragraph>
|
||||
</Space>
|
||||
</div>
|
||||
</Card>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AgentPage
|
||||
|
||||
72
frontend/src/pages/HomePage.tsx
Normal file
72
frontend/src/pages/HomePage.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { Card, Row, Col, Typography, Button } from 'antd'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { ExperimentOutlined, RocketOutlined } from '@ant-design/icons'
|
||||
|
||||
const { Title, Paragraph } = Typography
|
||||
|
||||
const AGENTS = [
|
||||
{ id: 'topic-evaluation', name: '选题评价', icon: '📊', desc: '评估研究选题的价值和可行性' },
|
||||
{ id: 'picos-construction', name: 'PICOS构建', icon: '🔍', desc: '构建研究问题的PICOS框架' },
|
||||
{ id: 'literature-search', name: '文献检索', icon: '📚', desc: '系统化检索相关医学文献' },
|
||||
{ id: 'literature-screening', name: '文献筛选', icon: '🎯', desc: '根据纳入排除标准筛选文献' },
|
||||
{ id: 'data-extraction', name: '数据提取', icon: '📋', desc: '从文献中提取关键数据' },
|
||||
{ id: 'bias-assessment', name: '偏倚评价', icon: '⚖️', desc: '评估研究偏倚风险' },
|
||||
{ id: 'meta-analysis', name: 'Meta分析', icon: '📈', desc: '进行统计学meta分析' },
|
||||
{ id: 'forest-plot', name: '森林图绘制', icon: '🌲', desc: '绘制meta分析森林图' },
|
||||
{ id: 'results-interpretation', name: '结果解读', icon: '💡', desc: '解读分析结果的临床意义' },
|
||||
{ id: 'protocol-writing', name: '方案撰写', icon: '📝', desc: '撰写研究方案' },
|
||||
{ id: 'article-writing', name: '文章撰写', icon: '✍️', desc: '撰写学术论文' },
|
||||
{ id: 'submission-assistance', name: '投稿辅助', icon: '📬', desc: '辅助期刊投稿' },
|
||||
]
|
||||
|
||||
const HomePage = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 欢迎区域 */}
|
||||
<Card style={{ marginBottom: 24, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
|
||||
<div style={{ color: 'white', padding: '20px 0' }}>
|
||||
<Title level={2} style={{ color: 'white', marginBottom: 16 }}>
|
||||
<RocketOutlined /> 欢迎使用 AI临床研究平台
|
||||
</Title>
|
||||
<Paragraph style={{ color: 'white', fontSize: 16, marginBottom: 0 }}>
|
||||
基于大语言模型的智能临床研究助手，覆盖研究全流程的12个智能体
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 智能体卡片 */}
|
||||
<Title level={3} style={{ marginBottom: 16 }}>
|
||||
<ExperimentOutlined /> 智能体工具箱
|
||||
</Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
{AGENTS.map((agent) => (
|
||||
<Col xs={24} sm={12} md={8} lg={6} key={agent.id}>
|
||||
<Card
|
||||
hoverable
|
||||
style={{ height: '100%' }}
|
||||
onClick={() => navigate(`/agent/${agent.id}`)}
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 48, marginBottom: 12 }}>{agent.icon}</div>
|
||||
<Title level={4} style={{ marginBottom: 8 }}>
|
||||
{agent.name}
|
||||
</Title>
|
||||
<Paragraph type="secondary" style={{ marginBottom: 16, minHeight: 44 }}>
|
||||
{agent.desc}
|
||||
</Paragraph>
|
||||
<Button type="primary" block>
|
||||
开始使用
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomePage
|
||||
|
||||
Reference in New Issue
Block a user