feat(frontend): Day 7 - frontend complete layout finished

frontend/src/pages/HomePage.tsx

@@ -1,27 +1,35 @@
-import { Card, Row, Col, Typography, Button } from 'antd'
+import { Card, Row, Col, Typography, Button, Tag, message } from 'antd'
 import { useNavigate } from 'react-router-dom'
-import { ExperimentOutlined, RocketOutlined } from '@ant-design/icons'
+import { ExperimentOutlined, RocketOutlined, LockOutlined } from '@ant-design/icons'
 
 const { Title, Paragraph } = Typography
 
 const AGENTS = [
-  { id: 'topic-evaluation', name: '选题评价智能体', icon: '🎯', desc: '从创新性、临床价值、科学性和可行性等维度评估研究选题' },
-  { id: 'scientific-question', name: '科学问题梳理智能体', icon: '🔬', desc: '将模糊的研究想法提炼成清晰、具体、可验证的科学问题' },
-  { id: 'picos-construction', name: 'PICOS构建智能体', icon: '📋', desc: '按照PICOS原则结构化定义临床研究的核心要素' },
-  { id: 'observation-design', name: '观察指标设计智能体', icon: '📊', desc: '推荐合适的主要、次要及安全性观察指标集' },
-  { id: 'crf-development', name: 'CRF制定智能体', icon: '📝', desc: '自动生成结构化、符合规范的病例报告表（CRF）框架' },
-  { id: 'sample-size', name: '样本量计算智能体', icon: '🔢', desc: '根据研究参数提供科学合理的样本量估算结果' },
-  { id: 'protocol-writing', name: '临床研究方案撰写智能体', icon: '📄', desc: '自动生成结构完整的临床研究设计方案' },
-  { id: 'paper-polishing', name: '论文润色智能体', icon: '✨', desc: '提供专业级的语言润色，修正语法、拼写和表达方式' },
-  { id: 'paper-translation', name: '论文翻译智能体', icon: '🌐', desc: '提供专业、精准的中英互译服务' },
-  { id: 'methodology-review', name: '方法学评审智能体', icon: '🔍', desc: '对研究方案或论文进行全面的方法学评审' },
-  { id: 'journal-methodology-review', name: '期刊方法学评审智能体', icon: '📑', desc: '模拟期刊审稿人视角，进行方法学挑战' },
-  { id: 'journal-guidelines-review', name: '期刊稿约评审智能体', icon: '✅', desc: '检查文章格式、字数、参考文献规范等是否符合投稿要求' },
+  { 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>
       {/* 欢迎区域 */}
@@ -44,10 +52,23 @@ const HomePage = () => {
         {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}`)}
+              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 }}>
@@ -56,8 +77,8 @@ const HomePage = () => {
                 <Paragraph type="secondary" style={{ marginBottom: 16, minHeight: 44 }}>
                   {agent.desc}
                 </Paragraph>
-                <Button type="primary" block>
-                  开始使用
+                <Button type={agent.enabled ? 'primary' : 'default'} block disabled={!agent.enabled}>
+                  {agent.enabled ? '开始使用' : '敬请期待'}
                 </Button>
               </div>
             </Card>