Browse Source

add new

master
panda 7 months ago
parent
commit
aa6e6dd423
  1. 2
      index.html
  2. 9
      src/stores/index.ts
  3. 27
      src/views/blog/HomePageView.vue
  4. 24
      src/views/blog/blogcontent/BlogListView.vue
  5. 19
      src/views/blog/diarycontent/DiaryListView.vue

2
index.html

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SunFree</title> <title>SunFree</title>
</head> </head>

9
src/stores/index.ts

@ -63,6 +63,8 @@ export const blogStore = defineStore("blog", () => {
ids: "", ids: "",
title:"" title:""
}) })
const isEmpty=ref(false)
const isPage=ref(true)
const formControl = ref({ const formControl = ref({
open: false, open: false,
ids: null ids: null
@ -71,7 +73,7 @@ export const blogStore = defineStore("blog", () => {
const setReadCount=(num:number)=>{ const setReadCount=(num:number)=>{
readcount.value+=num readcount.value+=num
} }
return { delControl,formControl,readcount,setReadCount }
return { delControl,formControl,readcount,isEmpty,isPage,setReadCount }
}) })
export const useContentStore = defineStore('content', () => { export const useContentStore = defineStore('content', () => {
const content = ref({ text: "" }); const content = ref({ text: "" });
@ -94,9 +96,10 @@ export const diaryStore = defineStore("diary", () => {
ids: null, ids: null,
title:"" title:""
}) })
const isEmpty=ref(false)
const isPage=ref(true)
return { delControl }
return { delControl,isEmpty,isPage }
}) })
export const classticStore = defineStore("classtic", () => { export const classticStore = defineStore("classtic", () => {
const addControl = reactive({ const addControl = reactive({

27
src/views/blog/HomePageView.vue

@ -32,8 +32,8 @@
</a-tag> </a-tag>
</div> </div>
<div class="blog-content"> <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>
<div class="text-container"> <div class="text-container">
{{ article.blogcontent }} {{ article.blogcontent }}
@ -81,8 +81,8 @@
</a-tag> </a-tag>
</div> </div>
<div class="blog-content"> <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> </div>
<div class="read-button"> <div class="read-button">
@ -207,6 +207,25 @@ watch(() => homepageStore.homepagelist, () => {
margin: 48px; 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 { .main .blog-content>:first-child {
padding: 4px; padding: 4px;
border: 2px solid #ccc; border: 2px solid #ccc;

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

@ -48,7 +48,7 @@
</a-card> </a-card>
</a-badge-ribbon> </a-badge-ribbon>
</div> </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" <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"> :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange">
<template #buildOptionText="props"> <template #buildOptionText="props">
@ -57,19 +57,23 @@
</template> </template>
</a-pagination> </a-pagination>
</div> </div>
<div class="is-null" v-if="blogstore.isEmpty">
<a-card hoverable>
<a-empty description="没有数据" />
</a-card>
</div>
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import iconComponents from '@/assets'; import iconComponents from '@/assets';
import { useContentStore } from "@/stores"
import { blogStore } from "@/stores"
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { blogInterface } from '@/api/admin'; import type { blogInterface } from '@/api/admin';
import { get,put } from "@/tools/request" import { get,put } from "@/tools/request"
import router from '@/router'; import router from '@/router';
const store = useContentStore()
const blogstore = blogStore()
const randomColor = () => { const randomColor = () => {
const labelColor = ref(["processing", "success", "error", "warning", "magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "geekblue", "purple"]) 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)]; return labelColor.value[Math.floor(Math.random() * labelColor.value.length)];
@ -104,18 +108,21 @@ const blogList = async (page: number, pageSize: number) => {
readnum: items.readnum, readnum: items.readnum,
readminite: Math.round(items.blogcontent.length/ 200), readminite: Math.round(items.blogcontent.length/ 200),
imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg', imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg',
})) }))
total.value = response.data.data.total; // 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 pageSizeRef.value = pageSize; // response.data.data.page_size
dataLoaded.value = true dataLoaded.value = true
} catch (error) { } catch (error) {
console.error('Failed to fetch data', error); console.error('Failed to fetch data', error);
} }
} }
const blogCount=async (id:any)=>{
await put(`/blogs/update/${id}/readnum`)
}
const readMore = (id: any) => { const readMore = (id: any) => {
router.push(`/blog/${id}`) router.push(`/blog/${id}`)
@ -154,6 +161,7 @@ onMounted(() => {
.main .blog-content { .main .blog-content {
display: flex; display: flex;
margin: 48px; margin: 48px;
width: 45%;
} }
.main .blog-content>:first-child { .main .blog-content>:first-child {

19
src/views/blog/diarycontent/DiaryListView.vue

@ -43,7 +43,7 @@
</a-card> </a-card>
</a-badge-ribbon> </a-badge-ribbon>
</div> </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" <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"> :page-size-options="pageSizeOptions" :total="total" show-size-changer @change="onShowSizeChange">
<template #buildOptionText="props"> <template #buildOptionText="props">
@ -52,7 +52,11 @@
</template> </template>
</a-pagination> </a-pagination>
</div> </div>
<div class="is-null" v-if="diarystore.isEmpty">
<a-card hoverable>
<a-empty description="没有数据" />
</a-card>
</div>
</div> </div>
</template> </template>
@ -62,9 +66,9 @@ import iconComponents from '@/assets';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { diaryInterface } from '@/api/admin'; import type { diaryInterface } from '@/api/admin';
import { get,put } from "@/tools/request" import { get,put } from "@/tools/request"
import { useContentStore } from "@/stores"
import { diaryStore } from "@/stores"
import router from '@/router'; import router from '@/router';
const store = useContentStore()
const diarystore = diaryStore()
const dataLoaded = ref(false); const dataLoaded = ref(false);
// //
const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']); 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', imglink: items.imglink || 'http://www.wuruilin.cn/personself/暂无图片.jpg',
})); }));
total.value = response.data.data.total; // 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 pageSizeRef.value = pageSize; // response.data.data.page_size
dataLoaded.value = true dataLoaded.value = true
} catch (error) { } catch (error) {

Loading…
Cancel
Save