UniApp X UI 组件库

基于 uni-app x 的移动端 UI 组件库，提供 42+ 个高质量组件。

✨ 特性

• 🎨 42+ 个精美组件
• 💪 使用 TypeScript 开发，提供完整的类型定义
• 📱 专为 uni-app x 优化
• 🔥 使用 Vue 3 Composition API
• 🎯 支持 defineModel 双向绑定
• 📦 支持按需引入
• 🌈 统一的设计规范

📦 安装

npm install tang-ui-x
# 或
yarn add tang-ui-x
# 或
pnpm add tang-ui-x

🔨 使用

方式一：easycom 自动导入（推荐）

在 pages.json 中配置 easycom：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^T(.*)": "tang-ui-x/components/T$1/index.uvue",
      "^Tabs$": "tang-ui-x/components/Tabs/index.uvue"
    }
  }
}

然后在页面中直接使用：

<template>
  <view>
    <TButton type="primary">按钮</TButton>
    <TInput v-model="value" placeholder="请输入" />
  </view>
</template>

方式二：手动引入组件

<script setup lang="uts">
// 直接引入组件文件
</script>

<template>
  <view>
    <TButton type="primary">按钮</TButton>
  </view>
</template>

<script module="TButton" lang="uts">
  import TButton from 'tang-ui-x/components/TButton/index.uvue'
  export default TButton
</script>

方式三：使用工具函数和 Composables

<script setup lang="uts">
import { useToast, useTheme, useModal } from 'tang-ui-x'

const toast = useToast()
const theme = useTheme()

function showMessage() {
  toast.show({
    message: '操作成功',
    type: 'success'
  })
}
</script>

🌍 国际化 (i18n)

Tang UI X 内置了完整的多语言支持系统，让您的应用轻松支持多种语言。

内置语言

组件库默认支持以下语言：

• 🇨🇳 简体中文 (zh-CN) - 默认语言
• 🇺🇸 英语 (en-US)
• 🇭🇰 繁体中文 (zh-TW)

基本使用

在组件中使用翻译

<script setup lang="uts">
import { useI18n } from 'tang-ui-x'

const { $t, locale, setLocale, availableLocales } = useI18n()

// 获取翻译文本
const confirmText = $t('common.confirm')  // "确定"
const cancelText = $t('common.cancel')    // "取消"

// 带参数的翻译
const greeting = $t('common.hello', { name: '张三' })  // "你好，张三"

// 切换语言
function switchLanguage() {
  setLocale('en-US')
}
</script>

<template>
  <view>
    <text>{{ confirmText }}</text>
    <text>当前语言: {{ locale }}</text>
    <button @click="switchLanguage">Switch to English</button>
  </view>
</template>

useI18n API

useI18n() 返回以下属性和方法：

• $t(key, params?) - 翻译函数，获取指定键的翻译文本
  • key: 翻译键，格式为 moduleName.key（如 common.confirm）
  • params: 可选的插值参数对象
• locale - 当前语言代码（响应式）
• setLocale(code) - 切换语言函数
• availableLocales - 可用语言列表（响应式）

全局语言切换

在应用的任何位置使用全局函数切换语言：

<script setup lang="uts">
import { setLanguage, getCurrentLocale, getAvailableLocales } from 'tang-ui-x'

// 切换到英语
const success = setLanguage('en-US')
console.log('切换成功:', success)  // true

// 获取当前语言
const currentLang = getCurrentLocale()  // 'en-US'

// 获取所有可用语言
const languages = getAvailableLocales()  // ['zh-CN', 'en-US', 'zh-TW']
</script>

<template>
  <view>
    <button @click="setLanguage('zh-CN')">中文</button>
    <button @click="setLanguage('en-US')">English</button>
    <button @click="setLanguage('zh-TW')">繁體中文</button>
  </view>
</template>

注册自定义语言包

方式一：注册新语言

添加组件库未内置的语言（如日语、韩语等）：

import { registerLocale, setLanguage } from 'tang-ui-x'

// 注册日语语言包
registerLocale('ja-JP', {
  common: {
    confirm: '確認',
    cancel: 'キャンセル',
    ok: 'OK',
    close: '閉じる',
    loading: '読み込み中...',
    noData: 'データなし'
  },
  dialog: {
    title: 'ヒント',
    confirmText: '確認',
    cancelText: 'キャンセル'
  },
  empty: {
    title: 'データなし',
    description: '関連コンテンツがありません',
    actionText: '更新'
  },
  searchBar: {
    placeholder: '検索キーワードを入力',
    cancelText: 'キャンセル'
  }
  // ... 其他组件模块
})

// 切换到日语
setLanguage('ja-JP')

方式二：覆盖默认翻译

只覆盖部分翻译文本，其他保持默认：

import { registerLocale } from 'tang-ui-x'

// 自定义简体中文的部分翻译
registerLocale('zh-CN', {
  common: {
    confirm: '好的',  // 覆盖默认的"确定"
    cancel: '算了'    // 覆盖默认的"取消"
    // 其他键（ok, close, loading 等）保持默认值
  }
  // 其他模块（dialog, empty 等）保持默认翻译
})

语言包注册模式

Tang UI X 提供了两种语言包注册模式，以满足不同的使用场景：合并模式（merge） 和 替换模式（replace）。

合并模式（默认）

合并模式会将新语言包与现有语言包合并，新内容覆盖旧内容，但未覆盖的内容会被保留。这是 registerLocale 函数的默认行为。

使用场景：

• 只想覆盖部分翻译文本
• 添加新的翻译键而不影响现有翻译
• 逐步自定义组件库的翻译

示例 1：覆盖部分通用文本

import { registerLocale } from 'tang-ui-x'

// 只覆盖 common 模块的部分键
registerLocale('zh-CN', {
  common: {
    confirm: '好的',  // 覆盖默认的"确定"
    cancel: '算了'    // 覆盖默认的"取消"
    // ok, close, loading, noData 等其他键保持默认值
  }
  // dialog, empty, searchBar 等其他模块保持默认翻译
})

// 结果：
// - common.confirm → "好的"（已覆盖）
// - common.cancel → "算了"（已覆盖）
// - common.ok → "好的"（保持默认）
// - common.close → "关闭"（保持默认）
// - dialog.title → "提示"（保持默认）
// - empty.title → "暂无数据"（保持默认）

示例 2：添加新的翻译键

import { registerLocale } from 'tang-ui-x'

// 为现有语言添加新的翻译键
registerLocale('zh-CN', {
  common: {
    save: '保存',      // 新增键
    delete: '删除',    // 新增键
    edit: '编辑'       // 新增键
  },
  // 添加新的自定义模块
  myComponent: {
    title: '我的组件',
    description: '这是自定义组件'
  }
})

// 原有的所有翻译都会保留，只是新增了这些键

示例 3：使用 registerLocaleWithMode 显式指定合并模式

import { registerLocaleWithMode } from 'tang-ui-x'

// 显式指定合并模式（与 registerLocale 效果相同）
registerLocaleWithMode('zh-CN', {
  common: {
    confirm: '好的'
  }
}, 'merge')

替换模式

替换模式会完全替换现有语言包，不保留任何原有内容。使用此模式时，您需要提供完整的语言包，否则缺失的模块和键将无法使用。

使用场景：

• 完全自定义某个语言的所有翻译
• 从外部 JSON 文件加载完整的语言包
• 确保语言包的完整性和一致性

方式 1：使用 replaceLocale 函数

import { replaceLocale } from 'tang-ui-x'

// 完全替换简体中文语言包
replaceLocale('zh-CN', {
  common: {
    confirm: '好的',
    cancel: '取消',
    ok: 'OK',
    close: '关闭',
    loading: '加载中...',
    noData: '暂无数据'
  },
  dialog: {
    title: '提示',
    confirmText: '好的',
    cancelText: '取消'
  },
  empty: {
    title: '暂无数据',
    description: '当前没有相关内容',
    actionText: '刷新试试'
  },
  searchBar: {
    placeholder: '请输入搜索关键词',
    cancelText: '取消'
  }
  // 必须提供所有组件模块，否则缺失的模块将无法使用
})

// 注意：原有的所有翻译都被清除，只保留新提供的内容

方式 2：使用 registerLocaleWithMode 指定替换模式

import { registerLocaleWithMode } from 'tang-ui-x'

// 使用替换模式注册语言包
registerLocaleWithMode('zh-CN', {
  common: {
    confirm: '好的',
    cancel: '取消'
    // ... 其他键
  },
  dialog: {
    title: '提示'
    // ... 其他键
  }
  // ... 其他模块
}, 'replace')

从 JSON 文件注册语言包

您可以将语言包保存为 JSON 文件，然后导入并注册。这种方式特别适合管理大型语言包或从外部系统加载翻译。

JSON 文件格式：

// custom-zh-CN.json
{
  "common": {
    "confirm": "好的",
    "cancel": "取消",
    "ok": "OK",
    "close": "关闭",
    "loading": "加载中...",
    "noData": "暂无数据"
  },
  "dialog": {
    "title": "提示",
    "confirmText": "好的",
    "cancelText": "取消"
  },
  "empty": {
    "title": "暂无数据",
    "description": "当前没有相关内容",
    "actionText": "刷新试试"
  },
  "searchBar": {
    "placeholder": "请输入搜索关键词",
    "cancelText": "取消"
  }
}

使用合并模式加载 JSON 文件：

import { registerLocale } from 'tang-ui-x'
import customZhCN from './locales/custom-zh-CN.json'

// 合并模式：保留未覆盖的默认翻译
registerLocale('zh-CN', customZhCN)

使用替换模式加载 JSON 文件：

import { replaceLocale } from 'tang-ui-x'
import completeZhCN from './locales/complete-zh-CN.json'

// 替换模式：完全替换，不保留默认翻译
replaceLocale('zh-CN', completeZhCN)

从多个 JSON 文件组合语言包：

import { registerLocale } from 'tang-ui-x'
import commonTranslations from './locales/common.json'
import dialogTranslations from './locales/dialog.json'
import emptyTranslations from './locales/empty.json'

// 组合多个 JSON 文件
const customLocale = {
  common: commonTranslations,
  dialog: dialogTranslations,
  empty: emptyTranslations
}

// 注册组合后的语言包
registerLocale('zh-CN', customLocale)

两种模式的对比

| 特性 | 合并模式（merge） | 替换模式（replace） | |------|------------------|-------------------| | 默认行为 | ✓ 是（registerLocale） | ✗ 否（需显式使用） | | 保留原有内容 | ✓ 是 | ✗ 否 | | 覆盖指定键 | ✓ 是 | ✓ 是 | | 需要完整语言包 | ✗ 否 | ✓ 是 | | 适合部分自定义 | ✓ 是 | ✗ 否 | | 适合完全自定义 | ✗ 否 | ✓ 是 | | 使用函数 | registerLocaleregisterLocaleWithMode(..., 'merge') | replaceLocaleregisterLocaleWithMode(..., 'replace') |

选择合适的模式

使用合并模式的情况：

• ✓ 只想修改少数几个翻译文本
• ✓ 想要添加新的翻译键
• ✓ 希望保留组件库的默认翻译作为后备
• ✓ 逐步自定义翻译，不想一次性提供所有内容

使用替换模式的情况：

• ✓ 需要完全控制语言包内容
• ✓ 从外部系统或 CMS 加载完整的翻译
• ✓ 确保翻译的完整性和一致性
• ✓ 不希望依赖组件库的默认翻译

完整示例：动态语言包管理

<script setup lang="uts">
import { registerLocale, replaceLocale, registerLocaleWithMode } from 'tang-ui-x'
import { ref } from 'vue'

// 场景 1：部分自定义（合并模式）
function customizePartial() {
  registerLocale('zh-CN', {
    common: {
      confirm: '好的',
      cancel: '算了'
    }
  })
  console.log('已应用部分自定义翻译（合并模式）')
}

// 场景 2：完全替换（替换模式）
function replaceComplete() {
  replaceLocale('zh-CN', {
    common: {
      confirm: '确认',
      cancel: '取消',
      ok: 'OK',
      close: '关闭',
      loading: '加载中...',
      noData: '暂无数据'
    },
    dialog: {
      title: '提示',
      confirmText: '确认',
      cancelText: '取消'
    }
    // ... 提供所有必需的模块
  })
  console.log('已完全替换语言包（替换模式）')
}

// 场景 3：从 JSON 文件加载
async function loadFromJSON() {
  try {
    // 假设从服务器获取语言包
    const response = await fetch('/api/locales/zh-CN.json')
    const localeData = await response.json()
    
    // 使用合并模式
    registerLocale('zh-CN', localeData)
    
    // 或使用替换模式
    // replaceLocale('zh-CN', localeData)
    
    console.log('已从 JSON 加载语言包')
  } catch (error) {
    console.error('加载语言包失败:', error)
  }
}

// 场景 4：显式指定模式
function explicitMode() {
  // 合并模式
  registerLocaleWithMode('zh-CN', {
    common: { confirm: '好的' }
  }, 'merge')
  
  // 替换模式
  registerLocaleWithMode('en-US', {
    common: {
      confirm: 'OK',
      cancel: 'Cancel'
      // ... 完整内容
    }
  }, 'replace')
}
</script>

<template>
  <view class="locale-manager">
    <button @click="customizePartial">部分自定义（合并）</button>
    <button @click="replaceComplete">完全替换</button>
    <button @click="loadFromJSON">从 JSON 加载</button>
    <button @click="explicitMode">显式指定模式</button>
  </view>
</template>

注意事项

1. 替换模式需要完整语言包：使用替换模式时，确保提供所有必需的模块和键，否则缺失的翻译将无法使用。

2. 合并模式的覆盖规则：在合并模式下，新键会覆盖旧键，但只在提供的模块内生效。未提供的模块完全保留。

3. JSON 结构验证：系统会验证注册的语言包结构。如果结构无效（如不是对象、包含非字符串值等），注册会失败并输出错误信息。

4. 模式选择建议：如果不确定使用哪种模式，建议使用默认的合并模式（registerLocale），它更安全且易于使用。

语言包结构

语言包采用模块化结构，每个模块对应一组相关的翻译：

{
  // 通用文本模块
  common: {
    confirm: '确定',
    cancel: '取消',
    ok: '好的',
    close: '关闭',
    loading: '加载中...',
    noData: '暂无数据'
  },
  
  // 对话框模块
  dialog: {
    title: '提示',
    confirmText: '确定',
    cancelText: '取消'
  },
  
  // 空状态模块
  empty: {
    title: '暂无数据',
    description: '当前没有相关内容',
    actionText: '刷新试试'
  },
  
  // 搜索框模块
  searchBar: {
    placeholder: '请输入搜索关键词',
    cancelText: '取消'
  }
  
  // ... 其他组件模块
}

翻译键命名规范

翻译键采用 模块名.键名 的格式：

• common.confirm - 通用模块的确定按钮
• dialog.title - 对话框模块的标题
• empty.description - 空状态模块的描述文本
• searchBar.placeholder - 搜索框模块的占位符

组件中使用自定义文本

所有支持 i18n 的组件都允许通过 props 覆盖默认翻译：

<template>
  <view>
    <!-- 使用默认翻译 -->
    <TEmpty />
    
    <!-- 使用自定义文本（优先级高于翻译） -->
    <TEmpty 
      title="没有找到结果" 
      description="请尝试其他搜索条件"
      actionText="重新搜索"
    />
    
    <!-- 使用默认翻译，但会随语言切换自动更新 -->
    <TSearchBar />
    
    <!-- 使用自定义占位符 -->
    <TSearchBar placeholder="搜索商品" />
  </view>
</template>

参数插值

翻译文本支持动态参数替换：

// 定义带占位符的翻译
registerLocale('zh-CN', {
  common: {
    hello: '你好，{name}',
    itemCount: '共 {count} 个项目',
    welcome: '{user}，欢迎回来！'
  }
})

// 使用参数
const { $t } = useI18n()

const greeting = $t('common.hello', { name: '张三' })
// 结果: "你好，张三"

const count = $t('common.itemCount', { count: 5 })
// 结果: "共 5 个项目"

const welcome = $t('common.welcome', { user: 'Admin' })
// 结果: "Admin，欢迎回来！"

响应式语言切换

语言切换会自动触发所有使用翻译的组件更新：

<script setup lang="uts">
import { useI18n } from 'tang-ui-x'

const { $t, locale, setLocale } = useI18n()

// 这些文本会随语言切换自动更新
const title = computed(() => $t('common.confirm'))
const description = computed(() => $t('empty.description'))
</script>

<template>
  <view>
    <!-- 语言切换后，这些文本会自动更新 -->
    <text>{{ title }}</text>
    <text>{{ description }}</text>
    <text>当前语言: {{ locale }}</text>
    
    <!-- 组件内的文本也会自动更新 -->
    <TEmpty />
    <TSearchBar />
    
    <button @click="setLocale('en-US')">English</button>
    <button @click="setLocale('zh-CN')">中文</button>
  </view>
</template>

完整示例：语言切换器

创建一个完整的语言切换组件：

<script setup lang="uts">
import { useI18n, setLanguage } from 'tang-ui-x'
import { ref } from 'vue'

const { locale, availableLocales } = useI18n()

// 语言显示名称映射
const languageNames = {
  'zh-CN': '简体中文',
  'en-US': 'English',
  'zh-TW': '繁體中文'
}

// 切换语言
function switchLanguage(code: string) {
  const success = setLanguage(code)
  if (success) {
    console.log(`已切换到: ${languageNames[code]}`)
  } else {
    console.error(`切换失败: ${code}`)
  }
}
</script>

<template>
  <view class="language-switcher">
    <text class="title">选择语言 / Select Language</text>
    
    <view class="language-list">
      <view 
        v-for="lang in availableLocales" 
        :key="lang"
        class="language-item"
        :class="{ active: locale === lang }"
        @click="switchLanguage(lang)"
      >
        <text>{{ languageNames[lang] || lang }}</text>
        <text v-if="locale === lang" class="check">✓</text>
      </view>
    </view>
    
    <text class="current">当前语言: {{ languageNames[locale] }}</text>
  </view>
</template>

<style>
.language-switcher {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.language-list {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.language-item {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.language-item:last-child {
  border-bottom: none;
}

.language-item.active {
  background-color: #f0f9ff;
  color: #0066cc;
}

.check {
  color: #0066cc;
  font-weight: bold;
}

.current {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}
</style>

组件迁移指南

如果您正在开发自定义组件并希望支持 i18n，请按以下步骤操作：

步骤 1: 导入 useI18n

import { useI18n } from 'tang-ui-x'

步骤 2: 在 setup 中获取翻译函数

const { $t } = useI18n()

步骤 3: 替换硬编码文本

// 之前
const confirmText = '确定'

// 之后
const confirmText = $t('common.confirm')

步骤 4: 支持用户覆盖（推荐）

interface Props {
  title?: string
  description?: string
}

const props = defineProps<Props>()
const { $t } = useI18n()

// 优先使用用户传入的值，否则使用翻译
const displayTitle = computed(() => props.title || $t('empty.title'))
const displayDescription = computed(() => props.description || $t('empty.description'))

步骤 5: 更新模板

<template>
  <view>
    <!-- 使用计算属性 -->
    <text>{{ displayTitle }}</text>
    <text>{{ displayDescription }}</text>
  </view>
</template>

完整示例

<script setup lang="uts">
import { useI18n } from 'tang-ui-x'
import { computed } from 'vue'

interface Props {
  title?: string
  description?: string
  actionText?: string
}

const props = defineProps<Props>()
const { $t } = useI18n()

// 优先使用用户传入的值
const displayTitle = computed(() => props.title || $t('empty.title'))
const displayDescription = computed(() => props.description || $t('empty.description'))
const displayActionText = computed(() => props.actionText || $t('empty.actionText'))

function handleAction() {
  console.log('Action clicked')
}
</script>

<template>
  <view class="custom-component">
    <text class="title">{{ displayTitle }}</text>
    <text class="description">{{ displayDescription }}</text>
    <button @click="handleAction">{{ displayActionText }}</button>
  </view>
</template>

API 参考

useI18n()

组合式 API，用于在组件中使用 i18n 功能。

返回值:

{
  $t: (key: string, params?: Record<string, any>) => string
  locale: ComputedRef<string>
  availableLocales: ComputedRef<string[]>
  setLocale: (locale: string) => boolean
}

全局函数

setLanguage(locale: string): boolean

切换应用语言。

• 参数:
  • locale: 语言代码（如 'zh-CN', 'en-US'）
• 返回值: 切换是否成功

registerLocale(locale: string, messages: object): void

注册或更新语言包。

• 参数:
  • locale: 语言代码
  • messages: 模块化语言包对象

getCurrentLocale(): string

获取当前语言代码。

• 返回值: 当前语言代码

getAvailableLocales(): string[]

获取所有可用语言列表。

• 返回值: 语言代码数组

常见问题

Q: 如何添加新语言？

A: 使用 registerLocale 函数注册新语言包，然后使用 setLanguage 切换。

registerLocale('ja-JP', { /* 日语翻译 */ })
setLanguage('ja-JP')

Q: 如何覆盖默认翻译？

A: 使用 registerLocale 注册同语言代码的语言包，只需包含要覆盖的键。

registerLocale('zh-CN', {
  common: {
    confirm: '好的'  // 只覆盖这一个键
  }
})

Q: 组件的文本不随语言切换更新？

A: 确保使用 computed 包装翻译文本：

// ❌ 错误：不会更新
const title = $t('common.title')

// ✓ 正确：会自动更新
const title = computed(() => $t('common.title'))

Q: 如何在组件外使用翻译？

A: 使用全局函数或直接访问 I18nManager：

import { getCurrentLocale } from 'tang-ui-x'

const locale = getCurrentLocale()

Q: 支持哪些语言？

A: 内置支持简体中文、英语、繁体中文。您可以通过 registerLocale 添加任何语言。

跨平台支持

Tang UI X 的国际化系统经过精心设计，确保在所有 uni-app x 支持的平台上都能正常工作。

支持的平台

i18n 系统已在以下平台测试并验证：

• ✅ Web H5 - 浏览器环境
• ✅ 微信小程序 - WeChat Mini Program
• ✅ 支付宝小程序 - Alipay Mini Program
• ✅ App (Android/iOS) - 原生应用

跨平台兼容性设计

为了确保在所有平台上的一致性和可靠性，i18n 系统采用了以下技术方案：

1. 静态导入机制

所有语言包文件使用静态 import 语句导入，避免使用动态导入或平台特定 API（如 import.meta.glob），确保在小程序等受限环境中也能正常工作。

// ✓ 使用静态导入（跨平台兼容）
import zhCNCommon from '../locales/zh-CN/common.json'
import enUSCommon from '../locales/en-US/common.json'

// ✗ 避免动态导入（小程序不支持）
// const module = await import(`../locales/${locale}/common.json`)

2. 编译时确定性

所有文件路径在编译时可解析，确保打包工具能够正确处理语言包文件，无论目标平台是什么。

3. 同步初始化

i18n 系统使用同步初始化方式，避免异步操作可能带来的平台兼容性问题：

// 同步初始化，所有平台都支持
import { useI18n } from 'tang-ui-x'
const { $t } = useI18n()

4. JSON 文件处理

语言包使用标准 JSON 格式，确保在所有平台的编译和打包过程中都能被正确处理。

平台特定注意事项

小程序平台

• ✓ 语言包会在编译时被打包到小程序包中
• ✓ 所有 i18n API 都可以正常使用
• ✓ 语言切换会立即生效，无需重启小程序

App 平台

• ✓ 语言包会被编译到原生应用中
• ✓ 支持热更新后的语言切换
• ✓ 性能与 Web 平台一致

Web H5 平台

• ✓ 语言包会被打包到 JavaScript bundle 中
• ✓ 支持浏览器缓存优化
• ✓ 可以与浏览器语言检测结合使用

使用建议

1. 统一的代码: 在所有平台使用相同的 i18n 代码，无需平台判断
2. 提前测试: 在目标平台上测试语言切换功能
3. 包体积优化: 如果只需要部分语言，可以考虑按需注册语言包

示例：跨平台语言切换

以下代码在所有平台上都能正常工作：

<script setup lang="uts">
import { useI18n, setLanguage } from 'tang-ui-x'

const { locale, availableLocales } = useI18n()

// 这段代码在所有平台都能正常运行
function switchLanguage(lang: string) {
  const success = setLanguage(lang)
  if (success) {
    // 在所有平台上，UI 都会立即更新
    console.log(`语言已切换到: ${lang}`)
  }
}
</script>

<template>
  <view>
    <!-- 在所有平台上显示效果一致 -->
    <button @click="switchLanguage('zh-CN')">中文</button>
    <button @click="switchLanguage('en-US')">English</button>
    <button @click="switchLanguage('zh-TW')">繁體中文</button>
    
    <text>当前语言: {{ locale }}</text>
  </view>
</template>

技术细节

如果您对 i18n 系统的跨平台实现感兴趣，以下是关键技术点：

• 语言包加载器: 使用静态导入映射表，在编译时确定所有语言包路径
• 模块注册表: 显式维护模块列表，避免运行时文件系统访问
• 响应式系统: 基于 Vue 3 的响应式系统，在所有平台上表现一致
• 无外部依赖: 不依赖任何平台特定的 API 或第三方库

📚 组件列表

基础组件 (5个)

• TButton - 按钮
• TIcon - 图标
• TText - 文本
• TImage - 图片
• TDivider - 分割线

布局组件 (8个)

• TCard - 卡片
• TList - 列表
• TListItem - 列表项
• TCell - 单元格
• TGrid - 宫格
• TGridItem - 宫格项
• TRow - 栅格行
• TCol - 栅格列

表单组件 (13个)

• TInput - 输入框
• TNumberInput - 数字输入
• TTextarea - 多行文本输入
• TSearchBar - 搜索框
• TSwitch - 开关
• TCheckbox - 复选框
• TCheckboxGroup - 复选组
• TRadioButton - 单选按钮
• TRadioGroup - 单选组
• TSelect - 选择器
• TSlider - 滑块
• TRate - 评分
• TPicker - 选择器

数据展示 (9个)

• Tags - 标签
• TBadge - 徽标
• TAvatar - 头像
• TProgress - 进度条
• TNoticeBar - 通知栏
• TCollapse - 折叠面板
• TCollapseItem - 折叠面板项
• TEmpty - 空状态
• TErrorState - 错误状态
• TSwiper - 轮播图

反馈组件 (5个)

• TLoading - 加载
• TToast - 轻提示
• TDialog - 对话框
• TPopup - 弹出层
• TActionSheet - 动作面板

导航组件 (2个)

• Tabs - 标签页
• TNavBar - 导航栏

📖 文档

详细文档请访问：https://github.com/sugar258596/tang-ui

🤝 贡献

欢迎提交 Issue 和 Pull Request！

� 链接

• GitHub
• Issues
• NPM

📄 License

MIT License