🐛 fix: some ai image generation feedback issues (#8440)

tjx666 · web-flow · commit bc413299bac9 · 2025-07-15T16:20:41.000+08:00
diff --git a/package.json b/package.json
@@ -210,7 +210,7 @@
     "mdast-util-to-markdown": "^2.1.2",
     "modern-screenshot": "^4.6.0",
     "nanoid": "^5.1.5",
-    "next": "^15.3.3",
+    "next": "~15.3.3",
     "next-auth": "5.0.0-beta.25",
     "next-mdx-remote": "^5.0.0",
     "nextjs-toploader": "^3.8.16",
diff --git a/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/MultiImagesUpload/index.tsx b/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/MultiImagesUpload/index.tsx
@@ -3,6 +3,7 @@
 // Removed Image import - using img tags instead
 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';
@@ -429,10 +430,12 @@ const ImageThumbnails: FC<ImageThumbnailsProps> = memo(({ images, onClick, onDel
 
     return (
       <div className={styles.imageItem} key={imageUrl}>
-        <img
+        <Image
           alt={`Uploaded image ${index + 1}`}
+          fill
           src={imageUrl}
-          style={{ height: '100%', objectFit: 'cover', width: '100%' }}
+          style={{ objectFit: 'cover' }}
+          unoptimized
         />
         {!showOverlay && (
           <div
@@ -478,10 +481,12 @@ const SingleImageDisplay: FC<SingleImageDisplayProps> = memo(({ imageUrl, onClic
 
   return (
     <div className={styles.singleImageDisplay}>
-      <img
+      <Image
         alt="Uploaded image"
+        fill
         src={imageUrl}
-        style={{ height: '100%', objectFit: 'cover', width: '100%' }}
+        style={{ objectFit: 'contain' }}
+        unoptimized
       />
 
       {/* Delete button */}
diff --git a/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/index.tsx b/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/index.tsx
@@ -26,7 +26,7 @@ interface ConfigItemLayoutProps {
 const ConfigItemLayout = memo<ConfigItemLayoutProps>(({ label, children }) => {
   return (
     <Flexbox gap={8}>
-      {label && <Text weight={500}>{label.toUpperCase()}</Text>}
+      {label && <Text weight={500}>{label}</Text>}
       {children}
     </Flexbox>
   );
diff --git a/src/app/[variants]/(main)/image/features/ImageWorkspace/EmptyState.tsx b/src/app/[variants]/(main)/image/features/ImageWorkspace/EmptyState.tsx
@@ -1,36 +1,22 @@
-import { AuroraBackground } from '@lobehub/ui/awesome';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import PromptInput from '../PromptInput';
 
 const EmptyState = memo(() => {
   return (
-    <>
-      <AuroraBackground
-        style={{
-          height: 400,
-          inset: 0,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-          position: 'absolute',
-          width: '100%',
-          zIndex: 0,
-        }}
-      />
-      <Flexbox
-        flex={1}
-        height="100%"
-        style={{
-          overflow: 'hidden',
-          zIndex: 1,
-        }}
-      >
-        <Center flex={1} padding={24}>
-          <PromptInput showTitle={true} />
-        </Center>
-      </Flexbox>
-    </>
+    <Flexbox
+      flex={1}
+      height="100%"
+      style={{
+        overflow: 'hidden',
+        zIndex: 1,
+      }}
+    >
+      <Center flex={1} padding={24}>
+        <PromptInput showTitle={true} />
+      </Center>
+    </Flexbox>
   );
 });
 
