tang-ui-x 1.1.0 → 1.1.2

package/composables/i18n/task8-demo.uts

@@ -0,0 +1,93 @@
+/**
+ * Task 8 功能演示
+ * 展示 getAvailableLocales() 和 getCurrentLocale() 的使用
+ */
+
+import { I18nManager } from './manager.uts'
+import type { ModularLocaleMessages } from './types.uts'
+
+// 获取管理器实例
+const manager = I18nManager.getInstance()
+
+// 准备测试数据
+const zhCN: ModularLocaleMessages = {
+  common: { confirm: '确定', cancel: '取消' }
+}
+
+const enUS: ModularLocaleMessages = {
+  common: { confirm: 'Confirm', cancel: 'Cancel' }
+}
+
+const zhTW: ModularLocaleMessages = {
+  common: { confirm: '確定', cancel: '取消' }
+}
+
+// 演示 1: 初始状态
+console.log('=== 演示 1: 初始状态 ===')
+console.log('当前语言:', manager.getCurrentLocale())
+console.log('可用语言:', manager.getAvailableLocales().value)
+console.log('')
+
+// 演示 2: 注册语言包
+console.log('=== 演示 2: 注册语言包 ===')
+manager.registerMessages('zh-CN', zhCN)
+console.log('注册 zh-CN 后:')
+console.log('  可用语言:', manager.getAvailableLocales().value)
+console.log('')
+
+manager.registerMessages('en-US', enUS)
+console.log('注册 en-US 后:')
+console.log('  可用语言:', manager.getAvailableLocales().value)
+console.log('')
+
+manager.registerMessages('zh-TW', zhTW)
+console.log('注册 zh-TW 后:')
+console.log('  可用语言:', manager.getAvailableLocales().value)
+console.log('')
+
+// 演示 3: 切换语言
+console.log('=== 演示 3: 切换语言 ===')
+console.log('初始语言:', manager.getCurrentLocale())
+
+manager.setLocale('en-US')
+console.log('切换到 en-US:', manager.getCurrentLocale())
+
+manager.setLocale('zh-TW')
+console.log('切换到 zh-TW:', manager.getCurrentLocale())
+
+manager.setLocale('zh-CN')
+console.log('切换回 zh-CN:', manager.getCurrentLocale())
+console.log('')
+
+// 演示 4: 响应式特性
+console.log('=== 演示 4: 响应式特性 ===')
+const availableLocales = manager.getAvailableLocales()
+console.log('获取响应式列表:', availableLocales.value)
+
+// 动态注册新语言
+const jaJP: ModularLocaleMessages = {
+  common: { confirm: '確認', cancel: 'キャンセル' }
+}
+manager.registerMessages('ja-JP', jaJP)
+console.log('注册 ja-JP 后，列表自动更新:', availableLocales.value)
+console.log('')
+
+// 演示 5: 实际应用场景
+console.log('=== 演示 5: 实际应用场景 - 语言选择器 ===')
+console.log('构建语言选择器选项:')
+const locales = manager.getAvailableLocales().value
+const localeNames: Record<string, string> = {
+  'zh-CN': '简体中文',
+  'en-US': 'English',
+  'zh-TW': '繁體中文',
+  'ja-JP': '日本語'
+}
+
+locales.forEach((locale: string) => {
+  const isCurrent = locale === manager.getCurrentLocale()
+  const marker = isCurrent ? '✓' : ' '
+  console.log(`  [${marker}] ${locale} - ${localeNames[locale]}`)
+})
+console.log('')
+
+console.log('=== 演示完成 ===')

package/composables/i18n/task8-verification.uts

@@ -0,0 +1,98 @@
+/**
+ * Task 8 验证脚本
+ * 验证 getAvailableLocales() 和 getCurrentLocale() 方法
+ */
+
+import { I18nManager } from './manager.uts'
+import type { ModularLocaleMessages } from './types.uts'
+
+console.log('=== Task 8 验证：可用语言查询功能 ===\n')
+
+// 获取管理器实例
+const manager = I18nManager.getInstance()
+
+// 注册测试语言包
+console.log('1. 注册测试语言包...')
+const zhCN: ModularLocaleMessages = {
+  common: {
+    confirm: '确定',
+    cancel: '取消'
+  }
+}
+
+const enUS: ModularLocaleMessages = {
+  common: {
+    confirm: 'Confirm',
+    cancel: 'Cancel'
+  }
+}
+
+const zhTW: ModularLocaleMessages = {
+  common: {
+    confirm: '確定',
+    cancel: '取消'
+  }
+}
+
+manager.registerMessages('zh-CN', zhCN)
+manager.registerMessages('en-US', enUS)
+manager.registerMessages('zh-TW', zhTW)
+console.log('✓ 已注册 3 个语言包\n')
+
+// 测试 getCurrentLocale()
+console.log('2. 测试 getCurrentLocale() 方法')
+const currentLocale = manager.getCurrentLocale()
+console.log(`   当前语言: ${currentLocale}`)
+console.log(`   ✓ getCurrentLocale() 返回: ${currentLocale}\n`)
+
+// 测试 getAvailableLocales()
+console.log('3. 测试 getAvailableLocales() 方法')
+const availableLocales = manager.getAvailableLocales()
+console.log(`   可用语言列表: ${availableLocales.value.join(', ')}`)
+console.log(`   语言数量: ${availableLocales.value.length}`)
+console.log(`   ✓ getAvailableLocales() 返回响应式列表\n`)
+
+// 验证列表包含所有注册的语言
+console.log('4. 验证列表与 messages Map 同步')
+const expectedLocales = ['zh-CN', 'en-US', 'zh-TW']
+let allPresent = true
+for (const locale of expectedLocales) {
+  const isPresent = availableLocales.value.includes(locale)
+  console.log(`   ${locale}: ${isPresent ? '✓' : '✗'}`)
+  if (!isPresent) allPresent = false
+}
+console.log(`   ${allPresent ? '✓' : '✗'} 所有语言都在列表中\n`)
+
+// 测试语言切换后 getCurrentLocale() 的更新
+console.log('5. 测试语言切换后 getCurrentLocale() 更新')
+console.log(`   切换前: ${manager.getCurrentLocale()}`)
+manager.setLocale('en-US')
+console.log(`   切换到 en-US`)
+console.log(`   切换后: ${manager.getCurrentLocale()}`)
+console.log(`   ✓ getCurrentLocale() 正确反映当前语言\n`)
+
+// 测试动态注册后列表更新
+console.log('6. 测试动态注册后列表更新')
+console.log(`   注册前语言数量: ${availableLocales.value.length}`)
+const jaJP: ModularLocaleMessages = {
+  common: {
+    confirm: '確認',
+    cancel: 'キャンセル'
+  }
+}
+manager.registerMessages('ja-JP', jaJP)
+console.log(`   注册 ja-JP 后语言数量: ${availableLocales.value.length}`)
+console.log(`   ja-JP 在列表中: ${availableLocales.value.includes('ja-JP') ? '✓' : '✗'}`)
+console.log(`   ✓ 列表自动更新\n`)
+
+// 验证响应式特性
+console.log('7. 验证 getAvailableLocales() 返回的是 ComputedRef')
+console.log(`   类型检查: ${typeof availableLocales.value}`)
+console.log(`   是数组: ${Array.isArray(availableLocales.value) ? '✓' : '✗'}`)
+console.log(`   ✓ 返回响应式 computed 对象\n`)
+
+console.log('=== 所有验证通过 ✓ ===')
+console.log('\n需求验证:')
+console.log('✓ 5.1: getAvailableLocales() 返回所有已注册语言的语言代码数组')
+console.log('✓ 5.2: getCurrentLocale() 返回当前激活的语言代码')
+console.log('✓ 5.3: 语言包动态注册后，可用语言列表自动更新并保持准确性')

package/composables/i18n/test-task23.uts

@@ -0,0 +1,9 @@
+/**
+ * Task 23 简单测试
+ * 快速验证新函数是否可用
+ */
+
+import { runTask23Verification } from './task23-verification.uts'
+
+// 运行验证
+runTask23Verification()

package/composables/i18n/types.uts

@@ -0,0 +1,46 @@
+/**
+ * i18n 类型定义
+ * 定义多语言系统的所有类型
+ */
+
+/**
+ * 语言包消息类型
+ * 每个模块是一个扁平的键值对对象
+ */
+export type LocaleMessages = {
+  [key: string]: string | LocaleMessages
+}
+
+/**
+ * 模块化语言包类型
+ * 按模块名组织
+ */
+export type ModularLocaleMessages = {
+  [moduleName: string]: {
+    [key: string]: string
+  }
+}
+
+/**
+ * 语言代码类型
+ * 支持内置语言和自定义语言代码
+ */
+export type LocaleCode = 'zh-CN' | 'en-US' | 'zh-TW' | string
+
+/**
+ * i18n 配置类型
+ */
+export type I18nConfig = {
+  /** 当前语言 */
+  locale: LocaleCode
+  /** 回退语言 */
+  fallbackLocale: LocaleCode
+  /** 语言包 */
+  messages: Record<string, LocaleMessages>
+}
+
+/**
+ * 翻译参数类型
+ * 用于字符串插值
+ */
+export type TranslateParams = Record<string, string | number>

package/composables/i18n/useI18n-verification.uts

@@ -0,0 +1,105 @@
+/**
+ * useI18n Composable 验证脚本
+ * 验证 useI18n 的基本功能
+ */
+
+import { I18nManager } from './manager.uts'
+import { useI18n } from '../useI18n.uts'
+
+/**
+ * 验证 useI18n Composable
+ */
+export function verifyUseI18n(): void {
+  console.log('=== useI18n Composable 验证 ===\n')
+  
+  // 准备测试数据
+  const manager = I18nManager.getInstance()
+  manager.registerMessages('zh-CN', {
+    common: {
+      confirm: '确定',
+      cancel: '取消',
+      hello: '你好，{name}'
+    },
+    dialog: {
+      title: '提示'
+    }
+  })
+  
+  manager.registerMessages('en-US', {
+    common: {
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      hello: 'Hello, {name}'
+    },
+    dialog: {
+      title: 'Notice'
+    }
+  })
+  
+  // 测试 useI18n
+  const { $t, locale, availableLocales, setLocale } = useI18n()
+  
+  // 1. 测试翻译函数
+  console.log('1. 测试翻译函数')
+  console.log('   $t("common.confirm"):', $t('common.confirm'))
+  console.log('   预期: "确定"')
+  console.log('   结果:', $t('common.confirm') === '确定' ? '✓ 通过' : '✗ 失败')
+  console.log()
+  
+  // 2. 测试带参数的翻译
+  console.log('2. 测试带参数的翻译')
+  const greeting = $t('common.hello', { name: '张三' })
+  console.log('   $t("common.hello", { name: "张三" }):', greeting)
+  console.log('   预期: "你好，张三"')
+  console.log('   结果:', greeting === '你好，张三' ? '✓ 通过' : '✗ 失败')
+  console.log()
+  
+  // 3. 测试当前语言（响应式）
+  console.log('3. 测试当前语言（响应式）')
+  console.log('   locale.value:', locale.value)
+  console.log('   预期: "zh-CN"')
+  console.log('   结果:', locale.value === 'zh-CN' ? '✓ 通过' : '✗ 失败')
+  console.log()
+  
+  // 4. 测试可用语言列表
+  console.log('4. 测试可用语言列表')
+  console.log('   availableLocales.value:', availableLocales.value)
+  console.log('   预期: 包含 "zh-CN" 和 "en-US"')
+  const hasZhCN = availableLocales.value.includes('zh-CN')
+  const hasEnUS = availableLocales.value.includes('en-US')
+  console.log('   结果:', hasZhCN && hasEnUS ? '✓ 通过' : '✗ 失败')
+  console.log()
+  
+  // 5. 测试语言切换
+  console.log('5. 测试语言切换')
+  const switchResult = setLocale('en-US')
+  console.log('   setLocale("en-US"):', switchResult)
+  console.log('   预期: true')
+  console.log('   结果:', switchResult === true ? '✓ 通过' : '✗ 失败')
+  console.log()
+  
+  // 6. 验证切换后的翻译
+  console.log('6. 验证切换后的翻译')
+  console.log('   locale.value:', locale.value)
+  console.log('   $t("common.confirm"):', $t('common.confirm'))
+  console.log('   预期语言: "en-US"')
+  console.log('   预期翻译: "Confirm"')
+  const localeCorrect = locale.value === 'en-US'
+  const translationCorrect = $t('common.confirm') === 'Confirm'
+  console.log('   结果:', localeCorrect && translationCorrect ? '✓ 通过' : '✗ 失败')
+  console.log()
+  
+  // 7. 测试无效语言代码
+  console.log('7. 测试无效语言代码')
+  const invalidResult = setLocale('invalid-locale')
+  console.log('   setLocale("invalid-locale"):', invalidResult)
+  console.log('   预期: false')
+  console.log('   当前语言保持不变:', locale.value)
+  console.log('   结果:', invalidResult === false && locale.value === 'en-US' ? '✓ 通过' : '✗ 失败')
+  console.log()
+  
+  console.log('=== 验证完成 ===')
+}
+
+// 如果直接运行此文件，执行验证
+// verifyUseI18n()

package/composables/i18n/validation-demo.uts

@@ -0,0 +1,45 @@
+/**
+ * JSON 结构验证演示
+ * 展示 validateMessages 方法的工作原理
+ */
+
+import { registerLocale, registerLocaleWithMode, replaceLocale } from './index.uts'
+import type { ModularLocaleMessages } from './types.uts'
+
+console.log('=== JSON 结构验证演示 ===\n')
+
+// 示例 1: 有效的语言包
+console.log('1. 注册有效的语言包')
+const validMessages: ModularLocaleMessages = {
+  common: {
+    confirm: '确定',
+    cancel: '取消'
+  }
+}
+registerLocale('demo-valid', validMessages)
+console.log('✓ 成功\n')
+
+// 示例 2: 无效的语言包（null）
+console.log('2. 尝试注册 null')
+registerLocale('demo-null', null as any)
+console.log('✗ 应该被拒绝\n')
+
+// 示例 3: 无效的模块
+console.log('3. 尝试注册无效模块')
+const invalidModule: any = {
+  common: 'not an object'
+}
+registerLocale('demo-invalid-module', invalidModule)
+console.log('✗ 应该被拒绝\n')
+
+// 示例 4: 无效的键值
+console.log('4. 尝试注册无效键值')
+const invalidValue: any = {
+  common: {
+    confirm: 123
+  }
+}
+registerLocale('demo-invalid-value', invalidValue)
+console.log('✗ 应该被拒绝\n')
+
+console.log('=== 演示完成 ===')

package/composables/i18n/validation-test.uts

@@ -0,0 +1,106 @@
+/**
+ * 验证 JSON 结构验证功能
+ * 测试 validateMessages 方法的各种场景
+ */
+
+import { I18nManager } from './manager.uts'
+import type { ModularLocaleMessages } from './types.uts'
+
+console.log('=== JSON 结构验证测试 ===\n')
+
+const manager = I18nManager.getInstance()
+
+// 测试 1: 有效的语言包结构
+console.log('测试 1: 有效的语言包结构')
+const validMessages: ModularLocaleMessages = {
+  common: {
+    confirm: '确定',
+    cancel: '取消'
+  },
+  dialog: {
+    title: '提示'
+  }
+}
+manager.registerMessages('test-valid', validMessages)
+console.log('✓ 有效语言包注册成功')
+console.log('可用语言:', manager.getAvailableLocales().value)
+console.log('')
+
+// 测试 2: 无效的语言包（null）
+console.log('测试 2: 无效的语言包（null）')
+try {
+  manager.registerMessages('test-null', null as any)
+  console.log('✗ 应该拒绝 null 语言包')
+} catch (e) {
+  console.log('✓ 正确拒绝 null 语言包')
+}
+console.log('')
+
+// 测试 3: 无效的语言包（数组）
+console.log('测试 3: 无效的语言包（数组）')
+manager.registerMessages('test-array', [] as any)
+console.log('检查是否注册:', manager.hasLocale('test-array'))
+console.log('')
+
+// 测试 4: 无效的模块（不是对象）
+console.log('测试 4: 无效的模块（不是对象）')
+const invalidModule: any = {
+  common: 'not an object'
+}
+manager.registerMessages('test-invalid-module', invalidModule)
+console.log('检查是否注册:', manager.hasLocale('test-invalid-module'))
+console.log('')
+
+// 测试 5: 无效的键值（不是字符串）
+console.log('测试 5: 无效的键值（不是字符串）')
+const invalidValue: any = {
+  common: {
+    confirm: 123,  // 数字而非字符串
+    cancel: '取消'
+  }
+}
+manager.registerMessages('test-invalid-value', invalidValue)
+console.log('检查是否注册:', manager.hasLocale('test-invalid-value'))
+console.log('')
+
+// 测试 6: 部分有效的语言包（应该完全拒绝）
+console.log('测试 6: 部分有效的语言包')
+const partiallyValid: any = {
+  common: {
+    confirm: '确定',
+    cancel: '取消'
+  },
+  dialog: {
+    title: '提示',
+    invalid: { nested: 'object' }  // 嵌套对象而非字符串
+  }
+}
+manager.registerMessages('test-partial', partiallyValid)
+console.log('检查是否注册:', manager.hasLocale('test-partial'))
+console.log('')
+
+// 测试 7: 替换模式也应该验证
+console.log('测试 7: 替换模式验证')
+manager.registerMessagesWithMode('test-replace', invalidValue, 'replace')
+console.log('检查是否注册:', manager.hasLocale('test-replace'))
+console.log('')
+
+// 测试 8: 空对象是有效的
+console.log('测试 8: 空对象是有效的')
+manager.registerMessages('test-empty', {})
+console.log('✓ 空对象注册成功')
+console.log('检查是否注册:', manager.hasLocale('test-empty'))
+console.log('')
+
+// 测试 9: 空模块是有效的
+console.log('测试 9: 空模块是有效的')
+const emptyModule: ModularLocaleMessages = {
+  common: {}
+}
+manager.registerMessages('test-empty-module', emptyModule)
+console.log('✓ 空模块注册成功')
+console.log('检查是否注册:', manager.hasLocale('test-empty-module'))
+console.log('')
+
+console.log('=== 测试完成 ===')
+console.log('最终可用语言列表:', manager.getAvailableLocales().value)

package/composables/useI18n.uts

@@ -0,0 +1,77 @@
+/**
+ * useI18n Composable
+ * 为组件提供响应式的 i18n 功能
+ */
+
+import { computed } from 'vue'
+import type { ComputedRef } from 'vue'
+import { I18nManager } from './i18n/manager.uts'
+import type { TranslateParams } from './i18n/types.uts'
+
+/**
+ * useI18n 返回类型
+ */
+export interface UseI18nReturn {
+  /** 翻译函数 */
+  $t: (key: string, params?: TranslateParams) => string
+  /** 当前语言（响应式） */
+  locale: ComputedRef<string>
+  /** 可用语言列表（响应式） */
+  availableLocales: ComputedRef<string[]>
+  /** 设置语言 */
+  setLocale: (locale: string) => boolean
+}
+
+/**
+ * useI18n Composable 函数
+ * 提供响应式的多语言功能
+ * 
+ * @returns i18n 功能对象
+ * 
+ * @example
+ * ```typescript
+ * const { $t, locale, setLocale, availableLocales } = useI18n()
+ * 
+ * // 翻译文本
+ * const title = $t('common.confirm')
+ * 
+ * // 带参数的翻译
+ * const greeting = $t('common.hello', { name: '张三' })
+ * 
+ * // 切换语言
+ * setLocale('en-US')
+ * 
+ * // 获取当前语言
+ * console.log(locale.value)
+ * 
+ * // 获取可用语言列表
+ * console.log(availableLocales.value)
+ * ```
+ */
+export function useI18n(): UseI18nReturn {
+  // 获取 I18nManager 单例实例
+  const manager = I18nManager.getInstance()
+  
+  // 翻译函数：调用 manager.translate()
+  const $t = (key: string, params?: TranslateParams): string => {
+    return manager.translate(key, params)
+  }
+  
+  // 当前语言（响应式 computed）
+  const locale = computed<string>(() => manager.currentLocale.value)
+  
+  // 可用语言列表（响应式 computed）
+  const availableLocales = manager.getAvailableLocales()
+  
+  // 设置语言方法
+  const setLocale = (locale: string): boolean => {
+    return manager.setLocale(locale)
+  }
+  
+  return {
+    $t,
+    locale,
+    availableLocales,
+    setLocale
+  }
+}

package/index.uts

@@ -30,6 +30,29 @@ export { useTheme } from './composables/useTheme.uts'
 export { useToast } from './composables/useToast.uts'
 export { useModal } from './composables/useModal.uts'
 
+// 导出 i18n composable
+export { useI18n } from './composables/useI18n.uts'
+export type { UseI18nReturn } from './composables/useI18n.uts'
+
+// 导出 i18n 全局函数
+export {
+  setLanguage,
+  registerLocale,
+  registerLocaleWithMode,
+  replaceLocale,
+  getCurrentLocale,
+  getAvailableLocales
+} from './composables/i18n/index.uts'
+
+// 导出 i18n 类型定义
+export type {
+  LocaleMessages,
+  ModularLocaleMessages,
+  LocaleCode,
+  I18nConfig,
+  TranslateParams
+} from './composables/i18n/types.uts'
+
 // 版本信息
 export const version: string = '1.0.5'