feat: layout the knowledge list page and modify the page switching button in the header (#48)

* feat: remove unnecessary 'loading' fields from other files

* feat: layout the knowledge list page

* feat: modify the page switching button in the header

web/src/pages/knowledge/knowledge-card/index.less

@@ -0,0 +1,73 @@
+.container {
+  height: 251px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+
+    .context {
+      flex: 1;
+    }
+  }
+
+  .footer {
+    // text-align: left;
+  }
+  .footerTop {
+    padding-bottom: 2px;
+  }
+}
+
+.card {
+  border-radius: 12px;
+  border: 1px solid rgba(234, 236, 240, 1);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  padding: 24px;
+  min-width: 300px;
+  cursor: pointer;
+
+  .titleWrapper {
+    // flex: 1;
+    .title {
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+    }
+    .description {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  :global {
+    .ant-card-body {
+      padding: 0;
+      margin: 0;
+    }
+  }
+  .bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .bottomLeft {
+    vertical-align: middle;
+  }
+  .leftIcon {
+    margin-right: 10px;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+  .rightText {
+    font-size: 12px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.65);
+    vertical-align: middle;
+  }
+}

web/src/pages/knowledge/knowledge-card/index.tsx

@@ -0,0 +1,123 @@
+import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
+import { formatDate } from '@/utils/date';
+import {
+  AntDesignOutlined,
+  CalendarOutlined,
+  DeleteOutlined,
+  FileTextOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
+import { Avatar, Card, Dropdown, MenuProps, Space, Tooltip } from 'antd';
+import { MouseEvent } from 'react';
+import { useDispatch, useNavigate } from 'umi';
+
+import styles from './index.less';
+
+interface IProps {
+  item: any;
+}
+
+const KnowledgeCard = ({ item }: IProps) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const handleDelete = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <Space>
+          删除
+          <DeleteOutlined onClick={handleDelete} />
+        </Space>
+      ),
+    },
+  ];
+
+  const confirm = (id: string) => {
+    dispatch({
+      type: 'knowledgeModel/rmKb',
+      payload: {
+        kb_id: id,
+      },
+    });
+  };
+
+  const handleCardClick = () => {
+    navigate(`add/setting?activeKey=file&id=${item.id}`);
+  };
+
+  const onConfirmDelete = (e?: MouseEvent<HTMLElement>) => {
+    e?.stopPropagation();
+    e?.nativeEvent.stopImmediatePropagation();
+    confirm(item.id);
+  };
+
+  return (
+    <Card className={styles.card} onClick={handleCardClick}>
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <Avatar size={34} icon={<UserOutlined />} />
+
+          <span className={styles.delete}>
+            {/* <Popconfirm
+              title="Delete the task"
+              description="Are you sure to delete this task?"
+              onConfirm={onConfirmDelete}
+              okText="Yes"
+              cancelText="No"
+            >
+              <DeleteOutlined onClick={handleDelete} />
+            </Popconfirm> */}
+            <Dropdown menu={{ items }}>
+              <MoreIcon />
+            </Dropdown>
+          </span>
+        </div>
+        <div className={styles.titleWrapper}>
+          <span className={styles.title}>{item.name}</span>
+          <p>A comprehensive knowledge base for crafting effective resumes.</p>
+        </div>
+        <div className={styles.footer}>
+          <div className={styles.footerTop}>
+            <div className={styles.bottomLeft}>
+              <FileTextOutlined className={styles.leftIcon} />
+              <span className={styles.rightText}>
+                <Space>{item.doc_num}文档</Space>
+              </span>
+            </div>
+          </div>
+          <div className={styles.bottom}>
+            <div className={styles.bottomLeft}>
+              <CalendarOutlined className={styles.leftIcon} />
+              <span className={styles.rightText}>
+                {formatDate(item.update_date)}
+              </span>
+            </div>
+            <Avatar.Group size={25}>
+              <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
+              <a href="https://ant.design">
+                <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
+              </a>
+              <Tooltip title="Ant User" placement="top">
+                <Avatar
+                  style={{ backgroundColor: '#87d068' }}
+                  icon={<UserOutlined />}
+                />
+              </Tooltip>
+              <Avatar
+                style={{ backgroundColor: '#1677ff' }}
+                icon={<AntDesignOutlined />}
+              />
+            </Avatar.Group>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export default KnowledgeCard;