v-uni-app-ui 1.0.0 → 1.0.4

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

@@ -0,0 +1,187 @@
+<template>
+	<!-- <text :class="['v-text', `v-text--${type}`, `v-text--${size}`]" :style="textStyle">
+		<slot v-if="!processedText">{{ processedText }}</slot>
+		<view v-html="processedText">
+			
+		</view>
+	</text> -->
+	<view :class="['v-text', `v-text--${type}`, `v-text--${size}`]" :style="textStyle">
+		<slot v-if="!processedText">{{ processedText }}</slot>
+		<rich-text :nodes="processedText"></rich-text>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+	text: {
+		type: String,
+		default: ''
+	},
+	type: {
+		type: String,
+		default: 'default',
+		validator: (value: string) => {
+			return ['default', 'primary', 'succeed', 'warning', 'delete', 'info'].includes(value);
+		}
+	},
+	size: {
+		type: String,
+		default: 'medium',
+		validator: (value: string) => {
+			return ['small', 'medium', 'large'].includes(value);
+		}
+	},
+	color: {
+		type: String,
+		default: ''
+	},
+	lineHeight: {
+		type: [Number, String],
+		default: 1.5
+	},
+	mode: {
+		type: String,
+		default: '',
+		validator: (value: string) => {
+			return ['', 'timestamp', 'amount'].includes(value);
+		}
+	},
+	encrypt: {
+		type: String,
+		default: '',
+		validator: (value: string) => {
+			return ['', 'phone', 'name'].includes(value);
+		}
+	},
+	lines: {
+		type: [Number, String],
+		default: 1
+	},
+	format: {
+		type: String,
+		default: ''
+	},
+	keyword: { type: String, default: '' },
+	keywordColor: { type: String, default: '#ff5e5e' }
+});
+
+const config = inject<any>('config');
+
+const processedText = computed(() => {
+	let result = props.text;
+
+	if (props.mode === 'timestamp' && props.format) {
+		// 尝试将文本转换为日期对象
+		let date: Date;
+		if (/^\d+$/.test(props.text)) {
+			// 如果是时间戳（数字）
+			date = new Date(parseInt(props.text));
+		} else {
+			// 如果是日期字符串
+			date = new Date(props.text);
+		}
+
+		if (!isNaN(date.getTime())) {
+			const year = date.getFullYear();
+			const month = date.getMonth() + 1;
+			const day = date.getDate();
+			const hours = date.getHours();
+			const minutes = date.getMinutes();
+			const seconds = date.getSeconds();
+
+			result = props.format
+				.replace('yyyy', year.toString())
+				.replace('MM', month.toString().padStart(2, '0'))
+				.replace('dd', day.toString().padStart(2, '0'))
+				.replace('HH', hours.toString().padStart(2, '0'))
+				.replace('mm', minutes.toString().padStart(2, '0'))
+				.replace('ss', seconds.toString().padStart(2, '0'));
+		}
+	} else if (props.mode === 'amount' && props.format) {
+		const amount = parseFloat(props.text);
+		if (!isNaN(amount)) {
+			if (props.format === '$') {
+				result = `$${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+			} else if (props.format === '￥') {
+				result = `￥${amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+			}
+		}
+	}
+
+	if (props.encrypt === 'phone' && result.length === 11) {
+		result = result.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+	} else if (props.encrypt === 'name' && result.length > 1) {
+		const firstChar = result.charAt(0);
+		result = firstChar + '****' + result.slice(-1);
+	}
+
+	// 关键字高亮（最后一步）
+	if (props.keyword) {
+		const reg = new RegExp(`(${props.keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+		// 先转义再替换
+		const escape = (str: string) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;');
+		result = escape(result).replace(reg, `<span style="color:${props.keywordColor}" class="v-text__keyword">$1</span>`);
+	}
+
+	return result;
+});
+
+const textStyle = computed(() => {
+	const style: Record<string, string | number> = {};
+	if (props.color) style.color = props.color;
+	if (props.lineHeight) style.lineHeight = typeof props.lineHeight === 'number' ? `${props.lineHeight}` : props.lineHeight;
+	if (props.lines) {
+		style.webkitLineClamp = typeof props.lines === 'number' ? `${props.lines}` : props.lines;
+		style.overflow = 'hidden';
+		style.textOverflow = 'ellipsis';
+		style.display = '-webkit-box';
+		style.webkitBoxOrient = 'vertical';
+	}
+	return style;
+});
+</script>
+
+<style lang="scss" scoped>
+.v-text {
+	font-size: v-bind('config.fontSize.mediumText');
+	line-height: 1.5;
+
+	&--default {
+		color: v-bind('config.fontColor.text');
+	}
+
+	&--primary {
+		color: v-bind('config.fontColor.default');
+	}
+
+	&--succeed {
+		color: v-bind('config.fontColor.succeed');
+	}
+
+	&--warn {
+		color: v-bind('config.fontColor.warn');
+	}
+
+	&--delete {
+		color: v-bind('config.fontColor.delete');
+	}
+
+	&--info {
+		color: v-bind('config.fontColor.info');
+	}
+
+	&--small {
+		font-size: v-bind('config.fontSize.smallText');
+	}
+
+	&--medium {
+		font-size: v-bind('config.fontSize.mediumText');
+	}
+
+	&--large {
+		font-size: v-bind('config.fontSize.largeText');
+	}
+}
+</style>

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

@@ -0,0 +1,178 @@
+<template>
+	<view class="v-textarea-container">
+		<textarea
+			:value="inputValue"
+			:class="['v-textarea', { 'v-textarea--disabled': disabled, 'v-textarea--focused': focused }, `v-textarea--border--${boderModel}`]"
+			:placeholder="placeholder"
+			:maxlength="maxlength || undefined"
+			:disabled="disabled"
+			:auto-height="autoHeight"
+			@input="handleInput"
+			@focus="handleFocus"
+			@blur="handleBlur"
+			@confirm="handleConfirm"
+		></textarea>
+		<view v-if="showCounter" class="v-textarea-counter">{{ currentLength }}/{{ maxlength }}</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch,inject } from 'vue';
+
+/**
+ * v-textarea 文本框
+ * value 		双向绑定
+ * placeholder 	提示词
+ * maxlength	最大输入限制
+ * disabled		是否禁用				默认值:false		可选值:true禁用	false不禁用
+ * autoHeight	是否自动延长高度		默认值:true		可选值:true禁用	false不禁用
+ * boderModel	边框模式				默认值:all		可选值:all普通边框 nont无边框模式 bottom底部边框模式 top上边框模式 left左边框模式 right右边框模式 ends左右两端边框模式 up-down上下边框模式
+ * showCounter	是否显示字数
+ * inputTextPosition 输入框文本位置  默认值：left  可选值：left居左 right居右 center居中
+ * 相关事件:focus、blur、confirm
+ */
+const props = defineProps({
+	value: {
+		type: String,
+		default: '',
+		required: true
+	},
+	placeholder: {
+		type: String,
+		default: ''
+	},
+	maxlength: {
+		type: Number,
+		default: null
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	autoHeight: {
+		type: Boolean,
+		default: true
+	},
+	boderModel: {
+		type: String,
+		default: 'all'
+	},
+	showCounter: {
+		type: Boolean,
+		default: false
+	},
+	inputTextPosition:{
+		type:String,
+		default:"left"
+	}
+});
+
+const emit = defineEmits(['update:value', 'input', 'focus', 'blur', 'confirm']);
+
+const config = inject<any>('config');
+const inputValue = ref(props.value);
+const focused = ref(false);
+const currentLength = ref(props.value.length);
+
+watch(
+	() => props.value,
+	(newVal) => {
+		inputValue.value = newVal;
+		currentLength.value = newVal.length;
+	}
+);
+
+const handleInput = (e: any) => {
+	const value = e.detail.value;
+	inputValue.value = value;
+	currentLength.value = value.length;
+	emit('update:value', value);
+	emit('input', value);
+};
+
+const handleFocus = (e: any) => {
+	focused.value = true;
+	emit('focus', e);
+};
+
+const handleBlur = (e: any) => {
+	focused.value = false;
+	emit('blur', e);
+};
+
+const handleConfirm = (e: any) => {
+	emit('confirm', e);
+};
+</script>
+
+<style lang="scss" scoped>
+.v-textarea-container {
+	position: relative;
+}
+
+.v-textarea {
+	width: 100%;
+	padding: 24rpx;
+	box-sizing: border-box;
+	background-color: #fff;
+	font-size:  v-bind("config.fontSize.mediumText");
+	line-height: 1.5;
+	transition: border-color 0.3s;
+	resize: none;
+	text-align: v-bind("props.inputTextPosition");
+
+	&--border--all {
+		border-radius: 6rpx;
+		border: 1px solid v-bind("config.border.color");
+
+		&.v-textarea--focused {
+			border-color: v-bind("config.border.default");
+			box-shadow: v-bind("config.VInput.boxShadow");
+		}
+	}
+
+	&--border--none {
+		border: none;
+	}
+
+	&--border--bottom {
+		border-bottom: 1rpx solid v-bind("config.border.color");
+	}
+
+	&--border--top {
+		border-top: 1rpx solid v-bind("config.border.color");
+	}
+
+	&--border--left {
+		border-left: 1rpx solid v-bind("config.border.color");
+	}
+
+	&--border--right {
+		border-right: 1rpx solid v-bind("config.border.color");
+	}
+
+	&--border--ends {
+		border-left: 1rpx solid v-bind("config.border.color");
+		border-right: 1rpx solid v-bind("config.border.color");
+	}
+
+	&--border--up-down {
+		border-top: 1rpx solid v-bind("config.border.color");
+		border-bottom: 1rpx solid v-bind("config.border.color");
+	}
+	
+	&--disabled{
+		opacity: v-bind('config.opacity.disabled');
+		background-color: v-bind('config.backgroundColor.disabled');
+		color: v-bind('config.fontColor.text');
+	}
+}
+
+.v-textarea-counter {
+	position: absolute;
+	bottom: 5rpx;
+	right: 5rpx;
+	font-size: v-bind("config.fontSize.mediumText");
+	color: #999;
+}
+</style>

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>