v-uni-app-ui 1.0.0 → 1.0.2

package/components/config.js

@@ -0,0 +1,123 @@
+export const config = {
+	//背景颜色
+	backgroundColor: {
+		default: '#307fff',
+		delete: '#ff5e5e',
+		succeed: '#31d283',
+		info: '#888888',
+		warn: '#fba000',
+		reversal: '#ffffff',
+		disabled: '#f5f5f5'
+	},
+	//字体颜色
+	fontColor: {
+		default: '#307fff',
+		delete: '#ff5e5e',
+		succeed: '#31d283',
+		info: '#888888',
+		warn: '#fba000',
+		mianTitle: '#222222',
+		subTitle: '#666666',
+		mainText: '#333333',
+		text: '#969696',
+		hintText: '#cccccc',
+		reversal: '#ffffff'
+	},
+	//字体大小
+	fontSize: {
+		largeTitle: '42.5rpx',
+		mediumTitle: '34.5rpx',
+		smallTitle: '31.5rpx',
+		largeText: '29.5rpx',
+		mediumText: '25.5rpx',
+		smallText: '22.5rpx',
+		messageText: '20.5rpx',
+		hintText: '18.5rpx'
+	},
+	//字体其他
+	fontOther: {
+		fontFamily: "'Noto Sans CJK'"
+	},
+	//文字间距
+	letterSpacing: {},
+	//边框
+	border: {
+		default: '#307fff',
+		delete: '#ff5e5e',
+		succeed: '#31d283',
+		info: '#888888',
+		warn: '#fba000',
+		color: '#e0e0e0'
+	},
+	borderRadius: {
+		semicircle: '8rpx',
+		square: '0',
+		circle: '35rpx'
+	},
+	//透明度
+	opacity: {
+		//悬浮
+		hover: 0.9,
+		//点击
+		click: 0.8,
+		//禁用
+		disabled: 0.7,
+		//消息提示
+		toast: 0.7,
+		//遮罩层
+		mask: 0.4,
+		//边框
+		border: 0.3
+	},
+	//暗黑模式
+	darkMode: {
+		backgroundColor: '#333333',
+		fontColor: '#ffffff',
+		border: '#e0e0e0'
+	},
+	//图片
+	VImage: {
+		prefix: '/21cqttttttttttttttttttttttttttt/ldxyb/static/images/'
+	},
+	//文本框
+	VInput: {
+		boxShadow: '0 0 0 4rpx rgba(24, 144, 255, 0.2)'
+	},
+	//表单
+	VTable: {
+		backgroundColor: '#f5f5f5'
+	},
+	//上传图片按钮
+	VUploadFileButton: {
+		backgroundColor: '#f5f5f5'
+	},
+	//菜单
+	VMenu: {
+		backgroundColor: '#f5f5f5',
+		highlightBackgroundColor: '#e0e0e0'
+	},
+	//步骤条
+	VSteps: {
+		lineBackgroundColor: '#e0e0e0'
+	},
+	//下拉框
+	VSelectPicker: {
+		backgroundColor: '#f5f5f5'
+	},
+	//时间选择器
+	VDateTime: {
+		backgroundColor: '#f5f5f5'
+	},
+	//表单行
+	VFormItem: {
+		borderColor: '#e0e0e0'
+	},
+	//开关
+	VSwitch: {
+		backgroundColor: '#f5f5f5'
+	},
+	//宫格布局
+	VGrid:{
+		backgroundColor: '#f5f5f5'
+	}
+};

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

@@ -0,0 +1,108 @@
+<template>
+	<view class="v-card" :class="{ 'v-card-elevated': elevated }" :style="{ width, padding, borderRadius }">
+		<view class="v-card-header" v-if="title || $slots.header">
+			<slot name="header">
+				<text class="v-card-title">{{ title }}</text>
+			</slot>
+		</view>
+		<view class="v-card-content">
+			<slot>
+				<text v-if="content">{{ content }}</text>
+			</slot>
+		</view>
+		<view class="v-card-actions" v-if="$slots.actions">
+			<slot name="actions"></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed,inject } from 'vue';
+
+interface CardItem {
+	title?: string;
+	content?: string;
+	actions?: any;
+}
+
+/**
+ * v-card
+ * title			卡片标题
+ * content			卡片内容
+ * width			卡片宽度，默认为100%
+ * padding			内边距，默认为none
+ * borderRadius	圆角大小，默认为8px
+ * elevated			是否启用阴影效果，默认为false
+ */
+const props = defineProps({
+	title: {
+		type: String,
+		default: ''
+	},
+	content: {
+		type: String,
+		default: ''
+	},
+	width: {
+		type: String,
+		default: '100%'
+	},
+	padding: {
+		type: String,
+		default: 'none'
+	},
+	borderRadius: {
+		type: String,
+		default: '8px'
+	},
+	elevated: {
+		type: Boolean,
+		default: false
+	}
+});
+
+const config = inject<any>('config');
+// 计算样式
+const style = computed(() => ({
+	width: props.width,
+	padding: props.padding,
+	borderRadius: props.borderRadius
+}));
+</script>
+
+<style lang="scss" scoped>
+.v-card {
+	background-color: v-bind('config.backgroundColor.reversal');
+	border: 1rpx solid v-bind('config.border.color');
+	box-sizing: border-box;
+	overflow: hidden;
+	transition: box-shadow 0.3s ease;
+
+	&-elevated {
+		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+	}
+
+	&-header {
+		padding: 16rpx;
+		border-bottom: 1rpx solid v-bind('config.border.color');
+	}
+
+	&-title {
+		font-size: v-bind('config.fontSize.mediumText');
+		font-weight: bold;
+		color: v-bind('config.fontColor.mainText');
+	}
+
+	&-content {
+		padding: 16rpx;
+		color: v-bind('config.fontColor.subTitle');
+	}
+
+	&-actions {
+		padding: 16rpx;
+		border-top: 1rpx solid v-bind('config.border.color');
+		display: flex;
+		justify-content: flex-end;
+	}
+}
+</style>

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

@@ -0,0 +1,162 @@
+<template>
+	<view class="v-grid" :style="gridStyle">
+		<view v-for="(item, index) in items" :key="index" class="grid-item" :style="itemStyle" @click="handleItemClick(item)">
+			<slot name="item" :item="item" :index="index">
+				<view class="default-item">
+					<view class="image-container" v-if="item.image">
+						<img :src="item.image" :mode="imageMode" :lazy-load="lazyLoad" @error="handleImageError(item)" class="grid-image" :style="imageStyle" />
+						<view v-if="item.loading">
+							<slot name="loading">
+								
+							</slot>
+						</view>
+					</view>
+					<view class="content">
+						<slot name="content" :item="item" :index="index"></slot>
+					</view>
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref,inject } from 'vue';
+
+interface GridItem {
+	id?: string | number;
+	image?: string;
+	title: string;
+	desc?: string;
+	price?: number;
+	loading?: boolean;
+	[key: string]: any;
+}
+
+/**
+ * v-grid
+ * items	数据
+ * cols		列数 （支持响应式对象）
+ * gap		间距 rpx
+ * imageMode	图片模式
+ * lazyLoad		是否懒加载
+ * imageHeight	图片高度 rpx
+ */
+const props = defineProps({
+	items: {
+		type: Array as () => GridItem[],
+		default: () => []
+	},
+	cols: {
+		type: [Number, Object],
+		default: 3
+	},
+	gap: {
+		type: [Number, String],
+		default: 20
+	},
+	imageMode: {
+		type: String,
+		default: 'aspectFill'
+	},
+	lazyLoad: Boolean,
+	imageHeight: {
+		type: [Number, String],
+		default: 300
+	}
+});
+
+const emit = defineEmits(['item-click', 'image-error']);
+
+const config = inject<any>('config');
+const currentCols = ref(3);
+const updateColumns = () => {
+	const screenWidth = uni.getSystemInfoSync().screenWidth;
+	if (typeof props.cols === 'object') {
+		currentCols.value =
+			screenWidth >= 1200
+				? props.cols.xl || 4
+				: screenWidth >= 992
+				? props.cols.lg || 3
+				: screenWidth >= 768
+				? props.cols.md || 2
+				: screenWidth >= 576
+				? props.cols.sm || 2
+				: props.cols.xs || 1;
+	} else {
+		currentCols.value = props.cols;
+	}
+};
+
+updateColumns();
+uni.onWindowResize(() => updateColumns());
+
+const gridStyle = computed(() => {
+	const gap = uni.upx2px(Number(props.gap));
+	return {
+		marginLeft: `-${gap / 2}px`,
+		marginRight: `-${gap / 2}px`
+	};
+});
+
+const itemStyle = computed(() => {
+	const gap = uni.upx2px(Number(props.gap));
+	const width = `calc(${100 / currentCols.value}% - ${gap}px)`;
+	return {
+		width,
+		marginLeft: `${gap / 2}px`,
+		marginRight: `${gap / 2}px`,
+		marginBottom: `${gap}px`
+	};
+});
+
+const imageStyle = computed(() => ({
+	height: uni.upx2px(Number(props.imageHeight)) + 'px'
+}));
+
+
+const handleItemClick = (item: GridItem) => {
+	emit('item-click', item);
+};
+
+const handleImageError = (item: GridItem) => {
+	emit('image-error', item);
+	item.loading = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.v-grid {
+	display: flex;
+	flex-wrap: wrap;
+	box-sizing: border-box;
+
+	.grid-item {
+		box-sizing: border-box;
+		background: v-bind("config.backgroundColor.reversal");
+		border-radius: 8rpx;
+		overflow: hidden;
+		transition: all 0.3s ease;
+
+		&:active {
+			transform: scale(0.98);
+		}
+
+		.default-item {
+			.image-container {
+				position: relative;
+				background-color: v-bind("config.VGrid.backgroundColor");
+
+				.grid-image {
+					width: 100%;
+					display: block;
+				}
+			}
+
+			.content {
+				padding: 20rpx;
+			}
+		}
+	}
+}
+</style>

package/components/layout/v-icon-grid/v-icon-grid.vue

@@ -0,0 +1,195 @@
+<template>
+	<view class="v-icon-grid">
+		<scroll-view class="scroll-container" :scroll-x="scrollable" :show-scrollbar="false" :scroll-with-animation="true">
+			<view class="icon-grid" :style="{ 'grid-template-columns': `repeat(${columns}, 1fr)` }">
+				<view
+					v-for="(icon, index) in icons"
+					:key="index"
+					class="icon-item"
+					:class="{ 'icon-item-active': activeIndex === index }"
+					@click="handleIconClick(index)"
+					:style="{
+						width: typeof itemWidth === 'string' ? itemWidth : `${itemWidth}px`,
+						margin: typeof gutter === 'string' ? `calc(${gutter} / 2)` : `${gutter / 2}px`
+					}"
+				>
+					<view class="icon-wrapper">
+						<view class="icon" :style="{ 'font-size': fontSize }">
+							<text v-if="useIcon" :class="icon.icon"></text>
+							<v-image v-else :src="icon.image" :style="{ width: iconSize, height: iconSize }" />
+						</view>
+					</view>
+					<view
+						class="icon-text"
+						:style="{
+							color: textColor,
+							...textStyle
+						}"
+					>
+						{{ icon.title }}
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, inject } from 'vue';
+
+interface IconItem {
+	title: string;
+	icon?: string;
+	image?: string;
+}
+/**
+ * v-icon-grid    	图标排版
+ * icons :        	图标数组        		title标题    icon图标类名        image图片路径
+ * iconSize        	图标大小
+ * textColor    	文本颜色
+ * activeColor    	活动图标颜色
+ * itemWidth   		每个图标项的宽度
+ * gutter        	图标项之间的间距
+ * scrollable    	是否可滚动        	默认值:true滚动    可选值:true滚动    false不滚动
+ * useIcon        	图标还是图片        	默认值:true图标    可选值:true图标    false图片
+ * rows				图片排数				默认值:1
+ */
+const props = defineProps({
+	icons: {
+		type: Array as () => IconItem[],
+		default: () => []
+	},
+	iconSize: {
+		type: String,
+		default: '50rpx'
+	},
+	fontSize: {
+		type: String,
+		default: '25rpx'
+	},
+	textColor: {
+		type: String,
+		default: '#333333'
+	},
+	activeColor: {
+		type: String,
+		default: 'transparent'
+	},
+	itemWidth: {
+		type: [Number, String],
+		default: 80
+	},
+	gutter: {
+		type: [Number, String],
+		default: 10
+	},
+	scrollable: {
+		type: Boolean,
+		default: true
+	},
+	useIcon: {
+		type: Boolean,
+		default: true
+	},
+	rows: {
+		type: Number,
+		default: 1
+	},
+	iconTextModel: {
+		type: String as () => 'normal' | 'wrap' | 'ellipsis',
+		default: 'normal'
+	}
+});
+
+const emits = defineEmits(['select']);
+const config = inject<any>('config');
+
+const activeIndex = ref(0);
+const columns = computed(() => {
+	const totalIcons = props.icons.length;
+	const maxIconsPerRow = Math.ceil(totalIcons / props.rows);
+	return maxIconsPerRow;
+});
+const textStyle = computed(() => {
+	switch (props.iconTextModel) {
+		case 'wrap':
+			return {
+				whiteSpace: 'normal',
+				overflow: 'visible',
+				textOverflow: 'clip'
+			};
+		case 'ellipsis':
+			return {
+				whiteSpace: 'nowrap',
+				overflow: 'hidden',
+				textOverflow: 'ellipsis'
+			};
+		default: // normal
+			return {
+				whiteSpace: 'normal',
+				overflow: 'visible',
+				textOverflow: 'clip'
+			};
+	}
+});
+
+const handleIconClick = (index: number) => {
+	activeIndex.value = index;
+	emits('select', index, props.icons[index]);
+};
+</script>
+
+<style lang="scss" scoped>
+.v-icon-grid {
+	width: 100%;
+	position: relative;
+}
+
+.scroll-container {
+	width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	flex: 1;
+}
+
+.icon-grid {
+	display: grid;
+	gap: 10rpx;
+}
+
+.icon-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-radius: 10rpx;
+	transition: all 0.3s ease;
+	box-sizing: border-box;
+}
+
+.icon-item-active {
+	background-color: v-bind('props.activeColor');
+}
+
+.icon-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: v-bind('props.iconSize');
+	height: v-bind('props.iconSize');
+	margin-bottom: 5rpx;
+}
+
+.icon {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.icon-text {
+	font-size: v-bind('config.fontSize.mediumText');
+	text-align: center;
+}
+</style>