Vue3

<template>
  <UIKitProvider language="zh-CN">
    <YourApp />
  </UIKitProvider>
</template>

<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/chat-uikit-vue3';
import YourApp from './YourApp.vue';
</script>

<template>
  <div>
    <button @click="setLang('zh-CN')">中文</button>
    <button @click="setLang('en-US')">English</button>
    <div>当前的语言是: {{ lang }}</div>
    <UIKitProvider
      :language="lang"
      theme="light"
    >
      <YourApp />
    </UIKitProvider>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
import YourApp from './YourApp.vue';

type Language = 'en-US' | 'zh-CN';

const lang = ref<Language>('zh-CN');

const setLang = (language: Language) => {
  lang.value = language;
};
</script>

<template>
  <div>
    <div>当前的语言是: {{ language }}</div>
    <div>{{ t('MessageInput.enter') }}</div>
    <button @click="setLanguage('en-US')">English</button>
    <button @click="setLanguage('zh-CN')">中文</button>
  </div>
</template>

<script setup lang="ts">
import { useUIKit } from '@tencentcloud/chat-uikit-vue3';

const { t, language, setLanguage } = useUIKit();
</script>

<script lang="ts" setup>
import { UIKitProvider, useUIKit } from '@tencentcloud/chat-uikit-vue3';
import YourApp from './YourApp.vue';

const customLanguageResources = [
  // 替换现有词条
  {
    lng: 'zh-CN',
    translation: {
      MessageInput: {
        send: '我要发送', // 默认是"发送"
      },
    },
  },
  // 新增一种语言
  {
    lng: 'fr',
    translation: {
      MessageInput: {
        send: 'Je veux envoyer',
      },
    },
  },
];
</script>

<template>
  <UIKitProvider language="fr" theme="light">
    <YourApp />
  </UIKitProvider>
</template>

<template>
  <UIKitProvider 
    :language="language" 
    :language-resources="customResources"
  >
    <YourApp />
  </UIKitProvider>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { UIKitProvider } from '@tencentcloud/chat-uikit-vue3';
import YourApp from './YourApp.vue';

type SupportedLanguage = 'en-US' | 'zh-CN';

// 智能语言检测函数
const detectLanguage = (): SupportedLanguage => {
  // 1. 优先使用保存的语言设置
  const saved = localStorage.getItem('language') as SupportedLanguage;
  if (saved) return saved;
  
  // 2. 自动检测浏览器语言
  const browserLang = navigator.language;
  if (browserLang.startsWith('zh')) return 'zh-CN';
  else return 'en-US';
  
  // 3. 默认回退
  return 'auto';
};

// 初始化语言
const language = ref<SupportedLanguage>(detectLanguage());

// 监听语言变化并持久化
watch(language, (newLang) => {
  localStorage.setItem('language', newLang);
  console.log(`语言已切换为: ${newLang}`);
}, { immediate: true });
</script>