diff --git a/src/api/index.ts b/src/api/index.ts index 4012b68..8014654 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,5 +1,19 @@ // 公共api +import type { blogInterface,diaryInterface } from "./admin"; export interface indexInterface { modaOpen: boolean, title: string, - } \ No newline at end of file + } +export interface homePageInterface { + id: number; + blogtitle?: string; // 博客标题，可选字段 + blogcontent?: string; // 博客内容，可选字段 + diarytitle?: string; // 日记标题，可选字段 + diarycontent?: string; // 日记内容，可选字段 + imglink: string; // 图片链接 + typename: string; // 类型名称 + create_at: string; // 创建时间 + update_at?: string; // 更新时间，可选字段 + wordcount?: number; // 字数统计，可选字段 + labelnames?: string[]; // 标签名称数组，可选字段 +} diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue index fb8dbbe..87d203a 100644 --- a/src/components/blogs/HomePage.vue +++ b/src/components/blogs/HomePage.vue @@ -86,20 +86,28 @@ -
- - -
- 2021-02-01 - 操作系统 +
+
+
+ {{ article.blogtitle }} + {{ article.create_at }} +
+ +
+
+
+ {{ article.diarytitle }} + {{ article.create_at }} +
+
+ - sces + {{ label.labelname }}
@@ -168,7 +176,8 @@ import { get } from "@/tools/request" import { createEcharts } from "@/hooks/intex" import { useRouter, useRoute } from 'vue-router'; import iconComponents from "@/assets/index"; -import type { classticInterface, comLinkInterface } from '@/api/admin'; +import type { classticInterface, comLinkInterface, labelInterface } from '@/api/admin'; +import type { homePageInterface } from '@/api'; const router = useRouter() const route = useRoute() const author = ref("SunFree.") @@ -246,7 +255,7 @@ const items = ref([ ]); const searchValue = ref("") const jumpMenu = ({ key }: { key: string }) => { - router.push(key) + router.push(`/${key}`) }; const updateCarouselVisibility = (routeName: any) => { handleScrollEnabled.value = false; @@ -527,7 +536,7 @@ const heatMapData = reactive( itemStyle: { borderColor: 'rgb(231,229,225,0.5)', // 设置边框颜色 borderWidth: 0.5, // 设置边框宽度 - + }, label: { show: false, @@ -545,16 +554,41 @@ const heatMapData = reactive( ) // 音乐组件 const random = ref(); +const homepagelist = ref([]) +// 随机文章 +const homePageList = async () => { + await get( + "/statistics/homepage" + ).then(response => { + homepagelist.value = response.data.data.sort(() => 0.5 - Math.random()).slice(0, 3); + }) +} +const labellist = ref([]) +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 = async () => { + try { + await get("/labels/list").then(response => { + if (response) { + labellist.value = response.data.data; + } + }) + } catch (error) { - + } +} onMounted(() => { classticList() blogList() + labelList() diaryList() comLinkList() statisticList() updateCurrentDate(); + homePageList() setInterval(updateCurrentDate, 24 * 60 * 60 * 1000); createEcharts(heat, heatMapData); nextTick(() => { @@ -625,12 +659,25 @@ watch( () => route.name, (newRouteName) => { updateCarouselVisibility(newRouteName); + if (newRouteName) { - const menuItem = items.value?.find((item: any) => item.key === newRouteName); + // 尝试从菜单项中找到与当前路由名称匹配的项 + const menuItem = items.value?.find((item: any) => { + // 这里可以根据实际情况来匹配路由名称或路径 + // 例如，可以根据 route.name 或 route.path 来匹配 + if (newRouteName === 'blogdetail') { + return item.key === 'blog'; // 匹配博客详情页，选中博客菜单 + } else if (newRouteName === 'diarydetail') { + return item.key === 'diary'; // 匹配日记详情页，选中日记菜单 + } else { + return item.key === newRouteName; // 默认匹配路由名称 + } + }); + if (menuItem) { current.value = [menuItem.key as string]; } else { - current.value = ['home']; // 如果找不到对应的菜单项，默认选中 'home' + current.value = ['home']; // 找不到对应的菜单项，默认选中 'home' } } else { current.value = ['home']; // 如果 route.name 不存在，默认选中 'home' @@ -763,20 +810,12 @@ watch( margin-bottom: 24px; } -.rightBar>:nth-child(4) div { - display: flex; - justify-content: center; - position: relative; - margin-bottom: 24px; +.rightBar .article-text{ + margin: 12px 0; } - -.rightBar>:nth-child(4) div .article-text { - display: flex; - flex-direction: column; - position: absolute; - bottom: 5%; - left: 10%; - color: rgb(187, 185, 187); +.rightBar .article-text span{ + margin-right: 12px; + font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif"; } #aplayer { diff --git a/src/router/blog.ts b/src/router/blog.ts index f12beaa..6f8ff8a 100644 --- a/src/router/blog.ts +++ b/src/router/blog.ts @@ -8,37 +8,37 @@ const blogRoute:Array=[ component: () => import("@/components/blogs/HomePage.vue"), children:[ { - path:"/home", + path:"home", name:"home", component:()=>import("@/views/blog/HomePageView.vue") }, { - path:"/blog", + path:"blog", name:"blog", component:()=>import("@/views/blog/blogcontent/BlogListView.vue") }, { - path:"/blog/:id", + path:"blog/:id", name:"blogdetail", component:()=>import("@/views/blog/blogcontent/BlogDetailView.vue") }, { - path:"/diary", + path:"diary", name:"diary", component:()=>import("@/views/blog/diarycontent/DiaryListView.vue") }, { - path:"/diary/:id", + path:"diary/:id", name:"diarydetail", component:()=>import("@/views/blog/diarycontent/DiaryDetailView.vue") }, { - path:"/chart", + path:"chart", name:"chart", component:()=>import("@/views/blog/AmountChartView.vue") }, { - path:"/aboutme", + path:"aboutme", name:"aboutme", component:()=>import("@/views/blog/AboutMe.vue"), }, diff --git a/src/views/blog/AboutMe.vue b/src/views/blog/AboutMe.vue index d19752e..eae42ff 100644 --- a/src/views/blog/AboutMe.vue +++ b/src/views/blog/AboutMe.vue @@ -1,11 +1,14 @@ - + - + \ No newline at end of file diff --git a/src/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue index 0e8713f..1b8ffa2 100644 --- a/src/views/blog/AmountChartView.vue +++ b/src/views/blog/AmountChartView.vue @@ -1,10 +1,8 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/views/blog/HomePageView.vue b/src/views/blog/HomePageView.vue index a66b429..d2ccd22 100644 --- a/src/views/blog/HomePageView.vue +++ b/src/views/blog/HomePageView.vue @@ -1,63 +1,162 @@ \ No newline at end of file diff --git a/src/views/blog/blogcontent/BlogListView.vue b/src/views/blog/blogcontent/BlogListView.vue index a552d03..cc3c3fe 100644 --- a/src/views/blog/blogcontent/BlogListView.vue +++ b/src/views/blog/blogcontent/BlogListView.vue @@ -99,10 +99,6 @@ const blogList = async (page: number, pageSize: number) => { } }; - - - - const readMore = (id: any) => { router.push(`/blog/${id}`) }