feat(frontend): Day 7 - frontend complete layout finished
This commit is contained in:
AI Clinical Dev Team
96
frontend/src/components/CreateProjectDialog.tsx
Normal file
96
frontend/src/components/CreateProjectDialog.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { Modal, Form, Input, Radio, message } from 'antd';
|
||||
import { useProjectStore, Project } from '../stores/useProjectStore';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
export const CreateProjectDialog = () => {
|
||||
const [form] = Form.useForm();
|
||||
const { showCreateDialog, setShowCreateDialog, addProject } = useProjectStore();
|
||||
|
||||
const handleOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
|
||||
// 模拟创建项目（后续会调用真实API）
|
||||
const newProject: Project = {
|
||||
id: `proj-${Date.now()}`,
|
||||
name: values.name,
|
||||
background: values.background || '',
|
||||
researchType: values.researchType,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
addProject(newProject);
|
||||
message.success('项目创建成功');
|
||||
form.resetFields();
|
||||
setShowCreateDialog(false);
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
form.resetFields();
|
||||
setShowCreateDialog(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="创建新项目"
|
||||
open={showCreateDialog}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
width={600}
|
||||
okText="创建"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{ researchType: 'observational' }}
|
||||
>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="项目名称"
|
||||
rules={[
|
||||
{ required: true, message: '请输入项目名称' },
|
||||
{ max: 100, message: '项目名称不能超过100个字符' },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="例如：心血管疾病与生活方式关系研究" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="researchType"
|
||||
label="研究类型"
|
||||
rules={[{ required: true, message: '请选择研究类型' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="observational">观察性研究</Radio>
|
||||
<Radio value="interventional">干预性研究</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="background"
|
||||
label="项目背景"
|
||||
tooltip="可以包括：研究背景、目标人群、研究目的等"
|
||||
>
|
||||
<TextArea
|
||||
rows={6}
|
||||
placeholder="请详细描述项目背景信息，AI将基于这些信息提供更精准的建议...
|
||||
|
||||
例如：
|
||||
研究背景：心血管疾病是全球主要死因之一...
|
||||
目标人群：18-65岁成年人
|
||||
研究目的：探索生活方式与心血管疾病的关系"
|
||||
maxLength={2000}
|
||||
showCount
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
105
frontend/src/components/EditProjectDialog.tsx
Normal file
105
frontend/src/components/EditProjectDialog.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import { Modal, Form, Input, Radio, message } from 'antd';
|
||||
import { useEffect } from 'react';
|
||||
import { useProjectStore } from '../stores/useProjectStore';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
export const EditProjectDialog = () => {
|
||||
const [form] = Form.useForm();
|
||||
const {
|
||||
currentProject,
|
||||
showEditDialog,
|
||||
setShowEditDialog,
|
||||
updateProject,
|
||||
} = useProjectStore();
|
||||
|
||||
// 当对话框打开时，填充表单
|
||||
useEffect(() => {
|
||||
if (showEditDialog && currentProject) {
|
||||
form.setFieldsValue({
|
||||
name: currentProject.name,
|
||||
researchType: currentProject.researchType,
|
||||
background: currentProject.background,
|
||||
});
|
||||
}
|
||||
}, [showEditDialog, currentProject, form]);
|
||||
|
||||
const handleOk = async () => {
|
||||
if (!currentProject) return;
|
||||
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
|
||||
// 模拟更新项目（后续会调用真实API）
|
||||
updateProject(currentProject.id, {
|
||||
name: values.name,
|
||||
background: values.background || '',
|
||||
researchType: values.researchType,
|
||||
updatedAt: new Date().toISOString(),
|
||||
});
|
||||
|
||||
message.success('项目更新成功');
|
||||
setShowEditDialog(false);
|
||||
} catch (error) {
|
||||
console.error('表单验证失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
form.resetFields();
|
||||
setShowEditDialog(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="编辑项目"
|
||||
open={showEditDialog}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
width={600}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="项目名称"
|
||||
rules={[
|
||||
{ required: true, message: '请输入项目名称' },
|
||||
{ max: 100, message: '项目名称不能超过100个字符' },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="例如：心血管疾病与生活方式关系研究" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="researchType"
|
||||
label="研究类型"
|
||||
rules={[{ required: true, message: '请选择研究类型' }]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="observational">观察性研究</Radio>
|
||||
<Radio value="interventional">干预性研究</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="background"
|
||||
label="项目背景"
|
||||
tooltip="可以包括：研究背景、目标人群、研究目的等"
|
||||
>
|
||||
<TextArea
|
||||
rows={6}
|
||||
placeholder="请详细描述项目背景信息，AI将基于这些信息提供更精准的建议..."
|
||||
maxLength={2000}
|
||||
showCount
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
75
frontend/src/components/ProjectSelector.tsx
Normal file
75
frontend/src/components/ProjectSelector.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { Select, Button, Space, Tooltip } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, FolderOpenOutlined } from '@ant-design/icons';
|
||||
import { useProjectStore } from '../stores/useProjectStore';
|
||||
|
||||
export const ProjectSelector = () => {
|
||||
const {
|
||||
currentProject,
|
||||
projects,
|
||||
setCurrentProject,
|
||||
setShowCreateDialog,
|
||||
setShowEditDialog,
|
||||
} = useProjectStore();
|
||||
|
||||
const handleProjectChange = (projectId: string) => {
|
||||
if (projectId === 'global') {
|
||||
setCurrentProject(null);
|
||||
} else {
|
||||
const project = projects.find((p) => p.id === projectId);
|
||||
if (project) {
|
||||
setCurrentProject(project);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<FolderOpenOutlined className="text-gray-400" />
|
||||
<span className="text-sm font-medium text-gray-700">当前项目</span>
|
||||
</div>
|
||||
|
||||
<Space.Compact block>
|
||||
<Select
|
||||
value={currentProject?.id || 'global'}
|
||||
onChange={handleProjectChange}
|
||||
style={{ width: '100%' }}
|
||||
placeholder="选择项目"
|
||||
>
|
||||
<Select.Option value="global">
|
||||
<span className="text-blue-600">全局快速问答</span>
|
||||
</Select.Option>
|
||||
|
||||
{projects.map((project) => (
|
||||
<Select.Option key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Tooltip title="创建新项目">
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setShowCreateDialog(true)}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
{currentProject && (
|
||||
<Tooltip title="编辑项目">
|
||||
<Button
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => setShowEditDialog(true)}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Space.Compact>
|
||||
|
||||
{currentProject && (
|
||||
<div className="mt-2 text-xs text-gray-500 truncate">
|
||||
{currentProject.background || '未设置项目背景'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user