diff --git a/react-ui/config/routes.ts b/react-ui/config/routes.ts
index 3c01a97c..4f076a9a 100644
--- a/react-ui/config/routes.ts
+++ b/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',
},
],
diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx
index 8069d4af..3a19876f 100644
--- a/react-ui/src/app.tsx
+++ b/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 {children};
},
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',
diff --git a/react-ui/src/components/MenuIconSelector/index.less b/react-ui/src/components/MenuIconSelector/index.less
index 5a64a8d3..372f1e08 100644
--- a/react-ui/src/components/MenuIconSelector/index.less
+++ b/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;
- }
}
}
diff --git a/react-ui/src/components/MenuIconSelector/index.tsx b/react-ui/src/components/MenuIconSelector/index.tsx
index fa38910b..6e731e80 100644
--- a/react-ui/src/components/MenuIconSelector/index.tsx
+++ b/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) => (
onOk(icon.font_class)}
>
-
diff --git a/react-ui/src/global.less b/react-ui/src/global.less
index 0c3a059d..76a414b7 100644
--- a/react-ui/src/global.less
+++ b/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;
diff --git a/react-ui/src/hooks/useRootFontSize.ts b/react-ui/src/hooks/useRootFontSize.ts
index 525dc889..a8887b24 100644
--- a/react-ui/src/hooks/useRootFontSize.ts
+++ b/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;
}
diff --git a/react-ui/src/iconfont/iconfont-menu.js b/react-ui/src/iconfont/iconfont-menu.js
index f527568a..6e58b648 100644
--- a/react-ui/src/iconfont/iconfont-menu.js
+++ b/react-ui/src/iconfont/iconfont-menu.js
@@ -1 +1 @@
-window._iconfont_svg_string_4511326='',(t=>{var a=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var i,h,o,c,e,m=function(a,l){l.parentNode.insertBefore(a,l)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}i=function(){var a,l=document.createElement("div");l.innerHTML=t._iconfont_svg_string_4511326,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?m(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),i()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(o=i,c=t.document,e=!1,n(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,p())})}function p(){e||(e=!0,o())}function n(){try{c.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}p()}})(window);
\ No newline at end of file
+window._iconfont_svg_string_5014610='',(t=>{var a=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var e,o,n,i,c,d=function(a,l){l.parentNode.insertBefore(a,l)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}e=function(){var a,l=document.createElement("div");l.innerHTML=t._iconfont_svg_string_5014610,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?d(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(e,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),e()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(n=e,i=t.document,c=!1,m(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,h())})}function h(){c||(c=!0,n())}function m(){try{i.documentElement.doScroll("left")}catch(a){return void setTimeout(m,50)}h()}})(window);
\ No newline at end of file
diff --git a/react-ui/src/iconfont/iconfont-menu.json b/react-ui/src/iconfont/iconfont-menu.json
index cb25a583..dfe83023 100644
--- a/react-ui/src/iconfont/iconfont-menu.json
+++ b/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
}
]
}
diff --git a/react-ui/src/overrides.less b/react-ui/src/overrides.less
index bfdc938d..2cd44b7a 100644
--- a/react-ui/src/overrides.less
+++ b/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;
}
diff --git a/react-ui/src/pages/Home/components/NavBar/index.less b/react-ui/src/pages/Home/components/NavBar/index.less
index 6641b46a..18def3e5 100644
--- a/react-ui/src/pages/Home/components/NavBar/index.less
+++ b/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;
diff --git a/react-ui/src/pages/Workspace/components/AssetsManagement/index.less b/react-ui/src/pages/Workspace/components/AssetsManagement/index.less
index fde5a36f..689dcb67 100644
--- a/react-ui/src/pages/Workspace/components/AssetsManagement/index.less
+++ b/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 {
diff --git a/react-ui/src/pages/Workspace/components/Messages/index.less b/react-ui/src/pages/Workspace/components/Messages/index.less
index 690cae0e..e7a228d4 100644
--- a/react-ui/src/pages/Workspace/components/Messages/index.less
+++ b/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;
}
}
diff --git a/react-ui/src/pages/Workspace/components/Notebooks/index.less b/react-ui/src/pages/Workspace/components/Notebooks/index.less
index b4c59bc5..f8700f06 100644
--- a/react-ui/src/pages/Workspace/components/Notebooks/index.less
+++ b/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;
diff --git a/react-ui/src/pages/Workspace/components/Search/index.less b/react-ui/src/pages/Workspace/components/Search/index.less
index 9ec0bc1f..30f186d9 100644
--- a/react-ui/src/pages/Workspace/components/Search/index.less
+++ b/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;
diff --git a/react-ui/src/pages/Workspace/components/Search/index.tsx b/react-ui/src/pages/Workspace/components/Search/index.tsx
index fae7ecc0..251b6800 100644
--- a/react-ui/src/pages/Workspace/components/Search/index.tsx
+++ b/react-ui/src/pages/Workspace/components/Search/index.tsx
@@ -64,7 +64,7 @@ function WorkspaceSearch() {
试一试主题：梅洛 · 庞蒂的“身体现象学”
}
+ icon={}
color="default"
variant="solid"
shape="round"
diff --git a/react-ui/src/services/session.ts b/react-ui/src/services/session.ts
index eb74fe23..49e2124d 100644
--- a/react-ui/src/services/session.ts
+++ b/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;
}
diff --git a/react-ui/src/styles/menu.less b/react-ui/src/styles/menu.less
index 02fe0c17..0bfa299a 100644
--- a/react-ui/src/styles/menu.less
+++ b/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;
- }
- }
}
diff --git a/react-ui/src/utils/menuRender.tsx b/react-ui/src/utils/menuRender.tsx
index 7f99beee..afd9625c 100644
--- a/react-ui/src/utils/menuRender.tsx
+++ b/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 && (
- <>
-
-
-
+
)}
{item.name}