refactor: refactor upload component layout and styling for responsive…

…ness CherryHQ#674 fix: 当插入文件过多的时候，无法看到输入框了。 close CherryHQ#674
ruiwarn · Jan 8, 2025 · b39372b · b39372b
1 parent fcf8457
commit b39372b
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx b/src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx
@@ -17,16 +17,18 @@ const AttachmentPreview: FC<Props> = ({ files, setFiles }) => {
 
   return (
     <Container>
-      <Upload
-        listType="picture-card"
-        fileList={files.map((file) => ({
-          uid: file.id,
-          url: 'file://' + FileManager.getSafePath(file),
-          status: 'done',
-          name: file.name
-        }))}
-        onRemove={(item) => setFiles(files.filter((file) => item.uid !== file.id))}
-      />
+      <ContentContainer>
+        <Upload
+          listType={files.length > 20 ? 'text' : 'picture-card'}
+          fileList={files.map((file) => ({
+            uid: file.id,
+            url: 'file://' + FileManager.getSafePath(file),
+            status: 'done',
+            name: file.name
+          }))}
+          onRemove={(item) => setFiles(files.filter((file) => item.uid !== file.id))}
+        />
+      </ContentContainer>
     </Container>
   )
 }
@@ -35,9 +37,16 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   gap: 10px;
-  padding: 10px 20px;
+  padding: 10px 0;
   background: var(--color-background);
   border-top: 1px solid var(--color-border-mute);
 `
 
+const ContentContainer = styled.div`
+  max-height: 40vh;
+  width: 100%;
+  overflow-y: auto;
+  padding: 0 20px;
+`
+
 export default AttachmentPreview