@lobehub/chat 1.100.1 → 1.101.0

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ImageUpload.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+import { App } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { Image as ImageIcon, X } from 'lucide-react';
+import Image from 'next/image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
@@ -9,6 +11,9 @@ import { Center } from 'react-layout-kit';
 import { useFileStore } from '@/store/file';
 import { FileUploadStatus } from '@/types/files/upload';
 
+import { useDragAndDrop } from '../hooks/useDragAndDrop';
+import { useConfigPanelStyles } from '../style';
+
 // ======== Business Types ======== //
 
 export interface ImageUploadProps {
@@ -100,11 +105,6 @@ const useStyles = createStyles(({ css, token }) => {
         background: ${token.colorErrorBg};
       }
     `,
-    imageStyle: css`
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    `,
     placeholder: css`
       cursor: pointer;
 
@@ -121,6 +121,12 @@ const useStyles = createStyles(({ css, token }) => {
         border-color: ${token.colorPrimary};
         background: ${token.colorFillSecondary};
       }
+
+      &.drag-over {
+        transform: scale(1.02);
+        border-color: ${token.colorPrimary};
+        background: ${token.colorPrimaryBg};
+      }
     `,
     placeholderIcon: css`
       color: ${token.colorTextTertiary};
@@ -140,10 +146,13 @@ const useStyles = createStyles(({ css, token }) => {
 
       width: 100%;
       height: 160px;
+      border: 2px solid transparent;
       border-radius: ${token.borderRadiusLG}px;
 
       background: ${token.colorBgContainer};
 
+      transition: all ${token.motionDurationMid} ease;
+
       &:hover .change-overlay {
         opacity: 1;
       }
@@ -151,6 +160,12 @@ const useStyles = createStyles(({ css, token }) => {
       &:hover .delete-icon {
         opacity: 1;
       }
+
+      &.drag-over {
+        transform: scale(1.02);
+        border-color: ${token.colorPrimary};
+        background: ${token.colorPrimaryBg};
+      }
     `,
     uploadingDisplay: css`
       position: relative;
@@ -283,20 +298,27 @@ CircularProgress.displayName = 'CircularProgress';
  * 占位视图组件
  */
 interface PlaceholderProps {
+  isDragOver?: boolean;
   onClick?: () => void;
 }
 
-const Placeholder: FC<PlaceholderProps> = memo(({ onClick }) => {
+const Placeholder: FC<PlaceholderProps> = memo(({ isDragOver, onClick }) => {
   const { styles } = useStyles();
+  const { styles: configStyles } = useConfigPanelStyles();
   const { t } = useTranslation('components');
 
   return (
-    <Center className={styles.placeholder} gap={16} horizontal={false} onClick={onClick}>
+    <Center
+      className={`${styles.placeholder} ${configStyles.dragTransition} ${isDragOver ? configStyles.dragOver : ''}`}
+      gap={16}
+      horizontal={false}
+      onClick={onClick}
+    >
       <ImageIcon className={styles.placeholderIcon} size={48} strokeWidth={1.5} />
       <div className={styles.placeholderText}>
-        {t('ImageUpload.placeholder.primary', 'Add Image')}
+        {t('ImageUpload.placeholder.primary')}
         <br />
-        {t('ImageUpload.placeholder.secondary', 'Click to upload')}
+        {t('ImageUpload.placeholder.secondary')}
       </div>
     </Center>
   );
@@ -317,7 +339,13 @@ const UploadingDisplay: FC<UploadingDisplayProps> = memo(({ previewUrl, progress
 
   return (
     <div className={styles.uploadingDisplay}>
-      <img alt="Uploading preview" className={styles.imageStyle} src={previewUrl} />
+      <Image
+        alt="Uploading preview"
+        fill
+        src={previewUrl}
+        style={{ objectFit: 'cover' }}
+        unoptimized
+      />
       <div className={styles.uploadingOverlay}>
         <CircularProgress value={progress} />
       </div>
@@ -332,42 +360,55 @@ UploadingDisplay.displayName = 'UploadingDisplay';
  */
 interface SuccessDisplayProps {
   imageUrl: string;
+  isDragOver?: boolean;
   onChangeImage?: () => void;
   onDelete?: () => void;
 }
 
-const SuccessDisplay: FC<SuccessDisplayProps> = memo(({ imageUrl, onDelete, onChangeImage }) => {
-  const { styles } = useStyles();
-  const { t } = useTranslation('components');
-
-  const handleDelete = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    onDelete?.();
-  };
+const SuccessDisplay: FC<SuccessDisplayProps> = memo(
+  ({ imageUrl, isDragOver, onDelete, onChangeImage }) => {
+    const { styles } = useStyles();
+    const { styles: configStyles } = useConfigPanelStyles();
+    const { t } = useTranslation('components');
 
-  const handleChangeImage = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    onChangeImage?.();
-  };
+    const handleDelete = (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onDelete?.();
+    };
 
-  return (
-    <div className={styles.successDisplay} onClick={onChangeImage}>
-      <img alt="Uploaded image" className={styles.imageStyle} src={imageUrl} />
+    const handleChangeImage = (event: React.MouseEvent) => {
+      event.stopPropagation();
+      onChangeImage?.();
+    };
 
-      {/* Delete button */}
-      <div className={`${styles.deleteIcon} delete-icon`} onClick={handleDelete}>
-        <X size={14} />
-      </div>
+    return (
+      <div
+        className={`${styles.successDisplay} ${configStyles.dragTransition} ${isDragOver ? configStyles.dragOver : ''}`}
+        onClick={onChangeImage}
+      >
+        <Image
+          alt="Uploaded image"
+          fill
+          src={imageUrl}
+          style={{ objectFit: 'cover' }}
+          unoptimized
+        />
 
-      {/* Change image overlay */}
-      <div className={`${styles.changeOverlay} change-overlay`} onClick={handleChangeImage}>
-        <button className={styles.changeButton} type="button">
-          {t('ImageUpload.actions.changeImage', 'Click to change image')}
-        </button>
+        {/* Delete button */}
+        <div className={`${styles.deleteIcon} delete-icon`} onClick={handleDelete}>
+          <X size={14} />
+        </div>
+
+        {/* Change image overlay */}
+        <div className={`${styles.changeOverlay} change-overlay`} onClick={handleChangeImage}>
+          <button className={styles.changeButton} type="button">
+            {t('ImageUpload.actions.changeImage')}
+          </button>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 SuccessDisplay.displayName = 'SuccessDisplay';
 
@@ -377,6 +418,8 @@ const ImageUpload: FC<ImageUploadProps> = memo(({ value, onChange, style, classN
   const inputRef = useRef<HTMLInputElement>(null);
   const uploadWithProgress = useFileStore((s) => s.uploadWithProgress);
   const [uploadState, setUploadState] = useState<UploadState | null>(null);
+  const { t } = useTranslation('components');
+  const { message } = App.useApp();
 
   // Cleanup blob URLs to prevent memory leaks
   useEffect(() => {
@@ -464,12 +507,90 @@ const ImageUpload: FC<ImageUploadProps> = memo(({ value, onChange, style, classN
     onChange?.(undefined);
   };
 
+  const handleDrop = async (files: File[]) => {
+    // Show warning if multiple files detected
+    if (files.length > 1) {
+      message.warning(t('ImageUpload.actions.dropMultipleFiles'));
+    }
+
+    // Take the first image file
+    const file = files[0];
+
+    // Create preview URL
+    const previewUrl = URL.createObjectURL(file);
+
+    // Set initial upload state
+    setUploadState({
+      previewUrl,
+      progress: 0,
+      status: 'pending',
+    });
+
+    try {
+      // Start upload using the same logic as handleFileChange
+      const result = await uploadWithProgress({
+        file,
+        onStatusUpdate: (updateData) => {
+          if (updateData.type === 'updateFile') {
+            setUploadState((prev) => {
+              if (!prev) return null;
+
+              const fileStatus = updateData.value.status;
+              if (!fileStatus) return prev;
+
+              return {
+                ...prev,
+                error: fileStatus === 'error' ? 'Upload failed' : undefined,
+                progress: updateData.value.uploadState?.progress || 0,
+                status: fileStatus,
+              };
+            });
+          } else if (updateData.type === 'removeFile') {
+            setUploadState(null);
+          }
+        },
+        skipCheckFileType: true,
+      });
+
+      if (result?.url) {
+        // Upload successful
+        onChange?.(result.url);
+      }
+    } catch {
+      // Upload failed
+      setUploadState((prev) =>
+        prev
+          ? {
+              ...prev,
+              error: 'Upload failed',
+              status: 'error',
+            }
+          : null,
+      );
+    } finally {
+      // Cleanup
+      if (isLocalBlobUrl(previewUrl)) {
+        URL.revokeObjectURL(previewUrl);
+      }
+
+      // Clear upload state after a delay to show completion
+      setTimeout(() => {
+        setUploadState(null);
+      }, 1000);
+    }
+  };
+
+  const { isDragOver, dragHandlers } = useDragAndDrop({
+    accept: 'image/*',
+    onDrop: handleDrop,
+  });
+
   // Determine which view to render
   const hasImage = Boolean(value);
   const isUploading = Boolean(uploadState);
 
   return (
-    <div className={className} style={style}>
+    <div className={className} {...dragHandlers} style={style}>
       {/* Hidden file input */}
       <input
         accept="image/*"
@@ -489,11 +610,12 @@ const ImageUpload: FC<ImageUploadProps> = memo(({ value, onChange, style, classN
       ) : hasImage ? (
         <SuccessDisplay
           imageUrl={value!}
+          isDragOver={isDragOver}
           onChangeImage={handleFileSelect}
           onDelete={handleDelete}
         />
       ) : (
-        <Placeholder onClick={handleFileSelect} />
+        <Placeholder isDragOver={isDragOver} onClick={handleFileSelect} />
       )}
     </div>
   );

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/MultiImagesUpload/ImageManageModal.tsx

@@ -3,6 +3,7 @@
 import { Button, Modal } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { Upload, X } from 'lucide-react';
+import Image from 'next/image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -154,13 +155,6 @@ const useStyles = createStyles(({ css, token }) => ({
     &.selected {
       border-color: ${token.colorPrimary};
     }
-
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
   `,
   thumbnailDelete: css`
     cursor: pointer;
@@ -322,10 +316,12 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
           key={item.id}
           onClick={() => setSelectedIndex(index)}
         >
-          <img
+          <Image
             alt={`Image ${index + 1}`}
+            fill
             src={displayUrl}
-            style={{ height: '100%', objectFit: 'cover', width: '100%' }}
+            style={{ objectFit: 'cover' }}
+            unoptimized
           />
 
           {/* 新文件标识 */}
@@ -380,10 +376,14 @@ const ImageManageModal: FC<ImageManageModalProps> = memo(
           <div className={styles.previewArea}>
             {selectedItem ? (
               <>
-                <img
+                <Image
                   alt="Preview"
                   className={styles.previewImage}
+                  height={320}
                   src={getDisplayUrl(selectedItem)}
+                  style={{ objectFit: 'contain' }}
+                  unoptimized
+                  width={400}
                 />
                 <div className={styles.fileName}>{getDisplayFileName(selectedItem)}</div>
               </>