From 8f9027cda5b952a63af352590cd4e7148cab933b Mon Sep 17 00:00:00 2001
From: sunfree <17315650350@163.com>
Date: Sun, 23 Jun 2024 23:38:34 +0800
Subject: [PATCH] add new

---
 src/components/blogs/HomePage.vue            |  99 ++-----
 src/router/blog.ts                           |   2 +-
 src/stores/index.ts                          | 292 +++++++++++--------
 src/views/admin/blogmange/BlogManageView.vue |  66 -----
 4 files changed, 206 insertions(+), 253 deletions(-)

diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue
index 71c1d7f..86c4956 100644
--- a/src/components/blogs/HomePage.vue
+++ b/src/components/blogs/HomePage.vue
@@ -44,7 +44,7 @@
                             <template #expandIcon="{ isActive }">
                                 <caret-right-outlined :rotate="isActive ? 90 : 0" />
                             </template>
-                            <a-collapse-panel v-for="panel in panels" :key=panel.id :header=panel.header
+                            <a-collapse-panel v-for="panel in panelList.panels" :key=panel.id :header=panel.header
                                 :style="customStyle">
                                 <p>{{ panel.text }}</p>
                             </a-collapse-panel>
@@ -53,8 +53,8 @@
                 </a-card>
                 <a-card hoverable title="常用链接">
                     <div class="button-group">
-                        <a-button type="dashed" v-for="linkbutton in linkbuttons" :key="linkbutton.id"
-                            @click="comLinkClick(linkbutton.linkurl)">{{
+                        <a-button type="dashed" v-for="linkbutton in comLinkList.linkbuttons" :key="linkbutton.id"
+                            @click="comLinkList.comLinkClick(linkbutton.linkurl)">{{
                                 linkbutton.linktext
                             }}</a-button>
                     </div>
@@ -106,32 +106,42 @@
     </Simplebar>
 </template>
 <script lang="ts" setup>
-import { h, reactive, ref, nextTick } from 'vue';
+import { h, reactive, ref, nextTick,toRefs } from 'vue';
 import type { MenuProps } from 'ant-design-vue';
 import { HomeOutlined, HighlightOutlined, ProfileOutlined, CameraOutlined, UsergroupDeleteOutlined, DownCircleOutlined } from '@ant-design/icons-vue';
 import Typed from 'typed.js';
 import { onMounted, watch } from 'vue';
-import type { CSSProperties } from 'vue';
 import { CaretRightOutlined } from '@ant-design/icons-vue';
 import 'APlayer/dist/APlayer.min.css';
 import APlayer from 'APlayer';
 import { createEcharts } from "@/hooks/intex"
 import { useRouter, useRoute } from 'vue-router';
 import iconComponents from "@/assets/index";
-import { get } from "@/tools/request";
-import { number } from 'echarts';
+import { panelContentStore,comLinkContentStore } from '@/stores';
 
 const router = useRouter()
 const route = useRoute()
-
+const panelList=panelContentStore()
+const comLinkList=comLinkContentStore()
 
 /** 
 * 导航菜单
 */
-const show_menu = ref(false);
-const show_carousel = ref(true);
-const show_author = ref(true)
-const show_anchornDown = ref(true)
+// const show_menu = ref(false);
+// const show_carousel = ref(true);
+// const show_author = ref(true)
+// const show_anchornDown = ref(true)
+/**
+ * 隐藏参数
+ */
+const isshow=reactive({
+    show_menu:false,
+    show_carousel:true,
+    show_author:true,
+    show_anchornDown:true
+})
+const {show_menu,show_carousel,show_author,show_anchornDown}=toRefs(isshow)
+
 const mainCss = reactive({
     marginTop: "0px"
 })
@@ -166,7 +176,6 @@ const items = ref<MenuProps['items']>([
             {
                 label: '相册1',
                 key: 'album1',
-                // url: "album1"
             },
             {
                 label: '相册2',
@@ -212,7 +221,7 @@ const updateCarouselVisibility = (routeName: any) => {
         mainCss.marginTop = '48px';
     }
 };
-router.beforeEach((to, from, next) => {
+router.beforeEach((to, _, next) => {
     updateCarouselVisibility(to.name);
     next();
 });
@@ -223,7 +232,6 @@ const onSearch = (searchValue: string) => {
     console.log('or use this.value', articleTitle.value);
 };
 
-
 /**
  * 滚动条操作
  */
@@ -256,30 +264,7 @@ const downScroll = () => {
 // 折叠面板
 const activeKey = ref(['']);
 const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
-interface panelList {
-    id: number,
-    header: string,
-    text: string
-}
-const panels = ref<panelList[]>([])
-const panelData = async () => {
-    try {
-        const response = await get("/classtic/list");
-        if (response) {
-            panels.value = response.data.data.map((item: any) => ({
-                id: item.id,
-                header: item.header,
-                text: item.TEXT,
-            }));
-        } else {
-            console.error("Response data structure is not as expected:");
-        }
-    } catch (error) {
-        console.error("Failed to fetch data", error);
-    }
-}
-// console.log(panels)
-// 社交按钮
+
 const buttons = ref([
     { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
     { icon: iconComponents.QQLined, url: '/qqcode' },
@@ -290,37 +275,7 @@ const buttons = ref([
 const handleClick = (url: string) => {
     window.open(url)
 }
-// 链接按钮
-interface comlinkList {
-    id: number,
-    linktext: string,
-    linkurl: string
-}
-const linkbuttons = ref<comlinkList[]>([])
-const comLinkData = async () => {
-    try {
-        const response = await get("/comlink/list");
-        if (response) {
-            linkbuttons.value = response.data.data.map((items: any) => ({
-                id: items.id,
-                linktext: items.linktext,
-                linkurl: items.linkurl
-            }))
-        } else {
-            console.log("response data is not exist")
-        }
-    } catch (error) {
-        console.error("Failed to fetch data", error);
-    }
 
-}
-const comLinkClick = (url: string) => {
-    if (url.startsWith('http://') || url.startsWith('https://')) {
-        window.open (url,"_blank");  // 使用 window.location.href 打开外部链接
-    } else {
-        router.push(url);  // 否则使用 Vue Router 的 push 方法导航
-    }
-}
 /**
  * 右侧栏
  */
@@ -445,8 +400,8 @@ const random = ref();
 
 onMounted(() => {
     scrollbar.value = document.querySelector('.simplebar-content-wrapper');
-    panelData()
-    comLinkData()
+    panelList.panelData()
+    comLinkList.comLinkData()   
     nextTick(() => {
         const authorElement = document.querySelector('.author');
         if (authorElement) {
@@ -516,7 +471,7 @@ watch(
     (newRouteName) => {
         updateCarouselVisibility(newRouteName);
         if (newRouteName) {
-            const menuItem = items.value.find(item => item.key === newRouteName);
+            const menuItem = items.value.find((item:any) => item.key === newRouteName);
             if (menuItem) {
                 current.value = [menuItem.key];
             } else {
diff --git a/src/router/blog.ts b/src/router/blog.ts
index 65be12c..dc46dd5 100644
--- a/src/router/blog.ts
+++ b/src/router/blog.ts
@@ -47,7 +47,7 @@ const blogRoute:Array<RouteRecordRaw>=[
     {
       path:"/wechatcode",
       name:"wechatcode",
-      component:()=>import("@/components/blogs/WeChatCode.vue"),
+      component:()=>import("@/components/blogs/WechatCode.vue"),
     },
 ]
 export default blogRoute
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 6ca32a1..bd5ddd2 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -2,7 +2,86 @@ import { reactive, ref } from 'vue'
 import { defineStore } from 'pinia'
 import { get } from "@/tools/request"
 import dayjs from 'dayjs';
-interface blogInterface {
+import { useRouter } from "vue-router"
+
+const router = useRouter()
+
+export const useAuthStore = defineStore("auth", () => {
+  const tokenValue = ref("")
+  function setToken(token: string) {
+    tokenValue.value = token
+  }
+  function removeToken() {
+    localStorage.removeItem('token');
+  }
+  return { setToken, removeToken }
+})
+
+// 语录列表接口
+export const panelContentStore = defineStore("panel", () => {
+  interface panelList {
+    id: number,
+    header: string,
+    text: string
+  }
+  const panels = ref<panelList[]>([])
+  const panelData = async () => {
+    try {
+      const response = await get("/classtics/list");
+      if (response) {
+        panels.value = response.data.data.map((item: any) => ({
+          id: item.id,
+          header: item.header,
+          text: item.text,
+        }));
+      } else {
+        console.error("Response data structure is not as expected:");
+      }
+    } catch (error) {
+      console.error("Failed to fetch data", error);
+    }
+  }
+  return { panels, panelData }
+})
+
+// 链接接口
+export const comLinkContentStore = defineStore("comlink", () => {
+  interface comlinkList {
+    id: number,
+    linktext: string,
+    linkurl: string
+  }
+  const linkbuttons = ref<comlinkList[]>([])
+  const comLinkData = async () => {
+    try {
+      const response = await get("/comlink/list");
+      if (response) {
+        linkbuttons.value = response.data.data.map((items: any) => ({
+          id: items.id,
+          linktext: items.linktext,
+          linkurl: items.linkurl
+        }))
+      } else {
+        console.log("response data is not exist")
+      }
+    } catch (error) {
+      console.error("Failed to fetch data", error);
+    }
+
+  }
+  const comLinkClick = (url: string) => {
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      window.open(url, "_blank");  // 使用 window.location.href 打开外部链接
+    } else {
+      router.push(url);  // 否则使用 Vue Router 的 push 方法导航
+    }
+  }
+  return {linkbuttons,comLinkData,comLinkClick}
+})
+
+// 博客列表接口
+export const blogContentStore = defineStore("blog", () => {
+  interface blogInterface {
     key: string,
     blogtitle: string,
     create_at: Date,
@@ -13,127 +92,112 @@ interface blogInterface {
     blogcontent: string,
     typename: string,
     labelnames: string
-}
-const bloglist = ref<blogInterface[]>([])
-
-export const useAuthStore = defineStore("auth", () => {
-    const tokenValue = ref("")
-    function setToken(token: string) {
-        tokenValue.value = token
-    }
-    function removeToken() {
-        localStorage.removeItem('token');
+  }
+  const bloglist = ref<blogInterface[]>([])
+  async function blogList() {
+    try {
+      const response = await get("/blogs/list");
+      if (response) {
+        bloglist.value = response.data.data.map((items: any, index: any) => ({
+          key: (index + 1).toString(),
+          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.readminite,
+          wordcount: items.wordcount,
+          img: items.img,
+          blogcontent: items.blogcontent,
+          typename: items.typename,
+          labelnames: items.labelnames
+        }))
+      } else {
+        console.log("bloglist is not exits")
+      }
+    } catch (error) {
+      console.log("bloglist is error")
     }
-    return { setToken, removeToken }
+
+  }
+  return { blogList, bloglist }
 })
 
+// 博客查询接口
+export const blogSearchStore = defineStore('blogsearch', () => {
+  const searchValue = reactive({
+    blogtitle: '',
+    typename: '',
+    start_date: '',
+    end_date: ''
+  });
 
-// 博客列表接口
-export const blogContentStore = defineStore("blog", () => {
-    async function blogList() {
-        try {
-            const response = await get("/blogs/list");
-            if (response) {
-                bloglist.value = response.data.data.map((items: any, index: any) => ({
-                    key: (index + 1).toString(),
-                    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.readminite,
-                    wordcount: items.wordcount,
-                    img: items.img,
-                    blogcontent: items.blogcontent,
-                    typename: items.typename,
-                    labelnames: items.labelnames
-                }))
-            } else {
-                console.log("bloglist is not exits")
-            }
-        } catch (error) {
-            console.log("bloglist is error")
-        }
 
+
+  const onChange = (date: string, dateString: string[]) => {
+    if (date && dateString.length === 2) {
+      searchValue.start_date = dateString[0];
+      searchValue.end_date = dateString[1];
+    } else {
+      searchValue.start_date = '';
+      searchValue.end_date = '';
     }
-    return { blogList, bloglist }
-})
+    console.log(dateString[0]);
+  };
 
-// 博客查询接口
-export const blogSearchStore = defineStore('blogsearch', () => {
-    const searchValue = reactive({
-      blogtitle: '',
-      typename: '',
-      start_date: '',
-      end_date: ''
-    });
-  
-   
-  
-    const onChange = (date: string, dateString: string[]) => {
-      if (date && dateString.length === 2) {
-        searchValue.start_date = dateString[0];
-        searchValue.end_date = dateString[1];
+  const blogSearch = async () => {
+    try {
+      const response = await get("/blogs/list/search", {
+        blogtitle: searchValue.blogtitle,
+        typename: searchValue.typename,
+        start_date: searchValue.start_date,
+        end_date: searchValue.end_date
+      });
+      if (response && response.data) {
+        bloglist.value = response.data.data.map((items: any, index: any) => ({
+          key: (index + 1).toString(),
+          blogtitle: items.blogtitle,
+          typename: items.typename,
+          blogcontent: items.blogcontent,
+          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'),
+          descr: items.descr
+        }));
+        console.log(response)
       } else {
-        searchValue.start_date = '';
-        searchValue.end_date = '';
-      }
-      console.log(dateString[0]);
-    };
-  
-    const blogSearch = async () => {
-      try {
-        const response = await get("/blogs/list/search", {
-          blogtitle: searchValue.blogtitle,
-          typename: searchValue.typename,
-          start_date: searchValue.start_date,
-          end_date: searchValue.end_date
-        });
-        if (response && response.data) {
-          bloglist.value = response.data.data.map((items: any, index: any) => ({
-            key: (index + 1).toString(),
-            blogtitle: items.blogtitle,
-            typename: items.typename,
-            blogcontent: items.blogcontent,
-            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'),
-            descr: items.descr
-          }));
-          console.log(response)
-        } else {
-          console.log("request has no data");
-        }
-      } catch (error) {
-        console.error("request is exception", error);
+        console.log("request has no data");
       }
-    };
-    return { searchValue, onChange, blogSearch };
-  });
+    } catch (error) {
+      console.error("request is exception", error);
+    }
+  };
+  return { searchValue, onChange, blogSearch };
+});
 
 // 语录列表接口
-// export const classticContentStore = defineStore("classtic", () => {
-//     interface classticInterface {
-//         key: string,
-//         header: string,
-//         text: string,
-//         descr: string
-//     }
-//     const classticlist = ref<classticInterface[]>([])
-//     async function classticList() {
-//         try {
-//             const response = await get("/classtics/list")
-//             if (response) {
-//                 classticlist.value = response.data.data.map((items: any, index: any) => ({
-//                     key: (index + 1).toString(),
-//                     header: items.header,
-//                     text: items.text,
-//                     descr: items.descr
-//                 }))
-//             } else {
-//                 console.log("classtic is not exit")
-//             }
-//         } catch (error) {
-//             console.log("classtic is error")
-//         }
-//     }
-//     return { classticList, classticlist }
-// })
+export const classticContentStore = defineStore("classtic", () => {
+  interface classticInterface {
+    key: string,
+    header: string,
+    text: string,
+    descr: string
+  }
+  const classticlist = ref<classticInterface[]>([])
+  async function classticList() {
+    try {
+      const response = await get("/classtics/list")
+      if (response) {
+        classticlist.value = response.data.data.map((items: any, index: any) => ({
+          key: (index + 1).toString(),
+          header: items.header,
+          text: items.text,
+          descr: items.descr
+        }))
+      } else {
+        console.log("classtic is not exit")
+      }
+    } catch (error) {
+      console.log("classtic is error")
+    }
+  }
+  return { classticList, classticlist }
+})
diff --git a/src/views/admin/blogmange/BlogManageView.vue b/src/views/admin/blogmange/BlogManageView.vue
index 7e60201..f6f2d5e 100644
--- a/src/views/admin/blogmange/BlogManageView.vue
+++ b/src/views/admin/blogmange/BlogManageView.vue
@@ -47,36 +47,6 @@ dayjs.locale('zh-cn');
 const blogContent=blogContentStore()
 const blogSearch=blogSearchStore()
 const router = useRouter()
-// const searchList = reactive<{ blogtitle: string, typename: string, start_date: string, end_date: string }>({
-//     blogtitle: '',
-//     typename: '',
-//     start_date: '',
-//     end_date: ''
-// })
-// interface BlogList {
-//     key: string;
-//     id: number;
-//     blogtitle: string;
-//     typename: string;
-//     blogcontent: string;
-//     create_at: string;
-//     update_at: string;
-//     descr: string
-// }
-
-// const dataSource = ref<BlogList[]>([]);;
-
-// 拆分日期为两个时间：开始时间和结束时间
-// const onChange = (date: string, dateString: string[]) => {
-//     if (date && dateString.length === 2) {
-//         searchList.start_date = (dateString[0]);
-//         searchList.end_date = (dateString[1]);
-//     } else {
-//         searchList.start_date = '';
-//         searchList.end_date = '';
-//     }
-//     console.log(dateString[0])
-// };
 const open = ref<boolean>(false);
 const toDelete = reactive<{ key: string, id: number }>({
     key: '',
@@ -84,7 +54,6 @@ const toDelete = reactive<{ key: string, id: number }>({
 });
 const showModal = (key: string, id: number) => {
     open.value = true;
-    // 将需要删除的数据项的 key 和 id 存储到 ref 中，以便确认后使用
     toDelete.key = key;
     toDelete.id = id;
 };
@@ -96,44 +65,9 @@ const blogAdd = function () {
 
 // 获取列表
 onMounted(async () => {
-    // get("/blogs/list").then(response => {
-    //     dataSource.value = (response as any).data.data.map((items: any, index: any) => ({
-    //         key: (index + 1).toString(),
-    //         id: items.id,
-    //         blogtitle: items.blogtitle,
-    //         typename: items.typename,
-    //         blogcontent: items.blogcontent,
-    //         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'), // 格式化更新时间
-    //         descr: items.descr
-    //     }))
-    // })
     blogContent.blogList()
 });
 
-// 查询事件
-// const blogSearch = () => {
-//     get("/blogs/list/search", {
-//         blogtitle: searchList.blogtitle,
-//         typename: searchList.typename,
-//         start_date: searchList.start_date,
-//         end_date: searchList.end_date,
-//     })
-//         .then(response => {
-//             dataSource.value = response.data.data.map((items: any, index: any) => ({
-//                 key: (index + 1).toString(),
-//                 blogtitle: items.blogtitle,
-//                 typename: items.typename,
-//                 blogcontent: items.blogcontent,
-//                 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'),
-//                 descr: items.descr
-//             }));
-//         })
-//         .catch(error => {
-//             console.error('There was an error seraching the blog!', error);
-//         });
-// };
 
 // 博客删除
 // const ackDelete = async (record:{key:string,id:number}) => {