tang-ui-x 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,141 @@
+# UniApp X UI 组件库
+
+基于 uni-app x 的移动端 UI 组件库，提供 42+ 个高质量组件。
+
+## ✨ 特性
+
+- 🎨 42+ 个精美组件
+- 💪 使用 TypeScript 开发，提供完整的类型定义
+- 📱 专为 uni-app x 优化
+- 🔥 使用 Vue 3 Composition API
+- 🎯 支持 defineModel 双向绑定
+- 📦 支持按需引入
+- 🌈 统一的设计规范
+
+## 📦 安装
+
+```bash
+npm install tang-ui-x
+# 或
+yarn add tang-ui-x
+# 或
+pnpm add tang-ui-x
+```
+
+## 🔨 使用
+
+### 方式一：easycom 自动导入（推荐）
+
+在 `pages.json` 中配置 easycom：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^T(.*)": "tang-ui-x/components/T$1/T$1.vue"
+    }
+  }
+}
+```
+
+然后在页面中直接使用：
+
+```vue
+<template>
+  <view>
+    <TButton type="primary">按钮</TButton>
+    <TInput v-model="value" placeholder="请输入" />
+  </view>
+</template>
+```
+
+### 方式二：按需引入
+
+```vue
+<script setup>
+import { TButton, TInput } from 'tang-ui-x'
+</script>
+
+<template>
+  <view>
+    <TButton type="primary">按钮</TButton>
+    <TInput v-model="value" placeholder="请输入" />
+  </view>
+</template>
+```
+
+## 📚 组件列表
+
+### 基础组件 (5个)
+- TButton - 按钮
+- TIcon - 图标
+- TText - 文本
+- TImage - 图片
+- TDivider - 分割线
+
+### 布局组件 (8个)
+- TCard - 卡片
+- TList - 列表
+- TListItem - 列表项
+- TCell - 单元格
+- TGrid - 宫格
+- TGridItem - 宫格项
+- TRow - 栅格行
+- TCol - 栅格列
+
+### 表单组件 (13个)
+- TInput - 输入框
+- TNumberInput - 数字输入
+- TTextarea - 多行文本输入
+- TSearchBar - 搜索框
+- TSwitch - 开关
+- TCheckbox - 复选框
+- TCheckboxGroup - 复选组
+- TRadioButton - 单选按钮
+- TRadioGroup - 单选组
+- TSelect - 选择器
+- TSlider - 滑块
+- TRate - 评分
+- TPicker - 选择器
+
+### 数据展示 (9个)
+- Tags - 标签
+- TBadge - 徽标
+- TAvatar - 头像
+- TProgress - 进度条
+- TNoticeBar - 通知栏
+- TCollapse - 折叠面板
+- TCollapseItem - 折叠面板项
+- TEmpty - 空状态
+- TErrorState - 错误状态
+- TSwiper - 轮播图
+
+### 反馈组件 (5个)
+- TLoading - 加载
+- TToast - 轻提示
+- TDialog - 对话框
+- TPopup - 弹出层
+- TActionSheet - 动作面板
+
+### 导航组件 (2个)
+- Tabs - 标签页
+- TNavBar - 导航栏
+
+## 📖 文档
+
+详细文档请访问：[https://github.com/sugar258596/tang-ui](https://github.com/sugar258596/tang-ui)
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## � 链接
+
+- [GitHub](https://github.com/sugar258596/tang-ui)
+- [Issues](https://github.com/sugar258596/tang-ui/issues)
+- [NPM](https://www.npmjs.com/package/tang-ui-x)
+
+## 📄 License
+
+MIT License

package/components/TActionSheet/index.uvue

@@ -0,0 +1,170 @@
+<script setup lang="uts">
+import TPopup from '@/components/TPopup/index.uvue'
+import type { ActionSheetAction, TActionSheetProps } from './type.uts'
+
+/**
+ * TActionSheet 动作面板组件
+ * @description 底部弹出的动作菜单，基于 TPopup 组件实现
+ */
+
+// Props 定义 (从 type.uts 导入，排除 show)
+type Props = Omit<TActionSheetProps, 'show'>
+
+const props = withDefaults(defineProps<Props>(), {
+  actions: () => [] as ActionSheetAction[],
+  title: '',
+  description: '',
+  cancelText: '取消',
+  closeOnClickAction: true,
+  closeOnClickOverlay: true,
+  customClass: '',
+  customStyle: ''
+})
+
+// 使用 defineModel 管理显示状态 (v-model)
+const visible = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+  select: [action: ActionSheetAction, index: number]
+  cancel: []
+  close: []
+}>()
+
+const handleSelect = (action: ActionSheetAction, index: number): void => {
+  if (action.disabled || action.loading) return
+
+  emit('select', action, index)
+  if (props.closeOnClickAction) {
+    visible.value = false
+  }
+}
+
+const handleCancel = (): void => {
+  emit('cancel')
+  visible.value = false
+}
+
+const handleClose = (): void => {
+  emit('close')
+}
+</script>
+
+<template>
+  <TPopup
+    v-model="visible"
+    position="bottom"
+    :show-title="false"
+    :show-close="false"
+    :close-on-click-overlay="closeOnClickOverlay"
+    :border-radius="16"
+    height="auto"
+    @close="handleClose"
+  >
+    <view class="t-action-sheet" :class="customClass" :style="customStyle">
+      <!-- 头部：标题和描述 -->
+      <view v-if="title || description" class="t-action-sheet__header">
+        <text v-if="title" class="t-action-sheet__title">{{ title }}</text>
+        <text v-if="description" class="t-action-sheet__description">{{ description }}</text>
+      </view>
+
+      <!-- 操作列表 -->
+      <view class="t-action-sheet__actions">
+        <view
+          v-for="(action, index) in actions"
+          :key="index"
+          class="t-action-sheet__action"
+          :class="{
+            't-action-sheet__action--disabled': action.disabled,
+            't-action-sheet__action--loading': action.loading
+          }"
+          @click="() => handleSelect(action, index)"
+        >
+          <text
+            class="t-action-sheet__action-text"
+            :style="action.color ? `color: ${action.color}` : ''"
+          >
+            {{ action.name }}
+          </text>
+        </view>
+      </view>
+
+      <!-- 取消按钮 -->
+      <view class="t-action-sheet__cancel" @click="handleCancel">
+        <text class="t-action-sheet__cancel-text">{{ cancelText }}</text>
+      </view>
+    </view>
+  </TPopup>
+</template>
+
+<style lang="scss" scoped>
+.t-action-sheet {
+  background-color: transparent;
+  padding: 0;
+}
+
+.t-action-sheet__header {
+  padding: 16px;
+  text-align: center;
+  border-bottom: 1px solid #ebedf0;
+}
+
+.t-action-sheet__title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #323233;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.t-action-sheet__description {
+  font-size: 14px;
+  color: #969799;
+  display: block;
+}
+
+.t-action-sheet__actions {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.t-action-sheet__action {
+  padding: 16px;
+  display: flex;;
+  align-items: center;
+  text-align: center;
+  border-bottom: 1px solid #ebedf0;
+  cursor: pointer;
+
+  &:active {
+    background-color: #f5f5f5;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.t-action-sheet__action-text {
+  font-size: 16px;
+  color: #323233;
+}
+
+.t-action-sheet__cancel {
+  padding: 16px;
+  display: flex;;
+  align-items: center;
+  text-align: center;
+  border-top: 8px solid #f5f5f5;
+  cursor: pointer;
+
+  &:active {
+    background-color: #f5f5f5;
+  }
+}
+
+.t-action-sheet__cancel-text {
+  font-size: 16px;
+  color: #323233;
+}
+</style>

package/components/TActionSheet/type.uts

@@ -0,0 +1,29 @@
+/**
+ * TActionSheet 组件类型定义
+ */
+
+export interface ActionSheetAction {
+  name: string
+  color?: string
+  disabled?: boolean
+  loading?: boolean
+}
+
+export interface TActionSheetProps {
+  show?: boolean
+  actions?: ActionSheetAction[]
+  title?: string
+  description?: string
+  cancelText?: string
+  closeOnClickAction?: boolean
+  closeOnClickOverlay?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+export interface TActionSheetEmits {
+  'update:show': (value: boolean) => void
+  select: (action: ActionSheetAction, index: number) => void
+  cancel: () => void
+  close: () => void
+}

package/components/TAvatar/index.uvue

@@ -0,0 +1,156 @@
+<script  setup lang="uts" >
+import { computed, ref } from 'vue'
+import type { TAvatarProps } from './type.uts'
+
+/**
+ * TAvatar 头像组件
+ * @description 用于展示用户头像或图标
+ */
+
+// 定义 props
+const props = withDefaults(defineProps<TAvatarProps>(), {
+  src: '',
+  size: 'medium',
+  shape: 'circle',
+  alt: '',
+  bgColor: '#c0c4cc',
+  color: '#ffffff',
+  fit: 'cover'
+})
+
+// 定义 emits
+const emit = defineEmits<{
+  click: []
+  error: []
+}>()
+
+// 图片加载失败标记
+const hasLoadError = ref<boolean>(false)
+
+/**
+ * 计算头像大小
+ */
+const avatarSize = computed<number>(() => {
+  if (typeof props.size === 'number') {
+    return props.size
+  }
+
+  const sizeMap = {
+    small: 32,
+    medium: 40,
+    large: 56
+  }
+
+  return sizeMap[props.size] || 40
+})
+
+/**
+ * 计算头像样式类
+ */
+const avatarClass = computed<string>(() => {
+  const classes: string[] = ['t-avatar']
+
+  classes.push(`t-avatar--${props.shape}`)
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算头像样式
+ */
+const avatarStyle = computed<string>(() => {
+  const styles: string[] = []
+
+  const size = avatarSize.value
+  styles.push(`width: ${size}px`)
+  styles.push(`height: ${size}px`)
+
+  if (!props.src || hasLoadError.value) {
+    styles.push(`background-color: ${props.bgColor}`)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 计算文字样式
+ */
+const textStyle = computed<string>(() => {
+  const styles: string[] = []
+
+  styles.push(`color: ${props.color}`)
+  styles.push(`font-size: ${avatarSize.value / 2}px`)
+
+  return styles.join('; ')
+})
+
+/**
+ * 处理点击事件
+ */
+const handleClick = (): void => {
+  emit('click')
+}
+
+/**
+ * 处理图片加载失败
+ */
+const handleError = (): void => {
+  hasLoadError.value = true
+  emit('error')
+}
+
+/**
+ * 获取显示的文字（取首字符）
+ */
+const displayText = computed<string>(() => {
+  if (props.alt) {
+    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"
+      :src="src"
+      :mode="fit"
+      @error="handleError"
+    />
+    <text v-else-if="alt" class="t-avatar__text" :style="textStyle">
+      {{ displayText }}
+    </text>
+    <slot v-else></slot>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+
+  &--circle {
+    border-radius: 50%;
+  }
+
+  &--square {
+    border-radius: 4px;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__text {
+    font-weight: 500;
+    text-align: center;
+  }
+}
+</style>

package/components/TAvatar/type.uts

@@ -0,0 +1,54 @@
+/**
+ * TAvatar 头像组件属性类型定义
+ */
+export type TAvatarProps = {
+  /**
+   * 头像图片地址
+   */
+  src?: string
+
+  /**
+   * 头像大小
+   * @default "medium"
+   */
+  size?: 'small' | 'medium' | 'large' | number
+
+  /**
+   * 头像形状
+   * @default "circle"
+   */
+  shape?: 'circle' | 'square'
+
+  /**
+   * 替代文字（无图片时显示）
+   */
+  alt?: string
+
+  /**
+   * 背景色
+   */
+  bgColor?: string
+
+  /**
+   * 文字颜色
+   */
+  color?: string
+
+  /**
+   * 图片填充模式
+   * @default "cover"
+   */
+  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+}
+
+export type TAvatarEmits = {
+  /**
+   * 点击头像时触发
+   */
+  click: () => void
+
+  /**
+   * 图片加载失败时触发
+   */
+  error: () => void
+}

package/components/TBadge/index.uvue

@@ -0,0 +1,152 @@
+<script  setup lang="uts" >
+import { computed } from 'vue'
+import type { TBadgeProps } from './type.uts'
+
+/**
+ * TBadge 徽标组件
+ * @description 用于显示数字或状态标记
+ */
+
+// 定义 props
+const props = withDefaults(defineProps<TBadgeProps>(), {
+  value: '',
+  max: 99,
+  isDot: false,
+  hidden: false,
+  type: 'danger',
+  bgColor: '',
+  color: '',
+  offset: () => [0, 0] as [number, number]
+})
+
+/**
+ * 计算显示的内容
+ */
+const displayValue = computed<string>(() => {
+  if (props.isDot) {
+    return ''
+  }
+
+  const val = props.value
+  if (typeof val === 'number' && val > props.max) {
+    return `${props.max}+`
+  }
+
+  return String(val)
+})
+
+/**
+ * 计算徽标样式类
+ */
+const badgeClass = computed<string>(() => {
+  const classes: string[] = ['t-badge__content']
+
+  if (props.isDot) {
+    classes.push('t-badge__content--dot')
+  }
+
+  classes.push(`t-badge__content--${props.type}`)
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算徽标样式
+ */
+const badgeStyle = computed<string>(() => {
+  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 showBadge = computed<boolean>(() => {
+  return !props.hidden && (props.isDot || props.value !== '' && props.value !== 0)
+})
+</script>
+
+<template>
+  <view class="t-badge">
+    <slot></slot>
+    <view v-if="showBadge" :class="badgeClass" :style="badgeStyle">
+      <text v-if="!isDot" class="t-badge__text">{{ displayValue }}</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-badge {
+  position: relative;
+  display: inline-block;
+  overflow:visible;
+
+  &__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    border-radius: 10px;
+    padding: 2px 6px;
+    font-size: 12px;
+    line-height: 1.2;
+    white-space: nowrap;
+    z-index: 1;
+
+    &--dot {
+      width: 8px;
+      height: 8px;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &--primary {
+      background-color: #409eff;
+      color: #ffffff;
+    }
+
+    &--success {
+      background-color: #67c23a;
+      color: #ffffff;
+    }
+
+    &--warning {
+      background-color: #e6a23c;
+      color: #ffffff;
+    }
+
+    &--danger {
+      background-color: #f56c6c;
+      color: #ffffff;
+    }
+
+    &--info {
+      background-color: #909399;
+      color: #ffffff;
+    }
+  }
+
+  &__text {
+    font-size: 12px;
+  }
+}
+</style>