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

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>