feat: Modify the color of the svg icon in the header according to the selected state and feat: extract routing information from the knowledge base into constants (#51)

* feat: Modify the color of the svg icon in the header according to the selected state * feat: add translation icon to header * feat: shorten the route length of the knowledge base * feat: extract routing information from the knowledge base into constants
2024-02-02 09:35:21 +08:00
parent e6acaf6738
commit 503735cd1d
26 changed files with 439 additions and 130 deletions
--- a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.less
@@ -0,0 +1,63 @@
+.sidebarWrapper {
+  max-width: 288px;
+  padding: 32px 24px 24px 24px;
+  flex-direction: column;
+
+  .sidebarTop {
+    text-align: center;
+    .knowledgeLogo {
+    }
+    .knowledgeTitle {
+      font-family: 'Nunito Sans';
+      font-size: 16px;
+      line-height: 24px;
+      font-weight: @fontWeight700;
+      color: @gray2;
+      margin-bottom: 6px;
+    }
+    .knowledgeDescription {
+      font-family: 'Nunito Sans';
+      font-size: 12px;
+      font-weight: @fontWeight600;
+      color: @gray8;
+      margin: 0;
+    }
+    padding-bottom: 20px;
+  }
+  .divider {
+    height: 2px;
+    background-image: linear-gradient(
+      to right,
+      @gray11 0%,
+      @gray11 50%,
+      transparent 50%
+    );
+    background-size: 10px 2px;
+    background-repeat: repeat-x;
+  }
+
+  .menuWrapper {
+    padding-top: 10px;
+
+    .menu {
+      border: none;
+      font-size: @fontSize14;
+      font-weight: @fontWeight600;
+    }
+
+    .defaultWidth {
+      width: 240px;
+    }
+
+    .minWidth {
+      width: 50px;
+    }
+
+    .menuText {
+      color: @gray3;
+      font-family: @fontFamilyNunitoSans;
+      font-size: @fontSize14;
+      font-weight: @fontWeight700;
+    }
+  }
+}
--- a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx
@@ -0,0 +1,118 @@
+import { ReactComponent as ConfigrationIcon } from '@/assets/svg/knowledge-configration.svg';
+import { ReactComponent as DatasetIcon } from '@/assets/svg/knowledge-dataset.svg';
+import { ReactComponent as TestingIcon } from '@/assets/svg/knowledge-testing.svg';
+import { getWidth } from '@/utils';
+import { AntDesignOutlined } from '@ant-design/icons';
+import { Avatar, Menu, MenuProps, Space } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams, useSelector } from 'umi';
+import { KnowledgeRouteKey, routeMap } from '../../constant';
+import styles from './index.less';
+
+const KnowledgeSidebar = () => {
+  const kAModel = useSelector((state: any) => state.kAModel);
+  const { id } = kAModel;
+  let navigate = useNavigate();
+  const params = useParams();
+  const activeKey = params.module || KnowledgeRouteKey.Dataset;
+
+  const [windowWidth, setWindowWidth] = useState(getWidth());
+  const [collapsed, setCollapsed] = useState(false);
+
+  const handleSelect: MenuProps['onSelect'] = (e) => {
+    navigate(`/knowledge/${e.key}?id=${id}`);
+  };
+
+  type MenuItem = Required<MenuProps>['items'][number];
+
+  function getItem(
+    label: React.ReactNode,
+    key: React.Key,
+    icon?: React.ReactNode,
+    disabled?: boolean,
+    children?: MenuItem[],
+    type?: 'group',
+  ): MenuItem {
+    return {
+      key,
+      icon,
+      children,
+      label,
+      type,
+      disabled,
+    } as MenuItem;
+  }
+  const items: MenuItem[] = useMemo(() => {
+    return [
+      getItem(
+        routeMap[KnowledgeRouteKey.Dataset], // TODO: Change icon color when selected
+        KnowledgeRouteKey.Dataset,
+        <DatasetIcon />,
+      ),
+      getItem(
+        routeMap[KnowledgeRouteKey.Testing],
+        KnowledgeRouteKey.Testing,
+        <TestingIcon />,
+      ),
+      getItem(
+        routeMap[KnowledgeRouteKey.Configration],
+        KnowledgeRouteKey.Configration,
+        <ConfigrationIcon />,
+      ),
+    ];
+  }, [id]);
+
+  useEffect(() => {
+    if (windowWidth.width > 957) {
+      setCollapsed(false);
+    } else {
+      setCollapsed(true);
+    }
+  }, [windowWidth.width]);
+
+  // 标记一下
+  useEffect(() => {
+    const widthSize = () => {
+      const width = getWidth();
+      console.log(width);
+
+      setWindowWidth(width);
+    };
+    window.addEventListener('resize', widthSize);
+    return () => {
+      window.removeEventListener('resize', widthSize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.sidebarWrapper}>
+      <div className={styles.sidebarTop}>
+        <Space size={8} direction="vertical">
+          <Avatar size={64} icon={<AntDesignOutlined />} />
+          <div className={styles.knowledgeTitle}>Cloud Computing</div>
+        </Space>
+        <p className={styles.knowledgeDescription}>
+          A scalable, secure cloud-based database optimized for high-performance
+          computing and data storage.
+        </p>
+      </div>
+      <div className={styles.divider}></div>
+      <div className={styles.menuWrapper}>
+        <Menu
+          selectedKeys={[activeKey]}
+          // mode="inline"
+          className={classNames(styles.menu, {
+            [styles.defaultWidth]: windowWidth.width > 957,
+            [styles.minWidth]: windowWidth.width <= 957,
+          })}
+          inlineCollapsed={collapsed}
+          items={items}
+          onSelect={handleSelect}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default KnowledgeSidebar;