llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-03 12:30:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: use lazy load to load management pages (#2752)

Browse Source
This commit is contained in:
DacongDA
2024-02-27 22:31:02 +08:00
committed by GitHub
parent a5499219d1
commit b0d87f60ae
2 changed files with 49 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
web/src/App.js
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import React, {Component} from "react"; import React, {Component, Suspense, lazy} from "react";
import "./App.less"; import "./App.less";
import {Helmet} from "react-helmet"; import {Helmet} from "react-helmet";
import * as Setting from "./Setting"; import * as Setting from "./Setting";
@ -30,7 +30,7 @@ import AuthCallback from "./auth/AuthCallback";
import SamlCallback from "./auth/SamlCallback"; import SamlCallback from "./auth/SamlCallback";
import i18next from "i18next"; import i18next from "i18next";
import {withTranslation} from "react-i18next"; import {withTranslation} from "react-i18next";
import ManagementPage from "./ManagementPage"; const ManagementPage = lazy(() => import("./ManagementPage"));
const {Footer, Content} = Layout; const {Footer, Content} = Layout;
import {setTwoToneColor} from "@ant-design/icons"; import {setTwoToneColor} from "@ant-design/icons";
@ -366,47 +366,49 @@ class App extends Component {
<FloatButton.BackTop /> <FloatButton.BackTop />
<CustomGithubCorner /> <CustomGithubCorner />
{ {
<Layout id="parent-area"> <Suspense fallback={<div>loading</div>}>
<ManagementPage <Layout id="parent-area">
account={this.state.account} <ManagementPage
uri={this.state.uri} account={this.state.account}
themeData={this.state.themeData} uri={this.state.uri}
themeAlgorithm={this.state.themeAlgorithm} themeData={this.state.themeData}
selectedMenuKey={this.state.selectedMenuKey} themeAlgorithm={this.state.themeAlgorithm}
requiredEnableMfa={this.state.requiredEnableMfa} selectedMenuKey={this.state.selectedMenuKey}
menuVisible={this.state.menuVisible} requiredEnableMfa={this.state.requiredEnableMfa}
logo={this.state.logo} menuVisible={this.state.menuVisible}
onChangeTheme={this.setTheme} logo={this.state.logo}
onClick = {this.onClick} onChangeTheme={this.setTheme}
onfinish={() => { onClick = {this.onClick}
this.setState({requiredEnableMfa: false}); onfinish={() => {
}} this.setState({requiredEnableMfa: false});
openAiAssistant={() => { }}
this.setState({ openAiAssistant={() => {
isAiAssistantOpen: true, this.setState({
}); isAiAssistantOpen: true,
}} });
setLogoAndThemeAlgorithm={(nextThemeAlgorithm) => { }}
this.setState({ setLogoAndThemeAlgorithm={(nextThemeAlgorithm) => {
themeAlgorithm: nextThemeAlgorithm, this.setState({
logo: this.getLogo(nextThemeAlgorithm), themeAlgorithm: nextThemeAlgorithm,
}); logo: this.getLogo(nextThemeAlgorithm),
localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm)); });
}} localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
setLogoutState={() => { }}
this.setState({ setLogoutState={() => {
account: null, this.setState({
themeAlgorithm: ["default"], account: null,
}); themeAlgorithm: ["default"],
}} });
/> }}
{ />
this.renderFooter() {
} this.renderFooter()
{ }
this.renderAiAssistant() {
} this.renderAiAssistant()
</Layout> }
</Layout>
</Suspense>
} }
</React.Fragment> </React.Fragment>
); );

4
web/src/auth/SelfLoginPage.js
View File

@ -17,6 +17,10 @@ import LoginPage from "./LoginPage";
import {authConfig} from "./Auth"; import {authConfig} from "./Auth";
class SelfLoginPage extends React.Component { class SelfLoginPage extends React.Component {
constructor(props) {
super(props);
import("../ManagementPage");
}
render() { render() {
return ( return (
<LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} {...this.props} /> <LoginPage type={"login"} mode={"signin"} applicationName={authConfig.appName} {...this.props} />