From 2fe36051f8ab2e2f70796beacae0f1b095f2dc1c Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Wed, 20 Aug 2025 22:58:08 +0800
Subject: [PATCH] Refactor API requests and update component structure

---
 .vscode/settings.json                         |  5 ++
 api/home/index.ts                             |  7 +-
 composables/useFetchRequest.ts                | 46 +++--------
 layout/kl-menus-v2/index.vue                  |  1 -
 .../components/LearningRecommendations.vue    | 20 +++--
 pages/home/components/MainContent.vue         | 81 ++++++++++++-------
 pages/home/components/RecommendedColumns.vue  | 35 ++++----
 pages/home/components/SideMenu.vue            | 37 +++++----
 8 files changed, 123 insertions(+), 109 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9de90c6
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.configPath": "./.prettierrc"
+}
\ No newline at end of file
diff --git a/api/home/index.ts b/api/home/index.ts
index c7b2236..2d557e5 100644
--- a/api/home/index.ts
+++ b/api/home/index.ts
@@ -24,7 +24,7 @@ export const hotTop = (params: ThotTopReq) => {
  * @returns
  */
 export const recommendTop = (params: ThotTopReq) => {
-  return useDollarFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { params })
+  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { params })
 }
 
 /**
@@ -72,14 +72,13 @@ export const settinngPage = (params: { pageNo?: number; pageSize: number; type:
  * 获得首页设置信息分页
  */
 export const getSettingPage = (params: { type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { params })
+  return useFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { params })
 }
 
 /**
  * 首页-标签2
  */
 export const tab2 = () => {
-  return useDollarFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab2', {
-    server: true
+  return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab2', {
   })
 }
diff --git a/composables/useFetchRequest.ts b/composables/useFetchRequest.ts
index f9b58ac..5b4ef53 100644
--- a/composables/useFetchRequest.ts
+++ b/composables/useFetchRequest.ts
@@ -35,22 +35,15 @@ const useServerRequest = async <T>(
   // return useFetch<T>(url, { ...defaultOptions, ...opts } as any);
   // 明确转换返回类型
   const response = await useFetch<T>(url, { ...defaultOptions, ...opts, key: 'unique-key-' + Date.now(), } as any);
-  return response as unknown as T;
+  return response.data.value as unknown as T;
 };
 
   // GET请求
   export const get = <T = unknown>(
     endpoint: string, 
     config?: Omit<FetchOptions, 'method'>
-  ): Promise<{
-    data: T;
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(endpoint, { ...config, method: 'GET' })
+  ): Promise<T> => {
+    return useServerRequest<T>(endpoint, { ...config, method: 'GET' })
   }
 
     // POST请求
@@ -58,15 +51,8 @@ const useServerRequest = async <T>(
     endpoint: string, 
     body?: any, 
     config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<{
-    data: T;
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(endpoint, { ...config, method: 'POST', body })
+  ): Promise<T> => {
+    return useServerRequest<T>(endpoint, { ...config, method: 'POST', body })
   }
 
   
@@ -74,15 +60,8 @@ const useServerRequest = async <T>(
   export const del = <T = unknown>(
     endpoint: string, 
     config?: Omit<FetchOptions, 'method'>
-  ): Promise<{
-    data: T;
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(endpoint, { ...config, method: 'DELETE' })
+  ): Promise<T> => {
+    return useServerRequest<T>(endpoint, { ...config, method: 'DELETE' })
   }
 
     // PUT请求
@@ -90,13 +69,6 @@ const useServerRequest = async <T>(
     endpoint: string, 
     body?: any, 
     config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<{
-    data: T;
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(endpoint, { ...config, method: 'PUT', body })
+  ): Promise<T> => {
+    return useServerRequest<T>(endpoint, { ...config, method: 'PUT', body })
   }
diff --git a/layout/kl-menus-v2/index.vue b/layout/kl-menus-v2/index.vue
index a0f14fb..89ddb81 100644
--- a/layout/kl-menus-v2/index.vue
+++ b/layout/kl-menus-v2/index.vue
@@ -10,7 +10,6 @@
           <nuxt-link
             v-for="(item, index) in menuItems"
             :key="index"
-            target="_blank"
             :to="item.path"
             class="parent-links relative rounded-lg px3 py2 text-[#1A65FF]"
           >
diff --git a/pages/home/components/LearningRecommendations.vue b/pages/home/components/LearningRecommendations.vue
index fe6ec00..0e53ea1 100644
--- a/pages/home/components/LearningRecommendations.vue
+++ b/pages/home/components/LearningRecommendations.vue
@@ -31,14 +31,20 @@
     status: 0,
   })
 
-  const bannerList = ref<PageResultIndexSettingRespVO[]>([])
-  const getBanner = async () => {
+  const { data: bannerList } = useAsyncData('get-setting-Page', async () => {
     const res = await getSettingPage(pageReq)
-    if (res.code === 0) {
-      bannerList.value = res.data
-    }
-  }
-  getBanner()
+    return res.data
+  })
+
+
+  // const bannerList = ref<PageResultIndexSettingRespVO[]>([])
+  // const getBanner = async () => {
+  //   const res = await getSettingPage(pageReq)
+  //   if (res.code === 0) {
+  //     bannerList.value = res.data
+  //   }
+  // }
+  // getBanner()
 
   const handleClick = (url: string) => {
     navigateTo(url)
diff --git a/pages/home/components/MainContent.vue b/pages/home/components/MainContent.vue
index ea004ee..b43ee57 100644
--- a/pages/home/components/MainContent.vue
+++ b/pages/home/components/MainContent.vue
@@ -1,53 +1,74 @@
-`<template>
+`
+<template>
   <div class="main-content">
     <div class="flex">
       <div class="h-424px w-957px">
         <el-carousel height="424px" indicator-position="none">
           <el-carousel-item v-for="(item, index) in bannerList" :key="index">
-            <el-image :src="item.content" class="w-100%" :class="{ 'cursor-pointer': item.url }" fit="cover" @click="handleClick(item.url)" />
+            <el-image
+              :src="item.content"
+              class="w-100%"
+              :class="{ 'cursor-pointer': item.url }"
+              fit="cover"
+              @click="handleClick(item.url)"
+            />
           </el-carousel-item>
         </el-carousel>
       </div>
       <LoginForm />
     </div>
-    <div class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px">
-      <img src="~/assets/images/voice.png" alt="" srcset="" class="mr-10px h-15px w-16px" />
-      <Vue3Marquee :duration="10" direction="normal" pause-on-hover>· 经典来袭，SolidWorks装配经典案例之气动发动机 </Vue3Marquee>
+    <div
+      class="box-border h-56px w-1219px flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-10px line-height-46px"
+    >
+      <img
+        src="~/assets/images/voice.png"
+        alt=""
+        srcset=""
+        class="mr-10px h-15px w-16px"
+      />
+      <Vue3Marquee :duration="10" direction="normal" pause-on-hover
+        >· 经典来袭，SolidWorks装配经典案例之气动发动机
+      </Vue3Marquee>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref } from 'vue'
-  import LoginForm from './LoginForm.vue'
-  import { Vue3Marquee } from 'vue3-marquee'
+import { reactive, ref } from "vue";
+import LoginForm from "./LoginForm.vue";
+import { Vue3Marquee } from "vue3-marquee";
 
-  import { getSettingPage } from '~/api/home/index'
-  import type { PageResultIndexSettingRespVO } from '~/api/home/type'
+import { getSettingPage } from "~/api/home/index";
+import type { PageResultIndexSettingRespVO } from "~/api/home/type";
 
-  const pageReq = reactive({
-    type: 1,
-    status: 0,
-  })
+const pageReq = reactive({
+  type: 1,
+  status: 0,
+});
 
-  const bannerList = ref<PageResultIndexSettingRespVO[]>([])
-  const getBanner = async () => {
-    const res = await getSettingPage(pageReq)
-    if (res.code === 0) {
-      bannerList.value = res.data
-    }
-  }
-  getBanner()
-
-  const handleClick = (url: string) => {
-    if (url) {
-      navigateTo(url)
-    }
+const { data: bannerList } = useAsyncData("get-setting-Page", async () => {
+  const res = await getSettingPage(pageReq);
+  return res.data;
+});
+
+// const bannerList = ref<PageResultIndexSettingRespVO[]>([])
+// const getBanner = async () => {
+//   const res = await getSettingPage(pageReq)
+//   if (res.code === 0) {
+//     bannerList.value = res.data
+//   }
+// }
+// getBanner()
+
+const handleClick = (url: string) => {
+  if (url) {
+    navigateTo(url);
   }
+};
 </script>
 
 <style scoped lang="scss">
-  .main-content {
-    flex: 1;
-  }
+.main-content {
+  flex: 1;
+}
 </style>
diff --git a/pages/home/components/RecommendedColumns.vue b/pages/home/components/RecommendedColumns.vue
index 9bf7b94..3552fca 100644
--- a/pages/home/components/RecommendedColumns.vue
+++ b/pages/home/components/RecommendedColumns.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="mt-34px w-100%">
+  <div class="mt-[34px] w-[100%]">
     <KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
-    <div class="content mt-10px">
+
+    <div class="content mt-[10px]">
       <el-row :gutter="20">
         <el-col v-for="i in recommendTopList" :key="i.id" :span="6">
           <CardPicture :item-info="i" />
@@ -9,8 +10,8 @@
       </el-row>
     </div>
     <!-- 暂无数据 -->
-    <el-empty v-if="recommendTopList.length === 0" description="暂无数据"></el-empty>
-    <div v-if="recommendTopList.length > 0" class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div>
+    <el-empty v-if="recommendTopList?.length === 0" description="暂无数据"></el-empty>
+    <!-- <div v-else class="cursor-pointer text-right text-16px text-[#1A65FF] font-normal" @click="handleClick"> 查看更多 >> </div> -->
   </div>
 </template>
 
@@ -43,15 +44,22 @@
     },
   ])
 
-  const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
-  const getRecommendTop = () => {
+  // const recommendTopList = ref<ProjectDrawPageRespVO[]>([])
+  // const getRecommendTop = () => {
+  //   // @ts-ignore
+  //   recommendTop(query).then((res) => {
+  //     if (Array.isArray(res.data) && res.data.length > 0) {
+  //       recommendTopList.value = res.data
+  //     }
+  //   })
+  // }
+
+  const { data: recommendTopList, refresh: getRecommendTop} = useAsyncData('recommendTop', async () => {
     // @ts-ignore
-    recommendTop(query).then((res) => {
-      if (Array.isArray(res.data) && res.data.length > 0) {
-        recommendTopList.value = res.data
-      }
-    })
-  }
+    const res = await recommendTop(query)
+    return res.data || []
+  })
+
 
   const handleClick = () => {
     if (query.type === 1) {
@@ -69,9 +77,6 @@
       if (val) {
         getRecommendTop()
       }
-    },
-    {
-      immediate: true,
     }
   )
 </script>
diff --git a/pages/home/components/SideMenu.vue b/pages/home/components/SideMenu.vue
index e65c3b4..a604652 100644
--- a/pages/home/components/SideMenu.vue
+++ b/pages/home/components/SideMenu.vue
@@ -58,7 +58,26 @@ const submenuTop = ref(0);
 const sideMenu = ref();
 const menuItemRefs = ref<HTMLElement[]>([]);
 
-const menuItems = ref<ProjectDictNodeVO[]>([]);
+// const menuItems = ref<ProjectDictNodeVO[]>([]);
+
+// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
+const { data: menuItems, pending, error } = useAsyncData(
+  'tab2-list',
+  async () => {
+    const res = await tab2()
+      const arr = [];
+      for (let i = 0; i < res.data?.length; i += 2) {
+        arr.push({
+          children: res.data.slice(i, i + 2),
+          name: getName(res.data.slice(i, i + 2)),
+        });
+      }
+    return arr
+  }
+)
+
+
+
 
 const showSubMenu = (index: number) => {
   // if (menuItems.value.length === index + 1) {
@@ -108,18 +127,6 @@ const setMenuItemRef = (
     menuItemRefs.value[index] = el as HTMLElement;
   }
 };
-const getLabel = () => {
-  tab2().then((res) => {
-    const arr = [];
-    for (let i = 0; i < res.data.length; i += 2) {
-      arr.push({
-        children: res.data.slice(i, i + 2),
-        name: getName(res.data.slice(i, i + 2)),
-      });
-    }
-    menuItems.value = arr;
-  });
-};
 
 const getName = (arr: any[]) => {
   if (arr.length === 1) {
@@ -131,11 +138,11 @@ const getName = (arr: any[]) => {
 
 const init = () => {
   // 获取标签
-  getLabel()
+  // getLabel()
 };
 
 onMounted(() => {
-  init();
+  // init();
 });
 </script>