feat: fixed the issue that some PDF documents could not be displayed on the chunk list page in small screens and logout (#105)

* feat: logout

* feat: fixed the issue that some PDF documents could not be displayed on the chunk list page in small screens

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less

@@ -12,6 +12,10 @@
   .chunkText;
 }
 
+.chunkCard {
+  width: 100%;
+}
+
 .cardSelected {
   background-color: @selectedBackgroundColor;
 }

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -1,7 +1,9 @@
 import Image from '@/components/image';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { Card, Checkbox, CheckboxProps, Flex, Popover, Switch } from 'antd';
+import classNames from 'classnames';
 import { useState } from 'react';
+
 import styles from './index.less';
 
 interface IProps {
@@ -44,33 +46,35 @@ const ChunkCard = ({
   };
 
   return (
-    <div>
-      <Card className={selected ? styles.cardSelected : ''}>
-        <Flex gap={'middle'} justify={'space-between'}>
-          <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
-          {item.img_id && (
-            <Popover
-              placement="topRight"
-              content={
-                <Image id={item.img_id} className={styles.imagePreview}></Image>
-              }
-            >
-              <Image id={item.img_id} className={styles.image}></Image>
-            </Popover>
-          )}
+    <Card
+      className={classNames(styles.chunkCard, {
+        [styles.cardSelected]: selected,
+      })}
+    >
+      <Flex gap={'middle'} justify={'space-between'}>
+        <Checkbox onChange={handleCheck} checked={checked}></Checkbox>
+        {item.img_id && (
+          <Popover
+            placement="topRight"
+            content={
+              <Image id={item.img_id} className={styles.imagePreview}></Image>
+            }
+          >
+            <Image id={item.img_id} className={styles.image}></Image>
+          </Popover>
+        )}
 
-          <section
-            onDoubleClick={handleContentDoubleClick}
-            onClick={handleContentClick}
-            className={styles.content}
-            dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
-          ></section>
-          <div>
-            <Switch checked={enabled} onChange={onChange} />
-          </div>
-        </Flex>
-      </Card>
-    </div>
+        <section
+          onDoubleClick={handleContentDoubleClick}
+          onClick={handleContentClick}
+          className={styles.content}
+          dangerouslySetInnerHTML={{ __html: item.content_with_weight }}
+        ></section>
+        <div>
+          <Switch checked={enabled} onChange={onChange} />
+        </div>
+      </Flex>
+    </Card>
   );
 };
 

web/src/pages/add-knowledge/components/knowledge-chunk/index.less

@@ -12,6 +12,10 @@
     justify-content: space-between;
   }
 
+  .pagePdfWrapper {
+    width: 60%;
+  }
+
   .pageContent {
     flex: 1;
     width: 100%;
@@ -29,12 +33,11 @@
   }
 
   .chunkContainer {
-    height: calc(100vh - 320px);
-    overflow: auto;
-    width: 100%;
+    height: calc(100vh - 332px);
   }
 
   .pageFooter {
+    padding-top: 10px;
     height: 32px;
   }
 }

web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx

@@ -38,6 +38,7 @@ const Chunk = () => {
   const { removeChunk } = useDeleteChunkByIds();
   const documentInfo = useSelectDocumentInfo();
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
+  const isPdf = documentInfo.type === 'pdf';
 
   const getChunkList = useCallback(() => {
     const payload: PayloadType = {
@@ -164,7 +165,7 @@ const Chunk = () => {
         ></ChunkToolBar>
         <Divider></Divider>
         <Flex flex={1} gap={'middle'}>
-          <Flex flex={1} vertical>
+          <Flex vertical className={isPdf ? styles.pagePdfWrapper : ''}>
             <div className={styles.pageContent}>
               <Spin spinning={loading} className={styles.spin} size="large">
                 <Space
@@ -204,7 +205,7 @@ const Chunk = () => {
             </div>
           </Flex>
 
-          {documentInfo.type === 'pdf' && (
+          {isPdf && (
             <section className={styles.documentPreview}>
               <DocumentPreview
                 selectedChunkId={selectedChunkId}