Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into v2

src/layouts/components/HeaderDropdown.tsx

-import React, { useState } from 'react'
-import { Dropdown, Space, Menu, Button } from 'antd'
+// import React, { useState } from 'react'
+// import { Dropdown, Space, Menu, Button } from 'antd'
+// import ChinaImg from '../../../mockStatic/china.png'
+// import gou from '../../../mockStatic/gou.png'
+// import japenImg from '../../../mockStatic/japen.png'
+// import korenImg from '../../../mockStatic/koren.png'
+// import us from '../../../mockStatic/us.png'
+// import { CaretDownOutlined } from '@ant-design/icons'
+// import { GlobalConfig } from '@/global/config'
+
+// interface CountryItem {
+//   name: string,
+//   key: string,
+//   icon: string
+// }
+
+// const HeaderDropdown: React.FC = () => {
+//   // 此处暂时无接口， 对接接口后需用枚举类型做补充
+//   const [select, setSelect] = useState<CountryItem>({
+//     key: 'cn',
+//     name: '简体中文-ZH',
+//     icon: ChinaImg
+//   })
+
+//   const menuHeaderDropdown = (
+//     <Menu selectedKeys={[]}>
+//       {
+//         GlobalConfig.publicSelect.siteList.map(v => <Menu.Item key={v.key} onClick={() => setSelect(v)}>
+//           <Space>
+//             {select.key === v.key ? <img src={gou} style={{width: 20, height: 20}}/> : <div style={{width: 20, height: 20}}></div> }
+//             <img src={v.icon} style={{width: 24, height: 17}}/>
+//             <span>{v.name}</span>
+//           </Space>
+//         </Menu.Item>)
+//       }
+//     </Menu>
+//   );
+//   return (
+//     <Dropdown overlay={menuHeaderDropdown} placement='bottomRight'>
+//       <Space style={{cursor: 'pointer'}} size={5}>
+//         <img src={select.icon} style={{width: 24, height: 17}}/>
+//         <span>{select.name}</span>
+//         <CaretDownOutlined />
+//       </Space>
+//     </Dropdown>
+//   )
+// }
+
+// export default HeaderDropdown
+
+
+import React, { useState, useEffect } from 'react'
+import { Dropdown, Space, Menu } from 'antd'
+import { setLocale, getLocale } from 'umi'
 import ChinaImg from '../../../mockStatic/china.png'
 import gou from '../../../mockStatic/gou.png'
-import japenImg from '../../../mockStatic/japen.png'
+import { CaretDownOutlined } from '@ant-design/icons'
+import { GlobalConfig } from '../../global/config'
 import korenImg from '../../../mockStatic/koren.png'
 import us from '../../../mockStatic/us.png'
-import { CaretDownOutlined } from '@ant-design/icons'
-import { GlobalConfig } from '@/global/config'
 
-interface CountryItem {
+import '../styles/SelectLang.less'
+
+interface countryItem {
   name: string,
   key: string,
   icon: string
@@ -16,32 +69,85 @@ interface CountryItem {
 
 const HeaderDropdown: React.FC = () => {
   // 此处暂时无接口， 对接接口后需用枚举类型做补充
-  const [select, setSelect] = useState<CountryItem>({
-    key: 'cn',
-    name: '简体中文-ZH',
-    icon: ChinaImg
-  })
+  const [currentLangKey, setCurrentLangKey] = useState<string>('cn')
+  const [locales] = useState<countryItem[]>([
+    {
+      "name": "简体中文-ZH",
+      "key": "zh-CN",
+      "icon": ChinaImg
+    },
+    {
+      "name": "英文-US",
+      "key": "en-US",
+      "icon": us
+    },
+    {
+      "name": "韩文-KR",
+      "key": "ko-KR",
+      "icon": korenImg
+    },
+  ])
+  useEffect(() => {
+    console.log(getLocale(), "locale")
+    setCurrentLangKey(getLocale())
+  }, [])
+
+  const setLang = (langItem: countryItem) => {
+    setLocale(langItem.key, true)
+  }
 
   const menuHeaderDropdown = (
     <Menu selectedKeys={[]}>
       {
-        GlobalConfig.publicSelect.siteList.map(v => <Menu.Item key={v.key} onClick={() => setSelect(v)}>
+        // GlobalConfig.publicSelect.siteList.map(v => <Menu.Item key={v.key} onClick={() => setLang(v)}>
+        //   <Space>
+        //     {currentLangKey === v.key ? <img src={gou} style={{ width: 20, height: 20 }} /> : <div style={{ width: 20, height: 20 }}></div>}
+        //     <img src={v.icon} style={{ width: 24, height: 17 }} />
+        //     <span>{v.name}</span>
+        //   </Space>
+        // </Menu.Item>)
+        locales.map(v => <Menu.Item key={v.key} onClick={() => setLang(v)}>
           <Space>
-            {select.key === v.key ? <img src={gou} style={{width: 20, height: 20}}/> : <div style={{width: 20, height: 20}}></div> }
-            <img src={v.icon} style={{width: 24, height: 17}}/>
+            {currentLangKey === v.key ? <img src={gou} style={{ width: 20, height: 20 }} /> : <div style={{ width: 20, height: 20 }}></div>}
+            <img src={v.icon} style={{ width: 24, height: 17 }} />
             <span>{v.name}</span>
           </Space>
         </Menu.Item>)
       }
     </Menu>
   );
-  return (
-    <Dropdown overlay={menuHeaderDropdown} placement='bottomRight'>
-      <Space style={{cursor: 'pointer'}} size={5}>
-        <img src={select.icon} style={{width: 24, height: 17}}/>
-        <span>{select.name}</span>
+
+  // useEffect(() => {
+  //   function getLang() {
+  //     getLange
+  //   }
+  // }, [])
+
+  const renderCurrentLang = () => {
+    let currentLang: countryItem
+    // GlobalConfig.publicSelect.siteList.map(item => {
+    //   if (item.key === currentLangKey) {
+    //     currentLang = item
+    //   }
+    // })
+    locales.map(item => {
+      if (item.key === currentLangKey) {
+        currentLang = item
+      }
+    })
+    return (
+      <Space style={{ cursor: 'pointer' }} size={5}>
+        <img src={currentLang?.icon} style={{ width: 24, height: 17 }} />
+        <span>{currentLang?.name}</span>
         <CaretDownOutlined />
       </Space>
+    )
+
+  }
+
+  return (
+    <Dropdown overlay={menuHeaderDropdown} placement='bottomRight' className="selectLangBox">
+      {renderCurrentLang()}
     </Dropdown>
   )
 }

src/layouts/components/SelectLang.tsx

@@ -5,6 +5,8 @@ import ChinaImg from '../../../mockStatic/china.png'
 import gou from '../../../mockStatic/gou.png'
 import { CaretDownOutlined } from '@ant-design/icons'
 import { GlobalConfig } from '../../global/config'
+import korenImg from '../../../mockStatic/koren.png'
+import us from '../../../mockStatic/us.png'
 
 import '../styles/SelectLang.less'
 
@@ -17,7 +19,23 @@ interface countryItem {
 const SelectLang: React.FC = () => {
   // 此处暂时无接口， 对接接口后需用枚举类型做补充
   const [currentLangKey, setCurrentLangKey] = useState<string>('cn')
-
+  const [locales] = useState<countryItem[]>([
+    {
+      "name": "简体中文-ZH",
+      "key": "zh-CN",
+      "icon": ChinaImg
+    },
+    {
+      "name": "英文-US",
+      "key": "en-US",
+      "icon": us
+    },
+    {
+      "name": "韩文-KR",
+      "key": "ko-KR",
+      "icon": korenImg
+    },
+  ])
   useEffect(() => {
     console.log(getLocale(), "locale")
     setCurrentLangKey(getLocale())
@@ -30,7 +48,14 @@ const SelectLang: React.FC = () => {
   const menuHeaderDropdown = (
     <Menu selectedKeys={[]}>
       {
-        GlobalConfig.publicSelect.siteList.map(v => <Menu.Item key={v.key} onClick={() => setLang(v)}>
+        // GlobalConfig.publicSelect.siteList.map(v => <Menu.Item key={v.key} onClick={() => setLang(v)}>
+        //   <Space>
+        //     {currentLangKey === v.key ? <img src={gou} style={{ width: 20, height: 20 }} /> : <div style={{ width: 20, height: 20 }}></div>}
+        //     <img src={v.icon} style={{ width: 24, height: 17 }} />
+        //     <span>{v.name}</span>
+        //   </Space>
+        // </Menu.Item>)
+        locales.map(v => <Menu.Item key={v.key} onClick={() => setLang(v)}>
           <Space>
             {currentLangKey === v.key ? <img src={gou} style={{ width: 20, height: 20 }} /> : <div style={{ width: 20, height: 20 }}></div>}
             <img src={v.icon} style={{ width: 24, height: 17 }} />
@@ -49,7 +74,12 @@ const SelectLang: React.FC = () => {
 
   const renderCurrentLang = () => {
     let currentLang: countryItem
-    GlobalConfig.publicSelect.siteList.map(item => {
+    // GlobalConfig.publicSelect.siteList.map(item => {
+    //   if (item.key === currentLangKey) {
+    //     currentLang = item
+    //   }
+    // })
+    locales.map(item => {
       if (item.key === currentLangKey) {
         currentLang = item
       }