v-uni-app-ui 1.0.2 → 1.0.6

package/components/model/compound/v-image/v-image.vue

@@ -1,357 +0,0 @@
-<template>
-	<view class="v-image-container" @click="handleClick">
-		<!-- 根据环境选择不同的标签 -->
-		<template v-if="!isError">
-			<image
-				v-if="isAppPlus"
-				ref="imgElement"
-				:src="finalSrc"
-				:class="['v-image', `v-image--${model}`, { 'v-image--loading': isLoading, 'v-image--disabled': disabled }]"
-				@click="handlePreview"
-				@load="handleLoad"
-				@error="handleError"
-			/>
-			<img
-				v-else
-				ref="imgElement"
-				:src="finalSrc"
-				:class="['v-image', `v-image--${model}`, { 'v-image--loading': isLoading, 'v-image--disabled': disabled }]"
-				@click="handlePreview"
-				@load="handleLoad"
-				@error="handleError"
-			/>
-		</template>
-
-		<slot name="loading" v-if="isLoading">
-			<view class="v-image-loading">
-				<v-loading text="加载中……" show />
-			</view>
-		</slot>
-		<slot name="error" v-if="isError">
-			<view class="v-image-error">
-				<text class="error-text">加载失败</text>
-			</view>
-		</slot>
-	</view>
-	<v-overlay v-model:value="showPreview" @click="closePreview" v-if="showPreview">
-		<image v-if="isAppPlus" :src="finalPreviewSrc" :class="['v-image-preview__img', `v-image-preview__img--${previewModel}`]" @click.stop />
-		<img v-else :src="finalPreviewSrc" :class="['v-image-preview__img', `v-image-preview__img--${previewModel}`]" @click.stop />
-	</v-overlay>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, onMounted, onUnmounted, inject, computed } from 'vue';
-const props = defineProps({
-	src: {
-		type: String,
-		default: '',
-		required: true
-	},
-	width: {
-		type: String,
-		default: '100%'
-	},
-	height: {
-		type: String,
-		default: '100%'
-	},
-	model: {
-		type: String,
-		default: 'square',
-		validator: (val: string) => ['circle', 'rounded', 'square'].includes(val)
-	},
-	borderRadius: {
-		type: String,
-		default: '10rpx'
-	},
-	previewWidth: {
-		type: String,
-		default: 'auto'
-	},
-	previewHeight: {
-		type: String,
-		default: 'auto'
-	},
-	enablePreview: {
-		type: Boolean,
-		default: false
-	},
-	previewModel: {
-		type: String,
-		default: 'square',
-		validator: (val: string) => ['circle', 'rounded', 'square'].includes(val)
-	},
-	previewBorderRadius: {
-		type: String,
-		default: '10rpx'
-	},
-	loading: {
-		type: Boolean,
-		default: false
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	lazy: {
-		type: Boolean,
-		default: false
-	},
-	threshold: {
-		type: Number,
-		default: 0.1
-	},
-	delay: {
-		type: Number,
-		default: 800
-	},
-	isLoading: {
-		type: Boolean,
-		default: false
-	},
-	retryCount: {
-		type: Number,
-		default: 3
-	},
-	fit: {
-		type: String,
-		default: 'cover'
-	},
-	previewFit: {
-		type: String,
-		default: ''
-	}
-});
-
-const emit = defineEmits(['update:enablePreview', 'update:loading', 'handleLoading', 'handError', 'click']);
-
-const config = inject<any>('config');
-const showPreview = ref(false);
-const isLoading = ref(props.isLoading);
-const isError = ref(false);
-const imgElement = ref<HTMLElement | null>(null);
-const displaySrc = ref<string | null>(null);
-
-let lazyLoadTimer: any = null;
-let scrollHandler: any = null;
-const retryCount = ref(0);
-const maxRetryCount = ref(props.retryCount);
-
-// 判断是否是 App 环境
-const isAppPlus = ref(false);
-
-// 判断是否是 HTTP 或 HTTPS 链接
-const isHttpOrHttps = (url: string) => {
-	return /^https?:\/\//.test(url);
-};
-// 动态计算图片路径
-const finalSrc = computed(() => {
-	if (!props.src) return '';
-	return isHttpOrHttps(props.src) ? props.src : config.VImage.prefix + props.src;
-});
-
-const finalPreviewSrc = computed(() => {
-	if (!props.src) return '';
-	return isHttpOrHttps(props.src) ? props.src : config.VImage.prefix + props.src;
-});
-
-onMounted(() => {
-	// 判断当前环境
-	if (process.env.VUE_APP_PLATFORM === 'app-plus') {
-		isAppPlus.value = true;
-	} else {
-		isAppPlus.value = false;
-	}
-
-	if (props.lazy && props.src && window) {
-		window.addEventListener('scroll', handleScroll);
-		handleScroll();
-	} else {
-		displaySrc.value = finalSrc.value;
-	}
-});
-
-const handleScroll = () => {
-	if (!props.lazy || !props.src || !imgElement.value) return;
-
-	const rect = imgElement.value.getBoundingClientRect();
-	const isVisible = rect.top < (window.innerHeight || document.documentElement.clientHeight) && rect.bottom > 0;
-
-	if (isVisible) {
-		loadImage();
-	}
-};
-
-const loadImage = () => {
-	clearTimeout(lazyLoadTimer);
-	lazyLoadTimer = setTimeout(() => {
-		displaySrc.value = finalSrc.value;
-		if (displaySrc.value && displaySrc.value.trim()) {
-			isLoading.value = false
-			isError.value = false;
-		}
-	}, props.delay);
-};
-
-const handleLoad = () => {
-	isLoading.value = false;
-	emit('handleLoading');
-	retryCount.value = 0; // 成功后重置重试计数
-};
-
-const handleRetry = () => {
-	if (retryCount.value < maxRetryCount.value) {
-		retryCount.value++;
-		displaySrc.value = null;
-		isLoading.value = true;
-		isError.value = false;
-		loadImage();
-		emit('handError', retryCount.value);
-	} else {
-		emit('handError', retryCount.value);
-	}
-};
-
-const handleError = () => {
-	isLoading.value = false;
-	isError.value = true;
-	handleRetry();
-};
-
-const handlePreview = () => {
-	if (props.enablePreview && props.src && !props.disabled) {
-		showPreview.value = true;
-	}
-};
-
-const handleClick = () => {
-	emit('click');
-};
-
-const closePreview = () => {
-	showPreview.value = false;
-};
-
-watch(
-	() => showPreview.value,
-	(newValue) => {
-		emit('update:enablePreview', newValue);
-	}
-);
-
-watch(
-	() => isLoading.value,
-	() => {
-		emit('update:loading', isLoading.value);
-	}
-);
-
-watch(
-	() => props.src,
-	(newSrc) => {
-		if (!props.lazy) {
-			displaySrc.value = finalSrc.value;
-			if (newSrc) {
-				isLoading.value = true;
-				isError.value = false;
-			}
-		} else {
-			if (imgElement.value && window) {
-				loadImage();
-			}
-		}
-	}
-);
-
-onUnmounted(() => {
-	clearTimeout(lazyLoadTimer);
-	if (window) {
-		window.removeEventListener('scroll', handleScroll);
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.v-image-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-}
-
-.v-image {
-	max-width: 100%;
-	max-height: 100%;
-	width: v-bind('props.width');
-	height: v-bind('props.height');
-	object-fit: v-bind('fit');
-
-	&--circle {
-		border-radius: 50%;
-	}
-
-	&--rounded {
-		border-radius: v-bind('props.borderRadius');
-	}
-
-	&--square {
-		border-radius: 0;
-	}
-
-	&--loading,
-	&--disabled {
-		opacity: v-bind('config.opacity.disabled');
-	}
-}
-
-.v-image-preview__img {
-	max-width: 90%;
-	max-height: 90%;
-	object-fit: v-bind('previewFit');
-
-	&--circle {
-		border-radius: 50%;
-	}
-
-	&--rounded {
-		border-radius: v-bind('props.previewBorderRadius');
-	}
-
-	&--square {
-		border-radius: 0;
-	}
-}
-
-.v-image-loading {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 1;
-}
-
-.v-image-error {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	z-index: 1;
-
-	.error-text {
-		font-size: v-bind('config.fontSize.smallText');
-		color: v-bind('config.fontColor.subTitle');
-		margin-top: 12rpx;
-	}
-}
-</style>

package/components/model/compound/v-input-desensitize/v-input-desensitize.vue

@@ -1,101 +0,0 @@
-<template>
-	<v-input
-		:value="displayValue"
-		v-bind="$props"
-		class="desensitize-input"
-		@update:value="onInput"
-		@focus="emit('focus', $event)"
-		@blur="emit('blur', $event)"
-		@confirm="emit('confirm', $event)"
-	>
-		<template #left><slot name="left" /></template>
-		<template #right><slot name="right" /></template>
-	</v-input>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue';
-
-type BuiltInRule = 'name' | 'phone' | 'idcard';
-type CustomRule = (raw: string) => string;
-type Rule = BuiltInRule | CustomRule;
-
-const props = defineProps({
-	modelValue: { type: String, default: '' },
-	size: { type: String, default: 'medium' },
-	placeholder: { type: [String, Array], default: '' },
-	maxlength: { type: Number, default: null },
-	disabled: { type: Boolean, default: false },
-	showCounter: { type: Boolean, default: false },
-	borderModel: { type: String, default: 'all' },
-	combinationConfig: { type: Object, default: () => ({ isShow: false }) },
-	autoFocus: { type: Boolean, default: false },
-	realType: { type: String, default: 'text' },
-	desensitize: { type: Boolean, default: true },
-	rule: { type: [String, Function] as () => Rule, default: 'phone' }
-});
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'confirm']);
-
-/* ========= 内置规则 ========= */
-const builtInRules: Record<BuiltInRule, (v: string) => string> = {
-	/* 姓名：保留首字母和末字母，中间全星号 */
-	name: (v) => (v.length <= 2 ? v.slice(-1).padStart(v.length, '*') : v[0] + '*'.repeat(v.length - 2) + v.slice(-1)),
-
-	/* 手机：保留前三后四，中间星号 */
-	phone: (v) => {
-		const digits = v.replace(/\D/g, '');
-		if (digits.length < 7) return v;
-
-		let result = '';
-		let digitIndex = 0;
-
-		for (let i = 0; i < v.length; i++) {
-			if (/\d/.test(v[i])) {
-				if (digitIndex < 3) {
-					result += v[i];
-				} else if (digitIndex >= digits.length - 4) {
-					result += v[i];
-				} else {
-					result += '*';
-				}
-				digitIndex++;
-			} else {
-				result += v[i];
-			}
-		}
-		return result;
-	},
-
-	/* 身份证：保留前 4 后 4，中间全星号 */
-	idcard: (v) => {
-		const len = v.length;
-		if (len < 8) return v;
-		return v.slice(0, 4) + '*'.repeat(len - 8) + v.slice(-4);
-	}
-};
-
-/* ========= 脱敏显示值 ========= */
-const displayValue = computed(() => {
-	if (!props.desensitize) return props.modelValue;
-
-	const rule = props.rule;
-	if (typeof rule === 'function') {
-		return rule(props.modelValue);
-	}
-	return builtInRules[rule as BuiltInRule](props.modelValue);
-});
-
-/* ========= 输入事件：直接传递原始值 ========= */
-const onInput = (val: string) => {
-	// 注意：这里传入的val是脱敏后的显示值，我们需要直接更新原始值
-	emit('update:modelValue', val);
-};
-</script>
-
-<style scoped>
-.desensitize-input :deep(input) {
-	font-family: monospace;
-	line-height: 1.5;
-}
-</style>

package/components/model/compound/v-page/v-page.vue

@@ -1,11 +0,0 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style lang="scss" scoped>
-</style>

package/components/model/compound/v-pages/v-pages.vue

@@ -1,141 +0,0 @@
-<template>
-	<view class="v-pages">
-		<view class="pages-container">
-			<v-button :disabled="currentPage <= 1" @click="changePage(currentPage - 1)" size="small">上一页</v-button>
-			<template v-for="(page, index) in pageList" :key="index">
-				<view v-if="page === '...'" class="page-item" :class="{ active: currentPage === page }" style="cursor: default; color: #ccc">
-					{{ page }}
-				</view>
-				<view v-else class="page-item" :class="{ active: page === currentPage }" @click="changePage(page)">
-					{{ page }}
-				</view>
-			</template>
-			<v-button :disabled="currentPage >= totalPages" @click="changePage(currentPage + 1)" size="small">下一页</v-button>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-
-const props = defineProps({
-	total: {
-		type: Number,
-		default: 0
-	},
-	pageSize: {
-		type: Number,
-		default: 10
-	},
-	currentPage: {
-		type: Number,
-		default: 1
-	},
-	pageRange: {
-		type: Number,
-		default: 3
-	}
-});
-
-const emit = defineEmits(['update:currentPage', 'change']);
-
-const config = inject<any>('config');
-const totalPages = computed(() => {
-	return Math.ceil(props.total / props.pageSize);
-});
-
-const pageList = computed(() => {
-	const list = [];
-	const totalPage = totalPages.value;
-	const maxPagesToShow = props.pageRange * 2 + 1;
-
-	if (totalPage <= maxPagesToShow) {
-		for (let i = 1; i <= totalPage; i++) {
-			list.push(i);
-		}
-	} else {
-		const startPage = Math.max(1, props.currentPage - props.pageRange);
-		const endPage = Math.min(totalPage, props.currentPage + props.pageRange);
-
-		if (startPage > 1) {
-			list.push(1);
-			if (startPage > 2) {
-				list.push('...');
-			}
-		}
-
-		for (let i = startPage; i <= endPage; i++) {
-			list.push(i);
-		}
-
-		if (endPage < totalPage - 1) {
-			list.push('...');
-			if (endPage < totalPage) {
-				list.push(totalPage);
-			}
-		}
-	}
-
-	return list;
-});
-
-const changePage = (page: number) => {
-	if (page < 1 || page > totalPages.value) return;
-	emit('update:currentPage', page);
-	emit('change', page);
-};
-</script>
-
-<style lang="scss" scoped>
-.v-pages {
-	display: flex;
-	justify-content: center;
-	padding: 20rpx 0;
-}
-
-.pages-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.page-item {
-	width: 45rpx;
-	height: 45rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0 5rpx;
-	border-radius: 6rpx;
-	background-color: v-bind('config.backgroundColor.reversal');
-	cursor: pointer;
-	transition: all 0.3s;
-	border: 1px solid v-bind('config.border.color');
-
-	&:hover {
-		border-color: v-bind('config.border.default');
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-		opacity: v-bind('config.opacity.disabled');
-		border-color: v-bind('config.border.color');
-	}
-
-	&.active {
-		background-color: v-bind('config.backgroundColor.default');
-		color: v-bind('config.fontColor.reversal');
-		border-color: v-bind('config.border.default');
-	}
-
-	&.page-item--no-border {
-		border: none;
-		box-shadow: none;
-		background-color: transparent;
-	}
-
-	&.page-item--no-bg {
-		background-color: transparent;
-	}
-}
-</style>

package/components/model/compound/v-picker-list/v-picker-list.vue

@@ -1,109 +0,0 @@
-<template>
-	<view>
-		<v-popup v-model:value="isShow" :title="title" :scrollHeight="scrollHeight" @close="handleClose" @confirm="handleConfirm">
-			<view class="popup-content">
-				<view v-for="(item, index) in safeList" :key="index" class="picker-item" :class="{ active: item.value === selectedValue }" @click="handleSelect(item)">
-					{{ item.label }}
-				</view>
-				<view v-show="safeList.length === 0">
-					<slot name="is-null">
-						<v-null text="暂无数据"></v-null>
-					</slot>
-				</view>
-			</view>
-		</v-popup>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch,inject } from 'vue';
-
-interface PickerItem {
-	label: string;
-	value: string | number;
-}
-/**
- * v-picker 拾取器
- * value 是否显示拾取器 默认值:false  可选值true显示、false隐藏
- * list 拾取器数据列表
- * title 拾取器标题
- * selected 默认选中项 默认值:null
- * scrollHeight 拾取器滚动区域高度 默认值:400
- * 相关事件:confirm 选中事件 select选择事件
- */
-const props = defineProps({
-	value: {
-		type: Boolean,
-		default: false,
-		required: true
-	},
-	list: {
-		type: Array as () => PickerItem[],
-		required: true
-	},
-	title: {
-		type: String,
-		default: ''
-	},
-	selected: {
-		type: [String, Number],
-		default: null
-	},
-	scrollHeight: {
-		type: Number,
-		default: 400
-	}
-});
-
-const emit = defineEmits(['update:value', 'close', 'confirm', 'select']);
-
-const isShow = ref(props.value);
-// 安全列表计算属性
-const safeList = computed(() => props.list || []);
-const selectedValue = ref(
-  props.selected !== null && props.selected !== undefined
-    ? props.selected
-    : (safeList.value.length > 0 && safeList.value[0].value !== undefined ? safeList.value[0].value : '')
-);
-const config = inject<any>('config');
-const selectedItem = computed(() => {
-	return safeList.value.find((item) => item.value === selectedValue.value) || null;
-});
-
-watch(
-	() => props.value,
-	(newValue) => {
-		isShow.value = newValue;
-	}
-);
-
-function handleClose() {
-	isShow.value = false;
-	emit('update:value', false);
-	emit('close', false);
-}
-
-function handleSelect(item: PickerItem) {
-	selectedValue.value = item.value;
-	emit('select', item);
-}
-
-function handleConfirm() {
-	isShow.value = false;
-	emit('confirm', selectedItem.value);
-	emit('update:value', false);
-}
-</script>
-<style lang="scss">
-.picker-item {
-	padding: 20rpx 30rpx;
-	font-size: v-bind("config.fontSize.mediumText");
-	color: v-bind("config.fontColor.mainText");
-	border-bottom: 1rpx solid v-bind("config.border.color");
-}
-
-.picker-item.active {
-	color: v-bind("config.fontColor.default");
-	font-weight: 500;
-}
-</style>