chore: 移动端应用提问中离开页面打断对话

src/locales/langs/en.yaml

@@ -166,6 +166,7 @@ common_module:
     overwrite_image_tip: 'The newly uploaded image overwrites the original image, whether to continue uploading'
     upload_image_size_error_message: 'The size of the uploaded image cannot exceed 5 MB'
     upload_image_format_error_message: 'Only png, jpg, jpeg, webp format images can be uploaded, please upload again'
+    do_not_exit_page: 'Do not leave the page during the generation to avoid interrupting the conversation'
 
   data_table_module:
     action: 'Controls'

src/locales/langs/zh-cn.yaml

@@ -165,6 +165,7 @@ common_module:
     overwrite_image_tip: '新上传的图片会覆盖原有图片，是否继续上传'
     upload_image_size_error_message: '上传图片大小不能超过5M'
     upload_image_format_error_message: '只能上传png、jpg、jpeg、webp格式图片，请重新上传'
+    do_not_exit_page: '生成期间请勿离开页面，以免中断对话流程'
 
   data_table_module:
     action: '操作'

src/locales/langs/zh-hk.yaml

@@ -165,6 +165,7 @@ common_module:
     overwrite_image_tip: '新上傳的圖片會覆蓋原有圖片，是否繼續上傳'
     upload_image_size_error_message: '上傳圖片大小不能超過5M'
     upload_image_format_error_message: '只能上傳png、jpg、jpeg、webp格式圖片，請重新上傳'
+    do_not_exit_page: '生成期間請勿離開頁面，以免中斷對話流程'
 
   data_table_module:
     action: '操作'

src/views/share/components/footer-input.vue

@@ -440,6 +440,7 @@ function ttsSocketSendText(text: string, audioUrlSerialNo: number, messageId: st
 
 defineExpose({
   blockMessageResponse,
+  errorMessageResponse,
 })
 </script>
 

src/views/share/components/message-list.vue

 <script setup lang="ts">
+import { computed, nextTick, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import MessageItem from './message-item.vue'
 import ContinueQuestion from './continue-question.vue'
 import { useScroll } from '@/composables/useScroll'
 import { PersonalAppConfigState } from '@/store/types/personal-app-config'
-import { computed, nextTick, watch } from 'vue'
 import { useBackBottom } from '@/composables/useBackBottom'
+import { useLayoutConfig } from '@/composables/useLayoutConfig'
 
 interface Props {
   messageList: Map<string, ConversationMessageItem>
@@ -22,6 +24,10 @@ defineEmits<{
   audioPause: []
 }>()
 
+const { t } = useI18n()
+
+const { isMobile } = useLayoutConfig()
+
 const { scrollRef, scrollToBottom } = useScroll()
 
 const { visible, clickBackBottom, throttleScrollContainer } = useBackBottom(scrollRef, scrollToBottom)
@@ -67,6 +73,10 @@ function handleScrollToBottom() {
       />
     </div>
 
+    <p v-show="isMobile && isAnswerResponseLoading" class="ml-1 mt-[7px] text-xs text-[#84868c]">
+      {{ t('common_module.dialogue_module.do_not_exit_page') }}
+    </p>
+
     <div v-show="isShowContinueQuestion">
       <ContinueQuestion :continuous-question-list="continuousQuestionList" />
     </div>

src/views/share/share-application-mobile.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, ref, shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Howl } from 'howler'
+import { useEventListener } from '@vueuse/core'
 import type { ValueOf } from 'type-fest'
 import PageHeader from './components/mobile-page-header.vue'
 import Preamble from './components/preamble.vue'
@@ -30,6 +31,12 @@ const userStore = useUserStore()
 
 const { isMobile } = useLayoutConfig()
 
+useEventListener(document, 'visibilitychange', () => {
+  if (document.visibilityState === 'hidden') {
+    handleExitPage()
+  }
+})
+
 const fullScreenLoading = ref(false)
 const agentId = ref('')
 const dialogsId = ref('')
@@ -315,6 +322,11 @@ function handleInitSoundPlay() {
     },
   })
 }
+
+// 退出页面中断对话
+function handleExitPage() {
+  footerInputRef.value?.errorMessageResponse()
+}
 </script>
 
 <template>

types/locales.d.ts

@@ -165,6 +165,7 @@ declare namespace I18n {
         overwrite_image_tip: string
         upload_image_size_error_message: string
         upload_image_format_error_message: string
+        do_not_exit_page: string
       }
 
       data_table_module: {