hookehuyr

refactor(TabBar): 格式化模板代码并调整注释结构

将模板中的长属性拆分为多行以提升可读性
调整 handleTabClick 函数内的注释格式,使其更清晰
1 <!-- 1 <!--
2 * @Date: 2026-01-29 20:33:23 2 * @Date: 2026-01-29 20:33:23
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-30 20:13:36 4 + * @LastEditTime: 2026-01-30 21:03:18
5 * @FilePath: /manulife-weapp/src/components/TabBar.vue 5 * @FilePath: /manulife-weapp/src/components/TabBar.vue
6 * @Description: 通用底部导航栏组件,用于页面底部固定导航栏,展示页面标题。 6 * @Description: 通用底部导航栏组件,用于页面底部固定导航栏,展示页面标题。
7 --> 7 -->
8 <template> 8 <template>
9 - <view class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
10 - <view class="flex items-center justify-around py-[32rpx]">
11 <view 9 <view
12 - class="flex-1 flex flex-col items-center justify-center" 10 + class="fixed bottom-0 left-0 w-full bg-white shadow-[0_-4rpx_16rpx_rgba(0,0,0,0.05)] pb-[env(safe-area-inset-bottom)] z-50">
13 - v-for="(item, index) in tabs" 11 + <view class="flex items-center justify-around py-[32rpx]">
14 - :key="index" 12 + <view class="flex-1 flex flex-col items-center justify-center" v-for="(item, index) in tabs" :key="index"
15 - @tap="handleTabClick(item)" 13 + @tap="handleTabClick(item)">
16 - > 14 + <IconFont :name="item.icon" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']" size="24" />
17 - <IconFont 15 + <text class="text-[20rpx] mt-[8rpx]" :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']">{{
18 - :name="item.icon" 16 + item.label }}</text>
19 - :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
20 - size="24"
21 - />
22 - <text
23 - class="text-[20rpx] mt-[8rpx]"
24 - :class="[current === item.key ? 'text-blue-600' : 'text-gray-400']"
25 - >{{ item.label }}</text>
26 </view> 17 </view>
27 </view> 18 </view>
28 </view> 19 </view>
......