wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor API requests and update component structure

Browse Source
This commit is contained in:
wangqiao
2025-08-19 22:19:08 +08:00
parent aac4dec3fd
commit 1ef219878c
12 changed files with 329 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
api/home/index.ts
View File

@ -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
})
}

1
composables/useDollarFetchRequest.ts
View File

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

46
composables/useFetchRequest.ts
View File

@ -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> => {
return useServerRequest<T>(endpoint, { ...config, method: 'GET' })
): Promise<{
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> => {
return useServerRequest<T>(endpoint, { ...config, method: 'POST', body })
): Promise<{
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> => {
return useServerRequest<T>(endpoint, { ...config, method: 'DELETE' })
): Promise<{
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> => {
return useServerRequest<T>(endpoint, { ...config, method: 'PUT', body })
): Promise<{
data: T;
pending: boolean;
error: any;
refresh: () => Promise<void>;
execute: () => Promise<void>;
status: number;
}> => {
return useServerRequest(endpoint, { ...config, method: 'PUT', body })
}

2
layout/default.vue
View File

@ -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>

2
layout/kl-menus-v2/index.vue
View File

@ -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>

4
layout/kl-search/index.vue
View File

@ -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"
/>

2
nuxt.config.ts
View File

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

5
pages/home/components/Leaderboard.vue
View File

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

385
pages/home/components/SideMenu.vue
View File

@ -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 type { ComponentPublicInstance } from 'vue'
import { tab2 } from '~/api/home/index'
import type { ProjectDictNodeVO } from '~/api/home/type'
import { ref, onMounted } from "vue";
import type { ComponentPublicInstance } from "vue";
import { tab2 } from "~/api/home/index";
import type { ProjectDictNodeVO } from "~/api/home/type";
const activeIndex = ref(-1)
const submenuTop = ref(0)
// const submenuLeft = ref(0)
const sideMenu = ref()
const menuItemRefs = ref<HTMLElement[]>([])
const activeIndex = ref(-1);
const submenuTop = ref(0);
// const submenuLeft = ref(0)
const sideMenu = ref();
const menuItemRefs = ref<HTMLElement[]>([]);
const showSubMenu = (index: number) => {
// if (menuItems.value.length === index + 1) {
// return
// }
activeIndex.value = index
const dom = menuItemRefs.value[index].getBoundingClientRect()
console.log(dom)
// submenuTop.value = window.scrollY
const menuItems = ref<ProjectDictNodeVO[]>([]);
const showSubMenu = (index: number) => {
// if (menuItems.value.length === index + 1) {
// return
// }
activeIndex.value = index;
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 = () => {
activeIndex.value = -1
}
navigateTo(`/drawe?level=${JSON.stringify(level)}`);
};
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 keepSubmenuVisible = () => {
// activeIndex.value = activeIndex.value // 保持当前索引
};
const setMenuItemRef = (
el: Element | ComponentPublicInstance | null,
index: number
) => {
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 = () => {
// activeIndex.value = activeIndex.value // 保持当前索引
}
const init = () => {
// 获取标签
getLabel()
};
const setMenuItemRef = (el: Element | ComponentPublicInstance | null, index: number) => {
if (el && 'offsetTop' in el) {
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()
})
onMounted(() => {
init();
});
</script>
<style scoped>
.side-menu {
width: 221px;
background-color: #fff;
/* padding: 10px 0; */
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
/* overflow: visible; */
box-sizing: border-box;
position: relative; /* 添加定位上下文 */
/* overflow-y: auto; */
/* 隐藏滚动条 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
z-index: 9;
/* padding-top: 10px; */
}
.side-menu {
width: 221px;
background-color: #fff;
/* padding: 10px 0; */
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
/* overflow: visible; */
box-sizing: border-box;
position: relative; /* 添加定位上下文 */
/* overflow-y: auto; */
/* 隐藏滚动条 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
z-index: 9;
/* padding-top: 10px; */
}
/* 隐藏 Webkit 浏览器的滚动条 */
.side-menu::-webkit-scrollbar {
display: none;
}
/* 隐藏 Webkit 浏览器的滚动条 */
.side-menu::-webkit-scrollbar {
display: none;
}
/* 鼠标悬停时显示滚动条 */
.side-menu:hover {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
/* 鼠标悬停时显示滚动条 */
.side-menu:hover {
scrollbar-width: none; /* Firefox */
-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 {
/* position: relative; */
text-align: center;
padding: 4px 24px;
cursor: pointer;
/* transition: all 0.3s ease; */
color: #333;
font-size: 14px;
border: 1px solid transparent;
z-index: 9;
}
.menu-item {
/* position: relative; */
text-align: center;
padding: 4px 24px;
cursor: pointer;
/* transition: all 0.3s ease; */
color: #333;
font-size: 14px;
border: 1px solid transparent;
z-index: 9;
}
.menu-item:hover {
background-color: #fff;
color: #1890ff;
border: 1px solid #1890ff;
border-right: transparent !important;
}
.menu-item:hover {
background-color: #fff;
color: #1890ff;
border: 1px solid #1890ff;
border-right: transparent !important;
}
.submenu-panel {
position: absolute;
left: 220px;
top: 0;
width: 957px;
background: #fff;
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
border: 1px solid #1890ff;
/* border-radius: 4px; */
display: flex;
padding: 20px;
z-index: -1;
box-sizing: border-box;
min-height: 480px;
overflow-y: auto;
}
.submenu-panel {
position: absolute;
left: 220px;
top: 0;
width: 957px;
background: #fff;
/* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
border: 1px solid #1890ff;
/* border-radius: 4px; */
display: flex;
padding: 20px;
z-index: -1;
box-sizing: border-box;
min-height: 480px;
overflow-y: auto;
}
.submenu-panel::before {
/* content: '';
.submenu-panel::before {
/* 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 {
/* flex: 1; */
/* display: grid; */
/* grid-template-columns: repeat(3, 1fr); */
/* gap: 15px; */
width: 100%;
.submenu-content {
/* flex: 1; */
/* display: grid; */
/* grid-template-columns: repeat(3, 1fr); */
/* gap: 15px; */
width: 100%;
display: flex;
flex-direction: column;
.submenu-group {
display: flex;
flex-direction: column;
.submenu-group {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
-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内核 */
/* 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;
color: #666;
padding: 0px 16px;
gap: 10px;
.submenu-item {
cursor: pointer;
}
color: #666;
padding: 0px 16px;
gap: 10px;
.submenu-item {
cursor: pointer;
}
}
}
}
.submenu-item {
cursor: pointer;
transition: all 0.2s;
display: inline-block; /* 改为行内块元素 */
/* padding: 8px 12px; */
padding-right: 12px;
/* padding-bottom: 8px; */
}
.submenu-item {
cursor: pointer;
transition: all 0.2s;
display: inline-block; /* 改为行内块元素 */
/* padding: 8px 12px; */
padding-right: 12px;
/* padding-bottom: 8px; */
}
.submenu-item:hover {
color: #1890ff;
}
.submenu-item:hover {
color: #1890ff;
}
</style>

49
pages/home/index.vue
View File

@ -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>

49
pages/index.vue Normal file
View File

@ -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>

30
utils/RefreshToken.ts
View File

@ -18,8 +18,8 @@ class RefreshToken {
// 设置token
static setToken(token: string, refreshToken: string) {
window.localStorage.setItem(RefreshToken.SOTRAGE_TOKENKEY, token);
window.localStorage.setItem(
window?.localStorage.setItem(RefreshToken.SOTRAGE_TOKENKEY, token);
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_REFRESH_TOKEN_KEY);
window?.localStorage.removeItem(RefreshToken.SOTRAGE_TOKENKEY);
window?.localStorage.removeItem(RefreshToken.SOTRAGE_REFRESH_TOKEN_KEY);
//清除token，一起把userID也清除了
window.localStorage.removeItem(RefreshToken.SOTRAGE_USERID);
window.localStorage.removeItem(RefreshToken.SOTRAGE_USERNAME);
window.localStorage.removeItem(RefreshToken.SOTRAGE_USERINFO);
window?.localStorage.removeItem(RefreshToken.SOTRAGE_USERID);
window?.localStorage.removeItem(RefreshToken.SOTRAGE_USERNAME);
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,