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

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

pages/tabbar/home/template/tpl.scss

@@ -1,6 +1,6 @@
 .image-mode {
    width: 100%;
-   height: 100%;
+   height: auto;
     display: block;
     padding: 2rpx;
 }
@@ -21,10 +21,10 @@ $home-layout-padding: 16rpx;
     width: 100%;
 }
 .view-height-75 {
-    // height: 150rpx;
+    min-height: 150rpx;
 }
 .view-height-150 {
-    // height: 300rpx;
+    min-height: 300rpx;
     flex: 1;
 }