refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

pages/tabbar/home/template/tpl_banner.vue

@@ -14,35 +14,20 @@
         indicator
         @click="clickSwiper"
       >
-        <template #loading><u-loading></u-loading></template>
+        <template #loading><u-loading-icon></u-loading-icon></template>
       </u-swiper>
     </view>
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
 import { modelNavigateTo } from "./tpl";
-export default {
-  title: "导航栏",
-  props: ["res"],
-  watch: {
-    res: {
-      handler(newValue, oldValue) {
-        this["res"] = newValue;
-      },
-      deep: true,
-    },
-  },
 
-  mounted() {
-   
-  },
-  methods: {
-    clickSwiper(index) {
-      modelNavigateTo(this.res.list[index]);
-    },
-  },
-};
+const props = defineProps<{ res: any }>();
+
+function clickSwiper(index: number) {
+  modelNavigateTo(props.res.list[index]);
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";