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) {