@ -2,8 +2,7 @@
< Simplebar @scroll ="handleScroll" >
<!-- 头部导航菜单 -- >
< div class = "headerMenu" v-if ="show_menu" >
< a -menu v -model :selectedKeys ="current" mode = "horizontal" :items ="items" style = "border-bottom: none;"
@ click = "menuClick" / >
< a -menu v -model :selectedKeys ="current" mode = "horizontal" :items ="items" style = "border-bottom: none;" / >
< a -input -search v -model :value ="value" placeholder = "search" style = "width: 200px" @search ="onSearch" / >
< / div >
< div class = "author" v-if ="show_author" > < / div >
@ -30,25 +29,14 @@
< div class = "leftBar" >
< a -card hoverable >
< template # cover >
< img alt = "example" :src ="im g"/ >
< img alt = "example" src = "/src/assets/images/头像.jp g"/ >
< / template >
< h1 > sunfree < / h1 >
< div class = "cardText" > < / div >
< div class = "button-group" >
< a -button shape = "circle" size = "large" @click ="cravatarClick" >
< CravatarLined style = "color: red;" / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" @click ="qqClick" >
< QQLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" @click ="wechatClick" >
< WechatLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" @click ="musicClick" >
< MusicLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" @click ="githubClick" >
< GitHubLined / >
< a -button v -for = " ( button , index ) in buttons " :key ="index" shape = "circle" size = "large"
@ click = "handleClick(button.url)" >
< component :is ="button.icon" / >
< / a - b u t t o n >
< / div >
< div class = "fold-panel" >
@ -56,32 +44,18 @@
< template # expandIcon = "{ isActive }" >
< caret -right -outlined : rotate = "isActive ? 90 : 0" / >
< / template >
< a -collapse -panel key = "1" header = "内容1" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< a -collapse -panel key = "2" header = "内容2" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< a -collapse -panel key = "3" header = "内容3" :style ="customStyle" >
< p > { { text } } < / p >
< a -collapse -panel v -for = " panel in panels " : key = panel.num : header = panel.header
: style = "customStyle" >
< p > { { panel . text } } < / p >
< / a - c o l l a p s e - p a n e l >
< / a - c o l l a p s e >
< / div >
< / a - c a r d >
< a -card hoverable title = "常用链接" >
< div class = "button-group" >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" > Link < / a - b u t t o n >
< a -button type = "dashed" v-for ="linkbutton in linkbuttons" :key="linkbutton.id" > {{
linkbutton . linktext
} } < / a - b u t t o n >
< / div >
< / a - c a r d >
< / div >
@ -90,14 +64,8 @@
< a -card hoverable >
< div class = "statistic" >
< a -row >
< a -col :span ="8" >
< a -statistic title = "DAYS" :value ="112893" / >
< / a - c o l >
< a -col :span ="8" >
< a -statistic title = "DIARYS" :value ="112893" / >
< / a - c o l >
< a -col :span ="8" >
< a -statistic title = "BLOGS" :value ="112893" / >
< a -col :span ="8" v-for ="statistic in statistics" :key="statistic.id" >
< a -statistic : title = statistic.title : value = statistic.counts / >
< / a - c o l >
< / a - r o w >
< / div >
@ -138,9 +106,8 @@
< / template >
< script lang = "ts" setup >
import { h , reactive , ref , nextTick } from 'vue' ;
import { MenuProps } from 'ant-design-vue' ;
import type { MenuProps } from 'ant-design-vue' ;
import { HomeOutlined , HighlightOutlined , ProfileOutlined , CameraOutlined , UsergroupDeleteOutlined , DownCircleOutlined } from '@ant-design/icons-vue' ;
import { MusicLined , EmailLined , QQLined , WechatLined , GravatarLined , GitHubLined , CravatarLined } from "@/assets"
import Typed from 'typed.js' ;
import { onMounted , watch } from 'vue' ;
import type { CSSProperties } from 'vue' ;
@ -148,82 +115,224 @@ import { CaretRightOutlined } from '@ant-design/icons-vue';
import 'APlayer/dist/APlayer.min.css' ;
import APlayer from 'APlayer' ;
import { createEcharts } from "@/hooks/intex"
import { SettingOutlined , EditOutlined , EllipsisOutlined } from '@ant-design/icons-vue' ;
import { RiLiLined , YueDuLined , YanJingLined , XieZiLined } from '@/assets' ;
import { useRouter , useRoute } from 'vue-router' ;
const random = ref ( ) ;
import iconComponents from "@/assets/index"
const router = useRouter ( )
const route = useRoute ( )
const heat = ref ( null ) ;
const activeKey = ref ( [ '' ] ) ;
const text = ` A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world. ` ;
const customStyle =
'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden' ;
const scrollbar = ref < Element | null > ( null ) ;
onMounted ( ( ) => {
/ / 定 义 h o m e 页 的 博 客 标 题 名
nextTick ( ( ) => {
const authorElement = document . querySelector ( '.author' ) ;
if ( authorElement ) {
new Typed ( '.author' , {
strings : [ 'SunFree.' ] ,
typeSpeed : 200 ,
backSpeed : 150 ,
loop : true ,
loopCount : Infinity ,
showCursor : false
} ) ;
/ * *
* 导航菜单
* /
const show_menu = ref ( false ) ;
const show_carousel = ref ( true ) ;
const show_author = ref ( true )
const show_anchornDown = ref ( true )
const mainCss = reactive ( {
marginTop : "0px"
} )
const current = ref < string [ ] > ( [ 'home' ] ) ;
const items = ref < MenuProps [ ' items ' ] > ( [
{
key : 'home' ,
icon : ( ) => h ( HomeOutlined ) ,
label : h ( 'a' , { href : '/' } , '首页' ) ,
title : '首页' ,
} ,
{
key : 'blog' ,
icon : ( ) => h ( HighlightOutlined ) ,
label : h ( 'a' , { href : "/blog" } , '博客' ) ,
title : '博客' ,
} ,
{
key : 'diary' ,
icon : ( ) => h ( ProfileOutlined ) ,
label : h ( 'a' , { href : "/diary" } , '日记' ) ,
title : '日记' ,
} ,
{
key : 'album' ,
icon : ( ) => h ( CameraOutlined ) ,
label : '相册' ,
title : '相册' ,
children : [
{
label : '相册1' ,
key : 'album1' ,
/ / u r l : " a l b u m 1 "
} ,
{
label : '相册2' ,
key : 'album2' ,
} ,
{
label : '相册3' ,
key : 'album3' ,
} ,
{
label : '相册4' ,
key : 'album4' ,
} ,
] ,
} ,
{
key : 'chart' ,
icon : ( ) => h ( UsergroupDeleteOutlined ) ,
label : h ( 'a' , { href : "/chart" } , '收支图' ) ,
title : '收支图' ,
} ,
{
key : 'aboutme' ,
icon : ( ) => h ( UsergroupDeleteOutlined ) ,
label : h ( 'a' , { href : "/aboutme" } , '关于sunfree' ) ,
title : '关于sunfree' ,
} ,
] ) ;
const updateCarouselVisibility = ( routeName ) => {
handleScrollEnabled . value = false ;
if ( scrollbar . value ) {
scrollbar . value . scrollTop = 0 ;
}
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 ;
show_anchornDown . value = false ;
mainCss . marginTop = '48px' ;
}
} ;
const cardTextElement = document . querySelector ( '.cardText' ) ;
if ( cardTextElement ) {
/ / 定 义 个 人 座 右 铭
new Typed ( '.cardText' , {
strings : [ '做三流测试，品瀚霖人生！' ] ,
typeSpeed : 200 ,
backSpeed : 150 ,
loop : true , / / 开 启 循 环
loopCount : Infinity , / / 无 限 循 环
showCursor : false / / 取 消 光 标
router . beforeEach ( ( to , from , next ) => {
updateCarouselVisibility ( to . name ) ;
next ( ) ;
} ) ;
/ / 查 询 功 能
const articleTitle = ref < string > ( '' ) ;
const onSearch = ( searchValue : string ) => {
console . log ( 'use value' , searchValue ) ;
console . log ( 'or use this.value' , articleTitle . value ) ;
} ;
const aplayerContainer = document . getElementById ( 'aplayer' ) ;
if ( aplayerContainer ) {
new APlayer ( {
container : aplayerContainer ,
mini : false ,
autoplay : false ,
theme : '#FADFA3' ,
loop : 'all' ,
order : 'random' ,
preload : 'auto' ,
volume : 0.7 ,
mutex : true ,
listFolded : true ,
listMaxHeight : 90 ,
lrcType : 3 ,
audio : [
/ * *
* 滚动条操作
* /
const scrollbar = ref < Element | null > ( null ) ;
const handleScrollEnabled = ref ( true ) ;
/ / 定 义 滚 动 条 滚 到 一 半 显 示 导 航 菜 单
const handleScroll = ( ) => {
if ( ! handleScrollEnabled . value ) return ;
if ( scrollbar . value ) {
const scrollOffset = scrollbar . value . scrollTop ;
const halfViewportHeight = scrollbar . value . clientHeight / 2 ;
show_menu . value = scrollOffset > halfViewportHeight ;
}
} ;
/ / 点 击 按 钮 ， 实 现 滚 动 到 视 窗 高 度 距 离
const downScroll = ( ) => {
if ( scrollbar . value ) {
const scrollTop = scrollbar . value . scrollTop ;
const viewportHeight = scrollbar . value . clientHeight ;
const scrollDistance = viewportHeight - scrollTop - 48 ;
setTimeout ( ( ) => {
scrollbar . value ! . scrollBy ( { top : scrollDistance , behavior : 'smooth' } ) ;
} , 300 ) ;
}
} ;
/ * *
* 左侧栏
* /
/ / 折 叠 面 板
const activeKey = ref ( [ '' ] ) ;
const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden' ;
const panels = reactive ( [
{
name : 'name1' ,
artist : 'artist1' ,
url : 'url1.mp3' ,
cover : 'cover1.jpg' ,
lrc : 'lrc1.lrc' ,
theme : '#ebd0c2'
num : "1" ,
header : "内容1" ,
text : "内容1"
} ,
{
name : 'name2' ,
artist : 'artist2' ,
url : 'url2.mp3' ,
cover : 'cover2.jpg' ,
lrc : 'lrc2.lrc' ,
theme : '#46718b'
num : "2" ,
header : "内容2" ,
text : "内容2"
} ,
{
num : "3" ,
header : "内容3" ,
text : "内容3"
}
]
} ) ;
)
/ / 社 交 按 钮
const buttons = ref ( [
{ icon : iconComponents . CravatarLined , url : 'https://cravatar.cn/' } ,
{ icon : iconComponents . QQLined , url : '/qqcode' } ,
{ icon : iconComponents . WechatLined , url : '/wechatcode' } ,
{ icon : iconComponents . MusicLined , url : 'https://music.163.com/#/playlist?id=160266689' } ,
{ icon : iconComponents . GitHubLined , url : 'https://gitee.com/c_panda' } ,
] ) ;
const handleClick = ( url : string ) => {
window . open ( url )
}
} ) ;
/ / 链 接 按 钮
const linkbuttons = reactive ( [
{
id : "1" ,
linktext : "测试"
} ,
{
id : "2" ,
linktext : "开发"
} ,
{
id : "3" ,
linktext : "运营"
} ,
{
id : "4" ,
linktext : "实施"
}
] )
/ * *
* 右侧栏
* /
/ / 统 计
const statistics = reactive ( [
{
id : "1" ,
title : "DAYS" ,
counts : "111"
} ,
{
id : "2" ,
title : "DIARYS" ,
counts : "111"
} ,
{
id : "3" ,
title : "BLOGS" ,
counts : "111"
} ,
] )
/ / 日 历 热 力 图
const heat = ref ( null ) ;
const newData = < any > [ ] ;
/ / 初 始 化 6 0 天 的 数 据
const data = generateDates ( 60 ) ;
console . log ( data )
/ / 重 新 排 列 数 据
for ( let i = 0 ; i < 60 ; i += 15 ) {
/ / 取 出 每 个 1 5 天 的 数 据 ， 并 反 转 顺 序
const chunk = data . slice ( i , i + 15 ) . reverse ( ) ;
newData . push ( ... chunk ) ;
}
function generateDates ( numDays : number ) {
const dates = [ ] ;
@ -232,35 +341,23 @@ onMounted(() => {
const date = new Date ( currentDate ) ;
date . setDate ( currentDate . getDate ( ) - i ) ;
dates . push (
{ date : date . toISOString ( ) . split ( 'T' ) [ 0 ] , blog Count: 0 }
{ date : date . toISOString ( ) . split ( 'T' ) [ 0 ] , writ Count: 0 }
) ; / / 包 含 日 期 和 评 论 数
}
return dates ;
}
/ / 初 始 化 6 0 天 的 数 据
const data = generateDates ( 60 ) ;
console . log ( ` output-> ` , data )
data [ 3 ] . blogCount = 5 ;
data [ 15 ] . blogCount = 10 ;
data [ 25 ] . blogCount = 3 ;
/ / 重 新 排 列 数 据
const newData = [ ] ;
for ( let i = 0 ; i < 60 ; i += 15 ) {
/ / 取 出 每 个 1 5 天 的 数 据 ， 并 反 转 顺 序
const chunk = data . slice ( i , i + 15 ) . reverse ( ) ;
newData . push ( ... chunk ) ;
}
const formattedData = newData . map ( ( value , index ) => [ index % 15 , Math . floor ( index / 15 ) , value . blogCount ] ) ;
const writList = [ 5 , 4 , 3 , 2 , 1 , 0 ]
writList . forEach ( ( item , index ) => {
data [ index ] . writCount = item ;
} )
const formattedData = newData . map ( ( value , index ) => [ index % 15 , Math . floor ( index / 15 ) , value . writCount ] ) ;
const heatMapData = {
tooltip : {
position : 'top' ,
formatter : function ( params : any ) {
const item = newData [ params . dataIndex ] ;
if ( item . blog Count> 0 ) {
return ` ${ item . date } <br/>COMMENTS: ${ item . blog Count} ` ;
if ( item . writCount > 0 ) {
return ` ${ item . date } <br/>COMMENTS: ${ item . writCount } ` ;
} else {
return ` ${ item . date } ` ;
}
@ -320,178 +417,75 @@ onMounted(() => {
}
} ]
} ;
createEcharts ( heat , heatMapData ) ;
scrollbar . value = document . querySelector ( '.simplebar-content-wrapper' ) ;
/ / c o n s o l e . l o g ( c u r r e n t . v a l u e )
/ / c o n s t s t o r e d S h o w M e n u = l o c a l S t o r a g e . g e t I t e m ( ' s h o w _ m e n u ' ) ;
/ / c o n s t s t o r e d S h o w C a r o u s e l = l o c a l S t o r a g e . g e t I t e m ( ' s h o w _ c a r o u s e l ' ) ;
/ / c o n s t s t o r e d S c r o l l P o s i t i o n = l o c a l S t o r a g e . g e t I t e m ( ' s c r o l l P o s i t i o n ' ) ;
/ / c o n s t s t o r e d M a i n C s s M a r g i n T o p = l o c a l S t o r a g e . g e t I t e m ( ' m a i n C s s _ m a r g i n T o p ' ) ;
/ / i f ( s t o r e d S h o w M e n u ! = = n u l l ) {
/ / s h o w _ m e n u . v a l u e = s t o r e d S h o w M e n u = = = ' t r u e ' ;
/ / }
/ / i f ( s t o r e d S h o w C a r o u s e l ! = = n u l l ) {
/ / s h o w _ c a r o u s e l . v a l u e = s t o r e d S h o w C a r o u s e l = = = ' t r u e ' ;
/ / }
/ / i f ( s t o r e d S c r o l l P o s i t i o n ! = = n u l l & & s c r o l l b a r . v a l u e ) {
/ / s c r o l l b a r . v a l u e . s c r o l l T o p = p a r s e I n t ( s t o r e d S c r o l l P o s i t i o n , 1 0 ) ;
/ / }
/ / i f ( s t o r e d M a i n C s s M a r g i n T o p ! = = n u l l ) {
/ / m a i n C s s . m a r g i n T o p = s t o r e d M a i n C s s M a r g i n T o p ;
/ / }
/ / 音 乐 组 件
const random = ref ( ) ;
} )
/ / 导 航 菜 单
const show_menu = ref ( false ) ;
const show_carousel = ref ( true ) ;
const show_author = ref ( true )
const show_anchornDown = ref ( true )
const mainCss = reactive ( {
marginTop : "0px"
} )
const items = ref < MenuProps [ ' items ' ] > ( [
{
key : 'home' ,
icon : ( ) => h ( HomeOutlined ) ,
label : '首页' ,
title : '首页' ,
url : '/'
} ,
{
key : 'blog' ,
icon : ( ) => h ( HighlightOutlined ) ,
label : '博客' ,
title : '博客' ,
url : "/blog"
} ,
{
key : 'diary' ,
icon : ( ) => h ( ProfileOutlined ) ,
label : '日记' ,
title : '日记' ,
url : '/diary'
} ,
{
key : 'album' ,
icon : ( ) => h ( CameraOutlined ) ,
label : '相册' ,
title : '相册' ,
children : [
{
label : '相册1' ,
key : 'album1' ,
url : "album1"
} ,
{
label : '相册2' ,
key : 'album2' ,
} ,
{
label : '相册3' ,
key : 'album3' ,
} ,
{
label : '相册4' ,
key : 'album4' ,
} ,
] ,
} ,
onMounted ( ( ) => {
nextTick ( ( ) => {
const authorElement = document . querySelector ( '.author' ) ;
if ( authorElement ) {
new Typed ( '.author' , {
strings : [ 'SunFree.' ] ,
typeSpeed : 200 ,
backSpeed : 150 ,
loop : true ,
loopCount : Infinity ,
showCursor : false
} ) ;
} ;
const cardTextElement = document . querySelector ( '.cardText' ) ;
if ( cardTextElement ) {
/ / 定 义 个 人 座 右 铭
new Typed ( '.cardText' , {
strings : [ '做三流测试，品瀚霖人生！' ] ,
typeSpeed : 200 ,
backSpeed : 150 ,
loop : true , / / 开 启 循 环
loopCount : Infinity , / / 无 限 循 环
showCursor : false / / 取 消 光 标
} ) ;
} ;
const aplayerContainer = document . getElementById ( 'aplayer' ) ;
if ( aplayerContainer ) {
new APlayer ( {
container : aplayerContainer ,
mini : false ,
autoplay : false ,
theme : '#FADFA3' ,
loop : 'all' ,
order : 'random' ,
preload : 'auto' ,
volume : 0.7 ,
mutex : true ,
listFolded : true ,
listMaxHeight : 90 ,
lrcType : 3 ,
audio : [
{
key : 'chart' ,
icon : ( ) => h ( UsergroupDeleteOutlined ) ,
label : '收支图' ,
title : '收支图' ,
name : 'name1' ,
artist : 'artist1' ,
url : 'url1.mp3' ,
cover : 'cover1.jpg' ,
lrc : 'lrc1.lrc' ,
theme : '#ebd0c2'
} ,
{
key : 'aboutme' ,
icon : ( ) => h ( UsergroupDeleteOutlined ) ,
label : '关于sunfree' ,
title : '关于sunfree' ,
} ,
] ) ;
const handleScrollEnabled = ref ( true ) ;
/ / 定 义 滚 动 条 滚 到 一 半 显 示 导 航 菜 单
const handleScroll = ( ) => {
if ( ! handleScrollEnabled . value ) return ;
if ( scrollbar . value ) {
const scrollOffset = scrollbar . value . scrollTop ;
const halfViewportHeight = scrollbar . value . clientHeight / 2 ;
show_menu . value = scrollOffset > halfViewportHeight ;
}
} ;
const current = ref < string [ ] > ( [ 'home' ] ) ;
const menuClick = ( { item } : { item : any } ) => {
router . push ( item . url ) ;
}
/ / 点 击 按 钮 ， 实 现 滚 动 到 视 窗 高 度 距 离 ， 如 果 已 经 滚 动 ， 只 需 要 滚 动 视 窗 高 度 - 已 经 滚 动 的 距 离
const downScroll = ( ) => {
if ( scrollbar . value ) {
const scrollTop = scrollbar . value . scrollTop ;
const viewportHeight = scrollbar . value . clientHeight ;
const scrollDistance = viewportHeight - scrollTop - 48 ;
setTimeout ( ( ) => {
scrollbar . value ! . scrollBy ( { top : scrollDistance , behavior : 'smooth' } ) ;
} , 300 ) ;
}
} ;
/ / 定 义 文 章
/ / c o n s t a r t i c l e s = r e a c t i v e ( {
/ / i m g : " " ,
/ / } )
const value = ref < string > ( '' ) ;
const onSearch = ( searchValue : string ) => {
console . log ( 'use value' , searchValue ) ;
console . log ( 'or use this.value' , value . value ) ;
} ;
const img = ref ( "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" )
const cravatarClick = ( ) => {
window . open ( "https://cravatar.cn/" )
}
const qqClick = ( ) => {
window . open ( "/qqcode" , '_blank' )
}
const wechatClick = ( ) => {
window . open ( "/wechatcode" , '_blank' )
}
const musicClick = ( ) => {
window . open ( "https://music.163.com/#/playlist?id=160266689" )
}
const githubClick = ( ) => {
window . open ( "https://gitee.com/c_panda" )
}
const updateCarouselVisibility = ( routeName ) => {
handleScrollEnabled . value = false ;
if ( scrollbar . value ) {
scrollbar . value . scrollTop = 0 ;
name : 'name2' ,
artist : 'artist2' ,
url : 'url2.mp3' ,
cover : 'cover2.jpg' ,
lrc : 'lrc2.lrc' ,
theme : '#46718b'
}
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 ;
show_anchornDown . value = false ;
mainCss . marginTop = '48px' ;
]
} ) ;
}
} ;
/ / 监 控 路 由 变 化
} ) ;
createEcharts ( heat , heatMapData ) ;
scrollbar . value = document . querySelector ( '.simplebar-content-wrapper' ) ;
} )
watch (
( ) => route . name ,
( newRouteName ) => {
@ -509,12 +503,6 @@ watch(
} ,
{ immediate : true }
) ;
router . beforeEach ( ( to , from , next ) => {
updateCarouselVisibility ( to . name ) ;
next ( ) ;
} ) ;
< / script >
< style scoped >
. headerMenu {
@ -641,6 +629,7 @@ router.beforeEach((to, from, next) => {
position : relative ;
margin - bottom : 24 px ;
}
. rightBar > : nth - child ( 4 ) div . article - text {
display : flex ;
flex - direction : column ;
@ -649,6 +638,7 @@ router.beforeEach((to, from, next) => {
left : 10 % ;
color : rgb ( 187 , 185 , 187 ) ;
}
# aplayer {
margin : 0 ;
}
panda
9 months ago
