v-uni-app-ui 1.0.0 → 1.0.4

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

@@ -0,0 +1,255 @@
+<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

@@ -0,0 +1,357 @@
+<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

@@ -0,0 +1,101 @@
+<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

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