feat: Add language options to the embed

frontend/src/i18n/index.ts

@@ -12,7 +12,31 @@ import { getBrowserLocale } from '@/utils/utils'
 const elementKoLocale = elementEnLocale
 const { wsCache } = useCache()
 
+const isEmbeddedRoute = () => {
+  const hash = window.location.hash
+  if (!hash) return false
+  const hashPath = hash.substring(1).split('?')[0]
+  return ['/assistant', '/embeddedPage', '/embeddedCommon'].includes(hashPath)
+}
+
+const getUrlLang = () => {
+  try {
+    const hash = window.location.hash
+    if (!hash) return null
+    const hashQuery = hash.substring(1).split('?')[1]
+    if (!hashQuery) return null
+    return new URLSearchParams(hashQuery).get('lang')
+  } catch {
+    return null
+  }
+}
+
 const getDefaultLocale = () => {
+  // 嵌入式页面的 URL lang 参数（第三种国际化渠道），优先级最高
+  const urlLang = getUrlLang()
+  if (urlLang && isEmbeddedRoute()) {
+    return urlLang
+  }
   return wsCache.get('user.language') || getBrowserLocale() || 'zh-CN'
 }
 

frontend/src/views/embedded/common.vue

@@ -30,6 +30,13 @@ const divLoading = ref(true)
 const eventName = 'sqlbot_embedded_event'
 const busiFlag = ref('ds')
 
+const setParamLanguage = () => {
+  const lang = route.query.lang
+  if (lang) {
+    userStore.setLanguage(lang as string)
+  }
+}
+
 const isWsAdmin = computed(() => {
   return userStore.isAdmin || userStore.isSpaceAdmin
 })
@@ -49,13 +56,21 @@ const communicationCb = async (event: any) => {
       assistantStore.setType(type)
       assistantStore.setToken(certificate)
       assistantStore.setAssistant(true)
-      await userStore.info()
+      try {
+        await userStore.info()
+      } catch (e) {
+        console.error('Failed to fetch user info in common embedded:', e)
+      }
+      setParamLanguage()
       loading.value = false
       return
     }
     if (event.data?.hostOrigin) {
       assistantStore.setHostOrigin(event.data?.hostOrigin)
     }
+    if (event.data?.busi == 'setLang') {
+      userStore.setLanguage(event.data.lang)
+    }
   }
 }
 
@@ -82,6 +97,7 @@ const registerReady = (assistantId: any) => {
 }
 
 onBeforeMount(async () => {
+  setParamLanguage()
   const assistantId = route.query.id
   if (!assistantId) {
     ElMessage.error('Miss embedded id, please check embedded url')

frontend/src/views/embedded/index.vue

@@ -31,7 +31,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onBeforeMount, nextTick, onBeforeUnmount, ref, onMounted, reactive, computed } from 'vue'
+import {
+  onBeforeMount,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  onMounted,
+  reactive,
+  computed,
+  watch,
+} from 'vue'
 import ChatComponent from '@/views/chat/index.vue'
 import { request } from '@/utils/request'
 import LOGO from '@/assets/svg/logo-custom_small.svg'
@@ -42,6 +51,9 @@ import { assistantApi } from '@/api/assistant'
 import { useAssistantStore } from '@/stores/assistant'
 import { setCurrentColor } from '@/utils/utils'
 import { useI18n } from 'vue-i18n'
+import { i18n } from '@/i18n'
+import { useUserStore } from '@/stores/user'
+const userStore = useUserStore()
 
 const { t } = useI18n()
 const assistantStore = useAssistantStore()
@@ -92,6 +104,9 @@ const communicationCb = async (event: any) => {
     if (event.data?.busi == 'createConversation') {
       createChat()
     }
+    if (event.data?.busi == 'setLang') {
+      userStore.setLanguage(event.data.lang)
+    }
   }
 }
 const setFormatOnline = (text?: any) => {
@@ -128,6 +143,24 @@ const customSet = reactive({
   theme: '#1CBA90',
   header_font_color: '#1F2329',
 }) as { [key: string]: any }
+
+// 记录哪些字段被服务端 API 配置覆盖过，避免被 locale watcher 覆盖
+const configuredKeys = new Set<string>()
+
+// 监听 locale 变化，动态更新未被子定义覆盖的翻译字段
+watch(
+  () => i18n.global.locale.value,
+  () => {
+    if (!configuredKeys.has('welcome')) {
+      customSet.welcome = t('embedded.i_am_sqlbot')
+    }
+    if (!configuredKeys.has('welcome_desc')) {
+      customSet.welcome_desc = t('embedded.data_analysis_now')
+    }
+  },
+  { immediate: true }
+)
+
 const logo = ref()
 const basePath = import.meta.env.VITE_API_BASE_URL
 const baseUrl = basePath + '/system/assistant/picture/'
@@ -140,7 +173,14 @@ const setPageHeaderFontColor = (val: any) => {
   const ele = document.querySelector('body') as HTMLElement
   ele.style.setProperty('--ed-text-color-primary', val)
 }
+const setParamLanguage = () => {
+  const lang = route.query.lang
+  if (lang) {
+    userStore.setLanguage(lang as string)
+  }
+}
 onBeforeMount(async () => {
+  setParamLanguage()
   const assistantId = route.query.id
   if (!assistantId) {
     ElMessage.error('Miss assistant id, please check assistant url')
@@ -197,6 +237,7 @@ onBeforeMount(async () => {
           ![null, undefined].includes(rawData[key])
         ) {
           customSet[key] = rawData[key]
+          configuredKeys.add(key)
         }
       }
 

frontend/src/views/embedded/page.vue

@@ -22,6 +22,7 @@ import { assistantApi } from '@/api/assistant'
 import { useAssistantStore } from '@/stores/assistant'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useI18n } from 'vue-i18n'
+import { i18n } from '@/i18n'
 import { request } from '@/utils/request'
 import { setCurrentColor } from '@/utils/utils'
 import { useUserStore } from '@/stores/user'
@@ -41,6 +42,24 @@ const customSet = reactive({
   theme: '#1CBA90',
   header_font_color: '#1F2329',
 }) as { [key: string]: any }
+
+// 记录哪些字段被服务端 API 配置覆盖过，避免被 locale watcher 覆盖
+const configuredKeys = new Set<string>()
+
+// 监听 locale 变化，动态更新未被子定义覆盖的翻译字段
+watch(
+  () => i18n.global.locale.value,
+  () => {
+    if (!configuredKeys.has('welcome')) {
+      customSet.welcome = t('embedded.i_am_sqlbot')
+    }
+    if (!configuredKeys.has('welcome_desc')) {
+      customSet.welcome_desc = t('embedded.data_analysis_now')
+    }
+  },
+  { immediate: true }
+)
+
 const logo = ref()
 const basePath = import.meta.env.VITE_API_BASE_URL
 const baseUrl = basePath + '/system/assistant/picture/'
@@ -65,7 +84,12 @@ const communicationCb = async (event: any) => {
       if (type === 4) {
         assistantStore.setToken(certificate)
         assistantStore.setAssistant(true)
-        await userStore.info()
+        try {
+          await userStore.info()
+        } catch (e) {
+          console.error('Failed to fetch user info in embedded page:', e)
+        }
+        setParamLanguage()
         loading.value = false
         return
       }
@@ -84,6 +108,9 @@ const communicationCb = async (event: any) => {
     if (event.data?.busi == 'createConversation') {
       createChat()
     }
+    if (event.data?.busi == 'setLang') {
+      userStore.setLanguage(event.data.lang)
+    }
   }
 }
 
@@ -132,8 +159,15 @@ const setPageCustomColor = (val: any) => {
   setCurrentColor(val, ele)
 }
 
+const setParamLanguage = () => {
+  const lang = route.query.lang
+  if (lang) {
+    userStore.setLanguage(lang as string)
+  }
+}
 onBeforeMount(async () => {
   const assistantId = route.query.id
+  setParamLanguage()
   if (!assistantId) {
     ElMessage.error('Miss embedded id, please check embedded url')
     return
@@ -193,6 +227,7 @@ onBeforeMount(async () => {
           ![null, undefined].includes(rawData[key])
         ) {
           customSet[key] = rawData[key]
+          configuredKeys.add(key)
         }
       }