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

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

pages/passport/article.vue

@@ -10,31 +10,23 @@
   </view>
 </template>
 
-<script>
-import { getArticleDetail } from "@/api/article.js";
-export default {
-  data() {
-    return {
-      // 用于接收上一级通过路径传输的数据
-      routers: "", 
-      // 请求文章接口后存储文章信息
-      articleData: "",
-    };
-  },
-  onLoad(val) {
-    this.routers = val;
-    getArticleDetail(val.id).then((res) => {
-      if (res.data.result) {
-        // 将请求的文章数据赋值
-        this.articleData = res.data.result.content;
-      }
-      // 修改当前NavigationBar(标题头)为文章头部
-      uni.setNavigationBarTitle({
-        title: val.title,
-      });
-    });
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getArticleDetail } from '@/api/article.js'
+
+const articleData = ref('')
+
+onLoad((val) => {
+  getArticleDetail(val.id).then((res) => {
+    if (res.data.result) {
+      articleData.value = res.data.result.content
+    }
+    uni.setNavigationBarTitle({
+      title: val.title,
+    })
+  })
+})
 </script>
 <style lang="scss" scoped>
 page {