v-uni-app-ui 1.0.0 → 1.0.2

package/components/model/native/v-menu/v-menu.vue

@@ -0,0 +1,222 @@
+<template>
+	<view
+		ref="rootRef"
+		class="v-menu-container"
+		:class="[`v-menu-container--position--${menuPosition}`, { 'v-slide-x': slideAxis === 'x' }, { 'v-slide-y': slideAxis === 'y' }]"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+		@touchend="onTouchEnd"
+		@mousedown="onMouseDown"
+		@mousemove="onMouseMove"
+		@mouseup="onMouseUp"
+	>
+		<!-- 菜单栏 -->
+		<view class="v-menu">
+			<view v-for="item in menuItems" :key="item.id" :class="['menu-item', { active: activeMenuId === item.id }]" @click="handleMenuItemClick(item.id, item)">
+				{{ item.title }}
+			</view>
+		</view>
+
+		<!-- 内容区 -->
+		<view class="menu-content">
+			<template v-for="(item, index) in menuItems" :key="item.id">
+				<view v-show="activeMenuId === item.id">
+					<slot :name="`content-${index}`" :item="item">
+					</slot>
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, inject, computed, getCurrentInstance, nextTick,provide } from 'vue';
+
+
+interface MenuItem {
+	id: string;
+	title: string;
+}
+
+/* ========= props ========= */
+const props = defineProps({
+	menuPosition: {
+		type: String,
+		default: 'left',
+		validator: (v: string) => ['left', 'right'].includes(v)
+	},
+	menuItems: {
+		type: Array as () => MenuItem[],
+		required: true
+	},
+	value: {
+		type: String,
+		default: ''
+	},
+	isSlide: {
+		// 是否启用滑动
+		type: Boolean,
+		default: false
+	},
+	slideAxis: {
+		// 滑动方向
+		type: String as () => 'x' | 'y',
+		default: 'x'
+	}
+});
+
+const emit = defineEmits(['update:value', 'select']);
+
+const config = inject<any>('config');
+const activeMenuId = ref(props.value || props.menuItems[0]?.id || '');
+
+/* ========= 滑动核心 ========= */
+const rootRef = ref<HTMLElement>();
+const startX = ref(0);
+const startY = ref(0);
+const isTracking = ref(false);
+const SLIDE_THRESHOLD = 50;
+
+const currentIndex = computed(() => props.menuItems.findIndex((item) => item.id === activeMenuId.value));
+
+const next = () => {
+	const len = props.menuItems.length;
+	const idx = (currentIndex.value + 1 + len) % len;
+	handleMenuItemClick(props.menuItems[idx].id, props.menuItems[idx]);
+};
+
+const prev = () => {
+	const len = props.menuItems.length;
+	const idx = (currentIndex.value - 1 + len) % len;
+	handleMenuItemClick(props.menuItems[idx].id, props.menuItems[idx]);
+};
+
+const handleMenuItemClick = (id: string, row: MenuItem) => {
+	activeMenuId.value = id;
+	emit('update:value', id);
+	emit('select', id, row);
+};
+
+/* 统一手势处理 */
+const onStart = (x: number, y: number) => {
+	if (!props.isSlide) return;
+	startX.value = x;
+	startY.value = y;
+	isTracking.value = true;
+};
+
+const onMove = (x: number, y: number) => {
+	if (!isTracking.value) return;
+	const dx = x - startX.value;
+	const dy = y - startY.value;
+	const dir = props.slideAxis === 'x' ? dx : dy;
+	const orth = props.slideAxis === 'x' ? dy : dx;
+	if (Math.abs(orth) > Math.abs(dir)) return; // 优先同轴
+};
+
+const onEnd = (x: number, y: number) => {
+	if (!isTracking.value) return;
+	isTracking.value = false;
+	const delta = props.slideAxis === 'x' ? x - startX.value : y - startY.value;
+	if (delta > SLIDE_THRESHOLD) prev();
+	else if (delta < -SLIDE_THRESHOLD) next();
+};
+
+/* Touch 事件 */
+const onTouchStart = (e: TouchEvent) => onStart(e.touches[0].clientX, e.touches[0].clientY);
+
+const onTouchMove = (e: TouchEvent) => {
+	if (!props.isSlide) return;
+	onMove(e.touches[0].clientX, e.touches[0].clientY);
+	e.preventDefault?.();
+};
+
+const onTouchEnd = (e: TouchEvent) => onEnd(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+
+/* Mouse 事件（PC H5） */
+const onMouseDown = (e: MouseEvent) => onStart(e.clientX, e.clientY);
+const onMouseMove = (e: MouseEvent) => {
+	if (!isTracking.value) return;
+	onMove(e.clientX, e.clientY);
+	e.preventDefault?.();
+};
+const onMouseUp = (e: MouseEvent) => onEnd(e.clientX, e.clientY);
+
+/* 监听 v-model 外部更新 */
+watch(
+	() => props.value,
+	(newVal) => {
+		if (newVal && newVal !== activeMenuId.value) {
+			activeMenuId.value = newVal;
+		}
+	}
+);
+
+/* H5：禁止横向/纵向滚动冲突 */
+const isH5 = typeof plus === 'undefined';
+if (isH5) {
+	nextTick(() => {
+		const el = (getCurrentInstance()?.proxy as any)?.$el as HTMLElement;
+		if (el) {
+			el.style.overscrollBehaviorX = props.slideAxis === 'x' ? 'contain' : 'auto';
+			el.style.overscrollBehaviorY = props.slideAxis === 'y' ? 'contain' : 'auto';
+		}
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.v-menu-container {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	touch-action: pan-y; /* 允许垂直滚动，水平自己接管 */
+
+
+
+	&--position--right {
+		flex-direction: row-reverse;
+	}
+}
+
+.v-menu {
+	display: flex;
+	flex-direction: column;
+	background-color: v-bind('config.VMenu.backgroundColor');
+	border-right: 1rpx solid v-bind('config.border.color');
+	width: 200rpx;
+	height: 100%;
+	overflow-y: auto;
+	transition: all 0.3s ease;
+	border-radius: 6rpx 0 0 6rpx;
+}
+
+.menu-item {
+	padding: 12rpx 16rpx;
+	cursor: pointer;
+	color: v-bind('config.fontColor.subTitle');
+	transition: all 0.2s ease;
+	border-bottom: 1rpx solid transparent;
+
+	&:hover {
+		background-color: v-bind('config.VMenu.highlightBackgroundColor');
+	}
+
+	&.active {
+		background-color: v-bind('config.VMenu.highlightBackgroundColor');
+		color: v-bind('config.fontColor.mainText');
+		font-weight: bold;
+		border-left: 6rpx solid v-bind('config.border.color');
+	}
+}
+
+.menu-content {
+	flex: 1;
+	padding: 16rpx;
+	background-color: v-bind('config.VMenu.reversal');
+	min-height: 600rpx;
+	overflow: auto;
+	box-shadow: -2rpx 0 5px rgba(0, 0, 0, 0.05);
+}
+
+</style>

package/components/model/native/v-menu-slide/v-menu-slide.vue

@@ -0,0 +1,364 @@
+<template>
+	<view class="v-menu-slide" :class="[`v-menu-slide--${direction}`]">
+		<!-- 菜单标题区域 -->
+		<view :class="['menu-header', `menu-header--${direction}`]">
+			<view
+				v-for="(titleItem, index) in processedTitleItems"
+				:key="index"
+				:class="['menu-item', { 'menu-item--active': activeIndex === index }]"
+				@click="selectMenuItem(index)"
+			>
+				<slot name="title" :item="titleItem" :index="index" :active="activeIndex === index" :direction="direction">
+					<view class="menu-item__content" :class="[`menu-item__content--${direction}`]">
+						<text class="menu-item__text">{{ titleItem.title }}</text>
+					</view>
+				</slot>
+			</view>
+		</view>
+
+		<!-- 内容区域 -->
+		<view class="menu-content">
+			<swiper :current="activeIndex" :vertical="direction === 'y'" :duration="transitionDuration" @change="onSwiperChange" class="menu-content-swiper">
+				<swiper-item v-for="(contentItem, index) in processedContentItems" :key="index">
+					<view class="content-item">
+						<slot name="content" :item="contentItem" :index="index">
+							<text class="content-default-text">{{ contentItem.content || `内容 ${index + 1}` }}</text>
+						</slot>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue';
+
+const props = defineProps({
+	// 菜单项数据（合并格式）
+	items: {
+		type: Array,
+		default: () => []
+	},
+	// 菜单标题项数据（分开格式）
+	titleItems: {
+		type: Array,
+		default: () => []
+	},
+	// 菜单内容项数据（分开格式）
+	contentItems: {
+		type: Array,
+		default: () => []
+	},
+	// 排列方向：x（水平）或 y（垂直）
+	direction: {
+		type: String,
+		default: 'x',
+		validator: (value) => ['x', 'y'].includes(value)
+	},
+	// 默认激活的菜单项索引
+	defaultActive: {
+		type: Number,
+		default: 0
+	},
+	// 过渡动画时长（毫秒）
+	transitionDuration: {
+		type: Number,
+		default: 300
+	},
+	// 标题数据的关联键名
+	titleKey: {
+		type: String,
+		default: null
+	},
+	// 内容数据的关联键名
+	contentKey: {
+		type: String,
+		default: null
+	},
+	// 向后兼容的关联键名（如果设置了，会同时设置 titleKey 和 contentKey）
+	relationKey: {
+		type: String,
+		default: null
+	}
+});
+
+const emit = defineEmits(['update:active', 'change']);
+
+// 当前激活的菜单项索引
+const activeIndex = ref(props.defaultActive);
+
+// 计算实际使用的键名
+const effectiveTitleKey = computed(() => {
+	if (props.titleKey) return props.titleKey;
+	if (props.relationKey) return props.relationKey;
+	return null; // 默认按索引匹配
+});
+
+const effectiveContentKey = computed(() => {
+	if (props.contentKey) return props.contentKey;
+	if (props.relationKey) return props.relationKey;
+	return null; // 默认按索引匹配
+});
+
+// 检测数据格式
+const isSeparateFormat = computed(() => {
+	return props.titleItems.length > 0 && props.contentItems.length > 0;
+});
+
+// 处理标题项数据
+const processedTitleItems = computed(() => {
+	if (isSeparateFormat.value) {
+		return props.titleItems;
+	}
+	return props.items;
+});
+
+// 处理内容项数据
+const processedContentItems = computed(() => {
+	if (isSeparateFormat.value) {
+		// 分开格式：根据关联键匹配内容
+		if (effectiveTitleKey.value && effectiveContentKey.value && props.titleItems.length > 0 && props.contentItems.length > 0) {
+			return props.titleItems.map((titleItem) => {
+				const titleValue = titleItem[effectiveTitleKey.value];
+				const matchedContent = props.contentItems.find((contentItem) => contentItem[effectiveContentKey.value] === titleValue);
+				return matchedContent || { content: '暂无内容' };
+			});
+		}
+
+		// 分开格式：按索引匹配
+		return props.contentItems.length > 0 ? props.contentItems : props.titleItems.map(() => ({}));
+	}
+
+	// 合并格式：直接使用 items
+	return props.items;
+});
+
+// 选择菜单项
+const selectMenuItem = (index) => {
+	if (activeIndex.value === index) return;
+
+	activeIndex.value = index;
+	emit('update:active', index);
+	emit('change', index);
+};
+
+// Swiper 切换回调
+const onSwiperChange = (e) => {
+	const index = e.detail.current;
+	if (activeIndex.value === index) return;
+
+	activeIndex.value = index;
+	emit('update:active', index);
+	emit('change', index);
+};
+
+// 监听外部 active 变化
+watch(
+	() => props.defaultActive,
+	(newVal) => {
+		if (activeIndex.value !== newVal) {
+			activeIndex.value = newVal;
+		}
+	}
+);
+
+// 监听 items 变化
+watch(
+	() => [props.items, props.titleItems, props.contentItems],
+	() => {
+		// 数据变化时重置激活索引（可选）
+		const maxIndex = isSeparateFormat.value ? Math.min(props.titleItems.length, props.contentItems.length) - 1 : props.items.length - 1;
+
+		if (activeIndex.value > maxIndex) {
+			activeIndex.value = Math.max(0, maxIndex);
+		}
+	},
+	{ deep: true }
+);
+
+// 初始化
+onMounted(() => {
+	if (props.items.length === 0 && props.titleItems.length === 0) {
+		console.warn('v-menu-slide: 请提供菜单数据（items 或 titleItems/contentItems）');
+	}
+
+	// 数据格式检查
+	if (props.items.length > 0 && (props.titleItems.length > 0 || props.contentItems.length > 0)) {
+		console.warn('v-menu-slide: 检测到同时提供了 items 和 titleItems/contentItems，将优先使用 titleItems/contentItems');
+	}
+
+	// 键名检查
+	if (isSeparateFormat.value && effectiveTitleKey.value && effectiveContentKey.value) {
+		// 检查标题数据中是否包含指定的键
+		if (props.titleItems.length > 0 && !props.titleItems[0].hasOwnProperty(effectiveTitleKey.value)) {
+			console.warn(`v-menu-slide: 标题数据中未找到键 "${effectiveTitleKey.value}"，将按索引匹配`);
+		}
+
+		// 检查内容数据中是否包含指定的键
+		if (props.contentItems.length > 0 && !props.contentItems[0].hasOwnProperty(effectiveContentKey.value)) {
+			console.warn(`v-menu-slide: 内容数据中未找到键 "${effectiveContentKey.value}"，将按索引匹配`);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+/* 样式保持不变，与之前相同 */
+.v-menu-slide {
+	width: 100%;
+	height: 100%;
+	display: flex;
+
+	// 默认X轴方向
+	flex-direction: column;
+
+	// Y轴方向布局
+	&--y {
+		flex-direction: row;
+	}
+}
+
+// 菜单标题区域
+.menu-header {
+	display: flex;
+	background-color: #fff;
+	z-index: 10;
+
+	&--x {
+		flex-direction: row;
+		overflow-x: auto;
+		white-space: nowrap;
+		// 隐藏滚动条（H5和App兼容）
+		&::-webkit-scrollbar {
+			display: none;
+			width: 0;
+			height: 0;
+			color: transparent;
+		}
+	}
+
+	&--y {
+		flex-direction: column;
+		width: 200rpx; // Y轴方向时固定宽度
+		flex-shrink: 0; // 防止被压缩
+		overflow-y: auto;
+		// 隐藏滚动条（H5和App兼容）
+		&::-webkit-scrollbar {
+			display: none;
+			width: 0;
+			height: 0;
+			color: transparent;
+		}
+	}
+}
+
+// 菜单项
+.menu-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20rpx 30rpx;
+	position: relative;
+	transition: all 0.3s ease;
+	flex-shrink: 0; // 防止在x方向排列时被压缩
+
+	// Y轴方向时，菜单项内容横向排列
+	.menu-header--y & {
+		justify-content: flex-start;
+	}
+
+	&--active {
+		color: #007aff; // 激活状态颜色
+
+		&::after {
+			content: '';
+			position: absolute;
+			background-color: #007aff;
+			transition: all 0.3s ease;
+		}
+	}
+
+	// X方向激活指示器
+	.menu-header--x &--active::after {
+		bottom: 0;
+		left: 20%;
+		right: 20%;
+		height: 4rpx;
+	}
+
+	// Y方向激活指示器
+	.menu-header--y &--active::after {
+		top: 20%;
+		bottom: 20%;
+		left: 0;
+		width: 4rpx;
+	}
+}
+
+// 菜单项内容容器
+.menu-item__content {
+	display: flex;
+	align-items: center;
+
+	// Y轴方向时，内容横向排列
+	&--y {
+		flex-direction: row;
+	}
+}
+
+.menu-item__text {
+	font-size: 28rpx;
+	font-weight: 500;
+}
+
+// 内容区域
+.menu-content {
+	flex: 1;
+	position: relative;
+	overflow: hidden;
+}
+
+.menu-content-swiper {
+	width: 100%;
+	height: 100%;
+}
+
+.content-item {
+	width: 100%;
+	height: 100%;
+	padding: 20rpx;
+	box-sizing: border-box;
+	/* #ifdef H5 */
+	overflow: auto;
+	/* #endif */
+	// 隐藏滚动条（H5和App兼容）
+	&::-webkit-scrollbar {
+		display: none;
+		width: 0;
+		height: 0;
+		color: transparent;
+	}
+}
+
+.content-default-text {
+	font-size: 28rpx;
+	color: #666;
+}
+
+/* App和H5兼容性处理 */
+/* #ifdef APP-PLUS */
+.menu-header--x {
+	-webkit-overflow-scrolling: touch;
+}
+/* #endif */
+
+/* #ifdef H5 */
+// H5特定样式
+@media (hover: hover) {
+	.menu-item:hover {
+		background-color: #f5f5f5;
+	}
+}
+/* #endif */
+</style>

package/components/model/native/v-min-loading/v-min-loading.vue

@@ -0,0 +1,80 @@
+<template>
+	<view v-show="value" :class="['spinner', `spinner--type--${props.type}`]"></view>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+const props = defineProps({
+	value: {
+		type: Boolean,
+		default: false
+	},
+	type: {
+		type: String,
+		default: 'default'
+	},
+	customizeColor: {
+		type: String,
+		default: null
+	},
+	vacancyColor: {
+		type: String,
+		default: '#fff'
+	},
+	opacity: {
+		type: Number,
+		default: 0.5
+	}
+});
+
+const config = inject<any>('config');
+const type = props.customizeColor === null ? '1px solid transparent' : `1px solid ${props.customizeColor}`;
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+	width: 20rpx;
+	height: 20rpx;
+	border-radius: 50%;
+	border-top-color: v-bind('props.vacancyColor') !important;
+	animation: spin 1s ease-in-out infinite;
+	margin: auto;
+	opacity: v-bind('props.opacity');
+
+	&--type--default {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.default");
+	}
+
+	&--type--warn {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.warn");
+	}
+
+	&--type--info {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.info");
+	}
+
+	&--type--delete {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.delete");
+	}
+
+	&--type--succeed {
+		border: 1rpx solid ;
+		border-color: v-bind("config.border.succeed");
+	}
+
+	&--type--customize {
+		border: v-bind('type');
+	}
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>