feat: 完成菜单改版

react-ui/config/routes.ts

@@ -84,16 +84,13 @@ export default [
     ],
   },
   {
-    name: '数据准备',
+    name: '数据标注',
     path: '/datasetPreparation',
     routes: [
       {
+        key: 'datasetPreparation',
         path: '',
-        redirect: '/datasetPreparation/datasetAnnotation',
-      },
-      {
         name: '数据标注',
-        path: 'datasetAnnotation',
         component: './DatasetPreparation/DatasetAnnotation/index',
       },
     ],

react-ui/src/app.tsx

@@ -21,7 +21,6 @@ import {
   patchRouteWithRemoteMenus,
   setRemoteMenu,
 } from './services/session';
-import './styles/menu.less';
 import { isLoginPage, needAuth } from './utils';
 import { addAlpha } from './utils/color';
 import { HomeUrl } from './utils/constant';
@@ -92,7 +91,7 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
       return <PageContainer>{children}</PageContainer>;
     },
     collapsedButtonRender: false,
-    collapsed: initialState?.collapsed,
+    collapsed: true,
     menuProps: {
       onClick: () => {
         // 点击菜单项，删除所有的页面 state 缓存
@@ -107,8 +106,7 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
         colorTextMenuSelected: themes['primaryColor'],
         colorTextMenuActive: themes['primaryColor'],
         colorTextMenuItemHover: themes['primaryColor'],
-        colorBgMenuItemSelected: 'rgba(197, 232, 255, 0.8)',
-        colorMenuBackground: themes['siderBGColor'],
+        colorBgMenuItemSelected: 'rgba(86, 82, 255, 0.1)',
       },
       header: {
         colorBgHeader: '#3a3da5',

react-ui/src/components/MenuIconSelector/index.less

@@ -15,26 +15,10 @@
     border-radius: 4px;
     cursor: pointer;
 
-    &:hover {
+    &:hover,
+    &--select {
+      color: @primary-color;
       border-color: @primary-color;
     }
-
-    &__icon {
-      display: block;
-    }
-
-    &__icon--active {
-      display: none;
-    }
-
-    &:hover &__icon,
-    &:active &__icon {
-      display: none;
-    }
-
-    &:hover &__icon--active,
-    &:active &__icon--active {
-      display: block;
-    }
   }
 }

react-ui/src/components/MenuIconSelector/index.tsx

@@ -8,6 +8,7 @@ import KFIcon from '@/components/KFIcon';
 import KFModal from '@/components/KFModal';
 import iconData from '@/iconfont/iconfont-menu.json';
 import { type ModalProps } from 'antd';
+import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
 
@@ -44,21 +45,14 @@ function MenuIconSelector({ open, selectedIcon, onOk, ...rest }: MenuIconSelecto
         {icons.map((icon) => (
           <div
             key={icon.icon_id}
-            className={styles['menu-icon-selector__item']}
+            className={classNames(styles['menu-icon-selector__item'], {
+              [styles['menu-icon-selector__item--select']]: selectedIcon === icon.font_class,
+            })}
             onClick={() => onOk(icon.font_class)}
           >
             <KFIcon
               className={styles['menu-icon-selector__item__icon']}
-              type={
-                selectedIcon === icon.font_class
-                  ? `icon-${icon.font_class}-active`
-                  : `icon-${icon.font_class}`
-              }
-              font={24}
-            />
-            <KFIcon
-              className={styles['menu-icon-selector__item__icon--active']}
-              type={`icon-${icon.font_class}-active`}
+              type={`icon-${icon.font_class}`}
               font={24}
             />
           </div>

react-ui/src/global.less

@@ -31,7 +31,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 .ant-pro-layout .ant-pro-layout-content {
-  padding: 0 10px 10px;
+  padding: 0;
   background-color: transparent;
 }
 .ant-pro-layout .ant-pro-layout-bg-list {
@@ -43,7 +43,7 @@ body {
 }
 
 .ant-pro-layout .ant-pro-sider-menu {
-  padding-top: 15px;
+  padding-top: 35px;
 }
 .ant-pro-global-header-logo-mix {
   padding-left: 12px;

react-ui/src/hooks/useRootFontSize.ts

@@ -6,24 +6,30 @@ import { useEffect, useState } from 'react';
  * @param initialValue - 状态的初始值
  * @return 包含状态值、状态设置函数和可变引用对象的数组
  */
+
+export const getHtmlFontSize = () => {
+  return parseFloat(getComputedStyle(document.documentElement).fontSize);
+};
+
 export function useRootFontSize() {
-  const fontSizeStr = document.documentElement.style.fontSize;
-  const fontSize = parseFloat(fontSizeStr);
-  const [size, setSize] = useState(fontSize);
+  const [fontSize, setFontSize] = useState(getHtmlFontSize);
 
   useEffect(() => {
-    const setFontSize = () => {
-      setTimeout(() => {
-        const fontSizeStr = document.documentElement.style.fontSize;
-        const fontSize = parseFloat(fontSizeStr);
-        setSize(fontSize);
-      }, 300);
-    };
-    window.addEventListener('resize', setFontSize);
+    const html = document.documentElement;
+    const observer = new MutationObserver(() => {
+      const size = getHtmlFontSize();
+      console.log('zzz', size);
+
+      setFontSize(size);
+    });
+    observer.observe(html, {
+      attributes: true,
+      attributeFilter: ['style'],
+    });
     return () => {
-      window.removeEventListener('resize', setFontSize);
+      observer.disconnect();
     };
   }, []);
 
-  return size;
+  return fontSize;
 }

react-ui/src/iconfont/iconfont-menu.json

@@ -1,177 +1,65 @@
 {
-  "id": "4511326",
-  "name": "复杂智能软件-导航",
+  "id": "5014610",
+  "name": "新材料系统",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
     {
-      "icon_id": "42495274",
-      "name": "知识图谱-active",
-      "font_class": "zhishitupu-icon-active",
-      "unicode": "e63e",
-      "unicode_decimal": 58942
-    },
-    {
-      "icon_id": "42495275",
-      "name": "知识图谱",
-      "font_class": "zhishitupu-icon",
-      "unicode": "e63f",
-      "unicode_decimal": 58943
-    },
-    {
-      "icon_id": "41643218",
-      "name": "模型开发",
-      "font_class": "model-icon",
-      "unicode": "e624",
-      "unicode_decimal": 58916
-    },
-    {
-      "icon_id": "41643132",
-      "name": "工作空间",
-      "font_class": "workspace-icon",
-      "unicode": "e628",
-      "unicode_decimal": 58920
+      "icon_id": "45462477",
+      "name": "算力资源",
+      "font_class": "modelDseployment-icon",
+      "unicode": "e65a",
+      "unicode_decimal": 58970
     },
     {
-      "icon_id": "41643135",
+      "icon_id": "45462476",
       "name": "系统管理",
       "font_class": "system-icon",
-      "unicode": "e622",
-      "unicode_decimal": 58914
+      "unicode": "e65b",
+      "unicode_decimal": 58971
     },
     {
-      "icon_id": "41643131",
-      "name": "数据准备",
-      "font_class": "datasetPreparation-icon",
-      "unicode": "e625",
-      "unicode_decimal": 58917
-    },
-    {
-      "icon_id": "41643133",
-      "name": "开发环境",
-      "font_class": "developmentEnvironment-icon",
-      "unicode": "e626",
-      "unicode_decimal": 58918
+      "icon_id": "45462475",
+      "name": "科学实验",
+      "font_class": "model-icon",
+      "unicode": "e65c",
+      "unicode_decimal": 58972
     },
     {
-      "icon_id": "41642989",
-      "name": "使用手册",
+      "icon_id": "45462474",
+      "name": "知识库",
       "font_class": "manual-icon",
-      "unicode": "e623",
-      "unicode_decimal": 58915
-    },
-    {
-      "icon_id": "40233218",
-      "name": "操作手册-active",
-      "font_class": "manual-icon-active",
-      "unicode": "e62c",
-      "unicode_decimal": 58924
-    },
-    {
-      "icon_id": "40171713",
-      "name": "监控运维-active",
-      "font_class": "monitor-icon-active",
-      "unicode": "e627",
-      "unicode_decimal": 58919
-    },
-    {
-      "icon_id": "40171711",
-      "name": "监控运维",
-      "font_class": "monitor-icon",
-      "unicode": "e629",
-      "unicode_decimal": 58921
-    },
-    {
-      "icon_id": "40171710",
-      "name": "开发环境-active",
-      "font_class": "developmentEnvironment-icon-active",
-      "unicode": "e62a",
-      "unicode_decimal": 58922
-    },
-    {
-      "icon_id": "39969573",
-      "name": "流水线-active",
-      "font_class": "workflow-icon-active",
-      "unicode": "e61a",
-      "unicode_decimal": 58906
+      "unicode": "e65d",
+      "unicode_decimal": 58973
     },
     {
-      "icon_id": "39969569",
-      "name": "数据准备-active",
-      "font_class": "datasetPreparation-icon-active",
-      "unicode": "e61c",
-      "unicode_decimal": 58908
+      "icon_id": "45462473",
+      "name": "数据工程",
+      "font_class": "datasetPreparation-icon",
+      "unicode": "e65e",
+      "unicode_decimal": 58974
     },
     {
-      "icon_id": "39969570",
-      "name": "模型在线部署",
-      "font_class": "modelDseployment-icon",
-      "unicode": "e61e",
-      "unicode_decimal": 58910
+      "icon_id": "45462472",
+      "name": "工作空间",
+      "font_class": "workspace-icon",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
     },
     {
-      "icon_id": "39969567",
-      "name": "流水线",
+      "icon_id": "45462479",
+      "name": "模型训练",
       "font_class": "workflow-icon",
-      "unicode": "e61f",
-      "unicode_decimal": 58911
-    },
-    {
-      "icon_id": "39969566",
-      "name": "AI资产管理-active",
-      "font_class": "aiAsset-icon-active",
-      "unicode": "e620",
-      "unicode_decimal": 58912
+      "unicode": "e658",
+      "unicode_decimal": 58968
     },
     {
-      "icon_id": "39969563",
-      "name": "AI资产管理",
+      "icon_id": "45462478",
+      "name": "资源库",
       "font_class": "aiAsset-icon",
-      "unicode": "e621",
-      "unicode_decimal": 58913
-    },
-    {
-      "icon_id": "39969572",
-      "name": "模型开发-active",
-      "font_class": "model-icon-active",
-      "unicode": "e610",
-      "unicode_decimal": 58896
-    },
-    {
-      "icon_id": "39969579",
-      "name": "系统管理-active",
-      "font_class": "system-icon-active",
-      "unicode": "e612",
-      "unicode_decimal": 58898
-    },
-    {
-      "icon_id": "39969578",
-      "name": "模型在线部署-active",
-      "font_class": "modelDseployment-icon-active",
-      "unicode": "e613",
-      "unicode_decimal": 58899
-    },
-    {
-      "icon_id": "39969577",
-      "name": "应用开发",
-      "font_class": "appsDeployment-icon",
-      "unicode": "e615",
-      "unicode_decimal": 58901
-    },
-    {
-      "icon_id": "39969576",
-      "name": "工作空间-active",
-      "font_class": "workspace-icon-active",
-      "unicode": "e616",
-      "unicode_decimal": 58902
-    },
-    {
-      "icon_id": "39969574",
-      "name": "应用开发-active",
-      "font_class": "appsDeployment-icon-active",
-      "unicode": "e617",
-      "unicode_decimal": 58903
+      "unicode": "e659",
+      "unicode_decimal": 58969
     }
   ]
 }

react-ui/src/overrides.less

@@ -196,6 +196,49 @@
   }
 }
 
+.ant-layout-sider {
+  position: relative;
+  z-index: 100;
+  flex: 0 0 96px !important;
+  width: 96px !important;
+  min-width: 96px !important;
+  max-width: 104px !important;
+  background-color: #f6f9ff !important;
+  border-radius: 0px 0px 10px 0px !important;
+  box-shadow: 0px 3px 6px rgba(81, 76, 249, 0.1) !important;
+
+  .ant-layout-sider-children {
+    padding-inline: 14px !important;
+    margin-inline: 0 !important;
+
+    > div {
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+    }
+
+    .ant-pro-base-menu-vertical-collapsed {
+      .ant-pro-base-menu-vertical-menu-item,
+      .ant-pro-base-menu-vertical-submenu {
+        width: 100% !important;
+        height: 68px !important;
+        margin: 0 0 20px 0 !important;
+        border-radius: 10px !important;
+
+        .ant-menu-title-content {
+          height: 100% !important;
+        }
+      }
+
+      .ant-menu-submenu-title {
+        width: 100% !important;
+        height: 100% !important;
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
 .ant-pro-sider-collapsed-button {
   inset-block-start: 65px !important;
 }

react-ui/src/pages/Home/components/NavBar/index.less

@@ -5,7 +5,7 @@
   width: 100%;
   margin-bottom: 4.375rem;
   color: white;
-  font-size: 0.9375rem;
+  font-size: 1rem;
 
   &__app-logo {
     width: 1.75rem;

react-ui/src/pages/Workspace/components/AssetsManagement/index.less

@@ -29,7 +29,6 @@
     display: flex;
     flex: 1;
     align-items: center;
-    padding: 0 1.25rem;
   }
 
   &__summary {

react-ui/src/pages/Workspace/components/Messages/index.less

@@ -35,16 +35,13 @@
     align-self: center;
     padding: 0.625rem 0;
     border-bottom: 1px dashed rgba(130, 132, 164, 0.18);
+    cursor: pointer;
 
-    &__title {
+    &__content {
       flex: 1;
       margin-right: 0.625rem;
       color: @text-color-secondary;
       font-size: 0.875rem;
-
-      &:hover {
-        color: @primary-color;
-      }
     }
 
     &__time {
@@ -55,7 +52,7 @@
       font-size: 0.8125rem;
     }
 
-    &:hover &__title {
+    &:hover &__content {
       color: @primary-color;
     }
   }

react-ui/src/pages/Workspace/components/Notebooks/index.less

@@ -16,7 +16,7 @@
     width: calc((100% - 1.25rem) / 2);
     padding: 1.25rem;
     background-image: linear-gradient(173.59deg, #e7e8ff 0%, #f7f9fd 20.63%, #f7f9fd 100%);
-    border: 1px solid transparent;
+    border: 1px solid #f7f9fd;
     border-radius: 0.5rem;
     cursor: pointer;
 

react-ui/src/pages/Workspace/components/Search/index.less

@@ -1,5 +1,5 @@
 .workspace-search {
-  padding: 0 170px;
+  padding: 0 10.625rem;
   color: @text-color;
   font-size: 18px;
 

react-ui/src/pages/Workspace/components/Search/index.tsx

@@ -64,7 +64,7 @@ function WorkspaceSearch() {
       <Flex className={styles['workspace-search__try']} align="center" justify="center">
         <div>试一试主题：梅洛 · 庞蒂的“身体现象学”</div>
         <Button
-          icon={<KFIcon type="icon-shuaxin" font={12} />}
+          icon={<KFIcon type="icon-shuaxin1" font={12} style={{ verticalAlign: 1 }} />}
           color="default"
           variant="solid"
           shape="round"

react-ui/src/services/session.ts

@@ -9,6 +9,10 @@ export function getRemoteMenu() {
 }
 
 export function setRemoteMenu(data: any) {
+  data.forEach((item: any) => {
+    // 禁止菜单的tooltips
+    item.disabledTooltip = true;
+  });
   remoteMenu = data;
 }
 

react-ui/src/styles/menu.less

@@ -2,32 +2,26 @@
 .ant-menu-submenu {
   .kf-menu-item {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: flex-start;
-    font-size: @font-size-content;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 15px;
 
-    .anticon.kf-menu-item__default-icon {
+    .anticon.kf-menu-item__icon {
       display: inline !important;
+      width: 26px;
+      height: 26px;
+      line-height: 26px;
       opacity: 1;
     }
 
-    .anticon.kf-menu-item__active-icon {
-      display: none !important;
-      margin-left: 0 !important;
-    }
-  }
-}
-
-.ant-menu-item.ant-menu-item-selected,
-.ant-menu-submenu.ant-menu-submenu-selected {
-  .kf-menu-item {
-    .anticon.kf-menu-item__default-icon {
-      display: none !important;
-    }
-
-    .anticon.kf-menu-item__active-icon {
-      display: inline !important;
-      opacity: 1;
+    &__name {
+      display: block !important;
+      margin: 4px 0 0 !important;
+      line-height: 22px !important;
+      opacity: 1 !important;
     }
   }
 }
@@ -35,26 +29,4 @@
 .ant-menu-submenu .ant-menu-submenu-title:hover,
 .ant-menu-item:hover {
   color: @primary-color !important;
-
-  .kf-menu-item {
-    .anticon.kf-menu-item__default-icon {
-      display: none !important;
-    }
-
-    .anticon.kf-menu-item__active-icon {
-      display: inline !important;
-      opacity: 1;
-    }
-  }
-}
-
-.ant-pro-base-menu-vertical-collapsed {
-  .kf-menu-item {
-    justify-content: center;
-    width: 100%;
-
-    .kf-menu-item__name {
-      display: none !important;
-    }
-  }
 }

react-ui/src/utils/menuRender.tsx

@@ -5,21 +5,18 @@
  */
 
 import KFIcon from '@/components/KFIcon';
+import '@/styles/menu.less';
 import { MenuDataItem } from '@ant-design/pro-components';
 import { Link } from '@umijs/max';
 
 export const menuItemRender = (isSubMenu: boolean) => {
   return (item: MenuDataItem) => {
     const defaultIcon: string = item.icon as string;
-    const activeIcon = defaultIcon + '-active';
     const hasParent = item.pro_layout_parentKeys?.length > 0;
     const childen = (
       <>
         {!hasParent && defaultIcon && (
-          <>
-            <KFIcon type={defaultIcon} font={17} className="kf-menu-item__default-icon" />
-            <KFIcon type={activeIcon} font={17} className="kf-menu-item__active-icon" />
-          </>
+          <KFIcon type={defaultIcon} font={26} className="kf-menu-item__icon" />
         )}
         <span className="kf-menu-item__name">{item.name}</span>
       </>