muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-index-list/mu-index-list.vue

@@ -0,0 +1,381 @@
+<template>
+	<view class="mu-index-list">
+		<!-- 滚动容器 -->
+		<scroll-view
+			scroll-y
+			class="mu-index-list__scroll"
+			:scroll-into-view="scrollIntoId"
+			:style="{ height: height }"
+		>
+			<view
+				v-for="(group, gi) in groups"
+				:key="gi"
+				:id="'mu-idx-' + getGroupId(group.index)"
+				class="mu-index-list__group"
+			>
+				<!-- 粘性标头 -->
+				<view class="mu-index-list__header" :class="[sticky && 'mu-index-list__header--sticky']">
+					<slot name="header" :group="group">
+						<text class="mu-index-list__header-text">{{ group.index }}</text>
+					</slot>
+				</view>
+
+				<!-- 分组项列表 -->
+				<view
+					v-for="(item, ii) in group.items"
+					:key="ii"
+					class="mu-index-list__item mu-touchable-flat"
+					@tap="handleClick(item)"
+				>
+					<slot name="item" :item="item" :index="ii">
+						<!-- 默认通讯录 / 城市卡片视图 -->
+						<view class="mu-index-list__card">
+							<!-- 头像 Avatar -->
+							<view v-if="item.avatar" class="mu-index-list__avatar-box">
+								<image class="mu-index-list__avatar" :src="item.avatar" mode="aspectFill" />
+							</view>
+							<view v-else-if="item.name || item[labelKey]" class="mu-index-list__avatar-text">
+								<text class="mu-index-list__avatar-char">{{ getFirstChar(item[labelKey] || item.name) }}</text>
+							</view>
+
+							<!-- 详细文案 -->
+							<view class="mu-index-list__info">
+								<text class="mu-index-list__name">{{ item[labelKey] || item.name || item }}</text>
+								<text v-if="item.desc || item.phone" class="mu-index-list__desc">{{ item.desc || item.phone }}</text>
+							</view>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</scroll-view>
+
+		<!-- 右侧悬浮索引字母栏 Sidebar -->
+		<view
+			class="mu-index-list__sidebar"
+			@touchstart="onSidebarTouch"
+			@touchmove.prevent="onSidebarTouchMove"
+			@touchend="onSidebarTouchEnd"
+		>
+			<view
+				v-for="(group, gi) in groups"
+				:key="gi"
+				class="mu-index-list__sidebar-item"
+				:class="[activeChar === group.index && 'mu-index-list__sidebar-item--active']"
+				@tap="scrollToIndex(group.index)"
+			>
+				<text class="mu-index-list__sidebar-text">{{ group.index }}</text>
+			</view>
+		</view>
+
+		<!-- 触控拖拽时的中央大水滴 / 气泡提示器 -->
+		<view v-if="showTip && touchingChar" class="mu-index-list__tip">
+			<text class="mu-index-list__tip-text">{{ touchingChar }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, getCurrentInstance } from 'vue'
+
+const props = defineProps({
+	data: { type: Array, default: () => [] },
+	height: { type: String, default: '100vh' },
+	sticky: { type: Boolean, default: true },
+	indexKey: { type: String, default: 'index' },
+	labelKey: { type: String, default: 'label' },
+	showTip: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['click', 'select', 'change'])
+
+const instance = getCurrentInstance()
+const activeChar = ref('')
+const touchingChar = ref('')
+const scrollIntoId = ref('')
+let tipTimer = null
+
+function getGroupId(idx) {
+	return String(idx).replace(/[^a-zA-Z0-9]/g, '_')
+}
+
+function getFirstChar(str) {
+	if (!str) return '#'
+	return String(str).charAt(0).toUpperCase()
+}
+
+const groups = computed(() => {
+	if (props.data.length && Array.isArray((props.data[0] && props.data[0].items))) {
+		return props.data.map(g => ({ index: (g[props.indexKey] !== undefined ? g[props.indexKey] : '#'), items: g.items }))
+	}
+	// 扁平数据：按首字母自动分组
+	const map = {}
+	const order = []
+	for (const item of props.data) {
+		const label = item[props.labelKey] || item.name || String(item)
+		const idx = item[props.indexKey] || getFirstChar(label)
+		if (!map[idx]) {
+			map[idx] = []
+			order.push(idx)
+		}
+		map[idx].push(item)
+	}
+	return order.sort().map(idx => ({ index: idx, items: map[idx] }))
+})
+
+function handleClick(item) {
+	emit('click', item)
+	emit('select', item)
+}
+
+function scrollToIndex(idx) {
+	activeChar.value = idx
+	touchingChar.value = idx
+	scrollIntoId.value = 'mu-idx-' + getGroupId(idx)
+
+	emit('change', idx)
+
+	if (tipTimer) clearTimeout(tipTimer)
+	tipTimer = setTimeout(() => {
+		touchingChar.value = ''
+	}, 1200)
+}
+
+function locateTouch(e) {
+	if (!e || !e.touches || !e.touches[0]) return
+	const touch = e.touches[0]
+	if (!groups.value.length) return
+
+	const query = uni.createSelectorQuery().in((instance && instance.proxy))
+	query.select('.mu-index-list__sidebar').boundingClientRect((rect) => {
+		if (!rect || !rect.height) return
+		const itemH = rect.height / groups.value.length
+		let idx = Math.floor((touch.clientY - rect.top) / itemH)
+		idx = Math.max(0, Math.min(groups.value.length - 1, idx))
+		scrollToIndex(groups.value[idx].index)
+	}).exec()
+}
+
+function onSidebarTouch(e) {
+	locateTouch(e)
+}
+
+function onSidebarTouchMove(e) {
+	locateTouch(e)
+}
+
+function onSidebarTouchEnd() {
+	if (tipTimer) clearTimeout(tipTimer)
+	tipTimer = setTimeout(() => {
+		touchingChar.value = ''
+	}, 800)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-index-list {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+
+	&__scroll {
+		width: 100%;
+	}
+
+	&__group {
+		width: 100%;
+	}
+
+	&__header {
+		padding: 12rpx 32rpx;
+		background: rgba(248, 250, 252, 0.95);
+		backdrop-filter: blur(8px);
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
+
+		&--sticky {
+			position: sticky;
+			top: 0;
+			z-index: 5;
+		}
+
+		&-text {
+			font-size: 24rpx;
+			font-weight: 800;
+			color: #171717;
+			letter-spacing: 1rpx;
+		}
+	}
+
+	&__item {
+		background: #ffffff;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:last-child {
+			border-bottom: none;
+		}
+
+		&:active {
+			background: rgba(99, 102, 241, 0.04);
+		}
+	}
+
+	&__card {
+		display: flex;
+		align-items: center;
+		padding: 24rpx 32rpx;
+	}
+
+	&__avatar-box {
+		width: 72rpx;
+		height: 72rpx;
+		border-radius: 50%;
+		overflow: hidden;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+	}
+
+	&__avatar {
+		width: 100%;
+		height: 100%;
+	}
+
+	&__avatar-text {
+		width: 72rpx;
+		height: 72rpx;
+		border-radius: 50%;
+		background: #171717;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+		box-shadow: 0 4rpx 12rpx rgba(99, 102, 241, 0.25);
+	}
+
+	&__avatar-char {
+		font-size: 28rpx;
+		font-weight: 800;
+		color: #ffffff;
+	}
+
+	&__info {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__name {
+		font-size: 28rpx;
+		font-weight: 700;
+		color: $mu-text-primary;
+		line-height: 1.3;
+	}
+
+	&__desc {
+		font-size: 22rpx;
+		color: #94A3B8;
+		margin-top: 6rpx;
+	}
+
+	&__sidebar {
+		position: absolute;
+		right: 12rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 12rpx 8rpx;
+		background: rgba(255, 255, 255, 0.85);
+		backdrop-filter: blur(12px);
+		border-radius: 30rpx;
+		border: 1rpx solid rgba(226, 232, 240, 0.8);
+		box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.08);
+		z-index: 20;
+	}
+
+	&__sidebar-item {
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 2rpx 0;
+		transition: all 0.2s ease;
+
+		&--active {
+			background: #171717;
+			box-shadow: 0 4rpx 10rpx rgba(99, 102, 241, 0.35);
+
+			.mu-index-list__sidebar-text {
+				color: #ffffff;
+				font-weight: 800;
+			}
+		}
+	}
+
+	&__sidebar-text {
+		font-size: 18rpx;
+		color: #64748B;
+		font-weight: 600;
+	}
+
+	&__tip {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 120rpx;
+		height: 120rpx;
+		border-radius: 32rpx;
+		background: #171717;
+		box-shadow: 0 12rpx 36rpx rgba(99, 102, 241, 0.4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 100;
+		animation: mu-tip-bounce 0.2s ease;
+
+		&-text {
+			font-size: 48rpx;
+			color: #ffffff;
+			font-weight: 900;
+		}
+	}
+}
+
+@keyframes mu-tip-bounce {
+	from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
+	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-index-list {
+		&__header { background: rgba(30, 41, 59, 0.95); border-color: rgba(255, 255, 255, 0.08); &-text { color: #FFFFFF; } }
+		&__item { background: $mu-dark-bg-base; border-color: rgba(255, 255, 255, 0.06); }
+		&__name { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__sidebar { background: rgba(30, 41, 59, 0.85); border-color: rgba(255, 255, 255, 0.1); }
+		&__sidebar-text { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-index-list {
+		&__header { background: rgba(30, 41, 59, 0.95); border-color: rgba(255, 255, 255, 0.08); &-text { color: #FFFFFF; } }
+		&__item { background: $mu-dark-bg-base; border-color: rgba(255, 255, 255, 0.06); }
+		&__name { color: $mu-dark-text-primary; }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__sidebar { background: rgba(30, 41, 59, 0.85); border-color: rgba(255, 255, 255, 0.1); }
+		&__sidebar-text { color: $mu-dark-text-secondary; }
+	}
+}
+</style>