From a1f1a958a4cf63932f2f23a86b7868d2d2b376cc Mon Sep 17 00:00:00 2001
From: panda <7934952@qq.com>
Date: Wed, 7 Aug 2024 17:00:41 +0800
Subject: [PATCH] add new

---
 src/views/admin/blogmanage/BlogManageView.vue |  2 +-
 .../admin/diarymanage/DiaryManageView.vue     |  2 +-
 src/views/blog/HomePageView.vue               | 27 ++++++-----
 src/views/blog/blogcontent/BlogListView.vue   | 47 ++++++++++++-------
 4 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/views/admin/blogmanage/BlogManageView.vue b/src/views/admin/blogmanage/BlogManageView.vue
index 41a5605..91ca076 100644
--- a/src/views/admin/blogmanage/BlogManageView.vue
+++ b/src/views/admin/blogmanage/BlogManageView.vue
@@ -13,7 +13,7 @@
         </div>
         <div class="modal">
             <a-modal v-model:open="formControl.open" :title="delControl.title" width="100%" wrap-class-name="full-modal"
-                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)">
+                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)" :maskClosable="false">
                 <a-form ref="formRef" :model="formState" :rules="rules">
                     <a-flex gap="large" justify="space-between">
                         <a-form-item label="博客标题" name="blogtitle">
diff --git a/src/views/admin/diarymanage/DiaryManageView.vue b/src/views/admin/diarymanage/DiaryManageView.vue
index abd29ef..4a26a46 100644
--- a/src/views/admin/diarymanage/DiaryManageView.vue
+++ b/src/views/admin/diarymanage/DiaryManageView.vue
@@ -13,7 +13,7 @@
         </div>
         <div class="modal">
             <a-modal v-model:open="formControl.open" :title="delControl.title" width="100%" wrap-class-name="full-modal"
-                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)">
+                @ok="onSubmit" ok-text="确认" cancel-text="取消" @cancel="unControl(delControl.title)" :maskClosable="false">
                 <a-form ref="formRef" :model="formState" :rules="rules">
                     <a-flex gap="large" justify="space-between">
                         <a-form-item label="日记标题" name="diarytitle">
diff --git a/src/views/blog/HomePageView.vue b/src/views/blog/HomePageView.vue
index 6b20852..d2a4e00 100644
--- a/src/views/blog/HomePageView.vue
+++ b/src/views/blog/HomePageView.vue
@@ -3,7 +3,7 @@
         <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>   
+                    <a-card hoverable>
                         <h2>{{ article.blogtitle }}</h2>
                         <div class="tag-group">
                             <a-tag color="#E6E6FA">
@@ -28,12 +28,12 @@
                                 <template #icon>
                                     <component :is=iconComponents.YueDuLined />
                                 </template>
-                                阅读时长≈{{ Math.round(article.blogcontent.length/ 200) }}分
+                                阅读时长≈{{ Math.round(article.blogcontent.length / 200) }}分
                             </a-tag>
                         </div>
                         <div class="blog-content">
                             <div class="image-container">
-                                <a-image :preview="false" :src=article.imglink  class="responsive-image"/>
+                                <a-image :preview="false" :src=article.imglink class="responsive-image" />
                             </div>
                             <div class="text-container">
                                 {{ article.blogcontent }}
@@ -77,12 +77,12 @@
                                 <template #icon>
                                     <component :is=iconComponents.YueDuLined />
                                 </template>
-                                阅读时长≈{{ Math.round(article.diarycontent.length/ 200) }}分
+                                阅读时长≈{{ Math.round(article.diarycontent.length / 200) }}分
                             </a-tag>
                         </div>
                         <div class="blog-content">
                             <div class="image-container">
-                                <a-image :preview="false" :src=article.imglink class="responsive-image"/>
+                                <a-image :preview="false" :src=article.imglink class="responsive-image" />
                             </div>
                         </div>
                         <div class="read-button">
@@ -112,7 +112,7 @@
 import { onMounted, ref, watch } from 'vue';
 import type { homePageInterface } from '@/api';
 import iconComponents from "@/assets/index"
-import { get,put } from '@/tools/request';
+import { get, put } from '@/tools/request';
 import router from '@/router';
 import { homePageStore } from '@/stores';
 const homepageStore = homePageStore();
@@ -120,10 +120,10 @@ 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 blogCount=async (id:any)=>{
+const blogCount = async (id: any) => {
     await put(`/blogs/update/${id}/readnum`)
 }
-const diaryCount=async (id:any)=>{
+const diaryCount = async (id: any) => {
     await put(`/diarys/update/${id}/readnum`)
 }
 const readMoreBlog = (id: any) => {
@@ -204,21 +204,24 @@ watch(() => homepageStore.homepagelist, () => {
 
 .main .blog-content {
     display: flex;
+    align-items: flex-start;
     margin: 48px;
 }
 
 .blogs .image-container {
-    width: 300px;
-   
+    flex-shrink: 0;
+    width: 200px;
+
 }
 
 .blogs .responsive-image {
     width: 100%;
     height: auto;
 }
+
 .diarys .image-container {
     width: 1000px;
-   
+
 }
 
 .diarys .responsive-image {
@@ -290,7 +293,7 @@ watch(() => homepageStore.homepagelist, () => {
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
+    -webkit-line-clamp: 4;
     word-wrap: break-word;
     overflow-wrap: break-word;
     line-height: 2;
diff --git a/src/views/blog/blogcontent/BlogListView.vue b/src/views/blog/blogcontent/BlogListView.vue
index 48550e7..59a2b7d 100644
--- a/src/views/blog/blogcontent/BlogListView.vue
+++ b/src/views/blog/blogcontent/BlogListView.vue
@@ -31,13 +31,13 @@
                         </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 }}
+                            </div>
                         </div>
-                        <div class="text-container">
-                            {{ article.blogcontent }}
-                        </div>
-                    </div>
                     <div class="read-button">
                         <a-button type="primary" shape="round" @click="readMore(article.id)">阅读全文</a-button>
                     </div>
@@ -48,6 +48,7 @@
                 </a-card>
             </a-badge-ribbon>
         </div>
+        
         <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">
@@ -71,7 +72,7 @@ import iconComponents from '@/assets';
 import { blogStore } from "@/stores"
 import dayjs from 'dayjs';
 import type { blogInterface } from '@/api/admin';
-import { get,put } from "@/tools/request"
+import { get, put } from "@/tools/request"
 import router from '@/router';
 const blogstore = blogStore()
 const randomColor = () => {
@@ -95,7 +96,7 @@ const blogList = async (page: number, pageSize: number) => {
             page,
             page_size: pageSize,
         })
-        bloglist.value = response.data.data.blogs.map((items: any,index:number) => ({
+        bloglist.value = response.data.data.blogs.map((items: any, index: number) => ({
             id: items.id,
             key: items.key,
             blogtitle: items.blogtitle,
@@ -106,16 +107,16 @@ const blogList = async (page: number, pageSize: number) => {
             create_at: dayjs(items.create_at).format('YYYY-MM-DD HH:mm:ss'),
             update_at: dayjs(items.update_at).format('YYYY-MM-DD HH:mm:ss'),
             readnum: items.readnum,
-            readminite: Math.round(items.blogcontent.length/ 200),
+            readminite: Math.round(items.blogcontent.length / 200),
             imglink: items.imglink || 'https://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
+        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
@@ -160,8 +161,18 @@ onMounted(() => {
 
 .main .blog-content {
     display: flex;
+    align-items: flex-start;
     margin: 48px;
-    width: 45%;
+}
+.blog-content .image-container {
+    flex-shrink: 0;
+    width: 200px;
+   
+}
+
+.blog-content .responsive-image {
+    width: 100%;
+    height: auto;
 }
 
 .main .blog-content>:first-child {
@@ -218,11 +229,11 @@ onMounted(() => {
     }
 }
 
-.main .text-container {
+.blog-content .text-container {
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 6;
+    -webkit-line-clamp: 4;
     word-wrap: break-word;
     overflow-wrap: break-word;
     line-height: 2;