Refactor API requests and update component structure

api/home/index.ts

@@ -15,7 +15,7 @@ import type {
  * @returns
  */
 export const hotTop = (params: ThotTopReq) => {
-  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/hot-top', { params })
+  return useDollarFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/hot-top', { params })
 }
 
 /**
@@ -24,60 +24,62 @@ export const hotTop = (params: ThotTopReq) => {
  * @returns
  */
 export const recommendTop = (params: ThotTopReq) => {
-  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { params })
+  return useDollarFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { params })
 }
 
 /**
  * 获取最新图纸信息
  */
 export const newDraw = (params: { type: number; limit: number }) => {
-  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/project/index/draw-new', { params })
+  return useDollarFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/project/index/draw-new', { params })
 }
 
 /**
  * 首页-热点标签
  */
 export const hotTag = (params: { type: number; limit: number; size: number }) => {
-  return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-hot-tab', { params })
+  return useDollarFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-hot-tab', { params })
 }
 
 /**
  * 首页-标签
  */
 export const tag = () => {
-  return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab', {})
+  return useDollarFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab', {})
 }
 
 /**
  * 获取top数据
  */
 export const top = (params: { type: number; limit: number }) => {
-  return useFetchRequest.get<IResponse<ProjectDrawStatisticAppRespVO[]>>('/prod-api/app-api/business/project/index/top', { params })
+  return useDollarFetchRequest.get<IResponse<ProjectDrawStatisticAppRespVO[]>>('/prod-api/app-api/business/project/index/top', { params })
 }
 
 /**
  * 获取用户top数据
  */
 export const userTop = (params: { type?: number }) => {
-  return useFetchRequest.get<IResponse<ProjectTrendingScoreUserInfoVO[]>>('/prod-api/app-api/business/project/index/user-top', { params })
+  return useDollarFetchRequest.get<IResponse<ProjectTrendingScoreUserInfoVO[]>>('/prod-api/app-api/business/project/index/user-top', { params })
 }
 
 /**
  * 设置首页设置信息分页
  */
 export const settinngPage = (params: { pageNo?: number; pageSize: number; type: number; status: number; innerType?: number }) => {
-  return useFetchRequest.get<IResponse<PageResultIndexSettingRespVO>>('/prod-api/admin-api/system/index-setting/page', { params })
+  return useDollarFetchRequest.get<IResponse<PageResultIndexSettingRespVO>>('/prod-api/admin-api/system/index-setting/page', { params })
 }
 /**
  * 获得首页设置信息分页
  */
 export const getSettingPage = (params: { type: number }) => {
-  return useFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { params })
+  return useDollarFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { params })
 }
 
 /**
  * 首页-标签2
  */
 export const tab2 = () => {
-  return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab2', {})
+  return useDollarFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-tab2', {
+    server: true
+  })
 }

composables/useDollarFetchRequest.ts

@@ -44,6 +44,7 @@ const useClientRequest = async <T = unknown>(
     config?: Omit<FetchOptions, 'method'>
   ): Promise<T> => {
     return useClientRequest<T>(endpoint, { ...config, method: 'GET' })
+
   }
 
     // POST请求

composables/useFetchRequest.ts

@@ -34,7 +34,7 @@ const useServerRequest = async <T>(
   };
   // return useFetch<T>(url, { ...defaultOptions, ...opts } as any);
   // 明确转换返回类型
-  const response = await 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;
 };
 
@@ -42,8 +42,15 @@ const useServerRequest = async <T>(
   export const get = <T = unknown>(
     endpoint: string, 
     config?: Omit<FetchOptions, 'method'>
-  ): Promise<T> => {
+  ): Promise<{
-    return useServerRequest<T>(endpoint, { ...config, method: 'GET' })
+    data: T;
+    pending: boolean;
+    error: any;
+    refresh: () => Promise<void>;
+    execute: () => Promise<void>;
+    status: number;
+  }> => {
+    return useServerRequest(endpoint, { ...config, method: 'GET' })
   }
 
     // POST请求
@@ -51,8 +58,15 @@ const useServerRequest = async <T>(
     endpoint: string, 
     body?: any, 
     config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<T> => {
+  ): Promise<{
-    return useServerRequest<T>(endpoint, { ...config, method: 'POST', body })
+    data: T;
+    pending: boolean;
+    error: any;
+    refresh: () => Promise<void>;
+    execute: () => Promise<void>;
+    status: number;
+  }> => {
+    return useServerRequest(endpoint, { ...config, method: 'POST', body })
   }
 
   
@@ -60,8 +74,15 @@ const useServerRequest = async <T>(
   export const del = <T = unknown>(
     endpoint: string, 
     config?: Omit<FetchOptions, 'method'>
-  ): Promise<T> => {
+  ): Promise<{
-    return useServerRequest<T>(endpoint, { ...config, method: 'DELETE' })
+    data: T;
+    pending: boolean;
+    error: any;
+    refresh: () => Promise<void>;
+    execute: () => Promise<void>;
+    status: number;
+  }> => {
+    return useServerRequest(endpoint, { ...config, method: 'DELETE' })
   }
 
     // PUT请求
@@ -69,6 +90,13 @@ const useServerRequest = async <T>(
     endpoint: string, 
     body?: any, 
     config?: Omit<FetchOptions, 'method' | 'body'>
-  ): Promise<T> => {
+  ): Promise<{
-    return useServerRequest<T>(endpoint, { ...config, method: 'PUT', body })
+    data: T;
+    pending: boolean;
+    error: any;
+    refresh: () => Promise<void>;
+    execute: () => Promise<void>;
+    status: number;
+  }> => {
+    return useServerRequest(endpoint, { ...config, method: 'PUT', body })
   }

layout/default.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-  import KlFooter from './kl-footer/index.vue'
+  import KlFooter from '~/layout/kl-footer/index.vue'
   import KlQuickMenu from '~/components/kl-quick-menu/index.vue'
 </script>
 

layout/kl-menus-v2/index.vue

@@ -2,7 +2,7 @@
   <div class="box-border">
     <div class="flex items-center">
       <div class="flex items-center">
-        <div class="box-border h-100% h-55px w-221px flex items-center rounded-lg bg-[#1A65FF] pl-24px text-white">
+        <div class="box-border h-100% h-55px w-221px flex items-center rd-2px bg-[#1A65FF] pl-24px text-white">
           <img src="~/assets/images/1.png" alt="" srcset="" />
           <span class="ml-12px text-16px">全部资源分类</span>
         </div>

layout/kl-search/index.vue

@@ -3,7 +3,7 @@
     <header class="h-106px">
       <div class="mx-a ml--250px h-full flex items-center justify-center">
         <!-- Logo区域 -->
-        <div class="h-100% flex cursor-pointer items-center" @click="router.push('/index')">
+        <div class="h-100% flex cursor-pointer items-center" @click="navigateTo('/')">
           <img src="~/assets/images/logo5.png" alt="图夕夕" class="h-51px w-182px" />
         </div>
         <!-- 搜索区域 -->
@@ -14,7 +14,7 @@
               type="text"
               placeholder="搜一搜"
               :prefix-icon="Search"
-              class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
+              class="no-right-border box-border h-40px w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
               @focus="handleHot(), (showHotList = true)"
               @input="handleInput"
             />

nuxt.config.ts

@@ -115,6 +115,6 @@ export default defineNuxtConfig({
   },
 
   build: {
-    transpile: ["vueuc", "@css-render/vue3-ssr"],
+    transpile: ["vueuc", "@css-render/vue3-ssr","@unocss"],
   },
 });

pages/home/components/Leaderboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <div>
-      <div class="my-32px mb-20px text-18px text-[#333333] font-normal"><img src="~/assets/images/2.png" alt="" srcset="" /> 多多排行榜</div>
+      <div class="my-32px mb-20px text-18px text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-6px" /> 多多排行榜</div>
       <div class="flex">
         <div class="ma-auto box-border h-470px w-460px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-28px">
           <div class="title-bg ma-auto mb-40px mt-20px">一周图纸作者排行</div>
@@ -66,7 +66,8 @@
       </div>
     </div>
     <div class="ml-63px">
-      <div class="my-32px mb-20px text-18px text-[#333333] font-normal"><img src="~/assets/images/2.png" alt="" srcset="" /> 发布动态</div>
+      <div class="my-32px mb-20px text-18px text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-6px" /> 发布动态</div>
+
       <div class="box-border h-470px w-437px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] p-15px">
         <div
           v-for="item in newDrawList"

pages/home/components/SideMenu.vue

@@ -11,14 +11,30 @@
       <!-- @click="handleSubmenuClick(item)" -->
       {{ item.name }}
       <!-- 悬浮浮窗 -->
-      <div v-if="activeIndex === index" class="submenu-panel" :style="{ top: submenuTop + 'px' }" @mouseenter="keepSubmenuVisible" @mouseleave="hideSubMenu">
+      <div
+        v-if="activeIndex === index"
+        class="submenu-panel"
+        :style="{ top: submenuTop + 'px' }"
+        @mouseenter="keepSubmenuVisible"
+        @mouseleave="hideSubMenu"
+      >
         <div class="submenu-content">
           <!-- <div class="text-right">更多</div> -->
           <div class="submenu-group">
             <template v-for="group in item.children" :key="group.id">
-              <div class="submenu-group-title" @click.stop="handleSubmenuClick(group)">{{ group.name }}</div>
+              <div
+                class="submenu-group-title"
+                @click.stop="handleSubmenuClick(group)"
+              >
+                {{ group.name }}
+              </div>
               <div class="submenu-group-items">
-                <div v-for="sub in group.children" :key="sub.id" class="submenu-item" @click.stop="handleSubmenuClick(group, sub)">
+                <div
+                  v-for="sub in group.children"
+                  :key="sub.id"
+                  class="submenu-item"
+                  @click.stop="handleSubmenuClick(group, sub)"
+                >
                   {{ sub.name }}
                 </div>
               </div>
@@ -31,85 +47,96 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue'
+import { ref, onMounted } from "vue";
-  import type { ComponentPublicInstance } from 'vue'
+import type { ComponentPublicInstance } from "vue";
-  import { tab2 } from '~/api/home/index'
+import { tab2 } from "~/api/home/index";
-  import type { ProjectDictNodeVO } from '~/api/home/type'
+import type { ProjectDictNodeVO } from "~/api/home/type";
 
-  const activeIndex = ref(-1)
+const activeIndex = ref(-1);
-  const submenuTop = ref(0)
+const submenuTop = ref(0);
 // const submenuLeft = ref(0)
-  const sideMenu = ref()
+const sideMenu = ref();
-  const menuItemRefs = ref<HTMLElement[]>([])
+const menuItemRefs = ref<HTMLElement[]>([]);
+
+const menuItems = ref<ProjectDictNodeVO[]>([]);
 
 const showSubMenu = (index: number) => {
   // if (menuItems.value.length === index + 1) {
   //   return
   // }
-    activeIndex.value = index
+  activeIndex.value = index;
-    const dom = menuItemRefs.value[index].getBoundingClientRect()
+  const dom = menuItemRefs.value[index].getBoundingClientRect();
-    console.log(dom)
+  console.log(dom);
   // submenuTop.value = window.scrollY
-  }
+};
 
 const hideSubMenu = () => {
-    activeIndex.value = -1
+  activeIndex.value = -1;
-  }
+};
 
-  const handleSubmenuClick = (primary?: ProjectDictNodeVO, secondary?: ProjectDictNodeVO, tertiary?: ProjectDictNodeVO) => {
+const handleSubmenuClick = (
-    const normal = { id: '0', name: '图纸库', isChildren: false }
+  primary?: ProjectDictNodeVO,
+  secondary?: ProjectDictNodeVO,
+  tertiary?: ProjectDictNodeVO
+) => {
+  const normal = { id: "0", name: "图纸库", isChildren: false };
   const level = [primary, secondary, tertiary]
     .filter(Boolean)
-      .map((item) => ({ id: item?.id, name: item?.name, isChildren: item?.children?.length ? false : true }))
+    .map((item) => ({
-    if (primary?.id === '0') {
+      id: item?.id,
-      level[0].name = '图纸库'
+      name: item?.name,
+      isChildren: item?.children?.length ? false : true,
+    }));
+  if (primary?.id === "0") {
+    level[0].name = "图纸库";
   } else {
-      level.unshift(normal)
+    level.unshift(normal);
   }
 
-    navigateTo(`/drawe?level=${JSON.stringify(level)}`)
+  navigateTo(`/drawe?level=${JSON.stringify(level)}`);
-  }
+};
 
 const keepSubmenuVisible = () => {
   // activeIndex.value = activeIndex.value // 保持当前索引
-  }
+};
 
-  const setMenuItemRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+const setMenuItemRef = (
-    if (el && 'offsetTop' in el) {
+  el: Element | ComponentPublicInstance | null,
-      menuItemRefs.value[index] = el as HTMLElement
+  index: number
+) => {
+  if (el && "offsetTop" in el) {
+    menuItemRefs.value[index] = el as HTMLElement;
   }
-  }
+};
-
-  const menuItems = ref<ProjectDictNodeVO[]>([])
 const getLabel = () => {
   tab2().then((res) => {
-      const arr = []
+    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
-    })
     }
+    menuItems.value = arr;
+  });
+};
 
 const getName = (arr: any[]) => {
   if (arr.length === 1) {
-      return arr[0].name
+    return arr[0].name;
   } else {
-      return arr[0].name + ' / ' + arr[1].name
+    return arr[0].name + " / " + arr[1].name;
-    }
   }
+};
 
 const init = () => {
   // 获取标签
   getLabel()
-  }
+};
 
 onMounted(() => {
-    init()
+  init();
-  })
+});
 </script>
 
 <style scoped>

pages/home/index.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="ma-auto w-1440px">
-    <!-- 搜索 -->
-    <KlSearch></KlSearch>
-    <!-- 菜单 -->
-    <!-- <KlMenuV2 /> -->
-    <!-- banner -->
-    <div class="banner-container">
-      <!-- <SideMenu class="side-menu" /> -->
-      <!-- <MainContent class="main-content" /> -->
-    </div>
-    <!-- 学习方法推荐 -->
-    <!-- <LearningRecommendations></LearningRecommendations> -->
-    <!-- 推荐栏目 -->
-    <!-- <RecommendedColumns></RecommendedColumns> -->
-    <!-- 热门图纸 -->
-    <!-- <PopularDrawings></PopularDrawings> -->
-    <!-- 排行榜 -->
-    <!-- <Leaderboard></Leaderboard> -->
-  </div>
-</template>
-
-<script setup lang="ts">
-  import KlSearch from '~/layout/kl-search/index.vue'
-  import KlMenuV2 from '~/layout/kl-menus-v2/index.vue'
-  import SideMenu from './components/SideMenu.vue'
-  import MainContent from './components/MainContent.vue'
-  import RecommendedColumns from './components/RecommendedColumns.vue'
-  import PopularDrawings from './components/PopularDrawings.vue'
-  import Leaderboard from './components/Leaderboard.vue'
-  import LearningRecommendations from './components/LearningRecommendations.vue'
-</script>
-
-<style scoped>
-  .banner-container {
-    display: flex;
-    height: 480px;
-    background-color: #f0f2f5;
-    border: 1px solid #eeeeee;
-  }
-
-  .side-menu {
-    flex-shrink: 0;
-  }
-
-  .main-content {
-    flex: 1;
-  }
-</style>

pages/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="ma-auto w-1440px">
+    <!-- 搜索 -->
+    <KlSearch></KlSearch>
+    <!-- 菜单 -->
+    <KlMenuV2 />
+    <!-- banner -->
+    <div class="banner-container">
+      <SideMenu class="side-menu" />
+      <MainContent class="main-content" />
+    </div>
+    <!-- 学习方法推荐 -->
+    <LearningRecommendations></LearningRecommendations>
+    <!-- 推荐栏目 -->
+    <RecommendedColumns></RecommendedColumns>
+    <!-- 热门图纸 -->
+    <PopularDrawings></PopularDrawings>
+    <!-- 排行榜 -->
+    <Leaderboard></Leaderboard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import KlSearch from '~/layout/kl-search/index.vue'
+  import KlMenuV2 from '~/layout/kl-menus-v2/index.vue'
+  import SideMenu from '~/pages/home/components/SideMenu.vue'
+  import MainContent from '~/pages/home/components/MainContent.vue'
+  import RecommendedColumns from '~/pages/home/components/RecommendedColumns.vue'
+  import PopularDrawings from '~/pages/home/components/PopularDrawings.vue'
+  import Leaderboard from '~/pages/home/components/Leaderboard.vue'
+  import LearningRecommendations from '~/pages/home/components/LearningRecommendations.vue'
+</script>
+
+<style scoped>
+  .banner-container {
+    display: flex;
+    height: 480px;
+    background-color: #f0f2f5;
+    border: 1px solid #eeeeee;
+  }
+
+  .side-menu {
+    flex-shrink: 0;
+  }
+
+  .main-content {
+    flex: 1;
+  }
+</style>

utils/RefreshToken.ts

@@ -18,8 +18,8 @@ class RefreshToken {
 
   // 设置token
   static setToken(token: string, refreshToken: string) {
-    window.localStorage.setItem(RefreshToken.SOTRAGE_TOKENKEY, token);
+    window?.localStorage.setItem(RefreshToken.SOTRAGE_TOKENKEY, token);
-    window.localStorage.setItem(
+    window?.localStorage.setItem(
       RefreshToken.SOTRAGE_REFRESH_TOKEN_KEY,
       refreshToken
     );
@@ -27,22 +27,22 @@ class RefreshToken {
 
   // 清除token
   static removeToken() {
-    window.localStorage.removeItem(RefreshToken.SOTRAGE_TOKENKEY);
+    window?.localStorage.removeItem(RefreshToken.SOTRAGE_TOKENKEY);
-    window.localStorage.removeItem(RefreshToken.SOTRAGE_REFRESH_TOKEN_KEY);
+    window?.localStorage.removeItem(RefreshToken.SOTRAGE_REFRESH_TOKEN_KEY);
     //清除token，一起把userID也清除了
-    window.localStorage.removeItem(RefreshToken.SOTRAGE_USERID);
+    window?.localStorage.removeItem(RefreshToken.SOTRAGE_USERID);
-    window.localStorage.removeItem(RefreshToken.SOTRAGE_USERNAME);
+    window?.localStorage.removeItem(RefreshToken.SOTRAGE_USERNAME);
-    window.localStorage.removeItem(RefreshToken.SOTRAGE_USERINFO);
+    window?.localStorage.removeItem(RefreshToken.SOTRAGE_USERINFO);
   }
   //设置userID
   static setUserId(userId: string) {
-    window.localStorage.setItem(RefreshToken.SOTRAGE_USERID, userId);
+    window?.localStorage.setItem(RefreshToken.SOTRAGE_USERID, userId);
   }
   static setUserName(userName: string) {
-    window.localStorage.setItem(RefreshToken.SOTRAGE_USERNAME, userName);
+    window?.localStorage.setItem(RefreshToken.SOTRAGE_USERNAME, userName);
   }
   static setUserInfo(userInfo: AppMemberUserInfoRespVO) {
-    window.localStorage.setItem(
+    window?.localStorage.setItem(
       RefreshToken.SOTRAGE_USERINFO,
       JSON.stringify(userInfo)
     );
@@ -50,15 +50,15 @@ class RefreshToken {
   // 获取token
   static getToken() {
     const token =
-      window.localStorage.getItem(RefreshToken.SOTRAGE_TOKENKEY) || "";
+      window?.localStorage.getItem(RefreshToken.SOTRAGE_TOKENKEY) || "";
     const refreshToken =
-      window.localStorage.getItem(RefreshToken.SOTRAGE_REFRESH_TOKEN_KEY) || "";
+      window?.localStorage.getItem(RefreshToken.SOTRAGE_REFRESH_TOKEN_KEY) || "";
     const userId =
-      window.localStorage.getItem(RefreshToken.SOTRAGE_USERID) || "";
+      window?.localStorage.getItem(RefreshToken.SOTRAGE_USERID) || "";
     const userName =
-      window.localStorage.getItem(RefreshToken.SOTRAGE_USERNAME) || "";
+      window?.localStorage.getItem(RefreshToken.SOTRAGE_USERNAME) || "";
     const userInfo =
-      window.localStorage.getItem(RefreshToken.SOTRAGE_USERINFO) || "";
+      window?.localStorage.getItem(RefreshToken.SOTRAGE_USERINFO) || "";
     return {
       token,
       refreshToken,