更新 i18n & css

src/language/en.json

@@ -19,6 +19,7 @@
   "current_location": "Current location",
   "select_navigation_location": "Please select navigation location",
   "system_construction": "The system is under construction. <br> The voice input function is disabled.",
+  "close": "Close",
   "service_info": {
     "title": "Service information",
     "inquiry_prompt": "What are you searching for?<br>Or please enter your question",

src/language/ja.json

@@ -19,6 +19,7 @@
   "current_location": "當前位置",
   "select_navigation_location": "請選擇導覽位置",
   "system_construction": "系統建置中，<br />關閉語音輸入功能。",
+  "close": "關閉",
   "service_info": {
     "title": "サービス情報",
     "inquiry_prompt": "サービス情報を選択<br>下のメッセージボックスにご質問を入力してください。",

src/language/ko.json

@@ -19,6 +19,7 @@
   "current_location": "當前位置",
   "select_navigation_location": "請選擇導覽位置",
   "system_construction": "系統建置中，<br />關閉語音輸入功能。",
+  "close": "關閉",
   "service_info": {
     "title": "服務資訊",
     "inquiry_prompt": "請問您想查詢？",

src/language/zh.json

@@ -19,6 +19,7 @@
   "current_location": "當前位置",
   "select_navigation_location": "請選擇導覽位置",
   "system_construction": "系統建置中，<br>關閉語音輸入功能。",
+  "close": "關閉",
   "service_info": {
     "title": "服務資訊",
     "inquiry_prompt": "請問您想查詢？<br>或於下方文字框輸入您的問題",

src/main.js

@@ -10,16 +10,6 @@ import VueGtag from "vue-gtag-next";
 
 // Vuetify
 import vuetify from './plugins/vuetify'
-// import '@mdi/font/css/materialdesignicons.css'
-// import 'vuetify/styles'
-// import { createVuetify } from 'vuetify'
-// import * as components from 'vuetify/components'
-// import * as directives from 'vuetify/directives'
-
-// const vuetify = createVuetify({
-//     components,
-//     directives,
-// })
 
 const app = createApp(App)
 

src/views/HomeView.vue

@@ -432,17 +432,14 @@ function chooseLang(lang) {
     body: t("service"),
   });
 
-  // messages.value.push({
-  //   label: "text",
-  //   author: "ai",
-  //   body: "請選擇問題類型：",
-  // });
-
-  // messages.value.push({
-  //   label: "btn-list",
-  //   author: "ai",
-  //   body: "",
-  // });
+  // 判斷語言修改 title
+  const language = localStorage.getItem("lang") || "zh-tw";
+  console.log("language", language);
+  if (language === "zh-tw") {
+    document.title = "New 台北101 AI智能客服";
+  } else if (language === "en-us") {
+    document.title = "New Taipei 101 AI Intelligent Customer Service";
+  }
 
   setAd();
   handleClick();
@@ -1895,20 +1892,56 @@ function handleObservationDialog(value) {
     messages.value.push({
       label: "garden_route",
       author: "ai",
-      body: [
-        "B1 鼎泰豐旁 數位屏幕",
-        "B1 中環WOW屏幕",
-        "B1 信義橘梯梯廳",
-        "B1 信義綠梯梯廳",
-        "B1 松智藍梯梯廳",
-        "1F 信義綠梯出入口",
-        "1F 松智梯廳",
-        "2F 松智藍梯梯廳",
-      ],
+      body: gardenRouteList,
+      // body: [
+      //   "B1 鼎泰豐旁 數位屏幕",
+      //   "B1 中環WOW屏幕",
+      //   "B1 信義橘梯梯廳",
+      //   "B1 信義綠梯梯廳",
+      //   "B1 松智藍梯梯廳",
+      //   "1F 信義綠梯出入口",
+      //   "1F 松智梯廳",
+      //   "2F 松智藍梯梯廳",
+      // ],
     });
   }
 }
 
+let gardenRouteList = reactive([
+  {
+    value: "B1 鼎泰豐旁 數位屏幕",
+    text: "location.b1_din_tai_fung",
+  },
+  {
+    value: "B1 中環WOW屏幕",
+    text: "location.b1_centre",
+  },
+  {
+    value: "B1 信義橘梯梯廳",
+    text: "location.b1_elevator_no_2",
+  },
+  {
+    value: "B1 信義綠梯梯廳",
+    text: "location.b1_elevator_no_4",
+  },
+  {
+    value: "B1 松智藍梯梯廳",
+    text: "location.b1_elevator_no_3",
+  },
+  {
+    value: "1F 信義綠梯出入口",
+    text: "location.1f_south_xinyi",
+  },
+  {
+    value: "1F 松智梯廳",
+    text: "location.1f_elevator_no_3",
+  },
+  {
+    value: "2F 松智藍梯梯廳",
+    text: "location.2f_elevator_no_3",
+  },
+]);
+
 // 購物及優惠對話
 function handleShoppingDialog(value) {
   console.log("value", value);
@@ -2561,11 +2594,9 @@ function handleVoice(state) {
                 </v-card-text>
 
                 <template v-slot:actions>
-                  <v-btn
-                    class="ms-auto"
-                    text="關閉"
-                    @click="qrCodeDialog = false"
-                  ></v-btn>
+                  <v-btn class="ms-auto" @click="qrCodeDialog = false">
+                    {{ t("close") }}
+                  </v-btn>
                 </template>
               </v-card>
             </v-dialog>
@@ -2697,8 +2728,10 @@ function handleVoice(state) {
             >
               <swiper-slide v-for="item in message.body">
                 <div class="btn-container">
-                  <button @click="getArviews(item, item, 'garden')">
-                    {{ item }}
+                  <button
+                    @click="getArviews(item.value, t(item.text), 'garden')"
+                  >
+                    {{ t(item.text) }}
                   </button>
                 </div>
               </swiper-slide>
@@ -2719,7 +2752,8 @@ function handleVoice(state) {
               <p v-html="message.body.words"></p>
 
               <button @click="arVideoDialog = true" class="ar-link my-3">
-                進行 AR 導覽
+                <!-- 進行 AR 導覽 -->
+                {{ t("ar_tour") }}
               </button>
 
               <v-dialog v-model="arVideoDialog" width="auto">
@@ -2744,11 +2778,9 @@ function handleVoice(state) {
                   </v-card-text>
 
                   <template v-slot:actions>
-                    <v-btn
-                      class="ms-auto"
-                      text="關閉"
-                      @click="arVideoDialog = false"
-                    ></v-btn>
+                    <v-btn class="ms-auto" @click="arVideoDialog = false">
+                      {{ t("close") }}
+                    </v-btn>
                   </template>
                 </v-card>
               </v-dialog>
@@ -3360,22 +3392,22 @@ function handleVoice(state) {
 
       <div class="d-flex flex-column align-center">
         <audio v-if="audioURL" :src="audioURL" controls></audio>
-        <!-- <p
+        <p
           v-if="!isRecording"
           class="mb-3 text-center"
           v-html="t('system_construction')"
-        ></p> -->
-        <p v-if="!isRecording" class="mb-3">點選以進行錄音</p>
+        ></p>
+        <!-- <p v-if="!isRecording" class="mb-3">點選以進行錄音</p> -->
         <p v-else class="mb-3">錄音中：{{ recordTime }} 秒</p>
         <!-- 錄音按鈕 -->
-        <v-btn
+        <!-- <v-btn
           v-if="!isRecording"
           @click="recStart"
           icon="mdi-circle"
           size="large"
         >
           <v-icon icon="mdi-circle" color="red" size="large"></v-icon>
-        </v-btn>
+        </v-btn> -->
 
         <v-btn
           v-else
@@ -3974,11 +4006,11 @@ function handleVoice(state) {
       }
 
       .ticket-slide {
-        width: 80%;
+        width: 90%;
         position: relative;
 
         .slide-item {
-          max-width: 60vw;
+          max-width: 70vw;
           border-radius: 10px;
           background-color: white;
         }
@@ -4294,6 +4326,7 @@ function handleVoice(state) {
   background-color: var(--main-color);
   border-radius: 5px;
   text-decoration: none;
+  letter-spacing: 1px;
 }
 
 .ar-card {