feat: layout the knowledge list page

web/.umirc.ts

@@ -16,6 +16,11 @@ export default defineConfig({
   },
   plugins: ['@react-dev-inspector/umi4-plugin', '@umijs/plugins/dist/dva'],
   dva: {},
+  lessLoader: {
+    modifyVars: {
+      hack: `true; @import "~@/less/variable.less";`,
+    },
+  },
   // proxy: {
   //   '/v1': {
   //     'target': 'http://54.80.112.79:9380/',

web/src/assets/filter.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 10H15M2.5 5H17.5M7.5 15H12.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/src/assets/svg/more.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="6" viewBox="0 0 24 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12 4.25C12.6904 4.25 13.25 3.69036 13.25 3C13.25 2.30964 12.6904 1.75 12 1.75C11.3096 1.75 10.75 2.30964 10.75 3C10.75 3.69036 11.3096 4.25 12 4.25Z"
+        stroke="#98A2B3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+        d="M20.75 4.25C21.4404 4.25 22 3.69036 22 3C22 2.30964 21.4404 1.75 20.75 1.75C20.0596 1.75 19.5 2.30964 19.5 3C19.5 3.69036 20.0596 4.25 20.75 4.25Z"
+        stroke="#98A2B3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+        d="M3.25 4.25C3.94036 4.25 4.5 3.69036 4.5 3C4.5 2.30964 3.94036 1.75 3.25 1.75C2.55964 1.75 2 2.30964 2 3C2 3.69036 2.55964 4.25 3.25 4.25Z"
+        stroke="#98A2B3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

web/src/layouts/components/header/index.less

@@ -0,0 +1,13 @@
+.tag {
+  height: 40px;
+  padding: 0 30px;
+  margin: 0 5px;
+  border: 1px solid #000;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.checked {
+  color: #1677ff;
+  border-color: #1677ff;
+}

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

@@ -0,0 +1,64 @@
+import logo from '@/assets/logo.png';
+import { Layout, Space, theme } from 'antd';
+import classnames from 'classnames';
+
+import styles from './index.less';
+
+import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'umi';
+import User from '../user';
+
+const { Header } = Layout;
+
+const RagHeader = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  const tagsData = [
+    { path: '/knowledge', name: 'knowledge' },
+    { path: '/chat', name: 'chat' },
+    { path: '/file', name: 'file' },
+  ];
+
+  const currentPath = useMemo(() => {
+    return tagsData.find((x) => x.path === pathname)?.name || 'knowledge';
+  }, [pathname]);
+
+  const handleChange = (path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <Header
+      style={{
+        padding: '0 8px',
+        background: colorBgContainer,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: '72px',
+      }}
+    >
+      <img src={logo} alt="" style={{ height: 30, width: 30 }} />
+      <Space size={[0, 8]} wrap>
+        {tagsData.map((item) => (
+          <span
+            key={item.name}
+            className={classnames(styles.tag, {
+              [styles.checked]: currentPath === item.name,
+            })}
+            onClick={() => handleChange(item.path)}
+          >
+            {item.name}
+          </span>
+        ))}
+      </Space>
+      <User></User>
+    </Header>
+  );
+};
+
+export default RagHeader;

web/src/layouts/index.less

@@ -18,16 +18,6 @@ body {
   margin: 0;
 }
 
-.tag {
-  height: 40px;
-  padding: 0 30px;
-  margin: 0 5px;
-  border: 1px solid #000;
-  border-radius: 10px;
-  cursor: pointer;
+.divider {
+  margin: 0;
 }
-
-.checked {
-  color: #1677ff;
-  border-color: #1677ff;
-}

web/src/layouts/index.tsx

@@ -1,74 +1,26 @@
-import logo from '@/assets/logo.png';
-import { Layout, Space, theme } from 'antd';
-import classnames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import { Divider, Layout, theme } from 'antd';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation, useNavigate } from 'umi';
+import { Outlet } from 'umi';
 import '../locales/config';
-import User from './components/user';
+import Header from './components/header';
 import styles from './index.less';
 
-const { Header, Content } = Layout;
+const { Content } = Layout;
 
-const App: React.FC = (props) => {
+const App: React.FC = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
-  const [current, setCurrent] = useState('knowledge');
-
-  const location = useLocation();
-  useEffect(() => {
-    if (location.pathname !== '/') {
-      const path = location.pathname.split('/');
-      // setCurrent(path[1]);
-    }
-    console.log(location.pathname.split('/'));
-  }, [location.pathname]);
-
-  const handleChange = (path: string) => {
-    // setCurrent(path)
-    navigate(path);
-  };
-  const tagsData = [
-    { path: '/knowledge', name: 'knowledge' },
-    { path: '/chat', name: 'chat' },
-    { path: '/file', name: 'file' },
-  ];
 
   return (
     <Layout className={styles.layout}>
       <Layout>
-        <Header
-          style={{
-            padding: '0 8px',
-            background: colorBgContainer,
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <img src={logo} alt="" style={{ height: 30, width: 30 }} />
-          <Space size={[0, 8]} wrap>
-            {tagsData.map((item) => (
-              <span
-                key={item.name}
-                className={classnames(styles['tag'], {
-                  [styles['checked']]: current === item.name,
-                })}
-                onClick={() => handleChange(item.path)}
-              >
-                {item.name}
-              </span>
-            ))}
-          </Space>
-          <User></User>
-        </Header>
+        <Header></Header>
+        <Divider orientationMargin={0} className={styles.divider} />
         <Content
           style={{
-            margin: '24px 16px',
-
             minHeight: 280,
             background: colorBgContainer,
             borderRadius: borderRadiusLG,

web/src/less/variable.less

@@ -0,0 +1 @@
+@fontWeight600: 600;

web/src/pages/knowledge/index.less

@@ -1,40 +1,43 @@
+// @import '~@/less/variable.less';
+
 .knowledge {
-  padding: 24px;
+  padding: 48px 60px;
 }
 
-.container {
-  height: 100px;
+.topWrapper {
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
+  align-items: flex-start;
+  padding-bottom: 72px;
 
-  .content {
+  .title {
+    font-family: Inter;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: @fontWeight600;
+    line-height: 38px;
+    color: rgba(16, 24, 40, 1);
+  }
+  .description {
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    color: rgba(71, 84, 103, 1);
+  }
+
+  .topButton {
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: @fontWeight600;
+    line-height: 20px;
+  }
+
+  .filterButton {
     display: flex;
-    justify-content: space-between;
-
-    .context {
-      flex: 1;
-    }
-  }
-
-  .footer {
-    height: 20px;
-
-    .text {
-      margin-left: 10px;
-    }
+    align-items: center;
+    .topButton();
   }
 }
-
-.card {
-  :global {
-    .ant-card-body {
-      padding: 10px;
-      margin: 0;
-    }
-
-    margin-bottom: 10px;
-  }
-
-  cursor: pointer;
-}

web/src/pages/knowledge/index.tsx

@@ -1,13 +1,10 @@
-import { formatDate } from '@/utils/date';
-import {
-  DeleteOutlined,
-  MinusSquareOutlined,
-  PlusOutlined,
-} from '@ant-design/icons';
-import { Card, Col, FloatButton, Popconfirm, Row } from 'antd';
+import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Col, Row, Space } from 'antd';
 import { useCallback, useEffect } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
 import styles from './index.less';
+import KnowledgeCard from './knowledge-card';
 
 const Knowledge = () => {
   const dispatch = useDispatch();
@@ -22,98 +19,54 @@ const Knowledge = () => {
     });
   }, []);
 
-  const confirm = (id: string) => {
-    dispatch({
-      type: 'knowledgeModel/rmKb',
-      payload: {
-        kb_id: id,
-      },
-    });
-  };
   const handleAddKnowledge = () => {
     navigate(`add/setting?activeKey=setting`);
   };
-  const handleEditKnowledge = (id: string) => {
-    navigate(`add/setting?activeKey=file&id=${id}`);
-  };
+
   useEffect(() => {
     fetchList();
   }, [fetchList]);
+
   return (
-    <>
-      <div className={styles.knowledge}>
-        <FloatButton
-          onClick={handleAddKnowledge}
-          icon={<PlusOutlined />}
-          type="primary"
-          style={{ right: 24, top: 100 }}
-        />
-        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
-          {data.map((item: any) => {
-            return (
-              <Col
-                className="gutter-row"
-                key={item.name}
-                xs={24}
-                sm={12}
-                md={8}
-                lg={6}
-              >
-                <Card
-                  className={styles.card}
-                  onClick={() => {
-                    handleEditKnowledge(item.id);
-                  }}
-                >
-                  <div className={styles.container}>
-                    <div className={styles.content}>
-                      <span className={styles.context}>{item.name}</span>
-                      <span className={styles.delete}>
-                        <Popconfirm
-                          title="Delete the task"
-                          description="Are you sure to delete this task?"
-                          onConfirm={(e: any) => {
-                            e.stopPropagation();
-                            e.nativeEvent.stopImmediatePropagation();
-                            confirm(item.id);
-                          }}
-                          okText="Yes"
-                          cancelText="No"
-                        >
-                          <DeleteOutlined
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              e.nativeEvent.stopImmediatePropagation();
-                            }}
-                          />
-                        </Popconfirm>
-                      </span>
-                    </div>
-                    <div className={styles.footer}>
-                      <span className={styles.text}>
-                        <MinusSquareOutlined />
-                        {item.doc_num}文档
-                      </span>
-                      <span className={styles.text}>
-                        <MinusSquareOutlined />
-                        {item.chunk_num}个
-                      </span>
-                      <span className={styles.text}>
-                        <MinusSquareOutlined />
-                        {item.token_num}千字符
-                      </span>
-                      <span style={{ float: 'right' }}>
-                        {formatDate(item.update_date)}
-                      </span>
-                    </div>
-                  </div>
-                </Card>
-              </Col>
-            );
-          })}
-        </Row>
+    <div className={styles.knowledge}>
+      <div className={styles.topWrapper}>
+        <div>
+          <span className={styles.title}>Welcome back, Zing</span>
+          <p className={styles.description}>
+            Which database are we going to use today?
+          </p>
+        </div>
+        <Space size={'large'}>
+          <Button icon={<FilterIcon />} className={styles.filterButton}>
+            Filters
+          </Button>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={handleAddKnowledge}
+            className={styles.topButton}
+          >
+            Create knowledge base
+          </Button>
+        </Space>
       </div>
-    </>
+      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+        {data.map((item: any) => {
+          return (
+            <Col
+              className="gutter-row"
+              key={item.name}
+              xs={24}
+              sm={12}
+              md={8}
+              lg={6}
+            >
+              <KnowledgeCard item={item}></KnowledgeCard>
+            </Col>
+          );
+        })}
+      </Row>
+    </div>
   );
 };
 

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;

web/src/utils/date.ts

@@ -12,9 +12,9 @@ export function lastWeek() {
   return formatDate(moment().subtract(1, 'weeks'));
 }
 
-export function formatDate(date) {
+export function formatDate(date: any) {
   if (!date) {
     return '';
   }
-  return moment(date).format('YYYY-MM-DD');
+  return moment(date).format('DD/MM/YYYY');
 }