tang-ui-x 1.0.0

package/components/TGridItem/type.uts

@@ -0,0 +1,64 @@
+/**
+ * TGridItem 组件类型定义
+ */
+
+/**
+ * TGridItem Props 接口
+ */
+export interface TGridItemProps {
+  /**
+   * 图标名称
+   */
+  icon?: string
+
+  /**
+   * 图标颜色
+   */
+  iconColor?: string
+
+  /**
+   * 图片链接
+   */
+  image?: string
+
+  /**
+   * 文字内容
+   */
+  text?: string
+
+  /**
+   * 文字颜色
+   */
+  textColor?: string
+
+  /**
+   * 徽标内容
+   */
+  badge?: string | number
+
+  /**
+   * 徽标是否显示为小红点
+   * @default false
+   */
+  dot?: boolean
+
+  /**
+   * 自定义类名
+   */
+  customClass?: string
+
+  /**
+   * 自定义样式
+   */
+  customStyle?: string
+}
+
+/**
+ * TGridItem 事件接口
+ */
+export interface TGridItemEmits {
+  /**
+   * 点击事件
+   */
+  click: () => void
+}

package/components/TIcon/index.uvue

@@ -0,0 +1,96 @@
+<script  setup lang="uts" >
+	/**
+ * Icon 图标组件
+ * 支持 iconfont 字体图标
+ */
+
+	/**
+	 * 组件属性
+	 */
+	type IconProps = {
+		/** 图标名称 */
+		name : string
+		/** 图标大小 */
+		size ?: string | number
+		/** 图标颜色 */
+		color ?: string
+		/** 是否加粗 */
+		bold ?: boolean
+		/** 自定义类名 */
+		customClass ?: string
+		/** 自定义样式 */
+		customStyle ?: string
+	}
+
+	const props = withDefaults(defineProps<IconProps>(), {
+		name: '',
+		size: 48,
+		color: '#333333',
+		bold: false,
+		customClass: '',
+		customStyle: ''
+	})
+
+	/**
+	 * 事件
+	 */
+	const emit = defineEmits<{
+		click : []
+	}>()
+
+	// 计算图标大小
+	const iconSize = computed(() : string => {
+		if (typeof props.size === 'number') {
+			return props.size + 'rpx'
+		}
+		return props.size
+	})
+
+	// 计算图标样式
+	const iconStyle = computed(() : string => {
+		const styles : string[] = []
+
+		styles.push(`font-size: ${iconSize.value}`)
+		styles.push(`color: ${props.color}`)
+
+		if (props.bold) {
+			styles.push('font-weight: bold')
+		}
+
+		if (props.customStyle) {
+			styles.push(props.customStyle)
+		}
+
+		return styles.join('; ')
+	})
+
+	// 计算图标类名
+	const iconClass = computed(() : string => {
+		const classes : string[] = ['icon', 'iconfont']
+
+		if (props.name) {
+			classes.push(props.name)
+		}
+
+		if (props.customClass) {
+			classes.push(props.customClass)
+		}
+
+		return classes.join(' ')
+	})
+
+	/**
+	 * 图标点击事件
+	 */
+	const handleClick = () => {
+		emit('click')
+	}
+</script>
+
+<template>
+	<text :class="iconClass" :style="iconStyle" @click="handleClick"></text>
+</template>
+
+<style lang="scss" scoped>
+	 
+</style>

package/components/TImage/index.uvue

@@ -0,0 +1,255 @@
+<script setup lang="uts">
+import { ref, computed } from 'vue'
+import type { ImageMode, ImageShape } from './type.uts'
+
+/**
+ * TImage 图片组件
+ * @description 增强的图片组件，支持懒加载、预览、加载失败处理等功能
+ */
+
+// Props 定义
+interface Props {
+  src: string
+  mode?: ImageMode
+  width?: string | number
+  height?: string | number
+  shape?: ImageShape
+  radius?: string | number
+  showLoading?: boolean
+  showError?: boolean
+  lazyLoad?: boolean
+  loadingText?: string
+  errorText?: string
+  previewable?: boolean
+  previewList?: string[]
+  previewIndex?: number
+  customClass?: string
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'aspectFill',
+  width: '100%',
+  height: '200rpx',
+  shape: 'square',
+  radius: '0',
+  showLoading: true,
+  showError: true,
+  lazyLoad: false,
+  loadingText: '加载中...',
+  errorText: '加载失败',
+  previewable: false,
+  previewList: () => [] as string[],
+  previewIndex: 0,
+  customClass: '',
+  customStyle: ''
+})
+
+// Emits 定义
+const emit = defineEmits<{
+  load: [event: Event]
+  error: [event: Event]
+  click: []
+  preview: []
+}>()
+
+// 状态管理
+const loading = ref<boolean>(true)
+const loadError = ref<boolean>(false)
+
+/**
+ * 计算图片容器样式
+ */
+const containerStyle = computed((): string => {
+  const styles: string[] = []
+
+  // 宽度
+  if (typeof props.width === 'number') {
+    styles.push(`width: ${props.width}px`)
+  } else {
+    styles.push(`width: ${props.width}`)
+  }
+
+  // 高度
+  if (typeof props.height === 'number') {
+    styles.push(`height: ${props.height}px`)
+  } else {
+    styles.push(`height: ${props.height}`)
+  }
+
+  // 圆角
+  if (props.shape === 'round') {
+    styles.push('border-radius: 8px')
+  } else if (props.shape === 'circle') {
+    styles.push('border-radius: 50%')
+  } else if (props.radius) {
+    if (typeof props.radius === 'number') {
+      styles.push(`border-radius: ${props.radius}px`)
+    } else {
+      styles.push(`border-radius: ${props.radius}`)
+    }
+  }
+
+  // 自定义样式
+  if (props.customStyle) {
+    styles.push(props.customStyle)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 计算图片类名
+ */
+const imageClasses = computed((): string => {
+  const classes: string[] = ['t-image__img']
+
+  if (props.customClass) {
+    classes.push(props.customClass)
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 图片加载完成
+ */
+const handleLoad = (event: Event): void => {
+  loading.value = false
+  loadError.value = false
+  emit('load', event)
+}
+
+/**
+ * 图片加载失败
+ */
+const handleError = (event: Event): void => {
+  loading.value = false
+  loadError.value = true
+  emit('error', event)
+}
+
+/**
+ * 点击图片
+ */
+const handleClick = (): void => {
+  emit('click')
+
+  if (props.previewable) {
+    handlePreview()
+  }
+}
+
+/**
+ * 预览图片
+ */
+const handlePreview = (): void => {
+  emit('preview')
+
+  const urls = props.previewList.length > 0 ? props.previewList : [props.src]
+  const current = props.previewList.length > 0 ? props.previewIndex : 0
+
+  uni.previewImage({
+    urls: urls,
+    current: current
+  })
+}
+</script>
+
+<template>
+  <view
+    class="t-image"
+    :class="{ 't-image--clickable': previewable }"
+    :style="containerStyle"
+    @click="handleClick"
+  >
+    <!-- 图片 -->
+    <image
+      v-if="!loadError"
+      :src="src"
+      :mode="mode"
+      :lazy-load="lazyLoad"
+      :class="imageClasses"
+      @load="handleLoad"
+      @error="handleError"
+    />
+
+    <!-- 加载中状态 -->
+    <view v-if="loading && showLoading" class="t-image__loading">
+      <view class="t-image__loading-icon"></view>
+      <text class="t-image__loading-text">{{ loadingText }}</text>
+    </view>
+
+    <!-- 加载失败状态 -->
+    <view v-if="loadError && showError" class="t-image__error">
+      <text class="t-image__error-icon">✕</text>
+      <text class="t-image__error-text">{{ errorText }}</text>
+    </view>
+
+    <!-- 插槽：自定义内容 -->
+    <slot></slot>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  background-color: #f5f5f5;
+
+  &--clickable {
+    cursor: pointer;
+  }
+}
+
+.t-image__img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.t-image__loading,
+.t-image__error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+
+.t-image__loading-icon {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #e0e0e0;
+  border-top-color: #1890ff;
+  border-radius: 50%;
+  animation: t-image-rotate 0.8s linear infinite;
+}
+
+.t-image__loading-text,
+.t-image__error-text {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #999;
+}
+
+.t-image__error-icon {
+  font-size: 32px;
+  color: #ccc;
+}
+
+@keyframes t-image-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/components/TImage/type.uts

@@ -0,0 +1,146 @@
+/**
+ * TImage 组件类型定义
+ */
+
+/**
+ * 图片裁剪模式
+ */
+export type ImageMode =
+  | 'scaleToFill'    // 缩放：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
+  | 'aspectFit'      // 缩放：保持纵横比缩放图片，使图片的长边能完全显示出来
+  | 'aspectFill'     // 缩放：保持纵横比缩放图片，只保证图片的短边能完全显示出来
+  | 'widthFix'       // 缩放：宽度不变，高度自动变化，保持原图宽高比不变
+  | 'heightFix'      // 缩放：高度不变，宽度自动变化，保持原图宽高比不变
+  | 'top'            // 裁剪：不缩放图片，只显示图片的顶部区域
+  | 'bottom'         // 裁剪：不缩放图片，只显示图片的底部区域
+  | 'center'         // 裁剪：不缩放图片，只显示图片的中间区域
+  | 'left'           // 裁剪：不缩放图片，只显示图片的左边区域
+  | 'right'          // 裁剪：不缩放图片，只显示图片的右边区域
+  | 'top left'       // 裁剪：不缩放图片，只显示图片的左上边区域
+  | 'top right'      // 裁剪：不缩放图片，只显示图片的右上边区域
+  | 'bottom left'    // 裁剪：不缩放图片，只显示图片的左下边区域
+  | 'bottom right'   // 裁剪：不缩放图片，只显示图片的右下边区域
+
+/**
+ * 图片形状
+ */
+export type ImageShape = 'square' | 'round' | 'circle'
+
+/**
+ * TImage Props 接口
+ */
+export interface TImageProps {
+  /**
+   * 图片链接
+   */
+  src: string
+
+  /**
+   * 图片裁剪、缩放的模式
+   * @default 'aspectFill'
+   */
+  mode?: ImageMode
+
+  /**
+   * 图片宽度
+   */
+  width?: string | number
+
+  /**
+   * 图片高度
+   */
+  height?: string | number
+
+  /**
+   * 图片形状
+   * @default 'square'
+   */
+  shape?: ImageShape
+
+  /**
+   * 圆角大小（仅 shape 为 square 时有效）
+   */
+  radius?: string | number
+
+  /**
+   * 是否显示加载中状态
+   * @default true
+   */
+  showLoading?: boolean
+
+  /**
+   * 是否显示加载失败状态
+   * @default true
+   */
+  showError?: boolean
+
+  /**
+   * 是否开启懒加载
+   * @default false
+   */
+  lazyLoad?: boolean
+
+  /**
+   * 加载中提示文本
+   * @default '加载中...'
+   */
+  loadingText?: string
+
+  /**
+   * 加载失败提示文本
+   * @default '加载失败'
+   */
+  errorText?: string
+
+  /**
+   * 是否可预览
+   * @default false
+   */
+  previewable?: boolean
+
+  /**
+   * 预览图片列表（用于图片预览切换）
+   */
+  previewList?: string[]
+
+  /**
+   * 当前预览图片索引
+   * @default 0
+   */
+  previewIndex?: number
+
+  /**
+   * 自定义类名
+   */
+  customClass?: string
+
+  /**
+   * 自定义样式
+   */
+  customStyle?: string
+}
+
+/**
+ * TImage 事件接口
+ */
+export interface TImageEmits {
+  /**
+   * 图片加载完成事件
+   */
+  load: (event: Event) => void
+
+  /**
+   * 图片加载失败事件
+   */
+  error: (event: Event) => void
+
+  /**
+   * 点击图片事件
+   */
+  click: () => void
+
+  /**
+   * 预览图片事件
+   */
+  preview: () => void
+}

package/components/TInput/README.md

@@ -0,0 +1,119 @@
+# TInput 输入框组件
+
+输入框组件，支持多种类型、尺寸和状态。
+
+## 基础用法
+
+```vue
+<template>
+  <TInput v-model="value" placeholder="请输入内容" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const value = ref('')
+</script>
+```
+
+## 输入框类型
+
+```vue
+<template>
+  <TInput type="text" placeholder="文本输入" />
+  <TInput type="number" placeholder="数字输入" />
+  <TInput type="password" placeholder="密码输入" />
+  <TInput type="tel" placeholder="电话输入" />
+</template>
+```
+
+## 输入框尺寸
+
+```vue
+<template>
+  <TInput size="large" placeholder="大型输入框" />
+  <TInput size="medium" placeholder="中等输入框" />
+  <TInput size="small" placeholder="小型输入框" />
+  <TInput size="mini" placeholder="迷你输入框" />
+</template>
+```
+
+## 禁用状态
+
+```vue
+<template>
+  <TInput disabled placeholder="禁用状态" />
+  <TInput disabled value="禁用状态" />
+</template>
+```
+
+## 只读状态
+
+```vue
+<template>
+  <TInput readonly value="只读状态" />
+</template>
+```
+
+## 清除按钮
+
+```vue
+<template>
+  <TInput v-model="value" clearable placeholder="可清除" />
+</template>
+```
+
+## 显示字数统计
+
+```vue
+<template>
+  <TInput v-model="value" maxlength="20" show-count placeholder="最多输入20个字符" />
+</template>
+```
+
+## 带图标
+
+```vue
+<template>
+  <TInput prefix-icon="🔍" placeholder="搜索" />
+  <TInput suffix-icon="✓" placeholder="验证" />
+</template>
+```
+
+## 文本域
+
+```vue
+<template>
+  <TInput type="textarea" placeholder="请输入多行文本" />
+  <TInput type="textarea" :rows="5" placeholder="5行文本域" />
+</template>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| v-model | 绑定值 (使用 defineModel) | string / number | - | - |
+| type | 输入框类型 | string | text / number / password / tel / textarea | text |
+| size | 输入框尺寸 | string | large / medium / small / mini | medium |
+| placeholder | 占位文本 | string | - | - |
+| disabled | 是否禁用 | boolean | - | false |
+| readonly | 是否只读 | boolean | - | false |
+| clearable | 是否显示清除按钮 | boolean | - | false |
+| showCount | 是否显示字数统计 | boolean | - | false |
+| maxlength | 最大输入长度 | number | - | -1 |
+| prefixIcon | 前缀图标 | string | - | - |
+| suffixIcon | 后缀图标 | string | - | - |
+| rows | 文本域行数 | number | - | 3 |
+| autoHeight | 文本域自动高度 | boolean | - | false |
+| customClass | 自定义类名 | string | - | - |
+| customStyle | 自定义样式 | string | - | - |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| input | 输入时触发 | (value: string \| number) |
+| change | 值改变时触发 | (value: string \| number) |
+| focus | 获得焦点时触发 | - |
+| blur | 失去焦点时触发 | - |
+| clear | 点击清除按钮时触发 | - |