4 Commits

  1. 22
      src/components/blogs/HomePage.vue
  2. 100
      src/components/blogs/ceshi.vue
  3. 8
      src/components/blogs/leftsite/CataloGue.vue
  4. 1
      src/main.ts
  5. 2
      src/stores/index.ts
  6. 10
      src/views/blog/HomePageView.vue
  7. 9
      src/views/blog/blogcontent/BlogListView.vue

22
src/components/blogs/HomePage.vue

@ -51,7 +51,7 @@ import { reactive, ref, nextTick, toRefs, onMounted } from 'vue';
import { DownCircleOutlined } from '@ant-design/icons-vue'; import { DownCircleOutlined } from '@ant-design/icons-vue';
import Typed from 'typed.js'; import Typed from 'typed.js';
import 'APlayer/dist/APlayer.min.css'; import 'APlayer/dist/APlayer.min.css';
import { useRouter } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import ComLink from './leftsite/ComLink.vue'; import ComLink from './leftsite/ComLink.vue';
import LeftSiteInfo from "./leftsite/LeftSiteInfo.vue" import LeftSiteInfo from "./leftsite/LeftSiteInfo.vue"
import StatisticCount from "./rightsite/StatisticCount.vue" import StatisticCount from "./rightsite/StatisticCount.vue"
@ -67,6 +67,13 @@ import FooterContent from './footer/FooterContent.vue';
import CataloGue from './leftsite/CataloGue.vue'; import CataloGue from './leftsite/CataloGue.vue';
const router = useRouter() const router = useRouter()
// onMounted(() => {
// //
// // window.addEventListener('beforeunload', handleRefresh);
// handleRefresh()
// });
const author = ref("SunFree.") const author = ref("SunFree.")
const { idShow } = homePageStore() const { idShow } = homePageStore()
const { show_menu, show_carousel, show_author, show_anchornDown } = toRefs(idShow) const { show_menu, show_carousel, show_author, show_anchornDown } = toRefs(idShow)
@ -90,9 +97,9 @@ const updateCarouselVisibility = (routeName: any) => {
const mainCss = reactive({ const mainCss = reactive({
marginTop: "0px" marginTop: "0px"
}) })
const store = useContentStore();
router.beforeEach((to, _, next) => { router.beforeEach((to, _, next) => {
updateCarouselVisibility(to.name); updateCarouselVisibility(to.name);
const store = useContentStore();
if (to.name === 'diarydetail' || to.name === 'blogdetail') { if (to.name === 'diarydetail' || to.name === 'blogdetail') {
store.showCatalogue=true; store.showCatalogue=true;
} else { } else {
@ -101,6 +108,16 @@ router.beforeEach((to, _, next) => {
next(); next();
}); });
const handleRefresh = () => {
const route=useRoute()
if (route.name === 'diarydetail' || route.name === 'blogdetail') {
store.showCatalogue=true;
} else {
store.showCatalogue=false;
}
}
/** /**
* 滚动条操作 * 滚动条操作
*/ */
@ -157,6 +174,7 @@ onMounted(() => {
}; };
}); });
scrollbar.value = document.querySelector('.simplebar-content-wrapper'); scrollbar.value = document.querySelector('.simplebar-content-wrapper');
handleRefresh()
}) })
</script> </script>

100
src/components/blogs/ceshi.vue

@ -1,77 +1,29 @@
<template> <template>
<div ref="heat" style="height: 100%;"></div>
<a-row :gutter="16">
<a-col :xl="24" :xs="12">
<div class="responsive-box">Content 1</div>
</a-col>
<a-col :xs="12">
<div class="responsive-box">Content 2</div>
</a-col>
<a-col :xs="12">
<div class="responsive-box">Content 3</div>
</a-col>
<!-- <a-col :xl="4">
<div class="responsive-box">Content 2</div>
</a-col>
<a-col :xl="4">
<div class="responsive-box">Content 2</div>
</a-col>
<a-col :xl="4">
<div class="responsive-box">Content 2</div>
</a-col> -->
</a-row>
</template> </template>
<script setup lang='ts'>
import { createEcharts } from "@/hooks/intex"
import { onMounted,ref } from "vue";
const heat = ref(null);
onMounted(() => {
const hours = [
'12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a', '10a', '11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'
];
// prettier-ignore
const days = [
'Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'
];
// prettier-ignore
const data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
const option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
show: true
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
createEcharts(heat,option)
})
</script>
<style></style>
<style>
.responsive-box {
background-color: #f0f0f0;
text-align: center;
}
</style>

8
src/components/blogs/leftsite/CataloGue.vue

@ -1,5 +1,5 @@
<template> <template>
<a-card title="目录列表" v-if="store.showCatalogue" hoverable :bordered="false">
<a-card title="目录列表" v-if="isShowCata" hoverable :bordered="false">
<div class="catalogue" v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }" <div class="catalogue" v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }"
@click="handleAnchorClick(anchor)" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave" @click="handleAnchorClick(anchor)" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave"
:key="anchor.lineIndex"> :key="anchor.lineIndex">
@ -9,12 +9,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed,ref } from 'vue';
import { computed } from 'vue';
import { useContentStore } from '@/stores/index'; import { useContentStore } from '@/stores/index';
const store = useContentStore(); const store = useContentStore();
const titles = computed(() => store.titles); const titles = computed(() => store.titles);
const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => { const handleAnchorClick = (anchor: { title: string; lineIndex: string }) => {
const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`); const heading = document.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
@ -42,6 +41,9 @@ const handleMouseLeave = (event: any) => {
const target = event.currentTarget as HTMLElement; const target = event.currentTarget as HTMLElement;
target.style.backgroundColor = '' target.style.backgroundColor = ''
} }
const isShowCata = computed(() => store.showCatalogue);
</script> </script>
<style scoped> <style scoped>

1
src/main.ts

@ -17,6 +17,7 @@ import '@kangc/v-md-editor/lib/style/preview.css';
// 表情插件 // 表情插件
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index'; import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css'; import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
// highlightjs // highlightjs
import hljs from 'highlight.js'; import hljs from 'highlight.js';

2
src/stores/index.ts

@ -78,7 +78,7 @@ export const blogStore = defineStore("blog", () => {
export const useContentStore = defineStore('content', () => { export const useContentStore = defineStore('content', () => {
const content = ref({ text: "" }); const content = ref({ text: "" });
const getTitle = ref("") const getTitle = ref("")
const showCatalogue = ref(false)
const showCatalogue = ref()
const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]); const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
function setContent(newContent: string) { function setContent(newContent: string) {
content.value.text = newContent; content.value.text = newContent;

10
src/views/blog/HomePageView.vue

@ -161,20 +161,10 @@ const loadMore = () => {
}; };
// const homePageList = async () => {
// await get(
// "/statistics/homepage"
// ).then(response => {
// homepagelist.value = response.data.data
// showNextBatch();
// })
// }
onMounted(() => { onMounted(() => {
// homePageList()
homepageStore.fetchHomePageList(); homepageStore.fetchHomePageList();
}) })
watch(() => homepageStore.homepagelist, () => { watch(() => homepageStore.homepagelist, () => {
// homepagelist
currentIndex = 0; currentIndex = 0;
showNextBatch(); showNextBatch();
},); },);

9
src/views/blog/blogcontent/BlogListView.vue

@ -204,6 +204,15 @@ onMounted(() => {
animation: colorChange 3s infinite alternate; animation: colorChange 3s infinite alternate;
/* 添加颜色变化的动画 */ /* 添加颜色变化的动画 */
} }
.blog-content .image-container {
width: 200px;
}
.blog-content .responsive-image {
width: 100%;
height: auto;
}
.custom-line { .custom-line {
border: 0; border: 0;

Loading…
Cancel
Save