From aa6e6dd42396410827c1d9c39cd13767dd30463c Mon Sep 17 00:00:00 2001 From: panda <7934952@qq.com> Date: Mon, 5 Aug 2024 17:04:18 +0800 Subject: [PATCH] add new --- index.html | 2 +- src/stores/index.ts | 9 ++++--- src/views/blog/HomePageView.vue | 27 ++++++++++++++++--- src/views/blog/blogcontent/BlogListView.vue | 24 +++++++++++------ src/views/blog/diarycontent/DiaryListView.vue | 19 ++++++++++--- 5 files changed, 61 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 325abbb..6bff897 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <link rel="icon" href="/favicon.ico"> + <link rel="icon" href="http://www.wuruilin.cn/otherimg/头像.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SunFree</title> </head> diff --git a/src/stores/index.ts b/src/stores/index.ts index 93b1c05..88c042f 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -63,6 +63,8 @@ export const blogStore = defineStore("blog", () => { ids: "", title:"" }) + const isEmpty=ref(false) + const isPage=ref(true) const formControl = ref({ open: false, ids: null @@ -71,7 +73,7 @@ export const blogStore = defineStore("blog", () => { const setReadCount=(num:number)=>{ readcount.value+=num } - return { delControl,formControl,readcount,setReadCount } + return { delControl,formControl,readcount,isEmpty,isPage,setReadCount } }) export const useContentStore = defineStore('content', () => { const content = ref({ text: "" }); @@ -94,9 +96,10 @@ export const diaryStore = defineStore("diary", () => { ids: null, title:"" }) - + const isEmpty=ref(false) + const isPage=ref(true) - return { delControl } + return { delControl,isEmpty,isPage } }) export const classticStore = defineStore("classtic", () => { const addControl = reactive({ diff --git a/src/views/blog/HomePageView.vue b/src/views/blog/HomePageView.vue index cadc259..6b20852 100644 --- a/src/views/blog/HomePageView.vue +++ b/src/views/blog/HomePageView.vue @@ -32,8 +32,8 @@ </a-tag> </div> <div class="blog-content"> - <div> - <a-image :preview="false" :width="200" :src=article.imglink /> + <div class="image-container"> + <a-image :preview="false" :src=article.imglink class="responsive-image"/> </div> <div class="text-container"> {{ article.blogcontent }} @@ -81,8 +81,8 @@ </a-tag> </div> <div class="blog-content"> - <div> - <a-image :preview="false" :width="1000" :height="500" :src=article.imglink /> + <div class="image-container"> + <a-image :preview="false" :src=article.imglink class="responsive-image"/> </div> </div> <div class="read-button"> @@ -207,6 +207,25 @@ watch(() => homepageStore.homepagelist, () => { margin: 48px; } +.blogs .image-container { + width: 300px; + +} + +.blogs .responsive-image { + width: 100%; + height: auto; +} +.diarys .image-container { + width: 1000px; + +} + +.diarys .responsive-image { + width: 100%; + height: auto; +} + .main .blog-content>:first-child { padding: 4px; border: 2px solid #ccc; diff --git a/src/views/blog/blogcontent/BlogListView.vue b/src/views/blog/blogcontent/BlogListView.vue index 05284ab..7b2ce37 100644 --- a/src/views/blog/blogcontent/BlogListView.vue +++ b/src/views/blog/blogcontent/BlogListView.vue @@ -48,7 +48,7 @@ </a-card> </a-badge-ribbon> </div> - <div class="pagination"> + <div class="pagination" v-if="blogstore.isPage"> <a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef" :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange"> <template #buildOptionText="props"> @@ -57,19 +57,23 @@ </template> </a-pagination> </div> - + <div class="is-null" v-if="blogstore.isEmpty"> + <a-card hoverable> + <a-empty description="没有数据" /> + </a-card> + </div> </div> </template> <script setup lang='ts'> import { onMounted, ref } from 'vue'; import iconComponents from '@/assets'; -import { useContentStore } from "@/stores" +import { blogStore } from "@/stores" import dayjs from 'dayjs'; import type { blogInterface } from '@/api/admin'; import { get,put } from "@/tools/request" import router from '@/router'; -const store = useContentStore() +const blogstore = blogStore() 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)]; @@ -104,18 +108,21 @@ const blogList = async (page: number, pageSize: number) => { readnum: items.readnum, readminite: Math.round(items.blogcontent.length/ 200), imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg', - })) total.value = response.data.data.total; // 更新总数 + if (response.data.data.total===0) { + blogstore.isEmpty=true + blogstore.isPage=false + }else{ + blogstore.isEmpty=false + blogstore.isPage=true + } pageSizeRef.value = pageSize; // 更新页大小,如果需要从接口返回页大小也可以改为 response.data.data.page_size dataLoaded.value = true } catch (error) { console.error('Failed to fetch data', error); } } -const blogCount=async (id:any)=>{ - await put(`/blogs/update/${id}/readnum`) -} const readMore = (id: any) => { router.push(`/blog/${id}`) @@ -154,6 +161,7 @@ onMounted(() => { .main .blog-content { display: flex; margin: 48px; + width: 45%; } .main .blog-content>:first-child { diff --git a/src/views/blog/diarycontent/DiaryListView.vue b/src/views/blog/diarycontent/DiaryListView.vue index 1e62516..b72a2e2 100644 --- a/src/views/blog/diarycontent/DiaryListView.vue +++ b/src/views/blog/diarycontent/DiaryListView.vue @@ -43,7 +43,7 @@ </a-card> </a-badge-ribbon> </div> - <div class="pagination"> + <div class="pagination" v-if="diarystore.isPage"> <a-pagination v-model:current="current" v-if="dataLoaded" v-model:page-size="pageSizeRef" :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange"> <template #buildOptionText="props"> @@ -52,7 +52,11 @@ </template> </a-pagination> </div> - + <div class="is-null" v-if="diarystore.isEmpty"> + <a-card hoverable> + <a-empty description="没有数据" /> + </a-card> + </div> </div> </template> @@ -62,9 +66,9 @@ import iconComponents from '@/assets'; import dayjs from 'dayjs'; import type { diaryInterface } from '@/api/admin'; import { get,put } from "@/tools/request" -import { useContentStore } from "@/stores" +import { diaryStore } from "@/stores" import router from '@/router'; -const store = useContentStore() +const diarystore = diaryStore() const dataLoaded = ref(false); // 分页 const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']); @@ -99,6 +103,13 @@ const diaryList = async (page: number, pageSize: number) => { imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg', })); total.value = response.data.data.total; // 更新总数 + if (response.data.data.total===0) { + diarystore.isEmpty=true, + diarystore.isPage=false + }else{ + diarystore.isEmpty=false, + diarystore.isPage=true + } pageSizeRef.value = pageSize; // 更新页大小,如果需要从接口返回页大小也可以改为 response.data.data.page_size dataLoaded.value = true } catch (error) {