feat: set width of chunk text to 100% and add Skeleton to Preview of document and remove react-pdf (#94)

* feat: remove react-pdf

* feat: add Skeleton to Preview of document

* feat: set width of chunk text to 100%

web/src/pages/knowledge/index.less

@@ -1,14 +1,14 @@
 // @import '~@/less/variable.less';
 
 .knowledge {
-  padding: 48px 60px;
+  padding: 48px 0;
 }
 
 .topWrapper {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  padding-bottom: 72px;
+  padding: 0 60px 72px;
 
   .title {
     font-family: Inter;
@@ -41,3 +41,7 @@
     .topButton();
   }
 }
+.knowledgeCardContainer {
+  padding: 0 60px;
+  overflow: auto;
+}

web/src/pages/knowledge/index.tsx

@@ -1,21 +1,25 @@
 import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
 import ModalManager from '@/components/modal-manager';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Flex, Space } from 'antd';
+import { Button, Empty, Flex, Space } from 'antd';
 import KnowledgeCard from './knowledge-card';
 import KnowledgeCreatingModal from './knowledge-creating-modal';
 
 import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
+import { useSelectUserInfo } from '@/hooks/userSettingHook';
 import styles from './index.less';
 
 const Knowledge = () => {
-  const data = useFetchKnowledgeList();
+  const list = useFetchKnowledgeList();
+  const userInfo = useSelectUserInfo();
 
   return (
-    <div className={styles.knowledge}>
+    <Flex className={styles.knowledge} vertical flex={1}>
       <div className={styles.topWrapper}>
         <div>
-          <span className={styles.title}>Welcome back, Zing</span>
+          <span className={styles.title}>
+            Welcome back, {userInfo.nickname}
+          </span>
           <p className={styles.description}>
             Which database are we going to use today?
           </p>
@@ -46,12 +50,22 @@ const Knowledge = () => {
           </ModalManager>
         </Space>
       </div>
-      <Flex gap="large" wrap="wrap">
-        {data.map((item: any) => {
-          return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
-        })}
+      <Flex
+        gap="large"
+        wrap="wrap"
+        flex={1}
+        // justify="center"
+        className={styles.knowledgeCardContainer}
+      >
+        {list.length > 0 ? (
+          list.map((item: any) => {
+            return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
+          })
+        ) : (
+          <Empty></Empty>
+        )}
       </Flex>
-    </div>
+    </Flex>
   );
 };