feat(ImageGrid): add edit functionality for images and update picture API

Web/src/api/index.ts

@@ -24,7 +24,8 @@ export {
     unfavoritePicture,
     getUserFavorites,
     uploadPicture,
-    deleteMultiplePictures,  // 添加导出删除图片函数
+    deleteMultiplePictures, 
+    updatePicture, 
 } from './pictureApi';
 
 // 导出Album API

Web/src/api/pictureApi.ts

@@ -1,4 +1,4 @@
-import type { PaginatedResult, PictureResponse, FilteredPicturesRequest, BaseResult } from './types';
+import type { PaginatedResult, PictureResponse, FilteredPicturesRequest, BaseResult, UpdatePictureRequest } from './types';
 import { fetchApi, BASE_URL } from './fetchClient';
 
 // 获取图片列表
@@ -196,3 +196,11 @@ export async function deleteMultiplePictures(pictureIds: number[]): Promise<Base
   });
 }
 
+// 更新图片信息
+export async function updatePicture(request: UpdatePictureRequest): Promise<BaseResult<PictureResponse>> {
+  return fetchApi<PictureResponse>('/picture/update_picture', {
+    method: 'POST',
+    body: JSON.stringify(request),
+  });
+}
+

Web/src/api/types.ts

@@ -220,3 +220,10 @@ export interface UpdateUserRequest {
   currentPassword?: string;
   newPassword?: string;
 }
+
+export interface UpdatePictureRequest {
+  id: number;
+  name?: string;
+  description?: string;
+  tags?: string[];
+}

Web/src/components/image/ImageGrid.tsx

@@ -8,6 +8,7 @@ import type { PictureResponse } from '../../api';
 import { favoritePicture, unfavoritePicture, getPictures, deleteMultiplePictures } from '../../api';
 import ImageViewer from './ImageViewer';
 import ShareImageDialog from './ShareImageDialog';
+import EditImageDialog from './EditImageDialog';
 import './ImageGrid.css';
 import { useAuth } from '../../api/AuthContext';
 
@@ -159,6 +160,15 @@ const ImageGrid: React.FC<ImageGridProps> = ({
     y: 0,
   });
 
+  // 添加编辑对话框状态
+  const [editDialogState, setEditDialogState] = useState<{
+    visible: boolean;
+    image: PictureResponse | null;
+  }>({
+    visible: false,
+    image: null
+  });
+
 
   // 简化标志变量
   const isUsingExternalData = !!dataSource;
@@ -354,7 +364,33 @@ const ImageGrid: React.FC<ImageGridProps> = ({
     });
   };
 
-  // 修改handleMenuAction中的分享处理
+  // 处理编辑图片
+  const handleEditImage = (image: PictureResponse) => {
+    setEditDialogState({
+      visible: true,
+      image
+    });
+  };
+
+  // 关闭编辑对话框
+  const handleCloseEditDialog = () => {
+    setEditDialogState({
+      ...editDialogState,
+      visible: false
+    });
+  };
+
+  // 处理图片更新成功
+  const handleImageUpdateSuccess = (updatedImage: PictureResponse) => {
+    // 更新本地图片列表中对应的图片
+    setImages(prevImages =>
+      prevImages.map(img =>
+        img.id === updatedImage.id ? { ...img, ...updatedImage } : img
+      )
+    );
+  };
+  
+  // 修改handleMenuAction中的编辑处理
   const handleMenuAction = (action: string) => {
     if (!contextMenu.image) return;
 
@@ -366,7 +402,7 @@ const ImageGrid: React.FC<ImageGridProps> = ({
         handleDeleteImage(contextMenu.image);
         break;
       case 'edit':
-        onEdit?.(contextMenu.image);
+        handleEditImage(contextMenu.image);
         break;
       case 'download':
         onDownload?.(contextMenu.image);
@@ -497,7 +533,11 @@ const ImageGrid: React.FC<ImageGridProps> = ({
                               className="custom-card-action-item"
                               onClick={(e) => {
                                 e.stopPropagation();
-                                onEdit && onEdit(image);
+                                if (onEdit) {
+                                  onEdit(image);
+                                } else {
+                                  handleEditImage(image);
+                                }
                               }}
                             >
                               <EditOutlined style={{ fontSize: 16, color: '#ffffff' }} />
@@ -686,6 +726,13 @@ const ImageGrid: React.FC<ImageGridProps> = ({
         onClose={handleCloseShareDialog}
         image={shareDialogState.image}
       />
+
+      <EditImageDialog
+        visible={editDialogState.visible}
+        onClose={handleCloseEditDialog}
+        image={editDialogState.image}
+        onSuccess={handleImageUpdateSuccess}
+      />
     </>
   );
 };