tang-ui-x 1.1.1 → 1.1.3

package/components/TForm/type.uts

@@ -1,80 +1,90 @@
-/**
- * 表单选项类型
- */
-export type FormOption = {
-  label: string
-  value: string | number
-}
-
-/**
- * 组件通用属性
- */
-export type ComponentProps = {
-  /** 占位符 */
-  placeholder?: string
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 选项列表（用于 select、radio、checkbox） */
-  options?: FormOption[]
-  /** 输入类型（用于 input） */
-  type?: string
-  /** 最大长度（用于 input、textarea） */
-  maxlength?: number
-  /** 最小值（用于 number、slider） */
-  min?: number
-  /** 最大值（用于 number、slider、rate） */
-  max?: number
-  /** 步长（用于 slider） */
-  step?: number
-  /** 是否自动聚焦（用于 input、textarea） */
-  focus?: boolean
-  /** 确认按钮文字（用于 input） */
-  confirmType?: string
-  /** 是否自动高度（用于 textarea） */
-  autoHeight?: boolean
-  /** 是否显示确认栏（用于 textarea） */
-  showConfirmBar?: boolean
-  /** 开始日期（用于 date） */
-  start?: string
-  /** 结束日期（用于 date） */
-  end?: string
-  /** 激活颜色（用于 switch） */
-  color?: string
-  /** 是否允许半星（用于 rate） */
-  allowHalf?: boolean
-  /** 是否显示值（用于 slider） */
-  showValue?: boolean
-  /** 其他扩展属性 */
-  [key: string]: any
-}
-
-/**
- * 表单字段配置
- */
-export type FormSchema = {
-  /** 字段名 */
-  field: string
-  /** 标签文本 */
-  label: string
-  /** 组件类型 */
-  component: 'Input' | 'Textarea' | 'Select' | 'Date' | 'Time' | 'Radio' | 'Checkbox' | 'Switch' | 'Rate' | 'Slider' | 'InputNumber'
-  /** 是否必填 */
-  required?: boolean
-  /** 组件属性 */
-  componentProps?: ComponentProps
-}
-
-/**
- * 表单组件属性
- */
-export type TFormProps = {
-  /** 表单配置 */
-  schemas: FormSchema[]
-  /** 标签宽度 */
-  labelWidth?: string
-  /** 是否隐藏默认按钮 */
-  hideButtons?: boolean
-}
-
-// 导出所有类型
-export { FormOption, ComponentProps, FormSchema, TFormProps }
+/**
+ * 表单选项类型
+ */
+export type FormOption = {
+  label: string
+  value: string | number
+}
+
+/**
+ * 组件通用属性
+ */
+export type ComponentProps = {
+  /** 占位符 */
+  placeholder?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 选项列表（用于 select、radio、checkbox） */
+  options?: FormOption[]
+  /** 输入类型（用于 input） */
+  type?: string
+  /** 最大长度（用于 input、textarea） */
+  maxlength?: number
+  /** 最小值（用于 number、slider） */
+  min?: number
+  /** 最大值（用于 number、slider、rate） */
+  max?: number
+  /** 步长（用于 slider） */
+  step?: number
+  /** 是否自动聚焦（用于 input、textarea） */
+  focus?: boolean
+  /** 确认按钮文字（用于 input） */
+  confirmType?: string
+  /** 是否自动高度（用于 textarea） */
+  autoHeight?: boolean
+  /** 是否显示确认栏（用于 textarea） */
+  showConfirmBar?: boolean
+  /** 开始日期（用于 date） */
+  start?: string
+  /** 结束日期（用于 date） */
+  end?: string
+  /** 激活颜色（用于 switch） */
+  color?: string
+  /** 是否允许半星（用于 rate） */
+  allowHalf?: boolean
+  /** 是否显示值（用于 slider） */
+  showValue?: boolean
+  /** 其他扩展属性 */
+  [key: string]: any
+}
+
+/**
+ * 表单字段配置
+ */
+export type FormSchema = {
+  /** 字段名 */
+  field: string
+  /** 标签文本 */
+  label: string
+  /** 组件类型 */
+  component: 'Input' | 'Textarea' | 'Select' | 'Date' | 'Time' | 'Radio' | 'Checkbox' | 'Switch' | 'Rate' | 'Slider' | 'InputNumber'
+  /** 是否必填 */
+  required?: boolean
+  /** 组件属性 */
+  componentProps?: ComponentProps
+  /** 单个配置项的布局方向（优先级高于整体 layout） */
+  layout?: 'horizontal' | 'vertical'
+  /** 单个配置项的标签宽度（优先级高于整体 labelWidth） */
+  labelWidth?: string
+}
+
+/**
+ * 表单组件属性
+ */
+export type TFormProps = {
+  /** 表单配置 */
+  schemas: FormSchema[]
+  /** 标签宽度 */
+  labelWidth?: string
+  /** 表单项布局方向 */
+  layout?: 'horizontal' | 'vertical'
+  /** 是否隐藏默认按钮 */
+  hideButtons?: boolean
+  /** 提交按钮文本 */
+  submitText?: string
+  /** 重置按钮文本 */
+  resetText?: string
+}
+
+// 导出所有类型
+export { FormOption, ComponentProps, FormSchema, TFormProps }

package/components/TInput/index.uvue

@@ -16,6 +16,8 @@ const props = withDefaults(defineProps<TInputProps>(), {
   clearable: false,
   showCount: false,
   maxlength: -1,
+  prefix: '',
+  suffix: '',
   prefixIcon: '',
   suffixIcon: '',
   rows: 3,
@@ -70,13 +72,13 @@ const inputWrapperClasses = computed((): string => {
     classes.push('t-input--focused')
   }
 
-  // 前缀图标
-  if (props.prefixIcon) {
+  // 前缀文本或图标
+  if (props.prefix || props.prefixIcon) {
     classes.push('t-input--prefix')
   }
 
-  // 后缀图标或清除按钮
-  if (props.suffixIcon || props.clearable) {
+  // 后缀文本、图标或清除按钮
+  if (props.suffix || props.suffixIcon || props.clearable) {
     classes.push('t-input--suffix')
   }
 
@@ -142,8 +144,13 @@ const handleConfirm = () => {
 
 <template>
   <view class="t-input" :class="inputWrapperClasses" :style="customStyle">
+    <!-- 前缀文本 -->
+    <view v-if="prefix" class="t-input__prefix">
+      <text class="t-input__prefix-text">{{ prefix }}</text>
+    </view>
+
     <!-- 前缀图标 -->
-    <view v-if="prefixIcon" class="t-input__prefix">
+    <view v-else-if="prefixIcon" class="t-input__prefix">
       <text class="t-input__icon">{{ prefixIcon }}</text>
     </view>
 
@@ -189,6 +196,11 @@ const handleConfirm = () => {
       <text class="t-input__icon">✕</text>
     </view>
 
+    <!-- 后缀文本 -->
+    <view v-else-if="suffix" class="t-input__suffix">
+      <text class="t-input__suffix-text">{{ suffix }}</text>
+    </view>
+
     <!-- 后缀图标 -->
     <view v-else-if="suffixIcon" class="t-input__suffix">
       <text class="t-input__icon">{{ suffixIcon }}</text>
@@ -242,6 +254,13 @@ const handleConfirm = () => {
     font-size: 16px;
   }
 
+  &__prefix-text,
+  &__suffix-text {
+    font-size: 14px;
+    color: #606266;
+    white-space: nowrap;
+  }
+
   &__inner,
   &__textarea {
     flex: 1;

package/components/TInput/type.uts

@@ -63,6 +63,16 @@ export interface TInputProps {
    */
   maxlength?: number
 
+  /**
+   * 前缀文本
+   */
+  prefix?: string
+
+  /**
+   * 后缀文本
+   */
+  suffix?: string
+
   /**
    * 前缀图标
    */

package/components/TPicker/index.uvue

@@ -1,6 +1,7 @@
 <script setup lang="uts">
 import { computed, ref, watch } from 'vue'
 import type { TPickerProps, TPickerOption } from './type.uts'
+import { useI18n } from '../../composables/useI18n.uts'
 
 /**
  * TPicker 通用选择器组件
@@ -11,11 +12,8 @@ import type { TPickerProps, TPickerOption } from './type.uts'
 type Props = Omit<TPickerProps, 'visible'>
 
 const props = withDefaults(defineProps<Props>(), {
-  title: '请选择',
   options: () => [] as TPickerOption[],
   columns: () => [] as TPickerOption[][],
-  confirmText: '确定',
-  cancelText: '取消',
   itemHeight: '44px',
   visibleItemCount: 5,
   showToolbar: true
@@ -34,6 +32,28 @@ const emit = defineEmits<{
   change: [value: any, index: number | number[], columnIndex: number]
 }>()
 
+// 使用 i18n
+const { $t } = useI18n()
+
+// 优先使用用户传入的值，否则使用翻译
+const displayTitle = computed(() => {
+  return props.title !== undefined && props.title !== '' 
+    ? props.title 
+    : $t('picker.title')
+})
+
+const displayConfirmText = computed(() => {
+  return props.confirmText !== undefined && props.confirmText !== '' 
+    ? props.confirmText 
+    : $t('picker.confirmText')
+})
+
+const displayCancelText = computed(() => {
+  return props.cancelText !== undefined && props.cancelText !== '' 
+    ? props.cancelText 
+    : $t('picker.cancelText')
+})
+
 // 当前选中的索引（单列为 number，多列为 number[]）
 const selectedIndex = ref<number[]>([0])
 
@@ -154,13 +174,13 @@ const handleChange = (e: any): void => {
       <!-- 工具栏 -->
       <view v-if="showToolbar" class="t-picker__toolbar">
         <view class="t-picker__btn t-picker__btn--cancel" @click="handleCancel">
-          <text class="t-picker__btn-text">{{ cancelText }}</text>
+          <text class="t-picker__btn-text">{{ displayCancelText }}</text>
         </view>
         <view class="t-picker__title">
-          <text class="t-picker__title-text">{{ title }}</text>
+          <text class="t-picker__title-text">{{ displayTitle }}</text>
         </view>
         <view class="t-picker__btn t-picker__btn--confirm" @click="handleConfirm">
-          <text class="t-picker__btn-text t-picker__btn-text--primary">{{ confirmText }}</text>
+          <text class="t-picker__btn-text t-picker__btn-text--primary">{{ displayConfirmText }}</text>
         </view>
       </view>
 

package/components/TRadioGroup/index.uvue

@@ -12,6 +12,9 @@ type Props = Omit<TRadioGroupProps, 'modelValue'>
 const props = withDefaults(defineProps<Props>(), {
   options: () => [] as RadioOption[],
   direction: 'vertical',
+  size: 'medium',
+  activeColor: '#00bba7',
+  inactiveColor: '#c8c9cc',
   disabled: false,
   customClass: '',
   customStyle: ''
@@ -34,20 +37,37 @@ const handleChange = (option: RadioOption): void => {
 const isChecked = (option: RadioOption): boolean => {
   return modelValue.value === option.value
 }
+
+// 尺寸映射
+const sizeMap = {
+  small: { icon: 28, dot: 14, fontSize: 24 },
+  medium: { icon: 36, dot: 20, fontSize: 28 },
+  large: { icon: 44, dot: 26, fontSize: 32 }
+}
+
+const currentSize = computed(() => sizeMap[props.size])
+
+const cssVars = computed(() => ({
+  '--icon-size': `${currentSize.value.icon}rpx`,
+  '--dot-size': `${currentSize.value.dot}rpx`,
+  '--font-size': `${currentSize.value.fontSize}rpx`,
+  '--active-color': props.activeColor,
+  '--inactive-color': props.inactiveColor
+}))
 </script>
 
 <template>
   <view
     class="t-radio-group"
     :class="[`t-radio-group--${direction}`, customClass]"
-    :style="customStyle"
+    :style="[customStyle, cssVars]"
   >
     <view
       v-for="(option, index) in options"
       :key="index"
       class="t-radio-group__item"
       :class="{ 't-radio-group__item--disabled': disabled || option.disabled }"
-      @click="() => handleChange(option)"
+      @click="handleChange(option)"
     >
       <view class="t-radio-group__icon" :class="{ 't-radio-group__icon--checked': isChecked(option) }">
         <view v-if="isChecked(option)" class="t-radio-group__dot"></view>
@@ -73,7 +93,7 @@ const isChecked = (option: RadioOption): boolean => {
 
 .t-radio-group__item {
   display: flex;
-  align-items: center;
+	flex-direction: row;
   padding: 12px 0;
   cursor: pointer;
 
@@ -88,30 +108,30 @@ const isChecked = (option: RadioOption): boolean => {
 }
 
 .t-radio-group__icon {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #c8c9cc;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  border: 2rpx solid var(--inactive-color);
   border-radius: 50%;
-  margin-right: 8px;
+  margin-right: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
 
   &--checked {
-    border-color: #1890ff;
+    border-color: var(--active-color);
   }
 }
 
 .t-radio-group__dot {
-  width: 10px;
-  height: 10px;
-  background-color: #1890ff;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  background-color: var(--active-color);
   border-radius: 50%;
 }
 
 .t-radio-group__label {
-  font-size: 14px;
+  font-size: var(--font-size);
   color: #323233;
 }
 </style>

package/components/TRadioGroup/type.uts

@@ -3,6 +3,7 @@
  */
 
 export type RadioDirection = 'horizontal' | 'vertical'
+export type RadioSize = 'small' | 'medium' | 'large'
 
 export interface RadioOption {
   label: string
@@ -14,6 +15,12 @@ export interface TRadioGroupProps {
   modelValue?: string | number
   options?: RadioOption[]
   direction?: RadioDirection
+  /** 按钮尺寸 */
+  size?: RadioSize
+  /** 活动状态颜色 */
+  activeColor?: string
+  /** 非活动状态颜色 */
+  inactiveColor?: string
   disabled?: boolean
   customClass?: string
   customStyle?: string

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`)
+  }
+}