Files
AIclinicalresearch/frontend/src/pages/HomePage.tsx
AI Clinical Dev Team 2d51933aee feat: maximize chat window size
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
2025-10-10 22:01:09 +08:00

94 lines
4.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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