diff --git a/.umirc.ts b/.umirc.ts index 5f3880c..4c9fbba 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -8,17 +8,11 @@ export default defineConfig({ type: "none", }, fastRefresh: {}, - ssr: { - // 更多配置 - // forceInitial: false, - removeWindowInitialProps: true, - devServerRender: false, // 默认为true - mode: "string", - staticMarkup: false, - }, + ssr: {}, + exportStatic: {}, proxy: { "/api/": { - target: "http://127.0.0.1:8081", //转发接口地址 + target: "http://127.0.0.1:8000", //转发接口地址 changeOrigin: true, pathRewrite: { "^": "" }, }, diff --git a/package.json b/package.json index 12a234e..3f4abc6 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "private": true, "scripts": { - "start": "SET NODE_OPTIONS=--openssl-legacy-provider&&umi dev", - "build": "SET NODE_OPTIONS=--openssl-legacy-provider&&umi build", + "start": "SET NODE_OPTIONS=--openssl-legacy-provider && umi dev", + "build": "SET NODE_OPTIONS=--openssl-legacy-provider && umi build", "postinstall": "umi generate tmp", "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", "test": "umi-test", @@ -21,9 +21,14 @@ }, "dependencies": { "@ant-design/pro-layout": "^6.5.0", - "@umijs/preset-react": "1.x", + "@umijs/preset-react": "^2.1.7", "antd": "^4.14.0", - "umi": "^3.3.9" + "compression": "^1.7.4", + "express": "^4.17.1", + "helmet": "^3.21.2", + "umi": "^3.3.9", + "umi-request": "^1.2.4", + "umi-server": "^1.0.0" }, "devDependencies": { "@types/react": "^17.0.0", diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js index 431cb06..ca248a8 100644 --- a/src/layouts/BaseLayout.js +++ b/src/layouts/BaseLayout.js @@ -1,19 +1,14 @@ import React from "react"; +import { isBrowser } from "umi"; import { ConfigProvider, Layout, message, Menu, Dropdown } from "antd"; -import { router } from "umi"; import zhCN from "antd/es/locale/zh_CN"; import enUS from "antd/es/locale/en_US"; import BaseHeader from "./components/BaseHeader"; import TopMenu from "./components/TopMenu"; import Footer from "./components/Footer"; -// import headMenuData from "./menuData"; import yuyanImg from "../assets/icon_yuyan@3x.png"; import { getLocale } from "../utils"; import styles from "./BaseLayout.less"; -import locale from "antd/lib/date-picker/locale/en_US"; -// import zhCNConfig from "../locales/zh_CN"; -// import enUSConfig from "../locales/en_US "; - const { Header, Content } = Layout; const findPrefixSelectedKey = (topMenu, key = "") => { @@ -26,61 +21,19 @@ const findPrefixSelectedKey = (topMenu, key = "") => { return key; }; -const localeConfig = getLocale(); class BaseLayout extends React.Component { state = { - locale: localStorage.getItem("language") || "中文", + locale: "", + localeConfig: {}, + headMenuData: [], }; - headMenuData = [ - { - key: "/home", - text: localeConfig.sy, - }, - { - key: "/about-us", - text: localeConfig.footerMenu1, - }, - { - key: "/product-center", - text: localeConfig.footerMenu2, - children: [ - { - key: `/product-center?tabCode=1`, - text: localeConfig.cp1, - }, - { - key: `/product-center?tabCode=2`, - text: localeConfig.cp2, - }, - { - key: `/product-center?tabCode=3`, - text: localeConfig.cp3, - }, - { - key: `/product-center?tabCode=4`, - text: localeConfig.cp4, - }, - { - key: `/product-center?tabCode=5`, - text: localeConfig.cp5, - }, - ], - }, - { - key: "/technical-support", - text: localeConfig.footerMenu3, - }, - { - key: "/contact-us", - text: localeConfig.footerMenu4, - }, - ]; - handleLocaleChange = (val) => { if (val !== this.state.locale) { this.setState({ locale: val }); - localStorage.setItem("language", val); + if (!isBrowser()) { + localStorage.setItem("language", val); + } window.location.reload(); } }; @@ -109,6 +62,58 @@ class BaseLayout extends React.Component { history.push(item.key); } }; + componentDidMount() { + const val = localStorage.getItem("language") || "中文"; + const localeConfig = getLocale(val); + this.setState({ + locale: val, + localeConfig: localeConfig, + headMenuData: [ + { + key: "/home", + text: localeConfig.sy, + }, + { + key: "/about-us", + text: localeConfig.footerMenu1, + }, + { + key: "/product-center", + text: localeConfig.footerMenu2, + children: [ + { + key: `/product-center?tabCode=1`, + text: localeConfig.cp1, + }, + { + key: `/product-center?tabCode=2`, + text: localeConfig.cp2, + }, + { + key: `/product-center?tabCode=3`, + text: localeConfig.cp3, + }, + { + key: `/product-center?tabCode=4`, + text: localeConfig.cp4, + }, + { + key: `/product-center?tabCode=5`, + text: localeConfig.cp5, + }, + ], + }, + { + key: "/technical-support", + text: localeConfig.footerMenu3, + }, + { + key: "/contact-us", + text: localeConfig.footerMenu4, + }, + ], + }); + } componentDidCatch(error) { if (process.env.NODE_ENV !== "development") { @@ -118,13 +123,14 @@ class BaseLayout extends React.Component { duration: 2, key: "error", }); - router.replace("/exception/500"); + // router.replace("/exception/500"); // eslint-disable-next-line no-console console.error(error); } } render() { + const { localeConfig, headMenuData = [] } = this.state; const { children, location = {} } = this.props; const { pathname = "" } = location; const arr = ["/home"]; @@ -160,9 +166,9 @@ class BaseLayout extends React.Component { diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js index 2e212ce..b404565 100644 --- a/src/pages/Home/index.js +++ b/src/pages/Home/index.js @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useState, useEffect } from "react"; import { Button, Carousel, Image } from "antd"; import GreenLine from "../../components/GreenLine"; import bg1 from "../../assets/img_guanyu@3x.png"; @@ -22,10 +22,12 @@ import styles from "./index.less"; const IndexPage = (props) => { console.log(props); - const locale = getLocale(); - + const [locale, setLocale] = useState({}); + // 测试接口 useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); getData(); }, []); diff --git a/src/pages/about-us/full-certificate/index.js b/src/pages/about-us/full-certificate/index.js index 5ca872c..e4f6ed2 100644 --- a/src/pages/about-us/full-certificate/index.js +++ b/src/pages/about-us/full-certificate/index.js @@ -1,6 +1,4 @@ -import React, { useState } from "react"; -import { Row, Col } from "antd"; - +import React, { useState, useEffect } from "react"; import { getLocale } from "../../../utils"; import styles from "./index.less"; import CusBreadcrumb from "../../../components/CusBreadcrumb"; @@ -8,7 +6,6 @@ import CusBreadcrumb from "../../../components/CusBreadcrumb"; import img1 from "../../../assets/img_zhengshu@3x.png"; const FullCertificate = (props) => { - const locale = getLocale(); const [certificateList, setCertificateList] = useState([ { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" }, { url: img1, name: "xxxxx CE证书" }, @@ -19,6 +16,13 @@ const FullCertificate = (props) => { { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" }, { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" }, ]); + + const [locale, setLocale] = useState({}); + useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); + }, []); + return (
{ - const locale = getLocale(); const { history } = props; + const [locale, setLocale] = useState({}); + useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); + }, []); const renderItem = ({ imgUrl, name, year, info }, index) => (
{ - const locale = getLocale(); const { history } = props; + const [locale, setLocale] = useState({}); + useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); + }, []); return (
diff --git a/src/pages/contact-us/index.js b/src/pages/contact-us/index.js index 07baced..b23b36c 100644 --- a/src/pages/contact-us/index.js +++ b/src/pages/contact-us/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Form, Button, Input } from "antd"; import { getLocale } from "../../utils"; import styles from "./index.less"; @@ -15,7 +15,11 @@ import img6 from "../../assets/img_ditu@3x.png"; const IndexPage = (props) => { const { history } = props; - const locale = getLocale(); + const [locale, setLocale] = useState({}); + useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); + }, []); const jstdImgList = [ { diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..cb4e71f --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,6 @@ +import React from 'react'; +import { Redirect } from 'umi' + +const index = () => ; + +export default index; diff --git a/src/pages/product-center/detail/index.js b/src/pages/product-center/detail/index.js index 10c88e2..ad05ce7 100644 --- a/src/pages/product-center/detail/index.js +++ b/src/pages/product-center/detail/index.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { Image } from "antd"; import { getLocale } from "../../../utils"; @@ -13,8 +13,13 @@ import img4 from "../../../assets/img_chanpin_4@3x.png"; const FullCertificate = (props) => { const { location = {} } = props; // activeTab const { id, tabName, tabValue } = location?.query || {}; // activeTab - const locale = getLocale(); const [visible, setVisible] = useState(false); + const [locale, setLocale] = useState({}); + useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); + }, []); + return (
{ const { history, location = {} } = props; // activeTab const { tabCode = "" } = location?.query || {}; // activeTab - const locale = getLocale(); + const [locale, setLocale] = useState({}); + useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); + }, []); const [activeTab, setActiveTab] = useState({}); const [productList, setProductList] = useState([ { diff --git a/src/pages/technical-support/index.js b/src/pages/technical-support/index.js index cdd9155..1ad06b7 100644 --- a/src/pages/technical-support/index.js +++ b/src/pages/technical-support/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Divider, Button } from "antd"; import { getLocale } from "../../utils"; import styles from "./index.less"; @@ -16,7 +16,11 @@ import img6 from "../../assets/img_jishu_guanli@3x.png"; const IndexPage = (props) => { const { history } = props; - const locale = getLocale(); + const [locale, setLocale] = useState({}); + useEffect(() => { + const val = localStorage.getItem("language") || "中文"; + setLocale(getLocale(val)); + }, []); const jstdImgList = [ { diff --git a/src/utils.js b/src/utils.js index 2d21435..bfa4904 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,7 +1,6 @@ import zhCNConfig from "./locales/zh_CN"; import enUSConfig from "./locales/en_US "; -export const getLocale = () => { - const local = localStorage.getItem("language") || "中文"; - return local === "中文" ? zhCNConfig : enUSConfig; +export const getLocale = (language) => { + return language === "中文" ? zhCNConfig : enUSConfig; };