File size: 2,796 Bytes
eb38196 e55650e 8e109c7 af3ef26 eb38196 e441caf 8e109c7 eb38196 362ec6c 8e109c7 a9e3dcb e441caf af3ef26 04aba1b a9e3dcb af3ef26 a9e3dcb e441caf a9e3dcb e441caf af3ef26 8e109c7 eb38196 e441caf eb38196 af3ef26 04aba1b e55650e e441caf e55650e a9e3dcb 04aba1b 6b8fc2c 8e109c7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
import ModalManager from '@/components/modal-manager';
import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
import { useSelectUserInfo } from '@/hooks/userSettingHook';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, Empty, Flex, Input, Space, Spin } from 'antd';
import KnowledgeCard from './knowledge-card';
import KnowledgeCreatingModal from './knowledge-creating-modal';
import { useTranslation } from 'react-i18next';
import { useSearchKnowledge, useSelectKnowledgeListByKeywords } from './hooks';
import styles from './index.less';
const KnowledgeList = () => {
const { searchString, handleInputChange } = useSearchKnowledge();
const { loading } = useFetchKnowledgeList();
const list = useSelectKnowledgeListByKeywords(searchString);
const userInfo = useSelectUserInfo();
const { t } = useTranslation('translation', { keyPrefix: 'knowledgeList' });
return (
<Flex className={styles.knowledge} vertical flex={1}>
<div className={styles.topWrapper}>
<div>
<span className={styles.title}>
{t('welcome')}, {userInfo.nickname}
</span>
<p className={styles.description}>{t('description')}</p>
</div>
<Space size={'large'}>
<Input
placeholder={t('searchKnowledgePlaceholder')}
value={searchString}
style={{ width: 220 }}
allowClear
onChange={handleInputChange}
prefix={<SearchOutlined />}
/>
<ModalManager>
{({ visible, hideModal, showModal }) => (
<>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => {
showModal();
}}
className={styles.topButton}
>
{t('createKnowledgeBase')}
</Button>
<KnowledgeCreatingModal
visible={visible}
hideModal={hideModal}
></KnowledgeCreatingModal>
</>
)}
</ModalManager>
</Space>
</div>
<Spin spinning={loading}>
<Flex
gap={'large'}
wrap="wrap"
className={styles.knowledgeCardContainer}
>
{list.length > 0 ? (
list.map((item: any) => {
return (
<KnowledgeCard item={item} key={item.name}></KnowledgeCard>
);
})
) : (
<Empty className={styles.knowledgeEmpty}></Empty>
)}
</Flex>
</Spin>
</Flex>
);
};
export default KnowledgeList;
|