tang-ui-x 1.0.0

package/components/TRadioButton/index.uvue

@@ -0,0 +1,232 @@
+<script  setup lang="uts" >
+/**
+ * 单选按钮组件
+ * @description 支持单个按钮和选项组两种使用方式
+ */
+
+type FormOption = {
+  label: string
+  value: string | number
+}
+
+type Props = {
+  /** 选项组模式：选项列表 */
+  options?: FormOption[]
+  /** 单个按钮模式：选项值 */
+  value?: string | number
+  /** 按钮尺寸 */
+  size?: 'small' | 'medium' | 'large'
+  /** 活动状态颜色 */
+  activeColor?: string
+  /** 非活动状态颜色 */
+  inactiveColor?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否选中（仅单个按钮模式） */
+  checked?: boolean
+  /** 名称属性（用于表单提交） */
+  name?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => [],
+  size: 'medium',
+  activeColor: '#00bba7',
+  inactiveColor: '#666666',
+  disabled: false,
+  checked: false
+})
+
+const model = defineModel<string | number>()
+
+const emit = defineEmits<{
+  change: [value: string | number]
+}>()
+
+/**
+ * 计算样式变量
+ */
+const cssVars = computed(() => ({
+  '--radio-active-color': props.activeColor,
+  '--radio-inactive-color': props.inactiveColor
+}))
+
+/**
+ * 是否为选项组模式
+ */
+const isOptionsMode = computed(() => props.options && props.options.length > 0)
+
+/**
+ * 单个按钮模式：判断是否被选中
+ */
+const isChecked = computed(() => {
+  if (isOptionsMode.value) {
+    return model.value === props.value
+  }
+  return props.checked || model.value === props.value
+})
+
+/**
+选择 * 处理变化
+ */
+const handleChange = (value: string | number) => {
+  model.value = value
+  emit('change', value)
+}
+
+/**
+ * 处理单个按钮点击
+ */
+const handleClick = () => {
+  if (props.disabled || isOptionsMode.value) return
+  handleChange(props.value!)
+}
+
+/**
+ * 尺寸样式类
+ */
+const sizeClass = computed(() => {
+  const sizeMap = {
+    'small': 'radio-size-small',
+    'medium': 'radio-size-medium',
+    'large': 'radio-size-large'
+  }
+  return sizeMap[props.size] ?? 'radio-size-medium'
+})
+</script>
+
+<template>
+  <!-- 选项组模式：使用 options 属性 -->
+  <view v-if="isOptionsMode" class="radio-group" :style="cssVars">
+    <view
+      v-for="option in props.options"
+      :key="option.value"
+      class="radio-item"
+      :class="{ 'radio-disabled': props.disabled }"
+      @click="!props.disabled && handleChange(option.value)"
+    >
+      <view class="radio-icon" :class="{ active: model === option.value, 'radio-disabled': props.disabled }">
+        <view v-if="model === option.value" class="radio-dot"></view>
+      </view>
+      <text class="radio-label">{{ option.label }}</text>
+    </view>
+  </view>
+
+  <!-- 单个按钮模式：使用插槽或默认内容 -->
+  <view v-else class="radio-item" :class="[sizeClass, { 'radio-disabled': props.disabled }]" @click="handleClick">
+    <view class="radio-icon" :class="{ active: isChecked, 'radio-disabled': props.disabled }">
+      <view v-if="isChecked" class="radio-dot"></view>
+    </view>
+    <slot>
+      <text v-if="props.value !== undefined" class="radio-label">{{ props.value }}</text>
+    </slot>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+/* 选项组容器 */
+.radio-group {
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+/* 单个按钮容器 */
+.radio-item {
+  flex-direction: row;
+  align-items: center;
+  gap: 16rpx;
+
+  &.radio-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+/* 单选按钮图标 */
+.radio-icon {
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border-width: 2rpx;
+  border-style: solid;
+  border-color: var(--radio-inactive-color);
+  transition: all 0.2s ease;
+
+  &.active {
+    border-color: var(--radio-active-color);
+  }
+
+  &.radio-disabled {
+    border-color: #dcdfe6;
+  }
+}
+
+/* 单选点 */
+.radio-dot {
+  border-radius: 50%;
+  background-color: var(--radio-active-color);
+}
+
+/* 尺寸样式 */
+.radio-size-small {
+  .radio-icon {
+    width: 28rpx;
+    height: 28rpx;
+  }
+
+  .radio-dot {
+    width: 14rpx;
+    height: 14rpx;
+  }
+
+  .radio-label {
+    font-size: 24rpx;
+  }
+}
+
+.radio-size-medium {
+  .radio-icon {
+    width: 36rpx;
+    height: 36rpx;
+  }
+
+  .radio-dot {
+    width: 20rpx;
+    height: 20rpx;
+  }
+
+  .radio-label {
+    font-size: 28rpx;
+  }
+}
+
+.radio-size-large {
+  .radio-icon {
+    width: 44rpx;
+    height: 44rpx;
+  }
+
+  .radio-dot {
+    width: 26rpx;
+    height: 26rpx;
+  }
+
+  .radio-label {
+    font-size: 32rpx;
+  }
+}
+
+/* 文本标签 */
+.radio-label {
+  color: var(--radio-inactive-color);
+  transition: color 0.2s ease;
+
+  .radio-item.active & {
+    color: var(--radio-active-color);
+  }
+
+  .radio-disabled & {
+    color: #c0c4cc;
+  }
+}
+</style>

package/components/TRadioGroup/index.uvue

@@ -0,0 +1,117 @@
+<script setup lang="uts">
+import type { TRadioGroupProps, RadioOption } from './type.uts'
+
+/**
+ * TRadioGroup 单选框组组件
+ * @description 用于在多个选项中选择一个的组件
+ */
+
+// Props 定义 (从 type.uts 导入，排除 modelValue)
+type Props = Omit<TRadioGroupProps, 'modelValue'>
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => [] as RadioOption[],
+  direction: 'vertical',
+  disabled: false,
+  customClass: '',
+  customStyle: ''
+})
+
+// 使用 defineModel 管理双向绑定
+const modelValue = defineModel<string | number>({ default: '' })
+
+const emit = defineEmits<{
+  change: [value: string | number]
+}>()
+
+const handleChange = (option: RadioOption): void => {
+  if (props.disabled || option.disabled) return
+
+  modelValue.value = option.value
+  emit('change', option.value)
+}
+
+const isChecked = (option: RadioOption): boolean => {
+  return modelValue.value === option.value
+}
+</script>
+
+<template>
+  <view
+    class="t-radio-group"
+    :class="[`t-radio-group--${direction}`, customClass]"
+    :style="customStyle"
+  >
+    <view
+      v-for="(option, index) in options"
+      :key="index"
+      class="t-radio-group__item"
+      :class="{ 't-radio-group__item--disabled': disabled || option.disabled }"
+      @click="() => handleChange(option)"
+    >
+      <view class="t-radio-group__icon" :class="{ 't-radio-group__icon--checked': isChecked(option) }">
+        <view v-if="isChecked(option)" class="t-radio-group__dot"></view>
+      </view>
+      <text class="t-radio-group__label">{{ option.label }}</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-radio-group {
+  &--vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+.t-radio-group__item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  cursor: pointer;
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .t-radio-group--horizontal & {
+    margin-right: 24px;
+  }
+}
+
+.t-radio-group__icon {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #c8c9cc;
+  border-radius: 50%;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+
+  &--checked {
+    border-color: #1890ff;
+  }
+}
+
+.t-radio-group__dot {
+  width: 10px;
+  height: 10px;
+  background-color: #1890ff;
+  border-radius: 50%;
+}
+
+.t-radio-group__label {
+  font-size: 14px;
+  color: #323233;
+}
+</style>

package/components/TRadioGroup/type.uts

@@ -0,0 +1,25 @@
+/**
+ * TRadioGroup 组件类型定义
+ */
+
+export type RadioDirection = 'horizontal' | 'vertical'
+
+export interface RadioOption {
+  label: string
+  value: string | number
+  disabled?: boolean
+}
+
+export interface TRadioGroupProps {
+  modelValue?: string | number
+  options?: RadioOption[]
+  direction?: RadioDirection
+  disabled?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+export interface TRadioGroupEmits {
+  'update:modelValue': (value: string | number) => void
+  change: (value: string | number) => void
+}

package/components/TRate/index.uvue

@@ -0,0 +1,182 @@
+<script  setup lang="uts" >
+/**
+ * 评分组件属性类型
+ */
+type RateProps = {
+  /** 最大评分 */
+  max?: number
+  /** 是否只读 */
+  readonly?: boolean
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 星星大小 */
+  size?: number
+  /** 星星间距 */
+  gap?: number
+  /** 激活颜色 */
+  activeColor?: string
+  /** 未激活颜色 */
+  inactiveColor?: string
+  /** 是否显示评分 */
+  showScore?: boolean
+  /** 是否允许清除 */
+  allowClear?: boolean
+  /** 精度 */
+  precision?: number
+  /** 星星字符 */
+  starChar?: string
+  /** 是否震动 */
+  vibrate?: boolean
+}
+
+const props = withDefaults(defineProps<RateProps>(), {
+  max: 5,
+  readonly: false,
+  disabled: false,
+  size: 40,
+  gap: 2,
+  activeColor: '#ffc107',
+  inactiveColor: '#e4e7eb',
+  showScore: false,
+  allowClear: false,
+  precision: 0, // ⭐ 无半星 → 只允许整数
+  starChar: '★',
+  vibrate: false
+})
+
+const emit = defineEmits<{
+  change: [value: number]
+  click: [value: number]
+  hoverChange: [value: number]
+}>()
+
+const model = defineModel({ default: 0 })
+
+/** 格式化评分显示 */
+const formatScore = computed(() => {
+  const value = model.value.toFixed(props.precision)
+  return `${value}/${props.max}`
+})
+
+/** 每颗星的填充比例（仅 0% 或 100%） */
+const stars = computed(() => {
+  return Array.from({ length: props.max }, (_, i) => {
+    const index = i + 1
+    return { index, percentage: index <= model.value ? 100 : 0 }
+  })
+})
+
+/** 基础星样式 */
+const baseStarStyle = computed(() => ({
+  fontSize: `${props.size}rpx`,
+  marginRight: `${props.gap}rpx`,
+  color: props.inactiveColor,
+  cursor: props.readonly || props.disabled ? 'default' : 'pointer'
+}))
+
+/** 更新评分 */
+const updateRating = (newRating: number) => {
+  model.value = newRating
+  emit('change', newRating)
+
+  if (props.vibrate) {
+    try {
+      uni.vibrateShort()
+    } catch {}
+  }
+}
+
+/** 点击事件（整星） */
+const handleStarClick = (index: number) => {
+  if (props.readonly || props.disabled) return
+
+  let newRating = index
+
+  // 再次点击相同评分 → 清空
+  if (props.allowClear && newRating === model.value) {
+    newRating = 0
+  }
+
+  updateRating(newRating)
+  emit('click', newRating)
+}
+
+</script>
+
+<template>
+  <view class="rate-wrapper">
+    <view class="rate-stars">
+      <view
+        v-for="star in stars"
+        :key="star.index"
+        class="star-item"
+        :style="baseStarStyle"
+        @tap="handleStarClick(star.index)"
+        @click="handleStarClick(star.index)"
+      >
+        <text
+          class="star-fill"
+          :style="{
+            color: star.percentage === 100 ? props.activeColor : props.inactiveColor
+          }"
+        >
+          {{ props.starChar }}
+        </text>
+      </view>
+    </view>
+
+    <view v-if="props.showScore" class="rate-score">
+      <text class="score-text">
+        {{ formatScore }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.rate-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 4rpx;
+  align-items: center;
+  user-select: none;
+}
+
+.rate-stars {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.star-item {
+  display: inline-block;
+  transition: transform 0.15s ease;
+  cursor: pointer;
+
+  &:active {
+    transform: scale(0.9);
+  }
+
+  &:last-child {
+    margin-right: 0 !important;
+  }
+}
+
+.star-fill {
+  display: inline-block;
+  font-weight: 600;
+  line-height: 1;
+  transition: color 0.25s ease;
+}
+
+.rate-score {
+  margin-left: 16rpx;
+}
+
+.score-text {
+  font-size: 28rpx;
+  font-weight: 500;
+  line-height: 1.2;
+  color: #374151;
+}
+</style>

package/components/TRow/index.uvue

@@ -0,0 +1,105 @@
+<script setup lang="uts">
+import { provide, computed } from 'vue'
+import type { RowJustify, RowAlign } from './type.uts'
+
+/**
+ * TRow 栅格行组件
+ * @description 基于 24 栅格系统的行容器，配合 TCol 使用
+ */
+
+// Props 定义
+interface Props {
+  gutter?: number
+  justify?: RowJustify
+  align?: RowAlign
+  wrap?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  gutter: 0,
+  justify: 'start',
+  align: 'top',
+  wrap: true,
+  customClass: '',
+  customStyle: ''
+})
+
+// 提供 gutter 给子组件
+provide('rowGutter', props.gutter)
+
+/**
+ * 计算容器样式
+ */
+const containerStyle = computed((): string => {
+  const styles: string[] = []
+
+  // 列间距（负边距抵消子元素的内边距）
+  if (props.gutter > 0) {
+    const margin = props.gutter / 2
+    styles.push(`margin-left: -${margin}px`)
+    styles.push(`margin-right: -${margin}px`)
+  }
+
+  // 水平对齐
+  const justifyMap = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    'space-around': 'space-around',
+    'space-between': 'space-between',
+    'space-evenly': 'space-evenly'
+  }
+  styles.push(`justify-content: ${justifyMap[props.justify]}`)
+
+  // 垂直对齐
+  const alignMap = {
+    top: 'flex-start',
+    middle: 'center',
+    bottom: 'flex-end'
+  }
+  styles.push(`align-items: ${alignMap[props.align]}`)
+
+  // 换行
+  if (props.wrap) {
+    styles.push('flex-wrap: wrap')
+  } else {
+    styles.push('flex-wrap: nowrap')
+  }
+
+  // 自定义样式
+  if (props.customStyle) {
+    styles.push(props.customStyle)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 计算容器类名
+ */
+const containerClasses = computed((): string => {
+  const classes: string[] = ['t-row']
+
+  if (props.customClass) {
+    classes.push(props.customClass)
+  }
+
+  return classes.join(' ')
+})
+</script>
+
+<template>
+  <view :class="containerClasses" :style="containerStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+</style>

package/components/TRow/type.uts

@@ -0,0 +1,52 @@
+/**
+ * TRow 组件类型定义
+ */
+
+/**
+ * 水平对齐方式
+ */
+export type RowJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'
+
+/**
+ * 垂直对齐方式
+ */
+export type RowAlign = 'top' | 'middle' | 'bottom'
+
+/**
+ * TRow Props 接口
+ */
+export interface TRowProps {
+  /**
+   * 列间距（单位 px）
+   * @default 0
+   */
+  gutter?: number
+
+  /**
+   * 水平对齐方式
+   * @default 'start'
+   */
+  justify?: RowJustify
+
+  /**
+   * 垂直对齐方式
+   * @default 'top'
+   */
+  align?: RowAlign
+
+  /**
+   * 是否自动换行
+   * @default true
+   */
+  wrap?: boolean
+
+  /**
+   * 自定义类名
+   */
+  customClass?: string
+
+  /**
+   * 自定义样式
+   */
+  customStyle?: string
+}