v-uni-app-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,91 @@
+<template>
+	<view :class="['v-title', `v-title--level-${level}`]" :style="titleStyle">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed,inject } from 'vue';
+
+const props = defineProps({
+	level: {
+		type: Number,
+		default: 1,
+		validator: (val: number) => val >= 1 && val <= 6
+	},
+	fontSize: {
+		type: String,
+		default: ''
+	},
+	color: {
+		type: String,
+		default: ''
+	}
+});
+
+const config = inject<any>('config');
+const titleStyle = computed(() => {
+	const style: Record<string, string> = {};
+	if (props.fontSize) {
+		style['font-size'] = props.fontSize;
+	}
+	if (props.color) {
+		style['color'] = props.color;
+	}
+	return style;
+});
+</script>
+
+<style lang="scss" scoped>
+.v-title {
+	font-weight: bold;
+
+	&--level-1 {
+		font-size: v-bind("config.fontSize.largeTitle");
+		color: v-bind("config.fontColor.mianTitle");
+	}
+
+	&--level-2 {
+		font-size: v-bind("config.fontSize.mediumTitle");
+		color: v-bind("config.fontColor.mianTitle");
+	}
+
+	&--level-3 {
+		font-size: v-bind("config.fontSize.smallTitle");
+		color: v-bind("config.fontColor.mianTitle");
+	}
+
+	&--level-4 {
+		font-size: v-bind("config.fontSize.largeText");
+		color: v-bind("config.fontColor.subTitle");
+	}
+
+	&--level-5 {
+		font-size: v-bind("config.fontSize.mediumText");
+		color: v-bind("config.fontColor.subTitle");
+	}
+
+	&--level-6 {
+		font-size: v-bind("config.fontSize.smallText");
+		color: v-bind("config.fontColor.subTitle");
+	}
+
+	@media (prefers-color-scheme: dark) {
+		&--level-1,
+		&--level-2,
+		&--level-3 {
+			color: #e0e0e0;
+		}
+
+		&--level-4,
+		&--level-5,
+		&--level-6 {
+			color: #b0b0b0;
+		}
+
+		:deep(.v-title) {
+			color: #e0e0e0;
+		}
+	}
+}
+</style>

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

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

@@ -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>