rrj-astra-ui 1.0.2

package/components/AuiPicker.vue

@@ -0,0 +1,619 @@
+<template>
+  <div class="aui-picker" :class="{'aui-picker--disabled': disabled}">
+    <div class="aui-picker__header" @click="togglePicker">
+      <span class="aui-picker__title">{{ title || '请选择' }}</span>
+      <span 
+        class="aui-picker__value" 
+        :class="{ 'aui-picker__value--selected': hasSelectedValue }"
+      >
+        {{ displayValue || (title || '请选择') }}
+      </span>
+      <i class="aui-picker__icon" :class="{'aui-picker__icon--up': isOpen}"></i>
+    </div>
+    <transition name="aui-picker-transition">
+      <div class="aui-picker__content" v-show="isOpen">
+        <div class="aui-picker__mask" @click="closePicker"></div>
+        <div class="aui-picker__panel">
+          <div class="aui-picker__toolbar">
+            <view class="aui-picker__cancel" @click="closePicker">取消</view>
+            <view class="aui-picker__confirm" @click="confirmSelection">确定</view>
+          </div>
+          <div class="aui-picker__columns">
+            <div class="aui-picker__column" v-for="(column, index) in columns" :key="index">
+              <div 
+                class="aui-picker__wheel" 
+                ref="wheels[index]"
+                @touchstart="onTouchStart(index, $event)"
+                @touchmove="onTouchMove(index, $event, true)"
+                @touchend="onTouchEnd(index, $event)"
+                @touchcancel="onTouchEnd(index, $event)"
+                @mousedown="onMouseDown(index, $event)"
+                @mousemove="onMouseMove(index, $event, false)"
+                @mouseup="onMouseUp(index, $event)"
+                @mouseleave="onMouseUp(index, $event)"
+              >
+                <div class="aui-picker__indicator"></div>
+                <div class="aui-picker__frame" :style="{ transform: wheelTransforms[index] }">
+                  <!-- 顶部虚拟空间 -->
+                  <div class="aui-picker__dummy-item" :style="{ height: dummyHeight + 'px' }"></div>
+                  
+                  <!-- 实际选项 -->
+                  <div class="aui-picker__item" 
+                       v-for="(item, itemIndex) in column.values" 
+                       :key="itemIndex"
+                       :class="{'aui-picker__item--selected': isSelected(index, itemIndex)}"
+                       @click="selectItem(index, itemIndex)">
+                    {{ item.label || item }}
+                  </div>
+                  
+                  <!-- 底部虚拟空间 -->
+                  <div class="aui-picker__dummy-item" :style="{ height: dummyHeight + 'px' }"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick, watch } from 'vue';
+
+const _name = "AuiPicker";
+defineOptions({ name: _name });
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  value: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: '请选择'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emits = defineEmits(['update:value', 'change', 'confirm', 'cancel']);
+
+const isOpen = ref(false);
+const wheels = ref([]);
+const selectedValues = ref([...props.value]);
+const wheelTransforms = ref([]);
+const startY = ref(0);
+const currentY = ref(0);
+const isDragging = ref(false);
+const activeWheelIndex = ref(-1);
+const itemHeight = 44;
+const dummyHeight = itemHeight * 2;
+
+// 检测鸿蒙系统
+const isHarmonyOS = () => {
+  const ua = navigator.userAgent.toLowerCase();
+  return ua.includes('harmonyos') || ua.includes('huawei') || ua.includes('harmony');
+};
+
+// 判断是否有选中值
+const hasSelectedValue = computed(() => {
+  return selectedValues.value.length > 0 && 
+         selectedValues.value.every(val => val !== undefined && val !== null);
+});
+
+// 计算显示值
+const displayValue = computed(() => {
+  if (!selectedValues.value.length) return '';
+  
+  return selectedValues.value.map((val, index) => {
+    const column = props.columns[index];
+    const item = column.values.find(item => item.value === val) || column.values[0];
+    return item.label || item;
+  }).join(' / ');
+});
+
+// 检查选项是否被选中
+const isSelected = (columnIndex, itemIndex) => {
+  const column = props.columns[columnIndex];
+  const selectedVal = selectedValues.value[columnIndex];
+  return column.values[itemIndex].value === selectedVal;
+};
+
+// 切换选择器显示状态
+const togglePicker = () => {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    nextTick(() => {
+      updateWheelPositions();
+    });
+  }
+};
+
+// 关闭选择器
+const closePicker = () => {
+  isOpen.value = false;
+  emits('cancel');
+};
+
+// 确认选择
+const confirmSelection = () => {
+  emits('update:value', [...selectedValues.value]);
+  emits('confirm', [...selectedValues.value]);
+  isOpen.value = false;
+};
+
+// 选择项目
+const selectItem = (columnIndex, itemIndex) => {
+  const column = props.columns[columnIndex];
+  selectedValues.value[columnIndex] = column.values[itemIndex].value;
+  emits('change', [...selectedValues.value]);
+  updateWheelPosition(columnIndex);
+};
+
+// 更新滚轮位置
+const updateWheelPositions = () => {
+  wheels.value.forEach((wheel, index) => {
+    updateWheelPosition(index);
+  });
+};
+
+// 更新单个滚轮位置
+const updateWheelPosition = (columnIndex) => {
+  const column = props.columns[columnIndex];
+  const selectedVal = selectedValues.value[columnIndex];
+  const selectedIndex = column.values.findIndex(item => item.value === selectedVal);
+  
+  if (selectedIndex !== -1) {
+    const indicatorTop = 83;
+    const offset = selectedIndex * itemHeight + dummyHeight - indicatorTop;
+    wheelTransforms.value[columnIndex] = `translate3d(0, ${-offset}px, 0)`;
+  }
+};
+
+// 获取指示器位置
+const getIndicatorPosition = (wheel) => {
+  const indicator = wheel.querySelector('.aui-picker__indicator');
+  const rect = indicator.getBoundingClientRect();
+  return {
+    top: rect.top,
+    height: rect.height,
+    center: rect.top + rect.height / 2
+  };
+};
+
+// 触摸/鼠标事件处理
+const onTouchStart = (index, event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  
+  if (isHarmonyOS()) {
+    event.stopImmediatePropagation();
+  }
+  
+  startDrag(index, event.touches[0].clientY, true);
+};
+
+const onTouchMove = (index, event, isTouch) => {
+  if (index !== activeWheelIndex.value || !isDragging.value) return;
+  
+  if (isTouch && isHarmonyOS()) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    
+    const touch = event.touches[0];
+    drag(index, touch.clientY);
+    return;
+  }
+  
+  event.preventDefault();
+  event.stopPropagation();
+  drag(index, isTouch ? event.touches[0].clientY : event.clientY);
+};
+
+const onTouchEnd = (index, event) => {
+  if (index !== activeWheelIndex.value || !isDragging.value) return;
+  event.stopPropagation();
+  endDrag(index);
+};
+
+const onMouseDown = (index, event) => {
+  if (event.button !== 0) return;
+  event.preventDefault();
+  event.stopPropagation();
+  startDrag(index, event.clientY, false);
+};
+
+const onMouseMove = (index, event, isTouch) => {
+  if (index !== activeWheelIndex.value || !isDragging.value || !isTouch) return;
+  event.preventDefault();
+  event.stopPropagation();
+  drag(index, event.clientY);
+};
+
+const onMouseUp = (index, event) => {
+  if (index !== activeWheelIndex.value || !isDragging.value) return;
+  event.preventDefault();
+  event.stopPropagation();
+  endDrag(index);
+};
+
+// 开始拖拽
+const startDrag = (index, y, isTouch) => {
+  if (props.disabled) return;
+  
+  activeWheelIndex.value = index;
+  startY.value = y;
+  currentY.value = 0;
+  isDragging.value = true;
+  
+  const wheel = wheels.value[index];
+  const frame = wheel.querySelector('.aui-picker__frame');
+  
+  const transform = window.getComputedStyle(frame).transform;
+  const matrix = new DOMMatrix(transform);
+  const startOffset = matrix.m42;
+  
+  wheel._startOffset = startOffset;
+  wheel._startTime = Date.now();
+  wheel._lastY = y;
+  wheel._lastTime = Date.now();
+  wheel._velocity = 0;
+  wheel._isDragging = true;
+  wheel._isTouch = isTouch;
+  
+  wheel._indicatorPos = getIndicatorPosition(wheel);
+  
+  frame.style.transition = 'none';
+  
+  document.body.style.overflow = 'hidden';
+  
+  if (isTouch && isHarmonyOS()) {
+    wheel._rafId = requestAnimationFrame(() => {
+      if (wheel._isDragging) {
+        // 鸿蒙系统特殊处理
+      }
+    });
+  }
+};
+
+// 拖拽过程
+const drag = (index, y) => {
+  if (!isDragging.value) return;
+  
+  const deltaY = y - startY.value;
+  currentY.value = deltaY;
+  
+  const wheel = wheels.value[index];
+  const startOffset = wheel._startOffset;
+  let newOffset = startOffset + deltaY;
+  
+  const column = props.columns[index];
+  const totalItems = column.values.length;
+  const maxOffset = 0;
+  const minOffset = -((totalItems - 1) * itemHeight + dummyHeight * 2 - 83);
+  
+  newOffset = Math.min(Math.max(newOffset, minOffset), maxOffset);
+  
+  const frame = wheel.querySelector('.aui-picker__frame');
+  wheelTransforms.value[index] = `translate3d(0, ${newOffset}px, 0)`;
+  
+  const now = Date.now();
+  const timeDelta = now - wheel._lastTime;
+  if (timeDelta > 0) {
+    wheel._velocity = (y - wheel._lastY) / timeDelta;
+    wheel._lastY = y;
+    wheel._lastTime = now;
+  }
+};
+
+// 结束拖拽
+const endDrag = (index) => {
+  if (!isDragging.value) return;
+  
+  isDragging.value = false;
+  activeWheelIndex.value = -1;
+  
+  const wheel = wheels.value[index];
+  wheel._isDragging = false;
+  
+  if (wheel._rafId) {
+    cancelAnimationFrame(wheel._rafId);
+    wheel._rafId = null;
+  }
+  
+  document.body.style.overflow = '';
+  
+  const frame = wheel.querySelector('.aui-picker__frame');
+  const column = props.columns[index];
+  
+  frame.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)';
+  
+  const transform = window.getComputedStyle(frame).transform;
+  const matrix = new DOMMatrix(transform);
+  let currentOffset = matrix.m42;
+  
+  const totalItems = column.values.length;
+  const maxOffset = 0;
+  const minOffset = -((totalItems - 1) * itemHeight + dummyHeight * 2 - 83);
+  
+  const velocity = wheel._velocity;
+  const inertiaDistance = Math.sign(velocity) * Math.min(Math.abs(velocity) * 80, 300);
+  let targetOffset = currentOffset + inertiaDistance;
+  
+  targetOffset = Math.min(Math.max(targetOffset, minOffset), maxOffset);
+  
+  const indicator = wheel.querySelector('.aui-picker__indicator');
+  const rect = indicator.getBoundingClientRect();
+  const wheelRect = wheel.getBoundingClientRect();
+  const indicatorRelativeTop = rect.top - wheelRect.top;
+  const indicatorCenter = indicatorRelativeTop + rect.height / 2;
+  
+  const contentOffset = Math.abs(targetOffset);
+  const adjustedOffset = contentOffset - dummyHeight + indicatorRelativeTop;
+  const closestIndex = Math.round(adjustedOffset / itemHeight);
+  
+  const clampedIndex = Math.max(0, Math.min(closestIndex, totalItems - 1));
+  
+  const finalOffset = -(clampedIndex * itemHeight + dummyHeight - indicatorRelativeTop);
+  
+  wheelTransforms.value[index] = `translate3d(0, ${finalOffset}px, 0)`;
+  
+  selectedValues.value[index] = column.values[clampedIndex].value;
+  emits('change', [...selectedValues.value]);
+};
+
+// 监听props.value变化
+watch(() => props.value, (newVal) => {
+  selectedValues.value = [...newVal];
+  if (isOpen.value) {
+    nextTick(() => {
+      updateWheelPositions();
+    });
+  }
+});
+
+// 初始化
+onMounted(() => {
+  wheels.value = Array.from(document.querySelectorAll('.aui-picker__wheel'));
+  wheelTransforms.value = wheels.value.map(() => 'translate3d(0, 0, 0)');
+  
+  nextTick(() => {
+    updateWheelPositions();
+    
+    wheels.value.forEach((wheel, index) => {
+      const column = props.columns[index];
+      const selectedVal = selectedValues.value[index];
+      const selectedIndex = column.values.findIndex(item => item.value === selectedVal);
+      
+      if (selectedIndex !== -1) {
+        const frame = wheel.querySelector('.aui-picker__frame');
+        const transform = window.getComputedStyle(frame).transform;
+        const matrix = new DOMMatrix(transform);
+        const currentOffset = matrix.m42;
+        const indicatorTop = 83;
+        const expectedOffset = -(selectedIndex * itemHeight + dummyHeight - indicatorTop);
+        
+        if (Math.abs(currentOffset - expectedOffset) > 1) {
+          wheelTransforms.value[index] = `translate3d(0, ${expectedOffset}px, 0)`;
+        }
+      }
+    });
+    
+    if (isHarmonyOS()) {
+      console.log('初始化鸿蒙系统兼容性优化');
+    }
+  });
+});
+</script>
+
+<style scoped>
+.aui-picker {
+  position: relative;
+  width: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+.aui-picker--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.aui-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 15px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.aui-picker__title {
+  font-size: 14px;
+  color: #333;
+}
+
+.aui-picker__value {
+  flex: 1;
+  margin-left: 10px;
+  font-size: 14px;
+  color: #666; /* 默认灰色 */
+  text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 选中后的文本颜色 */
+.aui-picker__value--selected {
+  color: #333; /* 选中后黑色 */
+}
+
+.aui-picker__icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 8px;
+  border-right: 1px solid #999;
+  border-bottom: 1px solid #999;
+  transform: rotate(45deg);
+  transition: transform 0.3s ease;
+}
+
+.aui-picker__icon--up {
+  transform: rotate(225deg);
+}
+
+.aui-picker__content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.aui-picker__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.aui-picker__panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  transform: translateY(0);
+  transition: transform 0.3s ease;
+}
+
+.aui-picker__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 44px;
+  padding: 0 15px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.aui-picker__cancel,
+.aui-picker__confirm {
+  font-size: 16px;
+  color: #007aff;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+.aui-picker__columns {
+  display: flex;
+  height: 300px;
+  overflow: hidden;
+}
+
+.aui-picker__column {
+  flex: 1;
+  position: relative;
+}
+
+.aui-picker__wheel {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+  touch-action: pan-y;
+}
+
+.aui-picker__indicator {
+  position: absolute;
+  top: 83px;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+  pointer-events: none;
+}
+
+.aui-picker__frame {
+  position: relative;
+  transition: transform 0.1s ease-out;
+  will-change: transform;
+  transform: translateZ(0);
+}
+
+.aui-picker__item {
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  font-size: 18px;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aui-picker__item--selected {
+  font-weight: 500;
+  color: #000;
+}
+
+.aui-picker__dummy-item {
+  height: 88px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.aui-picker-transition-enter-active,
+.aui-picker-transition-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.aui-picker-transition-enter-from,
+.aui-picker-transition-leave-to {
+  opacity: 0;
+}
+
+/* 针对鸿蒙系统的特殊样式 */
+@media screen and (max-device-width: 768px) and (hover: none) {
+  .aui-picker__wheel {
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    overflow: hidden !important;
+    position: relative;
+  }
+  
+  .aui-picker__frame {
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+  }
+  
+  .aui-picker__columns {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+  
+  .aui-picker__panel {
+    transform: translate3d(0, 0, 0);
+  }
+}
+</style>

package/components/AuiPopup.vue

@@ -0,0 +1,57 @@
+<template>
+    <view class="aui-popup" v-show="visible" :style="`z-index:${zIndex}`">
+        <view class="aui-popup-mask">
+            <view class="aui-popup-content">
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+
+const _name="AuiPopup";
+defineOptions({name:_name})
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false 
+    },
+    zIndex: {
+        type: Number,
+        default: 999
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.aui-popup{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.aui-popup-mask{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5); 
+}
+.aui-popup-content{
+    background-color: #FFFFFF;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    padding: 16px;
+    position: absolute;
+    bottom:0px;
+    left: 0px;
+    width: 100% ;
+    box-sizing: border-box;
+    max-height: 100%;
+    overflow-y: auto;
+}
+</style>