Major layout optimizations to increase chat area: 1. MainLayout improvements: - Remove Content padding/margin (was 24px + 24px = 48px wasted) - Reduce Sider width from 280px to 240px - Set Content overflow:hidden and flex layout 2. AgentChatPage improvements: - Replace large Card header with compact toolbar (saved ~40px) - Remove Card wrapper (saved border/padding) - Direct div layout for chat area 3. Other pages: - Added padding:24px to HomePage/KnowledgePage/HistoryPage - Maintain consistent spacing for non-chat pages Result: Chat window now occupies ~85% of screen height instead of ~33% Verified working: AI responses, scrolling, and UI display
94 lines
4.6 KiB
TypeScript
94 lines
4.6 KiB
TypeScript
import { Card, Row, Col, Typography, Button, Tag, message } from 'antd'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { ExperimentOutlined, RocketOutlined, LockOutlined } from '@ant-design/icons'
|
||
|
||
const { Title, Paragraph } = Typography
|
||
|
||
const AGENTS = [
|
||
{ id: 'topic-evaluation', name: '选题评价智能体', icon: '🎯', desc: '从创新性、临床价值、科学性和可行性等维度评估研究选题', enabled: true },
|
||
{ id: 'scientific-question', name: '科学问题梳理智能体', icon: '🔬', desc: '将模糊的研究想法提炼成清晰、具体、可验证的科学问题', enabled: false },
|
||
{ id: 'picos-construction', name: 'PICOS构建智能体', icon: '📋', desc: '按照PICOS原则结构化定义临床研究的核心要素', enabled: false },
|
||
{ id: 'observation-design', name: '观察指标设计智能体', icon: '📊', desc: '推荐合适的主要、次要及安全性观察指标集', enabled: false },
|
||
{ id: 'crf-development', name: 'CRF制定智能体', icon: '📝', desc: '自动生成结构化、符合规范的病例报告表(CRF)框架', enabled: false },
|
||
{ id: 'sample-size', name: '样本量计算智能体', icon: '🔢', desc: '根据研究参数提供科学合理的样本量估算结果', enabled: false },
|
||
{ id: 'protocol-writing', name: '临床研究方案撰写智能体', icon: '📄', desc: '自动生成结构完整的临床研究设计方案', enabled: false },
|
||
{ id: 'paper-polishing', name: '论文润色智能体', icon: '✨', desc: '提供专业级的语言润色,修正语法、拼写和表达方式', enabled: false },
|
||
{ id: 'paper-translation', name: '论文翻译智能体', icon: '🌐', desc: '提供专业、精准的中英互译服务', enabled: false },
|
||
{ id: 'methodology-review', name: '方法学评审智能体', icon: '🔍', desc: '对研究方案或论文进行全面的方法学评审', enabled: false },
|
||
{ id: 'journal-methodology-review', name: '期刊方法学评审智能体', icon: '📑', desc: '模拟期刊审稿人视角,进行方法学挑战', enabled: false },
|
||
{ id: 'journal-guidelines-review', name: '期刊稿约评审智能体', icon: '✅', desc: '检查文章格式、字数、参考文献规范等是否符合投稿要求', enabled: false },
|
||
]
|
||
|
||
const HomePage = () => {
|
||
const navigate = useNavigate()
|
||
|
||
const handleAgentClick = (agent: typeof AGENTS[0]) => {
|
||
if (!agent.enabled) {
|
||
message.info('该智能体正在开发中,敬请期待!')
|
||
return
|
||
}
|
||
navigate(`/agent/${agent.id}`)
|
||
}
|
||
|
||
return (
|
||
<div style={{ padding: '24px' }}>
|
||
{/* 欢迎区域 */}
|
||
<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={agent.enabled}
|
||
style={{
|
||
height: '100%',
|
||
opacity: agent.enabled ? 1 : 0.7,
|
||
position: 'relative',
|
||
}}
|
||
onClick={() => handleAgentClick(agent)}
|
||
>
|
||
{!agent.enabled && (
|
||
<Tag
|
||
color="orange"
|
||
icon={<LockOutlined />}
|
||
style={{ position: 'absolute', top: 8, right: 8 }}
|
||
>
|
||
即将上线
|
||
</Tag>
|
||
)}
|
||
<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={agent.enabled ? 'primary' : 'default'} block disabled={!agent.enabled}>
|
||
{agent.enabled ? '开始使用' : '敬请期待'}
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default HomePage
|
||
|