v-uni-app-ui 1.0.2 → 1.0.6

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

@@ -1,198 +0,0 @@
-<template>
-	<view v-if="toastList.length > 0" class="toast-container">
-		<view v-for="(toast, index) in toastList" :key="index" class="toast-content-wrapper" :style="{ top: `${20 + index * 10}%` }">
-			<view class="toast-content" :class="[toast.typeClass, toast.customClass]" v-if="toast.isVisible">
-				<!-- 信息图标 -->
-				<text v-if="toast.type === 'info'" class="icon">
-					<image src="./info.png" />
-				</text>
-				<!-- 警告图标 -->
-				<text v-else-if="toast.type === 'warn'" class="icon"><image src="./warn.png" /></text>
-				<!-- 加载中图标 -->
-				<view v-else-if="toast.type === 'loading'" class="loading-icon"></view>
-				<!-- 成功图标 -->
-				<text v-else-if="toast.type === 'success'" class="icon"><image src="./success.png" /></text>
-				<!-- 错误图标 -->
-				<text v-else-if="toast.type === 'error'" class="icon"><view class="text-icon">✕</view></text>
-				<!-- 消息内容 -->
-				<text class="toast-message">{{ toast.message }}</text>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onUnmounted } from 'vue';
-import { config } from '../../../config';
-
-type ToastType = 'info' | 'success' | 'error' | 'loading' | 'warn';
-type ToastPosition = 'top' | 'center' | 'bottom';
-
-interface ToastItem {
-	message: string;
-	type: ToastType;
-	position: ToastPosition;
-	duration: number;
-	customClass: string;
-	typeClass: string;
-	isVisible: boolean;
-	isLoaded: boolean;
-	timer?: NodeJS.Timeout;
-}
-
-// Toast 列表
-const toastList = ref<ToastItem[]>([]);
-
-const show = (options: { message: string; type?: ToastType; duration?: number; position?: ToastPosition; customClass?: string }) => {
-	// 如果超过3个，则清空全部
-	if (toastList.value.length >= 3) {
-		clearAll();
-	}
-
-	// 添加新的 Toast
-	const newToast: ToastItem = {
-		message: options.message,
-		type: options.type || 'info',
-		duration: options.duration || 2000,
-		position: options.position || 'top',
-		customClass: options.customClass || '',
-		typeClass: `toast-${options.type || 'info'}`,
-		isVisible: true,
-		isLoaded: false
-	};
-
-	toastList.value.push(newToast);
-	if (newToast.duration > 0) {
-		newToast.timer = setTimeout(() => {
-			removeToast(newToast);
-		}, newToast.duration);
-	}
-};
-
-const removeToast = (toast: ToastItem) => {
-	if (!toast.timer) {
-		return;
-	}
-	clearTimeout(toast.timer);
-	toast.timer = undefined; 
-	toast.isVisible = false;
-	console.log(JSON.stringify(toast));
-	toastList.value = toastList.value.filter((t) => t !== toast);
-};
-
-const clearAll = () => {
-	// 清除所有定时器
-	toastList.value.forEach((toast) => {
-		if (toast.timer) {
-			clearTimeout(toast.timer);
-			toast.timer = undefined;
-		}
-	});
-	toastList.value = [];
-};
-
-onUnmounted(() => {
-	clearAll();
-});
-
-defineExpose({ show, clearAll });
-</script>
-
-<style lang="scss">
-.toast-container {
-	position: fixed;
-	left: 0;
-	right: 0;
-	top: 10%;
-	bottom: 0;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	pointer-events: none;
-	z-index: 9999;
-}
-
-.toast-content-wrapper {
-	margin-top: 2.5%;
-	display: flex;
-	justify-content: center;
-}
-
-.toast-content {
-	min-width: 65%;
-	padding: 15rpx 25rpx;
-	background-color: #000000;
-	opacity: v-bind('config.opacity.toast');
-	border-radius: 8rpx;
-	color: v-bind('config.fontColor.reversal');
-	font-size: 28rpx;
-	display: flex;
-	align-items: center;
-	max-width: 70%;
-	box-sizing: border-box;
-	line-height: 1.5;
-
-	.icon {
-		margin-right: 16rpx;
-		font-size: 36rpx;
-		image {
-			margin: auto;
-			width: 32rpx;
-			height: 32rpx;
-			margin-top: 10rpx;
-		}
-		.text-icon {
-			display: block;
-			margin-top: -8rpx;
-		}
-	}
-	.toast-message {
-		margin-left: 20rpx;
-		text-align: left;
-		display: flex;
-		align-items: center;
-	}
-
-	.loading-icon {
-		width: 36rpx;
-		height: 36rpx;
-		margin-right: 16rpx;
-		border: 4rpx solid #fff;
-		border-top-color: transparent;
-		border-radius: 50%;
-		animation: rotating 1s linear infinite;
-		display: flex;
-		align-items: center;
-	}
-
-	&.toast-info {
-		background-color: v-bind('config.backgroundColor.info');
-	}
-
-	&.toast-success {
-		background-color: v-bind('config.backgroundColor.succeed');
-	}
-
-	&.toast-error {
-		background-color: v-bind('config.backgroundColor.delete');
-	}
-
-	&.toast-warn {
-		background-color: v-bind('config.backgroundColor.warn');
-	}
-
-	&.toast-loading {
-		background-color: #000000;
-		opacity: v-bind('config.opacity.toast');
-	}
-}
-
-@keyframes rotating {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>

package/components/model/native/v-upload-file-button/v-upload-file-button.vue

@@ -1,296 +0,0 @@
-<template>
-	<button @click="handleFileChange" :class="['upload-button', { uploading: uploading }]" :disabled="disabled">
-		<template v-if="!uploading && !fileSelected">
-			<slot>
-				<view class="upload-icon">
-					<text class="icon-upload"></text>
-				</view>
-				<view class="upload-text">
-					{{ buttonText }}
-				</view>
-			</slot>
-		</template>
-		<template v-else>
-			<view v-if="uploading" class="upload-progress">
-				<slot name="loading" :progress="progress">
-					<view class="progress-bar">
-						<view class="progress-bar-filled" :style="{ width: `${progress}%` }"></view>
-					</view>
-					<view class="progress-text">{{ progress }}%</view>
-				</slot>
-			</view>
-			<view v-else-if="fileSelected" class="selected-file">
-				<slot name="selected-file" :file="selectedFile" :file-type="fileFormat" :file-size="fileSize">
-					<view class="file-name">{{ selectedFile.name }}</view>
-					<view class="file-info">{{ fileFormat }} {{ fileSize }}</view>
-				</slot>
-			</view>
-		</template>
-	</button>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, inject, watchEffect } from 'vue';
-
-const props = defineProps({
-	buttonText: {
-		type: String,
-		default: '上传文件'
-	},
-	accept: {
-		type: String,
-		default: '*'
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	uploadUrl: {
-		type: String,
-		required: true
-	},
-	toKen: {
-		type: String,
-		default: null
-	},
-	requestMode: {
-		type: String,
-		default: 'POST'
-	}
-});
-
-const emit = defineEmits(['success', 'error', 'cancel']);
-
-const config = inject<any>('config');
-const selectedFile = ref(null);
-const progress = ref<number>(0);
-const uploading = ref<boolean>(false);
-const fileSelected = ref<boolean>(false);
-
-const fileFormat = computed(() => {
-	if (selectedFile.value) {
-		const name = selectedFile.value.name;
-		const extension = name.split('.').pop().toLowerCase(); // 获取文件扩展名
-
-		if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(extension)) {
-			return '图片';
-		}
-		if (extension === 'pdf') {
-			return 'PDF';
-		}
-		return '文件';
-	}
-	return '';
-});
-
-const fileSize = computed(() => {
-	if (selectedFile.value) {
-		const size = selectedFile.value.size;
-		if (size < 1024) return `${size} B`;
-		if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
-		return `${(size / 1024 / 1024).toFixed(2)} MB`;
-	}
-	return '';
-});
-
-watchEffect(() => {
-	if (props.disabled) {
-		uploading.value = false;
-	}
-});
-const handleFileChange = () => {
-	if (typeof uni !== 'undefined') {
-		// 使用 uni.chooseImage 选择图片
-		uni.chooseImage({
-			count: 1,
-			sizeType: ['original', 'compressed'],
-			sourceType: ['album', 'camera'],
-			success: (res) => {
-				const tempFilePath = res.tempFilePaths[0];
-				selectedFile.value = { path: tempFilePath, name: tempFilePath.split('/').pop() };
-				fileSelected.value = true;
-				uploadFile(tempFilePath); // 直接传递文件路径
-			},
-			fail: (err) => {
-				console.error('选择图片失败:', err);
-			}
-		});
-	} else {
-		// 浏览器环境使用 HTML File API
-		const input = document.createElement('input');
-		input.type = 'file';
-		input.accept = props.accept;
-		input.onchange = (e) => {
-			const files = e.target.files;
-			if (files && files.length > 0) {
-				selectedFile.value = files[0];
-				fileSelected.value = true;
-				uploadFile(files[0]);
-			}
-		};
-		input.click();
-	}
-};
-
-const uploadFile = (file) => {
-	if (!file) return;
-	uploading.value = true;
-	progress.value = 0;
-
-	if (typeof uni !== 'undefined') {
-		// uni-app 环境
-		const uploadTask = uni.uploadFile({
-			url: props.uploadUrl,
-			filePath: file,
-			name: 'file',
-			header: props.toKen
-				? {
-						Authorization: `Bearer ${props.toKen}`
-				  }
-				: {},
-			formData: {},
-			timeout: 60000, // 设置超时时间为60秒
-			success: (res) => {
-				emit('success', JSON.parse(res.data));
-			},
-			fail: (err) => {
-				console.error('上传失败:', err);
-				emit('error', err);
-			},
-			complete: () => {
-				uploading.value = false;
-			}
-		});
-
-		// 监听上传进度
-		uploadTask.onProgressUpdate((res) => {
-			progress.value = res.progress;
-		});
-	} else {
-		// 浏览器环境
-		const formData = new FormData();
-		formData.append('file', file);
-
-		const xhr = new XMLHttpRequest();
-		xhr.open(props.requestMode, props.uploadUrl, true);
-		if (props.toKen) {
-			xhr.setRequestHeader('Authorization', `Bearer ${props.toKen}`);
-		}
-
-		xhr.upload.onprogress = (event) => {
-			if (event.lengthComputable) {
-				progress.value = (event.loaded / event.total) * 100;
-			}
-		};
-
-		xhr.onload = () => {
-			if (xhr.status >= 200 && xhr.status < 300) {
-				emit('success', JSON.parse(xhr.responseText));
-			} else {
-				console.error('上传失败:', xhr.statusText);
-				emit('error', { errMsg: '上传失败' });
-			}
-			uploading.value = false;
-		};
-
-		xhr.onerror = () => {
-			console.error('上传出错:', xhr.statusText);
-			emit('error', { errMsg: '上传出错' });
-			uploading.value = false;
-		};
-
-		xhr.send(formData);
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.upload-button {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	min-height: 140rpx;
-	border: 4rpx dashed;
-	border-color: v-bind('config.border.color');
-	border-radius: v-bind('config.borderRadius.semicircle');
-	background-color: v-bind('config.VUploadFileButton.backgroundColor');
-	color: v-bind('config.fontColor.mainText');
-	cursor: pointer;
-	transition: all 0.3s;
-
-	&:hover {
-		border-color: v-bind('config.border.default');
-		background-color: v-bind('config.VUploadFileButton.backgroundColor');
-		color: v-bind('config.fontColor.default');
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
-
-	&.uploading {
-		border-color: v-bind('config.border.default');
-		background-color: v-bind('config.VUploadFileButton.backgroundColor');
-		color: v-bind('config.fontColor.default');
-	}
-
-	.upload-icon {
-		margin-bottom: 8rpx;
-		.icon-upload {
-			font-size: v-bind('config.fontSize.mediumText');
-		}
-	}
-
-	.upload-text {
-		font-size: v-bind('config.fontSize.mediumText');
-	}
-
-	.upload-progress {
-		width: 100%;
-		text-align: center;
-	}
-
-	.progress-bar {
-		width: 100%;
-		height: 16rpx;
-		background-color: v-bind('config.VUploadFileButton.backgroundColor');
-		border-radius: 4rpx;
-		overflow: hidden;
-		margin-bottom: 8rpx;
-	}
-
-	.progress-bar-filled {
-		height: 100%;
-		background-color: v-bind('config.backgroundColor.default');
-		width: 0;
-		transition: width 0.3s;
-	}
-
-	.progress-text {
-		font-size: v-bind('config.fontSize.mediumText');
-		color: v-bind('config.fontColor.default');
-	}
-
-	.selected-file {
-		width: 100%;
-		text-align: center;
-	}
-
-	.file-name {
-		font-size: v-bind('config.fontSize.mediumText');
-		margin-bottom: 6rpx;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.file-info {
-		font-size: v-bind('config.fontSize.mediumText');
-		color: v-bind('config.fontColor.info');
-	}
-}
-</style>

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

@@ -1,175 +0,0 @@
-<template>
-	<view class="v-video-container">
-		<video
-			:id="videoId"
-			:src="videoContext.src"
-			:poster="poster"
-			:autoplay="autoplay"
-			:controls="controls"
-			:loop="loop"
-			:muted="muted"
-			:object-fit="objectFit"
-			:class="videoClass"
-			:style="videoStyle"
-			@play="handlePlay"
-			@pause="handlePause"
-			@ended="handleEnded"
-			@click="handleVideoClick"
-			@touchstart="handleTouchStart"
-			@touchmove="handleTouchMove"
-			@touchend="handleTouchEnd"
-			:error="handleError"
-			style="width: 100%; height: 100%"
-		></video>
-		<!-- 加载插槽 -->
-		<slot name="loading" v-if="isLoading" />
-
-		<!-- 错误插槽 -->
-		<slot name="error" v-if="isError" />
-
-		<!-- 新增：暂停插槽（非 loading / 非 error / 已暂停 / 未结束） -->
-		<slot name="paused" v-if="!isLoading && !isError && isPaused && !hasEnded" />
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch, reactive } from 'vue';
-
-interface Props {
-	src: string;
-	poster?: string;
-	autoplay?: boolean;
-	controls?: boolean;
-	loop?: boolean;
-	muted?: boolean;
-	objectFit?: string;
-	width?: string;
-	height?: string;
-	videoClass?: string;
-	videoStyle?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	poster: '',
-	autoplay: false,
-	controls: true,
-	loop: false,
-	muted: false,
-	objectFit: 'contain',
-	width: '100%',
-	height: '100%',
-	videoClass: '',
-	videoStyle: ''
-});
-
-const emit = defineEmits(['play', 'pause', 'ended', 'error']);
-
-const videoId = ref('video_' + Date.now());
-const isLoading = ref(true);
-const isError = ref(false);
-const videoContext = reactive({
-	src: props.src
-});
-const videoElement = ref(null);
-const touchStartX = ref(0);
-const touchStartTime = ref(0);
-const isLongPress = ref(false);
-const clickNumber = ref(0);
-const isPaused = ref(true);
-const hasEnded = ref(false);
-
-onMounted(() => {
-	videoElement.value = uni.createVideoContext(videoId.value);
-});
-
-watch(
-	() => props.src,
-	(newValue) => {
-		isLoading.value = true;
-		if (newValue) {
-			videoContext.src = newValue;
-		}
-	},
-	{ immediate: true }
-);
-watch(
-	() => props.src,
-	(newValue) => {
-		isLoading.value = true;
-		if (newValue) {
-			videoContext.src = newValue;
-		}
-	},
-	{ immediate: true }
-);
-
-const handlePlay = () => {
-	isLoading.value = false;
-	isError.value = false;
-	isPaused.value = false;
-	hasEnded.value = false;
-	emit('play');
-};
-
-const handlePause = () => {
-	isPaused.value = true;
-	emit('pause');
-};
-
-const handleEnded = () => {
-	hasEnded.value = true;
-	isPaused.value = true;
-	emit('ended');
-};
-
-const handleError = (event: Event) => {
-	isLoading.value = false;
-	isError.value = true;
-	emit('error', event);
-};
-
-const handleVideoClick = () => {
-	if (!props.controls && videoElement.value) {
-		clickNumber.value++;
-		if (clickNumber.value % 2 == 0) {
-			videoElement.value.play();
-		} else {
-			videoElement.value.pause();
-		}
-	}
-};
-
-const handleTouchStart = (event) => {
-	touchStartX.value = event.touches[0].clientX;
-	touchStartTime.value = Date.now();
-	setTimeout(() => {
-		if (Date.now() - touchStartTime.value > 500 && !isLongPress.value) {
-			isLongPress.value = true;
-		}
-	}, 500);
-};
-
-const handleTouchMove = (event) => {
-	if (!props.controls && isLongPress.value && videoElement.value) {
-		const touchMoveX = event.touches[0].clientX;
-		const videoWidth = videoElement.value.videoWidth;
-		const seekTime = videoElement.value.currentTime;
-		const duration = videoElement.value.duration;
-		const moveDistance = touchMoveX - touchStartX.value;
-		const seekPercentage = moveDistance / videoWidth;
-		const newTime = Math.max(0, Math.min(duration, seekTime + seekPercentage * duration));
-		videoElement.value.currentTime = newTime;
-	}
-};
-
-const handleTouchEnd = () => {
-	isLongPress.value = false;
-};
-</script>
-
-<style scoped>
-.v-video-container {
-	width: 100%;
-	height: 100%;
-}
-</style>