tang-ui-x 1.3.2 → 1.3.3

package/components/TActionSheet/index.uvue

@@ -31,8 +31,24 @@ const emit = defineEmits<{
   close: []
 }>()
 
-// 使用 i18n
-const { $t } = useI18n()
+// 使用 i18n
+const { $t } = useI18n()
+
+const hasTextValue = (value: string | null | undefined): boolean => {
+  return value !== undefined && value !== null && value !== ''
+}
+
+const hasTitle = computed(() => {
+  return hasTextValue(props.title)
+})
+
+const hasDescription = computed(() => {
+  return hasTextValue(props.description)
+})
+
+const showHeader = computed(() => {
+  return hasTitle.value || hasDescription.value
+})
 
 // 优先使用用户传入的值，否则使用翻译
 const displayCancelText = computed(() => {
@@ -75,10 +91,10 @@ const handleClose = (): void => {
   >
     <view class="t-action-sheet bg-transparent p-0" :class="customClass" :style="customStyle">
       <!-- 头部：标题和描述 -->
-      <view v-if="title || description" class="t-action-sheet__header border-b border-[#ebedf0] p-4 text-center">
-        <text v-if="title" class="t-action-sheet__title mb-2 block text-base font-medium text-[#323233]">{{ title }}</text>
-        <text v-if="description" class="t-action-sheet__description block text-sm text-[#969799]">{{ description }}</text>
-      </view>
+      <view v-if="showHeader" class="t-action-sheet__header border-b border-[#ebedf0] p-4 text-center">
+        <text v-if="hasTitle" class="t-action-sheet__title mb-2 block text-base font-medium text-[#323233]">{{ title }}</text>
+        <text v-if="hasDescription" class="t-action-sheet__description block text-sm text-[#969799]">{{ description }}</text>
+      </view>
 
       <!-- 操作列表 -->
       <view class="t-action-sheet__actions max-h-[400px] overflow-y-auto">

package/components/TAvatar/index.uvue

@@ -24,8 +24,20 @@ const emit = defineEmits<{
   error: []
 }>()
 
-// 图片加载失败标记
-const hasLoadError = ref(false)
+// 图片加载失败标记
+const hasLoadError = ref(false)
+
+const hasTextValue = (value: string | null | undefined): boolean => {
+  return value !== undefined && value !== null && value !== ''
+}
+
+const hasSrc = computed(() => {
+  return hasTextValue(props.src)
+})
+
+const hasAlt = computed(() => {
+  return hasTextValue(props.alt)
+})
 
 /**
  * 计算头像大小
@@ -35,14 +47,16 @@ const avatarSize = computed(() => {
     return props.size
   }
 
-  const sizeMap = {
-    small: 32,
-    medium: 40,
-    large: 56
-  }
-
-  return sizeMap[props.size] || 40
-})
+  const sizeMap = {
+    small: 32,
+    medium: 40,
+    large: 56
+  }
+
+  if (props.size === 'small') return sizeMap.small
+  if (props.size === 'large') return sizeMap.large
+  return sizeMap.medium
+})
 
 /**
  * 计算头像样式类
@@ -69,9 +83,9 @@ const avatarStyle = computed(() => {
   styles.push(`width: ${size}px`)
   styles.push(`height: ${size}px`)
 
-  if (!props.src || hasLoadError.value) {
-    styles.push(`background-color: ${props.bgColor}`)
-  }
+  if (!hasSrc.value || hasLoadError.value) {
+    styles.push(`background-color: ${props.bgColor}`)
+  }
 
   return styles.join('; ')
 })
@@ -106,26 +120,26 @@ const handleError = (): void => {
 /**
  * 获取显示的文字（取首字符）
  */
-const displayText = computed(() => {
-  if (props.alt) {
-    return props.alt.charAt(0).toUpperCase()
-  }
-  return ''
+const displayText = computed(() => {
+  if (hasAlt.value) {
+    return props.alt.charAt(0).toUpperCase()
+  }
+  return ''
 })
 </script>
 
 <template>
   <view :class="avatarClass" :style="avatarStyle" @click="handleClick">
-    <image
-      v-if="src && !hasLoadError"
-      class="t-avatar__image h-full w-full"
-      :src="src"
-      :mode="fit"
-      @error="handleError"
-    />
-    <text v-else-if="alt" class="t-avatar__text text-center font-medium" :style="textStyle">
-      {{ displayText }}
-    </text>
+    <image
+      v-if="hasSrc && !hasLoadError"
+      class="t-avatar__image h-full w-full"
+      :src="src"
+      :mode="fit"
+      @error="handleError"
+    />
+    <text v-else-if="hasAlt" class="t-avatar__text text-center font-medium" :style="textStyle">
+      {{ displayText }}
+    </text>
     <slot v-else></slot>
   </view>
 </template>

package/components/TCheckbox/index.uvue

@@ -22,6 +22,10 @@ const emit = defineEmits<{
   click: [event: any]
 }>()
 
+const isChecked = computed(() => {
+  return model.value === true
+})
+
 const getCheckboxSize = (): number => {
   switch (props.size) {
     case 'small':
@@ -79,9 +83,9 @@ const checkboxStyle = computed(() => {
   styles.push(`height: var(--checkbox-size)`)
   styles.push(`border-width: var(--checkbox-border-width)`)
   styles.push('border-style: solid')
-  styles.push(`border-color: ${model.value ? props.activeColor : props.inactiveColor}`)
+  styles.push(`border-color: ${isChecked.value ? props.activeColor : props.inactiveColor}`)
 
-  if (model.value) {
+  if (isChecked.value) {
     styles.push(`background-color: ${props.activeColor}`)
   }
 
@@ -124,7 +128,7 @@ const handleTouchStart = () => {
   >
     <view :class="iconClass" :style="checkboxStyle">
       <!-- 选中状态的图标 -->
-      <view v-if="model" class="flex items-center justify-center" :style="`width: var(--checkbox-icon-size); height: var(--checkbox-icon-size);`">
+      <view v-if="isChecked" class="flex items-center justify-center" :style="`width: var(--checkbox-icon-size); height: var(--checkbox-icon-size);`">
         <text class="font-bold text-white" :style="checkmarkStyle">✓</text>
       </view>
 

package/components/TDateTimePicker/index.uvue

@@ -145,7 +145,14 @@ const getFirstDayOfMonth = (year: number, month: number): number => {
 }
 
 // 使用导出的日期项类型
-type DayItem = TDateTimePickerDayItem
+type DayItem = TDateTimePickerDayItem
+type DayClassMap = {
+  't-datetime-picker__day--other': boolean
+  't-datetime-picker__day--disabled': boolean
+  't-datetime-picker__day--range-start': boolean
+  't-datetime-picker__day--range-end': boolean
+  't-datetime-picker__day--in-range': boolean
+}
 
 // 将日期转换为时间戳（用于范围比较）
 const dateToTimestamp = (year: number, month: number, day: number): number => {
@@ -208,10 +215,10 @@ const getDayStyle = (item: DayItem): string => {
 }
 
 // 获取日期单元格类名
-const getDayClass = (item: DayItem): Record<string, boolean> => {
-  return {
-    't-datetime-picker__day--other': !item.isCurrentMonth,
-    't-datetime-picker__day--disabled': item.isDisabled,
+const getDayClass = (item: DayItem): DayClassMap => {
+  return {
+    't-datetime-picker__day--other': !item.isCurrentMonth,
+    't-datetime-picker__day--disabled': item.isDisabled,
     't-datetime-picker__day--range-start': item.isRangeStart === true,
     't-datetime-picker__day--range-end': item.isRangeEnd === true,
     't-datetime-picker__day--in-range': item.isInRange === true
@@ -654,7 +661,7 @@ watch(visible, (newVal: boolean) => {
         setValueByTimestamp(Date.now())
       }
     } else {
-      setValueByTimestamp(selectedValue.value || Date.now())
+      setValueByTimestamp(selectedValue.value !== 0 ? selectedValue.value : Date.now())
     }
     // 根据模式设置初始面板
     if (props.mode === 'month') {

package/components/TDialog/index.uvue

@@ -32,8 +32,20 @@ const emit = defineEmits<{
   close: []
 }>()
 
-// 使用 i18n
-const { $t } = useI18n()
+// 使用 i18n
+const { $t } = useI18n()
+
+const hasTextValue = (value: string | null | undefined): boolean => {
+  return value !== undefined && value !== null && value !== ''
+}
+
+const hasTitle = computed(() => {
+  return hasTextValue(props.title)
+})
+
+const showHeader = computed(() => {
+  return hasTitle.value || props.showClose
+})
 
 // 优先使用用户传入的值，否则使用翻译
 const displayConfirmText = computed(() => {
@@ -153,7 +165,7 @@ const handleClose = (): void => {
         >
           <view class="min-w-[280px] max-w-[90%] overflow-hidden rounded-lg bg-white" :style="dialogStyle">
             <!-- 头部 -->
-            <view v-if="title || showClose" class="relative flex min-h-12 items-center justify-center border-b border-[#ebeef5] px-5 py-4">
+            <view v-if="showHeader" class="relative flex min-h-12 items-center justify-center border-b border-[#ebeef5] px-5 py-4">
               <!-- 关闭按钮（定位方式，不占用文档流） -->
               <view
                 v-if="showClose"
@@ -167,7 +179,7 @@ const handleClose = (): void => {
               <!-- 标题（居中，支持插槽） -->
               <view class="relative flex w-full items-center justify-center">
                 <slot name="title">
-                  <text v-if="title" class="text-lg font-semibold leading-[1.4] text-[#303133]">{{ title }}</text>
+                  <text v-if="hasTitle" class="text-lg font-semibold leading-[1.4] text-[#303133]">{{ title }}</text>
                 </slot>
               </view>
             </view>

package/components/TForm/index.uvue

@@ -12,7 +12,11 @@
 	import type { FormOption, FormSchema, TFormProps, ComponentProps } from './type.uts'
 	import { useI18n } from '../../composables/useI18n.uts'
 
-	type FormModelValue = Record<string, any>
+	type FormModelValue = any
+	type FormSubmitResult = {
+		valid : boolean
+		values : any
+	}
 
 	const props = withDefaults(defineProps<TFormProps>(), {
 		labelWidth: '110rpx',
@@ -23,7 +27,7 @@
 	const emit = defineEmits(['submit', 'reset'])
 
 	const model = defineModel({ default: () => ({}) }) as Ref<FormModelValue>
-	const errors = reactive<Record<string, string>>({})
+	const errors = reactive({}) as any
 
 	// 使用 i18n
 	const { $t } = useI18n()
@@ -35,37 +39,65 @@
 			: $t('form.submitButton')
 	})
 
-	const resetButtonText = computed(() => {
-		return props.resetText !== undefined && props.resetText !== ''
-			? props.resetText
-			: $t('form.resetButton')
-	})
-
-	// 获取单个配置项的布局方向（单个配置优先）
-	const getItemLayout = (item : FormSchema) : string => {
-		return item.layout || props.layout
-	}
-
-	// 获取单个配置项的标签宽度（单个配置优先）
-	const getItemLabelWidth = (item : FormSchema) : string => {
-		return item.labelWidth || props.labelWidth
-	}
-
-	const handlePlaceholder = (item : FormSchema) : string => {
-		if (item.componentProps?.placeholder) {
-			return item.componentProps.placeholder
-		}
-		return $t('form.inputPlaceholder', { label: item.label })
-	}
-
-	const getSelectOptions = (item : FormSchema) => {
-		const options = item.componentProps?.options as FormOption[] | undefined
-		return options?.map(o => ({ label: o.label, value: o.value })) || []
-	}
-
-	const getPickerTextClass = (item : FormSchema) : string => {
-		return model.value[item.field] ? 'text-[#333333]' : 'text-[#c0c4cc]'
-	}
+	const resetButtonText = computed(() => {
+		return props.resetText !== undefined && props.resetText !== ''
+			? props.resetText
+			: $t('form.resetButton')
+	})
+
+	const hasTextValue = (value : string | null | undefined) : boolean => {
+		return value !== undefined && value !== null && value !== ''
+	}
+
+	// 获取单个配置项的布局方向（单个配置优先）
+	const getItemLayout = (item : FormSchema) : string => {
+		return hasTextValue(item.layout) ? item.layout as string : props.layout
+	}
+
+	// 获取单个配置项的标签宽度（单个配置优先）
+	const getItemLabelWidth = (item : FormSchema) : string => {
+		return hasTextValue(item.labelWidth) ? item.labelWidth as string : props.labelWidth
+	}
+
+	const handlePlaceholder = (item : FormSchema) : string => {
+		const placeholder = item.componentProps?.placeholder
+		if (hasTextValue(placeholder)) {
+			return placeholder as string
+		}
+		return $t('form.inputPlaceholder', { label: item.label })
+	}
+
+	const getSelectOptions = (item : FormSchema) => {
+		const options = item.componentProps?.options as FormOption[] | undefined
+		if (options != null) {
+			return options.map(o => ({ label: o.label, value: o.value }))
+		}
+		return []
+	}
+
+	const getPickerTextClass = (item : FormSchema) : string => {
+		return isFieldEmpty(model.value[item.field]) ? 'text-[#c0c4cc]' : 'text-[#333333]'
+	}
+
+	const getInputType = (item : FormSchema) : string => {
+		const inputType = item.componentProps?.type
+		return hasTextValue(inputType) ? inputType as string : 'text'
+	}
+
+	const getSelectPlaceholder = (item : FormSchema) : string => {
+		const placeholder = item.componentProps?.placeholder
+		return hasTextValue(placeholder) ? placeholder as string : $t('form.selectPlaceholder')
+	}
+
+	const getPickerDisplayText = (item : FormSchema, placeholderKey : string) : string => {
+		const value = model.value[item.field]
+		return isFieldEmpty(value) ? $t(placeholderKey) : value as string
+	}
+
+	const getNumericFieldValue = (field : string) : number => {
+		const value = model.value[field]
+		return isFieldEmpty(value) ? 0 : value as number
+	}
 
 	// 安全获取组件属性，避免 v-bind="" 编译问题
 	const getComponentProps = (item : FormSchema) : ComponentProps => {
@@ -75,9 +107,9 @@
 		return {} as ComponentProps
 	}
 
-	const getInputProps = (item : FormSchema, inputType : string) : Record<string, any> => {
-		const componentProps = getComponentProps(item)
-		const mergedProps: Record<string, any> = {
+	const getInputProps = (item : FormSchema, inputType : string) : any => {
+		const componentProps = getComponentProps(item)
+		const mergedProps: any = {
 			...componentProps,
 			type: inputType,
 			placeholder: handlePlaceholder(item)
@@ -91,8 +123,8 @@
 	}
 
 	// 日期时间选择器状态管理
-	const pickerVisible = reactive<Record<string, boolean>>({})
-	const pickerValues = reactive<Record<string, number>>({})
+	const pickerVisible = reactive({}) as any
+	const pickerValues = reactive({}) as any
 
 	const openPicker = (field : string) => {
 		pickerVisible[field] = true
@@ -153,8 +185,8 @@
 	 * 获取当前有效错误信息
 	 * @returns 当前存在错误文案的字段映射
 	 */
-	const getActiveErrors = () : Record<string, string> => {
-		const activeErrors : Record<string, string> = {}
+	const getActiveErrors = () : any => {
+		const activeErrors : any = {}
 		Object.keys(errors).forEach((field : string) => {
 			const message = errors[field]
 			if (message !== '') {
@@ -175,14 +207,22 @@
 	}
 
 	// 抖动动画状态
-	const shakeFields = reactive<Record<string, boolean>>({})
-
-	const triggerShake = (field : string) => {
-		shakeFields[field] = true
-		setTimeout(() => {
-			shakeFields[field] = false
-		}, 500)
-	}
+	const shakeFields = reactive({}) as any
+
+	const triggerShake = (field : string) => {
+		shakeFields[field] = true
+		setTimeout(() => {
+			shakeFields[field] = false
+		}, 500)
+	}
+
+	const hasFieldError = (field : string) : boolean => {
+		return errors[field] !== undefined && errors[field] !== ''
+	}
+
+	const isFieldShaking = (field : string) : boolean => {
+		return shakeFields[field] === true
+	}
 
 	const onSwitchChange = (value : boolean, item : FormSchema) => {
 		model.value[item.field] = value
@@ -199,7 +239,7 @@
 		validateField(item)
 	}
 
-	const onFormSubmit = async (_e : UniFormSubmitEvent) : Promise<{ valid : boolean, values : any }> => {
+	const onFormSubmit = async (_e : UniFormSubmitEvent) : Promise<FormSubmitResult> => {
 		clearErrors()
 
 		let hasError = false
@@ -259,13 +299,13 @@
 	<view class="p-4">
 		<form @submit="onFormSubmit" @reset="onFormReset">
 			<view
-				v-for="(item, index) in schemas"
-				class="mb-4 overflow-visible rounded-[12rpx] border-[2rpx] border-transparent p-2 transition-all duration-300"
-				:class="[
-					errors[item.field] ? 'border-[#ff4d4f] bg-[#fff1f0]' : '',
-					shakeFields[item.field] ? 'animate-shake-soft' : ''
-				]"
-				:key="index">
+				v-for="(item, index) in schemas"
+				class="mb-4 overflow-visible rounded-[12rpx] border-[2rpx] border-transparent p-2 transition-all duration-300"
+				:class="[
+					hasFieldError(item.field) ? 'border-[#ff4d4f] bg-[#fff1f0]' : '',
+					isFieldShaking(item.field) ? 'animate-shake-soft' : ''
+				]"
+				:key="index">
 				<view
 					class="overflow-visible"
 					:class="getItemLayout(item) === 'horizontal'
@@ -287,12 +327,12 @@
 					<slot :name="item.field" :item="item" :value="model[item.field]"
 						:error="errors[item.field]">
 
-					<!-- 输入框 -->
-					<TInput v-if="item.component === 'Input'"
-						v-model="model[item.field]"
-						v-bind="getInputProps(item, item.componentProps?.type || 'text')"
-						@input="validateField(item)"
-						@change="validateField(item)" />
+					<!-- 输入框 -->
+					<TInput v-if="item.component === 'Input'"
+						v-model="model[item.field]"
+						v-bind="getInputProps(item, getInputType(item))"
+						@input="validateField(item)"
+						@change="validateField(item)" />
 
 					<!-- 数字输入 -->
 					<TInput v-else-if="item.component === 'InputNumber'"
@@ -309,20 +349,20 @@
 						@change="validateField(item)" />
 
 					<!-- 下拉选择 -->
-					<TSelect v-else-if="item.component === 'Select'"
-						v-model="model[item.field]"
-						:options="getSelectOptions(item)"
-						:placeholder="item.componentProps?.placeholder || $t('form.selectPlaceholder')"
-						v-bind="getComponentProps(item)"
-						@change="validateField(item)" />
+					<TSelect v-else-if="item.component === 'Select'"
+						v-model="model[item.field]"
+						:options="getSelectOptions(item)"
+						:placeholder="getSelectPlaceholder(item)"
+						v-bind="getComponentProps(item)"
+						@change="validateField(item)" />
 
 					<!-- 日期选择 -->
-					<view
-						v-else-if="item.component === 'Date'"
-						class="flex w-full items-center rounded-[8rpx] border border-solid border-[#e0e0e0] bg-[#f5f5f5] px-3 text-[28rpx] transition-all duration-300 active:border-[#007aff] active:bg-white"
-						@click="openPicker(item.field)">
-						<text :class="getPickerTextClass(item)">{{ model[item.field] || $t('form.datePlaceholder') }}</text>
-					</view>
+					<view
+						v-else-if="item.component === 'Date'"
+						class="flex w-full items-center rounded-[8rpx] border border-solid border-[#e0e0e0] bg-[#f5f5f5] px-3 text-[28rpx] transition-all duration-300 active:border-[#007aff] active:bg-white"
+						@click="openPicker(item.field)">
+						<text :class="getPickerTextClass(item)">{{ getPickerDisplayText(item, 'form.datePlaceholder') }}</text>
+					</view>
 					<TDateTimePicker
 						v-if="item.component === 'Date'"
 						v-model="pickerVisible[item.field]"
@@ -334,12 +374,12 @@
 					/>
 
 					<!-- 时间选择 -->
-					<view
-						v-else-if="item.component === 'Time'"
-						class="flex h-[80rpx] w-full items-center rounded-[8rpx] border border-solid border-[#e0e0e0] bg-[#f5f5f5] px-3 text-[28rpx] transition-all duration-300 active:border-[#007aff] active:bg-white"
-						@click="openPicker(item.field)">
-						<text :class="getPickerTextClass(item)">{{ model[item.field] || $t('form.timePlaceholder') }}</text>
-					</view>
+					<view
+						v-else-if="item.component === 'Time'"
+						class="flex h-[80rpx] w-full items-center rounded-[8rpx] border border-solid border-[#e0e0e0] bg-[#f5f5f5] px-3 text-[28rpx] transition-all duration-300 active:border-[#007aff] active:bg-white"
+						@click="openPicker(item.field)">
+						<text :class="getPickerTextClass(item)">{{ getPickerDisplayText(item, 'form.timePlaceholder') }}</text>
+					</view>
 					<TDateTimePicker
 						v-if="item.component === 'Time'"
 						v-model="pickerVisible[item.field]"
@@ -364,21 +404,21 @@
 					<TSwitch v-else-if="item.component === 'Switch'" :checked="model[item.field]"
 					v-bind="getComponentProps(item)" @change="onSwitchChange($event, item)" />
 
-					<!-- 评分 -->
-					<TRate v-else-if="item.component === 'Rate'" :value="model[item.field] || 0"
-						v-bind="getComponentProps(item)" @change="onRateChange($event, item)" />
-
-					<!-- 滑块 -->
-					<TSlider v-else-if="item.component === 'Slider'" :value="model[item.field] || 0"
-						v-bind="getComponentProps(item)" @change="onSliderChange($event, item)" />
+					<!-- 评分 -->
+					<TRate v-else-if="item.component === 'Rate'" :value="getNumericFieldValue(item.field)"
+						v-bind="getComponentProps(item)" @change="onRateChange($event, item)" />
+
+					<!-- 滑块 -->
+					<TSlider v-else-if="item.component === 'Slider'" :value="getNumericFieldValue(item.field)"
+						v-bind="getComponentProps(item)" @change="onSliderChange($event, item)" />
 						</slot>
 					</view>
 				</view>
 
-				<!-- 错误提示 -->
-				<view v-if="errors[item.field]" class="mt-2">
-					<text class="text-sm text-red-500">{{ errors[item.field] }}</text>
-				</view>
+				<!-- 错误提示 -->
+				<view v-if="hasFieldError(item.field)" class="mt-2">
+					<text class="text-sm text-red-500">{{ errors[item.field] }}</text>
+				</view>
 			</view>
 
 			<!-- 按钮区域 -->

package/components/TForm/type.uts

@@ -9,7 +9,7 @@ export type FormOption = {
 /**
  * 组件通用属性
  */
-export type ComponentProps = {
+export type ComponentProps = {
   /** 占位符 */
   placeholder?: string
   /** 是否禁用 */
@@ -42,11 +42,11 @@ export type ComponentProps = {
   color?: string
   /** 是否允许半星（用于 rate） */
   allowHalf?: boolean
-  /** 是否显示值（用于 slider） */
-  showValue?: boolean
-  /** 其他扩展属性 */
-  [key: string]: any
-}
+  /** 是否显示值（用于 slider） */
+  showValue?: boolean
+  /** 方向（用于单选/多选组扩展透传） */
+  direction?: string
+}
 
 /**
  * 表单字段配置