国际化支持

TinySearchBox 组件库内置了国际化（i18n）支持，可以自动适配父级项目的国际化配置，也支持使用组件库内置的语言包。

支持的语言

组件库内置支持以下语言：

• zh-CN - 简体中文（默认）
• en-US - 英文

使用方式

Vue 3 项目

在 Vue 3 项目中，组件库会自动检测并使用项目的 i18n 配置：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import TinySearchBox, { zhCN, enUS, setGlobalApp } from '@opentiny/vue-search-box'

// 创建 i18n 实例
const i18n = createI18n({
  legacy: false,  // 使用 Composition API 模式
  locale: 'zh-CN', 
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

const app = createApp(App)

// 使用 i18n
app.use(i18n)

// 使用 TinySearchBox
app.use(TinySearchBox)

// 设置全局 app 实例，让 search-box 能使用父级项目的 i18n
setGlobalApp(app)

app.mount('#app')

Vue 2 项目

在 Vue 2 项目中，需要传递 i18n 实例：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import TinySearchBox, { zhCN, enUS, setGlobalApp } from '@opentiny/vue-search-box'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})

Vue.use(TinySearchBox)

// 注意：Vue2 环境下，传递 i18n 实例而不是 Vue 构造函数
setGlobalApp({ $i18n: i18n })

const app = new Vue({
  i18n,
  render: (h) => h(App)
})

app.$mount('#app')

语言切换

组件库会自动响应父级项目的语言切换。当你在项目中切换语言时，组件库的文本也会自动更新：

// Vue 3
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
locale.value = 'en-US' // 切换语言

// Vue 2
this.$i18n.locale = 'en-US' // 切换语言

自定义语言包

如果你需要自定义语言包，可以使用组件库提供的语言包作为基础：

import { zhCN, enUS, addLocale } from '@opentiny/vue-search-box'

// 添加自定义语言包
addLocale('zh-TW', {
  tvp: {
    tvpSearchbox: {
      defaultPlaceholder: '請選擇屬性篩選，或輸入關鍵字',
      addPlaceholder: '添加篩選條件',
      // ... 其他翻译
    }
  }
})

内置语言包键值

组件库使用以下命名空间和键值：

• 命名空间：tvp.tvpSearchbox
• 主要键值：
  • defaultPlaceholder - 默认占位符
  • addPlaceholder - 添加筛选条件占位符
  • tagPlaceholder - 标签占位符
  • matched - 潜在匹配项
  • allValues - 所有值
  • allProperty - 全部属性
  • clearAll - 清空
  • confirm - 确定
  • cancel - 取消
  • noData - 暂无匹配数据
  • selectAll - 全选
  • help - 帮助提示
  • 等等...

完整的键值列表请参考组件库源码中的 zh_CN.ts 和 en_US.ts 文件。

与父级项目 i18n 集成

组件库会优先使用父级项目的 i18n 配置。如果父级项目已经配置了相同的键值，组件库会使用父级项目的翻译；否则会使用组件库内置的语言包。

这确保了：

1. 如果你的项目已经有完整的 i18n 配置，组件库会自动使用你的翻译
2. 如果你的项目没有配置某些键值，组件库会使用内置的默认翻译
3. 组件库的文本会自动响应语言切换

注意事项

1. Vue 2 特殊处理：在 Vue 2 环境中，setGlobalApp 需要传递包含 $i18n 的对象，而不是 Vue 构造函数
2. 语言包优先级：父级项目的 i18n 配置优先于组件库内置语言包
3. 实时更新：组件库会自动监听语言变化，无需手动刷新组件