@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismIndexBar/PrismIndexBar.vue

@@ -1,243 +1,243 @@
-<template>
-  <view>
-    <!-- 右侧索引条 -->
-    <view
-      class="prism-index-bar"
-      :class="{ 'dark-mode': isDarkMode }"
-      @touchstart="onIndexTouchStart"
-      @touchmove.stop.prevent="onIndexTouchMove"
-      @touchend="onIndexTouchEnd"
-    >
-      <view
-        v-for="item in items"
-        :key="item.value"
-        class="prism-index-item"
-        :class="{ 'active': currentIndex === item.value }"
-        :style="{ background: item.background }"
-      >
-      </view>
-    </view>
-
-    <!-- 气泡提示 -->
-    <view
-      v-if="showIndicator && currentIndex"
-      class="prism-index-indicator"
-      :class="{ 'dark-mode': isDarkMode }"
-      :style="{
-        top: indicatorTop + 'px',
-        background: currentItemBackground
-      }"
-    >
-      {{ currentItemLabel }}
-      <!-- 箭头 -->
-      <view
-        class="prism-index-indicator-arrow"
-        :style="{ borderLeftColor: currentItemBackground }"
-      ></view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref, computed, getCurrentInstance } from 'vue';
-
-const props = defineProps({
-  // 索引项列表 [{ value: 'key', label: '显示文字', background: '#fff' 或 'linear-gradient(...)' }]
-  items: {
-    type: Array,
-    default: () => []
-  },
-  // 是否深色模式
-  isDarkMode: {
-    type: Boolean,
-    default: false
-  },
-  // 当前选中的索引值（支持 v-model）
-  modelValue: {
-    type: String,
-    default: ''
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-const instance = getCurrentInstance();
-
-// 当前选中的索引
-const currentIndex = ref(props.modelValue);
-// 是否显示气泡
-const showIndicator = ref(false);
-// 气泡位置
-const indicatorTop = ref(0);
-// 索引条位置信息
-let indexBarRect = null;
-
-// 当前选中项的标签
-const currentItemLabel = computed(() => {
-  const item = props.items.find(i => i.value === currentIndex.value);
-  return item ? item.label : '';
-});
-
-// 当前选中项的背景
-const currentItemBackground = computed(() => {
-  const item = props.items.find(i => i.value === currentIndex.value);
-  return item ? item.background : 'rgba(0, 0, 0, 0.85)';
-});
-
-// 根据触摸位置计算当前索引
-const getItemByTouch = (touchY) => {
-  if (!indexBarRect || !props.items.length) return null;
-  const itemHeight = indexBarRect.height / props.items.length;
-  const relativeY = touchY - indexBarRect.top;
-  const index = Math.floor(relativeY / itemHeight);
-  if (index < 0) return props.items[0];
-  if (index >= props.items.length) return props.items[props.items.length - 1];
-  return props.items[index];
-};
-
-// 更新选中索引
-const updateIndex = (touchY) => {
-  // 更新气泡位置
-  indicatorTop.value = touchY;
-
-  const item = getItemByTouch(touchY);
-  if (item && item.value !== currentIndex.value) {
-    currentIndex.value = item.value;
-    emit('update:modelValue', item.value);
-    emit('change', item.value);
-  }
-};
-
-// 触摸开始
-const onIndexTouchStart = (e) => {
-  showIndicator.value = true;
-  const touchY = e.touches[0].clientY;
-  indicatorTop.value = touchY;
-
-  // 获取索引条位置并更新索引
-  uni.createSelectorQuery()
-    .in(instance)
-    .select('.prism-index-bar')
-    .boundingClientRect((rect) => {
-      if (rect) {
-        indexBarRect = rect;
-        const item = getItemByTouch(touchY);
-        if (item) {
-          currentIndex.value = item.value;
-          emit('update:modelValue', item.value);
-          emit('change', item.value);
-        }
-      }
-    })
-    .exec();
-};
-
-// 触摸移动
-const onIndexTouchMove = (e) => {
-  const touchY = e.touches[0].clientY;
-  if (indexBarRect) {
-    updateIndex(touchY);
-  }
-};
-
-// 触摸结束
-const onIndexTouchEnd = () => {
-  showIndicator.value = false;
-};
-</script>
-
-<style lang="scss" scoped>
-/* 右侧索引条 */
-.prism-index-bar {
-  position: fixed;
-  right: 8rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12rpx;
-  z-index: 999;
-  padding: 16rpx 12rpx;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 24rpx;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.prism-index-item {
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 50%;
-  border: 3rpx solid rgba(255, 255, 255, 0.8);
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-  position: relative;
-  flex-shrink: 0;
-
-  &:active {
-    transform: scale(1.15);
-  }
-
-  &.active {
-    width: 48rpx;
-    height: 48rpx;
-    border-width: 4rpx;
-    border-color: #FFFFFF;
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
-  }
-}
-
-/* 气泡提示 */
-.prism-index-indicator {
-  position: fixed;
-  right: 80rpx;
-  padding: 12rpx 20rpx;
-  color: #FFFFFF;
-  border-radius: 8rpx;
-  font-size: 24rpx;
-  white-space: nowrap;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
-  animation: fadeIn 0.2s ease;
-  z-index: 1000;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-/* 气泡箭头 */
-.prism-index-indicator-arrow {
-  position: absolute;
-  right: -8rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 0;
-  height: 0;
-  border-left: 8rpx solid;
-  border-top: 8rpx solid transparent;
-  border-bottom: 8rpx solid transparent;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* 深色模式适配 */
-.dark-mode.prism-index-bar {
-  .prism-index-item {
-    border-color: rgba(0, 0, 0, 0.5);
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
-
-    &.active {
-      border-color: rgba(255, 255, 255, 0.9);
-      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.6);
-    }
-  }
-}
-</style>
+<template>
+  <view>
+    <!-- 右侧索引条 -->
+    <view
+      class="prism-index-bar"
+      :class="{ 'dark-mode': isDarkMode }"
+      @touchstart="onIndexTouchStart"
+      @touchmove.stop.prevent="onIndexTouchMove"
+      @touchend="onIndexTouchEnd"
+    >
+      <view
+        v-for="item in items"
+        :key="item.value"
+        class="prism-index-item"
+        :class="{ 'active': currentIndex === item.value }"
+        :style="{ background: item.background }"
+      >
+      </view>
+    </view>
+
+    <!-- 气泡提示 -->
+    <view
+      v-if="showIndicator && currentIndex"
+      class="prism-index-indicator"
+      :class="{ 'dark-mode': isDarkMode }"
+      :style="{
+        top: indicatorTop + 'px',
+        background: currentItemBackground
+      }"
+    >
+      {{ currentItemLabel }}
+      <!-- 箭头 -->
+      <view
+        class="prism-index-indicator-arrow"
+        :style="{ borderLeftColor: currentItemBackground }"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 索引项列表 [{ value: 'key', label: '显示文字', background: '#fff' 或 'linear-gradient(...)' }]
+  items: {
+    type: Array,
+    default: () => []
+  },
+  // 是否深色模式
+  isDarkMode: {
+    type: Boolean,
+    default: false
+  },
+  // 当前选中的索引值（支持 v-model）
+  modelValue: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const instance = getCurrentInstance();
+
+// 当前选中的索引
+const currentIndex = ref(props.modelValue);
+// 是否显示气泡
+const showIndicator = ref(false);
+// 气泡位置
+const indicatorTop = ref(0);
+// 索引条位置信息
+let indexBarRect = null;
+
+// 当前选中项的标签
+const currentItemLabel = computed(() => {
+  const item = props.items.find(i => i.value === currentIndex.value);
+  return item ? item.label : '';
+});
+
+// 当前选中项的背景
+const currentItemBackground = computed(() => {
+  const item = props.items.find(i => i.value === currentIndex.value);
+  return item ? item.background : 'rgba(0, 0, 0, 0.85)';
+});
+
+// 根据触摸位置计算当前索引
+const getItemByTouch = (touchY) => {
+  if (!indexBarRect || !props.items.length) return null;
+  const itemHeight = indexBarRect.height / props.items.length;
+  const relativeY = touchY - indexBarRect.top;
+  const index = Math.floor(relativeY / itemHeight);
+  if (index < 0) return props.items[0];
+  if (index >= props.items.length) return props.items[props.items.length - 1];
+  return props.items[index];
+};
+
+// 更新选中索引
+const updateIndex = (touchY) => {
+  // 更新气泡位置
+  indicatorTop.value = touchY;
+
+  const item = getItemByTouch(touchY);
+  if (item && item.value !== currentIndex.value) {
+    currentIndex.value = item.value;
+    emit('update:modelValue', item.value);
+    emit('change', item.value);
+  }
+};
+
+// 触摸开始
+const onIndexTouchStart = (e) => {
+  showIndicator.value = true;
+  const touchY = e.touches[0].clientY;
+  indicatorTop.value = touchY;
+
+  // 获取索引条位置并更新索引
+  uni.createSelectorQuery()
+    .in(instance)
+    .select('.prism-index-bar')
+    .boundingClientRect((rect) => {
+      if (rect) {
+        indexBarRect = rect;
+        const item = getItemByTouch(touchY);
+        if (item) {
+          currentIndex.value = item.value;
+          emit('update:modelValue', item.value);
+          emit('change', item.value);
+        }
+      }
+    })
+    .exec();
+};
+
+// 触摸移动
+const onIndexTouchMove = (e) => {
+  const touchY = e.touches[0].clientY;
+  if (indexBarRect) {
+    updateIndex(touchY);
+  }
+};
+
+// 触摸结束
+const onIndexTouchEnd = () => {
+  showIndicator.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+/* 右侧索引条 */
+.prism-index-bar {
+  position: fixed;
+  right: 8rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  z-index: 999;
+  padding: 16rpx 12rpx;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 24rpx;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.prism-index-item {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  position: relative;
+  flex-shrink: 0;
+
+  &:active {
+    transform: scale(1.15);
+  }
+
+  &.active {
+    width: 48rpx;
+    height: 48rpx;
+    border-width: 4rpx;
+    border-color: #FFFFFF;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* 气泡提示 */
+.prism-index-indicator {
+  position: fixed;
+  right: 80rpx;
+  padding: 12rpx 20rpx;
+  color: #FFFFFF;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  white-space: nowrap;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
+  animation: fadeIn 0.2s ease;
+  z-index: 1000;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* 气泡箭头 */
+.prism-index-indicator-arrow {
+  position: absolute;
+  right: -8rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 8rpx solid;
+  border-top: 8rpx solid transparent;
+  border-bottom: 8rpx solid transparent;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 深色模式适配 */
+.dark-mode.prism-index-bar {
+  .prism-index-item {
+    border-color: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
+
+    &.active {
+      border-color: rgba(255, 255, 255, 0.9);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.6);
+    }
+  }
+}
+</style>