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/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>
   );
 };