v-uni-app-ui 1.0.0 → 1.0.2

package/components/layout/v-infinite-scroll/v-infinite-scroll.vue

@@ -0,0 +1,172 @@
+<template>
+	<scroll-view
+		class="infinite-scroll-container"
+		:scroll-y="true"
+		:style="containerStyle"
+		@scroll="handleScroll"
+		:scroll-with-animation="false"
+		@scrolltolower="handleScrollToLower"
+	>
+		<slot />
+		<!-- 加载状态提示 -->
+		<template v-if="$slots.loading">
+			<slot name="loading" />
+		</template>
+		<template v-else-if="loading">
+			<view class="status-text">加载中...</view>
+		</template>
+		<template v-if="$slots.null">
+			<slot name="null" />
+		</template>
+		<template v-else-if="noMore">
+			<view class="status-text">没有更多了</view>
+		</template>
+	</scroll-view>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, nextTick,inject } from 'vue';
+
+const props = defineProps({
+	load: {
+		type: Function,
+		required: true
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	immediate: {
+		type: Boolean,
+		default: true
+	},
+	distance: {
+		type: Number,
+		default: 200
+	},
+	throttle: {
+		type: Number,
+		default: 200
+	},
+	containerStyle: {
+		type: Object,
+		default: () => ({})
+	},
+	noMore: {
+		type: Boolean,
+		default: false
+	},
+	timeout: {
+		type: Number,
+		default: 5000
+	}
+});
+
+const config = inject('config');
+const loading = ref(false);
+const lastCall = ref(0);
+const isFirstLoad = ref(true);
+const lastScrollHeight = ref(0);
+let timeoutId: NodeJS.Timeout | null = null;
+
+// 节流函数
+const throttle = (fn: Function, delay: number) => {
+	let lastTime = 0;
+	return function (this: any, ...args: any[]) {
+		const now = Date.now();
+		if (now - lastTime >= delay) {
+			fn.apply(this, args);
+			lastTime = now;
+		}
+	};
+};
+
+// 处理滚动事件
+const handleScroll = throttle((event: any) => {
+	const { scrollTop, scrollHeight } = event.detail;
+	lastScrollHeight.value = scrollHeight;
+
+	// 只有当内容高度变化时才处理
+	if (scrollHeight !== lastScrollHeight.value) {
+		checkLoadMore(scrollTop, scrollHeight);
+	}
+}, props.throttle);
+
+// 处理滚动到底部事件（作为兜底）
+const handleScrollToLower = () => {
+	if (!loading.value && !props.noMore && !props.disabled) {
+		loadMore();
+	}
+};
+
+// 检查是否需要加载更多
+const checkLoadMore = (scrollTop: number, scrollHeight: number) => {
+	const now = Date.now();
+	if (now - lastCall.value < props.throttle) return;
+	lastCall.value = now;
+
+	// 计算距离底部的距离
+	const triggerPosition = scrollTop + props.distance >= scrollHeight - props.distance;
+
+	if (triggerPosition) {
+		loadMore();
+	}
+};
+
+// 加载更多数据
+const loadMore = async () => {
+	if (props.disabled || loading.value || props.noMore) return;
+
+	loading.value = true;
+
+	try {
+		await props.load();
+		// 等待DOM更新
+		await nextTick();
+	} catch (e) {
+		console.error('加载失败:', e);
+	} finally {
+		loading.value = false;
+		isFirstLoad.value = false;
+	}
+};
+
+// 初始化检查
+const checkInitialLoad = () => {
+	// 不使用节点查询，改为延迟执行首次加载
+	if (props.immediate && isFirstLoad.value) {
+		setTimeout(() => {
+			loadMore();
+		}, 100);
+	}
+};
+
+onMounted(() => {
+	checkInitialLoad();
+});
+
+onUnmounted(() => {
+	if (timeoutId) {
+		clearTimeout(timeoutId);
+	}
+});
+</script>
+
+<style lang="scss">
+.infinite-scroll-container {
+	box-sizing: border-box;
+	height: 100%;
+	position: relative;
+
+	.status-text {
+		padding: 20rpx;
+		text-align: center;
+		color: v-bind('config.fontColor.mainText');
+		font-size: v-bind('config.fontSize.mediumText');
+
+		&:last-child {
+			padding-bottom: 40rpx;
+		}
+	}
+}
+</style>

package/components/layout/v-list/v-list.vue

@@ -0,0 +1,43 @@
+<template>
+  <view :class="['v-list', `v-list--border-${borderMode}`]">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed,inject } from 'vue';
+
+const props = defineProps({
+  borderMode: {
+    type: String,
+    default: 'all',
+    validator: (value: any) => {
+      return ['all', 'none', 'item'].includes(value);
+    }
+  }
+});
+
+const config = inject<any>('config');
+</script>
+
+<style lang="scss" scoped>
+.v-list {
+  width: 100%;
+  background-color: v-bind("config.backgroundColor.reversal");
+
+  &--border-all {
+    border: 1rpx solid v-bind("config.border.color");
+    border-radius: 4rpx;
+  }
+
+  &--border-none {
+    border: none;
+  }
+
+  &--border-item {
+    ::v-deep .v-list-item:not(:last-child) {
+      border-bottom: 1px solid v-bind("config.border.color");
+    }
+  }
+}
+</style>

package/components/layout/v-row/v-row.vue

@@ -0,0 +1,142 @@
+<template>
+	<view :class="['v-row', `v-row--justify-${justify}`, `v-row--align-${align}`, `v-row--border-${borderMode}`]" :style="rowStyle">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+/**
+ * v-row 行
+ * gutter	子元素之间的间距	Number	0	-
+ * justify	水平排列方式	String	'start'	'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly'
+ * align	垂直排列方式	String	'top'	'top', 'center', 'bottom', 'stretch', 'baseline'
+ * borderMode	边框模式	String	'all'	'all', 'none', 'bottom', 'top', 'left', 'right', 'ends', 'up-down'
+ */
+const props = defineProps({
+	gutter: {
+		type: Number,
+		default: 0
+	},
+	justify: {
+		type: String,
+		default: 'start',
+		validator: (value: any) => {
+			return ['start', 'end', 'center', 'space-between', 'space-around', 'space-evenly'].includes(value);
+		}
+	},
+	align: {
+		type: String,
+		default: 'top',
+		validator: (value: string) => {
+			return ['top', 'center', 'bottom', 'stretch', 'baseline'].includes(value);
+		}
+	},
+	borderMode: {
+		type: String,
+		default: 'none',
+		validator: (value: string) => {
+			return ['all', 'none', 'bottom', 'top', 'left', 'right', 'ends', 'up-down'].includes(value);
+		}
+	}
+});
+
+const config = inject<any>('config');
+
+const rowStyle = computed(() => {
+	const style: Record<string, string | number> = {};
+	if (props.gutter) {
+		style.marginLeft = `-${props.gutter / 2}rpx`;
+		style.marginRight = `-${props.gutter / 2}rpx`;
+	}
+	return style;
+});
+</script>
+
+<style lang="scss" scoped>
+.v-row {
+	display: flex;
+	flex-wrap: wrap;
+	box-sizing: border-box;
+	border: 1rpx solid v-bind('config.border.color');
+	border-radius: 4rpx;
+
+	// 边框模式
+	&--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');
+	}
+
+	// 对齐方式
+	&--justify-start {
+		justify-content: flex-start;
+	}
+
+	&--justify-end {
+		justify-content: flex-end;
+	}
+
+	&--justify-center {
+		justify-content: center;
+	}
+
+	&--justify-space-between {
+		justify-content: space-between;
+	}
+
+	&--justify-space-around {
+		justify-content: space-around;
+	}
+
+	&--justify-space-evenly {
+		justify-content: space-evenly;
+	}
+
+	// 垂直对齐
+	&--align-top {
+		align-items: flex-start;
+	}
+
+	&--align-center {
+		align-items: center;
+	}
+
+	&--align-bottom {
+		align-items: flex-end;
+	}
+
+	&--align-stretch {
+		align-items: stretch;
+	}
+
+	&--align-baseline {
+		align-items: baseline;
+	}
+}
+</style>

package/components/layout/v-waterfall/v-waterfall.vue

@@ -0,0 +1,79 @@
+<template>
+	<view class="v-waterfall">
+		<view v-for="(column, columnIndex) in columnsList" :key="columnIndex" class="column">
+			<view v-for="(item, itemIndex) in column" :key="itemIndex" class="waterfall-item">
+				<slot name="item" :item="item" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+interface WaterfallItem {
+	height: number;
+	content: any;
+}
+
+const props = defineProps({
+	items: {
+		type: Array as () => WaterfallItem[],
+		default: () => []
+	},
+	columns: {
+		type: Number,
+		default: 2
+	},
+	columnWidth: {
+		type: String,
+		default: '50%'
+	}
+});
+
+const columnsList = ref<WaterfallItem[][]>([]);
+
+const splitIntoColumns = () => {
+	const cols = Array.from({ length: props.columns }, () => []);
+	props.items.forEach((item, index) => {
+		const columnIndex = index % props.columns;
+		cols[columnIndex].push(item);
+	});
+	columnsList.value = cols;
+};
+
+splitIntoColumns();
+
+watch(
+	() => props.items,
+	() => {
+		splitIntoColumns();
+	},
+	{ deep: true }
+);
+
+watch(
+	() => props.columns,
+	() => {
+		splitIntoColumns();
+	}
+);
+</script>
+
+<style lang="scss" scoped>
+.v-waterfall {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.column {
+	width: v-bind('100 / props.columns + "%"');
+	box-sizing: border-box;
+	padding: 0 5rpx;
+}
+
+.waterfall-item {
+	margin-bottom: 5rpx;
+	padding: 10rpx 0;
+}
+</style>

package/components/model/compound/v-checkbox-group/v-checkbox-group.vue

@@ -0,0 +1,96 @@
+<template>
+	<view :class="['v-checkbox-group', vertical ? 'vertical' : 'horizontal']" :style="groupStyle" role="checkboxgroup">
+		<slot />
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { provide, computed, ref, watch } from 'vue';
+
+/**
+ * v-checkbox-group 复选按钮组
+ * value	双向绑定
+ * vertical	布局方向		默认值:false		可选值:true竖		false:行
+ * disabled	是否禁用		默认值:false		可选值:false不禁用	true禁用
+ * indeterminate	是否开启全选/半选功能	默认值:false			可选值:false不开启	true开启
+ * groupStyle	自定义样式
+ * 相关事件:change
+ */
+const props = defineProps({
+	value: {
+		type: Array as () => Array<string | number | object>,
+		default: () => []
+	},
+	vertical: {
+		type: Boolean,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	indeterminate: {
+		type: Boolean,
+		default: false
+	},
+	groupStyle: {
+		type: Object,
+		default: () => ({})
+	}
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const checkedValues = ref([...props.value]);
+
+provide('checkboxGroup', {
+	name: 'vCheckboxGroup',
+	checkedValues,
+	disabled: computed(() => props.disabled),
+	indeterminate: computed(() => props.indeterminate)
+});
+
+watch(
+	() => props.value,
+	(newVal) => {
+		checkedValues.value = [...newVal];
+	}
+);
+
+const updateValues = (newValues: any[]) => {
+	checkedValues.value = newValues;
+	emit('update:value', newValues);
+	emit('change', newValues);
+};
+
+defineExpose({
+	updateValues
+});
+</script>
+
+<style lang="scss">
+.v-checkbox-group {
+	&.horizontal {
+		display: flex;
+		flex-wrap: wrap;
+
+		.v-checkbox {
+			margin-right: 32rpx;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+
+	&.vertical {
+		.v-checkbox {
+			margin-bottom: 24rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,20 @@
+export function initVConsole() {
+	const STORAGE_KEY = 'v-console-logs';
+	const logs = [];
+
+	['log', 'info', 'warn', 'error', 'debug'].forEach((type) => {
+		const original = console[type];
+		console[type] = (...args) => {
+			original.apply(console, args);
+			const time = new Date().toLocaleTimeString();
+			const msg = args.map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v))).join(' ');
+			logs.unshift({
+				type,
+				msg,
+				time,
+				blockLines: 2
+			});
+			uni.setStorageSync(STORAGE_KEY, logs);
+		};
+	});
+}