v-uni-app-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,253 @@
+<template>
+	<view class="v-steps" :class="[direction]">
+		<view v-for="(step, index) in steps" :key="index" class="step-item" :class="[getStepStatus(index), { 'last-item': index === steps.length - 1 }]">
+			<view class="step-icon-container">
+				<view class="step-icon">
+					<text v-if="index < active" class="icon-check">✓</text>
+					<text v-else-if="index === active" class="step-number">{{ index + 1 }}</text>
+					<text v-else class="step-number">{{ index + 1 }}</text>
+				</view>
+				<view v-if="index !== steps.length - 1" class="step-line"></view>
+			</view>
+			<view class="step-content">
+				<text class="step-title">{{ step.title }}</text>
+				<text v-if="step.desc" class="step-desc">{{ step.desc }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+interface Step {
+	title: string;
+	desc?: string;
+}
+
+const props = defineProps({
+	steps: {
+		type: Array as () => Step[],
+		required: true
+	},
+	active: {
+		type: Number,
+		default: 0,
+		validator: (value: number) => value >= 0
+	},
+	direction: {
+		type: String,
+		default: 'horizontal',
+		validator: (value: string) => ['horizontal', 'vertical'].includes(value)
+	}
+});
+const config = inject<any>('config');
+const getStepStatus = (index: number) => {
+	if (index < props.active) return 'finished';
+	if (index === props.active) return 'active';
+	return 'waiting';
+};
+</script>
+
+<style lang="scss" scoped>
+$primary-color: #287afa;
+$success-color: #31d283;
+$warning-color: #ff9628;
+$info-color: #969696;
+$text-primary: #333333;
+$text-regular: #666666;
+$text-placeholder: #c0c4cc;
+$border-color: #969696;
+$bg-color: #f5f7fa;
+
+.v-steps {
+	display: flex;
+	width: 100%;
+	box-sizing: border-box;
+
+	&.horizontal {
+		flex-direction: row;
+		justify-content: space-between;
+		padding: 16rpx 0;
+
+		.step-item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			position: relative;
+
+			.step-icon-container {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				position: relative;
+				width: 100%;
+
+				.step-line {
+					position: absolute;
+					left: 72.5%;
+					top: 50%;
+					transform: translateY(-50%);
+					width: calc(100% - 80rpx);
+					height: 4rpx;
+					background-color: v-bind('config.VSteps.lineBackgroundColor');
+					z-index: 1;
+				}
+			}
+
+			.step-content {
+				text-align: center;
+				margin-top: 16rpx;
+				padding: 0 20rpx;
+			}
+
+			&.last-item .step-line {
+				display: none;
+			}
+		}
+	}
+
+	&.vertical {
+		flex-direction: column;
+		padding: 16rpx 0;
+
+		.step-item {
+			display: flex;
+			position: relative;
+			padding-bottom: 40rpx;
+
+			&:last-child {
+				padding-bottom: 0;
+			}
+
+			.step-icon-container {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin-right: 24rpx;
+
+				.step-line {
+					flex: 1;
+					width: 4rpx;
+					background-color: v-bind('config.VSteps.lineBackgroundColor');
+					margin-top: 16rpx;
+				}
+			}
+
+			.step-content {
+				flex: 1;
+				padding-bottom: 40rpx;
+			}
+
+			&.last-item .step-line {
+				display: none;
+			}
+		}
+	}
+
+	.step-icon {
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		z-index: 2;
+		font-size: 32rpx;
+		font-weight: bold;
+		background-color: white;
+		border: 4rpx solid v-bind('config.border.color');
+		color: v-bind('config.fontColor.subTitle');
+		transition: all 0.3s ease;
+
+		.step-number {
+			line-height: 1;
+		}
+
+		.icon-check {
+			font-size: 36rpx;
+			font-weight: bold;
+			line-height: 1;
+		}
+	}
+
+	.step-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: v-bind('config.fontColor.default');
+		display: block;
+		line-height: 1.4;
+	}
+
+	.step-desc {
+		font-size: 26rpx;
+		color: v-bind('config.fontColor.subTitle');
+		display: block;
+		margin-top: 8rpx;
+		line-height: 1.4;
+	}
+	.finished {
+		.step-icon {
+			border-color: v-bind('config.border.color');
+			background-color: v-bind('config.backgroundColor.succeed');
+			color: white;
+		}
+
+		.step-line {
+			background-color: v-bind('config.backgroundColor.succeed') !important;
+		}
+
+		.step-title {
+			color: v-bind('config.fontColor.default');
+		}
+	}
+	.active {
+		.step-icon {
+			border-color: v-bind('config.border.default');
+			background-color: v-bind('config.backgroundColor.default');
+			color: white;
+		}
+
+		.step-title {
+			color: v-bind('config.fontColor.default');
+			font-weight: bold;
+		}
+	}
+
+	.waiting {
+		.step-icon {
+			border-color: v-bind('config.border.color');
+			background-color: white;
+			color: v-bind('config.fontColor.text');
+		}
+
+		.step-title {
+			color: v-bind('config.fontColor.text');
+		}
+
+		.step-desc {
+			color: v-bind('config.fontColor.text');
+		}
+	}
+}
+
+@media (max-width: 768px) {
+	.v-steps.horizontal {
+		.step-item {
+			.step-content {
+				padding: 0 10rpx;
+			}
+
+			.step-title {
+				font-size: 28rpx;
+			}
+
+			.step-desc {
+				font-size: 24rpx;
+			}
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,203 @@
+<template>
+	<view class="v-table-container">
+		<view class="v-table">
+			<view class="v-table-header" @click="handleHeaderClick">
+				<view class="v-table-header-cell" v-for="(column, index) in columns" :key="index" :style="{ width: column.width , flex:  '1 1 0%'}">
+					{{ column.label }}
+					<view v-if="column.prop && sortable" class="sort-icon">
+						<text class="arrow-up" :class="{ active: column.prop === sortConfig.prop && sortConfig.order === 'asc' }">↑</text>
+						<text class="arrow-down" :class="{ active: column.prop === sortConfig.prop && sortConfig.order === 'desc' }">↓</text>
+					</view>
+				</view>
+			</view>
+			<view class="v-table-body">
+				<view v-if="!data.length" class="empty-data">
+					<slot name="empty">暂无数据</slot>
+				</view>
+				<view class="v-table-row" v-for="(row, rowIndex) in sortedData" :key="rowIndex">
+					<view class="v-table-cell" v-for="(column, colIndex) in columns" :key="colIndex" :style="{ width: column.width , flex:  '1 1 0%'}">
+						<slot :name="`cell-${column.prop}`" :row="row" :column="column" :index="rowIndex">
+							{{ row[column.prop] }}
+						</slot>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref ,inject} from 'vue';
+
+interface TableColumn {
+	prop: string;
+	label: string;
+	width?: string;
+}
+
+interface SortConfig {
+	prop: string | null;
+	order: 'asc' | 'desc' | null;
+}
+
+/**
+ * v-table
+ * columns 表格列配置
+ *        prop 表格列绑定的数据属性名
+ *        label 表格列标题
+ *        width 表格列宽度
+ * data 表格数据数组
+ * sortable 是否支持排序 默认值:false 可选值true支持排序、false不支持排序
+ */
+const props = defineProps({
+	columns: {
+		type: Array,
+		default: () => [],
+		required: true
+	},
+	data: {
+		type: Array,
+		default: () => []
+	},
+	sortable: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const config = inject<any>('config');
+const sortConfig = ref<SortConfig>({
+	prop: null,
+	order: null
+});
+
+const sortedData = computed(() => {
+	if (!props.sortable || !props.data.length || !sortConfig.value.prop) {
+		return props.data;
+	}
+
+	return [...props.data].sort((a, b) => {
+		const aValue = a[sortConfig.value.prop];
+		const bValue = b[sortConfig.value.prop];
+
+		if (sortConfig.value.order === 'asc') {
+			return aValue > bValue ? 1 : -1;
+		} else {
+			return aValue < bValue ? 1 : -1;
+		}
+	});
+});
+
+const handleHeaderClick = (event: any) => {
+	const target = event.target;
+	const columnName = target.closest('.v-table-header-cell');
+	if (!columnName) return;
+
+	const columnProp = props.columns.find((col, index) => {
+		const cell = target.closest('.v-table-header-cell');
+		return cell && cell.getAttribute('data-index') === index.toString();
+	}).prop;
+
+	if (!columnProp) return;
+
+	if (sortConfig.value.prop === columnProp) {
+		sortConfig.value.order = sortConfig.value.order === 'asc' ? 'desc' : 'asc';
+	} else {
+		sortConfig.value.prop = columnProp;
+		sortConfig.value.order = 'asc';
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.v-table-container {
+	width: 100%;
+	border-radius: 8rpx;
+	overflow: hidden;
+	box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
+	border: 1rpx solid v-bind("config.border.color");
+}
+
+.v-table {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.v-table-header {
+	display: flex;
+	background-color: v-bind("config.VTable.backgroundColor");
+	border-bottom: 1rpx solid v-bind("config.border.color");
+}
+
+.v-table-header-cell {
+	padding: 12rpx 16rpx;
+	font-weight: bold;
+	color: v-bind("config.fontColor.mianTitle");
+	text-align: left;
+	box-sizing: border-box;
+	border-right: 1rpx solid v-bind("config.border.color");
+	cursor: pointer;
+	position: relative;
+	user-select: none;
+}
+
+.v-table-header-cell:hover {
+	background-color: v-bind("config.VTable.backgroundColor");
+}
+
+.sort-icon {
+	display: inline-block;
+	margin-left: 5rpx;
+	vertical-align: middle;
+}
+
+.arrow-up,
+.arrow-down {
+	display: block;
+	font-size: v-bind("config.fontSize.smallText");
+	color: v-bind("config.fontColor.text");
+	margin: 0 2rpx;
+}
+
+.arrow-up.active,
+.arrow-down.active {
+	color: v-bind("config.fontColor.default");
+}
+
+.v-table-body {
+	display: flex;
+	flex-direction: column;
+}
+
+.v-table-row {
+	display: flex;
+	border-bottom: 1rpx solid v-bind("config.border.color");
+	transition: background-color 0.3s;
+}
+
+.v-table-row:hover {
+	background-color: v-bind("config.VTable.backgroundColor");
+}
+
+.v-table-row:last-child {
+	border-bottom: none;
+}
+
+.v-table-row:nth-child(even) {
+	background-color: #v-bind("config.VTable.backgroundColor");
+}
+
+.v-table-cell {
+	padding: 12px 16px;
+	color: v-bind("config.fontColor.text");
+	text-align: left;
+	box-sizing: border-box;
+	border-right: 1rpx solid v-bind("config.border.color");
+}
+
+.empty-data {
+	padding: 20rpx;
+	text-align: center;
+	color: v-bind("config.fontColor.text");
+}
+</style>

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

@@ -0,0 +1,235 @@
+<template>
+	<view class="v-tabs">
+		<scroll-view scroll-x class="tabs-scroll" :scroll-left="scrollLeft" :show-scrollbar="false" :scroll-with-animation="true">
+			<view class="tabs-container">
+				<view
+					v-for="(item, index) in tabs"
+					:key="item.key || index"
+					class="tab-item"
+					:class="[{ active: index === activeIndex }, hoverClass]"
+					:style="{
+						minWidth: `${minTabWidth}rpx`,
+						padding: `0 ${itemPadding}rpx`
+					}"
+					@click="handleTabClick(index)"
+					:id="`tab_${index}`"
+				>
+					<text class="tab-text">{{ item.title }}</text>
+				</view>
+				<view v-show="isLine" class="tab-line" :style="lineStyle"></view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
+
+interface TabList {
+	title: string;
+	key: string;
+}
+
+/**
+ * v-tabs 	标签页 无内容
+ * value	双向绑定值	默认值:0
+ * tabs		标签标题
+ * activeColor	高亮颜色		默认值:#287afa
+ * inactiveColor	标题颜色		默认值:#666
+ * isLine		是否显示下划线	默认值:true
+ * lineWidth		下划线宽度	默认值:最大标题宽度
+ * lineHeight		下划线厚度	默认值:8
+ * lineOffset		下划线距离标题距离	默认值:4
+ * minTabWidth		最小标题宽度		默认值:120
+ * itemPadding		标题内边距		默认值:32
+ * hoverClass		悬浮名称			默认值:tabs-hover
+ * 相关事件:change
+ */
+const props = defineProps({
+	value: {
+		type: Number,
+		default: 0
+	},
+	tabs: {
+		type: Array as () => TabList[],
+		required: true
+	},
+	activeColor: {
+		type: String,
+		default: '#287afa'
+	},
+	inactiveColor: {
+		type: String,
+		default: '#666'
+	},
+	isLine: {
+		type: Boolean,
+		default: true
+	},
+	lineHeight: {
+		type: String,
+		default: '8'
+	},
+	lineWidth: {
+		type: Number,
+		default: 20
+	},
+	lineOffset: {
+		type: Number,
+		default: 0
+	},
+	minTabWidth: {
+		type: Number,
+		default: 120
+	},
+	itemPadding: {
+		type: Number,
+		default: 32
+	},
+	hoverClass: {
+		type: String,
+		default: 'tabs-hover'
+	}
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const activeIndex = ref(props.value);
+const tabRects = ref<{ left: number; width: number }[]>([]);
+const scrollLeft = ref(0);
+const isLandscape = ref(false);
+
+const lineStyle = computed(() => {
+	if (!tabRects.value[activeIndex.value]) return {};
+	const current = tabRects.value[activeIndex.value];
+	return {
+		width: `${props.lineWidth === 0 ? current.width : props.lineWidth}px`,
+		transform: `translateX(${current.left}px)`,
+		backgroundColor: props.activeColor,
+		height: uni.upx2px(parseFloat(props.lineHeight)) + 'px',
+		bottom: `2rpx`
+	};
+});
+
+let updateTimer = null;
+const updateTabRects = () => {
+	clearTimeout(updateTimer);
+	updateTimer = setTimeout(() => {
+		nextTick(() => {
+			uni.createSelectorQuery()
+				.selectAll('.tab-item')
+				.boundingClientRect((rects: any) => {
+					tabRects.value = rects.map((rect: any) => ({
+						left: rect.left - (rects[0]?.left || 0),
+						width: rect.width
+					}));
+				})
+				.exec();
+		});
+	}, 100);
+};
+
+const handleTabClick = (index: number) => {
+	if (activeIndex.value === index) return;
+	activeIndex.value = index;
+	scrollToTab(index);
+	emit('change', index);
+};
+
+const scrollToTab = (index: number) => {
+	const current = tabRects.value[index];
+	if (!current) return;
+
+	const systemInfo = uni.getSystemInfoSync();
+	const tabWidth = current.width;
+	const tabLeft = current.left;
+
+	const viewCenter = systemInfo.windowWidth / 2;
+	const tabCenter = tabLeft + tabWidth / 2;
+	const targetScroll = Math.max(0, tabCenter - viewCenter);
+
+	requestAnimationFrame(() => {
+		scrollLeft.value = targetScroll;
+	});
+};
+
+const checkOrientation = () => {
+	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
+	isLandscape.value = windowWidth > windowHeight;
+	updateTabRects();
+	scrollToTab(activeIndex.value);
+};
+
+watch(activeIndex, (val) => {
+	emit('update:value', val);
+});
+
+onMounted(() => {
+	checkOrientation();
+	uni.onWindowResize(checkOrientation);
+});
+
+watch(() => props.tabs, updateTabRects);
+</script>
+
+<style lang="scss" scoped>
+.v-tabs {
+	width: 100%;
+	background-color: #fff;
+	position: relative;
+	padding: 0 env(safe-area-inset-left);
+}
+
+.tabs-scroll {
+	width: 100%;
+	white-space: nowrap;
+	padding: 0 env(safe-area-inset-right);
+}
+
+.tabs-container {
+	position: relative;
+	display: inline-flex;
+	height: 80rpx;
+	align-items: center;
+	padding: 0 20rpx;
+	will-change: transform;
+}
+
+.tab-item {
+	position: relative;
+	height: 100%;
+	display: inline-flex;
+	align-items: center;
+	transition: color 0.3s;
+	flex-shrink: 0;
+
+	&.active {
+		.tab-text {
+			color: v-bind('props.activeColor');
+			font-weight: 500;
+		}
+	}
+
+	.tab-text {
+		margin: auto;
+		font-size: clamp(24rpx, 4vw, 32rpx);
+		color: v-bind('props.inactiveColor');
+		transition: color 0.3s;
+	}
+}
+
+.tab-line {
+	position: absolute;
+	bottom: 0;
+	border-radius: v-bind('props.lineHeight');
+	transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+	transform-origin: 0 50%;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+
+.tabs-hover {
+	opacity: 0.6;
+	transition: opacity 0.2s;
+}
+</style>