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

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

pages/tabbar/home/template/tpl_notice.vue

@@ -6,19 +6,14 @@
   </div>
 </template>
 
-<script>
-  export default {
-    title: "公告",
-    props: ["res"],
-    data() {
-      return {
-        list: []
-      }
-    },
-    mounted() {
-      this.list = this.res.list[0].title.map(i => i.context);
-    },
-  };
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ res: any }>();
+
+const list = computed(() =>
+  props.res.list[0].title.map((i: { context: string }) => i.context)
+);
 </script>
 <style lang="scss" scoped>
   @import "./tpl.scss";