panda
8 months ago
18 changed files with 451 additions and 616 deletions
-
627src/components/blogs/HomePage.vue
-
91src/components/blogs/footer/FooterContent.vue
-
34src/components/blogs/header/NavigateMenu.vue
-
11src/components/blogs/leftsite/CataloGue.vue
-
0src/components/blogs/leftsite/ComLink.vue
-
0src/components/blogs/leftsite/LeftSiteInfo.vue
-
0src/components/blogs/leftsite/QQCode.vue
-
0src/components/blogs/leftsite/WechatCode.vue
-
58src/components/blogs/rightsite/AplayerComponent.vue
-
134src/components/blogs/rightsite/HeatMap.vue
-
49src/components/blogs/rightsite/RandomArticle.vue
-
0src/components/blogs/rightsite/StatisticCount.vue
-
33src/components/blogs/rightsite/TagCloud.vue
-
4src/router/blog.ts
-
15src/stores/index.ts
-
4src/views/admin/ClassticManageView.vue
-
4src/views/blog/blogcontent/BlogDetailView.vue
-
3tsconfig.json
@ -0,0 +1,91 @@ |
|||||
|
<template> |
||||
|
<div class="miit"> |
||||
|
<a-space wrap> |
||||
|
<a-text type="link"> |
||||
|
<component :is=iconComponents.BanQuanLined /> |
||||
|
<span class="miit-style">Copyright © 2024</span> |
||||
|
</a-text> |
||||
|
<a-button type="link" href="/home"> |
||||
|
<component :is=iconComponents.TitleOutLined /> |
||||
|
<span>SunFree</span> |
||||
|
</a-button> |
||||
|
<a-button type="link" href="https://beian.miit.gov.cn/" target="_blank"> |
||||
|
<component :is=iconComponents.IcpLined /> |
||||
|
<span>苏ICP备2024067473号-1</span> |
||||
|
</a-button> |
||||
|
|
||||
|
<a-button type="link" href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank"> |
||||
|
<component :is=iconComponents.GongAnLined /> |
||||
|
<span>苏公网安备32021402003003号</span> |
||||
|
</a-button> |
||||
|
</a-space> |
||||
|
</div> |
||||
|
<div class="badge"> |
||||
|
<a-space wrap> |
||||
|
<a-button type="link" class="badge-button" href="https://cn.vuejs.org/" target="_blank"> |
||||
|
<span class="tag-nav">front-end</span> |
||||
|
<span class="tag-main-first">Vue.js</span> |
||||
|
</a-button> |
||||
|
<a-button type="link" class="badge-button" href="https://fastapi.tiangolo.com/zh/" target="_blank"> |
||||
|
<span class="tag-nav">back-end</span> |
||||
|
<span class="tag-main-second">FastAPI</span> |
||||
|
</a-button> |
||||
|
<a-button type="link" class="badge-button" href="https://www.antdv.com/docs/vue/introduce-cn/" |
||||
|
target="_blank"> |
||||
|
<span class="tag-nav">UI</span> |
||||
|
<span class="tag-main-third">Ant Design Vue</span> |
||||
|
</a-button> |
||||
|
<a-button type="link" class="badge-button" href="https://cloud.tencent.com/" target="_blank"> |
||||
|
<span class="tag-nav">VPS</span> |
||||
|
<span class="tag-main-fourth">tencent cloud</span> |
||||
|
</a-button> |
||||
|
</a-space> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import iconComponents from "@/assets/index"; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
a { |
||||
|
color: #6e5555; |
||||
|
} |
||||
|
|
||||
|
.miit { |
||||
|
margin: 48px 0 0 0; |
||||
|
} |
||||
|
|
||||
|
.badge { |
||||
|
margin: 48px 0; |
||||
|
} |
||||
|
|
||||
|
.badge .tag-nav { |
||||
|
background-color: #505050; |
||||
|
} |
||||
|
|
||||
|
.miit-style { |
||||
|
padding: 0 0 0 6px; |
||||
|
} |
||||
|
|
||||
|
.badge span { |
||||
|
padding: 0 6px; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.badge .tag-main-first { |
||||
|
background-color: rgb(3, 3, 250); |
||||
|
} |
||||
|
|
||||
|
.badge .tag-main-second { |
||||
|
background-color: rgb(235, 15, 228); |
||||
|
} |
||||
|
|
||||
|
.badge .tag-main-third { |
||||
|
background-color: rgb(10, 207, 39); |
||||
|
} |
||||
|
|
||||
|
.badge .tag-main-fourth { |
||||
|
background-color: rgb(229, 131, 12); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,11 @@ |
|||||
|
<template> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,58 @@ |
|||||
|
<template> |
||||
|
<a-card hoverable> |
||||
|
<template #cover> |
||||
|
<div id="aplayer"></div> |
||||
|
</template> |
||||
|
</a-card> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import 'APlayer/dist/APlayer.min.css'; |
||||
|
import APlayer from 'APlayer'; |
||||
|
import { nextTick, onMounted } from 'vue'; |
||||
|
onMounted(() => { |
||||
|
nextTick(() => { |
||||
|
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: [ |
||||
|
// { |
||||
|
// name: 'name1', |
||||
|
// artist: 'artist1', |
||||
|
// url: 'url1.mp3', |
||||
|
// cover: 'cover1.jpg', |
||||
|
// lrc: 'lrc1.lrc', |
||||
|
// theme: '#ebd0c2' |
||||
|
// }, |
||||
|
// { |
||||
|
// name: 'name2', |
||||
|
// artist: 'artist2', |
||||
|
// url: 'url2.mp3', |
||||
|
// cover: 'cover2.jpg', |
||||
|
// lrc: 'lrc2.lrc', |
||||
|
// theme: '#46718b' |
||||
|
// } |
||||
|
] |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
#aplayer { |
||||
|
margin: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<a-card hoverable> |
||||
|
<template #cover> |
||||
|
<div class="heatmap" style="border-right: rgba(0, 0, 0, 0.5);"> |
||||
|
<div ref="heat" style="height: 100%;"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</a-card> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import { get } from '@/tools/request'; |
||||
|
import { ref, reactive, onMounted } from 'vue'; |
||||
|
import { createEcharts } from "@/hooks/intex" |
||||
|
const heat = ref(null); |
||||
|
function generateDates(numDays: number) { |
||||
|
const dates = []; |
||||
|
const currentDate = new Date(); |
||||
|
for (let i = 0; i < numDays; i++) { |
||||
|
const date = new Date(currentDate); |
||||
|
date.setDate(currentDate.getDate() - i); |
||||
|
dates.push( |
||||
|
{ date: date.toISOString().split('T')[0], writCount: 0 } |
||||
|
); // 包含日期和评论数 |
||||
|
} |
||||
|
return dates; |
||||
|
} |
||||
|
// 初始化60天的数据 |
||||
|
const data = generateDates(60); |
||||
|
// 重新排列数据 |
||||
|
const rawData = ref<any[]>([]); |
||||
|
const statisticList = async () => { |
||||
|
await get("/statistics/list").then(response => { |
||||
|
rawData.value = response.data.data |
||||
|
rawData.value.forEach(newDataItem => { |
||||
|
const item = newData.find((d: any) => d.date === newDataItem.date); |
||||
|
if (item) { |
||||
|
item.writCount = newDataItem.writCount; |
||||
|
} |
||||
|
}); |
||||
|
let formattedData = newData.map((item: any, index: number) => { |
||||
|
return [index % 15, Math.floor(index / 15), item.writCount] |
||||
|
}); |
||||
|
formattedList(formattedData) |
||||
|
createEcharts(heat, heatMapData); |
||||
|
}) |
||||
|
} |
||||
|
const formattedList = (val: any) => { |
||||
|
heatMapData.series[0].data = val |
||||
|
} |
||||
|
const newData = <any>[]; |
||||
|
for (let i = 0; i < 60; i += 15) { |
||||
|
// 取出每个15天的数据，并反转顺序 |
||||
|
const chunk = data.slice(i, i + 15).reverse(); |
||||
|
newData.push(...chunk); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const heatMapData = reactive( |
||||
|
{ |
||||
|
tooltip: { |
||||
|
position: 'top', |
||||
|
formatter: function (params: any) { |
||||
|
const item = newData[params.dataIndex]; |
||||
|
if (item.writCount > 0) { |
||||
|
return `${item.date}<br/>COMMENTS: ${item.writCount}`; |
||||
|
} else { |
||||
|
return `${item.date}`; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '0', // 左边距 |
||||
|
right: '0', // 右边距 |
||||
|
top: '0', // 上边距 |
||||
|
bottom: '0', |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: Array.from({ length: 15 }, (_, i) => `Col ${i + 1}`), |
||||
|
splitArea: { |
||||
|
show: true |
||||
|
}, |
||||
|
show: false |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
data: ['Row 1', 'Row 2', 'Row 3', 'Row 4'], |
||||
|
splitArea: { |
||||
|
show: false |
||||
|
}, |
||||
|
show: false |
||||
|
}, |
||||
|
visualMap: { |
||||
|
min: 0, |
||||
|
max: 20, |
||||
|
calculable: true, |
||||
|
orient: 'horizontal', |
||||
|
left: 'center', |
||||
|
bottom: '15%', |
||||
|
show: false, |
||||
|
inRange: { |
||||
|
color: ['rgba(182,181,178,0.01)', 'rgba(157,156,153,1)'] // 0评论是白色, 非0评论是黑色 |
||||
|
} |
||||
|
}, |
||||
|
series: [{ |
||||
|
type: 'heatmap', |
||||
|
data: [], |
||||
|
itemStyle: { |
||||
|
borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色 |
||||
|
borderWidth: 0.5, // 设置边框宽度 |
||||
|
|
||||
|
}, |
||||
|
label: { |
||||
|
show: false, |
||||
|
}, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)', |
||||
|
borderColor: '#fff', // 鼠标悬停时的边框颜色 |
||||
|
borderWidth: 2 // 鼠标悬停时的边框宽度 |
||||
|
} |
||||
|
} |
||||
|
}] |
||||
|
} |
||||
|
) |
||||
|
onMounted(() => { |
||||
|
statisticList() |
||||
|
createEcharts(heat, heatMapData); |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<a-card title="随机文章" :bordered="false" hoverable> |
||||
|
<div v-for="article in homepagelist"> |
||||
|
<div v-if="article.blogtitle"> |
||||
|
<div class="article-text"> |
||||
|
<span>{{ article.blogtitle }}</span> |
||||
|
<span>{{ article.create_at }}</span> |
||||
|
</div> |
||||
|
<a-image :preview="false" :width="300" :src="article.imglink" /> |
||||
|
</div> |
||||
|
<div v-if="article.diarytitle"> |
||||
|
<div class="article-text"> |
||||
|
<span>{{ article.diarytitle }}</span> |
||||
|
<span>{{ article.create_at }}</span> |
||||
|
</div> |
||||
|
<a-image :preview="false" :width="300" :src="article.imglink" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-card> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import { get } from '@/tools/request'; |
||||
|
import { onMounted, ref } from 'vue'; |
||||
|
import type { homePageInterface } from '@/api'; |
||||
|
const homepagelist = ref<homePageInterface[]>([]) |
||||
|
// 随机文章 |
||||
|
const homePageList = async () => { |
||||
|
await get( |
||||
|
"/statistics/homepage" |
||||
|
).then(response => { |
||||
|
homepagelist.value = response.data.data.sort(() => 0.5 - Math.random()).slice(0, 3); |
||||
|
}) |
||||
|
} |
||||
|
onMounted(()=>{ |
||||
|
homePageList() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.article-text { |
||||
|
margin: 12px 0; |
||||
|
} |
||||
|
|
||||
|
.article-text span { |
||||
|
margin-right: 12px; |
||||
|
font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif"; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<a-card title="标签云" :bordered="false" hoverable> |
||||
|
<a-tag :color=randomColor() v-for="label in labellist">{{ label.labelname }}</a-tag> |
||||
|
</a-card> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang='ts'> |
||||
|
import { onMounted, ref } from 'vue'; |
||||
|
import type { labelInterface } from '@/api/admin'; |
||||
|
import { get } from '@/tools/request'; |
||||
|
const randomColor = () => { |
||||
|
const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"]) |
||||
|
return labelColor.value[Math.floor(Math.random() * labelColor.value.length)]; |
||||
|
} |
||||
|
const labellist = ref<labelInterface[]>([]) |
||||
|
|
||||
|
const labelList = async () => { |
||||
|
try { |
||||
|
await get("/labels/list").then(response => { |
||||
|
if (response) { |
||||
|
labellist.value = response.data.data; |
||||
|
} |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
onMounted(()=>{ |
||||
|
labelList() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style></style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue