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/hooks/userSettingHook.ts

 
   return parserList;
 };
+
+export const useLogout = () => {
+  const dispatch = useDispatch();
+
+  const logout = useCallback((): number => {
+    return dispatch<any>({ type: 'loginModel/logout' });
+  }, [dispatch]);
+
+  return logout;
+};

web/src/layouts/components/user/index.tsx

-import { useFetchUserInfo, useSelectUserInfo } from '@/hooks/userSettingHook';
+import {
+  useFetchUserInfo,
+  useLogout,
+  useSelectUserInfo,
+} from '@/hooks/userSettingHook';
 import authorizationUtil from '@/utils/authorizationUtil';
 import type { MenuProps } from 'antd';
 import { Avatar, Button, Dropdown } from 'antd';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { history } from 'umi';
 
 const App: React.FC = () => {
   const { t } = useTranslation();
   const userInfo = useSelectUserInfo();
+  const logout = useLogout();
 
-  const logout = () => {
-    authorizationUtil.removeAll();
-    history.push('/login');
-  };
+  const handleLogout = useCallback(async () => {
+    const retcode = await logout();
+    if (retcode === 0) {
+      authorizationUtil.removeAll();
+      history.push('/login');
+    }
+  }, [logout]);
 
   const toSetting = () => {
     history.push('/setting');
     return [
       {
         key: '1',
-        onClick: logout,
+        onClick: handleLogout,
         label: <Button type="text">{t('header.logout')}</Button>,
       },
       {
         label: <Button type="text">{t('header.setting')}</Button>,
       },
     ];
-  }, [t]);
+  }, [t, handleLogout]);
 
   useFetchUserInfo();
 

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

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

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

 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 {
   };
 
   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

     justify-content: space-between;
   }
 
+  .pagePdfWrapper {
+    width: 60%;
+  }
+
   .pageContent {
     flex: 1;
     width: 100%;
   }
 
   .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

   const { removeChunk } = useDeleteChunkByIds();
   const documentInfo = useSelectDocumentInfo();
   const { handleChunkCardClick, selectedChunkId } = useHandleChunkCardClick();
+  const isPdf = documentInfo.type === 'pdf';
 
   const getChunkList = useCallback(() => {
     const payload: PayloadType = {
         ></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
             </div>
           </Flex>
 
-          {documentInfo.type === 'pdf' && (
+          {isPdf && (
             <section className={styles.documentPreview}>
               <DocumentPreview
                 selectedChunkId={selectedChunkId}

web/src/pages/chat/chat-container/index.tsx

           <Flex vertical gap={8} flex={1}>
             <b>{isAssistant ? '' : userInfo.nickname}</b>
             <div className={styles.messageText}>
-              {item.content ? (
+              {item.content !== '' ? (
                 <Markdown
                   rehypePlugins={[rehypeWrapReference]}
                   components={

web/src/pages/login/model.ts

       };
     },
   },
-  subscriptions: {
-    setup({ dispatch, history }) {
-      history.listen((location) => {});
-    },
-  },
   effects: {
-    *login({ payload = {} }, { call, put }) {
+    *login({ payload = {} }, { call }) {
       const { data, response } = yield call(userService.login, payload);
       const { retcode, data: res } = data;
       const authorization = response.headers.get(Authorization);
       if (retcode === 0) {
-        message.success('登录成功！');
+        message.success('logged!');
         const token = res.access_token;
         const userInfo = {
           avatar: res.avatar,
       }
       return retcode;
     },
-    *register({ payload = {} }, { call, put }) {
-      const { data, response } = yield call(userService.register, payload);
+    *register({ payload = {} }, { call }) {
+      const { data } = yield call(userService.register, payload);
       console.log();
-      const { retcode, data: res, retmsg } = data;
+      const { retcode } = data;
       if (retcode === 0) {
         message.success('注册成功！');
       }
       return retcode;
     },
+    *logout({ payload = {} }, { call }) {
+      const { data } = yield call(userService.logout, payload);
+      const { retcode } = data;
+      if (retcode === 0) {
+        message.success('logout');
+      }
+      return retcode;
+    },
   },
 };
 export default model;

web/src/services/userService.ts

 
 const {
   login,
+  logout,
   register,
   setting,
   user_info,
     url: login,
     method: 'post',
   },
+  logout: {
+    url: logout,
+    method: 'get',
+  },
   register: {
     url: register,
     method: 'post',

web/src/utils/api.ts

 export default {
   // 用户
   login: `${api_host}/user/login`,
+  logout: `${api_host}/user/logout`,
   register: `${api_host}/user/register`,
   setting: `${api_host}/user/setting`,
   user_info: `${api_host}/user/info`,