Refactor API requests and update component structure
This commit is contained in:
wangqiao
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@ const useClientRequest = async <T = unknown>(
|
||||
config?: Omit<FetchOptions, 'method'>
|
||||
): Promise<T> => {
|
||||
return useClientRequest<T>(endpoint, { ...config, method: 'GET' })
|
||||
|
||||
}
|
||||
|
||||
// POST请求
|
||||
|
||||
@ -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 })
|
||||
}
|
||||
|
||||
@ -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,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>
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
|
||||
@ -115,6 +115,6 @@ export default defineNuxtConfig({
|
||||
},
|
||||
|
||||
build: {
|
||||
transpile: ["vueuc", "@css-render/vue3-ssr"],
|
||||
transpile: ["vueuc", "@css-render/vue3-ssr","@unocss"],
|
||||
},
|
||||
});
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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,89 +47,100 @@
|
||||
</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) => {
|
||||
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)
|
||||
activeIndex.value = index;
|
||||
const dom = menuItemRefs.value[index].getBoundingClientRect();
|
||||
console.log(dom);
|
||||
// submenuTop.value = window.scrollY
|
||||
}
|
||||
};
|
||||
|
||||
const hideSubMenu = () => {
|
||||
activeIndex.value = -1
|
||||
}
|
||||
const hideSubMenu = () => {
|
||||
activeIndex.value = -1;
|
||||
};
|
||||
|
||||
const handleSubmenuClick = (primary?: ProjectDictNodeVO, secondary?: ProjectDictNodeVO, tertiary?: ProjectDictNodeVO) => {
|
||||
const normal = { id: '0', name: '图纸库', isChildren: false }
|
||||
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 = '图纸库'
|
||||
.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)
|
||||
level.unshift(normal);
|
||||
}
|
||||
|
||||
navigateTo(`/drawe?level=${JSON.stringify(level)}`)
|
||||
}
|
||||
navigateTo(`/drawe?level=${JSON.stringify(level)}`);
|
||||
};
|
||||
|
||||
const keepSubmenuVisible = () => {
|
||||
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 setMenuItemRef = (
|
||||
el: Element | ComponentPublicInstance | null,
|
||||
index: number
|
||||
) => {
|
||||
if (el && "offsetTop" in el) {
|
||||
menuItemRefs.value[index] = el as HTMLElement;
|
||||
}
|
||||
}
|
||||
|
||||
const menuItems = ref<ProjectDictNodeVO[]>([])
|
||||
const getLabel = () => {
|
||||
};
|
||||
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[]) => {
|
||||
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 = () => {
|
||||
const init = () => {
|
||||
// 获取标签
|
||||
getLabel()
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.side-menu {
|
||||
.side-menu {
|
||||
width: 221px;
|
||||
background-color: #fff;
|
||||
/* padding: 10px 0; */
|
||||
@ -127,20 +154,20 @@
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
z-index: 9;
|
||||
/* padding-top: 10px; */
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏 Webkit 浏览器的滚动条 */
|
||||
.side-menu::-webkit-scrollbar {
|
||||
/* 隐藏 Webkit 浏览器的滚动条 */
|
||||
.side-menu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 鼠标悬停时显示滚动条 */
|
||||
.side-menu:hover {
|
||||
/* 鼠标悬停时显示滚动条 */
|
||||
.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,7 +181,7 @@
|
||||
background-color: #fff;
|
||||
} */
|
||||
|
||||
.menu-item {
|
||||
.menu-item {
|
||||
/* position: relative; */
|
||||
text-align: center;
|
||||
padding: 4px 24px;
|
||||
@ -164,16 +191,16 @@
|
||||
font-size: 14px;
|
||||
border: 1px solid transparent;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
.menu-item:hover {
|
||||
background-color: #fff;
|
||||
color: #1890ff;
|
||||
border: 1px solid #1890ff;
|
||||
border-right: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-panel {
|
||||
.submenu-panel {
|
||||
position: absolute;
|
||||
left: 220px;
|
||||
top: 0;
|
||||
@ -188,9 +215,9 @@
|
||||
box-sizing: border-box;
|
||||
min-height: 480px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-panel::before {
|
||||
.submenu-panel::before {
|
||||
/* content: '';
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
@ -202,9 +229,9 @@
|
||||
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; */
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: repeat(3, 1fr); */
|
||||
@ -245,18 +272,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-item {
|
||||
.submenu-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-block; /* 改为行内块元素 */
|
||||
/* padding: 8px 12px; */
|
||||
padding-right: 12px;
|
||||
/* padding-bottom: 8px; */
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-item:hover {
|
||||
.submenu-item:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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
49
pages/index.vue
Normal 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>
|
||||
@ -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,
|
||||
|
||||
Reference in New Issue
Block a user