tang-ui-x 1.0.0

package/components/TNumberInput/index.uvue

@@ -0,0 +1,226 @@
+<script  setup lang="uts" >
+type NumberInputProps = {
+	/** 最小值 */
+	min?: number
+	/** 最大值 */
+	max?: number
+	/** 步长 */
+	step?: number
+	/** 是否禁用 */
+	disabled?: boolean
+	/** 占位符 */
+	placeholder?: string
+	/** 输入框宽度 */
+	width?: string | number
+	/** 按钮大小 */
+	buttonSize?: string | number
+}
+
+const model = defineModel({ default: 0 })
+
+const props = withDefaults(defineProps<NumberInputProps>(), {
+	min: 0,
+	max: 999999,
+	step: 1,
+	disabled: false,
+	placeholder: '',
+	width: 60,
+	buttonSize: 64
+})
+
+const emit = defineEmits<{
+	change: [value: number]
+}>()
+
+/**
+ * 处理输入值改变
+ */
+const handleInput = (e: any) => {
+	const value = parseFloat(e.target.value || '0')
+
+	// 如果输入无效，使用最小值
+	if (isNaN(value)) {
+		model.value = props.min
+	} else {
+		model.value = value
+	}
+
+	// 触发 change 事件
+	emit('change', model.value)
+}
+
+/**
+ * 处理输入框失去焦点
+ */
+const handleBlur = () => {
+	// 边界检查
+	if (model.value < props.min) {
+		model.value = props.min
+	} else if (model.value > props.max) {
+		model.value = props.max
+	}
+	emit('change', model.value)
+}
+
+/**
+ * 减少
+ */
+const handleDecrease = () => {
+	if (props.disabled) return
+
+	const newValue = model.value - props.step
+	if (newValue >= props.min) {
+		model.value = newValue
+		emit('change', model.value)
+	}
+}
+
+/**
+ * 增加
+ */
+const handleIncrease = () => {
+	if (props.disabled) return
+
+	const newValue = model.value + props.step
+	if (newValue <= props.max) {
+		model.value = newValue
+		emit('change', model.value)
+	}
+}
+
+/**
+ * 处理键盘事件
+ */
+const handleKeyDown = (e: any) => {
+	if (props.disabled) return
+
+	// 上箭头增加
+	if (e.keyCode === 38) {
+		e.preventDefault()
+		handleIncrease()
+	}
+	// 下箭头减少
+	else if (e.keyCode === 40) {
+		e.preventDefault()
+		handleDecrease()
+	}
+}
+
+/**
+ * 格式化输入框宽度
+ */
+const inputWidth = computed(() => {
+	return typeof props.width === 'number' ? props.width + 'rpx' : props.width
+})
+
+/**
+ * 格式化按钮尺寸
+ */
+const buttonSizeComputed = computed(() => {
+	return typeof props.buttonSize === 'number' ? props.buttonSize + 'rpx' : props.buttonSize
+})
+</script>
+
+<template>
+	<view class="number-input-wrapper">
+		<!-- 减少按钮 -->
+		<view
+			class="number-input-button"
+			:class="{ 'number-input-button-disabled': disabled || model <= min }"
+			:style="{ width: buttonSizeComputed, height: buttonSizeComputed }"
+			@tap="handleDecrease">
+			<text class="number-input-button-icon">-</text>
+		</view>
+
+		<!-- 输入框 -->
+		<input
+			class="number-input"
+			:class="{ 'number-input-disabled': disabled }"
+			:style="{ width: inputWidth }"
+			type="number"
+			:placeholder="placeholder"
+			:value="model"
+			:disabled="disabled"
+			@input="handleInput"
+			@blur="handleBlur"
+			@keydown="handleKeyDown" />
+
+		<!-- 增加按钮 -->
+		<view
+			class="number-input-button"
+			:class="{ 'number-input-button-disabled': disabled || model >= max }"
+			:style="{ width: buttonSizeComputed, height: buttonSizeComputed }"
+			@tap="handleIncrease">
+			<text class="number-input-button-icon">+</text>
+		</view>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+.number-input-wrapper {
+	display: flex;
+	flex-direction: row;	
+	align-items: center;
+	gap: 8rpx;
+}
+
+.number-input-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #f5f5f5;
+	border-radius: 8rpx;
+	transition: all 0.3s;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+.number-input-button:active:not(.number-input-button-disabled) {
+	background-color: #e0e0e0;
+	transform: scale(0.95);
+}
+
+.number-input-button-disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.number-input-button-icon {
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #333;
+	line-height: 1;
+}
+
+.number-input {
+	height: 64rpx;
+	background-color: #f5f5f5;
+	border-radius: 8rpx;
+	text-align: center;
+	font-size: 28rpx;
+	color: #333;
+	border: 2rpx solid transparent;
+	transition: all 0.3s;
+}
+
+.number-input:focus {
+	border-color: #007aff;
+	background-color: #fff;
+	outline: none;
+}
+
+.number-input-disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+input[type="number"] {
+	-moz-appearance: textfield;
+}
+</style>

package/components/TPicker/index.uvue

@@ -0,0 +1,276 @@
+<script setup lang="uts">
+import { computed, ref, watch } from 'vue'
+import type { TPickerProps, TPickerOption } from './type.uts'
+
+/**
+ * TPicker 通用选择器组件
+ * @description 支持单列、多列选择
+ */
+
+// Props 定义 (从 type.uts 导入，排除 visible)
+type Props = Omit<TPickerProps, 'visible'>
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '请选择',
+  options: () => [] as TPickerOption[],
+  columns: () => [] as TPickerOption[][],
+  confirmText: '确定',
+  cancelText: '取消',
+  itemHeight: '44px',
+  visibleItemCount: 5,
+  showToolbar: true
+})
+
+// 使用 defineModel 管理显示状态 (v-model)
+const visible = defineModel<boolean>({ default: false })
+
+// 使用 defineModel 管理选中的值（使用命名模型）
+const selectedValue = defineModel<any>('selectedValue', { default: null })
+
+// 定义 emits
+const emit = defineEmits<{
+  confirm: [value: any, index: number | number[], option: TPickerOption | TPickerOption[]]
+  cancel: []
+  change: [value: any, index: number | number[], columnIndex: number]
+}>()
+
+// 当前选中的索引（单列为 number，多列为 number[]）
+const selectedIndex = ref<number[]>([0])
+
+/**
+ * 计算是否为单列模式
+ */
+const isSingleColumn = computed<boolean>(() => {
+  return props.options.length > 0 && props.columns.length === 0
+})
+
+/**
+ * 计算列数据
+ */
+const columnsData = computed<TPickerOption[][]>(() => {
+  if (isSingleColumn.value) {
+    return [props.options]
+  }
+  return props.columns
+})
+
+/**
+ * 计算 picker-view 的高度
+ */
+const pickerHeight = computed<string>(() => {
+  const height = parseInt(props.itemHeight) * props.visibleItemCount
+  return `${height}px`
+})
+
+/**
+ * 处理遮罩点击
+ */
+const handleMaskClick = (): void => {
+  handleCancel()
+}
+
+/**
+ * 处理取消
+ */
+const handleCancel = (): void => {
+  visible.value = false
+  emit('cancel')
+}
+
+/**
+ * 处理确认
+ */
+const handleConfirm = (): void => {
+  const columns = columnsData.value
+
+  if (isSingleColumn.value) {
+    // 单列模式
+    const index = selectedIndex.value[0] || 0
+    const option = columns[0][index]
+
+    if (option != null) {
+      selectedValue.value = option.value
+      emit('confirm', option.value, index, option)
+    }
+  } else {
+    // 多列模式
+    const values: any[] = []
+    const options: TPickerOption[] = []
+
+    selectedIndex.value.forEach((idx: number, colIdx: number) => {
+      const column = columns[colIdx]
+      if (column != null && column[idx] != null) {
+        values.push(column[idx].value)
+        options.push(column[idx])
+      }
+    })
+
+    selectedValue.value = values
+    emit('confirm', values, selectedIndex.value, options)
+  }
+
+  visible.value = false
+}
+
+/**
+ * 处理选择器改变
+ */
+const handleChange = (e: any): void => {
+  const detail = e.detail
+  if (detail != null && detail.value != null) {
+    selectedIndex.value = detail.value as number[]
+
+    // 触发 change 事件
+    const columns = columnsData.value
+    const columnIndex = 0 // 简化处理，实际可能需要判断哪一列改变了
+
+    if (isSingleColumn.value) {
+      const index = selectedIndex.value[0] || 0
+      const option = columns[0][index]
+      if (option != null) {
+        emit('change', option.value, index, columnIndex)
+      }
+    } else {
+      const values: any[] = []
+      selectedIndex.value.forEach((idx: number, colIdx: number) => {
+        const column = columns[colIdx]
+        if (column != null && column[idx] != null) {
+          values.push(column[idx].value)
+        }
+      })
+      emit('change', values, selectedIndex.value, columnIndex)
+    }
+  }
+}
+</script>
+
+<template>
+  <view v-if="visible" class="t-picker">
+    <!-- 遮罩层 -->
+    <view class="t-picker__mask" @click="handleMaskClick"></view>
+
+    <!-- 选择器容器 -->
+    <view class="t-picker__container">
+      <!-- 工具栏 -->
+      <view v-if="showToolbar" class="t-picker__toolbar">
+        <view class="t-picker__btn t-picker__btn--cancel" @click="handleCancel">
+          <text class="t-picker__btn-text">{{ cancelText }}</text>
+        </view>
+        <view class="t-picker__title">
+          <text class="t-picker__title-text">{{ title }}</text>
+        </view>
+        <view class="t-picker__btn t-picker__btn--confirm" @click="handleConfirm">
+          <text class="t-picker__btn-text t-picker__btn-text--primary">{{ confirmText }}</text>
+        </view>
+      </view>
+
+      <!-- 选择器主体 -->
+      <picker-view
+        class="t-picker__view"
+        :style="`height: ${pickerHeight}`"
+        :value="selectedIndex"
+        @change="handleChange"
+        :indicator-style="`height: ${itemHeight}`"
+      >
+        <picker-view-column v-for="(column, columnIndex) in columnsData" :key="columnIndex">
+          <view
+            v-for="(item, itemIndex) in column"
+            :key="itemIndex"
+            class="t-picker__item"
+            :class="{ 't-picker__item--disabled': item.disabled }"
+            :style="`height: ${itemHeight}`"
+          >
+            <text class="t-picker__item-text">{{ item.label }}</text>
+          </view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-picker {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &__container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ffffff;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    z-index: 1;
+  }
+
+  &__toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  &__btn {
+    padding: 8px 12px;
+    cursor: pointer;
+
+    &-text {
+      font-size: 16px;
+      color: #606266;
+
+      &--primary {
+        color: #409eff;
+        font-weight: 500;
+      }
+    }
+  }
+
+  &__title {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    &-text {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+
+  &__view {
+    width: 100%;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--disabled {
+      opacity: 0.4;
+    }
+
+    &-text {
+      font-size: 16px;
+      color: #303133;
+    }
+  }
+}
+</style>

package/components/TPicker/type.uts

@@ -0,0 +1,105 @@
+/**
+ * TPicker 选择器选项类型
+ */
+export type TPickerOption = {
+  /**
+   * 选项文本
+   */
+  label: string
+
+  /**
+   * 选项值
+   */
+  value: string | number
+
+  /**
+   * 子选项（用于级联选择）
+   */
+  children?: TPickerOption[]
+
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+}
+
+/**
+ * TPicker 选择器组件属性类型定义
+ */
+export type TPickerProps = {
+  /**
+   * 选择器标题
+   */
+  title?: string
+
+  /**
+   * 选择器数据（单列）
+   */
+  options?: TPickerOption[]
+
+  /**
+   * 选择器数据（多列）
+   */
+  columns?: TPickerOption[][]
+
+  /**
+   * 是否显示选择器
+   * @default false
+   */
+  visible?: boolean
+
+  /**
+   * 确认按钮文字
+   * @default '确定'
+   */
+  confirmText?: string
+
+  /**
+   * 取消按钮文字
+   * @default '取消'
+   */
+  cancelText?: string
+
+  /**
+   * 选项高度
+   * @default '44px'
+   */
+  itemHeight?: string
+
+  /**
+   * 可见选项数量
+   * @default 5
+   */
+  visibleItemCount?: number
+
+  /**
+   * 是否显示工具栏
+   * @default true
+   */
+  showToolbar?: boolean
+}
+
+/**
+ * TPicker 选择器组件事件定义
+ */
+export type TPickerEmits = {
+  /**
+   * 确认选择时触发
+   */
+  confirm: (value: any, index: number | number[], option: TPickerOption | TPickerOption[]) => void
+
+  /**
+   * 取消选择时触发
+   */
+  cancel: () => void
+
+  /**
+   * 选项改变时触发
+   */
+  change: (value: any, index: number | number[], columnIndex: number) => void
+
+  /**
+   * 更新显示状态
+   */
+  'update:visible': (value: boolean) => void
+}