tang-ui-x 1.1.0 → 1.1.2

package/components/TRadioButton/README.md

@@ -0,0 +1,117 @@
+# TRadioButton 单选按钮
+
+单选按钮组件，支持单个按钮和选项组两种使用方式。
+
+## 基础用法
+
+```vue
+<template>
+  <TRadioButton v-model="value" value="option1">选项一</TRadioButton>
+  <TRadioButton v-model="value" value="option2">选项二</TRadioButton>
+  <TRadioButton v-model="value" value="option3">选项三</TRadioButton>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const value = ref('option1')
+</script>
+```
+
+## 选项组模式
+
+通过 `options` 属性传入选项数组，自动渲染多个单选按钮。
+
+```vue
+<template>
+  <TRadioButton 
+    v-model="value" 
+    :options="[
+      { label: '选项一', value: 'option1' },
+      { label: '选项二', value: 'option2' },
+      { label: '选项三', value: 'option3' }
+    ]" 
+  />
+</template>
+```
+
+## 禁用状态
+
+```vue
+<TRadioButton v-model="value" value="option1" disabled>禁用选项</TRadioButton>
+```
+
+## 不同尺寸
+
+```vue
+<TRadioButton v-model="value" value="small" size="small">小尺寸</TRadioButton>
+<TRadioButton v-model="value" value="medium" size="medium">中等尺寸</TRadioButton>
+<TRadioButton v-model="value" value="large" size="large">大尺寸</TRadioButton>
+```
+
+## 自定义颜色
+
+```vue
+<TRadioButton 
+  v-model="value" 
+  value="option1" 
+  activeColor="#f56c6c"
+  inactiveColor="#909399"
+>
+  自定义颜色
+</TRadioButton>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| modelValue (v-model) | 绑定值 | `string \| number` | - |
+| value | 单选按钮的值 | `string \| number` | - |
+| label | 显示的标签文本 | `string` | - |
+| options | 选项组模式的选项列表 | `FormOption[]` | `[]` |
+| size | 按钮尺寸 | `'small' \| 'medium' \| 'large'` | `'medium'` |
+| activeColor | 激活状态颜色 | `string` | `'#00bba7'` |
+| inactiveColor | 非激活状态颜色 | `string` | `'#666666'` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| checked | 是否选中（仅单个按钮模式） | `boolean` | `false` |
+| name | 原生 name 属性 | `string` | - |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| change | 选中值改变时触发 | `(value: string \| number)` |
+
+## FormOption 类型
+
+```typescript
+type FormOption = {
+  label: string
+  value: string | number
+}
+```
+
+## 在 TForm 中使用
+
+TRadioButton 可以在 TForm 组件中使用：
+
+```vue
+<TForm v-model="formData" :schemas="schemas" />
+
+<script setup>
+const schemas = [
+  {
+    field: 'gender',
+    label: '性别',
+    component: 'Radio',
+    required: true,
+    componentProps: {
+      options: [
+        { label: '男', value: 'male' },
+        { label: '女', value: 'female' }
+      ]
+    }
+  }
+]
+</script>
+```

package/components/TRadioButton/index.uvue

@@ -14,6 +14,8 @@ type Props = {
   options?: FormOption[]
   /** 单个按钮模式：选项值 */
   value?: string | number
+  /** 单个按钮模式：显示标签 */
+  label?: string
   /** 按钮尺寸 */
   size?: 'small' | 'medium' | 'large'
   /** 活动状态颜色 */
@@ -60,14 +62,16 @@ const isOptionsMode = computed(() => props.options && props.options.length > 0)
  * 单个按钮模式：判断是否被选中
  */
 const isChecked = computed(() => {
-  if (isOptionsMode.value) {
+  // 优先使用 model.value 判断
+  if (model.value !== undefined && model.value !== null) {
     return model.value === props.value
   }
-  return props.checked || model.value === props.value
+  // 如果没有 model.value，使用 checked 属性
+  return props.checked === true
 })
 
 /**
-选择 * 处理变化
+ * 处理变化
  */
 const handleChange = (value: string | number) => {
   model.value = value
@@ -79,7 +83,9 @@ const handleChange = (value: string | number) => {
  */
 const handleClick = () => {
   if (props.disabled || isOptionsMode.value) return
-  handleChange(props.value!)
+  if (props.value !== undefined) {
+    handleChange(props.value)
+  }
 }
 
 /**
@@ -99,26 +105,26 @@ const sizeClass = computed(() => {
   <!-- 选项组模式：使用 options 属性 -->
   <view v-if="isOptionsMode" class="radio-group" :style="cssVars">
     <view
-      v-for="option in props.options"
+      v-for="option in options"
       :key="option.value"
       class="radio-item"
-      :class="{ 'radio-disabled': props.disabled }"
-      @click="!props.disabled && handleChange(option.value)"
+      :class="{ 'radio-disabled': disabled }"
+      @click="!disabled && handleChange(option.value)"
     >
-      <view class="radio-icon" :class="{ active: model === option.value, 'radio-disabled': props.disabled }">
-        <view v-if="model === option.value" class="radio-dot"></view>
+      <view class="radio-icon" :class="{ active: model.value === option.value, 'radio-disabled': disabled }">
+        <view v-if="model.value === option.value" class="radio-dot"></view>
       </view>
       <text class="radio-label">{{ option.label }}</text>
     </view>
   </view>
 
   <!-- 单个按钮模式：使用插槽或默认内容 -->
-  <view v-else class="radio-item" :class="[sizeClass, { 'radio-disabled': props.disabled }]" @click="handleClick">
-    <view class="radio-icon" :class="{ active: isChecked, 'radio-disabled': props.disabled }">
+  <view v-else class="radio-item" :class="[sizeClass, { active: isChecked, 'radio-disabled': disabled }]" :style="cssVars" @tap="handleClick">
+    <view class="radio-icon" :class="{ active: isChecked, 'radio-disabled': disabled }">
       <view v-if="isChecked" class="radio-dot"></view>
     </view>
     <slot>
-      <text v-if="props.value !== undefined" class="radio-label">{{ props.value }}</text>
+      <text v-if="label || value !== undefined" class="radio-label">{{ label || value }}</text>
     </slot>
   </view>
 </template>
@@ -126,24 +132,29 @@ const sizeClass = computed(() => {
 <style lang="scss" scoped>
 /* 选项组容器 */
 .radio-group {
+  display: flex;
   flex-direction: column;
   gap: 16rpx;
 }
 
 /* 单个按钮容器 */
 .radio-item {
+  display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16rpx;
+  padding: 8rpx 0;
+  cursor: pointer;
+}
 
-  &.radio-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+.radio-item.radio-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* 单选按钮图标 */
 .radio-icon {
+  display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
@@ -151,14 +162,14 @@ const sizeClass = computed(() => {
   border-style: solid;
   border-color: var(--radio-inactive-color);
   transition: all 0.2s ease;
+}
 
-  &.active {
-    border-color: var(--radio-active-color);
-  }
+.radio-icon.active {
+  border-color: var(--radio-active-color);
+}
 
-  &.radio-disabled {
-    border-color: #dcdfe6;
-  }
+.radio-icon.radio-disabled {
+  border-color: #dcdfe6;
 }
 
 /* 单选点 */
@@ -168,65 +179,59 @@ const sizeClass = computed(() => {
 }
 
 /* 尺寸样式 */
-.radio-size-small {
-  .radio-icon {
-    width: 28rpx;
-    height: 28rpx;
-  }
+.radio-size-small .radio-icon {
+  width: 28rpx;
+  height: 28rpx;
+}
 
-  .radio-dot {
-    width: 14rpx;
-    height: 14rpx;
-  }
+.radio-size-small .radio-dot {
+  width: 14rpx;
+  height: 14rpx;
+}
 
-  .radio-label {
-    font-size: 24rpx;
-  }
+.radio-size-small .radio-label {
+  font-size: 24rpx;
 }
 
-.radio-size-medium {
-  .radio-icon {
-    width: 36rpx;
-    height: 36rpx;
-  }
+.radio-size-medium .radio-icon {
+  width: 36rpx;
+  height: 36rpx;
+}
 
-  .radio-dot {
-    width: 20rpx;
-    height: 20rpx;
-  }
+.radio-size-medium .radio-dot {
+  width: 20rpx;
+  height: 20rpx;
+}
 
-  .radio-label {
-    font-size: 28rpx;
-  }
+.radio-size-medium .radio-label {
+  font-size: 28rpx;
 }
 
-.radio-size-large {
-  .radio-icon {
-    width: 44rpx;
-    height: 44rpx;
-  }
+.radio-size-large .radio-icon {
+  width: 44rpx;
+  height: 44rpx;
+}
 
-  .radio-dot {
-    width: 26rpx;
-    height: 26rpx;
-  }
+.radio-size-large .radio-dot {
+  width: 26rpx;
+  height: 26rpx;
+}
 
-  .radio-label {
-    font-size: 32rpx;
-  }
+.radio-size-large .radio-label {
+  font-size: 32rpx;
 }
 
 /* 文本标签 */
 .radio-label {
   color: var(--radio-inactive-color);
   transition: color 0.2s ease;
+}
 
-  .radio-item.active & {
-    color: var(--radio-active-color);
-  }
+.radio-item.active .radio-label {
+  color: var(--radio-active-color);
+}
 
-  .radio-disabled & {
-    color: #c0c4cc;
-  }
+.radio-item.radio-disabled .radio-label {
+  color: #c0c4cc;
 }
 </style>

package/components/TSearchBar/index.uvue

@@ -1,6 +1,7 @@
 <script setup lang="uts">
 import { ref, computed } from 'vue'
 import type { TSearchBarProps } from './type.uts'
+import { useI18n } from '../../composables/useI18n.uts'
 
 /**
  * TSearchBar 搜索框组件
@@ -11,13 +12,11 @@ import type { TSearchBarProps } from './type.uts'
 type Props = Omit<TSearchBarProps, 'modelValue'>
 
 const props = withDefaults(defineProps<Props>(), {
-  placeholder: '请输入搜索关键词',
   shape: 'square',
   background: '#f5f5f5',
   maxlength: -1,
   clearable: true,
   showCancel: false,
-  cancelText: '取消',
   disabled: false,
   readonly: false,
   autoFocus: false,
@@ -40,6 +39,22 @@ const emit = defineEmits<{
   blur: [event: Event]
 }>()
 
+// 使用 i18n
+const { $t } = useI18n()
+
+// 优先使用用户传入的值，否则使用翻译
+const displayPlaceholder = computed(() => {
+  return props.placeholder !== undefined && props.placeholder !== '' 
+    ? props.placeholder 
+    : $t('searchBar.placeholder')
+})
+
+const displayCancelText = computed(() => {
+  return props.cancelText !== undefined && props.cancelText !== '' 
+    ? props.cancelText 
+    : $t('searchBar.cancelText')
+})
+
 // 状态管理
 const isFocused = ref<boolean>(false)
 let debounceTimer: number | null = null
@@ -149,7 +164,7 @@ const handleCancel = (): void => {
         class="t-search-bar__input"
         type="text"
         :value="modelValue"
-        :placeholder="placeholder"
+        :placeholder="displayPlaceholder"
         :maxlength="maxlength"
         :disabled="disabled"
         :focus="autoFocus"
@@ -175,7 +190,7 @@ const handleCancel = (): void => {
       class="t-search-bar__cancel"
       @click="handleCancel"
     >
-      {{ cancelText }}
+      {{ displayCancelText }}
     </text>
   </view>
 </template>

package/composables/i18n/error.uts

@@ -0,0 +1,82 @@
+/**
+ * i18n 错误处理工具类
+ * 提供统一的错误和警告输出
+ */
+export class I18nError {
+  /**
+   * 警告：语言代码不存在
+   * @param locale 语言代码
+   */
+  static warnLocaleNotFound(locale: string): void {
+    console.warn(`[Tang UI I18n] Locale "${locale}" not found, using fallback locale`)
+  }
+  
+  /**
+   * 警告：翻译键不存在
+   * @param key 翻译键
+   * @param locale 语言代码
+   */
+  static warnKeyNotFound(key: string, locale: string): void {
+    // 仅在开发环境输出警告
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`[Tang UI I18n] Translation key "${key}" not found in locale "${locale}"`)
+    }
+  }
+  
+  /**
+   * 错误：语言包格式无效
+   * @param locale 语言代码
+   */
+  static errorInvalidMessages(locale: string): void {
+    console.error(`[Tang UI I18n] Invalid messages format for locale "${locale}"`)
+  }
+  
+  /**
+   * 警告：参数缺失
+   * @param key 翻译键
+   * @param param 参数名
+   */
+  static warnMissingParam(key: string, param: string): void {
+    // 仅在开发环境输出警告
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`[Tang UI I18n] Missing parameter "${param}" for key "${key}"`)
+    }
+  }
+  
+  /**
+   * 警告：翻译键格式无效
+   * @param key 翻译键
+   */
+  static warnInvalidKey(key: string): void {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn(`[Tang UI I18n] Invalid translation key format: "${key}". Expected format: "moduleName.key"`)
+    }
+  }
+  
+  /**
+   * 错误：语言包不是有效的对象
+   * @param locale 语言代码
+   */
+  static errorMessagesNotObject(locale: string): void {
+    console.error(`[Tang UI I18n] Messages for locale "${locale}" must be a valid object`)
+  }
+  
+  /**
+   * 错误：模块不是有效的对象
+   * @param locale 语言代码
+   * @param moduleName 模块名
+   */
+  static errorModuleNotObject(locale: string, moduleName: string): void {
+    console.error(`[Tang UI I18n] Module "${moduleName}" in locale "${locale}" must be a valid object`)
+  }
+  
+  /**
+   * 错误：键值不是字符串
+   * @param locale 语言代码
+   * @param moduleName 模块名
+   * @param key 键名
+   */
+  static errorValueNotString(locale: string, moduleName: string, key: string): void {
+    console.error(`[Tang UI I18n] Value for key "${key}" in module "${moduleName}" of locale "${locale}" must be a string`)
+  }
+}

package/composables/i18n/index.uts

@@ -0,0 +1,188 @@
+/**
+ * i18n 全局导出函数
+ * 提供全局访问的便捷方法
+ */
+
+import { I18nManager } from './manager.uts'
+import type { ModularLocaleMessages } from './types.uts'
+
+/**
+ * 设置语言（全局）
+ * 切换整个应用的显示语言
+ * 
+ * @param locale 语言代码（如 'zh-CN', 'en-US', 'zh-TW'）
+ * @returns 是否切换成功
+ * 
+ * @example
+ * ```typescript
+ * import { setLanguage } from 'tang-ui-x'
+ * 
+ * // 切换到英语
+ * const success = setLanguage('en-US')
+ * if (success) {
+ *   console.log('语言切换成功')
+ * } else {
+ *   console.log('语言切换失败，语言包未注册')
+ * }
+ * ```
+ */
+export function setLanguage(locale: string): boolean {
+  const manager = I18nManager.getInstance()
+  return manager.setLocale(locale)
+}
+
+/**
+ * 注册语言包（默认使用合并模式）
+ * 添加新语言或覆盖现有语言的翻译
+ * 默认使用合并模式，新内容会与现有内容合并，新键覆盖旧键，未覆盖的键保留
+ * 
+ * @param locale 语言代码
+ * @param messages 模块化语言包
+ * 
+ * @example
+ * ```typescript
+ * import { registerLocale } from 'tang-ui-x'
+ * 
+ * // 注册日语语言包
+ * registerLocale('ja-JP', {
+ *   common: {
+ *     confirm: '確認',
+ *     cancel: 'キャンセル',
+ *     ok: 'OK'
+ *   },
+ *   dialog: {
+ *     title: 'ヒント',
+ *     confirmText: '確認',
+ *     cancelText: 'キャンセル'
+ *   }
+ * })
+ * 
+ * // 覆盖部分中文翻译（合并模式）
+ * registerLocale('zh-CN', {
+ *   common: {
+ *     confirm: '好的'  // 只覆盖这个键，其他保持不变
+ *   }
+ * })
+ * ```
+ */
+export function registerLocale(locale: string, messages: ModularLocaleMessages): void {
+  const manager = I18nManager.getInstance()
+  manager.registerMessages(locale, messages)
+}
+
+/**
+ * 注册语言包（指定模式）
+ * 支持合并模式和替换模式
+ * - 合并模式：新内容与现有内容合并，新键覆盖旧键，未覆盖的键保留
+ * - 替换模式：完全替换现有语言包，不保留任何原有内容
+ * 
+ * @param locale 语言代码
+ * @param messages 模块化语言包
+ * @param mode 注册模式：'merge' 合并（默认），'replace' 替换
+ * 
+ * @example
+ * ```typescript
+ * import { registerLocaleWithMode } from 'tang-ui-x'
+ * 
+ * // 使用合并模式（与 registerLocale 相同）
+ * registerLocaleWithMode('zh-CN', {
+ *   common: {
+ *     confirm: '好的'  // 只覆盖这个键，其他保持不变
+ *   }
+ * }, 'merge')
+ * 
+ * // 使用替换模式（完全替换）
+ * registerLocaleWithMode('zh-CN', {
+ *   common: {
+ *     confirm: '好的',
+ *     cancel: '取消'
+ *   }
+ *   // 必须提供所有模块，否则缺失的模块将为空
+ * }, 'replace')
+ * ```
+ */
+export function registerLocaleWithMode(
+  locale: string,
+  messages: ModularLocaleMessages,
+  mode: 'merge' | 'replace'
+): void {
+  const manager = I18nManager.getInstance()
+  manager.registerMessagesWithMode(locale, messages, mode)
+}
+
+/**
+ * 替换语言包（完全替换）
+ * 完全替换指定语言的所有翻译内容，不保留任何原有内容
+ * 这是 registerLocaleWithMode(locale, messages, 'replace') 的便捷方法
+ * 
+ * @param locale 语言代码
+ * @param messages 模块化语言包
+ * 
+ * @example
+ * ```typescript
+ * import { replaceLocale } from 'tang-ui-x'
+ * 
+ * // 完全替换中文翻译
+ * replaceLocale('zh-CN', {
+ *   common: {
+ *     confirm: '好的',
+ *     cancel: '取消',
+ *     ok: 'OK'
+ *   },
+ *   dialog: {
+ *     title: '提示',
+ *     confirmText: '好的',
+ *     cancelText: '取消'
+ *   }
+ *   // 必须提供所有模块，否则缺失的模块将为空
+ * })
+ * ```
+ */
+export function replaceLocale(locale: string, messages: ModularLocaleMessages): void {
+  const manager = I18nManager.getInstance()
+  manager.replaceMessages(locale, messages)
+}
+
+/**
+ * 获取当前语言
+ * 返回当前激活的语言代码
+ * 
+ * @returns 当前语言代码
+ * 
+ * @example
+ * ```typescript
+ * import { getCurrentLocale } from 'tang-ui-x'
+ * 
+ * const current = getCurrentLocale()
+ * console.log('当前语言:', current)  // 输出: '当前语言: zh-CN'
+ * ```
+ */
+export function getCurrentLocale(): string {
+  const manager = I18nManager.getInstance()
+  return manager.getCurrentLocale()
+}
+
+/**
+ * 获取可用语言列表
+ * 返回所有已注册语言的语言代码数组
+ * 
+ * @returns 可用语言代码数组
+ * 
+ * @example
+ * ```typescript
+ * import { getAvailableLocales } from 'tang-ui-x'
+ * 
+ * const locales = getAvailableLocales()
+ * console.log('可用语言:', locales)  // 输出: ['zh-CN', 'en-US', 'zh-TW']
+ * 
+ * // 在语言选择器中使用
+ * locales.forEach(locale => {
+ *   console.log(`语言选项: ${locale}`)
+ * })
+ * ```
+ */
+export function getAvailableLocales(): string[] {
+  const manager = I18nManager.getInstance()
+  // 注意：这里返回的是计算属性的当前值，而不是响应式引用
+  return manager.getAvailableLocales().value
+}