tang-ui-x 1.1.0 → 1.1.2

package/components/TActionSheet/index.uvue

@@ -1,6 +1,8 @@
 <script setup lang="uts">
+import { computed } from 'vue'
 import TPopup from '../TPopup/index.uvue'
 import type { ActionSheetAction, TActionSheetProps } from './type.uts'
+import { useI18n } from '../../composables/useI18n.uts'
 
 /**
  * TActionSheet 动作面板组件
@@ -14,7 +16,6 @@ const props = withDefaults(defineProps<Props>(), {
   actions: () => [] as ActionSheetAction[],
   title: '',
   description: '',
-  cancelText: '取消',
   closeOnClickAction: true,
   closeOnClickOverlay: true,
   customClass: '',
@@ -30,6 +31,18 @@ const emit = defineEmits<{
   close: []
 }>()
 
+// 使用 i18n
+const { $t } = useI18n()
+
+// 优先使用用户传入的值，否则使用翻译
+const displayCancelText = computed(() => {
+  // 如果用户明确传入了 cancelText（即使是空字符串），使用用户的值
+  // 否则使用翻译
+  return props.cancelText !== undefined && props.cancelText !== '' 
+    ? props.cancelText 
+    : $t('actionSheet.cancelText')
+})
+
 const handleSelect = (action: ActionSheetAction, index: number): void => {
   if (action.disabled || action.loading) return
 
@@ -90,7 +103,7 @@ const handleClose = (): void => {
 
       <!-- 取消按钮 -->
       <view class="t-action-sheet__cancel" @click="handleCancel">
-        <text class="t-action-sheet__cancel-text">{{ cancelText }}</text>
+        <text class="t-action-sheet__cancel-text">{{ displayCancelText }}</text>
       </view>
     </view>
   </TPopup>

package/components/TCollapse/index.uvue

@@ -53,7 +53,7 @@ const toggle = (name: string): void => {
  * 提供给子组件的上下文
  */
 const collapseContext: TCollapseContext = {
-  activeNames: activeNamesArray.value,
+  activeNames: activeNamesArray,
   accordion: props.accordion,
   toggle
 }

package/components/TCollapse/type.uts

@@ -15,6 +15,8 @@ export type TCollapseProps = {
   border?: boolean
 }
 
+import type { ComputedRef } from 'vue'
+
 /**
  * TCollapse 提供给子组件的上下文
  */
@@ -22,7 +24,7 @@ export type TCollapseContext = {
   /**
    * 当前展开的面板名称（数组）
    */
-  activeNames: string[]
+  activeNames: ComputedRef<string[]>
 
   /**
    * 是否为手风琴模式

package/components/TCollapseItem/index.uvue

@@ -18,12 +18,24 @@ const props = withDefaults(defineProps<TCollapseItemProps>(), {
 // 从父组件注入上下文
 const collapseContext = inject<TCollapseContext>('TCollapse')
 
+// 内容高度
+const contentHeight = ref<number>(0)
+const contentRef = ref<any>(null)
+
 // 计算是否展开
 const isActive = computed<boolean>(() => {
   if (collapseContext == null) {
     return false
   }
-  return collapseContext.activeNames.indexOf(props.name) > -1
+  return collapseContext.activeNames.value.indexOf(props.name) > -1
+})
+
+// 计算内容样式
+const contentStyle = computed<string>(() => {
+  if (isActive.value) {
+    return 'max-height: 2000px; opacity: 1; padding-top: 0; padding-bottom: 0;'
+  }
+  return 'max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;'
 })
 
 /**
@@ -88,13 +100,11 @@ const arrowClass = computed<string>(() => {
     </view>
 
     <!-- 内容区域 -->
-    <transition name="t-collapse">
-      <view v-show="isActive" class="t-collapse-item__content">
-        <view class="t-collapse-item__content-inner">
-          <slot></slot>
-        </view>
+    <view class="t-collapse-item__content" :style="contentStyle">
+      <view class="t-collapse-item__content-inner">
+        <slot></slot>
       </view>
-    </transition>
+    </view>
   </view>
 </template>
 
@@ -147,7 +157,7 @@ const arrowClass = computed<string>(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: transform 0.3s;
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 
     &--active {
       transform: rotate(90deg);
@@ -164,31 +174,17 @@ const arrowClass = computed<string>(() => {
   &__content {
     background-color: #ffffff;
     overflow: hidden;
+    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 
     &-inner {
       padding: 16px 20px;
       font-size: 14px;
       color: #606266;
       line-height: 1.6;
+      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
 }
-
-/* 折叠动画 */
-.t-collapse-enter-active,
-.t-collapse-leave-active {
-  transition: all 0.3s ease;
-}
-
-.t-collapse-enter-from,
-.t-collapse-leave-to {
-  opacity: 0;
-  max-height: 0;
-}
-
-.t-collapse-enter-to,
-.t-collapse-leave-from {
-  opacity: 1;
-  max-height: 1000px;
-}
 </style>

package/components/TDialog/index.uvue

@@ -1,6 +1,7 @@
 <script  setup lang="uts" >
 import { computed } from 'vue'
 import type { TDialogProps } from './type.uts'
+import { useI18n } from '../../composables/useI18n.uts'
 
 /**
  * TDialog 对话框组件
@@ -18,8 +19,6 @@ const props = withDefaults(defineProps<Props>(), {
   maskClosable: true,
   showClose: true,
   showCancel: true,
-  confirmText: '确定',
-  cancelText: '取消',
   confirmType: 'primary'
 })
 
@@ -33,6 +32,22 @@ const emit = defineEmits<{
   close: []
 }>()
 
+// 使用 i18n
+const { $t } = useI18n()
+
+// 优先使用用户传入的值，否则使用翻译
+const displayConfirmText = computed(() => {
+  return props.confirmText !== undefined && props.confirmText !== '' 
+    ? props.confirmText 
+    : $t('dialog.confirmText')
+})
+
+const displayCancelText = computed(() => {
+  return props.cancelText !== undefined && props.cancelText !== '' 
+    ? props.cancelText 
+    : $t('dialog.cancelText')
+})
+
 /**
  * 计算对话框样式
  */
@@ -129,10 +144,10 @@ const handleClose = (): void => {
             <view class="t-dialog__footer">
                 <slot name="footer">
                   <view v-if="showCancel" class="t-dialog__btn t-dialog__btn--cancel" @click="handleCancel">
-                    <text class="t-dialog__btn-text">{{ cancelText }}</text>
+                    <text class="t-dialog__btn-text">{{ displayCancelText }}</text>
                   </view>
                   <view :class="confirmBtnClass" @click="handleConfirm">
-                    <text class="t-dialog__btn-text t-dialog__btn-text--confirm">{{ confirmText }}</text>
+                    <text class="t-dialog__btn-text t-dialog__btn-text--confirm">{{ displayConfirmText }}</text>
                   </view>
                 </slot>
             </view>

package/components/TEmpty/index.uvue

@@ -1,4 +1,8 @@
 <script  setup lang="uts" >
+	import { computed } from 'vue'
+	import TButton from '../TButton/index.uvue'
+	import { useI18n } from '../../composables/useI18n.uts'
+
 	interface EmptyProps {
 		/** 标题  */
 		title ?: string;
@@ -15,11 +19,8 @@
 	}
 
 	const props = withDefaults(defineProps<EmptyProps>(), {
-		title: '暂无数据',
-		description: '当前没有相关内容',
 		image: '/static/images/empty.png',
 		showAction: false,
-		actionText: '刷新试试',
 		compact: false
 	});
 
@@ -27,6 +28,14 @@
 		actionClick : []
 	}>();
 
+	// 使用 i18n
+	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'))
+
 	const handleActionClick = () => {
 		emits('actionClick');
 	};
@@ -43,7 +52,7 @@
 			'empty-image',
 			compact ? 'w-24 h-24 mb-3' : 'w-32 h-32 mb-4'
 			]">
-				<LazyImage :src="image" class="w-full h-full" mode="aspectFit" :show-loading="false" />
+				<image :src="image" class="w-full h-full" mode="aspectFit" :show-loading="false" />
 			</view>
 		</slot>
 
@@ -52,21 +61,25 @@
 					'empty-title block text-gray-700 dark:text-gray-300 text-center',
 					compact ? 'text-base font-medium' : 'text-lg font-medium',
 				]">
-				{{ title }}
+				{{ displayTitle }}
 			</text>
 
-			<text v-if="description" :class="[
+			<text v-if="displayDescription" :class="[
 					'empty-description block mt-2 text-gray-500 dark:text-gray-400',
 					compact ? 'text-xs' : 'text-sm',
 				]">
-				{{ description }}
+				{{ displayDescription }}
 			</text>
 		</view>
 
 		<view v-if="showAction" class="empty-action mt-6">
-			<ButtonX size='small' :block="true" @tap="handleActionClick">
-				{{ actionText }}
-			</ButtonX>
+			<TButton 
+				type="primary" 
+				size="medium" 
+				@click="handleActionClick"
+			>
+				{{ displayActionText }}
+			</TButton>
 		</view>
 	</view>
 </template>
@@ -105,6 +118,11 @@
 		max-width: 80vw;
 	}
 
+	.empty-action {
+		width: 100%;
+		max-width: 200px;
+	}
+
 	// 动画效果
 	.empty-image {
 		animation: fadeIn 0.5s ease;
@@ -121,8 +139,4 @@
 			transform: translateY(0);
 		}
 	}
-
-	:deep(.btn-small) {
-		padding: 0 1rem
-	}
 </style>

package/components/TForm/index.uvue

@@ -1,10 +1,12 @@
 <script setup lang="uts">
+	import { computed } from 'vue'
 	import TRadioButton from '../TRadioButton/index.uvue'
 	import TCheckbox from '../TCheckbox/index.uvue'
 	import TSwitch from '../TSwitch/index.uvue'
 	import TRate from '../TRate/index.uvue'
 	import TSlider from '../TSlider/index.uvue'
 	import type { FormOption, FormSchema, TFormProps, ComponentProps } from './type.uts'
+	import { useI18n } from '../../composables/useI18n.uts'
 
 	const props = withDefaults(defineProps<TFormProps>(), {
 		labelWidth: '160rpx',
@@ -16,8 +18,27 @@
 	const model = defineModel<Record<string, any>>({ default: () => ({}) })
 	const errors = reactive<Record<string, string>>({})
 
+	// 使用 i18n
+	const { $t } = useI18n()
+
+	// 按钮文本
+	const submitButtonText = computed(() => {
+		return props.submitText !== undefined && props.submitText !== '' 
+			? props.submitText 
+			: $t('form.submitButton')
+	})
+
+	const resetButtonText = computed(() => {
+		return props.resetText !== undefined && props.resetText !== '' 
+			? props.resetText 
+			: $t('form.resetButton')
+	})
+
 	const handlePlaceholder = (item: FormSchema): string => {
-		return item.componentProps?.placeholder || `请输入${item.label}`
+		if (item.componentProps?.placeholder) {
+			return item.componentProps.placeholder
+		}
+		return $t('form.inputPlaceholder', { label: item.label })
 	}
 
 	const handleRange = (item: FormSchema) => {
@@ -46,7 +67,7 @@
 
 	const validateField = (item: FormSchema) => {
 		if (item.required && !model.value[item.field]) {
-			errors[item.field] = `请输入${item.label}`
+			errors[item.field] = $t('form.requiredError', { label: item.label })
 		} else {
 			delete errors[item.field]
 		}
@@ -89,7 +110,7 @@
 		}
 
 		if (hasError) {
-			console.warn('表单验证失败')
+			console.warn($t('form.validationFailed'))
 			return { valid: false, values: null }
 		}
 
@@ -97,7 +118,7 @@
 			await emit('submit', model.value)
 			return { valid: true, values: model.value }
 		} catch (err) {
-			console.error('表单提交失败:', err)
+			console.error($t('form.submitFailed'), err)
 			return { valid: false, values: null }
 		}
 	}
@@ -180,7 +201,7 @@
 						v-bind="item.componentProps || {}"
 						@change="onSelectChange($event, item)">
 						<view class="picker">
-							{{ getSelectLabel(item) || '请选择' }}
+							{{ getSelectLabel(item) || $t('form.selectPlaceholder') }}
 						</view>
 					</picker>
 
@@ -192,7 +213,7 @@
 						v-bind="item.componentProps || {}"
 						@change="onTimeChange($event, item)">
 						<view class="picker">
-							{{ model[item.field] || '请选择日期' }}
+							{{ model[item.field] || $t('form.datePlaceholder') }}
 						</view>
 					</picker>
 
@@ -204,7 +225,7 @@
 						v-bind="item.componentProps || {}"
 						@change="onTimeChange($event, item)">
 						<view class="picker">
-							{{ model[item.field] || '请选择时间' }}
+							{{ model[item.field] || $t('form.timePlaceholder') }}
 						</view>
 					</picker>
 
@@ -213,32 +234,33 @@
 						<TRadioButton 
 							v-for="opt in (item.componentProps?.options as FormOption[])" 
 							:key="opt.value"
+							v-model="model[item.field]"
 							:label="opt.label"
 							:value="opt.value"
-							:checked="model[item.field] === opt.value"
-							v-bind="item.componentProps || {}"
 							@change="onRadioChange(opt.value, item)" />
 					</view>
 
 					<!-- 多选 -->
 					<view v-else-if="item.component === 'Checkbox'" class="checkbox-group">
-						<TCheckbox 
+						<view 
 							v-for="opt in (item.componentProps?.options as FormOption[])" 
 							:key="opt.value"
-							:label="opt.label"
-							:value="opt.value"
-							:checked="(model[item.field] || []).includes(opt.value)"
-							v-bind="item.componentProps || {}"
-							@change="(checked) => {
-								const values = model[item.field] || []
-								if (checked) {
-									values.push(opt.value)
-								} else {
-									const index = values.indexOf(opt.value)
-									if (index > -1) values.splice(index, 1)
-								}
-								onCheckboxChange(values, item)
-							}" />
+							class="checkbox-item">
+							<TCheckbox 
+								:checked="(model[item.field] || []).includes(opt.value)"
+								v-bind="item.componentProps || {}"
+								@change="(checked) => {
+									const values = model[item.field] || []
+									if (checked) {
+										values.push(opt.value)
+									} else {
+										const index = values.indexOf(opt.value)
+										if (index > -1) values.splice(index, 1)
+									}
+									onCheckboxChange(values, item)
+								}" />
+							<text class="checkbox-label">{{ opt.label }}</text>
+						</view>
 					</view>
 
 					<!-- 开关 -->
@@ -268,8 +290,8 @@
 
 			<!-- 按钮区域 -->
 			<view v-if="!hideButtons" class="form-footer">
-				<button class="btn btn-submit" form-type="submit">提交</button>
-				<button class="btn btn-reset" form-type="reset">重置</button>
+				<button class="btn btn-submit" form-type="submit">{{ submitButtonText }}</button>
+				<button class="btn btn-reset" form-type="reset">{{ resetButtonText }}</button>
 			</view>
 		</form>
 	</view>
@@ -338,6 +360,18 @@
 	gap: 16rpx;
 }
 
+.checkbox-item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 16rpx;
+}
+
+.checkbox-label {
+	font-size: 28rpx;
+	color: #333;
+}
+
 .error-message {
 	margin-top: 8rpx;
 	font-size: 24rpx;

package/components/TForm/type.uts

@@ -74,6 +74,10 @@ export type TFormProps = {
   labelWidth?: string
   /** 是否隐藏默认按钮 */
   hideButtons?: boolean
+  /** 提交按钮文本 */
+  submitText?: string
+  /** 重置按钮文本 */
+  resetText?: string
 }
 
 // 导出所有类型

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>