🐛 fix: Fix image upload error

src/app/chat/(desktop)/features/ChatInput/Footer/LocalFiles.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
+import FileList from 'src/components/FileList';
 
-import FileList from '@/app/chat/components/FileList';
 import { useFileStore } from '@/store/file';
 
 export const LocalFiles = memo(() => {

src/app/chat/(mobile)/features/ChatInput/Files.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import FileList from 'src/components/FileList';
 
-import FileList from '@/app/chat/components/FileList';
 import { useFileStore } from '@/store/file';
 
 const Files = memo(() => {

src/app/chat/features/Conversation/ChatList/Messages/User.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import FileList from 'src/components/FileList';
 
-import FileList from '@/app/chat/components/FileList';
 import { LOADING_FLAT } from '@/const/message';
 import { ChatMessage } from '@/types/chatMessage';
 

src/app/chat/components/FileList/Lightbox.tsx → src/components/FileList/Lightbox.tsx

@@ -1,22 +1,17 @@
 import { Image } from 'antd';
 import { PropsWithChildren, memo } from 'react';
 
-import { filesSelectors, useFileStore } from '@/store/file';
-
 const { PreviewGroup } = Image;
 
 interface LightBoxProps extends PropsWithChildren {
   items: string[];
 }
 
 const LightBox = memo<LightBoxProps>(({ items, children }) => {
-  const list = useFileStore(filesSelectors.getImageUrlByList(items));
-
-  if (list.length === 1) return children;
+  if (items.length === 1) return children;
 
   return (
     <PreviewGroup
-      items={list}
       preview={{
         styles: { mask: { backdropFilter: 'blur(2px)' } },
       }}

src/components/FileList/index.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+
+import LightBox from '@/components/FileList/Lightbox';
+
+import FileItem from './FileItem';
+import { useStyles } from './style';
+
+interface FileListProps {
+  alwaysShowClose?: boolean;
+  editable?: boolean;
+  items: string[];
+}
+
+const FileList = memo<FileListProps>(({ items, editable = true, alwaysShowClose }) => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.container}>
+      <LightBox items={items}>
+        {items.map((i) => (
+          <FileItem alwaysShowClose={alwaysShowClose} editable={editable} id={i} key={i} />
+        ))}
+      </LightBox>
+    </div>
+  );
+});
+
+export default FileList;

src/components/FileList/style.ts

@@ -0,0 +1,37 @@
+import { createStyles } from 'antd-style';
+
+import { MIN_IMAGE_SIZE } from './FileItem.style';
+
+export const MAX_SIZE = 640;
+export const GAP = 8;
+
+export const useStyles = createStyles(({ css }) => ({
+  container: css`
+    display: grid;
+    grid-gap: ${GAP}px;
+    grid-template-columns: repeat(6, 1fr);
+
+    width: 100%;
+    max-width: ${MAX_SIZE}px;
+
+    & > div {
+      grid-column: span 2;
+
+      width: 100%;
+      min-width: ${MIN_IMAGE_SIZE}px;
+      min-height: ${MIN_IMAGE_SIZE}px;
+      max-height: ${(MAX_SIZE - GAP) / 2}px;
+    }
+
+    & > div:nth-child(1):nth-last-child(2),
+    & > div:nth-child(2):nth-last-child(1) {
+      grid-column: span 3;
+      max-height: ${(MAX_SIZE - 2 * GAP) / 3}px;
+    }
+
+    & > :nth-child(1):nth-last-child(1) {
+      grid-column: span 6;
+      max-height: ${MAX_SIZE}px;
+    }
+  `,
+}));