v-uni-app-ui 1.0.0 → 1.0.4

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

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

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

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