添加bar组件

QXTfront/uni_modules/lime-tabbar/components/l-tabbar/index-u.scss

@@ -0,0 +1,83 @@
+@import '@/uni_modules/lime-style/index.scss';
+@import '@/uni_modules/lime-style/mixins/hairline.scss';
+
+/* #ifdef  uniVersion >= 4.75 */ 
+$use-css-var: true;
+/* #endif */
+$tabbar: #{$prefix}-tabbar;
+
+$tabbar-bg-color: create-var(tabbar-bg-color, $bg-color-container);
+$tabbar-border-color: create-var(tabbar-border-color, $border-color-1);
+
+$tabbar-z-index: create-var(tabbar-z-index, 10);
+$tabbar-round-margin-x: create-var(tabbar-round-margin-x, $spacer);
+/* #ifndef UNI-APP-X && APP */
+$tabbar-round-shadow: create-var(tabbar-round-shadow, $shadow-3);
+/* #endif */
+/* #ifdef UNI-APP-X && APP */
+$tabbar-round-shadow: $shadow-3;
+/* #endif */
+
+.#{$tabbar} {
+	/* #ifndef UNI-APP-X */
+	display: flex;
+	box-sizing: border-box;
+	/* #endif */
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	position: relative;
+	// font-size: 16px;
+	background-color: $tabbar-bg-color;
+	overflow: visible;
+	
+	&--fixed {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		z-index: $tabbar-z-index;
+	}
+
+	&--round {
+		margin-left: $tabbar-round-margin-x;
+		margin-right: $tabbar-round-margin-x;
+		border-radius: 999px;
+		box-shadow: $tabbar-round-shadow;
+	}
+	
+	/* #ifndef UNI-APP-X && APP */
+	&--normal#{&}--bordered {
+		// z-index: 1;
+		// border-top: 1rpx solid $tabbar-border-color;
+		border-top-width: 1rpx;
+		border-top-style: solid;
+		border-top-color: $tabbar-border-color;
+	}
+	/* #endif */
+	/* #ifndef UNI-APP-X && APP */
+	&--normal#{&}--bordered::before {
+		// z-index: 1;
+		@include hairline-top($color: $tabbar-border-color);
+	}
+	/* #endif */
+	&--normal#{&}--safe {
+		/* #ifdef UNI-APP-X */
+		padding-bottom: var(--uni-safe-area-inset-bottom);
+		/* #endif */
+		/* #ifndef UNI-APP-X */
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		/* #endif */
+	}
+	&--fixed#{&}--round#{&}--safe {
+		/* #ifdef UNI-APP-X */
+		bottom: var(--uni-safe-area-inset-bottom);
+		/* #endif */
+		/* #ifndef UNI-APP-X */
+		bottom: constant(safe-area-inset-bottom);
+		bottom: env(safe-area-inset-bottom);
+		/* #endif */
+	}
+	
+}

QXTfront/uni_modules/lime-tabbar/components/l-tabbar/l-tabbar.uvue

@@ -0,0 +1,131 @@
+<template>
+	<view ref="rootRef" :class="classes" :style="[styles, lStyle]">
+		<slot></slot>
+	</view>
+	<view v-if="fixed && placeholder" :style="{height: rootHeight + 'px'}"></view>
+</template>
+<script lang="uts" setup>
+	/**
+	 * Tabbar 底部导航栏组件
+	 * @description 用于实现应用底部导航功能，支持多种样式风格和交互效果
+	 * <br>插件类型：LTabbarComponentPublicInstance 
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-tabbar
+	 * 
+	 * @property {boolean} bordered 显示外边框（默认：true）
+	 * @property {boolean} fixed 固定在底部（默认：true）
+	 * @property {boolean} safeAreaInsetBottom 适配iPhoneX底部安全区（默认：true）
+	 * @property {'normal' | 'round'} shape 标签栏形状（默认："normal"）
+	 * @value normal
+	 * @value round
+	 * @property {boolean} split 显示分割线（默认：true）
+	 * @property {'normal' | 'tag'} theme 选项风格（默认："normal"）
+	 * @value normal
+	 * @value tag
+	 * @property {string} value 当前选中值（兼容旧版）
+	 * @property {string} defaultValue 默认选中值（非受控属性）
+	 * @property {string} modelValue 当前选中值（推荐使用v-model）
+	 * @property {boolean} placeholder 固定时生成占位元素（默认：false）
+	 * @property {string} activeColor 选中项颜色（默认：主题色）
+	 * @property {string} color 未选中项颜色（默认："#7d7e80"）
+	 * @property {string} lStyle 自定义样式（CSS字符串）
+	 * @property {string} activeBgColor 选中项背景色
+	 * @property {string} bgColor 背景颜色
+	 * @property {number} zIndex 层级（默认：100）
+	 * @property {string} iconSize 图标尺寸（支持CSS单位）
+	 * @property {string} fontSize 文字大小（支持CSS单位）
+	 * @event {Function} change 选项变化时触发（返回选中值）
+	 */
+	
+	import { addUnit } from '@/uni_modules/lime-shared/addUnit';
+	import { TabbarProps, TabbarProvide } from './type'
+
+	const name = 'l-tabbar'
+	const emit = defineEmits(['change', 'update:modelValue'])
+	const props = withDefaults(defineProps<TabbarProps>(), {
+		bordered: true,
+		fixed: true,
+		safeAreaInsetBottom: true,
+		shape: 'normal',
+		theme: 'normal',
+		split: true,
+		placeholder: true,
+		// #ifdef APP-ANDROID || APP-IOS
+		// color: 'rgba(0,0,0,0.8)',
+		// activeColor: '#3283ff'
+		// #endif
+	});
+	
+	const innerValue = ref('0');
+	const activeValue = computed({
+		set(value: string) {
+			emit('change', value)
+			emit('update:modelValue', value)
+			innerValue.value = value
+		},
+		get():string {
+			return props.value ?? props.modelValue ?? innerValue.value
+		}
+	} as WritableComputedOptions<string>);
+	
+	const defaultIndex = ref(-1)
+	// @ts-ignore
+	const children = ref<LTabbarItemComponentPublicInstance[]>([])
+	
+	const rootRef = ref<UniElement|null>(null)
+	const rootHeight = ref(0)
+	// const safeAreaBottom = uni.getWindowInfo().safeAreaInsets.bottom;
+	
+	const classes = computed(():Map<string, any>=>{
+		const cls = new Map<string, any>();
+		cls.set(`${name}`, true)
+		cls.set(`${name}--bordered`, props.bordered)
+		cls.set(`${name}--fixed`, props.fixed)
+		cls.set(`${name}--safe`, props.safeAreaInsetBottom)
+		cls.set(`${name}--${props.shape}`, true)
+		return cls
+	})
+	const styles = computed(():Map<string, any>=>{
+		const style = new Map<string, any>();
+		if(props.zIndex != null) {
+			style.set('z-index', props.zIndex!)
+		}
+		if(props.bgColor != null) {
+			style.set('background', props.bgColor!)
+		}
+		// if(props.safeAreaInsetBottom && safeAreaBottom > 0){
+		// 	const size = addUnit(safeAreaBottom)
+		// 	if (props.shape == 'normal') {
+		// 		style.set('padding-bottom', size)
+		// 	}
+		// 	if (props.fixed && props.shape == 'round') {
+		// 		style.set('bottom', size)
+		// 	}
+		// }
+		return style
+	})
+	
+	const updateChild = (currentValue: string)=>{
+		activeValue.value = currentValue
+	}
+	
+	provide('limeTabbar', { 
+		props,
+		defaultIndex, 
+		activeValue,
+		updateChild,
+		children
+	} as TabbarProvide)
+	
+	onMounted(()=>{
+		if (!props.placeholder) return;
+		nextTick(()=>{
+			rootRef.value?.getBoundingClientRectAsync()?.then(res => {
+				rootHeight.value = res.height
+			})
+			// rootHeight.value = rootRef.value?.offsetHeight??0
+		})
+	})
+</script>
+<style lang="scss">
+	@import './index-u';
+</style>

QXTfront/uni_modules/lime-tabbar/components/l-tabbar/l-tabbar.vue

@@ -0,0 +1,115 @@
+<template>
+	<view>
+		<view class="l-tabbar" :class="tabBarClass" :style="[styles]">
+			<slot></slot>
+		</view>
+		<view v-if="fixed && placeholder" :style="{height: rootHeight + 'px'}"></view>
+	</view>
+</template>
+<script lang="ts">
+	// @ts-nocheck
+	/**
+	 * Tabbar 底部导航栏组件
+	 * @description 用于实现应用底部导航功能，支持多种样式风格和交互效果
+	 * <br>插件类型：LTabbarComponentPublicInstance 
+	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-tabbar
+	 * 
+	 * @property {boolean} bordered 显示外边框（默认：true）
+	 * @property {boolean} fixed 固定在底部（默认：true）
+	 * @property {boolean} safeAreaInsetBottom 适配iPhoneX底部安全区（默认：true）
+	 * @property {'normal' | 'round'} shape 标签栏形状（默认："normal"）
+	 * @value normal
+	 * @value round
+	 * @property {boolean} split 显示分割线（默认：true）
+	 * @property {'normal' | 'tag'} theme 选项风格（默认："normal"）
+	 * @value normal
+	 * @value tag
+	 * @property {string} value 当前选中值（兼容旧版）
+	 * @property {string} defaultValue 默认选中值（非受控属性）
+	 * @property {string} modelValue 当前选中值（推荐使用v-model）
+	 * @property {boolean} placeholder 固定时生成占位元素（默认：false）
+	 * @property {string} activeColor 选中项颜色（默认：主题色）
+	 * @property {string} color 未选中项颜色（默认："#7d7e80"）
+	 * @property {string} lStyle 自定义样式（CSS字符串）
+	 * @property {string} activeBgColor 选中项背景色
+	 * @property {string} bgColor 背景颜色
+	 * @property {number} zIndex 层级（默认：100）
+	 * @property {string} iconSize 图标尺寸（支持CSS单位）
+	 * @property {string} fontSize 文字大小（支持CSS单位）
+	 * @event {Function} change 选项变化时触发（返回选中值）
+	 */
+	
+	import { ref, defineComponent, computed, Ref, provide, toRefs, onMounted, getCurrentInstance } from '@/uni_modules/lime-shared/vue';
+	import TabbarProps from './props'
+	import { getRect } from '@/uni_modules/lime-shared/getRect'
+	const name = `l-tabbar`
+	export default defineComponent({
+		// name,
+		props: TabbarProps,
+		emits: ['change', 'input', 'update:modelValue'],
+		setup(props, { emit }) {
+			const instance = getCurrentInstance()!.proxy!
+			const innerValue = ref('0');
+			const activeValue = computed({
+				set(value: string) {
+					innerValue.value = value
+					emit('change', value)
+					emit('update:modelValue', value)
+					// #ifdef VUE2
+					emit('input', value)
+					// #endif
+				},
+				get():string {
+					return props.value ?? props.modelValue ?? innerValue.value
+				}
+			});
+			const defaultIndex : Ref<number> = ref(-1);
+			const rootHeight = ref(0);
+			const children = ref([])
+			const tabBarClass = computed(() => [
+				// `${name}`,
+				{
+					[`${name}--bordered`]: props.bordered,
+					[`${name}--fixed`]: props.fixed,
+					[`${name}--safe`]: props.safeAreaInsetBottom,
+				},
+				`${name}--${props.shape}`,
+			]);
+			const styles = computed(()=>{
+				const style:Record<string, string> = {};
+				if(props.zIndex) {
+					style['z-index'] = props.zIndex!
+				}
+				if(props.bgColor) {
+					style['background'] = props.bgColor!
+				}
+				return style
+			})
+			const updateChild = (currentValue: number | string) => {
+			    activeValue.value = currentValue;
+			};
+			onMounted(() => {
+				if(!(props.placeholder && props.fixed)) return;
+				
+				getRect(`.${name}`, instance).then(res => {
+					rootHeight.value = res.height
+				})
+			})
+			provide('tab-bar', {
+			      ...toRefs(props),
+			      defaultIndex,
+			      activeValue,
+			      updateChild,
+				  children
+			    });
+			return {
+				rootHeight,
+				styles,
+				tabBarClass
+			}
+		}
+	})
+</script>
+<style lang="scss">
+	@import './index-u';
+</style>

QXTfront/uni_modules/lime-tabbar/components/l-tabbar/props.ts

@@ -0,0 +1,94 @@
+// @ts-nocheck
+export default {
+	/** 是否显示外边框 */
+	bordered: {
+		type: Boolean,
+		default: true,
+	},
+	/** 是否固定在底部 */
+	fixed: {
+		type: Boolean,
+		default: true,
+	},
+	/** 是否为 iPhoneX 留出底部安全距离 */
+	safeAreaInsetBottom: {
+		type: Boolean,
+		default: true,
+	},
+	/** 当前选中标签的索引 */
+	value: {
+		type: [String, Number],
+		default: undefined,
+	},
+	modelValue: {
+		type: [String, Number],
+		default: undefined,
+	},
+	/** 当前选中标签的索引，非受控属性 */
+	defaultValue: {
+		type: [String, Number],
+		default: undefined,
+	},
+	/** 固定在底部时，是否在标签位置生成一个等高的占位元素 */
+	placeholder: {
+		type: Boolean,
+		default: true,
+	},
+	/** 标签栏的形状 */
+	shape: {
+		type: String,
+		default: 'normal',
+		validator(val) {
+			if (!val) return true;
+			return ['normal', 'round'].includes(val);
+		},
+	},
+	/** 选项风格 */
+	theme: {
+		type: String,
+		default: 'normal',
+		validator(val) {
+			if (!val) return true;
+			return ['normal', 'tag'].includes(val);
+		},
+	},
+	/** 是否需要分割线 */
+	split: {
+		type: Boolean,
+		default: false,
+	},
+	/** 选中标签的颜色 */
+	activeColor: {
+		type: String,
+		default: null,
+	},
+	/** 未选中标签的颜色 */
+	color: {
+		type: String,
+		default: null,
+	},
+	lStyle: {
+		type: [String, Object],
+		default: null,
+	},
+	bgColor: {
+		type: String,
+		default: null,
+	},
+	activeBgColor: {
+		type: String,
+		default: null,
+	},
+	zIndex: {
+		type: Number,
+		default: null
+	},
+	iconSize: {
+		type: String,
+		default: null
+	},
+	fontSize: {
+		type: String,
+		default: null
+	}
+}

QXTfront/uni_modules/lime-tabbar/components/l-tabbar/type.ts

@@ -0,0 +1,68 @@
+// @ts-nocheck
+// #ifndef APP-ANDROID
+import type { ComputedRef } from '@/uni_modules/lime-shared/vue';
+type ComputedRefImpl<T> = ComputedRef<T>
+// #endif
+
+export interface TabbarProps {
+	/**
+	 * 是否显示外边框 true
+	 */
+	bordered : boolean;
+	/**
+	 * 是否固定在底部 true
+	 */
+	fixed : boolean;
+	/**
+	 * 是否为 iPhoneX 留出底部安全距离 true
+	 */
+	safeAreaInsetBottom : boolean;
+	/** 
+	 * 标签栏的形状 normal
+	 */
+	shape : 'normal' | 'round';
+	/**
+	 * 是否需要分割线 true
+	 */
+	split : boolean;
+	/**
+	 * 选项风格 normal
+	 */
+	theme : 'normal' | 'tag';
+	/**
+	 * 当前选中标签的索引
+	 */
+	value ?: string;
+	/**
+	 * 当前选中标签的索引，非受控属性
+	 */
+	defaultValue ?: string;
+	/**
+	 * 当前选中标签的索引
+	 */
+	modelValue ?: string;
+	/** 固定在底部时，是否在标签位置生成一个等高的占位元素 */
+	placeholder:boolean;
+	// #ifdef APP-ANDROID || APP-IOS
+	activeColor ?: string;
+	color ?: string;
+	// #endif
+	// #ifndef APP-ANDROID || APP-IOS
+	activeColor ?: string;
+	color ?: string;
+	// #endif
+	lStyle ?: string|UTSJSONObject;
+	activeBgColor ?: string;
+	bgColor?: string
+	zIndex?:number;
+	iconSize?: string;
+	fontSize?: string;
+}
+
+export type TabbarProvide = {
+	defaultIndex : Ref<number>,
+	props: LTabbarComponentPublicInstance,
+	activeValue: ComputedRefImpl<string>,
+	updateChild: (value: string) => void,
+	children: Ref<LTabbarItemComponentPublicInstance[]>
+}