业务组件 i18n 接入指南¶

<template>
  <ComponentContainer>
    <MainContent />
  </ComponentContainer>
</template>
<script setup>
  import { ComponentContainer } from "@bams-app/components";
  import MainContent from "./business/MainContent.vue";

  /** 注意：根组件不写业务逻辑代码，用于通用配置和work配置 */
  defineOptions({
    name: "uiI18nDemo",
    dicts: [],
    config: {},
  });
</script>

<script setup>
import { useComponentI18n } from "@bams-app/i18n";
import { useLocale } from "@bams-app/i18n";

// 使用业务组件的命名空间
const { t } = useComponentI18n();

// 也可以使用通用的 useLocale
const { setLocale } = useLocale();
</script>

<template>
  <div>
    <h2>{{ t('common.title') }}</h2>
    <p>{{ t('modules.basic.simple') }}</p>
    <p>{{ t('modules.basic.interpolation', { name: '张三' }) }}</p>
  </div>
</template>

<script setup>
import { useLocalI18n, useComponentI18n } from "@bams-app/i18n";

const { t } = useComponentI18n();

// 定义局部消息字典
const localMessages = {
  "zh-CN": {
    localTitle: "这是局部翻译的标题",
    localContent: "这是局部翻译的内容",
    onlyLocal: "这个翻译只存在于局部字典中",
    welcome: "欢迎，{name}！",
  },
  "en-US": {
    localTitle: "This is local translation title",
    localContent: "This is local translation content",
    onlyLocal: "This translation only exists in local dictionary",
    welcome: "Welcome, {name}!",
  },
};

// 基本用法 - 继承父组件的 namespace
const localT = useLocalI18n({
  messages: localMessages,
  // 可选：指定局部 namespace
  // namespace: 'myLocalModule',
  // 可选：关闭回退到全局（默认 true）
  // fallbackToGlobal: false,
});
</script>

<template>
  <div>
    <!-- 方式1：直接调用 translator -->
    <p>{{ localT('localTitle') }}</p>
    <p>{{ localT('localContent') }}</p>
    <p>{{ localT('welcome', { name: '张三' }) }}</p>

    <!-- 方式2：通过 .t 调用 -->
    <p>{{ localT.t('localTitle') }}</p>

    <!-- 检查翻译是否存在 -->
    <p v-if="localT.te('onlyLocal')">{{ localT('onlyLocal') }}</p>

    <!-- 回退到全局：局部找不到时自动使用全局 -->
    <p>{{ localT('common.title') }}</p>
  </div>
</template>

<!-- 父组件：提供局部翻译 -->
<template>
  <LocalI18nProvider 
    :messages="localMessages" 
    namespace="myDialog"
    :fallback-to-global="true"
  >
    <template #default="{ t: providerT }">
      <!-- 通过 slot 直接使用 -->
      <div>
        <h3>{{ providerT('dialogTitle') }}</h3>
      </div>

      <!-- 子组件通过 useLocalI18nProvided 消费 -->
      <DialogContent />
    </template>
  </LocalI18nProvider>
</template>

<script setup>
import { LocalI18nProvider } from "@bams-app/i18n";
import DialogContent from './DialogContent.vue';

const localMessages = {
  "zh-CN": {
    dialogTitle: "确认对话框",
    dialogContent: "您确定要执行此操作吗？",
    confirmBtn: "确定",
  },
  "en-US": {
    dialogTitle: "Confirm Dialog",
    dialogContent: "Are you sure you want to do this?",
    confirmBtn: "Confirm",
  },
};
</script>

<!-- 子组件：消费父组件提供的局部翻译 -->
<script setup>
import { useLocalI18nProvided } from "@bams-app/i18n";

// 获取父组件 provide 的局部翻译
// 如果找不到，会自动回退到全局翻译并警告
const localT = useLocalI18nProvided();
</script>

<template>
  <div class="dialog-content">
    <p>{{ localT('dialogContent') }}</p>
    <a-button type="primary">{{ localT('confirmBtn') }}</a-button>
  </div>
</template>

<script setup>
import { useLocalI18n } from "@bams-app/i18n";

const localMessages = {
  "zh-CN": {
    localKey: "中文局部翻译",
  },
  "en-US": {
    localKey: "English local translation",
  },
};

const localT = useLocalI18n({
  messages: localMessages,
  fallbackToGlobal: true, // 默认 true
});
</script>

<template>
  <div>
    <!-- 1. 优先使用局部翻译 -->
    <p>{{ localT('localKey') }}</p>

    <!-- 2. 局部找不到，回退到全局（假设全局有 'common.title'） -->
    <p>{{ localT('common.title') }}</p>

    <!-- 3. 都找不到，返回 key 本身 -->
    <p>{{ localT('nonExistentKey') }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useLocalI18n } from "@bams-app/i18n";

const isDarkMode = ref(false);

// 响应式的 messages
const dynamicMessages = computed(() => ({
  "zh-CN": {
    theme: isDarkMode.value ? "深色模式" : "浅色模式",
  },
  "en-US": {
    theme: isDarkMode.value ? "Dark Mode" : "Light Mode",
  },
}));

const localT = useLocalI18n({
  messages: dynamicMessages, // 传入 ref 或 computed
});
</script>

<template>
  <div>
    <a-switch v-model:checked="isDarkMode" />
    <p>{{ localT('theme') }}</p>
  </div>
</template>

<script setup>
import { provideComponentI18n } from "@bams-app/i18n";

// 显式提供 namespace
provideComponentI18n("myCustomNamespace");
</script>