tang-ui-x 1.3.3 → 1.3.5

package/components/TActionSheet/index.uvue

@@ -1,7 +1,8 @@
-<script setup lang="uts">
-import { computed } from 'vue'
-import TPopup from '../TPopup/index.uvue'
-import type { ActionSheetAction, TActionSheetProps } from './type.uts'
+<script setup lang="uts">
+import { computed } from 'vue'
+import type { Ref } from 'vue'
+import TPopup from '../TPopup/index.uvue'
+import type { ActionSheetAction } from './type.uts'
 import { useI18n } from '../../composables/useI18n.uts'
 
 /**
@@ -9,10 +10,18 @@ import { useI18n } from '../../composables/useI18n.uts'
  * @description 底部弹出的动作菜单，基于 TPopup 组件实现
  */
 
-// Props 定义 (从 type.uts 导入，排除 show)
-type Props = Omit<TActionSheetProps, 'show'>
-
-const props = withDefaults(defineProps<Props>(), {
+type ActionSheetViewProps = {
+  actions?: ActionSheetAction[]
+  title?: string
+  description?: string
+  cancelText?: string
+  closeOnClickAction?: boolean
+  closeOnClickOverlay?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<ActionSheetViewProps>(), {
   actions: () => [] as ActionSheetAction[],
   title: '',
   description: '',
@@ -22,8 +31,8 @@ const props = withDefaults(defineProps<Props>(), {
   customStyle: ''
 })
 
-// 使用 defineModel 管理显示状态 (v-model)
-const visible = defineModel({ default: false })
+// 使用 defineModel 管理显示状态 (v-model)
+const visible = defineModel({ default: false }) as Ref<boolean>
 
 const emit = defineEmits<{
   select: [action: ActionSheetAction, index: number]
@@ -34,39 +43,58 @@ const emit = defineEmits<{
 // 使用 i18n
 const { $t } = useI18n()
 
-const hasTextValue = (value: string | null | undefined): boolean => {
-  return value !== undefined && value !== null && value !== ''
+const hasTextValue = (value: string | null): boolean => {
+  return value !== null && value !== ''
 }
 
-const hasTitle = computed(() => {
+const hasTitle = computed((): boolean => {
   return hasTextValue(props.title)
 })
 
-const hasDescription = computed(() => {
+const hasDescription = computed((): boolean => {
   return hasTextValue(props.description)
 })
 
-const showHeader = computed(() => {
+const showHeader = computed((): boolean => {
   return hasTitle.value || hasDescription.value
 })
-
-// 优先使用用户传入的值，否则使用翻译
-const displayCancelText = computed(() => {
-  // 如果用户明确传入了 cancelText（即使是空字符串），使用用户的值
-  // 否则使用翻译
-  return props.cancelText !== undefined && props.cancelText !== '' 
-    ? props.cancelText 
-    : $t('actionSheet.cancelText')
-})
+
+// 优先使用用户传入的值，否则使用翻译
+const displayCancelText = computed((): string => {
+  // 如果用户明确传入了 cancelText（即使是空字符串），使用用户的值
+  // 否则使用翻译
+  return props.cancelText !== null && props.cancelText !== '' 
+    ? props.cancelText as string
+    : $t('actionSheet.cancelText', {})
+})
+
+const canCloseOnClickAction = computed((): boolean => {
+  return props.closeOnClickAction == true
+})
+
+const getActionClass = (action: ActionSheetAction): string => {
+  let className = 't-action-sheet__action flex items-center justify-center border-b border-border-soft p-4 text-center'
+  if (action.disabled == true || action.loading == true) {
+    className = className + ' opacity-50'
+  }
+  return className
+}
+
+const getActionTextStyle = (action: ActionSheetAction): string => {
+  if (action.color !== null && action.color !== '') {
+    return `color: ${action.color}`
+  }
+  return ''
+}
 
 const handleSelect = (action: ActionSheetAction, index: number): void => {
-  if (action.disabled || action.loading) return
-
-  emit('select', action, index)
-  if (props.closeOnClickAction) {
-    visible.value = false
-  }
-}
+  if (action.disabled == true || action.loading == true) return
+
+  emit('select', action, index)
+  if (canCloseOnClickAction.value) {
+    visible.value = false
+  }
+}
 
 const handleCancel = (): void => {
   emit('cancel')
@@ -91,36 +119,32 @@ const handleClose = (): void => {
   >
     <view class="t-action-sheet bg-transparent p-0" :class="customClass" :style="customStyle">
       <!-- 头部：标题和描述 -->
-      <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 v-if="showHeader" class="t-action-sheet__header border-b border-border-soft p-4 text-center">
+        <text v-if="hasTitle" class="t-action-sheet__title mb-2 text-base font-medium text-title">{{ title }}</text>
+        <text v-if="hasDescription" class="t-action-sheet__description text-sm text-desc">{{ description }}</text>
       </view>
-
-      <!-- 操作列表 -->
-      <view class="t-action-sheet__actions max-h-[400px] overflow-y-auto">
-        <view
-          v-for="(action, index) in actions"
-          :key="index"
-          class="t-action-sheet__action flex items-center justify-center border-b border-[#ebedf0] p-4 text-center active:bg-[#f5f5f5]"
-          :class="{
-            'opacity-50 cursor-not-allowed': action.disabled,
-            'opacity-50': action.loading
-          }"
-          @click="() => handleSelect(action, index)"
-        >
-          <text
-            class="t-action-sheet__action-text text-base text-[#323233]"
-            :style="action.color ? `color: ${action.color}` : ''"
-          >
+
+      <!-- 操作列表 -->
+      <view class="t-action-sheet__actions max-h-actions overflow-y-auto">
+        <view
+          v-for="(action, index) in actions"
+          :key="index"
+          :class="getActionClass(action)"
+          @click="handleSelect(action, index)"
+        >
+          <text
+            class="t-action-sheet__action-text text-base text-title"
+            :style="getActionTextStyle(action)"
+          >
             {{ action.name }}
           </text>
         </view>
       </view>
-
-      <!-- 取消按钮 -->
-      <view class="t-action-sheet__cancel flex items-center justify-center border-t-[8px] border-[#f5f5f5] p-4 text-center active:bg-[#f5f5f5]" @click="handleCancel">
-        <text class="t-action-sheet__cancel-text text-base text-[#323233]">{{ displayCancelText }}</text>
-      </view>
+
+      <!-- 取消按钮 -->
+      <view class="t-action-sheet__cancel flex items-center justify-center border-t-8 border-action-divider p-4 text-center" @click="handleCancel">
+        <text class="t-action-sheet__cancel-text text-base text-title">{{ displayCancelText }}</text>
+      </view>
     </view>
   </TPopup>
 </template>

package/components/TActionSheet/type.uts

@@ -2,14 +2,14 @@
  * TActionSheet 组件类型定义
  */
 
-export interface ActionSheetAction {
-  name: string
-  color?: string
-  disabled?: boolean
-  loading?: boolean
-}
+export type ActionSheetAction = {
+  name: string
+  color?: string
+  disabled?: boolean
+  loading?: boolean
+}
 
-export interface TActionSheetProps {
+export type TActionSheetProps = {
   show?: boolean
   actions?: ActionSheetAction[]
   title?: string
@@ -21,9 +21,9 @@ export interface TActionSheetProps {
   customStyle?: string
 }
 
-export interface TActionSheetEmits {
-  'update:show': (value: boolean) => void
-  select: (action: ActionSheetAction, index: number) => void
-  cancel: () => void
-  close: () => void
-}
+export type TActionSheetEmits = {
+  'update:show': (value: boolean) => void
+  select: (action: ActionSheetAction, index: number) => void
+  cancel: () => void
+  close: () => void
+}

package/components/TAvatar/index.uvue

@@ -8,11 +8,12 @@ import type { TAvatarProps } from './type.uts'
  */
 
 // 定义 props
-const props = withDefaults(defineProps<TAvatarProps>(), {
-  src: '',
-  size: 'medium',
-  shape: 'circle',
-  alt: '',
+const props = withDefaults(defineProps<TAvatarProps>(), {
+  src: '',
+  errorImage: '',
+  size: 'medium',
+  shape: 'circle',
+  alt: '',
   bgColor: 'var(--tui-border-strong)',
   color: 'var(--tui-text-inverse)',
   fit: 'cover'
@@ -23,48 +24,62 @@ const emit = defineEmits<{
   click: []
   error: []
 }>()
-
+
 // 图片加载失败标记
 const hasLoadError = ref(false)
+const hasErrorImageLoadError = ref(false)
 
-const hasTextValue = (value: string | null | undefined): boolean => {
-  return value !== undefined && value !== null && value !== ''
+const hasTextValue = (value: string | null): boolean => {
+  return value !== null && value !== ''
 }
 
 const hasSrc = computed(() => {
   return hasTextValue(props.src)
 })
 
+const hasErrorImage = computed(() => {
+  return hasTextValue(props.errorImage)
+})
+
 const hasAlt = computed(() => {
   return hasTextValue(props.alt)
 })
+
+const displaySrc = computed((): string => {
+  if (hasSrc.value && !hasLoadError.value) {
+    return props.src
+  }
+  if (hasErrorImage.value && !hasErrorImageLoadError.value) {
+    return props.errorImage
+  }
+  return ''
+})
+
+const hasDisplaySrc = computed((): boolean => {
+  return hasTextValue(displaySrc.value)
+})
 
 /**
  * 计算头像大小
  */
-const avatarSize = computed(() => {
-  if (typeof props.size === 'number') {
-    return props.size
-  }
-
-  const sizeMap = {
-    small: 32,
-    medium: 40,
-    large: 56
+const avatarSize = computed((): number => {
+  const size = props.size
+  if (typeof size === 'number') {
+    return size as number
   }
-
-  if (props.size === 'small') return sizeMap.small
-  if (props.size === 'large') return sizeMap.large
-  return sizeMap.medium
+
+  if (size == 'small') return 32
+  if (size == 'large') return 56
+  return 40
 })
 
 /**
  * 计算头像样式类
  */
-const avatarClass = computed(() => {
-  const classes: string[] = ['t-avatar inline-flex items-center justify-center overflow-hidden relative cursor-pointer']
-
-  if (props.shape === 'square') {
+const avatarClass = computed((): string => {
+  const classes: string[] = ['t-avatar flex items-center justify-center overflow-hidden relative']
+
+  if (props.shape == 'square') {
     classes.push('rounded')
   } else {
     classes.push('rounded-full')
@@ -83,7 +98,7 @@ const avatarStyle = computed(() => {
   styles.push(`width: ${size}px`)
   styles.push(`height: ${size}px`)
 
-  if (!hasSrc.value || hasLoadError.value) {
+  if (!hasDisplaySrc.value) {
     styles.push(`background-color: ${props.bgColor}`)
   }
 
@@ -112,10 +127,22 @@ const handleClick = (): void => {
 /**
  * 处理图片加载失败
  */
-const handleError = (): void => {
-  hasLoadError.value = true
-  emit('error')
-}
+const handleError = (): void => {
+  hasLoadError.value = true
+  emit('error')
+}
+
+const handleErrorImageError = (): void => {
+  hasErrorImageLoadError.value = true
+}
+
+const handleImageError = (): void => {
+  if (hasLoadError.value) {
+    handleErrorImageError()
+  } else {
+    handleError()
+  }
+}
 
 /**
  * 获取显示的文字（取首字符）
@@ -131,11 +158,11 @@ const displayText = computed(() => {
 <template>
   <view :class="avatarClass" :style="avatarStyle" @click="handleClick">
     <image
-      v-if="hasSrc && !hasLoadError"
+      v-if="hasDisplaySrc"
       class="t-avatar__image h-full w-full"
-      :src="src"
+      :src="displaySrc"
       :mode="fit"
-      @error="handleError"
+      @error="handleImageError"
     />
     <text v-else-if="hasAlt" class="t-avatar__text text-center font-medium" :style="textStyle">
       {{ displayText }}

package/components/TAvatar/type.uts

@@ -2,15 +2,21 @@
  * TAvatar 头像组件属性类型定义
  */
 export type TAvatarProps = {
-  /**
-   * 头像图片地址
-   */
-  src?: string
-
-  /**
-   * 头像大小
-   * @default "medium"
-   */
+  /**
+   * 头像图片地址
+   */
+  src?: string
+
+  /**
+   * 图片加载失败时显示的兜底图片地址
+   * @default ""
+   */
+  errorImage?: string
+
+  /**
+   * 头像大小
+   * @default "medium"
+   */
   size?: 'small' | 'medium' | 'large' | number
 
   /**
@@ -51,4 +57,4 @@ export type TAvatarEmits = {
    * 图片加载失败时触发
    */
   error: () => void
-}
+}

package/components/TBadge/index.uvue

@@ -16,14 +16,14 @@ const props = withDefaults(defineProps<TBadgeProps>(), {
   type: 'danger',
   bgColor: '',
   color: '',
-  offset: () => [0, 0] as [number, number]
+  offset: () : number[] => [0, 0]
 })
 
 /**
  * 计算显示的内容
  */
-const displayValue = computed(() => {
-  if (props.isDot) {
+const displayValue = computed((): string => {
+  if (props.isDot == true) {
     return ''
   }
 
@@ -32,82 +32,91 @@ const displayValue = computed(() => {
     return `${props.max}+`
   }
 
-  return String(val)
+  return val !== null ? val.toString() : ''
 })
 
 /**
  * 计算徽标样式类
  */
-const badgeClass = computed(() => {
-  const classes: string[] = [
-    't-badge__content absolute right-0 -top-3 z-[1] translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-[10px] px-1.5 py-0.5 text-xs leading-[1.2]',
-  ]
-
-  if (props.isDot) {
-    classes.push('h-2 w-2 rounded-full p-0')
-  }
-
-  switch (props.type) {
-    case 'primary':
-      classes.push('bg-[#409eff] text-white')
-      break
-    case 'success':
-      classes.push('bg-[#67c23a] text-white')
-      break
-    case 'warning':
-      classes.push('bg-[#e6a23c] text-white')
-      break
-    case 'info':
-      classes.push('bg-[#909399] text-white')
-      break
-    default:
-      classes.push('bg-[#f56c6c] text-white')
-      break
-  }
-
-  return classes.join(' ')
-})
+const badgeClass = computed((): string => {
+  const classes: string[] = [
+    't-badge__content absolute right-0 -top-3 z-10 translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-lg px-2 py-1 text-xs leading-relaxed',
+  ]
+
+  if (props.isDot == true) {
+    classes.push('h-2 w-2 rounded-full p-0')
+  }
+
+  return classes.join(' ')
+})
+
+const getTypeBackgroundColor = (): string => {
+  switch (props.type) {
+    case 'primary':
+      return '#3b82f6'
+    case 'success':
+      return '#22c55e'
+    case 'warning':
+      return '#fb923c'
+    case 'info':
+      return '#909399'
+    default:
+      return '#f87171'
+  }
+}
 
 /**
  * 计算徽标样式
  */
-const badgeStyle = computed(() => {
-  const styles: string[] = []
-
-  if (props.bgColor != '') {
-    styles.push(`background-color: ${props.bgColor}`)
-  }
-
-  if (props.color != '') {
-    styles.push(`color: ${props.color}`)
-  }
-
-  if (props.offset && props.offset.length === 2) {
-    const [x, y] = props.offset
-    if (x !== 0) {
-      styles.push(`right: ${-x}px`)
-    }
-    if (y !== 0) {
-      styles.push(`top: ${y}px`)
-    }
-  }
-
-  return styles.join('; ')
-})
+const badgeStyle = computed((): string => {
+  const styles: string[] = []
+
+  if (props.bgColor != '') {
+    styles.push(`background-color: ${props.bgColor}`)
+  } else {
+    styles.push(`background-color: ${getTypeBackgroundColor()}`)
+  }
+
+  if (props.color != '') {
+    styles.push(`color: ${props.color}`)
+  } else {
+    styles.push('color: #ffffff')
+  }
+
+  if (props.offset != null && props.offset.length == 2) {
+    const x = props.offset[0] as number
+    const y = props.offset[1] as number
+    if (x != 0) {
+      styles.push(`right: ${-x}px`)
+    }
+    if (y != 0) {
+      styles.push(`top: ${y}px`)
+    }
+  }
+
+  return styles.join('; ')
+})
+
+const badgeTextStyle = computed((): string => {
+  if (props.color != '') {
+    return `color: ${props.color}`
+  }
+  return 'color: #ffffff'
+})
 
 /**
  * 是否显示徽标
  */
-const showBadge = computed(() => {
-  return !props.hidden && (props.isDot || props.value !== '' && props.value !== 0)
-})
+const showBadge = computed((): boolean => {
+  return props.hidden != true && (props.isDot == true || (props.value != '' && props.value != 0))
+})
 </script>
 
 <template>
   <view class="t-badge relative inline-block overflow-visible">
     <slot></slot>
-    <view v-if="showBadge" :class="badgeClass" :style="badgeStyle">
-      <text v-if="!isDot" class="t-badge__text text-xs">{{ displayValue }}</text>
-    </view>
-  </view>
-</template>
+    <view v-if="showBadge" :class="badgeClass" :style="badgeStyle">
+      <text v-if="isDot != true" class="t-badge__text text-xs" :style="badgeTextStyle">{{ displayValue }}</text>
+    </view>
+  </view>
+</template>

package/components/TBadge/type.uts

@@ -44,5 +44,5 @@ export type TBadgeProps = {
   /**
    * 偏移量 [x, y]
    */
-  offset?: [number, number]
-}
+  offset?: number[]
+}

package/components/TButton/index.uvue

@@ -51,7 +51,7 @@ const buttonClasses = computed((): string => {
 
   switch (props.shape) {
     case 'round':
-      classes.push('rounded-[999px]')
+      classes.push('rounded-full')
       break
     case 'circle':
       classes.push('rounded-full p-0')
@@ -87,40 +87,40 @@ const buttonClasses = computed((): string => {
     case 'primary':
       classes.push(
         props.plain
-          ? 'border-[#b3d8ff] bg-[#ecf5ff] text-[#409eff]'
-          : 'border-[#409eff] bg-[#409eff] text-white'
+          ? 'border-blue-200 bg-blue-50 text-blue-500'
+          : 'border-blue-500 bg-blue-500 text-white'
       )
       break
     case 'success':
       classes.push(
         props.plain
-          ? 'border-[#c2e7b0] bg-[#f0f9ff] text-[#67c23a]'
-          : 'border-[#67c23a] bg-[#67c23a] text-white'
+          ? 'border-green-200 bg-green-50 text-green-500'
+          : 'border-green-500 bg-green-500 text-white'
       )
       break
     case 'warning':
       classes.push(
         props.plain
-          ? 'border-[#f5dab1] bg-[#fdf6ec] text-[#e6a23c]'
-          : 'border-[#e6a23c] bg-[#e6a23c] text-white'
+          ? 'border-orange-200 bg-orange-50 text-orange-400'
+          : 'border-orange-400 bg-orange-400 text-white'
       )
       break
     case 'danger':
       classes.push(
         props.plain
-          ? 'border-[#fbc4c4] bg-[#fef0f0] text-[#f56c6c]'
-          : 'border-[#f56c6c] bg-[#f56c6c] text-white'
+          ? 'border-red-200 bg-red-50 text-red-400'
+          : 'border-red-400 bg-red-400 text-white'
       )
       break
     case 'info':
       classes.push(
         props.plain
-          ? 'border-[#d3d4d6] bg-[#f4f4f5] text-[#909399]'
-          : 'border-[#909399] bg-[#909399] text-white'
+          ? 'border-zinc-300 bg-zinc-100 text-zinc-400'
+          : 'border-zinc-400 bg-zinc-400 text-white'
       )
       break
     default:
-      classes.push('border-[#dcdfe6] bg-white text-[#606266]')
+      classes.push('border-gray-300 bg-white text-gray-600')
       break
   }
 
@@ -185,3 +185,10 @@ const handleClick = () => {
     </view>
   </button>
 </template>
+
+<style>
+.transition-all {
+	transition-property: all;
+	transition-duration: 300ms;
+}
+</style>

package/components/TButton/type.uts

@@ -20,7 +20,7 @@ export type ButtonShape = 'square' | 'round' | 'circle'
 /**
  * 按钮 Props 接口
  */
-export interface TButtonProps {
+export type TButtonProps = {
   /**
    * 按钮类型
    * @default 'default'