|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<!-- 头部导航菜单 --> |
|
|
|
<div class="headerMenu" v-if="show_menu"> |
|
|
|
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" style="border-bottom: none;" |
|
|
|
@click="menuClick" @select="menuSelect" /> |
|
|
|
@click="menuClick" /> |
|
|
|
<a-input-search v-model:value="value" placeholder="search" style="width: 200px" @search="onSearch" /> |
|
|
|
</div> |
|
|
|
<div class="author" v-if="show_author"></div> |
|
|
|
@ -87,12 +87,7 @@ |
|
|
|
</div> |
|
|
|
<RouterView /> |
|
|
|
<div class="rightBar"> |
|
|
|
<a-card hoverable style="width: 400px;"> |
|
|
|
<template #cover> |
|
|
|
<div id="aplayer" style="width: 400px;"></div> |
|
|
|
<div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);"> |
|
|
|
<div ref="heat" style="height: 100%;"></div> |
|
|
|
</div> |
|
|
|
<a-card hoverable> |
|
|
|
<div class="statistic"> |
|
|
|
<a-row> |
|
|
|
<a-col :span="8"> |
|
|
|
@ -106,13 +101,27 @@ |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
<a-card hoverable> |
|
|
|
<template #cover> |
|
|
|
<div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);"> |
|
|
|
<div ref="heat" style="height: 100%;width: 100%;"></div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</a-card> |
|
|
|
<a-card title="随机文章" :bordered="false" hoverable style="width: 400px;margin: 12px 0;"> |
|
|
|
|
|
|
|
<a-card hoverable> |
|
|
|
<template #cover> |
|
|
|
<div style="width: 100%;"> |
|
|
|
<div id="aplayer" style="width: 25%;"></div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</a-card> |
|
|
|
<a-card title="随机文章" :bordered="false" hoverable> |
|
|
|
sces |
|
|
|
</a-card> |
|
|
|
|
|
|
|
<a-card title="标签云" :bordered="false" hoverable style="width: 400px;margin: 12px 0;"> |
|
|
|
<a-card title="标签云" :bordered="false" hoverable> |
|
|
|
sces |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
@ -122,7 +131,7 @@ |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { h, reactive, ref, nextTick } from 'vue'; |
|
|
|
import { MenuProps } from 'ant-design-vue/es/menu'; |
|
|
|
import { MenuProps } from 'ant-design-vue'; |
|
|
|
import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined, DownCircleOutlined } from '@ant-design/icons-vue'; |
|
|
|
import { MusicLined, EmailLined, QQLined, WechatLined, GravatarLined, GitHubLined } from "@/assets" |
|
|
|
import Typed from 'typed.js'; |
|
|
|
@ -293,6 +302,7 @@ onMounted(() => { |
|
|
|
}; |
|
|
|
createEcharts(heat, heatMapData); |
|
|
|
scrollbar.value = document.querySelector('.simplebar-content-wrapper'); |
|
|
|
// console.log(current.value) |
|
|
|
// const storedShowMenu = localStorage.getItem('show_menu'); |
|
|
|
// const storedShowCarousel = localStorage.getItem('show_carousel'); |
|
|
|
// const storedScrollPosition = localStorage.getItem('scrollPosition'); |
|
|
|
@ -351,6 +361,7 @@ const items = ref<MenuProps['items']>([ |
|
|
|
{ |
|
|
|
label: '相册1', |
|
|
|
key: 'album1', |
|
|
|
url: "album1" |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '相册2', |
|
|
|
@ -366,6 +377,12 @@ const items = ref<MenuProps['items']>([ |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'chart', |
|
|
|
icon: () => h(UsergroupDeleteOutlined), |
|
|
|
label: '收支图', |
|
|
|
title: '收支图', |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 'aboutme', |
|
|
|
icon: () => h(UsergroupDeleteOutlined), |
|
|
|
@ -383,25 +400,12 @@ const handleScroll = () => { |
|
|
|
show_menu.value = scrollOffset > halfViewportHeight; |
|
|
|
} |
|
|
|
}; |
|
|
|
const current = ref<string[]>(['home']); |
|
|
|
|
|
|
|
const menuClick = ({ item }: { item: any }) => { |
|
|
|
// handleScrollEnabled.value = false; |
|
|
|
// if (scrollbar.value) { |
|
|
|
// scrollbar.value.scrollTop = 0; |
|
|
|
// } |
|
|
|
|
|
|
|
// if (item.url === '/' || item.url === '/home') { |
|
|
|
// handleScrollEnabled.value = true; |
|
|
|
// show_carousel.value = true; |
|
|
|
// } else { |
|
|
|
// show_menu.value = true; |
|
|
|
// show_carousel.value = false; |
|
|
|
// mainCss.marginTop = '48px'; |
|
|
|
// } |
|
|
|
|
|
|
|
router.push(item.url); |
|
|
|
} |
|
|
|
const current = ref<string[]>(['mail']); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 点击按钮，实现滚动到视窗高度距离，如果已经滚动，只需要滚动视窗高度-已经滚动的距离 |
|
|
|
@ -445,8 +449,10 @@ const updateCarouselVisibility = (routeName) => { |
|
|
|
if (routeName === 'home') { |
|
|
|
handleScrollEnabled.value = true; |
|
|
|
show_carousel.value = true; |
|
|
|
show_menu.value = false |
|
|
|
} else { |
|
|
|
show_menu.value = true; |
|
|
|
show_author.value = false; |
|
|
|
show_carousel.value = false; |
|
|
|
mainCss.marginTop = '48px'; |
|
|
|
} |
|
|
|
@ -457,10 +463,21 @@ watch( |
|
|
|
() => route.name, |
|
|
|
(newRouteName) => { |
|
|
|
updateCarouselVisibility(newRouteName); |
|
|
|
if (newRouteName) { |
|
|
|
const menuItem = items.value.find(item => item.key === newRouteName); |
|
|
|
if (menuItem) { |
|
|
|
current.value = [menuItem.key]; |
|
|
|
} else { |
|
|
|
current.value = ['home']; // 如果找不到对应的菜单项，默认选中 'home' |
|
|
|
} |
|
|
|
} else { |
|
|
|
current.value = ['home']; // 如果 route.name 不存在，默认选中 'home' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ immediate: true } |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
router.beforeEach((to, from, next) => { |
|
|
|
updateCarouselVisibility(to.name); |
|
|
|
next(); |
|
|
|
@ -581,19 +598,13 @@ router.beforeEach((to, from, next) => { |
|
|
|
width: 20%; |
|
|
|
} |
|
|
|
|
|
|
|
.aplayer { |
|
|
|
margin: 0 0 24px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.heatmap { |
|
|
|
margin: 24px 0; |
|
|
|
.rightBar>* { |
|
|
|
margin-bottom: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
.statistic { |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.sitebar { |
|
|
|
width: 400px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
