update翻译功能

src/app.vue

@@ -489,7 +489,7 @@ onMounted(async () => {
           showCloseIcon: false,
           okText: t('common.know'),
           content: "<span style='font-size: 16px; line-height: 1.5;'>" + t('common.notice') + '<span/>',
-          title: `${t('common.know')}：`,
+          title: `${t('common.tips')}：`,
           single: true,
           func: (state) => {
             if (state == 'ok') {

src/components/Controls/Panel/Main.vue

@@ -4,10 +4,10 @@
       <div @click="toggleOpen" class="menu color">
         <div class="logo">
           <img :src="require('@/assets/images/icon/logo.png')" alt="" />
-          <p>{{ $t('common.title') }}</p>
+          <p v-if="player.lang != 'en'">{{$t('common.title') }}</p>
         </div>
         <div class="vline"></div>
-        <ul>
+        <ul :class="player.lang" @touchmove.stop>
           <li v-if="tours.length > 0">
             <ui-icon type="preview" @click.stop="playTour"></ui-icon>
             <div>{{$t('common.tour')}}</div>
@@ -349,6 +349,8 @@ onMounted(() => {
   .logo {
     width: 90px;
     transform: translateY(-24%);
+    min-width: 90px;
+    flex-shrink: 0;
     > img {
       width: 100%;
       border-radius: 4px;
@@ -368,8 +370,9 @@ onMounted(() => {
     align-items: center;
     font-size: 0;
     justify-content: flex-end;
+    overflow-x: auto;
     > li {
-      margin-left: 0.5rem;
+      margin-left: 0.4rem;
       &:first-of-type {
         margin-left: 0;
       }
@@ -379,6 +382,11 @@ onMounted(() => {
       }
     }
   }
+
+  .en{
+    justify-content: flex-start;
+    width: calc(100% - 100px);
+  }
 }
 
 .toolbar {

src/components/RTC/dialog/createdRoom.vue

@@ -3,8 +3,8 @@
     <div class="created_dialog">
       <div class="blurBox"></div>
       <div class="content">
-        <div class="dialog_title" v-if="role == 'leader'">{{ $t('common.createTour')}}</div>
-        <div class="dialog_title" v-else>{{ $t('common.joinTour')}}</div>
+        <div class="dialog_title" v-if="role == 'leader'">{{ $t("common.createTour") }}</div>
+        <div class="dialog_title" v-else>{{ $t("common.joinTour") }}</div>
         <div class="user_name">
           <input
             class="input_name"
@@ -19,22 +19,24 @@
           <div @click="chooseMode(i.mode)" v-for="i,index in modeList" :key="index" :class="{ active: mode==i.mode }" class="mode">{{i.title}}</div>
         </div> -->
         <div class="created_btn">
-          <div class="created_cancel" @click="closeCreated">{{ $t('common.cancel')}}</div>
-          <div class="created_confirm" @click="createdConfirm">{{ $t('common.confirm')}}</div>
+          <div class="created_cancel" @click="closeCreated">{{ $t("common.cancel") }}</div>
+          <div class="created_confirm" @click="createdConfirm">{{ $t("common.confirm") }}</div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<script setup>
+import { useI18n, getLocale } from "@/i18n";
+const { t } = useI18n({ useScope: "global" });
+</script>
+
 <script>
 import { Dialog } from "@/global_components/";
 import browser from "@/utils/browser";
 import { useStore } from "vuex";
 
-import { useI18n, getLocale } from '@/i18n'
-const { t } = useI18n({ useScope: 'global' })
-
 export default {
   data() {
     return {
@@ -50,9 +52,10 @@ export default {
           title: "多人模式",
         },
       ],
-      store:useStore(),
+      store: useStore(),
       userName: "",
       roomId: browser.getURLParam("roomId"),
+      $t: this.t,
     };
   },
 
@@ -82,7 +85,7 @@ export default {
     },
     createdConfirm() {
       if (this.userName == "") {
-        Dialog.toast({ content: t('common.inputnickName'), type: "error" });
+        Dialog.toast({ content: this.$t("common.inputnickName"), type: "error" });
         return;
       }
       let name = encodeURIComponent(this.userName);

src/components/RTC/dialog/index.vue

@@ -3,11 +3,11 @@
     <div class="created_dialog">
       <div class="blurBox"></div>
       <div class="content">
-        <div class="dialog_title">{{ props.title }}</div>
-        <p class="dialog_desc">{{ props.desc }}</p>
+        <div class="dialog_title">{{ props.title || $t('common.wenxintips') }}</div>
+        <p class="dialog_desc">{{ props.desc ||  $t('common.isOver')}}</p>
         <div class="created_btn">
-          <div class="end_cancel" @click="endLiveCancel">取消</div>
-          <div class="end_confirm" @click="endLiveConfirm">確認</div>
+          <div class="end_cancel" @click="endLiveCancel">{{$t('common.cancel')}}</div>
+          <div class="end_confirm" @click="endLiveConfirm">{{$t('common.confirm')}}確認</div>
         </div>
       </div>
     </div>
@@ -18,9 +18,12 @@
 import browser from "@/utils/browser";
 import { onMounted, watch, defineProps, defineEmits, ref, computed } from "vue";
 import { useStore } from "vuex";
+import { useI18n, getLocale } from '@/i18n'
+
 const store = useStore();
 
 const emit = defineEmits(["closeDialog","confirmDialog"]);
+const { t } = useI18n({ useScope: 'global' })
 
 const role = ref(browser.urlHashValue("role"));
 const socket = computed(() => store.getters["rtc/socket"]);
@@ -29,11 +32,11 @@ const socket = computed(() => store.getters["rtc/socket"]);
 const props = defineProps({
   title: {
     type: String,
-    default: "溫馨提示",
+    default: '',
   },
   desc: {
     type: String,
-    default: "是否結束帶看？",
+    default: "",
   },
 });
 

src/components/shared/Guide.vue

@@ -1,7 +1,15 @@
 <template>
   <div v-if="show && isMobile" class="user-guide-overlay">
     <div class="user-guide-mobile">
-      <div class="zh">
+      <div class="zh en" v-if="player.lang == 'en'">
+        <div class="btn" @click="onSet"></div>
+      </div>
+
+      <div class="zh" v-else-if="player.lang == 'zh_CN'">
+        <div class="btn" @click="onSet"></div>
+      </div>
+
+      <div class="zh fan" v-else>
         <div class="btn" @click="onSet"></div>
       </div>
     </div>
@@ -12,10 +20,12 @@ import { onMounted, watch, computed, ref, nextTick } from "vue";
 import { useApp } from "@/app";
 import browser from "@/utils/browser";
 import { useStore } from "vuex";
+import { useI18n, getLocale } from '@/i18n'
 
 const isMobile = browser.isMobile();
 const show = computed(() => store.getters["player"].showUserGuide);
 const store = useStore();
+const player = computed(() => store.getters["player"]);
 
 const onSet = () => {
   store.commit("showUserGuide", false);
@@ -148,53 +158,19 @@ useApp().then((app) => {
     background-repeat: no-repeat;
   }
   .en {
-    width: 100%;
-    color: #fff;
-    ul,
-    li {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      width: 100%;
-    }
-    ul {
-      margin: 0;
-    }
-    li {
-      display: flex;
-      align-items: flex-start;
-      padding: 0.5rem 0;
-      &:first-child {
-        padding-top: 0;
-      }
-      i {
-        font-size: 1.32rem;
-      }
-      > div {
-        font-size: 0.4rem;
-        margin-left: 0.3rem;
-        :deep(span) {
-          font-size: 0.6rem;
-          color: #00c2c4;
-        }
-        :deep(div) {
-          font-size: 0.5rem;
-          margin-top: 0.1rem;
-          white-space: pre-line;
-          line-height: 1.3;
-        }
-      }
+    background-image: url(~@/assets/images/guide/novice_guide_text_en@2x.png);
+    .btn {
+      background-image: url(~@/assets/images/guide/novice_guide_button@2x.png);
     }
+  }
 
+  .fan {
+    background-image: url(~@/assets/images/guide/novice_guide_text@2x.png);
     .btn {
-      background-image: none;
-      color: #00c2c4;
-      line-height: 1.2rem;
-      text-align: center;
-      font-size: 0.52632rem;
-      background-image: url(~@/assets/images/guide/novice_guide_button_empty@2x.png);
+      background-image: url(~@/assets/images/guide/novice_guide_button@2x.png);
     }
   }
+
   .btn {
     position: absolute;
     bottom: -3.15789rem;
@@ -208,7 +184,7 @@ useApp().then((app) => {
     transform: translateX(-50%);
   }
 
-  .guide-tips{
+  .guide-tips {
     font-size: 16px;
     margin-top: 1rem;
     line-height: 1.5;
@@ -252,9 +228,9 @@ useApp().then((app) => {
   }
 }
 
-  @media (orientation: landscape) {
-    .user-guide-mobile {
-        overflow-y: auto;
-    }
+@media (orientation: landscape) {
+  .user-guide-mobile {
+    overflow-y: auto;
   }
+}
 </style>

src/locales/en.json

@@ -59,18 +59,21 @@
     "privacy":"Privacy Policies：",
     "notice":"To preserve the security of user personal information, the developer has complied with all applicable laws, policies, and regulations regulating the collection and use of end-user personal information.",
     "invitation":"【Friends Recommend】 Let's start a virtual walkthrough together!",
-    "inputnickName": "请输入您的昵称~",
-    "leadernickName": " 请输入发起人昵称",
-    "createTour": " 创建一起逛",
-    "joinTour": " 进入一起逛",
-    "addSuccess": "添加成功",
-    "viewDetailFail": "获取商品详情失败，请稍后再试",
-    "addCart": "加入购物车",
-    "viewDetail": "查看详情",
-    "onlyOffLine":"仅供线下门店购买",
-    "guige":"规格：",
-    "shuliang":"数量：",
-    "guideSearch":"专柜搜索"
+    "inputnickName": "Please enter a nickname~",
+    "leadernickName": " Please enter an inviter's nickname",
+    "createTour": " Create a livestream",
+    "joinTour": " Join a livestream",
+    "addSuccess": "Successfully added",
+    "viewDetailFail": "Failed to get the product information; Please try again later",
+    "addCart": "Add to cart",
+    "viewDetail": "View details",
+    "onlyOffLine":"Offline shopping only",
+    "guige":"Specification:",
+    "shuliang":"Quantity：",
+    "guideSearch":"Search",
+    "isOver":"Are you sure to end the livestream？",
+    "wenxintips":"Tips"
+
   },
   "share": {
     "wechat": "Wechat",

src/locales/zh_CN.json

@@ -28,7 +28,7 @@
     "help":"帮助",
     "kefu":"客服",
     "viewnum":"观看",
-    "saysomething":"说点什麽",
+    "saysomething":"说点什么",
     "cantsay":"已被禁言",
     "back":"返回",
     "linking":"连接中...",
@@ -70,7 +70,10 @@
     "onlyOffLine":"仅供线下门店购买",
     "guige":"规格：",
     "shuliang":"数量：",
-    "guideSearch":"专柜搜索"
+    "guideSearch":"专柜搜索",
+    "isOver":"是否结束带看？",
+    "wenxintips":"温馨提示"
+
   },
   "share": {
     "wechat": "微信",

src/locales/zh_HK.json

@@ -70,7 +70,10 @@
     "onlyOffLine":"僅供線下門店購買",
     "guige":"規格：",
     "shuliang":"數量：",
-    "guideSearch":"專櫃搜索"
+    "guideSearch":"專櫃搜索",
+    "isOver":"是否結束帶看？",
+    "wenxintips":"溫馨提示"
+
   },
   "share": {
     "wechat": "微信",

vue.config.js

@@ -11,7 +11,7 @@ module.exports = defineConfig({
   },
   devServer: {
     // port: 443,
-    // https: true,
+    https: true,
     // disableHostCheck: true,
     headers: {
       "Cache-Control": "no-store",