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请求
@@ -71,4 +72,4 @@ const useClientRequest = async <T = unknown>(
     config?: Omit<FetchOptions, 'method' | 'body'>
   ): Promise<T> => {
     return useClientRequest<T>(endpoint, { ...config, method: 'PUT', body })
-  }
+  }

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,116 +47,127 @@
 </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 submenuLeft = ref(0)
-  const sideMenu = ref()
+const sideMenu = ref();
-  const menuItemRefs = ref<HTMLElement[]>([])
+const menuItemRefs = ref<HTMLElement[]>([]);
 
-  const showSubMenu = (index: number) => {
+const menuItems = ref<ProjectDictNodeVO[]>([]);
-    // if (menuItems.value.length === index + 1) {
+
-    //   return
+const showSubMenu = (index: number) => {
-    // }
+  // if (menuItems.value.length === index + 1) {
-    activeIndex.value = index
+  //   return
-    const dom = menuItemRefs.value[index].getBoundingClientRect()
+  // }
-    console.log(dom)
+  activeIndex.value = index;
-    // submenuTop.value = window.scrollY
+  const dom = menuItemRefs.value[index].getBoundingClientRect();
+  console.log(dom);
+  // submenuTop.value = window.scrollY
+};
+
+const hideSubMenu = () => {
+  activeIndex.value = -1;
+};
+
+const handleSubmenuClick = (
+  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,
+    }));
+  if (primary?.id === "0") {
+    level[0].name = "图纸库";
+  } else {
+    level.unshift(normal);
   }
 
-  const hideSubMenu = () => {
+  navigateTo(`/drawe?level=${JSON.stringify(level)}`);
-    activeIndex.value = -1
+};
-  }
 
-  const handleSubmenuClick = (primary?: ProjectDictNodeVO, secondary?: ProjectDictNodeVO, tertiary?: ProjectDictNodeVO) => {
+const keepSubmenuVisible = () => {
-    const normal = { id: '0', name: '图纸库', isChildren: false }
+  // activeIndex.value = activeIndex.value // 保持当前索引
-    const level = [primary, secondary, tertiary]
+};
-      .filter(Boolean)
+
-      .map((item) => ({ id: item?.id, name: item?.name, isChildren: item?.children?.length ? false : true }))
+const setMenuItemRef = (
-    if (primary?.id === '0') {
+  el: Element | ComponentPublicInstance | null,
-      level[0].name = '图纸库'
+  index: number
-    } else {
+) => {
-      level.unshift(normal)
+  if (el && "offsetTop" in el) {
+    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;
+  });
+};
 
-    navigateTo(`/drawe?level=${JSON.stringify(level)}`)
+const getName = (arr: any[]) => {
+  if (arr.length === 1) {
+    return arr[0].name;
+  } else {
+    return arr[0].name + " / " + arr[1].name;
   }
+};
 
-  const keepSubmenuVisible = () => {
+const init = () => {
-    // activeIndex.value = activeIndex.value // 保持当前索引
+  // 获取标签
-  }
+  getLabel()
+};
 
-  const setMenuItemRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+onMounted(() => {
-    if (el && 'offsetTop' in el) {
+  init();
-      menuItemRefs.value[index] = el as HTMLElement
+});
-    }
-  }
-
-  const menuItems = ref<ProjectDictNodeVO[]>([])
-  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) {
-      return arr[0].name
-    } else {
-      return arr[0].name + ' / ' + arr[1].name
-    }
-  }
-
-  const init = () => {
-    // 获取标签
-    getLabel()
-  }
-
-  onMounted(() => {
-    init()
-  })
 </script>
 
 <style scoped>
-  .side-menu {
+.side-menu {
-    width: 221px;
+  width: 221px;
-    background-color: #fff;
+  background-color: #fff;
-    /* padding: 10px 0; */
+  /* padding: 10px 0; */
-    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
-    /* overflow: visible; */
+  /* overflow: visible; */
-    box-sizing: border-box;
+  box-sizing: border-box;
-    position: relative; /* 添加定位上下文 */
+  position: relative; /* 添加定位上下文 */
-    /* overflow-y: auto; */
+  /* overflow-y: auto; */
-    /* 隐藏滚动条 */
+  /* 隐藏滚动条 */
-    scrollbar-width: none; /* Firefox */
+  scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
+  -ms-overflow-style: none; /* IE and Edge */
-    z-index: 9;
+  z-index: 9;
-    /* padding-top: 10px; */
+  /* padding-top: 10px; */
-  }
+}
 
-  /* 隐藏 Webkit 浏览器的滚动条 */
+/* 隐藏 Webkit 浏览器的滚动条 */
-  .side-menu::-webkit-scrollbar {
+.side-menu::-webkit-scrollbar {
-    display: none;
+  display: none;
-  }
+}
 
-  /* 鼠标悬停时显示滚动条 */
+/* 鼠标悬停时显示滚动条 */
-  .side-menu:hover {
+.side-menu:hover {
-    scrollbar-width: none; /* Firefox */
+  scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
+  -ms-overflow-style: none; /* IE and Edge */
-  }
+}
 
-  /* .side-menu:hover::-webkit-scrollbar {
+/* .side-menu:hover::-webkit-scrollbar {
     display: block;
     width: 8px !important;
   }
@@ -154,44 +181,44 @@
     background-color: #fff;
   } */
 
-  .menu-item {
+.menu-item {
-    /* position: relative; */
+  /* position: relative; */
-    text-align: center;
+  text-align: center;
-    padding: 4px 24px;
+  padding: 4px 24px;
-    cursor: pointer;
+  cursor: pointer;
-    /* transition: all 0.3s ease; */
+  /* transition: all 0.3s ease; */
-    color: #333;
+  color: #333;
-    font-size: 14px;
+  font-size: 14px;
-    border: 1px solid transparent;
+  border: 1px solid transparent;
-    z-index: 9;
+  z-index: 9;
-  }
+}
 
-  .menu-item:hover {
+.menu-item:hover {
-    background-color: #fff;
+  background-color: #fff;
-    color: #1890ff;
+  color: #1890ff;
-    border: 1px solid #1890ff;
+  border: 1px solid #1890ff;
-    border-right: transparent !important;
+  border-right: transparent !important;
-  }
+}
 
-  .submenu-panel {
+.submenu-panel {
-    position: absolute;
+  position: absolute;
-    left: 220px;
+  left: 220px;
-    top: 0;
+  top: 0;
-    width: 957px;
+  width: 957px;
-    background: #fff;
+  background: #fff;
-    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
+  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
-    border: 1px solid #1890ff;
+  border: 1px solid #1890ff;
-    /* border-radius: 4px; */
+  /* border-radius: 4px; */
-    display: flex;
+  display: flex;
-    padding: 20px;
+  padding: 20px;
-    z-index: -1;
+  z-index: -1;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    min-height: 480px;
+  min-height: 480px;
-    overflow-y: auto;
+  overflow-y: auto;
-  }
+}
 
-  .submenu-panel::before {
+.submenu-panel::before {
-    /* content: '';
+  /* content: '';
     position: absolute;
     left: -6px;
     top: 50%;
@@ -202,61 +229,61 @@
     border-bottom: 8px solid transparent;
     border-right: 8px solid #fff;
     filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1)); */
-  }
+}
 
-  .submenu-content {
+.submenu-content {
-    /* flex: 1; */
+  /* flex: 1; */
-    /* display: grid; */
+  /* display: grid; */
-    /* grid-template-columns: repeat(3, 1fr); */
+  /* grid-template-columns: repeat(3, 1fr); */
-    /* gap: 15px; */
+  /* gap: 15px; */
-    width: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .submenu-group {
     display: flex;
     flex-direction: column;
-    .submenu-group {
+    align-items: flex-start;
-      display: flex;
+    flex-wrap: wrap;
-      flex-direction: column;
+    -webkit-column-break-inside: avoid; /* 兼容webkit内核 */
+    /* border: 1px solid #e6e8eb; */
+    .submenu-group-title {
+      font-size: 15px;
+      /* font-weight: 700; */
+      padding: 10px 16px;
+      color: #000;
+      font-weight: 600;
+      transition: all 0.2s;
+      /* border-bottom: 1px solid #e6e8eb; */
+    }
+    .submenu-group-title:hover {
+      color: #1890ff;
+      /* border-bottom: 1px solid #e6e8eb; */
+    }
+    .submenu-group-items {
+      display: flex !important;
+      flex-direction: row;
       align-items: flex-start;
       flex-wrap: wrap;
-      -webkit-column-break-inside: avoid; /* 兼容webkit内核 */
+      color: #666;
-      /* border: 1px solid #e6e8eb; */
+      padding: 0px 16px;
-      .submenu-group-title {
+      gap: 10px;
-        font-size: 15px;
+      .submenu-item {
-        /* font-weight: 700; */
+        cursor: pointer;
-        padding: 10px 16px;
-        color: #000;
-        font-weight: 600;
-        transition: all 0.2s;
-        /* border-bottom: 1px solid #e6e8eb; */
-      }
-      .submenu-group-title:hover {
-        color: #1890ff;
-        /* border-bottom: 1px solid #e6e8eb; */
-      }
-      .submenu-group-items {
-        display: flex !important;
-        flex-direction: row;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        color: #666;
-        padding: 0px 16px;
-        gap: 10px;
-        .submenu-item {
-          cursor: pointer;
-        }
       }
     }
   }
+}
 
-  .submenu-item {
+.submenu-item {
-    cursor: pointer;
+  cursor: pointer;
-    transition: all 0.2s;
+  transition: all 0.2s;
-    display: inline-block; /* 改为行内块元素 */
+  display: inline-block; /* 改为行内块元素 */
-    /* padding: 8px 12px; */
+  /* padding: 8px 12px; */
-    padding-right: 12px;
+  padding-right: 12px;
-    /* padding-bottom: 8px; */
+  /* padding-bottom: 8px; */
-  }
+}
 
-  .submenu-item:hover {
+.submenu-item:hover {
-    color: #1890ff;
+  color: #1890ff;
-  }
+}
 </style>

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,