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

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

components/u-time-line/u-time-line-item.vue

@@ -11,29 +11,21 @@
   </view>
 </template>
 
-<script>
-export default {
-  name: 'UTimeLineItem',
-  props: {
-    nodeTop: {
-      type: [String, Number],
-      default: ''
-    },
-    bgColor: {
-      type: String,
-      default: '#ffffff'
-    }
-  },
-  computed: {
-    nodeStyle() {
-      if (this.nodeTop === '' || this.nodeTop === null || this.nodeTop === undefined) {
-        return {}
-      }
-      const top = typeof this.nodeTop === 'number' ? `${this.nodeTop}rpx` : this.nodeTop
-      return { top }
-    }
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  nodeTop?: string | number
+  bgColor?: string
+}>()
+
+const nodeStyle = computed(() => {
+  if (props.nodeTop === '' || props.nodeTop === null || props.nodeTop === undefined) {
+    return {}
   }
-}
+  const top = typeof props.nodeTop === 'number' ? `${props.nodeTop}rpx` : props.nodeTop
+  return { top }
+})
 </script>
 
 <style lang="scss" scoped>

components/u-time-line/u-time-line.vue

@@ -4,10 +4,8 @@
   </view>
 </template>
 
-<script>
-export default {
-  name: 'UTimeLine'
-}
+<script setup lang="ts">
+// UTimeLine 组件
 </script>
 
 <style lang="scss" scoped>