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

Services/Media/PictureService.cs

@@ -766,11 +766,31 @@ public class PictureService(
             picture.Description = description.Trim();
         }
 
+        // 只有当名称或描述发生变化时才更新嵌入向量
         if (!string.IsNullOrWhiteSpace(name) || !string.IsNullOrWhiteSpace(description))
         {
-            var combinedText = $"{picture.Name}. {picture.Description}";
+            try
-            var embedding = await embeddingService.GetEmbeddingAsync(combinedText);
+            {
-            picture.Embedding = new Vector(embedding);
+                var combinedText = $"{picture.Name}. {picture.Description}";
+                var embedding = await embeddingService.GetEmbeddingAsync(combinedText);
+                
+                // 只有在成功获取到非空嵌入向量时才更新
+                if (embedding != null && embedding.Length > 0)
+                {
+                    picture.Embedding = new Vector(embedding);
+                }
+                else
+                {
+                    // 记录获取到空向量的警告
+                    Console.WriteLine($"警告: 图片 {pictureId} 的嵌入向量为空，跳过向量更新");
+                }
+            }
+            catch (Exception ex)
+            {
+                // 记录错误但不抛出异常，允许其他字段的更新继续进行
+                Console.WriteLine($"更新图片 {pictureId} 的嵌入向量时出错: {ex.Message}");
+                // 不设置 picture.Embedding，保持原值不变
+            }
         }
 
         if (tags != null)

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/EditImageDialog.css

@@ -0,0 +1,55 @@
+.edit-image-dialog .ant-modal-body {
+  padding: 20px;
+}
+
+.edit-image-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.edit-image-preview {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.edit-preview-img {
+  max-width: 100%;
+  max-height: 200px;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.edit-image-form {
+  width: 100%;
+}
+
+.edit-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-bottom: 0;
+  margin-top: 10px;
+}
+
+.custom-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  margin-right: 6px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #333;
+}
+
+.custom-tag-close {
+  margin-left: 4px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.custom-tag-close:hover {
+  opacity: 1;
+}

Web/src/components/image/EditImageDialog.tsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Input, Button, message, Select, Spin } from 'antd';
+import { type PictureResponse, updatePicture } from '../../api';
+import './EditImageDialog.css';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+interface EditImageDialogProps {
+  visible: boolean;
+  onClose: () => void;
+  image: PictureResponse | null;
+  onSuccess?: (updatedImage: PictureResponse) => void;
+}
+
+const EditImageDialog: React.FC<EditImageDialogProps> = ({
+  visible,
+  onClose,
+  image,
+  onSuccess
+}) => {
+  const [form] = Form.useForm();
+  const [submitting, setSubmitting] = useState(false);
+  
+  // 当图片信息变化时重置表单
+  useEffect(() => {
+    if (visible && image) {
+      form.setFieldsValue({
+        name: image.name,
+        description: image.description,
+        tags: image.tags || []
+      });
+    }
+  }, [visible, image, form]);
+
+  // 提交表单
+  const handleSubmit = async () => {
+    if (!image) return;
+    
+    try {
+      const values = await form.validateFields();
+      setSubmitting(true);
+      
+      const result = await updatePicture({
+        id: image.id,
+        name: values.name,
+        description: values.description,
+        tags: values.tags
+      });
+      
+      if (result.success) {
+        message.success('图片信息已成功更新');
+        if (onSuccess) {
+          onSuccess(result.data!);
+        }
+        onClose();
+      } else {
+        // 根据错误信息判断提示内容
+        if (result.message && result.message.includes('向量')) {
+          message.warning('图片信息已更新，但AI索引生成失败。您的图片可能在高级搜索中不可见，但基本功能不受影响。');
+          // 尽管AI索引失败，但其他信息已更新，所以仍然调用成功回调
+          if (onSuccess && result.data) {
+            onSuccess(result.data);
+          }
+          onClose();
+        } else {
+          message.error(result.message || '更新图片失败');
+        }
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        // 解析常见错误消息并提供友好提示
+        const errorMsg = error.message;
+        if (errorMsg.includes('401') || errorMsg.includes('Unauthorized')) {
+          message.error('AI服务授权失败，请检查服务配置');
+        } else if (errorMsg.includes('vector') || errorMsg.includes('dimension')) {
+          message.error('AI索引生成失败，请稍后重试');
+        } else {
+          message.error(`提交失败: ${errorMsg}`);
+        }
+      } else {
+        message.error('提交失败，请检查表单');
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // 自定义标签选择
+  const tagRender = (props: any) => {
+    const { label, closable, onClose } = props;
+    return (
+      <div className="custom-tag">
+        #{label}
+        {closable && (
+          <span className="custom-tag-close" onClick={onClose}>×</span>
+        )}
+      </div>
+    );
+  };
+
+  if (!image) return null;
+
+  return (
+    <Modal
+      title="编辑图片信息"
+      open={visible}
+      onCancel={onClose}
+      footer={null}
+      destroyOnClose
+      maskClosable={false}
+      className="edit-image-dialog"
+    >
+      <div className="edit-image-container">
+        <div className="edit-image-preview">
+          <img 
+            src={image.thumbnailPath || image.path} 
+            alt={image.name} 
+            className="edit-preview-img" 
+          />
+        </div>
+        
+        <Spin spinning={submitting}>
+          <Form
+            form={form}
+            layout="vertical"
+            className="edit-image-form"
+            initialValues={{
+              name: image.name,
+              description: image.description,
+              tags: image.tags || []
+            }}
+          >
+            <Form.Item
+              name="name"
+              label="图片名称"
+              rules={[{ required: true, message: '请输入图片名称' }]}
+            >
+              <Input placeholder="给图片起个名字" maxLength={100} />
+            </Form.Item>
+            
+            <Form.Item
+              name="description"
+              label="图片描述"
+            >
+              <TextArea 
+                placeholder="添加描述..." 
+                autoSize={{ minRows: 3, maxRows: 6 }}
+              />
+            </Form.Item>
+            
+            <Form.Item
+              name="tags"
+              label="标签"
+            >
+              <Select
+                mode="tags"
+                placeholder="添加标签..."
+                tagRender={tagRender}
+                tokenSeparators={[',', ' ']}
+                style={{ width: '100%' }}
+              >
+                {(image.tags || []).map(tag => (
+                  <Option key={tag} value={tag}>{tag}</Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item className="edit-form-actions">
+              <Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
+              <Button 
+                type="primary" 
+                onClick={handleSubmit}
+                loading={submitting}
+              >
+                保存
+              </Button>
+            </Form.Item>
+          </Form>
+        </Spin>
+      </div>
+    </Modal>
+  );
+};
+
+export default EditImageDialog;

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