创建uniapp基础形态

uniapp/components/AppTabbar.vue

@@ -0,0 +1,179 @@
+<template>
+
+	<view class="app-tabbar">
+
+		<view class="tabbar-pill">
+
+			<view
+
+				v-for="tab in tabs"
+
+				:key="tab.name"
+
+				class="tab-item"
+
+				:class="{ active: current === tab.name }"
+
+				@tap="onChange(tab.name)"
+
+			>
+
+				<FaIcon
+
+					:name="tab.icon"
+
+					:color="current === tab.name ? '#3c9cff' : '#9acafc'"
+
+					:size="20"
+
+				/>
+
+				<text class="tab-text">{{ tab.text }}</text>
+
+			</view>
+
+		</view>
+
+		<view class="safe-area" />
+
+	</view>
+
+</template>
+
+
+
+<script setup>
+
+const props = defineProps({
+
+	current: {
+
+		type: String,
+
+		default: 'dashboard'
+
+	}
+
+})
+
+
+
+const tabs = [
+
+	{ name: 'dashboard', text: '仪表盘', icon: 'table-cells' },
+
+	{ name: 'features', text: '功能', icon: 'grip' },
+
+	{ name: 'profile', text: '我的', icon: 'user' }
+
+]
+
+
+
+const routes = {
+
+	dashboard: '/pages/dashboard/dashboard',
+
+	features: '/pages/features/features',
+
+	profile: '/pages/profile/profile'
+
+}
+
+
+
+function onChange(name) {
+
+	if (name === props.current) return
+
+	uni.redirectTo({ url: routes[name] })
+
+}
+
+</script>
+
+
+
+<style scoped>
+
+.app-tabbar {
+
+	flex-shrink: 0;
+
+	padding: 16rpx 32rpx 0;
+
+	background: #ffffff;
+
+}
+
+
+
+.tabbar-pill {
+
+	display: flex;
+
+	align-items: center;
+
+	justify-content: space-around;
+
+	background: #ffffff;
+
+	border: 2rpx solid #e8f0f8;
+
+	border-radius: 999rpx;
+
+	padding: 16rpx 12rpx;
+
+}
+
+
+
+.tab-item {
+
+	flex: 1;
+
+	display: flex;
+
+	flex-direction: column;
+
+	align-items: center;
+
+	gap: 6rpx;
+
+	padding: 8rpx 0;
+
+}
+
+
+
+.tab-text {
+
+	font-size: 22rpx;
+
+	color: #9acafc;
+
+}
+
+
+
+.tab-item.active .tab-text {
+
+	color: #3c9cff;
+
+	font-weight: 500;
+
+}
+
+
+
+.safe-area {
+
+	height: constant(safe-area-inset-bottom);
+
+	height: env(safe-area-inset-bottom);
+
+}
+
+</style>
+
+

uniapp/components/FaIcon.vue

@@ -0,0 +1,61 @@
+<template>
+	<text class="fa-icon" :class="fontClass" :style="iconStyle">{{ iconChar }}</text>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { FA_ICONS } from '@/utils/fa-icons.js'
+
+const props = defineProps({
+	name: {
+		type: String,
+		required: true
+	},
+	type: {
+		type: String,
+		default: 'solid'
+	},
+	color: {
+		type: String,
+		default: 'inherit'
+	},
+	size: {
+		type: [Number, String],
+		default: 16
+	}
+})
+
+const iconChar = computed(() => FA_ICONS[props.name] || '')
+
+const fontClass = computed(() =>
+	props.type === 'brands' ? 'fa-font-brands' : 'fa-font-solid'
+)
+
+const iconStyle = computed(() => ({
+	color: props.color,
+	fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
+	lineHeight: 1
+}))
+</script>
+
+<style scoped>
+.fa-icon {
+	display: inline-block;
+	font-style: normal;
+	vertical-align: middle;
+}
+</style>
+
+<style>
+.fa-font-solid {
+	font-family: 'Font Awesome 7 Free';
+	font-weight: 900;
+	font-style: normal;
+}
+
+.fa-font-brands {
+	font-family: 'Font Awesome 7 Brands';
+	font-weight: 400;
+	font-style: normal;
+}
+</style>