feat(components): 添加自定义底部导航栏组件- 创建 CustomTabBar.vue 组件文件- 实现底部导航栏的基本结构和样式

- 支持图标和文字的显示与切换效果- 添加 tab 切换事件和页面跳转逻辑
- 定义默认的首页和我的页面 tab 项
- 使用 UnoCSS 进行样式布局和主题控制

src/components/CustomTabBar.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="fixed bottom-0 left-0 right-0 z-999 bg-white b-t border-gray-200 flex h-100rpx">
+    <view
+        class="flex-1 flex flex-col items-center justify-center"
+        v-for="(item, index) in tabs"
+        :key="index"
+        @click="switchTab(item, index)"
+    >
+      <image
+          class="w-50rpx h-50rpx mb-4rpx"
+          :src="current === index ? item.selectedIcon : item.icon"
+      />
+      <text :class="current === index ? 'text-blue-4' : 'text-gray-500'">
+        {{ item.text }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  current: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['change'])
+
+const tabs = [
+  {
+    text: '首页',
+    pagePath: '/pages/index/index',
+    icon: '/static/home.png',
+    selectedIcon: '/static/home-selected.png'
+  },
+  {
+    text: '我的',
+    pagePath: '/pages/my/index',
+    icon: '/static/my.png',
+    selectedIcon: '/static/my-selected.png'
+  }
+]
+
+const switchTab = (item, index) => {
+  emit('change', index)
+  uni.redirectTo({url: item.pagePath, animationType: 'none'})
+}
+</script>
+
+<style scoped>
+/* 如果你的 UnoCSS 未启用 rpx 转换，可以保留不动 */
+</style>