fix: 语言切换

src/components/header/index.vue

@@ -11,6 +11,16 @@
         <div class="user">
             <ul>
                 <li>
+                    <div class="language">
+                        <span>{{ langs[lang] }}</span> <i class="iconfont icon-arrows_right"></i>
+                        <div class="select-box">
+                            <div class="lang-item" @click="changeLang(key)" :class="{ active: key == lang }" v-for="(value, key) in langs">
+                                <div>{{ value }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                <li>
                     <i @click="openLink" class="iconfont icon-share"></i>
                 </li>
                 <li><em></em></li>
@@ -61,13 +71,19 @@ import Login from './Login'
 import CopyLink from './CopyLink'
 import sync from '@/utils/sync'
 import { useI18n, getLocale } from '@/i18n'
-import math from "@/utils/math.js";
+import math from '@/utils/math.js'
 
 const { t } = useI18n({ useScope: 'global' })
 const props = defineProps({
     project: Object,
     showAdjust: Boolean,
 })
+const lang = ref(getLocale())
+const langs = ref({
+    zh: '中文',
+    en: 'English',
+    ja: '日本語',
+})
 const projectId = browser.valueFromUrl('projectId') || ''
 const emits = defineEmits(['update', 'getUserId'])
 const isLogin = inject('isLogin')
@@ -88,6 +104,10 @@ const getUser = info => {
     isLogin.value = true
     // emits('getUserId', localStorage.getItem('userId'))
 }
+const changeLang = lang => {
+    let url = browser.changeURLArg(window.location.href, 'lang', lang)
+    window.location.replace(url)
+}
 const openLink = () => {
     showLink.value = true
     showCopyDone.value = false
@@ -115,29 +135,27 @@ const getCurPosInfo = () => {
     let info = sync.targetInst.viewer.getCameraStatus()
     let pos2 = info.position
     let data = { pos1, pos2 }
-    if(id != void 0)data.id = id
+    if (id != void 0) data.id = id
     return data
 }
 
 //旧数据由id和position构成，新数据由pos1，pos2和id（可能无）构成。 position相当于pos2，是bim的坐标
-//可能p1 p2有一个新一个旧 orz。   
-const ifSame = (p1,p2)=>{
-     
-    if(!p1 || !p2)return false
-    if(p1.id != void 0 && p1.id == p2.id) return true
+//可能p1 p2有一个新一个旧 orz。
+const ifSame = (p1, p2) => {
+    if (!p1 || !p2) return false
+    if (p1.id != void 0 && p1.id == p2.id) return true
 
     let p1Pos1 = p1.pos1,
         p1Pos2 = p1.position || p1.pos2,
         p2Pos1 = p2.pos1,
         p2Pos2 = p2.position || p2.pos2
-    if(p1Pos1 && p2Pos1 && math.closeTo(p1Pos1, p2Pos1, 0.1) ) return true     
-    if(p1Pos2 && p2Pos2 && math.closeTo(p1Pos2, p2Pos2, 0.1) ) return true     
- 
+    if (p1Pos1 && p2Pos1 && math.closeTo(p1Pos1, p2Pos1, 0.1)) return true
+    if (p1Pos2 && p2Pos2 && math.closeTo(p1Pos2, p2Pos2, 0.1)) return true
 }
 
 const onSetP1 = () => {
     let p1 = getCurPosInfo()
-    if(ifSame(p1, points.value.p2))  return (showTips.value = t('header.setPointfaidText'))
+    if (ifSame(p1, points.value.p2)) return (showTips.value = t('header.setPointfaidText'))
     if (points.value.p1) {
         showTips.value = t('header.pointUpdate')
     }
@@ -146,7 +164,7 @@ const onSetP1 = () => {
 }
 const onSetP2 = () => {
     let p2 = getCurPosInfo()
-    if(ifSame(points.value.p1, p2))  return (showTips.value = t('header.setPointfaidText'))
+    if (ifSame(points.value.p1, p2)) return (showTips.value = t('header.setPointfaidText'))
     if (points.value.p2) {
         showTips.value = t('header.pointUpdate')
     }
@@ -335,7 +353,47 @@ footer {
         vertical-align: -2px;
         background-color: rgba(255, 255, 255, 0.16);
     }
-
+    .language {
+        margin: 0 30px 0 0;
+        cursor: pointer;
+        position: relative;
+        .iconfont {
+            font-size: 12px;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%) rotate(90deg);
+            right: -15px;
+        }
+        &:hover {
+            .select-box {
+                display: block;
+            }
+        }
+        .select-box {
+            display: none;
+            position: absolute;
+            background-color: #343535;
+            z-index: 2000;
+            flex-direction: column;
+            border-radius: 4px;
+            padding: 0 15px;
+            // padding-top: 15px;
+            left: 50%; // top: 40px;
+            transform: translateX(-50%);
+            .lang-item {
+                height: 45px;
+                line-height: 45px;
+                text-align: center;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.16);
+                &.active {
+                    color: #0076f6;
+                }
+                &:last-of-type {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
     .login {
         cursor: pointer;
         color: rgba(0, 118, 246, 1);

src/utils/browser.js

@@ -12,19 +12,19 @@ var browser = {
         )
     },
     getURLParam: function (key) {
-      let querys = window.location.search.substring(1).split('&')
-      for (let i = 0; i < querys.length; i++) {
-          let keypair = querys[i].split('=')
-          if (keypair.length === 2 && keypair[0] === key) {
-              try {
-                  return decodeURIComponent(keypair[1])
-              } catch (error) {
-                  return keypair[1]
-              }
-          }
-      }
-      return ''
-  },
+        let querys = window.location.search.substring(1).split('&')
+        for (let i = 0; i < querys.length; i++) {
+            let keypair = querys[i].split('=')
+            if (keypair.length === 2 && keypair[0] === key) {
+                try {
+                    return decodeURIComponent(keypair[1])
+                } catch (error) {
+                    return keypair[1]
+                }
+            }
+        }
+        return ''
+    },
     isFullscreen() {
         return document.fullscreenElement || document.mozFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement
     },
@@ -197,6 +197,21 @@ var browser = {
             return false
         }
     },
+    changeURLArg: function (url, arg, arg_val) {
+        var pattern = arg + '=([^&]*)'
+        var replaceText = arg + '=' + arg_val
+        if (url.match(pattern)) {
+            var tmp = '/(' + arg + '=)([^&]*)/gi'
+            tmp = url.replace(eval(tmp), replaceText)
+            return tmp
+        } else {
+            if (url.match('[?]')) {
+                return url + '&' + replaceText
+            } else {
+                return url + '?' + replaceText
+            }
+        }
+    },
 }
 
 export default browser