feat: Day 8-9 - Project Management API completed

Backend:
- Create project routes (GET, POST, PUT, DELETE)
- Implement projectController with CRUD operations
- Create projectService for database operations
- Add validation middleware for request validation
- Update Prisma schema (add background, researchType, deletedAt fields)
- Implement soft delete for projects

Frontend:
- Create projectApi service module
- Update useProjectStore with fetchProjects and loading state
- Connect ProjectSelector to real API with loading indicator
- Connect CreateProjectDialog to real API with error handling
- Connect EditProjectDialog to real API with loading state
- Add comprehensive error handling and user feedback

Build: Both frontend and backend build successfully

frontend/src/api/projectApi.ts

@@ -0,0 +1,57 @@
+import request from './request';
+import type { Project } from '../stores/useProjectStore';
+
+export interface ApiResponse<T = any> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
+
+export interface CreateProjectRequest {
+  name: string;
+  background: string;
+  researchType: 'observational' | 'interventional';
+}
+
+export interface UpdateProjectRequest {
+  name?: string;
+  background?: string;
+  researchType?: 'observational' | 'interventional';
+}
+
+export const projectApi = {
+  // 获取项目列表
+  getProjects: async (): Promise<ApiResponse<Project[]>> => {
+    const response = await request.get('/projects');
+    return response.data;
+  },
+
+  // 获取单个项目详情
+  getProjectById: async (id: string): Promise<ApiResponse<Project>> => {
+    const response = await request.get(`/projects/${id}`);
+    return response.data;
+  },
+
+  // 创建项目
+  createProject: async (data: CreateProjectRequest): Promise<ApiResponse<Project>> => {
+    const response = await request.post('/projects', data);
+    return response.data;
+  },
+
+  // 更新项目
+  updateProject: async (
+    id: string,
+    data: UpdateProjectRequest
+  ): Promise<ApiResponse<Project>> => {
+    const response = await request.put(`/projects/${id}`, data);
+    return response.data;
+  },
+
+  // 删除项目
+  deleteProject: async (id: string): Promise<ApiResponse> => {
+    const response = await request.delete(`/projects/${id}`);
+    return response.data;
+  },
+};
+

frontend/src/components/CreateProjectDialog.tsx

@@ -1,32 +1,40 @@
+import { useState } from 'react';
 import { Modal, Form, Input, Radio, message } from 'antd';
-import { useProjectStore, Project } from '../stores/useProjectStore';
+import { useProjectStore } from '../stores/useProjectStore';
+import { projectApi } from '../api/projectApi';
 
 const { TextArea } = Input;
 
 export const CreateProjectDialog = () => {
   const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
   const { showCreateDialog, setShowCreateDialog, addProject } = useProjectStore();
 
   const handleOk = async () => {
     try {
       const values = await form.validateFields();
+      setLoading(true);
       
-      // 模拟创建项目（后续会调用真实API）
-      const newProject: Project = {
-        id: `proj-${Date.now()}`,
+      // 调用真实API创建项目
+      const response = await projectApi.createProject({
         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);
+      if (response.success && response.data) {
+        addProject(response.data);
+        message.success(response.message || '项目创建成功');
+        form.resetFields();
+        setShowCreateDialog(false);
+      } else {
+        message.error(response.message || '项目创建失败');
+      }
     } catch (error) {
-      console.error('表单验证失败:', error);
+      console.error('创建项目失败:', error);
+      message.error('项目创建失败');
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -44,6 +52,7 @@ export const CreateProjectDialog = () => {
       width={600}
       okText="创建"
       cancelText="取消"
+      confirmLoading={loading}
     >
       <Form
         form={form}

frontend/src/components/EditProjectDialog.tsx

@@ -1,11 +1,13 @@
 import { Modal, Form, Input, Radio, message } from 'antd';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProjectStore } from '../stores/useProjectStore';
+import { projectApi } from '../api/projectApi';
 
 const { TextArea } = Input;
 
 export const EditProjectDialog = () => {
   const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
   const {
     currentProject,
     showEditDialog,
@@ -29,19 +31,27 @@ export const EditProjectDialog = () => {
 
     try {
       const values = await form.validateFields();
+      setLoading(true);
       
-      // 模拟更新项目（后续会调用真实API）
-      updateProject(currentProject.id, {
+      // 调用真实API更新项目
+      const response = await projectApi.updateProject(currentProject.id, {
         name: values.name,
         background: values.background || '',
         researchType: values.researchType,
-        updatedAt: new Date().toISOString(),
       });
       
-      message.success('项目更新成功');
-      setShowEditDialog(false);
+      if (response.success && response.data) {
+        updateProject(currentProject.id, response.data);
+        message.success(response.message || '项目更新成功');
+        setShowEditDialog(false);
+      } else {
+        message.error(response.message || '项目更新失败');
+      }
     } catch (error) {
-      console.error('表单验证失败:', error);
+      console.error('更新项目失败:', error);
+      message.error('项目更新失败');
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -59,6 +69,7 @@ export const EditProjectDialog = () => {
       width={600}
       okText="保存"
       cancelText="取消"
+      confirmLoading={loading}
     >
       <Form
         form={form}

frontend/src/components/ProjectSelector.tsx

@@ -1,4 +1,5 @@
-import { Select, Button, Space, Tooltip } from 'antd';
+import { useEffect } from 'react';
+import { Select, Button, Space, Tooltip, Spin } from 'antd';
 import { PlusOutlined, EditOutlined, FolderOpenOutlined } from '@ant-design/icons';
 import { useProjectStore } from '../stores/useProjectStore';
 
@@ -6,11 +7,18 @@ export const ProjectSelector = () => {
   const {
     currentProject,
     projects,
+    loading,
     setCurrentProject,
     setShowCreateDialog,
     setShowEditDialog,
+    fetchProjects,
   } = useProjectStore();
 
+  // 组件挂载时获取项目列表
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
   const handleProjectChange = (projectId: string) => {
     if (projectId === 'global') {
       setCurrentProject(null);
@@ -29,23 +37,25 @@ export const ProjectSelector = () => {
         <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}
+      <Spin spinning={loading} size="small">
+        <Space.Compact block>
+          <Select
+            value={currentProject?.id || 'global'}
+            onChange={handleProjectChange}
+            style={{ width: '100%' }}
+            placeholder="选择项目"
+            loading={loading}
+          >
+            <Select.Option value="global">
+              <span className="text-blue-600">全局快速问答</span>
             </Select.Option>
-          ))}
-        </Select>
+            
+            {projects.map((project) => (
+              <Select.Option key={project.id} value={project.id}>
+                {project.name}
+              </Select.Option>
+            ))}
+          </Select>
         
         <Tooltip title="创建新项目">
           <Button
@@ -64,11 +74,12 @@ export const ProjectSelector = () => {
         )}
       </Space.Compact>
       
-      {currentProject && (
-        <div className="mt-2 text-xs text-gray-500 truncate">
-          {currentProject.background || '未设置项目背景'}
-        </div>
-      )}
+        {currentProject && (
+          <div className="mt-2 text-xs text-gray-500 truncate">
+            {currentProject.background || '未设置项目背景'}
+          </div>
+        )}
+      </Spin>
     </div>
   );
 };

frontend/src/stores/useProjectStore.ts

@@ -1,4 +1,6 @@
 import { create } from 'zustand';
+import { projectApi } from '../api/projectApi';
+import { message } from 'antd';
 
 export interface Project {
   id: string;
@@ -16,6 +18,9 @@ interface ProjectState {
   // 所有项目列表
   projects: Project[];
   
+  // 加载状态
+  loading: boolean;
+  
   // 是否显示创建项目对话框
   showCreateDialog: boolean;
   
@@ -30,11 +35,14 @@ interface ProjectState {
   deleteProject: (id: string) => void;
   setShowCreateDialog: (show: boolean) => void;
   setShowEditDialog: (show: boolean) => void;
+  setLoading: (loading: boolean) => void;
+  fetchProjects: () => Promise<void>;
 }
 
 export const useProjectStore = create<ProjectState>((set) => ({
   currentProject: null,
   projects: [],
+  loading: false,
   showCreateDialog: false,
   showEditDialog: false,
   
@@ -65,5 +73,25 @@ export const useProjectStore = create<ProjectState>((set) => ({
   setShowCreateDialog: (show) => set({ showCreateDialog: show }),
   
   setShowEditDialog: (show) => set({ showEditDialog: show }),
+  
+  setLoading: (loading) => set({ loading }),
+  
+  // 获取项目列表
+  fetchProjects: async () => {
+    try {
+      set({ loading: true });
+      const response = await projectApi.getProjects();
+      if (response.success && response.data) {
+        set({ projects: response.data });
+      } else {
+        message.error(response.message || '获取项目列表失败');
+      }
+    } catch (error) {
+      console.error('获取项目列表失败:', error);
+      message.error('获取项目列表失败');
+    } finally {
+      set({ loading: false });
+    }
+  },
 }));