add new

src/api/index.ts

@@ -1,5 +1,19 @@
 // 公共api
+import type { blogInterface,diaryInterface } from "./admin";
 export interface indexInterface {
     modaOpen: boolean,
     title: string,
   }
+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[]; // 标签名称数组，可选字段
+}

src/components/blogs/HomePage.vue

@@ -86,20 +86,28 @@
                     </template>
                 </a-card>
                 <a-card title="随机文章" :bordered="false" hoverable>
-                    <div v-for="article in 3">
-                        <a-image :preview="false" :width="300"
-                            src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
-
+                    <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>2021-02-01</span>
-                            <span>操作系统</span>
+                                <span>{{ article.diarytitle }}</span>
+                                <span>{{ article.create_at }}</span>
                             </div>
+                            <a-image :preview="false" :width="300" :src="article.imglink" />
                         </div>
+                    </div>
+
 
                 </a-card>
 
                 <a-card title="标签云" :bordered="false" hoverable>
-                    sces
+                    <a-tag :color=randomColor() v-for="label in labellist">{{ label.labelname }}</a-tag>
                 </a-card>
             </div>
         </div>
@@ -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<MenuProps['items']>([
 ]);
 const searchValue = ref("")
 const jumpMenu = ({ key }: { key: string }) => {
-    router.push(key)
+    router.push(`/${key}`)
 };
 const updateCarouselVisibility = (routeName: any) => {
     handleScrollEnabled.value = false;
@@ -545,16 +554,41 @@ const heatMapData = reactive(
 )
 // 音乐组件
 const random = ref();
+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);
+    })
+}
 
+const labellist = ref<labelInterface[]>([])
+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 {

src/router/blog.ts

@@ -8,37 +8,37 @@ const blogRoute:Array<RouteRecordRaw>=[
       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"),
         },

src/views/blog/AboutMe.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>这是关于我的内容</div>
+    <div class="aboutme">这是关于我的内容</div>
 </template>
 
 <script setup lang='ts'>
@@ -7,5 +7,8 @@
 </script>
 
 <style>
-    
+.aboutme {
+    width: 45%;
+    margin: 0 24px;
+}
 </style>

src/views/blog/AmountChartView.vue

@@ -1,8 +1,6 @@
 <template>
-    <div>
-        <div ref="staticLine" style="height: 300px;width: 1000px;"></div>
-        <div ref="staticLine" style="height: 300px;width: 1000px;"></div>
-        
+    <div class="amount-chart">
+        <div ref="staticLine" style="height: 300px;width: 1100px;"></div>
     </div>
 
 </template>
@@ -79,4 +77,9 @@ onMounted(() => {
 })
 </script>
 
-<style></style>
+<style>
+.amount-chart {
+    width: 45%;
+    margin: 0 24px;
+}
+</style>

src/views/blog/HomePageView.vue

@@ -1,63 +1,162 @@
 <template>
     <div class="main">
-        <div class="mainContent" v-for="article in 2">
-            <a-badge-ribbon text="Hippies" color="black">
+        <div class="mainContent" v-for="article in displayedData">
+            <div class="blogs" v-if="article.blogtitle">
+                <a-badge-ribbon :text=article.typename color="black">
                     <a-card hoverable>
-                    <h2>操作系统的安装</h2>
+                        <h2>{{ article.blogtitle }}</h2>
                         <div class="tag-group">
                             <a-tag color="#E6E6FA">
                                 <template #icon>
                                     <component :is=iconComponents.RiLiLined />
                                 </template>
-                            {{ mainStatistic.mainDate }}
+                                {{ article.create_at }}
                             </a-tag>
                             <a-tag color="#6495ED">
                                 <template #icon>
                                     <component :is=iconComponents.YanJingLined />
                                 </template>
-                            {{ mainStatistic.mainWatchCount }}
+                                {{ 111 }}
                             </a-tag>
                             <a-tag color="#B0C4DE">
                                 <template #icon>
                                     <component :is=iconComponents.XieZiLined />
                                 </template>
-                            字数≈{{ mainStatistic.mainWordCount }}字
+                                字数≈{{ article.wordcount }}字
                             </a-tag>
                             <a-tag color="#20B2AA">
                                 <template #icon>
                                     <component :is=iconComponents.YueDuLined />
                                 </template>
-                            阅读时长≈{{ mainStatistic.mainReadCount }}分
+                                阅读时长≈{{ article.blogcontent?.length }}分
                             </a-tag>
                         </div>
                         <div class="blog-content">
                             <div>
-                            <a-image :preview="false" :width="200"
-                                src="https://cdn.naccl.top/blog/blogHosting/2024/02/B01/f56c5bbe-469c-4eb7-a994-9281d6eed689.png" />
+                                <a-image :preview="false" :width="200" :src=article.imglink />
                             </div>
                             <div class="text-container">
-                            这是内容
+                                {{ article.blogcontent }}
                             </div>
                         </div>
                         <div class="read-button">
-                        <a-button type="primary" shape="round">阅读全文</a-button>
+                            <a-button type="primary" shape="round" @click="readMoreBlog(article.id)">阅读全文</a-button>
+                        </div>
+                        <hr class="custom-line">
+                        <div>
+                            <a-tag :color=randomColor() v-for="label in JSON.parse(article.labelnames)">{{ label
+                                }}</a-tag>
                         </div>
                     </a-card>
                 </a-badge-ribbon>
             </div>
+            <div class="diarys" v-else>
+                <a-badge-ribbon :text=article.typename color="black">
+                    <a-card hoverable>
+                        <h2>{{ article.diarytitle }}</h2>
+                        <div class="tag-group">
+                            <a-tag color="#E6E6FA">
+                                <template #icon>
+                                    <component :is=iconComponents.RiLiLined />
+                                </template>
+                                {{ article.create_at }}
+                            </a-tag>
+                            <a-tag color="#6495ED">
+                                <template #icon>
+                                    <component :is=iconComponents.YanJingLined />
+                                </template>
+                                {{ 1111 }}
+                            </a-tag>
+                            <a-tag color="#B0C4DE">
+                                <template #icon>
+                                    <component :is=iconComponents.XieZiLined />
+                                </template>
+                                字数≈{{ article.wordcount }}字
+                            </a-tag>
+                            <a-tag color="#20B2AA">
+                                <template #icon>
+                                    <component :is=iconComponents.YueDuLined />
+                                </template>
+                                阅读时长≈{{ 111 }}分
+                            </a-tag>
+                        </div>
+                        <div class="blog-content">
+                            <div>
+                                <a-image :preview="false" :width="1000" :height="500" :src=article.imglink />
+                            </div>
+
+                        </div>
+                        <div class="read-button">
+                            <a-button type="primary" shape="round" @click="readMoreDiary(article.id)">阅读全文</a-button>
+                        </div>
+
+                    </a-card>
+                </a-badge-ribbon>
+            </div>
+        </div>
+        <div class="loadbutton">
+            <a-button v-if="showLoadMoreButton" @click="loadMore" class="ripple-button" :loading="loading" type="primary">
+                {{ loading ? '加载中...' : '加载更多' }}
+            </a-button>
+        </div>
     </div>
 </template>
 
 <script setup lang='ts'>
-import { reactive } from 'vue';
+import { onMounted, ref } from 'vue';
+import type { homePageInterface } from '@/api';
 import iconComponents from "@/assets/index"
-const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainWordCount: string, mainReadCount: string }>({
-    mainDate: "2024-06-11",
-    mainWatchCount: "9999",
-    mainWordCount: "9999",
-    mainReadCount: "9999"
-})
+import { get } from '@/tools/request';
+import router from '@/router';
+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 readMoreBlog = (id: any) => {
+    router.push(`/blog/${id}`)
+}
+const readMoreDiary = (id: any) => {
+    router.push(`/diary/${id}`)
+}
+const homepagelist = ref<homePageInterface[]>([])
+const displayedData = ref<any[]>([]); // 存储当前显示的部分数据
+const itemsPerPage = 10; // 每次加载的条目数
+let currentIndex = 0; // 当前显示数据的索引位置
+const showNextBatch = () => {
+    const end = currentIndex + itemsPerPage;
+    displayedData.value = homepagelist.value.slice(0, end);
+    currentIndex = end;
+
+    // 控制加载更多按钮的显示与隐藏
+    showLoadMoreButton.value = currentIndex < homepagelist.value.length;
+};
+
+// 加载更多按钮的显示与隐藏
+const showLoadMoreButton = ref<boolean>(true);
 
+// 点击加载更多按钮时触发加载下一批数据
+const loading=ref(false)
+const loadMore = () => {
+    loading.value=true
+    setTimeout(()=>{
+        loading.value=false
+        showNextBatch();
+    },1500)
+    
+};
+
+const homePageList = async () => {
+    await get(
+        "/statistics/homepage"
+    ).then(response => {
+        homepagelist.value = response.data.data
+        showNextBatch();
+    })
+}
+onMounted(() => {
+    homePageList()
+})
 </script>
 
 <style scoped>
@@ -67,9 +166,6 @@ const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainW
     margin: 0 24px;
 }
 
-.main .mainContent {
-    margin-bottom: 24px;
-}
 
 .main h2 {
     text-align: center;
@@ -113,6 +209,18 @@ const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainW
     /* 添加颜色变化的动画 */
 }
 
+.mainContent .blogs,
+.mainContent .diarys {
+    margin: 0 0 24px 0;
+}
+
+.custom-line {
+    border: 0;
+    height: 1px;
+    background: #d9d6d6;
+    margin: 48px 0 24px 0;
+}
+
 @keyframes colorChange {
     0% {
         background-color: #007bff;
@@ -141,4 +249,15 @@ const mainStatistic = reactive<{ mainDate: string, mainWatchCount: string, mainW
     margin-left: 24px;
 
 }
+
+.loadbutton{
+    display: flex;
+    justify-content: right;
+    margin-bottom: 24px;
+}
+
+
+
+
+
 </style>

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}`)
 }