GenuiConfigProvider 组件 - 国际化配置

GenuiConfigProvider 组件支持国际化（i18n）功能，可以通过 locale 属性设置语言环境，通过 i18n 属性自定义国际化消息。

动态切换语言

可以通过响应式变量动态切换语言：

<template>
  <div>
    <select v-model="locale">
      <option value="zh_CN">简体中文</option>
      <option value="en_US">English</option>
    </select>
    <GenuiConfigProvider :locale="locale" :i18n="customI18n">
      <GenuiChat :url="url" />
    </GenuiConfigProvider>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue';

const locale = ref('zh_CN');
const customI18n = {
  // ... 自定义消息
};
</script>

自定义国际化消息

通过 i18n 属性可以自定义或覆盖默认的国际化文本。i18n 是一个对象，键为语言代码，值为该语言下的消息对象。

<template>
  <GenuiConfigProvider :locale="locale" :i18n="customI18n">
    <GenuiChat :url="url" />
  </GenuiConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GenuiConfigProvider, GenuiChat } from '@opentiny/genui-sdk-vue';
import type { I18nMessages } from '@opentiny/genui-sdk-vue';

const locale = ref('zh_CN');

const customI18n: I18nMessages = {
  zh_CN: {
    placeholder: {
      input: '请输入您的问题（自定义）',
    },
    footer: {
      aiGenerated: '内容由AI生成，仅供参考（已自定义）',
    },
  },
  en_US: {
    placeholder: {
      input: 'Please enter your question (customized)',
    },
    footer: {
      aiGenerated: 'Content generated by AI, for reference only (customized)',
    },
  },
};
</script>

全量messages

如果你需要自定制更多国际化字条，可以通过以下方式查看全量messages

import { useI18n } from '@opentiny/genui-sdk-vue';

const i18n = useI18n();

console.log(i18n.messages)

完整示例

loading