diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx
index a8ac8966..66005f50 100644
--- a/react-ui/src/app.tsx
+++ b/react-ui/src/app.tsx
@@ -17,9 +17,10 @@ import {
patchRouteWithRemoteMenus,
setRemoteMenu,
} from './services/session';
+import './styles/menu.less';
export { requestConfig as request } from './requestConfig';
// const isDev = process.env.NODE_ENV === 'development';
-
+import { menuItemRender } from '@/utils/menuRender';
/**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
* */
@@ -139,10 +140,8 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
onClick: () => {
// 点击菜单项，删除所有的页面 state 缓存
removeAllPageCacheState();
+ // console.log('click menu');
},
- // onSelect: (e) => {
- // console.log(e);
- // },
},
...initialState?.settings,
token: {
@@ -150,51 +149,36 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
colorTextMenu: themes['textColor'],
colorTextMenuSelected: themes['primaryColor'],
colorTextMenuActive: themes['primaryColor'],
+ colorTextMenuItemHover: themes['primaryColor'],
colorBgMenuItemSelected: 'rgba(197, 232, 255, 0.8)',
colorMenuBackground: themes['siderBGColor'],
},
},
- // menuItemRender: (itemProps, defaultDom, props) => {
- // console.log('menuItemProps', itemProps);
- // console.log('defaultDom', defaultDom);
- // console.log('props', props);
-
- // const { pathname } = window.location;
- // const isSelected = pathname === itemProps.path;
-
- // // 根据菜单项的状态动态显示不同的 icon
- // const icon = isSelected ? 'icon-developmentEnvironment-icon' : 'icon-kaifahuanjing';
- // return (
- //
- //
- // {itemProps.name}
- //
- // );
- // },
+ menuItemRender: menuItemRender(false),
+ subMenuItemRender: menuItemRender(true),
};
};
export const onRouteChange: RuntimeConfig['onRouteChange'] = async (e) => {
const { location } = e;
const menus = getRemoteMenu();
- console.log('onRouteChange', e);
+ // console.log('onRouteChange', e);
if (menus === null && location.pathname !== PageEnum.LOGIN) {
- console.log('refresh');
history.go(0);
}
};
export const patchRoutes: RuntimeConfig['patchRoutes'] = (e) => {
- console.log('patchRoutes', e);
+ //console.log('patchRoutes', e);
};
export const patchClientRoutes: RuntimeConfig['patchClientRoutes'] = (e) => {
- console.log('patchClientRoutes', e);
+ //console.log('patchClientRoutes', e);
patchRouteWithRemoteMenus(e.routes);
};
export function render(oldRender: () => void) {
- console.log('render');
+ //console.log('render');
const token = getAccessToken();
if (!token || token?.length === 0) {
oldRender();
diff --git a/react-ui/src/overrides.less b/react-ui/src/overrides.less
index 4072038f..61102f12 100644
--- a/react-ui/src/overrides.less
+++ b/react-ui/src/overrides.less
@@ -145,3 +145,11 @@
}
}
}
+
+// 取消 hover 颜色变化
+.ant-menu .ant-menu-title-content {
+ transition: color 0s;
+ a {
+ transition: color 0s;
+ }
+}
diff --git a/react-ui/src/pages/Workspace/components/TotalStatistics/index.less b/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
index 23e4fec2..d8943328 100644
--- a/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
+++ b/react-ui/src/pages/Workspace/components/TotalStatistics/index.less
@@ -26,11 +26,7 @@
left: 0;
width: 79px;
height: 6px;
- background-color: linear-gradient(
- 87.07deg,
- rgba(22, 100, 255, 0.6) 0%,
- rgba(22, 100, 255, 0) 100%
- );
+ background: linear-gradient(87.07deg, rgba(22, 100, 255, 0.6) 0%, rgba(22, 100, 255, 0) 100%);
}
&__count {
diff --git a/react-ui/src/pages/Workspace/index.less b/react-ui/src/pages/Workspace/index.less
index 30b1f1a5..f7f95a24 100644
--- a/react-ui/src/pages/Workspace/index.less
+++ b/react-ui/src/pages/Workspace/index.less
@@ -2,7 +2,7 @@
height: 100%;
padding: 20px 30px 10px;
overflow-y: auto;
- background-color: linear-gradient(#ecf2fe, #f9fafb);
+ background: linear-gradient(#ecf2fe, #f9fafb);
&__overview {
gap: 15px;
diff --git a/react-ui/src/styles/menu.less b/react-ui/src/styles/menu.less
new file mode 100644
index 00000000..29e3ed61
--- /dev/null
+++ b/react-ui/src/styles/menu.less
@@ -0,0 +1,59 @@
+.ant-menu-item,
+.ant-menu-submenu {
+ .kf-menu-item {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 16px;
+
+ .anticon.kf-menu-item__default-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+
+ .anticon.kf-menu-item__active-icon {
+ display: none !important;
+ margin-left: 0 !important;
+ }
+
+ &:hover {
+ .anticon.kf-menu-item__default-icon {
+ display: none !important;
+ }
+ .anticon.kf-menu-item__active-icon {
+ display: inline !important;
+ opacity: 1;
+ }
+ }
+ }
+}
+
+.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;
+ }
+ }
+}
+
+.ant-pro-base-menu-vertical-collapsed {
+ .kf-menu-item {
+ justify-content: center;
+
+ .kf-menu-item__name {
+ display: none !important;
+ }
+ }
+}
+
+.ant-menu-submenu {
+ .ant-menu-submenu-title:hover {
+ color: #1664ff !important;
+ }
+}
diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less
index bb9f34aa..d97b3ef8 100644
--- a/react-ui/src/styles/theme.less
+++ b/react-ui/src/styles/theme.less
@@ -44,7 +44,6 @@
@red: red(@color);
@green: green(@color);
@blue: blue(@color);
-
@result: rgba(@red, @green, @blue, @alpha);
}
diff --git a/react-ui/src/utils/menuRender.tsx b/react-ui/src/utils/menuRender.tsx
new file mode 100644
index 00000000..fc0b70dd
--- /dev/null
+++ b/react-ui/src/utils/menuRender.tsx
@@ -0,0 +1,31 @@
+import KFIcon from '@/components/KFIcon';
+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}
+
+ );
+ if (isSubMenu) {
+ return {childen}
;
+ } else {
+ return (
+
+ {childen}
+
+ );
+ }
+ };
+};