tang-ui-x 1.0.0

package/components/TSlider/index.uvue

@@ -0,0 +1,72 @@
+<script setup lang="uts">
+import type { TSliderProps } from './type.uts'
+
+/**
+ * TSlider 滑块组件
+ * @description 用于在给定范围内选择数值的滑块组件
+ */
+
+// Props 定义 (从 type.uts 导入，排除 modelValue)
+type Props = Omit<TSliderProps, 'modelValue'>
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  showValue: false,
+  activeColor: '#1890ff',
+  inactiveColor: '#e9e9e9',
+  customClass: '',
+  customStyle: ''
+})
+
+// 使用 defineModel 管理双向绑定
+const modelValue = defineModel<number>({ default: 0 })
+
+const emit = defineEmits<{
+  change: [value: number]
+}>()
+
+const handleChange = (event: any): void => {
+  const value = event.detail.value as number
+  modelValue.value = value
+  emit('change', value)
+}
+</script>
+
+<template>
+  <view class="t-slider" :class="customClass" :style="customStyle">
+    <slider
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      :activeColor="activeColor"
+      :backgroundColor="inactiveColor"
+      :block-size="24"
+      @change="handleChange"
+    />
+    <text v-if="showValue" class="t-slider__value">{{ modelValue }}</text>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-slider {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.t-slider__value {
+  margin-left: 12px;
+  font-size: 14px;
+  color: #323233;
+  min-width: 40px;
+  text-align: right;
+}
+uni-slider,slider{
+  width: 100%;
+}
+</style>

package/components/TSlider/type.uts

@@ -0,0 +1,21 @@
+/**
+ * TSlider 组件类型定义
+ */
+
+export interface TSliderProps {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  showValue?: boolean
+  activeColor?: string
+  inactiveColor?: string
+  customClass?: string
+  customStyle?: string
+}
+
+export interface TSliderEmits {
+  'update:modelValue': (value: number) => void
+  change: (value: number) => void
+}

package/components/TSwiper/index.uvue

@@ -0,0 +1,222 @@
+<script setup lang="uts">
+import { computed, ref, watch } from 'vue'
+import type { TSwiperProps } from './type.uts'
+
+/**
+ * TSwiper 轮播图组件
+ * @description 基于 UniApp 原生 swiper 封装的轮播图组件
+ */
+
+// 定义 props
+const props = withDefaults(defineProps<TSwiperProps>(), {
+  height: '200px',
+  autoplay: true,
+  interval: 3000,
+  duration: 300,
+  circular: true,
+  indicatorType: 'dots',
+  indicatorPosition: 'bottom',
+  indicatorColor: 'rgba(0, 0, 0, 0.3)',
+  indicatorActiveColor: '#ffffff',
+  direction: 'horizontal'
+})
+
+// 使用 defineModel 管理当前索引
+const currentIndex = defineModel<number>({ default: 0 })
+
+// 定义 emits
+const emit = defineEmits<{
+  change: [index: number]
+  click: [index: number]
+}>()
+
+// 轮播项总数（通过插槽统计）
+const swiperItemCount = ref<number>(0)
+
+/**
+ * 计算容器样式
+ */
+const swiperStyle = computed<string>(() => {
+  const styles: string[] = []
+
+  if (props.height != '') {
+    styles.push(`height: ${props.height}`)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 计算指示器容器样式类
+ */
+const indicatorClass = computed<string>(() => {
+  const classes: string[] = ['t-swiper__indicator']
+
+  classes.push(`t-swiper__indicator--${props.indicatorPosition}`)
+  classes.push(`t-swiper__indicator--${props.direction}`)
+
+  return classes.join(' ')
+})
+
+/**
+ * 获取指示器点样式
+ */
+const getDotStyle = (index: number): string => {
+  const isActive = index === currentIndex.value
+  const bgColor = isActive ? props.indicatorActiveColor : props.indicatorColor
+
+  return `background-color: ${bgColor}`
+}
+
+/**
+ * 处理轮播改变事件
+ */
+const handleChange = (e: any): void => {
+  const detail = e.detail
+  if (detail != null && detail.current != null) {
+    currentIndex.value = detail.current as number
+    emit('change', detail.current as number)
+  }
+}
+
+/**
+ * 处理点击事件
+ */
+const handleClick = (): void => {
+  emit('click', currentIndex.value)
+}
+
+/**
+ * 计算是否显示指示器
+ */
+const showIndicator = computed<boolean>(() => {
+  return props.indicatorType !== 'none'
+})
+
+/**
+ * 监听插槽变化以更新轮播项数量
+ * 注意：这是一个简化处理，实际项目中可能需要更复杂的逻辑
+ */
+const updateItemCount = (count: number): void => {
+  swiperItemCount.value = count
+}
+
+// 导出方法供父组件使用
+defineExpose({
+  updateItemCount
+})
+</script>
+
+<template>
+  <view class="t-swiper" :style="swiperStyle">
+    <!-- 轮播容器 -->
+    <swiper
+      class="t-swiper__container"
+      :autoplay="autoplay"
+      :interval="interval"
+      :duration="duration"
+      :circular="circular"
+      :vertical="direction === 'vertical'"
+      :current="currentIndex"
+      @change="handleChange"
+      @click="handleClick"
+    >
+      <slot></slot>
+    </swiper>
+
+    <!-- 指示器 -->
+    <view v-if="showIndicator" :class="indicatorClass">
+      <!-- 点状指示器 -->
+      <template v-if="indicatorType === 'dots'">
+        <view
+          v-for="(item, index) in swiperItemCount"
+          :key="index"
+          class="t-swiper__dot"
+          :class="{ 't-swiper__dot--active': index === currentIndex }"
+          :style="getDotStyle(index)"
+        ></view>
+      </template>
+
+      <!-- 数字指示器 -->
+      <template v-if="indicatorType === 'number'">
+        <view class="t-swiper__number">
+          <text class="t-swiper__number-text">{{ currentIndex + 1 }}/{{ swiperItemCount }}</text>
+        </view>
+      </template>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-swiper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &__container {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__indicator {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    z-index: 10;
+
+    // 水平方向指示器位置
+    &--horizontal {
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: row;
+
+      &.t-swiper__indicator--top {
+        top: 12px;
+      }
+
+      &.t-swiper__indicator--bottom {
+        bottom: 12px;
+      }
+    }
+
+    // 垂直方向指示器位置
+    &--vertical {
+      top: 50%;
+      transform: translateY(-50%);
+      flex-direction: column;
+
+      &.t-swiper__indicator--left {
+        left: 12px;
+      }
+
+      &.t-swiper__indicator--right {
+        right: 12px;
+      }
+    }
+  }
+
+  &__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    margin: 0 4px;
+    transition: all 0.3s;
+
+    &--active {
+      width: 16px;
+    }
+  }
+
+  &__number {
+    padding: 4px 12px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 12px;
+
+    &-text {
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 1;
+    }
+  }
+}
+</style>

package/components/TSwiper/type.uts

@@ -0,0 +1,77 @@
+/**
+ * TSwiper 轮播图组件属性类型定义
+ */
+export type TSwiperProps = {
+  /**
+   * 轮播图高度
+   * @default '200px'
+   */
+  height?: string
+
+  /**
+   * 是否自动切换
+   * @default true
+   */
+  autoplay?: boolean
+
+  /**
+   * 自动切换时间间隔（毫秒）
+   * @default 3000
+   */
+  interval?: number
+
+  /**
+   * 滑动动画时长（毫秒）
+   * @default 300
+   */
+  duration?: number
+
+  /**
+   * 是否循环播放
+   * @default true
+   */
+  circular?: boolean
+
+  /**
+   * 指示器类型
+   * @default 'dots'
+   */
+  indicatorType?: 'dots' | 'number' | 'none'
+
+  /**
+   * 指示器位置
+   * @default 'bottom'
+   */
+  indicatorPosition?: 'top' | 'bottom' | 'left' | 'right'
+
+  /**
+   * 指示器颜色
+   */
+  indicatorColor?: string
+
+  /**
+   * 指示器激活颜色
+   */
+  indicatorActiveColor?: string
+
+  /**
+   * 轮播方向
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical'
+}
+
+/**
+ * TSwiper 轮播图组件事件定义
+ */
+export type TSwiperEmits = {
+  /**
+   * 当前轮播索引改变时触发
+   */
+  change: (index: number) => void
+
+  /**
+   * 点击轮播项时触发
+   */
+  click: (index: number) => void
+}

package/components/TSwitch/index.uvue

@@ -0,0 +1,177 @@
+<script  setup lang="uts" >
+import { computed, ref, watch } from 'vue'
+import type { TSwitchProps } from './type.uts'
+
+/**
+ * TSwitch 开关组件
+ * @description 用于两种状态之间的切换
+ */
+
+// 定义 props
+const props = withDefaults(defineProps<TSwitchProps>(), {
+  disabled: false,
+  size: 'medium',
+  activeColor: '#409eff',
+  inactiveColor: '#dcdfe6',
+  activeText: '',
+  inactiveText: '',
+  showText: false
+})
+
+// 使用 defineModel
+const model = defineModel<boolean>({ default: false })
+
+// 定义 emits
+const emit = defineEmits<{
+  change: [value: boolean]
+}>()
+
+// 内部状态
+const checked = ref<boolean>(model.value)
+
+// 监听外部值变化
+watch(() => model.value, (newVal: boolean) => {
+  checked.value = newVal
+})
+
+/**
+ * 计算开关样式类
+ */
+const switchClass = computed<string>(() => {
+  const classes: string[] = ['t-switch']
+
+  classes.push(`t-switch--${props.size}`)
+
+  if (checked.value) {
+    classes.push('t-switch--checked')
+  }
+
+  if (props.disabled) {
+    classes.push('t-switch--disabled')
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算开关背景样式
+ */
+const switchStyle = computed<string>(() => {
+  const styles: string[] = []
+
+  const bgColor = checked.value ? props.activeColor : props.inactiveColor
+  if (bgColor != '') {
+    styles.push(`background-color: ${bgColor}`)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 处理开关点击
+ */
+const handleClick = (): void => {
+  if (props.disabled) {
+    return
+  }
+
+  const newValue = !checked.value
+  checked.value = newValue
+  model.value = newValue
+  emit('change', newValue)
+}
+</script>
+
+<template>
+  <view class="t-switch-wrapper" @click="handleClick">
+    <text v-if="showText && inactiveText" class="t-switch__text t-switch__text--inactive">
+      {{ inactiveText }}
+    </text>
+    <view :class="switchClass" :style="switchStyle">
+      <view class="t-switch__button"></view>
+    </view>
+    <text v-if="showText && activeText" class="t-switch__text t-switch__text--active">
+      {{ activeText }}
+    </text>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-switch-wrapper {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+
+.t-switch {
+  position: relative;
+  background-color: #dcdfe6;
+  border-radius: 100px;
+  transition: background-color 0.3s;
+
+  &--small {
+    width: 32px;
+    height: 18px;
+
+    .t-switch__button {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &--medium {
+    width: 40px;
+    height: 20px;
+
+    .t-switch__button {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &--large {
+    width: 50px;
+    height: 24px;
+
+    .t-switch__button {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  &--checked {
+    .t-switch__button {
+      transform: translateX(100%);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &__button {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    background-color: #ffffff;
+    border-radius: 50%;
+    transition: transform 0.3s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &__text {
+    font-size: 14px;
+    color: #606266;
+
+    &--inactive {
+      margin-right: 8px;
+    }
+
+    &--active {
+      margin-left: 8px;
+    }
+  }
+}
+</style>

package/components/TSwitch/type.uts

@@ -0,0 +1,52 @@
+/**
+ * TSwitch 开关组件属性类型定义
+ * 注意：使用 defineModel 进行双向绑定，无需显式定义
+ */
+export type TSwitchProps = {
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * 开关大小
+   * @default "medium"
+   */
+  size?: 'small' | 'medium' | 'large'
+
+  /**
+   * 打开时的颜色
+   * @default "#409eff"
+   */
+  activeColor?: string
+
+  /**
+   * 关闭时的颜色
+   * @default "#dcdfe6"
+   */
+  inactiveColor?: string
+
+  /**
+   * 打开时的文字
+   */
+  activeText?: string
+
+  /**
+   * 关闭时的文字
+   */
+  inactiveText?: string
+
+  /**
+   * 是否显示文字
+   * @default false
+   */
+  showText?: boolean
+}
+
+export type TSwitchEmits = {
+  /**
+   * 状态改变时触发
+   */
+  change: (value: boolean) => void
+}