+
);
diff --git a/src/components/SvgIcon/index.tsx b/src/components/SvgIcon/index.tsx
index b6134d3..dd5ee2f 100644
--- a/src/components/SvgIcon/index.tsx
+++ b/src/components/SvgIcon/index.tsx
@@ -12,7 +12,7 @@ const SvgIcon = memo((props: SvgIconType) => {
const { prefix, name, color, className } = props;
return (
-
diff --git a/src/hooks/useRouteList.tsx b/src/hooks/useRouteList.tsx
index 36f2d2c..a1ca8cd 100644
--- a/src/hooks/useRouteList.tsx
+++ b/src/hooks/useRouteList.tsx
@@ -1,13 +1,11 @@
-import { lazy } from 'react';
-import type { RouteObject } from 'react-router-dom';
-import { redirect } from 'react-router-dom';
+import { ErrorElement } from '@/router/lazy/whiteList';
import { Typography } from 'antd';
+import { redirect } from 'react-router';
import type { MenuItem, RouteList } from '@/router/route';
+import type { RouteObject } from 'react-router';
const { Text } = Typography;
-const ErrorElement = lazy(() => import('@/views/core/error/ErrorElement'));
-
export const useRouteList = () => {
function handleRouteList(list: RouteList[]): RouteObject[] {
return list.map((i: RouteList) => {
diff --git a/src/hooks/web/antCharts/useChartsConfig.tsx b/src/hooks/web/antCharts/useChartsConfig.tsx
index 523757f..4840932 100644
--- a/src/hooks/web/antCharts/useChartsConfig.tsx
+++ b/src/hooks/web/antCharts/useChartsConfig.tsx
@@ -1,7 +1,7 @@
-import themeChart from './theme.json';
import { useAppSelector } from '@/store/hooks';
+import themeChart from './theme.json';
export const useChartsConfig = () => {
- const themeMode = useAppSelector((state) => state.app.themeMode);
+ const themeMode = useAppSelector(state => state.app.themeMode);
const theme = themeMode === 'dark' ? 'dark' : themeChart;
diff --git a/src/hooks/web/useMessage.tsx b/src/hooks/web/useMessage.tsx
index 0852ff2..84ca397 100644
--- a/src/hooks/web/useMessage.tsx
+++ b/src/hooks/web/useMessage.tsx
@@ -1,7 +1,7 @@
-import type { ModalFuncProps } from 'antd';
+import { getIntlText } from '@/locales';
import { message, Modal } from 'antd';
-import { getIntlText } from '@/locales';
+import type { ModalFuncProps } from 'antd';
function createElMessageBox(messageg: string, title: string, options: ModalFuncProps) {
Modal.error({ title, content: messageg, ...options });
diff --git a/src/hooks/web/useRefresh.tsx b/src/hooks/web/useRefresh.tsx
deleted file mode 100644
index b88e350..0000000
--- a/src/hooks/web/useRefresh.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-
-export const useRefresh = () => {
- const location = useLocation();
- const navigate = useNavigate();
-
- const refresh = (path?: string) => {
- const refreshUrl = path ? path : location.pathname + location.search;
- navigate(`/refresh${refreshUrl}`, { replace: true });
- };
-
- return {
- refresh,
- };
-};
diff --git a/src/layout/Authority/index.tsx b/src/layout/Authority/index.tsx
index 60535f1..8991f0f 100644
--- a/src/layout/Authority/index.tsx
+++ b/src/layout/Authority/index.tsx
@@ -1,12 +1,12 @@
-import { Navigate } from 'react-router-dom';
import { useAppSelector } from '@/store/hooks';
+import { Navigate } from 'react-router';
interface AuthorityType {
children: React.ReactNode;
}
const Authority = ({ children }: AuthorityType) => {
- const user = useAppSelector((state) => state.user);
+ const user = useAppSelector(state => state.user);
if (!user?.power) return
;
diff --git a/src/layout/components/AppAccount/index.tsx b/src/layout/components/AppAccount/index.tsx
index 1a2cd1b..14a58f7 100644
--- a/src/layout/components/AppAccount/index.tsx
+++ b/src/layout/components/AppAccount/index.tsx
@@ -1,11 +1,11 @@
-import type { MenuProps } from 'antd';
-import { Dropdown, Image } from 'antd';
-import { useNavigate } from 'react-router-dom';
-import { getAccountStyle } from './style';
import avatar from '@/assets/avatar.png';
-import { removeStorage } from '@/utils/storage';
-import { setSignOut } from '@/store/modules/user';
import { useAppDispatch } from '@/store/hooks';
+import { setSignOut } from '@/store/modules/user';
+import { removeStorage } from '@/utils/storage';
+import { Dropdown, Image } from 'antd';
+import { useNavigate } from 'react-router';
+import type { MenuProps } from 'antd';
+import { getAccountStyle } from './style';
const AppAccount = () => {
const { AccountDiv } = getAccountStyle();
@@ -21,7 +21,7 @@ const AppAccount = () => {
},
];
- const memuChange: MenuProps['onClick'] = (_e) => {
+ const memuChange: MenuProps['onClick'] = _e => {
removeStorage('userInfo');
dispatch(setSignOut());
@@ -38,7 +38,9 @@ const AppAccount = () => {
placement="bottom"
arrow
>
-
+
+
+
);
diff --git a/src/layout/components/AppAccount/style.tsx b/src/layout/components/AppAccount/style.tsx
index 8d23914..038d526 100644
--- a/src/layout/components/AppAccount/style.tsx
+++ b/src/layout/components/AppAccount/style.tsx
@@ -1,14 +1,19 @@
-import type { CSSObject } from '@emotion/react';
import styled from '@emotion/styled';
+import type { CSSObject } from '@emotion/react';
const getAccountDivStyle = (): CSSObject => {
return {
display: 'flex',
alignItems: 'center',
- ['.wave']: {
+ '.wave': {
width: 30,
height: 30,
borderRadius: '50%',
+ overflow: 'hidden',
+
+ '.ant-image': {
+ display: 'flex',
+ },
},
};
};
diff --git a/src/layout/components/AppLogo/index.tsx b/src/layout/components/AppLogo/index.tsx
index a1c0a1f..e6e7e50 100644
--- a/src/layout/components/AppLogo/index.tsx
+++ b/src/layout/components/AppLogo/index.tsx
@@ -1,6 +1,6 @@
-import { memo } from 'react';
-import { Image, theme } from 'antd';
import logo from '@/assets/logo.png';
+import { Image, theme } from 'antd';
+import { memo } from 'react';
import './index.less';
const AppLogo = memo(() => {
diff --git a/src/layout/components/AppMain/AppMain.tsx b/src/layout/components/AppMain/AppMain.tsx
index 3f3cce7..83d71da 100644
--- a/src/layout/components/AppMain/AppMain.tsx
+++ b/src/layout/components/AppMain/AppMain.tsx
@@ -1,28 +1,32 @@
+import LayoutSpin from '@/components/LayoutSpin';
import { Layout } from 'antd';
-import { memo, Suspense } from 'react';
-import { Outlet } from 'react-router-dom';
-import { KeepAlive } from './KeepAlive';
+import { KeepAlive, useKeepAliveRef } from 'keepalive-for-react';
+import { memo, Suspense, useMemo } from 'react';
+import { useLocation, useOutlet } from 'react-router';
import { getAppMainStyle } from './style';
import TabsPage from './TabsPage';
-import LayoutSpin from '@/components/LayoutSpin';
const { Content } = Layout;
const AppMain = memo(() => {
- const isKeepAlive = import.meta.env.VITE_KEY_ALIVE === 'TRUE';
+ const location = useLocation();
const maxLen = 10;
+ const aliveRef = useKeepAliveRef();
+
+ const activeCacheKey = useMemo(() => {
+ return location.pathname + location.search;
+ }, [location.pathname, location.search]);
+
+ const outlet = useOutlet();
+
return (
-
-
- {isKeepAlive ? (
-
- ) : (
- }>
-
-
- )}
-
+
+
+
+ }>{outlet}
+
+
);
});
diff --git a/src/layout/components/AppMain/KeepAlive/index.tsx b/src/layout/components/AppMain/KeepAlive/index.tsx
index 002b3a1..a528b08 100644
--- a/src/layout/components/AppMain/KeepAlive/index.tsx
+++ b/src/layout/components/AppMain/KeepAlive/index.tsx
@@ -1,9 +1,43 @@
-import type { RefObject, ReactNode } from 'react';
-import React, { Suspense, memo, useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { useLocation, useOutlet, useParams } from 'react-router-dom';
-import { useAppSelector } from '@/store/hooks';
import LayoutSpin from '@/components/LayoutSpin';
+import { useAppSelector } from '@/store/hooks';
+import React, { memo, Suspense, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useLocation, useOutlet, useParams } from 'react-router';
+import type { ReactNode, RefObject } from 'react';
+
+export interface ComponentReactElement {
+ children?: ReactNode | ReactNode[];
+}
+
+interface ComponentProps extends ComponentReactElement {
+ active: boolean;
+ name: string;
+ renderDiv: RefObject
;
+}
+
+export const Component: React.FC = ({ active, children, name, renderDiv }) => {
+ const [targetElement] = useState(() => document.createElement('div'));
+ const activatedRef = useRef(false);
+ activatedRef.current = activatedRef.current || active;
+
+ useEffect(() => {
+ if (active) {
+ renderDiv.current?.appendChild(targetElement);
+ } else {
+ try {
+ renderDiv.current?.removeChild(targetElement);
+ } catch (e) {
+ console.error(e);
+ }
+ }
+ }, [active, name, renderDiv, targetElement]);
+
+ useEffect(() => {
+ targetElement.setAttribute('id', name);
+ }, [name, targetElement]);
+
+ return }>{activatedRef.current && createPortal(children, targetElement)};
+};
interface Props extends ComponentReactElement {
maxLen?: number;
@@ -13,29 +47,25 @@ export const KeepAlive = memo(({ maxLen = 10 }: Props) => {
const location = useLocation();
const params = useParams();
const activeName = location.pathname + location.search;
- const multiTabs = useAppSelector((state) => state.route.multiTabs);
+ const multiTabs = useAppSelector(state => state.route.multiTabs);
const containerRef = useRef(null);
- const [cacheReactNodes, setCacheReactNodes] = useState>(
- [],
- );
+ const [cacheReactNodes, setCacheReactNodes] = useState>([]);
useEffect(() => {
if (!activeName) {
return;
}
- const include = multiTabs.map((i) => i.key);
- setCacheReactNodes((reactNodes) => {
- reactNodes = reactNodes.filter((i) => !i.name.startsWith('/refresh'));
+ const include = multiTabs.map(i => i.key);
+ setCacheReactNodes(reactNodes => {
+ reactNodes = reactNodes.filter(i => !i.name.startsWith('/refresh'));
if (location.pathname.startsWith('/refresh')) {
- const reactIndex = reactNodes.findIndex(
- (res) => res.name === `/${params['*']}${location.search}`,
- );
+ const reactIndex = reactNodes.findIndex(res => res.name === `/${params['*']}${location.search}`);
if (reactIndex !== -1) reactNodes.splice(reactIndex, 1);
reactNodes.push({
name: activeName,
- ele: ele,
+ ele,
});
return reactNodes;
}
@@ -45,17 +75,17 @@ export const KeepAlive = memo(({ maxLen = 10 }: Props) => {
reactNodes.splice(0, 1);
}
// 添加
- const reactNode = reactNodes.find((res) => res.name === activeName);
+ const reactNode = reactNodes.find(res => res.name === activeName);
if (!reactNode) {
reactNodes.push({
name: activeName,
- ele: ele,
+ ele,
});
}
// 缓存路由列表和标签页列表同步
if (include) {
- return reactNodes.filter((i) => include.includes(i.name));
+ return reactNodes.filter(i => include.includes(i.name));
}
return reactNodes;
});
@@ -64,14 +94,9 @@ export const KeepAlive = memo(({ maxLen = 10 }: Props) => {
return (
<>
- {cacheReactNodes.map((i) => {
+ {cacheReactNodes.map(i => {
return (
-
+
{i.ele}
);
@@ -79,40 +104,3 @@ export const KeepAlive = memo(({ maxLen = 10 }: Props) => {
);
});
-
-export interface ComponentReactElement {
- children?: ReactNode | ReactNode[];
-}
-
-interface ComponentProps extends ComponentReactElement {
- active: boolean;
- name: string;
- renderDiv: RefObject;
-}
-
-export const Component: React.FC = ({ active, children, name, renderDiv }) => {
- const [targetElement] = useState(() => document.createElement('div'));
- const activatedRef = useRef(false);
- activatedRef.current = activatedRef.current || active;
-
- useEffect(() => {
- if (active) {
- renderDiv.current?.appendChild(targetElement);
- } else {
- try {
- renderDiv.current?.removeChild(targetElement);
- // eslint-disable-next-line no-empty
- } catch (e) {}
- }
- }, [active, name, renderDiv, targetElement]);
-
- useEffect(() => {
- targetElement.setAttribute('id', name);
- }, [name, targetElement]);
-
- return (
- }>
- {activatedRef.current && createPortal(children, targetElement)}
-
- );
-};
diff --git a/src/layout/components/AppMain/TabsPage/components/TabsItemLabel.tsx b/src/layout/components/AppMain/TabsPage/components/TabsItemLabel.tsx
index 6902229..105fbf0 100644
--- a/src/layout/components/AppMain/TabsPage/components/TabsItemLabel.tsx
+++ b/src/layout/components/AppMain/TabsPage/components/TabsItemLabel.tsx
@@ -1,11 +1,11 @@
-import type { MenuProps } from 'antd';
import { Dropdown } from 'antd';
-import { useState, useMemo } from 'react';
-import type { CSSProperties, ReactNode } from 'react';
+import { useMemo, useState } from 'react';
import type { Interpolation, Theme } from '@emotion/react';
-import type { RightClickTags } from '../hooks/useTabsState';
-import { useTabsState } from '../hooks/useTabsState';
+import type { MenuProps } from 'antd';
+import type { CSSProperties, ReactNode } from 'react';
import { useTabsChange } from '../hooks/useTabsChange';
+import { useTabsState } from '../hooks/useTabsState';
+import type { RightClickTags } from '../hooks/useTabsState';
interface TabsItemLabelProps {
pathKey: string;
@@ -16,33 +16,33 @@ interface TabsItemLabelProps {
css?: Interpolation;
}
-const TabsItemLabel = (props: TabsItemLabelProps) => {
+const TabsItemLabel = ({ pathKey, eventType, className, style, css, children }: TabsItemLabelProps) => {
const [open, setOpen] = useState(false);
- const { menuItems } = useTabsState(props.pathKey, open);
+ const { menuItems } = useTabsState(pathKey, open);
const { onTabsDropdownChange } = useTabsChange();
- const menuClick: MenuProps['onClick'] = (e) => {
+ const menuClick: MenuProps['onClick'] = e => {
e.domEvent.stopPropagation();
- onTabsDropdownChange(e.key as RightClickTags['code'], props.pathKey);
+ onTabsDropdownChange(e.key as RightClickTags['code'], pathKey);
};
const contentProps: React.DOMAttributes = useMemo(() => {
- if (props.eventType === 'click') {
+ if (eventType === 'click') {
return {
- onClick: (e) => {
+ onClick: e => {
e.preventDefault();
setOpen(!open);
},
};
} else {
return {
- onContextMenu: (e) => {
+ onContextMenu: e => {
e.preventDefault();
setOpen(!open);
},
};
}
- }, [props.eventType]);
+ }, [eventType]);
return (
{
items: menuItems,
onClick: menuClick,
}}
- onOpenChange={(visible) => !visible && setOpen(visible)}
+ onOpenChange={visible => !visible && setOpen(visible)}
>
-
- {props.children}
+
+ {children}
);
diff --git a/src/layout/components/AppMain/TabsPage/hooks/useTabsChange.ts b/src/layout/components/AppMain/TabsPage/hooks/useTabsChange.ts
index 7a8651d..ac207b1 100644
--- a/src/layout/components/AppMain/TabsPage/hooks/useTabsChange.ts
+++ b/src/layout/components/AppMain/TabsPage/hooks/useTabsChange.ts
@@ -1,15 +1,16 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-import type { RightClickTags } from './useTabsState';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { setStoreMultiTabs, type MultiTabsType } from '@/store/modules/route';
-import { useRefresh } from '@/hooks/web/useRefresh';
+import { type MultiTabsType, setStoreMultiTabs } from '@/store/modules/route';
+import { useKeepAliveContext } from 'keepalive-for-react';
+import { useLocation, useNavigate } from 'react-router';
+import type { RightClickTags } from './useTabsState';
export const useTabsChange = () => {
- const multiTabs = useAppSelector((state) => state.route.multiTabs);
+ const multiTabs = useAppSelector(state => state.route.multiTabs);
const location = useLocation();
const navigate = useNavigate();
const dispatch = useAppDispatch();
- const { refresh } = useRefresh();
+ // const { refresh } = useRefresh();
+ const { refresh, destroy } = useKeepAliveContext();
const handleTabsList = (pathName: string, type: 'add' | 'delete') => {
dispatch(
@@ -33,7 +34,7 @@ export const useTabsChange = () => {
// 关闭当前导航
const removeTab = (pathKey: string) => {
- const item = multiTabs.findIndex((i) => i.key === pathKey);
+ const item = multiTabs.findIndex(i => i.key === pathKey);
const tabsLength = multiTabs.length;
let value: MultiTabsType;
@@ -46,22 +47,27 @@ export const useTabsChange = () => {
navigate(value.key);
}
+ destroy(pathKey);
handleTabsList(pathKey, 'delete');
};
const closeTabsRoute = (pathKey: string, type: 'other' | 'left' | 'right') => {
- const selectItemIndex = multiTabs.findIndex((i) => i.key === pathKey);
+ const selectItemIndex = multiTabs.findIndex(i => i.key === pathKey);
const mapList = multiTabs.filter((i, index) => {
if (i.key !== pathKey && type === 'other') return true;
else if (index < selectItemIndex && type === 'left') return true;
else if (index > selectItemIndex && type === 'right') return true;
return false;
});
- if (mapList.find((i) => i.key === getCurrentPathname())) {
+ if (mapList.find(i => i.key === getCurrentPathname())) {
const { key } = multiTabs[selectItemIndex];
navigate(key);
}
- mapList.forEach((i) => i.key && handleTabsList(i.key, 'delete'));
+
+ mapList.forEach(i => {
+ destroy(i.key);
+ i.key && handleTabsList(i.key, 'delete');
+ });
};
const onTabsDropdownChange = (code: RightClickTags['code'], pathKey: string) => {
@@ -86,5 +92,5 @@ export const useTabsChange = () => {
}
};
- return { onTabsDropdownChange, addRouteTabs, removeTab };
+ return { onTabsDropdownChange, addRouteTabs, removeTab, refresh };
};
diff --git a/src/layout/components/AppMain/TabsPage/hooks/useTabsState.tsx b/src/layout/components/AppMain/TabsPage/hooks/useTabsState.tsx
index 94c6f74..6249e1a 100644
--- a/src/layout/components/AppMain/TabsPage/hooks/useTabsState.tsx
+++ b/src/layout/components/AppMain/TabsPage/hooks/useTabsState.tsx
@@ -1,5 +1,5 @@
-import { useMemo, useState } from 'react';
import { useAppSelector } from '@/store/hooks';
+import { useMemo, useState } from 'react';
export interface RightClickTags {
text: string;
@@ -8,7 +8,7 @@ export interface RightClickTags {
}
export const useTabsState = (pathKey: string, openDropdown: boolean) => {
- const multiTabs = useAppSelector((state) => state.route.multiTabs);
+ const multiTabs = useAppSelector(state => state.route.multiTabs);
const [rightClickTags] = useState
([
{
@@ -53,17 +53,17 @@ export const useTabsState = (pathKey: string, openDropdown: boolean) => {
};
const rightClickTagsList = useMemo(() => {
- const multFindIndex = multiTabs.findIndex((i) => i.key === pathKey);
+ const multFindIndex = multiTabs.findIndex(i => i.key === pathKey);
const multlength = multiTabs.length;
- return rightClickTags.map((item) => ({
+ return rightClickTags.map(item => ({
...item,
disabled: getDisabledStatus(item.code, multFindIndex, multlength),
}));
}, [openDropdown]);
const menuItems = useMemo(() => {
- return rightClickTagsList.map((i) => {
+ return rightClickTagsList.map(i => {
return {
label: i.text,
key: i.code,
diff --git a/src/layout/components/AppMain/TabsPage/index.tsx b/src/layout/components/AppMain/TabsPage/index.tsx
index 6c644c6..d7d5c9f 100644
--- a/src/layout/components/AppMain/TabsPage/index.tsx
+++ b/src/layout/components/AppMain/TabsPage/index.tsx
@@ -1,17 +1,16 @@
-import type { TabsProps } from 'antd';
+import { FormattedMessage } from '@/components/FormattedMessage';
+import { useRouteList } from '@/hooks/useRouteList';
+import { defaultRoute } from '@/router/modules';
+import { findRouteByPath } from '@/router/utils';
+import { useAppSelector } from '@/store/hooks';
+import { CaretDownFilled, ReloadOutlined } from '@ant-design/icons';
import { Tabs, theme } from 'antd';
import { memo, useEffect, useMemo } from 'react';
-import { useNavigate, useLocation, useMatch } from 'react-router-dom';
-import { CaretDownFilled, ReloadOutlined } from '@ant-design/icons';
-import { getTabsStyle } from './style';
+import { useLocation, useMatch, useNavigate } from 'react-router';
+import type { TabsProps } from 'antd';
import TabsItemLabel from './components/TabsItemLabel';
import { useTabsChange } from './hooks/useTabsChange';
-import { useAppSelector } from '@/store/hooks';
-import { findRouteByPath } from '@/router/utils';
-import { defaultRoute } from '@/router/modules';
-import { useRefresh } from '@/hooks/web/useRefresh';
-import { FormattedMessage } from '@/locales';
-import { useRouteList } from '@/hooks/useRouteList';
+import { getTabsStyle } from './style';
interface Props {
maxLen?: number;
@@ -23,15 +22,14 @@ const TabsPage = memo((_props: Props) => {
const mark = useMatch(location.pathname);
const { routeListToMenu } = useRouteList();
const menuList = routeListToMenu(defaultRoute);
- const asyncRouter = useAppSelector((state) => state.route.asyncRouter);
- const multiTabs = useAppSelector((state) => state.route.multiTabs);
- const { addRouteTabs, removeTab } = useTabsChange();
- const { refresh } = useRefresh();
+ const asyncRouter = useAppSelector(state => state.route.asyncRouter);
+ const multiTabs = useAppSelector(state => state.route.multiTabs);
+ const { addRouteTabs, removeTab, refresh } = useTabsChange();
const thme = theme.useToken();
const tabsItem = useMemo(() => {
- return multiTabs.map((i) => {
+ return multiTabs.map(i => {
let routeBy = null;
if (!i.label) routeBy = findRouteByPath(i.key, menuList);
return {
@@ -39,7 +37,7 @@ const TabsPage = memo((_props: Props) => {
label: (
- {i.localeLabel ? FormattedMessage({ id: i.localeLabel }) : ''}
+ {i.localeLabel ? : ''}
{i.label || routeBy?.label}
@@ -73,7 +71,7 @@ const TabsPage = memo((_props: Props) => {
size="small"
activeKey={location.pathname + location.search}
type={tabsItem.length > 1 ? 'editable-card' : 'card'}
- onChange={(key) => navigate(key)}
+ onChange={key => navigate(key)}
onEdit={onEdit}
tabBarExtraContent={{
right: (
diff --git a/src/layout/components/AppMain/TabsPage/style.tsx b/src/layout/components/AppMain/TabsPage/style.tsx
index 935ea29..bf04f09 100644
--- a/src/layout/components/AppMain/TabsPage/style.tsx
+++ b/src/layout/components/AppMain/TabsPage/style.tsx
@@ -3,37 +3,37 @@ import type { GlobalToken } from 'antd';
export const getTabsStyle = (token: GlobalToken): CSSObject => {
return {
- ['& .ant-tabs-nav::before']: {
+ '& .ant-tabs-nav::before': {
borderBottom: `1px solid ${token.colorBorder}`,
},
- ['& .ant-tabs-nav .ant-tabs-tab']: {
+ '& .ant-tabs-nav .ant-tabs-tab': {
padding: 0,
paddingRight: token.padding,
border: `1px solid ${token.colorBorder}`,
- ['.tabs-tab-label']: {
+ '.tabs-tab-label': {
padding: `${token.paddingContentVerticalSM}px 0 ${token.paddingContentVerticalSM}px ${token.paddingContentVerticalLG}px`,
},
},
- ['&.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab']: {
+ '&.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab': {
padding: 0,
paddingRight: token.padding,
- ['.tabs-tab-label']: {
+ '.tabs-tab-label': {
padding: `${token.paddingContentVerticalSM - 2}px 0 ${
token.paddingContentVerticalSM - 2
}px ${token.paddingContentVerticalLG}px`,
},
},
- ['& .ant-tabs-nav .tabs-right-content']: {
+ '& .ant-tabs-nav .tabs-right-content': {
display: 'flex',
},
- ['& .ant-tabs-nav .tabs-right-content .right-down-fukked']: {
+ '& .ant-tabs-nav .tabs-right-content .right-down-fukked': {
borderLeft: `1px solid ${token.colorBorder}`,
borderBottom: 'none',
borderTop: 'none',
cursor: 'pointer',
padding: `${token.paddingContentVerticalSM}px ${token.padding}px`,
},
- ['&.ant-tabs-small > .ant-tabs-nav .tabs-right-content .right-down-fukked']: {
+ '&.ant-tabs-small > .ant-tabs-nav .tabs-right-content .right-down-fukked': {
padding: `${token.paddingContentVerticalSM - 2}px ${token.paddingContentVertical}px`,
},
};
diff --git a/src/layout/components/AppMain/style.tsx b/src/layout/components/AppMain/style.tsx
index d796a38..8253bba 100644
--- a/src/layout/components/AppMain/style.tsx
+++ b/src/layout/components/AppMain/style.tsx
@@ -4,7 +4,7 @@ export const getAppMainStyle = (): CSSObject => {
return {
display: 'flex',
flexDirection: 'column',
- ['.main-content']: {
+ '.main-content': {
padding: 12,
height: '100%',
overflowY: 'auto',
diff --git a/src/layout/components/Navbart/index.tsx b/src/layout/components/Navbart/index.tsx
index 10c1337..09da473 100644
--- a/src/layout/components/Navbart/index.tsx
+++ b/src/layout/components/Navbart/index.tsx
@@ -1,24 +1,24 @@
+import AppLocale from '@/components/AppLocale';
+import AppTheme from '@/components/AppTheme';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setAppCollapsed } from '@/store/modules/app';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { useResponsive } from 'ahooks';
import { Layout, theme } from 'antd';
-import './index.less';
import { memo } from 'react';
-import { useResponsive } from 'ahooks';
import { shallowEqual } from 'react-redux';
+import AppAccount from '../AppAccount';
+import AppLogo from '../AppLogo';
import Setting from '../Setting';
import NavSidebar from '../Sidebar/NavSidebar';
-import AppLogo from '../AppLogo';
-import AppAccount from '../AppAccount';
-import AppLocale from '@/components/AppLocale';
-import AppTheme from '@/components/AppTheme';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { setAppCollapsed } from '@/store/modules/app';
+import './index.less';
const { Header } = Layout;
const Navbart = memo(() => {
const dispatch = useAppDispatch();
const { collapsed, sidebarMode } = useAppSelector(
- (state) => ({
+ state => ({
collapsed: state.app.collapsed,
sidebarMode: state.app.sidebarMode,
}),
@@ -54,7 +54,7 @@ const Navbart = memo(() => {
- {sidebarMode !== 'vertical' && responsive.sm ? : <>}
+ {sidebarMode !== 'vertical' && responsive.sm ? : null}
diff --git a/src/layout/components/Setting/ThemeSettings/index.tsx b/src/layout/components/Setting/ThemeSettings/index.tsx
index 3e2bea7..9a8baf3 100644
--- a/src/layout/components/Setting/ThemeSettings/index.tsx
+++ b/src/layout/components/Setting/ThemeSettings/index.tsx
@@ -1,15 +1,15 @@
-import { memo } from 'react';
+import { useTransformTheme } from '@/hooks/useTransformTheme';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setAppColor } from '@/store/modules/app';
import { CheckOutlined } from '@ant-design/icons';
import { Switch, theme } from 'antd';
+import { memo } from 'react';
import { getThemeSettingsStyle } from './style';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { setAppColor } from '@/store/modules/app';
-import { useTransformTheme } from '@/hooks/useTransformTheme';
const ThemeSettings = memo(() => {
const dispatch = useAppDispatch();
const then = theme.useToken();
- const color = useAppSelector((state) => state.app.color);
+ const color = useAppSelector(state => state.app.color);
const { themeHtmlClassName } = useTransformTheme();
const colorList = ['#722ed1', '#eb2f96', '#52c41a', '#13c2c2', '#fadb14', '#fa541c', '#f5222d'];
@@ -19,7 +19,7 @@ const ThemeSettings = memo(() => {
return (
- {colorList.map((i) => {
+ {colorList.map(i => {
return (
{
灰色模式
- themeHtmlClassName('html-grey', e)} />
+ themeHtmlClassName('html-grey', e)} />
色弱模式
- themeHtmlClassName('html-weakness', e)} />
+ themeHtmlClassName('html-weakness', e)} />
);
diff --git a/src/layout/components/Setting/ThemeSettings/style.tsx b/src/layout/components/Setting/ThemeSettings/style.tsx
index 20de699..ff63579 100644
--- a/src/layout/components/Setting/ThemeSettings/style.tsx
+++ b/src/layout/components/Setting/ThemeSettings/style.tsx
@@ -1,14 +1,14 @@
+import styled from '@emotion/styled';
import type { CSSObject } from '@emotion/react';
import type { GlobalToken } from 'antd/es/theme/interface';
-import styled from '@emotion/styled';
const getColorListStyle = (): CSSObject => {
return {
- ['.color-list']: {
+ '.color-list': {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
- ['.color-list-item']: {
+ '.color-list-item': {
width: 20,
height: 20,
display: 'flex',
@@ -21,7 +21,7 @@ const getColorListStyle = (): CSSObject => {
const getOptions = (token: GlobalToken): CSSObject => {
return {
- ['.options']: {
+ '.options': {
marginTop: token.margin,
display: 'flex',
alignItems: 'center',
diff --git a/src/layout/components/Setting/index.tsx b/src/layout/components/Setting/index.tsx
index 9af8380..1e5e0de 100644
--- a/src/layout/components/Setting/index.tsx
+++ b/src/layout/components/Setting/index.tsx
@@ -1,19 +1,19 @@
+import { useLocale } from '@/locales';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setAppSidebarMode } from '@/store/modules/app';
import { SettingOutlined } from '@ant-design/icons';
+
import { Divider, Drawer, theme, Tooltip } from 'antd';
-import { memo, useState } from 'react';
import classNames from 'classnames';
-
-import ThemeSettings from './ThemeSettings';
-import { getSidebarMode } from './style';
-import { useLocale } from '@/locales';
+import { memo, useState } from 'react';
import type { AppConfigMode } from '@/store/modules/app';
-import { setAppSidebarMode } from '@/store/modules/app';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { getSidebarMode } from './style';
+import ThemeSettings from './ThemeSettings';
const Setting = memo(() => {
const [drawerOpen, setDrawerOpen] = useState
(false);
const dispatch = useAppDispatch();
- const sidebarMode = useAppSelector((state) => state.app.sidebarMode);
+ const sidebarMode = useAppSelector(state => state.app.sidebarMode);
const thme = theme.useToken();
@@ -49,7 +49,7 @@ const Setting = memo(() => {
{intl.formatMessage({ id: 'layout.setting.layoutSettings' })}
- {sidebarSeting.map((i) => {
+ {sidebarSeting.map(i => {
return (
{
return {
padding: `0 ${token.paddingSM}px`,
color: token.colorText,
- ['.sidebar_seting']: {
+ '.sidebar_seting': {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
- ['.sidebar_mode']: {
+ '.sidebar_mode': {
position: 'relative',
width: '80px',
height: '60px',
@@ -17,15 +17,15 @@ export const getSidebarMode = (token: GlobalToken): CSSObject => {
borderRadius: 5,
boxShadow: '0 1px 2.5px 0 rgb(0 0 0 / 18%)',
overflow: 'hidden',
- ['&:nth-of-type(1)']: {
- ['div']: {
- ['&:nth-of-type(1)']: {
+ '&:nth-of-type(1)': {
+ div: {
+ '&:nth-of-type(1)': {
width: '30%',
height: '100%',
background: token.colorPrimary,
},
- ['&:nth-of-type(2)']: {
+ '&:nth-of-type(2)': {
position: 'absolute',
top: 0,
right: 0,
@@ -36,9 +36,9 @@ export const getSidebarMode = (token: GlobalToken): CSSObject => {
},
},
},
- ['&:nth-of-type(2)']: {
- ['div']: {
- ['&:nth-of-type(1)']: {
+ '&:nth-of-type(2)': {
+ div: {
+ '&:nth-of-type(1)': {
width: '100%',
height: '30%',
boxShadow: '0 0 1px #888',
@@ -46,15 +46,15 @@ export const getSidebarMode = (token: GlobalToken): CSSObject => {
},
},
},
- ['&:nth-of-type(3)']: {
- ['div']: {
- ['&:nth-of-type(1)']: {
+ '&:nth-of-type(3)': {
+ div: {
+ '&:nth-of-type(1)': {
width: '30%',
height: '100%',
background: '#fff',
},
- ['&:nth-of-type(2)']: {
+ '&:nth-of-type(2)': {
position: 'absolute',
top: 0,
right: 0,
@@ -66,7 +66,7 @@ export const getSidebarMode = (token: GlobalToken): CSSObject => {
},
},
},
- ['.sidebar_mode-select']: {
+ '.sidebar_mode-select': {
border: `2px solid ${token.colorPrimary}`,
},
},
diff --git a/src/layout/components/Sidebar/NavSidebar/index.tsx b/src/layout/components/Sidebar/NavSidebar/index.tsx
index eb63614..cf2eb19 100644
--- a/src/layout/components/Sidebar/NavSidebar/index.tsx
+++ b/src/layout/components/Sidebar/NavSidebar/index.tsx
@@ -1,20 +1,20 @@
-import type { MenuProps } from 'antd';
+import { getParentPaths } from '@/router/utils';
+import { useAppSelector } from '@/store/hooks';
import { Menu } from 'antd';
import { memo, useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
+import type { MenuProps } from 'antd';
import { useMenuList } from '../hooks/useMenuList';
-import { getParentPaths } from '@/router/utils';
-import { useAppSelector } from '@/store/hooks';
const NavSidebar = memo(() => {
const [openKeys, setOpenKeys] = useState
([]);
- const sidebarMode = useAppSelector((state) => state.app.sidebarMode);
+ const sidebarMode = useAppSelector(state => state.app.sidebarMode);
const { pathname } = useLocation();
const navigate = useNavigate();
const { menuList } = useMenuList();
- const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+ const onOpenChange: MenuProps['onOpenChange'] = keys => {
setOpenKeys(keys);
};
@@ -29,7 +29,7 @@ const NavSidebar = memo(() => {
const menuItems = useMemo(() => {
if (sidebarMode === 'blend') {
- return menuList.map((i) => {
+ return menuList.map(i => {
const { key, label, icon } = i;
return {
key,
@@ -49,7 +49,7 @@ const NavSidebar = memo(() => {
onOpenChange={onOpenChange}
selectedKeys={selectOpenKey}
items={menuItems as MenuProps['items']}
- onClick={(e) => navigate(e.key)}
+ onClick={e => navigate(e.key)}
style={{ border: 'none' }}
/>
);
diff --git a/src/layout/components/Sidebar/SidebarInline/index.less b/src/layout/components/Sidebar/SidebarInline/index.less
index 83e155b..cced5c8 100644
--- a/src/layout/components/Sidebar/SidebarInline/index.less
+++ b/src/layout/components/Sidebar/SidebarInline/index.less
@@ -1,5 +1,4 @@
.sidebar {
-
.ant-menu-inline-collapsed {
width: 54px;
}
diff --git a/src/layout/components/Sidebar/SidebarInline/index.tsx b/src/layout/components/Sidebar/SidebarInline/index.tsx
index 4aaa095..7500152 100644
--- a/src/layout/components/Sidebar/SidebarInline/index.tsx
+++ b/src/layout/components/Sidebar/SidebarInline/index.tsx
@@ -1,15 +1,15 @@
-import type { MenuProps, SiderProps } from 'antd';
-import { theme, Drawer, Layout, Menu } from 'antd';
-import { memo, useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { findRouteByPath, getParentPaths } from '@/router/utils';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setAppCollapsed } from '@/store/modules/app';
import { useResponsive } from 'ahooks';
+import { Drawer, Layout, Menu, theme } from 'antd';
+import { memo, useEffect, useMemo, useState } from 'react';
import { shallowEqual } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router';
+import type { MenuProps, SiderProps } from 'antd';
import AppLogo from '../../AppLogo';
-import './index.less';
import { useMenuList } from '../hooks/useMenuList';
-import { findRouteByPath, getParentPaths } from '@/router/utils';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { setAppCollapsed } from '@/store/modules/app';
+import './index.less';
const { Sider } = Layout;
@@ -17,7 +17,7 @@ const Sidebar = memo(() => {
const { pathname } = useLocation();
const dispatch = useAppDispatch();
const { collapsed, sidebarMode } = useAppSelector(
- (state) => ({
+ state => ({
collapsed: state.app.collapsed,
sidebarMode: state.app.sidebarMode,
}),
@@ -25,7 +25,6 @@ const Sidebar = memo(() => {
);
const [openKeys, setOpenKeys] = useState([]);
const thme = theme.useToken();
- console.log(thme);
const responsive = useResponsive();
const navigate = useNavigate();
const { menuList } = useMenuList();
@@ -38,11 +37,11 @@ const Sidebar = memo(() => {
}
}, [collapsed, pathname]);
- const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+ const onOpenChange: MenuProps['onOpenChange'] = keys => {
setOpenKeys(keys);
};
- const onBreakpoint: SiderProps['onBreakpoint'] = (broken) => {
+ const onBreakpoint: SiderProps['onBreakpoint'] = broken => {
let collapsedValue = collapsed;
if (broken) collapsedValue = true;
else collapsedValue = false;
@@ -74,7 +73,7 @@ const Sidebar = memo(() => {
onOpenChange={onOpenChange}
selectedKeys={[pathname]}
items={menuItems as MenuProps['items']}
- onClick={(e) => navigate(e.key)}
+ onClick={e => navigate(e.key)}
style={{ border: 'none' }}
/>
diff --git a/src/layout/components/Sidebar/hooks/useMenuList.tsx b/src/layout/components/Sidebar/hooks/useMenuList.tsx
index 257e7ad..c0623e1 100644
--- a/src/layout/components/Sidebar/hooks/useMenuList.tsx
+++ b/src/layout/components/Sidebar/hooks/useMenuList.tsx
@@ -1,10 +1,10 @@
-import { useMemo } from 'react';
+import { useRouteList } from '@/hooks/useRouteList';
import { handlePowerRoute } from '@/router/utils';
import { useAppSelector } from '@/store/hooks';
-import { useRouteList } from '@/hooks/useRouteList';
+import { useMemo } from 'react';
export const useMenuList = () => {
- const asyncRouter = useAppSelector((state) => state.route.asyncRouter);
+ const asyncRouter = useAppSelector(state => state.route.asyncRouter);
const { routeListToMenu } = useRouteList();
const menuList = useMemo(() => {
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 9a1b560..0ceb515 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
import { Layout, theme } from 'antd';
+import React from 'react';
-import './index.less';
-import SidebarInline from './components/Sidebar/SidebarInline';
-import Navbart from './components/Navbart';
import AppMain from './components/AppMain/AppMain';
+import Navbart from './components/Navbart';
+import SidebarInline from './components/Sidebar/SidebarInline';
+import './index.less';
const { Footer } = Layout;
@@ -17,9 +17,7 @@ const LayoutApp: React.FC = () => {
-
+
- {[1, 2, 3, 4, 5].map((i) => {
+ {[1, 2, 3, 4, 5].map(i => {
return (
- {[1, 2, 3, 4, 5].map((i) => {
+ {[1, 2, 3, 4, 5].map(i => {
return (