v-uni-app-ui 1.0.4 → 1.0.6

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>

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

@@ -1,158 +0,0 @@
-<template>
-	<view v-show="show" :class="['v-window', `v-window--size-${size}`, { 'v-window--fullscreen': fullscreen }]" :style="windowStyle">
-		<view class="v-window-header" v-if="title">
-			<view class="v-window-title">{{ title }}</view>
-			<view class="v-window-actions" v-if="showActions">
-				<button class="v-window-action" @click="minimize">
-					<text class="icon-minimize">-</text>
-				</button>
-				<button class="v-window-action" @click="maximize">
-					<text class="icon-maximize">□</text>
-				</button>
-				<button class="v-window-action" @click="close">
-					<text class="icon-close">×</text>
-				</button>
-			</view>
-		</view>
-		<view class="v-window-content">
-			<slot></slot>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { ref, computed,inject,watch } from 'vue';
-
-const props = defineProps({
-	title: {
-		type: String,
-		default: ''
-	},
-	fullscreen: {
-		type: Boolean,
-		default: false
-	},
-	showActions:{
-		type:Boolean,
-		default:true
-	},
-	show:{
-		type:Boolean,
-		default:true
-	}
-});
-
-const emit = defineEmits(['update:show','update:showActions','update:fullscreen','close', 'minimize', 'maximize']);
-const config = inject<any>('config');
-const windowStyle = computed(() => {
-	return {
-		width: props.fullscreen ? '100%' : undefined,
-		height: props.fullscreen ? '100%' : undefined,
-		'--window-title-color': '#333',
-		'--window-content-bg': '#fff',
-		'--window-border-color': '#e0e0e0'
-	};
-});
-
-const showActions = ref(props.showActions);
-const show = ref(props.show);
-const fullscreen = ref(props.fullscreen);
-
-watch(()=>props.show,(newValue)=>{
-	show.value = newValue;
-},{
-	immediate:true
-})
-watch(()=>props.showActions,(newValue)=>{
-	showActions.value = newValue;
-},{
-	immediate:true
-})
-watch(()=>props.fullscreen,(newValue)=>{
-	fullscreen.value = newValue;
-},{
-	immediate:true
-})
-
-
-const close = () => {
-	show.value = false;
-	emit('update:show',false)
-	emit('close');
-};
-
-const minimize = () => {
-	fullscreen.value = false;
-	emit('update:fullscreen',false);
-	emit('minimize');
-};
-
-const maximize = () => {
-	fullscreen.value = true;
-	emit('update:fullscreen',true);
-	emit('maximize');
-};
-</script>
-
-<style lang="scss" scoped>
-.v-window {
-	width: 80%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	border: 1rpx solid var(--window-border-color);
-	border-radius: 4rpx;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
-	background-color: var(--window-content-bg);
-	overflow: hidden;
-	margin: auto;
-
-	&--fullscreen {
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		z-index: 1000;
-	}
-
-	.v-window-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 8rpx 16rpx;
-		background-color: var(--window-content-bg);
-		border-bottom: 1rpx solid var(--window-border-color);
-
-		.v-window-title {
-			font-size: v-bind("config.fontSize.mediumTitle");
-			font-weight: bold;
-			color: var(--window-title-color);
-		}
-
-		.v-window-actions {
-			display: flex;
-		}
-
-		.v-window-action {
-			background: none;
-			border: none;
-			cursor: pointer;
-			font-size: v-bind("config.fontSize.smallText");
-			margin-left: 8rpx;
-
-			&:hover {
-				background-color: #f5f5f5;
-			}
-		}
-	}
-
-	.v-window-content {
-		flex: 1;
-		padding: 16rpx;
-		overflow: auto;
-	}
-}
-</style>