tang-ui-x 1.1.1 → 1.1.3

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/TCheckboxGroup/index.uvue

@@ -13,6 +13,9 @@ type Props = Omit<TCheckboxGroupProps, 'modelValue'>
 const props = withDefaults(defineProps<Props>(), {
   options: () => [] as CheckboxOption[],
   direction: 'vertical',
+  size: 'medium',
+  activeColor: '#00bba7',
+  inactiveColor: '#c8c9cc',
   max: -1,
   disabled: false,
   customClass: '',
@@ -56,20 +59,36 @@ const handleChange = (option: CheckboxOption): void => {
 const isChecked = (option: CheckboxOption): boolean => {
   return modelValue.value.includes(option.value)
 }
+
+// 尺寸映射
+const sizeMap = {
+  small: { icon: 32, fontSize: 20 },
+  medium: { icon: 40, fontSize: 24 },
+  large: { icon: 48, fontSize: 28 }
+}
+
+const currentSize = computed(() => sizeMap[props.size])
+
+const cssVars = computed(() => ({
+  '--icon-size': `${currentSize.value.icon}rpx`,
+  '--checkmark-size': `${currentSize.value.fontSize}rpx`,
+  '--active-color': props.activeColor,
+  '--inactive-color': props.inactiveColor
+}))
 </script>
 
 <template>
   <view
     class="t-checkbox-group"
     :class="[`t-checkbox-group--${direction}`, customClass]"
-    :style="customStyle"
+    :style="[customStyle, cssVars]"
   >
     <view
       v-for="(option, index) in options"
       :key="index"
       class="t-checkbox-group__item"
       :class="{ 't-checkbox-group__item--disabled': disabled || option.disabled }"
-      @click="() => handleChange(option)"
+      @click="handleChange(option)"
     >
       <view class="t-checkbox-group__icon" :class="{ 't-checkbox-group__icon--checked': isChecked(option) }">
         <text v-if="isChecked(option)" class="t-checkbox-group__check">✓</text>
@@ -95,7 +114,7 @@ const isChecked = (option: CheckboxOption): boolean => {
 
 .t-checkbox-group__item {
   display: flex;
-  align-items: center;
+	flex-direction: row;
   padding: 12px 0;
   cursor: pointer;
 
@@ -110,24 +129,24 @@ const isChecked = (option: CheckboxOption): boolean => {
 }
 
 .t-checkbox-group__icon {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #c8c9cc;
-  border-radius: 4px;
-  margin-right: 8px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  border: 2rpx solid var(--inactive-color);
+  border-radius: 8rpx;
+  margin-right: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
 
   &--checked {
-    background-color: #1890ff;
-    border-color: #1890ff;
+    background-color: var(--active-color);
+    border-color: var(--active-color);
   }
 }
 
 .t-checkbox-group__check {
-  font-size: 14px;
+  font-size: var(--checkmark-size);
   color: #fff;
   font-weight: bold;
 }

package/components/TCheckboxGroup/type.uts

@@ -3,6 +3,7 @@
  */
 
 export type CheckboxDirection = 'horizontal' | 'vertical'
+export type CheckboxSize = 'small' | 'medium' | 'large'
 
 export interface CheckboxOption {
   label: string
@@ -14,8 +15,17 @@ export interface TCheckboxGroupProps {
   modelValue?: (string | number)[]
   options?: CheckboxOption[]
   direction?: CheckboxDirection
+  /** 按钮尺寸 */
+  size?: CheckboxSize
+  /** 激活状态颜色 */
+  activeColor?: string
+  /** 非激活状态颜色 */
+  inactiveColor?: string
+  /** 最大可选数量 */
   max?: number
   disabled?: boolean
+  /** 名称属性（用于表单提交） */
+  name?: string
   customClass?: string
   customStyle?: string
 }

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>