Refactor API requests and update component structure

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.configPath": "./.prettierrc"
+}

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', {
+  return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab2', {
-    server: true
   })
 }

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<{
+  ): Promise<T> => {
-    data: T;
+    return useServerRequest<T>(endpoint, { ...config, method: 'GET' })
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(endpoint, { ...config, method: 'GET' })
   }
 
     // POST请求
@@ -58,15 +51,8 @@ const useServerRequest = async <T>(
     endpoint: string, 
     body?: any, 
     config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<{
+  ): Promise<T> => {
-    data: T;
+    return useServerRequest<T>(endpoint, { ...config, method: 'POST', body })
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(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<{
+  ): Promise<T> => {
-    data: T;
+    return useServerRequest<T>(endpoint, { ...config, method: 'DELETE' })
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(endpoint, { ...config, method: 'DELETE' })
   }
 
     // PUT请求
@@ -90,13 +69,6 @@ const useServerRequest = async <T>(
     endpoint: string, 
     body?: any, 
     config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<{
+  ): Promise<T> => {
-    data: T;
+    return useServerRequest<T>(endpoint, { ...config, method: 'PUT', body })
-    pending: boolean;
-    error: any;
-    refresh: () => Promise<void>;
-    execute: () => Promise<void>;
-    status: number;
-  }> => {
-    return useServerRequest(endpoint, { ...config, method: 'PUT', body })
   }

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]"
           >

pages/home/components/LearningRecommendations.vue

@@ -31,14 +31,20 @@
     status: 0,
   })
 
-  const bannerList = ref<PageResultIndexSettingRespVO[]>([])
+  const { data: bannerList } = useAsyncData('get-setting-Page', async () => {
-  const getBanner = async () => {
     const res = await getSettingPage(pageReq)
-    if (res.code === 0) {
+    return res.data
-      bannerList.value = res.data
+  })
-    }
+
-  }
+
-  getBanner()
+  // 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)

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">
+    <div
-      <img src="~/assets/images/voice.png" alt="" srcset="" class="mr-10px h-15px w-16px" />
+      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"
-      <Vue3Marquee :duration="10" direction="normal" pause-on-hover>· 经典来袭，SolidWorks装配经典案例之气动发动机 </Vue3Marquee>
+    >
+      <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 { reactive, ref } from "vue";
-  import LoginForm from './LoginForm.vue'
+import LoginForm from "./LoginForm.vue";
-  import { Vue3Marquee } from 'vue3-marquee'
+import { Vue3Marquee } from "vue3-marquee";
 
-  import { getSettingPage } from '~/api/home/index'
+import { getSettingPage } from "~/api/home/index";
-  import type { PageResultIndexSettingRespVO } from '~/api/home/type'
+import type { PageResultIndexSettingRespVO } from "~/api/home/type";
 
-  const pageReq = reactive({
+const pageReq = reactive({
   type: 1,
   status: 0,
-  })
+});
 
-  const bannerList = ref<PageResultIndexSettingRespVO[]>([])
+const { data: bannerList } = useAsyncData("get-setting-Page", async () => {
-  const getBanner = async () => {
+  const res = await getSettingPage(pageReq);
-    const res = await getSettingPage(pageReq)
+  return res.data;
-    if (res.code === 0) {
+});
-      bannerList.value = res.data
-    }
-  }
-  getBanner()
 
-  const handleClick = (url: string) => {
+// 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)
+    navigateTo(url);
-    }
   }
+};
 </script>
 
 <style scoped lang="scss">
-  .main-content {
+.main-content {
   flex: 1;
-  }
+}
 </style>

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>
+    <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>
+    <!-- <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 recommendTopList = ref<ProjectDrawPageRespVO[]>([])
-  const getRecommendTop = () => {
+  // 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) => {
+    const res = await recommendTop(query)
-      if (Array.isArray(res.data) && res.data.length > 0) {
+    return res.data || []
-        recommendTopList.value = res.data
-      }
   })
-  }
+
 
   const handleClick = () => {
     if (query.type === 1) {
@@ -69,9 +77,6 @@
       if (val) {
         getRecommendTop()
       }
-    },
-    {
-      immediate: true,
     }
   )
 </script>

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>