@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismGroupSticky/PrismGroupSticky.vue

@@ -1,352 +1,352 @@
-<template>
-  <view class="prism-group-sticky-wrapper" :style="{ height: height }">
-    <scroll-view
-      class="prism-group-sticky"
-      scroll-y
-      :scroll-top="scrollTop"
-      :enhanced="true"
-      :show-scrollbar="false"
-      style="height: 100%"
-      @scroll="onScroll"
-    >
-      <slot></slot>
-    </scroll-view>
-
-    <!-- 右侧索引条 -->
-    <view
-      v-if="showIndexBar && indexList.length"
-      class="prism-index-bar"
-      @touchstart="onIndexTouchStart"
-      @touchmove.stop.prevent="onIndexTouchMove"
-      @touchend="onIndexTouchEnd"
-    >
-      <view
-        v-for="item in indexList"
-        :key="item"
-        class="index-item"
-        :class="{ active: currentIndex === item }"
-      >{{ item }}</view>
-    </view>
-
-    <!-- 气泡提示（移到索引条外部） -->
-    <view
-      v-if="showIndicator"
-      class="index-indicator"
-      :style="{ top: indicatorTop + 'px' }"
-    >{{ currentIndex }}</view>
-  </view>
-</template>
-
-<script setup>
-import { ref, nextTick, getCurrentInstance } from 'vue';
-
-const props = defineProps({
-  // 索引列表
-  indexList: {
-    type: Array,
-    default: () => []
-  },
-  // 是否显示索引条
-  showIndexBar: {
-    type: Boolean,
-    default: false
-  },
-  // 容器高度
-  height: {
-    type: String,
-    default: '100%'
-  }
-});
-
-const emit = defineEmits(['index-change']);
-const instance = getCurrentInstance();
-
-// 当前选中的索引
-const currentIndex = ref('');
-// 是否显示气泡
-const showIndicator = ref(false);
-// 气泡位置
-const indicatorTop = ref(0);
-// 滚动位置
-const scrollTop = ref(0);
-// 当前实际滚动位置
-let currentScrollTop = 0;
-// 索引条位置信息
-let indexBarRect = null;
-// 各分组位置缓存
-let groupPositions = {};
-
-// 根据触摸位置计算当前字母
-const getLetterByTouch = (touchY) => {
-  if (!indexBarRect || !props.indexList.length) return '';
-  const itemHeight = indexBarRect.height / props.indexList.length;
-  const relativeY = touchY - indexBarRect.top;
-  const index = Math.floor(relativeY / itemHeight);
-  if (index < 0) return props.indexList[0];
-  if (index >= props.indexList.length) return props.indexList[props.indexList.length - 1];
-  return props.indexList[index];
-};
-
-// 计算各分组位置
-const calculateGroupPositions = () => {
-  groupPositions = {};
-  props.indexList.forEach(letter => {
-    const el = document.getElementById(`group-${letter}`);
-    if (el) {
-      groupPositions[letter] = el.offsetTop;
-    }
-  });
-};
-
-// 滚动到指定字母
-const scrollToLetter = (letter) => {
-  // 确保位置已计算
-  if (!groupPositions[letter]) {
-    calculateGroupPositions();
-  }
-
-  const targetTop = groupPositions[letter];
-  if (targetTop !== undefined) {
-    // 需要设置一个不同的值才能触发滚动
-    scrollTop.value = targetTop + 0.1;
-    nextTick(() => {
-      scrollTop.value = targetTop;
-    });
-  }
-};
-
-// 滚动事件
-const onScroll = (e) => {
-  currentScrollTop = e.detail.scrollTop;
-};
-
-// 更新选中字母
-const updateLetter = (touchY) => {
-  // 更新气泡位置
-  indicatorTop.value = touchY;
-
-  const letter = getLetterByTouch(touchY);
-  if (letter) {
-    // 每次都更新 currentIndex，确保激活状态及时变化
-    currentIndex.value = letter;
-    scrollToLetter(letter);
-    emit('index-change', letter);
-  }
-};
-
-// 触摸开始
-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 letter = getLetterByTouch(touchY);
-        if (letter) {
-          currentIndex.value = letter;
-          scrollToLetter(letter);
-          emit('index-change', letter);
-        }
-      }
-    })
-    .exec();
-};
-
-// 触摸移动
-const onIndexTouchMove = (e) => {
-  const touchY = e.touches[0].clientY;
-  if (indexBarRect) {
-    updateLetter(touchY);
-  }
-};
-
-// 触摸结束
-const onIndexTouchEnd = () => {
-  showIndicator.value = false;
-};
-</script>
-
-<style lang="scss">
-.prism-group-sticky-wrapper {
-  position: relative;
-  height: 100%;
-}
-
-.prism-group-sticky {
-  height: 100%;
-
-  // H5 环境下让 scroll-view 内部容器支持 sticky
-  :deep(.uni-scroll-view-content) {
-    height: auto !important;
-  }
-
-  // 分组索引头（吸顶）
-  :deep(.group-index) {
-    position: -webkit-sticky;
-    position: sticky;
-    top: -1px;
-    z-index: 10;
-    margin: 0;
-    padding: 12rpx 24rpx;
-    padding-top: calc(12rpx + 1px);
-    font-size: 26rpx;
-    font-weight: 600;
-    color: var(--prism-primary-color, #3478F6);
-    background: var(--prism-bg-color-page, #F7F8FA);
-  }
-
-  .dark-mode & :deep(.group-index) {
-    background: var(--prism-bg-color-page, #121212);
-  }
-
-  // 分组内容项
-  :deep(.group-item) {
-    display: flex;
-    align-items: center;
-    min-height: 88rpx;
-    padding: 24rpx 32rpx;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
-    font-size: 28rpx;
-    color: var(--prism-text-primary, #1D2129);
-  }
-
-  .dark-mode & :deep(.group-item) {
-    background: var(--prism-bg-color-card, #242424);
-    border-bottom-color: var(--prism-border-color-light, #2D2D2D);
-  }
-
-  // 每个分组的最后一个 item（后面紧跟 group-index 或者是最后一个）
-  :deep(.group-item:has(+ .group-index)),
-  :deep(.group-item:last-child) {
-    border-radius: 0 0 16rpx 16rpx;
-    border-bottom: none;
-  }
-
-  :deep(.group-item:active) {
-    background: var(--prism-bg-color, #F2F2F2);
-  }
-
-  .dark-mode & :deep(.group-item:active) {
-    background: var(--prism-bg-color, #1A1A1A);
-  }
-
-  // 第一个 group-item（紧跟在 group-index 后面）- 顶部圆角
-  :deep(.group-index + .group-item) {
-    border-radius: 16rpx 16rpx 0 0;
-  }
-
-  // 分组只有一个 item 时 - 全圆角
-  :deep(.group-index + .group-item:has(+ .group-index)),
-  :deep(.group-index + .group-item:last-child) {
-    border-radius: 16rpx;
-  }
-
-  // 头像（可选）
-  .group-avatar {
-    width: 80rpx;
-    height: 80rpx;
-    border-radius: 50%;
-    margin-right: 24rpx;
-    background: var(--prism-primary-light, #EBF2FF);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 28rpx;
-    font-weight: 600;
-    color: var(--prism-primary-color, #3478F6);
-    flex-shrink: 0;
-
-    .dark-mode & {
-      background: rgba(52, 120, 246, 0.15);
-    }
-  }
-
-  // 信息区（可选）
-  .group-info {
-    flex: 1;
-    min-width: 0;
-
-    .group-title {
-      font-size: 30rpx;
-      font-weight: 500;
-      color: var(--prism-text-primary, #1D2129);
-      margin-bottom: 4rpx;
-
-      .dark-mode & {
-        color: var(--prism-text-primary, #E5E6EB);
-      }
-    }
-
-    .group-desc {
-      font-size: 24rpx;
-      color: var(--prism-text-secondary, #86909C);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-}
-
-// 右侧索引条
-.prism-index-bar {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12rpx 16rpx 12rpx 24rpx;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 20rpx 0 0 20rpx;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-
-  .index-item {
-    width: 36rpx;
-    height: 36rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 22rpx;
-    color: var(--prism-text-primary, #1D2129);
-    font-weight: 500;
-    background: transparent;
-
-    &:active,
-    &.active {
-      color: var(--prism-primary-color, #3478F6);
-      font-weight: 600;
-    }
-  }
-}
-
-// 气泡提示
-.index-indicator {
-  position: fixed;
-  right: 120rpx;
-  width: 100rpx;
-  height: 100rpx;
-  margin-top: -50rpx;
-  border-radius: 50%;
-  background: rgba(52, 120, 246, 0.8);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  color: #FFFFFF;
-  font-size: 48rpx;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 8rpx 32rpx rgba(52, 120, 246, 0.3);
-  z-index: 1000;
-}
-</style>
+<template>
+  <view class="prism-group-sticky-wrapper" :style="{ height: height }">
+    <scroll-view
+      class="prism-group-sticky"
+      scroll-y
+      :scroll-top="scrollTop"
+      :enhanced="true"
+      :show-scrollbar="false"
+      style="height: 100%"
+      @scroll="onScroll"
+    >
+      <slot></slot>
+    </scroll-view>
+
+    <!-- 右侧索引条 -->
+    <view
+      v-if="showIndexBar && indexList.length"
+      class="prism-index-bar"
+      @touchstart="onIndexTouchStart"
+      @touchmove.stop.prevent="onIndexTouchMove"
+      @touchend="onIndexTouchEnd"
+    >
+      <view
+        v-for="item in indexList"
+        :key="item"
+        class="index-item"
+        :class="{ active: currentIndex === item }"
+      >{{ item }}</view>
+    </view>
+
+    <!-- 气泡提示（移到索引条外部） -->
+    <view
+      v-if="showIndicator"
+      class="index-indicator"
+      :style="{ top: indicatorTop + 'px' }"
+    >{{ currentIndex }}</view>
+  </view>
+</template>
+
+<script setup>
+import { ref, nextTick, getCurrentInstance } from 'vue';
+
+const props = defineProps({
+  // 索引列表
+  indexList: {
+    type: Array,
+    default: () => []
+  },
+  // 是否显示索引条
+  showIndexBar: {
+    type: Boolean,
+    default: false
+  },
+  // 容器高度
+  height: {
+    type: String,
+    default: '100%'
+  }
+});
+
+const emit = defineEmits(['index-change']);
+const instance = getCurrentInstance();
+
+// 当前选中的索引
+const currentIndex = ref('');
+// 是否显示气泡
+const showIndicator = ref(false);
+// 气泡位置
+const indicatorTop = ref(0);
+// 滚动位置
+const scrollTop = ref(0);
+// 当前实际滚动位置
+let currentScrollTop = 0;
+// 索引条位置信息
+let indexBarRect = null;
+// 各分组位置缓存
+let groupPositions = {};
+
+// 根据触摸位置计算当前字母
+const getLetterByTouch = (touchY) => {
+  if (!indexBarRect || !props.indexList.length) return '';
+  const itemHeight = indexBarRect.height / props.indexList.length;
+  const relativeY = touchY - indexBarRect.top;
+  const index = Math.floor(relativeY / itemHeight);
+  if (index < 0) return props.indexList[0];
+  if (index >= props.indexList.length) return props.indexList[props.indexList.length - 1];
+  return props.indexList[index];
+};
+
+// 计算各分组位置
+const calculateGroupPositions = () => {
+  groupPositions = {};
+  props.indexList.forEach(letter => {
+    const el = document.getElementById(`group-${letter}`);
+    if (el) {
+      groupPositions[letter] = el.offsetTop;
+    }
+  });
+};
+
+// 滚动到指定字母
+const scrollToLetter = (letter) => {
+  // 确保位置已计算
+  if (!groupPositions[letter]) {
+    calculateGroupPositions();
+  }
+
+  const targetTop = groupPositions[letter];
+  if (targetTop !== undefined) {
+    // 需要设置一个不同的值才能触发滚动
+    scrollTop.value = targetTop + 0.1;
+    nextTick(() => {
+      scrollTop.value = targetTop;
+    });
+  }
+};
+
+// 滚动事件
+const onScroll = (e) => {
+  currentScrollTop = e.detail.scrollTop;
+};
+
+// 更新选中字母
+const updateLetter = (touchY) => {
+  // 更新气泡位置
+  indicatorTop.value = touchY;
+
+  const letter = getLetterByTouch(touchY);
+  if (letter) {
+    // 每次都更新 currentIndex，确保激活状态及时变化
+    currentIndex.value = letter;
+    scrollToLetter(letter);
+    emit('index-change', letter);
+  }
+};
+
+// 触摸开始
+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 letter = getLetterByTouch(touchY);
+        if (letter) {
+          currentIndex.value = letter;
+          scrollToLetter(letter);
+          emit('index-change', letter);
+        }
+      }
+    })
+    .exec();
+};
+
+// 触摸移动
+const onIndexTouchMove = (e) => {
+  const touchY = e.touches[0].clientY;
+  if (indexBarRect) {
+    updateLetter(touchY);
+  }
+};
+
+// 触摸结束
+const onIndexTouchEnd = () => {
+  showIndicator.value = false;
+};
+</script>
+
+<style lang="scss">
+.prism-group-sticky-wrapper {
+  position: relative;
+  height: 100%;
+}
+
+.prism-group-sticky {
+  height: 100%;
+
+  // H5 环境下让 scroll-view 内部容器支持 sticky
+  :deep(.uni-scroll-view-content) {
+    height: auto !important;
+  }
+
+  // 分组索引头（吸顶）
+  :deep(.group-index) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: -1px;
+    z-index: 10;
+    margin: 0;
+    padding: 12rpx 24rpx;
+    padding-top: calc(12rpx + 1px);
+    font-size: 26rpx;
+    font-weight: 600;
+    color: var(--prism-primary-color, #3478F6);
+    background: var(--prism-bg-color-page, #F7F8FA);
+  }
+
+  .dark-mode & :deep(.group-index) {
+    background: var(--prism-bg-color-page, #121212);
+  }
+
+  // 分组内容项
+  :deep(.group-item) {
+    display: flex;
+    align-items: center;
+    min-height: 88rpx;
+    padding: 24rpx 32rpx;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .dark-mode & :deep(.group-item) {
+    background: var(--prism-bg-color-card, #242424);
+    border-bottom-color: var(--prism-border-color-light, #2D2D2D);
+  }
+
+  // 每个分组的最后一个 item（后面紧跟 group-index 或者是最后一个）
+  :deep(.group-item:has(+ .group-index)),
+  :deep(.group-item:last-child) {
+    border-radius: 0 0 16rpx 16rpx;
+    border-bottom: none;
+  }
+
+  :deep(.group-item:active) {
+    background: var(--prism-bg-color, #F2F2F2);
+  }
+
+  .dark-mode & :deep(.group-item:active) {
+    background: var(--prism-bg-color, #1A1A1A);
+  }
+
+  // 第一个 group-item（紧跟在 group-index 后面）- 顶部圆角
+  :deep(.group-index + .group-item) {
+    border-radius: 16rpx 16rpx 0 0;
+  }
+
+  // 分组只有一个 item 时 - 全圆角
+  :deep(.group-index + .group-item:has(+ .group-index)),
+  :deep(.group-index + .group-item:last-child) {
+    border-radius: 16rpx;
+  }
+
+  // 头像（可选）
+  .group-avatar {
+    width: 80rpx;
+    height: 80rpx;
+    border-radius: 50%;
+    margin-right: 24rpx;
+    background: var(--prism-primary-light, #EBF2FF);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    font-weight: 600;
+    color: var(--prism-primary-color, #3478F6);
+    flex-shrink: 0;
+
+    .dark-mode & {
+      background: rgba(52, 120, 246, 0.15);
+    }
+  }
+
+  // 信息区（可选）
+  .group-info {
+    flex: 1;
+    min-width: 0;
+
+    .group-title {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: var(--prism-text-primary, #1D2129);
+      margin-bottom: 4rpx;
+
+      .dark-mode & {
+        color: var(--prism-text-primary, #E5E6EB);
+      }
+    }
+
+    .group-desc {
+      font-size: 24rpx;
+      color: var(--prism-text-secondary, #86909C);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+// 右侧索引条
+.prism-index-bar {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12rpx 16rpx 12rpx 24rpx;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 20rpx 0 0 20rpx;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+
+  .index-item {
+    width: 36rpx;
+    height: 36rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22rpx;
+    color: var(--prism-text-primary, #1D2129);
+    font-weight: 500;
+    background: transparent;
+
+    &:active,
+    &.active {
+      color: var(--prism-primary-color, #3478F6);
+      font-weight: 600;
+    }
+  }
+}
+
+// 气泡提示
+.index-indicator {
+  position: fixed;
+  right: 120rpx;
+  width: 100rpx;
+  height: 100rpx;
+  margin-top: -50rpx;
+  border-radius: 50%;
+  background: rgba(52, 120, 246, 0.8);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  color: #FFFFFF;
+  font-size: 48rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 32rpx rgba(52, 120, 246, 0.3);
+  z-index: 1000;
+}
+</style>