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

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

pages/tabbar/home/template/tpl_flex_one.vue

@@ -1,27 +1,30 @@
 <template>
-  <div class="layout">
-    <div class="flex-one">
-      <u-image v-if="res.list[0].zoneInfo == ''" @click="modelNavigateTo(res.list[0])" width="100%" mode="aspectFit" height="280rpx" :src="res.list[0].img" alt=""></u-image>
+  <view class="layout">
+    <view class="flex-one">
+      <u-image
+        v-if="!hasHotZone"
+        @click="modelNavigateTo(res.list[0])"
+        width="100%"
+        mode="aspectFit"
+        height="280rpx"
+        :src="res.list[0].img"
+        alt=""
+      ></u-image>
       <hotzone v-else :res="res"></hotzone>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
-<script>
+<script setup lang="ts">
+import { computed } from "vue";
 import { modelNavigateTo } from "./tpl";
-import hotzone from "@/pages/tabbar/home/template/tpl_hot_zone.vue";
+import hotzone from "./tpl_hot_zone.vue";
 
-export default {
-  title: "单行图片模块",
-  components: {
-    hotzone,
-  },
-  data() {
-    return {
-      modelNavigateTo
-    };
-  },
-  props: ["res"],
-};
+const props = defineProps<{ res: any }>();
+
+const hasHotZone = computed(() => {
+  const zoneInfo = props.res?.list?.[0]?.zoneInfo;
+  return Array.isArray(zoneInfo) ? zoneInfo.length > 0 : !!zoneInfo;
+});
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";