fix(request): 解决reactive对象导致重复请求问题

- 修改detail页面标题字体大小样式
- 更新自定义组件中的报名链接地址
- 在request工具中导入vue的isProxy和toRaw方法
- 添加proxy对象检测避免useFetch监听变更重复发送请求
- 修复post和put方法中的数据传递逻辑

components/Index/Customized.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full container-bg bg-blue-600 gap-10 flex justify-center items-center py-6">
-    <el-button size="large" @click="openUrl(`https://zzyx.gxcampus.com/register`)">在线报名</el-button>
+    <el-button size="large" @click="openUrl(`http://sign.gxbsnx.com`)">在线报名</el-button>
   </div>
 </template>
 

pages/detail/[id].vue

@@ -13,7 +13,7 @@
         <div class=" bg-white">
           <h1 class="pt-5 text-3xl text-center">{{ form.title }}</h1>
           <div class="flex items-center justify-center py-4">
-            <el-space size="large" class="text-gray-400 text-lg">
+            <el-space size="large" class="text-gray-400" style="font-size: 16px">
               <span v-if="form.author">作者：{{ form.author }}</span>
               <span>{{ $t('createTime') }}：{{ dayjs(form.createTime).format('YYYY-MM-DD HH:mm') }}</span>
               <span v-if="form.source">来源：{{ form.source }}</span>

utils/request.ts

@@ -1,5 +1,6 @@
 import type { UseFetchOptions } from '#app';
-import {useToken} from "~/composables/configState";
+import { useToken } from "~/composables/configState";
+import { isProxy, toRaw } from 'vue';
 
 export const request = <T>(url:string, options?: UseFetchOptions<T, unknown>) => {
     const nuxtApp = useNuxtApp()
@@ -70,9 +71,11 @@ export const get = <T>(url: string,options?: UseFetchOptions<T, unknown>) => {
 }
 export const post = <T>(url:string,data?: any) => {
     return <T>new Promise((resolve,reject) => {
+        // 避免传入 reactive 对象导致 useFetch 监听变更重复发送请求
+        const payload = isProxy(data) ? toRaw(data) : data;
         request(url,{
             method: 'post',
-            body: data
+            body: payload
         }).then(res => {
             resolve(res.data.value)
         }).catch(err => {
@@ -82,9 +85,10 @@ export const post = <T>(url:string,data?: any) => {
 }
 export const put = <T>(url:string,data?: any) => {
     return <T>new Promise((resolve,reject) => {
+        const payload = isProxy(data) ? toRaw(data) : data;
         request(url,{
             method: 'put',
-            body: data
+            body: payload
         }).then(res => {
             resolve(res.data.value)
         }).catch(err => {