v-uni-app-ui 1.0.0 → 1.0.2

package/components/model/compound/v-console/v-console.vue

@@ -0,0 +1,299 @@
+<template>
+	<view
+		v-if="!visible"
+		class="console-toggle"
+		:style="{ left: btnPos.x + 'rpx', top: btnPos.y + 'rpx' }"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+		@touchend="onTouchEnd"
+		@mousedown="onTouchStart"
+		@mousemove="onTouchMove"
+		@mouseup="onTouchEnd"
+		@click="toggle"
+	>
+		<v-button>控制台</v-button>
+	</view>
+	<view v-if="visible" class="v-console" :class="{ expanded: expanded }">
+		<view class="toolbar">
+			<view class="buttons">
+				<v-text-button size="medium" @click="toggle">关闭</v-text-button>
+				<v-text-button size="medium" @click="toggleExpand">
+					{{ expanded ? '收起' : '展开' }}
+				</v-text-button>
+				<v-text-button size="medium" @click="clear">清空</v-text-button>
+			</view>
+			<view class="filter">
+				<v-input v-model="keyword" placeholder="关键字筛选" class="keyword" @confirm="onKeywordConfirm" />
+				<v-select-picker :options="levels" :value="levelIndex" @confirm="onLevelConfirm" class="level" />
+			</view>
+		</view>
+		<scroll-view scroll-y class="list">
+			<view v-for="(log, i) in showList" :key="i" :class="'log ' + log.type">
+				<text v-if="log.time" class="time">{{ log.time }} {{ log.type }}</text>
+				<!-- <v-text :class="['msg', log.type]" :lines="log.blockLines" @longpress="copyLog(log.msg)">{{ log.msg }}</v-text> -->
+				<view class="msg" :class="log.type" @longpress="copyLog(log.msg)">
+					<v-text :lines="log.blockLines">{{ log.msg }}</v-text>
+				</view>
+				<v-text-button class="detail-info" @click="log.blockLines == 2 ? (log.blockLines = 999) : (log.blockLines = 2)">
+					{{ log.blockLines == 2 ? '详细' : '简略' }}
+				</v-text-button>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+
+const STORAGE_KEY = 'v-console-logs';
+const visible = ref(false);
+const toggle = () => (visible.value = !visible.value);
+
+const expanded = ref(false);
+const toggleExpand = () => (expanded.value = !expanded.value);
+
+const logs = ref([]);
+const keyword = ref('');
+const levelIndex = ref(0);
+const levels = [
+	{ label: '全部', value: 0 },
+	{ label: 'log', value: 1 },
+	{ label: 'info', value: 2 },
+	{ label: 'warn', value: 3 },
+	{ label: 'error', value: 4 },
+	{ label: 'debug', value: 5 }
+];
+
+const btnPos = ref({ x: 30, y: 100 });
+const dragging = ref(false);
+const startPos = ref({ x: 0, y: 0 });
+
+const rpx2px = (rpx) => (rpx * uni.getSystemInfoSync().windowWidth) / 750;
+
+onMounted(() => {
+	loadLogs();
+});
+
+const getPos = (e) => {
+	// #ifdef H5
+	return { x: e.clientX, y: e.clientY };
+	// #endif
+	// #ifndef H5
+	const touch = e.touches[0] || e.changedTouches[0];
+	return { x: touch.clientX, y: touch.clientY };
+	// #endif
+};
+
+/* 按下 */
+const onTouchStart = (e) => {
+	dragging.value = true;
+	startPos.value = getPos(e);
+};
+
+/* 移动 */
+const onTouchMove = (e) => {
+	if (!dragging.value) return;
+	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
+	const cur = getPos(e);
+	const dx = cur.x - startPos.value.x;
+	const dy = cur.y - startPos.value.y;
+
+	/* 转成 rpx */
+	const newX = btnPos.value.x + (dx * 750) / windowWidth;
+	const newY = btnPos.value.y + (dy * 750) / windowHeight;
+
+	/* 边界限制：0~屏幕宽/高 - 按钮宽/高(≈120rpx) */
+	btnPos.value.x = Math.max(0, Math.min(newX, (windowWidth * 750) / windowWidth - 120));
+	btnPos.value.y = Math.max(0, Math.min(newY, (windowHeight * 750) / windowWidth - 120));
+
+	startPos.value = cur;
+};
+
+const onTouchEnd = () => (dragging.value = false);
+
+if (typeof window !== 'undefined') {
+	window.onerror = (msg, url, line, col, error) => {
+		console.error('[Global Error]', msg, `${url}:${line}:${col}`, error?.stack);
+	};
+	window.onunhandledrejection = (e) => {
+		console.error('[Unhandled Promise]', e.reason);
+	};
+} else {
+	// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-QQ
+	wx.onError?.((res) => console.error('[wx Error]', res));
+	wx.onUnhandledRejection?.((res) => console.error('[wx Promise]', res.reason));
+	// #endif
+}
+
+
+['log', 'info', 'warn', 'error', 'debug'].forEach((type) => {
+	const origin = console[type];
+	console[type] = (...args) => {
+		origin.apply(console, args);
+		const time = new Date().toLocaleTimeString();
+		const msg = args.map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v))).join(' ');
+		const newLog = { type, msg, time, blockLines: 2 };
+		logs.value.unshift(newLog);
+		saveLogs();
+	};
+});
+
+const showList = computed(() => {
+	let list = logs.value;
+	if (levelIndex.value) {
+		list = list.filter((l) => l.type === levels[levelIndex.value].label.toLowerCase());
+	}
+
+	if (keyword.value.trim()) {
+		const k = keyword.value.trim().toLowerCase();
+		list = list.filter((l) => l.msg.toLowerCase().includes(k));
+	}
+	list.blockLines = 2;
+	return list;
+});
+const saveLogs = () => {
+	try {
+		// #ifdef H5
+		sessionStorage.setItem(STORAGE_KEY, JSON.stringify(logs.value));
+		// #endif
+		// #ifndef H5
+		uni.setStorageSync(STORAGE_KEY, logs.value);
+		// #endif
+	} catch (_) {}
+};
+
+const loadLogs = () => {
+	try {
+		let data = null;
+		// #ifdef H5
+		data = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '[]');
+		// #endif
+		// #ifndef H5
+		data = uni.getStorageSync(STORAGE_KEY) || [];
+		// #endif
+		logs.value = data;
+	} catch (_) {}
+};
+
+const clear = () => {
+	logs.value = [];
+	try {
+		// #ifdef H5
+		sessionStorage.removeItem(STORAGE_KEY);
+		// #endif
+		// #ifndef H5
+		uni.removeStorageSync(STORAGE_KEY);
+		// #endif
+	} catch (_) {}
+};
+
+const copyLog = (msg) => {
+	// #ifdef H5
+	const input = document.createElement('textarea');
+	input.value = msg;
+	document.body.appendChild(input);
+	input.select();
+	document.execCommand('copy');
+	document.body.removeChild(input);
+	uni.showToast({ title: '已复制', icon: 'none' });
+	// #endif
+	// #ifndef H5
+	uni.setClipboardData({ data: msg, showToast: false });
+	uni.showToast({ title: '已复制', icon: 'none' });
+	// #endif
+};
+const onKeywordConfirm = (e) => {
+	console.log(e);
+	keyword.value = e;
+};
+const onLevelConfirm = (e) => {
+	levelIndex.value = e;
+};
+</script>
+
+<style lang="scss" scoped>
+/* 悬浮开关按钮（黑底白字） */
+.console-toggle {
+	position: fixed;
+	right: 30rpx;
+	bottom: 100rpx;
+	z-index: 10000;
+}
+
+/* 控制台主体：白底黑字 */
+.v-console {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+	background: #fff;
+	color: #000;
+	font-family: monospace;
+	font-size: 0.75rem;
+	height: 120rpx; /* 默认收缩高度 */
+	transition: height 0.25s ease;
+	border-top: 1rpx solid #e5e5e5;
+
+	&.expanded {
+		height: 50%; /* 展开后高度 */
+	}
+
+	.toolbar {
+		display: flex;
+		padding: 12rpx 24rpx;
+		background: #f7f7f7;
+		border-bottom: 1rpx solid #e5e5e5;
+		flex-direction: column;
+		.buttons {
+			display: flex;
+		}
+		.filter {
+			display: flex;
+			.keyword {
+				flex: 1;
+				margin-right: 20rpx;
+			}
+			.level {
+				width: 200rpx;
+				:deep(.select-input) {
+					height: 60rpx;
+					line-height: 60rpx;
+				}
+			}
+		}
+	}
+
+	.list {
+		height: calc(100% - 100rpx);
+		padding: 16rpx;
+		.log {
+			display: flex;
+			line-height: 1.4;
+			margin-bottom: 8rpx;
+			.time {
+				margin-right: 12rpx;
+				color: #666;
+			}
+			.msg {
+				width: 50%;
+				&.log {
+					color: #008000;
+				}
+				&.info {
+					color: #0066cc;
+				}
+				&.warn {
+					color: #ff6600;
+				}
+				&.error {
+					color: #cc0000;
+				}
+				&.debug {
+					color: #666;
+				}
+			}
+		}
+	}
+}
+</style>

package/components/model/compound/v-date-time/v-date-time.vue

@@ -0,0 +1,261 @@
+<template>
+	<v-popup v-model:value="isPopupVisible" :title="title" :scrollHeight="scrollHeight" model="semicircle" @close="handleClose" @confirm="handleConfirm">
+		<view class="drum-select-container">
+			<view class="drum-select-content">
+				<v-scroll-list
+					:value="value.getFullYear()"
+					:options="generateYearRange(props.maxDateTime.getFullYear(), props.minDateTime.getFullYear())"
+					:scrollHeight="scrollHeight"
+					@update:value="handleValueChangeYear($event)"
+				/>
+				<v-text class="separate-symbol">:</v-text>
+				<v-scroll-list
+					:value="value.getMonth() + 1"
+					:options="generateMonthRange(props.maxDateTime.getMonth(), props.minDateTime.getMonth())"
+					:scrollHeight="scrollHeight"
+					@update:value="handleValueChangeMonth($event)"
+				/>
+				<v-text class="separate-symbol">:</v-text>
+				<v-scroll-list
+					:value="value.getDate()"
+					:options="generateDateRange(props.maxDateTime.getDate(), props.minDateTime.getDate())"
+					:scrollHeight="scrollHeight"
+					@update:value="handleValueChangeDate($event)"
+				/>
+				<v-text class="separate-symbol">:</v-text>
+				<v-scroll-list
+					:value="hoursSystem ? value.getHours() || 24 : value.getHours() % 12 || 12"
+					:options="generateHoursRange(props.maxDateTime.getHours(), props.minDateTime.getHours())"
+					:scrollHeight="scrollHeight"
+					@update:value="handleValueChangeHours($event)"
+				/>
+				<v-text class="separate-symbol">:</v-text>
+				<v-scroll-list
+					:value="value.getMinutes()"
+					:options="generateMinutesRange(props.maxDateTime.getMinutes(), props.minDateTime.getMinutes())"
+					:scrollHeight="scrollHeight"
+					@update:value="handleValueChangeMinutes($event)"
+				/>
+				<v-text class="separate-symbol">:</v-text>
+				<v-scroll-list
+					:value="value.getSeconds()"
+					:options="generateSecondsRange(props.maxDateTime.getSeconds(), props.minDateTime.getSeconds())"
+					:scrollHeight="scrollHeight"
+					@update:value="handleValueChangeSeconds($event)"
+				/>
+			</view>
+		</view>
+	</v-popup>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, inject } from 'vue';
+
+interface DrumSelectPicker {
+	value: any;
+	label: string;
+	children?: DrumSelectPicker[];
+}
+const props = defineProps({
+	title: {
+		type: String,
+		default: '',
+		required: true
+	},
+	scrollHeight: {
+		type: Number,
+		default: 400
+	},
+	value: {
+		type: Date,
+		default: new Date(),
+		required: true
+	},
+	show: {
+		type: Boolean,
+		default: true
+	},
+	minDateTime: {
+		type: Date,
+		default: new Date('1000-1-1'),
+		required: true
+	},
+	maxDateTime: {
+		type: Date,
+		default: new Date('9999-12-31'),
+		required: true
+	},
+	hoursSystem: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const emit = defineEmits([
+	'update:value',
+	'handleValueChangeYear',
+	'handleValueChangeMonth',
+	'handleValueChangeDate',
+	'handleValueChangeHours',
+	'handleValueChangeMinutes',
+	'handleValueChangeSeconds',
+	'close',
+	'confirm',
+	'update:show'
+]);
+
+const isPopupVisible = ref(props.show);
+const config = inject<any>('config');
+function generateYearRange(maxYear: any, minYear: any) {
+	const yearRange = [];
+	for (let year = maxYear; year >= minYear; year--) {
+		yearRange.push({
+			value: year,
+			label: `${year}`
+		});
+	}
+	return yearRange;
+}
+
+function generateMonthRange(maxMonth: any, minMonth: any) {
+	const monthRange = [];
+	for (let month = maxMonth + 1; month > minMonth; month--) {
+		monthRange.push({
+			value: month,
+			label: `${month}`
+		});
+	}
+	return monthRange;
+}
+
+function generateDateRange(maxDate: any, minDate: any) {
+	const dayRange = [];
+	const daysInMonth = new Date(props.value.getFullYear(), props.value.getMonth() + 1, 0).getDate();
+	const actualMaxDate = Math.min(maxDate, daysInMonth);
+	for (let day = actualMaxDate; day >= minDate; day--) {
+		dayRange.push({
+			value: day,
+			label: `${day}`
+		});
+	}
+	return dayRange;
+}
+
+function generateHoursRange() {
+	const hoursRange = [];
+	if (props.hoursSystem) {
+		// 24小时制
+		for (let hour = 24; hour > 0; hour--) {
+			hoursRange.push({
+				value: hour,
+				label: `${hour}`
+			});
+		}
+	} else {
+		// 12小时制
+		for (let hour = 12; hour >= 1; hour--) {
+			hoursRange.push({
+				value: hour,
+				label: `${hour}`
+			});
+		}
+	}
+	return hoursRange;
+}
+
+function generateMinutesRange() {
+	const minutesRange = [];
+	for (let minute = 60; minute > 0; minute--) {
+		minutesRange.push({
+			value: minute,
+			label: `${minute < 10 ? '0' + minute : minute}`
+		});
+	}
+	return minutesRange;
+}
+
+function generateSecondsRange() {
+	const secondsRange = [];
+	for (let second = 60; second > 0; second--) {
+		secondsRange.push({
+			value: second,
+			label: `${second < 10 ? '0' + second : second}`
+		});
+	}
+	return secondsRange;
+}
+
+const handleValueChangeYear = (year: number) => {
+	props.value.setFullYear(year);
+	emit('handleValueChangeYear', year);
+};
+const handleValueChangeMonth = (month: number) => {
+	props.value.setMonth(month);
+	emit('handleValueChangeMonth', month);
+};
+const handleValueChangeDate = (date: number) => {
+	props.value.setDate(date);
+	emit('handleValueChangeDate', date);
+};
+const handleValueChangeHours = (hours: number) => {
+	props.value.setHours(hours);
+	emit('handleValueChangeHours', hours);
+};
+const handleValueChangeMinutes = (minutes: number) => {
+	props.value.setMinutes(minutes);
+	emit('handleValueChangeMinutes', minutes);
+};
+const handleValueChangeSeconds = (seconds: number) => {
+	props.value.setSeconds(seconds);
+	emit('handleValueChangeSeconds', seconds);
+};
+
+watch(
+	() => props.show,
+	(val) => {
+		isPopupVisible.value = val;
+	}
+);
+
+const handleClose = () => {
+	isPopupVisible.value = false;
+	emit('update:show', false);
+	emit('close', false);
+};
+const handleConfirm = () => {
+	isPopupVisible.value = false;
+	emit('update:show', false);
+	emit('confirm', props.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.drum-select-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+
+.drum-select-content {
+	position: relative;
+	width: 100%;
+	height: 60%;
+	overflow: hidden;
+	display: flex;
+	view {
+		flex: 1;
+	}
+}
+
+.separate-symbol {
+	font-size: v-bind("config.fontSize.mediumText");
+	height: 85rpx;
+	line-height: 85rpx !important;
+	display: block !important;
+	background-color: v-bind('config.VDateTime.backgroundColor');
+	border-top: 1rpx solid v-bind('config.border.color');
+	border-bottom: 1rpx solid v-bind('config.border.color');
+}
+</style>