import React from 'react';\nimport '.\/index.less';\nimport classnames from 'classnames';\nconst Loading = ({isLoading, part=false}) => {\n const loadingStyle = part ? {\n position: 'absolute',\n top: '50%',\n left: '50%',\n height: '100px',\n width: '100px',\n transform: 'translate(-50%, -50%)',\n } : {};\n return (\n <div style={loadingStyle} className={classnames('loader', 'fullScreen', {hidden: !isLoading})}>\n <div className='wrapper'>\n <div className='inner'><\/div>\n <div className='text'>LOADING<\/div>\n <\/div>\n <\/div>\n );\n};\n\nexport default Loading;\n<\/code><\/pre>\n\n\n\nsrc\\components\\Loading\\index.less<\/h2>\n\n\n\n
\u57fa\u672c\u6837\u5f0f<\/p>\n\n\n\n
.loader {\n background-color: #fff;\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n z-index: 100000;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n text-align: center;\n\n &.fullScreen {\n position: fixed;\n }\n\n .wrapper {\n width: 100px;\n height: 100px;\n display: inline-flex;\n flex-direction: column;\n justify-content: space-around;\n }\n\n .inner {\n width: 40px;\n height: 40px;\n margin: 0 auto;\n text-indent: -12345px;\n border-top: 1px solid rgba(0, 0, 0, 0.08);\n border-right: 1px solid rgba(0, 0, 0, 0.08);\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n border-left: 1px solid rgba(0, 0, 0, 0.7);\n border-radius: 50%;\n z-index: 100001;\n animation: spinner 600ms infinite linear;\n }\n\n .text {\n width: 100px;\n height: 20px;\n text-align: center;\n font-size: 12px;\n letter-spacing: 4px;\n color: #000;\n }\n\n &.hidden {\n z-index: -1;\n opacity: 0;\n transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;\n }\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
\u4e3b\u8981\u901a\u8fc7useSelector\u5b9e\u73b0\uff0cdva\u91cceffects\u5b9a\u4e49\u7684\u90fd\u4f1a\u4ea7\u751floading\u72b6\u6001<\/p>\n\n\n\n
const loading = useSelector(state => state.loading);\n \/\/console.log(loading,'loading');<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/mitongxue.cn\/wp-content\/uploads\/2026\/06\/image-63.png\")
<\/figure>\n\n\n\nsrc\\layouts\\BaseLayout.jsx<\/h2>\n\n\n\n
<\/p>\n\n\n\n
import { Outlet, history, useNavigate, useLocation, useSelector } from 'umi';\nimport { Layout, Menu } from 'antd';\nconst { Header, Footer, Sider, Content } = Layout;\nimport SildeBar from 'components\/SildeBar';\nimport { useState, useEffect } from 'react';\nimport '.\/BaseLayout.less';\nimport CommonHeader from 'components\/CommonHeader';\nimport NotFoundPage from '..\/pages\/404Page';\nimport Loading from 'components\/Loading';\n\nexport default function BackLayout({children}) {\n const [collapse, setCollapse] = useState(false);\n const changeCollapse = () => {setCollapse(!collapse);}\n const navigate = useNavigate();\n const location = useLocation();\n const pathname = location.pathname;\n const routeList = sessionStorage.getItem('routeList') ? JSON.parse(sessionStorage.getItem('routeList')) : [];\n const loading = useSelector(state => state.loading);\n \/\/console.log(loading,'loading');\n \/\/ useEffect(() => {\n \/\/ console.log(pathname,'pathname');\n \/\/ if (pathname === '\/') {\n \/\/ navigate(routeList[0].route, { replace: true });\n \/\/ }\n \/\/ }, [pathname, routeList, navigate]);\n \/\/\u7279\u6b8a\u5904\u7406\uff0c\u8df3\u9996\u9875\u53ca\u6ca1\u6709\u8df3404\n const pageJudge = () => {\n if (location.pathname === '\/') {\n \/\/history.replace(routeList[0]?.route || '\/');\n navigate(routeList[0]?.route || '\/', { replace: true });\n return true;\n }\n return routeList.some(item => item.route === location.pathname);\n }\n\n return (\n <Layout className=\"container\">\n <SildeBar Sider={Sider} Menu={Menu} collapse={collapse} \/>\n <Layout>\n <CommonHeader \n Header={Header} \n collapse={collapse}\n changeCollapse={changeCollapse}\n \/>\n <Content className=\"main-content\">{pageJudge() ? (\n <>\n <Loading part={true} isLoading={loading?.effects['dashboard\/initDashboardList']} \/>\n <Outlet \/>\n <\/>): (<NotFoundPage \/>)}<\/Content>\n <\/Layout>\n <\/Layout>\n );\n}\n<\/code><\/pre>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5c01\u88c5loading\u7ec4\u4ef6src\\components..<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,11],"tags":[35,28,29],"class_list":["post-469","post","type-post","status-publish","format-standard","hentry","category-react-","category-front","tag-dva","tag-react","tag-umi"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":""},"author_info":{"info":["\u9648 \u67d0\u4eba"]},"category_info":"React<\/a> \u524d\u7aef<\/a>","tag_info":"\u524d\u7aef","comment_count":"0","_links":{"self":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":5,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/posts\/469\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitongxue.cn\/index.php\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}