v-uni-app-ui 1.0.4 → 1.0.7

package/components/model/compound/v-form-item/v-form-item.vue

@@ -1,255 +0,0 @@
-<template>
-	<view :class="['form-item', `form-item--border--${borderModel}`, { 'form-item--hint--model': !hintModel }]">
-		<view class="title">
-			<view class="required" v-if="requiredPosition == 'left'">
-				<v-text v-if="isRequired">*</v-text>
-			</view>
-			<view v-if="label" class="label">
-				{{ label }}
-			</view>
-			<view class="required" v-if="requiredPosition == 'right'">
-				<v-text v-if="isRequired">*</v-text>
-			</view>
-		</view>
-		<view class="control">
-			<slot></slot>
-			<view class="error-message" v-if="hintModel">
-				<v-text v-if="error" type="danger">{{ error }}</v-text>
-			</view>
-		</view>
-		<v-toast ref="toast"></v-toast>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, inject, onMounted, onUnmounted } from 'vue';
-import { getCurrentInstance } from 'vue';
-
-const { proxy } = getCurrentInstance();
-
-const props = defineProps({
-	label: {
-		type: String,
-		default: ''
-	},
-	name: {
-		type: String,
-		required: true
-	},
-	requiredPosition: {
-		type: String,
-		default: 'right'
-	},
-	hintModel: {
-		type: Boolean,
-		default: true
-	},
-	borderModel: {
-		type: String,
-		default: 'bottom',
-		validator: (v) => ['all', 'none', 'bottom', 'top', 'left', 'right', 'ends', 'up-down'].includes(v)
-	}
-});
-
-const toast = ref(null);
-const error = ref('');
-const isRequired = ref(false);
-const config = inject('config');
-const formContext = inject('form', {
-	rules: {},
-	formData: {},
-	register: (name, validate) => {
-		console.log(name, validate);
-	},
-	unregister: (name) => {
-		console.log(name);
-	},
-	formHasError:{
-		value:false
-	},
-});
-
-const validate = async () => {
-	const rules = formContext.rules[props.name] || [];
-	const value = formContext.formData[props.name];
-	const formData = formContext.formData;
-
-	for (const rule of rules) {
-		// 必填校验
-		if (rule.required) {
-			let isEmpty = false;
-			if (value === null || value === undefined || value === '') {
-				isEmpty = true;
-			} else if (typeof value === 'string' || typeof value === 'number') {
-				if (value != null && value !== undefined) {
-					isEmpty = !value.toString().trim();
-				}
-			} else if (Array.isArray(value)) {
-				isEmpty = value.length === 0;
-			} else if (typeof value === 'object') {
-				isEmpty = Object.keys(value).length === 0;
-			}
-			if (isEmpty) {
-				hintModelMessage(rule.message || `${props.label}不能为空`);
-				return false;
-			}
-		}
-
-		// 类型转换校验（非空后执行）
-		let processedValue = value;
-		if ((rule.type === 'number' || rule.type === 'integer') && value !== null && value !== undefined) {
-			processedValue = Number(value);
-			if (isNaN(processedValue)) {
-				hintModelMessage(rule.message || `${props.label}必须为数字`);
-				return false;
-			}
-			if (rule.type === 'integer' && !Number.isInteger(processedValue)) {
-				hintModelMessage(rule.message || `${props.label}必须为整数`);
-				return false;
-			}
-		}
-
-		// 格式校验
-		if (value !== null && value !== undefined && value !== '') {
-			if (rule.pattern && !rule.pattern.test(value)) {
-				hintModelMessage(rule.message || `${props.label}格式错误`);
-				return false;
-			}
-
-			// 内置类型校验
-			if (rule.type === 'email' && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
-				hintModelMessage(rule.message || `请输入有效的邮箱地址`);
-				return false;
-			}
-
-			if (rule.type === 'mobile' && !/^1[3-9]\d{9}$/.test(value)) {
-				hintModelMessage(rule.message || `请输入有效的手机号码`);
-				return false;
-			}
-
-			// 长度校验
-			if (rule.minLength !== undefined && value.length < rule.minLength) {
-				hintModelMessage(rule.message || `${props.label}至少需要${rule.minLength}个字符`);
-				return false;
-			}
-
-			if (rule.maxLength !== undefined && value.length > rule.maxLength) {
-				hintModelMessage(rule.message || `${props.label}不能超过${rule.maxLength}个字符`);
-				return false;
-			}
-
-			// 数值范围校验
-			if (typeof rule.min === 'number' && processedValue < rule.min) {
-				hintModelMessage(rule.message || `${props.label}不能小于${rule.min}`);
-				return false;
-			}
-
-			if (typeof rule.max === 'number' && processedValue > rule.max) {
-				hintModelMessage(rule.message || `${props.label}不能大于${rule.max}`);
-				return false;
-			}
-
-			// 关联字段校验（如密码确认）
-			if (rule.compareWith) {
-				const compareValue = formData[rule.compareWith];
-				if (value !== compareValue) {
-					hintModelMessage(rule.message || `${props.label}必须与${rule.compareWith}保持一致`);
-					return false;
-				}
-			}
-
-			// 自定义校验函数
-			if (rule.validator) {
-				const result = await rule.validator(value, formData);
-				if (!result) {
-					hintModelMessage(rule.message || `${props.label}验证未通过`);
-					return false;
-				}
-			}
-		}
-	}
-
-	error.value = '';
-	return true;
-};
-
-const hintModelMessage = (message: string) => {
-	if (props.hintModel) {
-		error.value = message;
-	} else {
-		if (formContext && formContext.formHasError.value) {
-			return;
-		}
-		if (toast.value) {
-			toast.value.show({
-				message: message,
-				type: 'error',
-				duration: 3000
-			});
-			formContext.formHasError.value = true;
-		}
-	}
-};
-
-const resetField = () => {
-	error.value = '';
-	formContext.formData[props.name] = null;
-};
-
-// 注册到父表单
-onMounted(() => {
-	if (formContext && formContext.register) {
-		formContext.register(props.name, { validate, resetField });
-		if (formContext.rules && formContext.rules[props.name]) {
-			isRequired.value = formContext.rules[props.name].some((r) => r.required);
-		}
-	}
-});
-
-onUnmounted(() => {
-	if (formContext && formContext.unregister) {
-		formContext.unregister(props.name);
-	}
-});
-</script>
-<style lang="scss" scoped>
-.form-item {
-	&--hint--model {
-		padding-bottom: 20rpx;
-	}
-
-	&--border--all {
-		border: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--none {
-		border: none;
-	}
-
-	&--border--bottom {
-		border-bottom: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--top {
-		border-top: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--left {
-		border-left: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--right {
-		border-right: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--ends {
-		border-left: 1rpx solid v-bind('config.VFormItem.borderColor');
-		border-right: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-
-	&--border--up-down {
-		border-top: 1rpx solid v-bind('config.VFormItem.borderColor');
-		border-bottom: 1rpx solid v-bind('config.VFormItem.borderColor');
-	}
-}
-</style>

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>