介绍
UIKitProvider 是为整个应用提供主题、多语言支持的容器层。用于为容器内的所有组件提供颜色主题、国际化等全局状态管理，必须包裹在聊天组件的最外层。
主题管理：支持明暗主题切换和自定义主题色。
国际化支持：内置多语言支持，可扩展自定义语言包。
UIKitProvider 组件
Props 参数
参数 | 类型 | 默认值 | 描述 |
language | 'zh-CN' | 'en-US' | 'zh-CN' | 初始语言 |
theme | 'light' | 'dark' | 'light' | 初始主题颜色 |
languageResources | LanguageResource[] | [] | 自定义语言词条 |
languageResources 定义：
interface LanguageResource {lng: string;translation: Record<string, any>;}
使用示例：
<template><UIKitProvider language="zh-CN" theme="light"><YourCode /></UIKitProvider></template><script setup lang="ts">import YourCode from './YourCode.vue';</script>
useUIKit Hook
useUIKit 是一个获取当前主题、语言等信息的 Hook 函数，建议在 UIKitProvider 内部使用。返回值
字段 | 类型 | 描述 |
language | string | 当前语言 |
t | i18n['t'] | 国际化翻译函数 |
i18n | i18n | i18next 实例 |
theme | ThemeType | 当前主题 |
setTheme | (theme: 'light' | 'dark') => void | 设置主题方法 |
使用示例
最简单的使用方式，为应用提供基础的主题和语言支持：
<script>import { UIKitProvider, useUIKit } from '@tencentcloud/chat-uikit-vue3';const { language, theme, setTheme } = useUIKit();</script><template><UIKitProvider theme="light" language="zh-CN"><div>current language: {{ language }}current theme: {{ theme }}</div><button @click="() => setTheme("dark")"> 切换主题 </button></UIKitProvider></template>
修改语言词条/新增语言
下面的示例代码展示如何使用多语言功能：
<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" :languageResources="customLanguageResources"><YourApp /></UIKitProvider></template>
实践案例
案例1：主题颜色的持久化
<template><UIKitProvider :theme="theme"><YourApp /></UIKitProvider></template><script setup lang="ts">import { ref, watch } from 'vue';import { UIKitProvider } from 'uikit-component-vue3';import YourApp from './YourApp.vue';// 从 localStorage 初始化主题const theme = ref<'light' | 'dark'>(() => {return (localStorage.getItem('theme') as 'light' | 'dark') || 'light';});// 监听主题变化并持久化watch(theme, (newTheme) => {localStorage.setItem('theme', newTheme);}, { immediate: true });</script>
案例2：语言检测与持久化
<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>
