@yxhl/specter-pui-vtk 1.0.0

package/src/components/assembly/VtkCount.vue

@@ -0,0 +1,403 @@
+<!-- 
+
+// 基础用法
+    <VtkCount :start="0" :end="12345" :duration="3000" suffix="次" />
+    
+//带前缀和分隔符
+    <VtkCount 
+      :start="0" 
+      :end="999999" 
+      :duration="2000" 
+      prefix="¥" 
+      suffix="元" 
+      :separator="true" 
+    />
+    
+//手动控制
+    <VtkCount 
+      ref="countRef" 
+      :start="0" 
+      :end="100" 
+      :autoplay="false" 
+      @complete="onComplete"
+    />
+    <VBtn @click="startCount">开始计数</VBtn>
+  -->
+
+<template>
+  <div class="vtk-count" :class="containerClass">
+    <div class="count-display" :style="{ color: color }">
+      <!-- 前缀 -->
+      <span v-if="prefix" class="prefix">{{ prefix }}</span>
+      
+      <!-- 数字容器 -->
+      <div class="digits-container">
+        <div 
+          v-for="(digitChar, index) in maxDigitString" 
+          :key="`digit-${index}-${digitKey}`"
+          class="digit-wrapper"
+          :class="{ 'digit-separator': isNaN(digitChar) }"
+        >
+          <div 
+            v-if="!isNaN(digitChar)" 
+            class="digit-scroll"
+          >
+            <div 
+              v-for="n in 10" 
+              :key="n" 
+              class="digit-item"
+              :style="getDigitStyle(getCurrentDigit(index), n-1)"
+            >
+              {{ n-1 }}
+            </div>
+          </div>
+          <div v-else class="separator">{{ digitChar }}</div>
+        </div>
+      </div>
+      
+      <!-- 后缀 -->
+      <span v-if="suffix" class="suffix">{{ suffix }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+
+// 定义组件名称
+defineOptions({
+  name: "VtkCount",
+  inheritAttrs: false,
+});
+
+// 定义 props
+const props = defineProps({
+  // 初始值
+  start: {
+    type: Number,
+    default: 0
+  },
+  // 目标值
+  end: {
+    type: Number,
+    default: 0
+  },
+  // 动画持续时间（毫秒）
+  duration: {
+    type: Number,
+    default: 2000
+  },
+  // 是否自动开始动画
+  autoplay: {
+    type: Boolean,
+    default: true
+  },
+  // 数字前缀
+  prefix: {
+    type: String,
+    default: ''
+  },
+  // 数字后缀
+  suffix: {
+    type: String,
+    default: ''
+  },
+  // 容器自定义类名
+  containerClass: {
+    type: String,
+    default: ''
+  },
+  // 是否使用分隔符（千分位）
+  separator: {
+    type: Boolean,
+    default: false
+  },
+  // 小数位数
+  decimals: {
+    type: Number,
+    default: 0
+  },
+  // 文字颜色
+  color: {
+    type: String,
+    default: '#1976d2'
+  }
+})
+
+// 定义 emits
+const emit = defineEmits(['complete'])
+
+// 当前显示的数值
+const currentNumber = ref(props.start)
+
+// 当前每个位置的数字值
+const currentDigits = ref([])
+
+// 用于强制重新渲染的key
+const digitKey = ref(0)
+
+// 是否正在动画中
+const isAnimating = ref(false)
+
+// 格式化数字（处理小数和分隔符）
+const formatNumber = (num) => {
+  let result = num.toFixed(props.decimals)
+  if (props.separator && props.decimals === 0) {
+    result = result.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  }
+  return result
+}
+
+// 获取目标数字字符串
+const targetNumberString = computed(() => {
+  return formatNumber(props.end)
+})
+
+// 获取起始数字字符串
+const startNumberString = computed(() => {
+  return formatNumber(props.start)
+})
+
+// 获取最大位数的字符串（用于保持DOM结构稳定）
+const maxDigitString = computed(() => {
+  const target = targetNumberString.value
+  const start = startNumberString.value
+  return target.length >= start.length ? target : start
+})
+
+// 获取当前指定位置的数字
+const getCurrentDigit = (index) => {
+  if (index < currentDigits.value.length) {
+    return currentDigits.value[index]
+  }
+  return '0'
+}
+
+// 初始化数字数组
+const initDigitsArray = () => {
+  const targetStr = targetNumberString.value
+  const startStr = startNumberString.value
+  
+  // 初始化currentDigits数组，确保长度与maxDigitString一致
+  currentDigits.value = maxDigitString.value.split('').map((char, index) => {
+    if (isNaN(char)) {
+      return char // 分隔符保持原样
+    }
+    
+    // 从起始字符串对应位置获取数字
+    if (index < startStr.length) {
+      const startChar = startStr[index]
+      return isNaN(startChar) ? '0' : startChar
+    }
+    return '0'
+  })
+}
+
+// 获取数字样式
+const getDigitStyle = (currentValue, digitValue) => {
+  // 如果是分隔符，直接返回
+  if (isNaN(currentValue) || isNaN(digitValue)) {
+    return {
+      transform: 'translateY(0)'
+    }
+  }
+  
+  const current = parseInt(currentValue) || 0
+  const target = digitValue
+  const offset = target - current
+  
+  // 处理循环滚动（9->0 或 0->9）
+  let translateY
+  if (offset > 5) {
+    // 向下滚动（如 9->0）
+    translateY = -(10 - offset) * 100
+  } else if (offset < -5) {
+    // 向上滚动（如 0->9）
+    translateY = (10 + offset) * 100
+  } else {
+    translateY = -offset * 100
+  }
+  
+  return {
+    transform: `translateY(${translateY}%)`,
+    transition: isAnimating.value ? 'transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' : 'none',
+    color: props.color
+  }
+}
+
+// 开始数字动画
+const startAnimation = () => {
+  if (isAnimating.value) return
+  
+  isAnimating.value = true
+  const startTime = performance.now()
+  const startValue = props.start
+  const endValue = props.end
+  const diff = endValue - startValue
+  
+  // 初始化数字数组
+  initDigitsArray()
+  
+  const animate = (currentTime) => {
+    const elapsed = currentTime - startTime
+    const progress = Math.min(elapsed / props.duration, 1)
+    
+    // 使用缓动函数使动画更自然
+    const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+    currentNumber.value = startValue + diff * easeOutQuart
+    
+    // 更新每个数字位的当前值
+    updateDigitArray(currentNumber.value)
+    
+    if (progress < 1) {
+      requestAnimationFrame(animate)
+    } else {
+      currentNumber.value = endValue
+      // 确保最终值准确
+      updateDigitArray(endValue)
+      isAnimating.value = false
+      emit('complete')
+    }
+  }
+  
+  requestAnimationFrame(animate)
+}
+
+// 更新数字数组
+const updateDigitArray = (value) => {
+  const valueStr = formatNumber(value)
+  const maxStr = maxDigitString.value
+  
+  // 保持数组长度不变，只更新值
+  for (let i = 0; i < maxStr.length; i++) {
+    if (i < valueStr.length) {
+      currentDigits.value[i] = valueStr[i]
+    } else {
+      // 超出部分保持为'0'或分隔符
+      currentDigits.value[i] = isNaN(maxStr[i]) ? maxStr[i] : '0'
+    }
+  }
+}
+
+// 监听 end 值变化，重新开始动画
+watch(() => props.end, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    // 当位数可能发生变化时，更新key强制重新渲染
+    const newStr = formatNumber(newVal)
+    const oldStr = formatNumber(oldVal)
+    if (newStr.length !== oldStr.length) {
+      digitKey.value += 1
+      nextTick(() => {
+        startAnimation()
+      })
+    } else {
+      startAnimation()
+    }
+  }
+})
+
+// 组件挂载时开始动画
+onMounted(() => {
+  if (props.autoplay) {
+    // 检查初始值和目标值位数是否不同，如果不同则更新key
+    const startStr = startNumberString.value
+    const endStr = targetNumberString.value
+    if (startStr.length !== endStr.length) {
+      digitKey.value += 1
+    }
+    
+    nextTick(() => {
+      startAnimation()
+    })
+  }
+})
+
+// 提供外部调用方法
+defineExpose({
+  startAnimation
+})
+</script>
+
+<style scoped>
+.vtk-count {
+  display: inline-block;
+}
+
+.count-display {
+  display: flex;
+  align-items: center;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.digits-container {
+  display: flex;
+  align-items: center;
+}
+
+.digit-wrapper {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  text-align: center;
+  margin: 0 1px;
+}
+
+.digit-wrapper.digit-separator {
+  width: auto;
+  animation: none;
+}
+
+.digit-scroll {
+  position: relative;
+  height: 100%;
+}
+
+.digit-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-weight: normal;
+}
+
+.prefix, .suffix {
+  font-size: 0.8em;
+  align-self: flex-end;
+  margin-bottom: 0.1em;
+}
+
+.prefix {
+  margin-right: 4px;
+}
+
+.suffix {
+  margin-left: 4px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .count-display {
+    font-size: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .count-display {
+    font-size: 18px;
+  }
+}
+</style>

package/src/components/assembly/VtkDatePicker.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="vtk-date-range-picker">
+    <VMenu
+      v-model="menu"
+      :close-on-content-click="false"
+      transition="scale-transition"
+      offset-y
+      min-width="auto"
+      eager
+    >
+      <template #activator="{ props: activatorProps }">
+        <VTextField
+          v-bind="{ ...activatorProps, ...textFieldProps }"
+          v-model="displayValue"
+          :placeholder="placeholder"
+          :disabled="disabled"
+          readonly
+          clearable
+          density="compact"
+          variant="outlined"
+          @click:clear="clearValue"
+        >
+          <template #prepend-inner>
+            <VIcon size="small">mdi-calendar</VIcon>
+          </template>
+        </VTextField>
+      </template>
+      
+      <VCard style="width: 650px;">
+        <VCardText class="pa-0">
+          <div class="date-picker-container">
+            <VDatePicker
+              v-model="startDateRange"
+              hide-header
+              :min="minDate"
+              :max="maxDate"
+              :show-current="showCurrent"
+              @update:model-value="onStartDateChange"
+              class="date-picker-item"
+            />
+            <VDatePicker
+              v-model="endDateRange"
+              hide-header
+              :min="minDate"
+              :max="maxDate"
+              :show-current="showCurrent"
+              @update:model-value="onEndDateChange"
+              class="date-picker-item"
+            />
+          </div>
+        </VCardText>
+        
+        <VDivider></VDivider>
+        
+        <VCardActions>
+          <VSpacer></VSpacer>
+          <VBtn text @click="cancel">取消</VBtn>
+          <VBtn color="primary" variant="tonal" @click="confirm">确定</VBtn>
+        </VCardActions>
+      </VCard>
+    </VMenu>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, useAttrs } from 'vue';
+
+// 定义组件名称
+defineOptions({
+  name: "VtkDatePicker",
+  inheritAttrs: false,
+});
+
+// 定义props
+const props = defineProps({
+  // v-model绑定值
+  modelValue: {
+    type: [Array, String],
+    default: () => []
+  },
+  // 占位符
+  placeholder: {
+    type: String,
+    default: '请选择日期范围'
+  },
+  // 禁用状态
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 最小日期
+  min: {
+    type: String,
+    default: undefined
+  },
+  // 最大日期
+  max: {
+    type: String,
+    default: undefined
+  },
+  // 是否显示当前日期
+  showCurrent: {
+    type: [Boolean, String],
+    default: true
+  },
+  // 显示格式
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD'
+  },
+  // 分隔符
+  separator: {
+    type: String,
+    default: ' 至 '
+  }
+});
+
+// 定义emit事件
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 获取透传属性
+const attrs = useAttrs();
+
+// 菜单显示控制
+const menu = ref(false);
+
+// 日期范围值
+const dateRange = ref([]);
+
+// 为了横向排列，需要分别管理开始和结束日期选择器的值
+const startDateRange = ref(null);
+const endDateRange = ref(null);
+
+
+// 显示值
+const displayValue = computed(() => {
+  if (!dateRange.value || dateRange.value.length === 0) {
+    return '';
+  }
+  
+  if (dateRange.value.length === 1) {
+    return formatDate(dateRange.value[0]);
+  }
+  
+  return `${formatDate(dateRange.value[0])}${props.separator}${formatDate(dateRange.value[1])}`;
+});
+
+// 文本框属性
+const textFieldProps = computed(() => {
+  // 排除我们自己使用的属性
+  const { 
+    modelValue, 
+    placeholder, 
+    disabled, 
+    min, 
+    max, 
+    showCurrent, 
+    format,
+    separator,
+    ...rest 
+  } = attrs;
+  
+  return rest;
+});
+
+// 格式化日期
+const formatDate = (date) => {
+  if (!date) return '';
+  
+  // 如果是字符串直接返回
+  if (typeof date === 'string') {
+    return date;
+  }
+  
+  // 如果是 Date 对象
+  if (date instanceof Date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+  
+  return date;
+};
+
+// 最小日期
+const minDate = computed(() => props.min);
+
+// 最大日期
+const maxDate = computed(() => props.max);
+
+// 监听外部modelValue变化
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (Array.isArray(newValue) && newValue.length > 0) {
+      dateRange.value = [...newValue];
+      // 同步到单独的日期选择器
+      if (newValue[0]) startDateRange.value = newValue[0];
+      if (newValue[1]) endDateRange.value = newValue[1];
+    } else if (typeof newValue === 'string' && newValue) {
+      // 处理字符串形式的日期范围，如 "2023-01-01 至 2023-01-31"
+      const dates = newValue.split(props.separator);
+      if (dates.length === 2) {
+        dateRange.value = [dates[0].trim(), dates[1].trim()];
+        startDateRange.value = dates[0].trim();
+        endDateRange.value = dates[1].trim();
+      } else {
+        dateRange.value = [];
+        startDateRange.value = null;
+        endDateRange.value = null;
+      }
+    } else {
+      dateRange.value = [];
+      startDateRange.value = null;
+      endDateRange.value = null;
+    }
+  },
+  { immediate: true }
+);
+
+
+// 开始日期变化处理
+const onStartDateChange = (value) => {
+  // 更新日期范围的第一个值
+  if (value) {
+    dateRange.value = [value, dateRange.value[1] || null];
+  } else {
+    // 如果开始日期被清除，清除整个范围或只清除开始日期
+    if (dateRange.value.length > 0) {
+      dateRange.value = [null, dateRange.value[1] || null];
+    }
+  }
+};
+
+// 结束日期变化处理
+const onEndDateChange = (value) => {
+  // 更新日期范围的第二个值
+  if (value) {
+    dateRange.value = [dateRange.value[0] || null, value];
+  } else {
+    // 如果结束日期被清除，只清除结束日期
+    if (dateRange.value.length > 1) {
+      dateRange.value = [dateRange.value[0] || null, null];
+    }
+  }
+};
+
+// 清除值
+const clearValue = () => {
+  dateRange.value = [];
+  startDateRange.value = null;
+  endDateRange.value = null;
+  emit('update:modelValue', []);
+  emit('change', []);
+  menu.value = false;
+};
+
+// 取消
+const cancel = () => {
+  // 恢复到原始值
+  if (Array.isArray(props.modelValue)) {
+    dateRange.value = [...props.modelValue];
+    if (props.modelValue[0]) startDateRange.value = props.modelValue[0];
+    if (props.modelValue[1]) endDateRange.value = props.modelValue[1];
+  } else {
+    dateRange.value = [];
+    startDateRange.value = null;
+    endDateRange.value = null;
+  }
+  menu.value = false;
+};
+
+// 确认
+const confirm = () => {
+  // 确保日期按顺序排列
+  let sortedRange = [...dateRange.value].filter(date => date !== null);
+  if (sortedRange.length === 2) {
+    const date1 = new Date(sortedRange[0]);
+    const date2 = new Date(sortedRange[1]);
+    if (date1 > date2) {
+      sortedRange = [sortedRange[1], sortedRange[0]];
+    }
+  } else if (sortedRange.length === 1) {
+    // 如果只有一个日期，复制为范围
+    sortedRange = [sortedRange[0], sortedRange[0]];
+  }
+  
+  emit('update:modelValue', sortedRange);
+  emit('change', sortedRange);
+  menu.value = false;
+};
+</script>
+
+<style scoped>
+.vtk-date-range-picker {
+  width: 100%;
+}
+
+.date-picker-container {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+}
+
+.date-picker-item {
+  flex: 1;
+  max-width: 50%;
+}
+
+.date-picker-item:first-child {
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+:deep(.v-picker) {
+  border-radius: 0;
+}
+
+:deep(.v-date-picker-month__day--adjacent) {
+  opacity: 0.5;
+}
+
+:deep(.v-date-picker-title) {
+  display: none;
+}
+</style>