From 65a1cef200acf2e9175521588da13778a1e34fc6 Mon Sep 17 00:00:00 2001
From: panda <7934952@qq.com>
Date: Thu, 11 Jul 2024 17:10:41 +0800
Subject: [PATCH] add new

---
 src/assets/image.png                          | Bin 0 -> 11015 bytes
 src/assets/index.ts                           |   6 +-
 src/components/blogs/HomePage.vue             | 104 ++++++++-
 src/components/blogs/ceshi.vue                | 210 +++---------------
 src/views/blog/blogcontent/BlogDetailView.vue |  41 ++--
 src/views/blog/blogcontent/BlogListView.vue   |  68 +++---
 6 files changed, 202 insertions(+), 227 deletions(-)
 create mode 100644 src/assets/image.png

diff --git a/src/assets/image.png b/src/assets/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..fafa25f079a80f4c26364ffec9a84747dd11c820
GIT binary patch
literal 11015
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
B<@f*q

literal 0
HcmV?d00001

diff --git a/src/assets/index.ts b/src/assets/index.ts
index 6e518ca..d22d9a9 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -3,7 +3,7 @@ import { createFromIconfontCN } from '@ant-design/icons-vue';
 
 function createIconComponent(iconType: string) {
   const IconComponent = createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/c/font_4513281_qhbaqfo6egj.js', // 在 iconfont.cn 上生成
+    scriptUrl: '//at.alicdn.com/t/c/font_4513281_1cb6b9dny0i.js', // 在 iconfont.cn 上生成
   });
 
   return defineComponent({
@@ -32,6 +32,10 @@ const iconComponents = {
   YanJingLined: createIconComponent('icon-yanjing'),
   XieZiLined: createIconComponent('icon-xiezi'),
   CravatarLined: createIconComponent('icon-cravatar'),
+  GongAnLined: createIconComponent('icon-gonganbeian'),
+  IcpLined: createIconComponent('icon-wsmp-icprecord'),
+  BanQuanLined: createIconComponent('icon-banquan'),
+  
 }
 
 
diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index 44f8d7a..d81fc58 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -104,6 +104,54 @@
             </div>
         </div>
 
+        <div class="footer">
+            <div class="miit">
+                <a-space wrap>
+                    <a-text>
+                        <component :is=iconComponents.BanQuanLined />
+                        <span>Copyright © 2024</span>
+                    </a-text>
+                    <a-button type="link" href="/home">
+                        <component :is=iconComponents.TitleOutLined />
+                        <span>SunFree</span>
+                    </a-button>
+                    <a-button type="link" href="https://beian.miit.gov.cn/">
+                        <component :is=iconComponents.IcpLined />
+                        <span>苏ICP备2024067473号-1</span>
+                    </a-button>
+
+                    <a-button type="link" href="https://beian.mps.gov.cn/#/query/webSearch">
+                        <component :is=iconComponents.GongAnLined />
+                        <span>苏公网安备32021402003003号</span>
+                    </a-button>
+                </a-space>
+            </div>
+            <div class="badge">
+                <a-space wrap>
+                    <a-button type="link" class="badge-button" href="https://cn.vuejs.org/">
+                        <span class="tag-nav">front-end</span>
+                        <span class="tag-main-first">Vue.js</span>
+                    </a-button>
+                    <a-button type="link" class="badge-button" href="https://fastapi.tiangolo.com/zh/">
+                        <span class="tag-nav">back-end</span>
+                        <span class="tag-main-second">FastAPI</span>
+                    </a-button>
+                    <a-button type="link" class="badge-button" href="https://www.antdv.com/docs/vue/introduce-cn/">
+                        <span class="tag-nav">UI</span>
+                        <span class="tag-main-third">Ant Design Vue</span>
+                    </a-button>
+                    <a-button type="link" class="badge-button" href="https://cloud.tencent.com/">
+                        <span class="tag-nav">VPS</span>
+                        <span class="tag-main-fourth">tencent cloud</span>
+                    </a-button>
+                </a-space>
+            </div>
+            <div>
+
+
+            </div>
+            <div></div>
+        </div>
     </Simplebar>
 </template>
 <script lang="ts" setup>
@@ -121,7 +169,6 @@ import { useRouter, useRoute } from 'vue-router';
 import iconComponents from "@/assets/index";
 import type { classticInterface } from '@/api/admin';
 import type { comLinkInterface } from '@/api/admin/index';
-
 const router = useRouter()
 const route = useRoute()
 const author = ref("SunFree.")
@@ -203,13 +250,13 @@ const items = ref<MenuProps['items']>([
     },
 ]);
 
-const jumpMenu = ({ key }:{key:string}) => {
-      // 从 `item` 中获取 `key` 和 `url` 信息
-      const selectedItem = items.value.find((i:any) => i.key === key);
-      if (selectedItem && selectedItem.url) {
+const jumpMenu = ({ key }: { key: string }) => {
+    // 从 `item` 中获取 `key` 和 `url` 信息
+    const selectedItem = items.value.find((i: any) => i.key === key);
+    if (selectedItem && selectedItem.url) {
         router.push(selectedItem.url);
-      }
-    };
+    }
+};
 const updateCarouselVisibility = (routeName: any) => {
     handleScrollEnabled.value = false;
     if (scrollbar.value) {
@@ -684,4 +731,47 @@ watch(
 .statistic {
     text-align: center;
 }
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer a {
+    color: #6e5555;
+}
+
+.footer .badge {
+    margin: 48px 0;
+}
+.footer .miit {
+    margin: 48px 0 0 0;
+}
+.footer .badge .tag-nav {
+    background-color: #505050;
+}
+.footer .miit span{
+    padding: 0 6px;
+}
+.footer .badge span {
+    padding: 0 6px;
+    color: white;
+}
+
+.footer .badge .tag-main-first {
+    background-color: rgb(3, 3, 250);
+}
+
+.footer .badge .tag-main-second {
+    background-color: rgb(235, 15, 228);
+}
+
+.footer .badge .tag-main-third {
+    background-color: rgb(10, 207, 39);
+}
+
+.footer .badge .tag-main-fourth {
+    background-color: rgb(229, 131, 12);
+}
 </style>
\ No newline at end of file
diff --git a/src/components/blogs/ceshi.vue b/src/components/blogs/ceshi.vue
index f08fe4c..afd8f89 100644
--- a/src/components/blogs/ceshi.vue
+++ b/src/components/blogs/ceshi.vue
@@ -1,189 +1,45 @@
 <template>
   <div>
-    <div
-      v-for="anchor in titles"
-      :style="{ padding: `10px 0 10px ${anchor.indent}px` }"
-      @click="handleAnchorClick(anchor)"
-      :key="anchor.lineIndex"
-    >
-      <a style="cursor: pointer">{{ anchor.title }}</a>
+
+    <div v-for="blog in bloglist" :key="blog.id">
+      <!-- 在这里展示你的博客内容 -->
+      <h2>{{ blog.blogtitle }}</h2>
+      <p>{{ blog.blogcontent }}</p>
     </div>
-    <v-md-preview :text="text" ref="preview" />
+    <a-pagination v-model:current="current" v-if="dataLoaded" :total="total" :page-size="pageSize" @change="onPageChange"
+      show-less-items />
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-
-const text = `
-# heading 1
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-
-## heading 2
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-
-### heading 3
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontentcontentcontentcontent
-contentcontentcontent
-contentcontentcontent
-contentcontentcontent
-
-
-`;
-
-const preview = ref<any>(null);
-const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
-
-onMounted(() => {
-  const anchors = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-  const titlesArray = Array.from(anchors).filter((title) => !!title.innerText.trim());
-
-  if (!titlesArray.length) {
-    titles.value = [];
-    return;
+import type { blogInterface } from '@/api/admin';
+import { get } from '@/tools/request';
+const current = ref(1);
+const total = ref();
+const pageSize = ref(5);
+const bloglist = ref<blogInterface[]>([])
+  const dataLoaded = ref(false);
+
+const fetchData = async (page: number, pageSize: number) => {
+  try {
+    const response = await get('/blogs/list', {
+      page,
+      page_size: pageSize,
+    });
+    bloglist.value = response.data.data.blogs;
+    total.value = response.data.data.total;
+  } catch (error) {
+    console.error('Failed to fetch data', error);
   }
+};
 
-  const hTags = Array.from(new Set(titlesArray.map((title) => title.tagName))).sort();
+const onPageChange = (page: number) => {
+  current.value = page;
+  fetchData(page, pageSize.value);
+};
 
-  titles.value = titlesArray.map((el) => ({
-    title: el.innerText,
-    lineIndex: el.getAttribute('data-v-md-line') || '', // 确认属性名是否正确
-    indent: 20 * (parseInt(el.tagName.substring(1)) - 1) // 确认缩进计算是否正确
-  }));
+onMounted(() => {
+  fetchData(current.value, pageSize.value);
 });
-
-function handleAnchorClick(anchor: { title: string; lineIndex: string }) {
-  if (preview.value) {
-    const heading = preview.value.$el.querySelector(`[data-v-md-line="${anchor.lineIndex}"]`);
-
-    if (heading) {
-      preview.value.scrollToTarget({
-        target: heading,
-        scrollContainer: window,
-        top: 60,
-      });
-    } else {
-      console.error(`Heading element not found for lineIndex: ${anchor.lineIndex}`);
-    }
-  } else {
-    console.error('Preview component not initialized.');
-  }
-}
 </script>
diff --git a/src/views/blog/blogcontent/BlogDetailView.vue b/src/views/blog/blogcontent/BlogDetailView.vue
index d471d07..a0c9600 100644
--- a/src/views/blog/blogcontent/BlogDetailView.vue
+++ b/src/views/blog/blogcontent/BlogDetailView.vue
@@ -1,14 +1,17 @@
 <template>
-    <div id="blogDetail">
-      <div v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }"
-           @click="handleAnchorClick(anchor)" :key="anchor.lineIndex">
-        <a style="cursor: pointer">{{ anchor.title }}</a>
-      </div>
+  <div id="blogDetail">
+    <!-- <div v-for="anchor in titles" :style="{ padding: `4px 0 4px ${anchor.indent * 20}px` }"
+      @click="handleAnchorClick(anchor)" :key="anchor.lineIndex">
+      <a style="cursor: pointer">{{ anchor.title }}</a>
+    </div> -->
+    <a-card>
       <v-md-preview v-if="text.blogcontent" :text="text.blogcontent" v-bind="previewProps" />
-    </div>
-  </template>
-  
-  <script setup lang="ts">
+    </a-card>
+  </div>
+
+</template>
+
+<script setup lang="ts">
 import { ref, onMounted, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { get } from '@/tools/request';
@@ -18,6 +21,10 @@ const text = ref({
   blogtitle: "",
   blogcontent: ""
 });
+
+
+
+
 const titles = ref<{ title: string; lineIndex: string; indent: number }[]>([]);
 
 // Props for v-md-preview component
@@ -41,7 +48,7 @@ const blogOneList = async () => {
 const processHeadings = async () => {
   await nextTick();
   const anchors = document.querySelectorAll('#blogDetail h1, #blogDetail h2, #blogDetail h3, #blogDetail h4, #blogDetail h5, #blogDetail h6');
-  const titlesArray = Array.from(anchors).filter((title:any) => !!title.innerText.trim());
+  const titlesArray = Array.from(anchors).filter((title: any) => !!title.innerText.trim());
 
   if (!titlesArray.length) {
     titles.value = [];
@@ -84,10 +91,10 @@ onMounted(async () => {
 });
 </script>
 
-  
-  <style scoped>
-  #blogDetail {
-    width: 45%;
-  }
-  </style>
-  
\ No newline at end of file
+
+<style scoped>
+#blogDetail {
+  width: 45%;
+  margin: 0 24px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/blog/blogcontent/BlogListView.vue b/src/views/blog/blogcontent/BlogListView.vue
index d8f7063..88acd72 100644
--- a/src/views/blog/blogcontent/BlogListView.vue
+++ b/src/views/blog/blogcontent/BlogListView.vue
@@ -48,6 +48,16 @@
                 </a-card>
             </a-badge-ribbon>
         </div>
+        <div id="pagination">
+            <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">
+                    <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
+                    <span v-else>全部</span>
+                </template>
+            </a-pagination>
+        </div>
+
     </div>
 </template>
 
@@ -56,45 +66,49 @@ import { onMounted, ref } from 'vue';
 import iconComponents from '@/assets';
 import dayjs from 'dayjs';
 import type { blogInterface } from '@/api/admin';
-import {get} from "@/tools/request"
+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 dataLoaded = ref(false);
+// 分页
+const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
+const current = ref(1);
+const total = ref();
+const pageSizeRef = ref(10);
 const bloglist = ref<blogInterface[]>([])
-const blogList = async () => {
+const onShowSizeChange = (page: number) => {
+    current.value = page;
+    blogList(page, pageSizeRef.value)
+};
+const blogList = async (page: number, pageSize: number) => {
     try {
-        const response = await get("/blogs/list");
-        if (response) {
-            bloglist.value = response.data.data.map((items: any, index: any) => ({
-                key: (index + 1).toString(),
-                id: items.id,
-                blogtitle: items.blogtitle,
-                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: (items.blogcontent.length/150).toFixed(2),
-                wordcount: items.blogcontent.length,
-                img: items.img,
-                blogcontent: items.blogcontent,
-                typename: items.typename,
-                labelnames: items.labelnames
-            }))
-        } else {
-            console.log("bloglist is not exits")
-        }
+        const response = await get('/blogs/list', {
+            page,
+            page_size: pageSize,
+        });
+        console.log(response)
+        bloglist.value = response.data.data.blogs;
+        total.value = response.data.data.total; // 更新总数
+        pageSizeRef.value = pageSize; // 更新页大小，如果需要从接口返回页大小也可以改为 response.data.data.page_size
+        dataLoaded.value = true
     } catch (error) {
-        console.log("bloglist is error")
+        console.error('Failed to fetch data', error);
     }
+};
 
-}
-const readMore=(id:any)=>{
+
+
+
+
+const readMore = (id: any) => {
     router.push(`/blog/${id}`)
 }
 
 onMounted(() => {
-    blogList();
+    blogList(current.value, pageSizeRef.value);
 });
 </script>
 
@@ -192,4 +206,8 @@ onMounted(() => {
     margin-left: 24px;
 
 }
+#pagination{
+    display: flex;
+    justify-content: right;
+}
 </style>
\ No newline at end of file