add new

src/api/admin.ts

@@ -15,6 +15,7 @@ export interface blogInterface {
 
 }
 
+// 日记管理
 export interface diaryInterface{
   id?: number,
   key: string,
@@ -37,6 +38,7 @@ export interface classticInterface {
   text: string,
   descr: string
 }
+// 标签管理
 export interface labelInterface {
   id?: number,
   labelname: string,
@@ -50,12 +52,15 @@ export interface classticFormInterface {
   descr: string
 }
 
+// 类型管理
 export interface typeInterface {
   key: string,
   id?: number,
   typename: string,
   descr: string
 }
+
+// 链接管理
 export interface comLinkInterface {
   id: number,
   linktext: string,

src/api/index.ts

@@ -1,19 +1,19 @@
 // 公共api
-import type { blogInterface,diaryInterface } from "./admin";
 export interface indexInterface {
-    modaOpen: boolean,
-    title: string,
-  }
+  modaOpen: boolean,
+  title: string,
+}
+// 前台首页
 export interface homePageInterface {
-    id: number;
-    blogtitle?: string; // 博客标题，可选字段
-    blogcontent?: string; // 博客内容，可选字段
-    diarytitle?: string; // 日记标题，可选字段
-    diarycontent?: string; // 日记内容，可选字段
-    imglink: string; // 图片链接
-    typename: string; // 类型名称
-    create_at: string; // 创建时间
-    update_at?: string; // 更新时间，可选字段
-    wordcount?: number; // 字数统计，可选字段
-    labelnames?: string[]; // 标签名称数组，可选字段
+  id: number;
+  blogtitle?: string; // 博客标题，可选字段
+  blogcontent?: string; // 博客内容，可选字段
+  diarytitle?: string; // 日记标题，可选字段
+  diarycontent?: string; // 日记内容，可选字段
+  imglink: string; // 图片链接
+  typename: string; // 类型名称
+  create_at: string; // 创建时间
+  update_at?: string; // 更新时间，可选字段
+  wordcount?: number; // 字数统计，可选字段
+  labelnames?: string[]; // 标签名称数组，可选字段
 }

src/components/blogs/ComLink.vue

@@ -0,0 +1,61 @@
+<template>
+    <a-card hoverable title="常用链接">
+        <div class="button-group">
+            <a-button type="dashed" v-for="comlink in comlinklist" :key="comlink.id"
+                @click="comLinkClick(comlink.linkurl)">{{
+                    comlink.linktext
+                }}</a-button>
+        </div>
+    </a-card>
+</template>
+
+<script setup lang='ts'>
+import router from '@/router';
+import type { comLinkInterface } from '@/api/admin';
+import { ref, onMounted } from 'vue';
+import { get } from '@/tools/request';
+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 方法导航
+    }
+}
+const comlinklist = ref<comLinkInterface[]>([])
+const comLinkList = async () => {
+    try {
+        await get("/comlinks/list").then(response => {
+            if (response) {
+                comlinklist.value = response.data.data.map((item: any, index: any) => ({
+                    key: (index + 1).toString(),
+                    id: item.id,
+                    linktext: item.linktext,
+                    linkurl: item.linkurl,
+                    descr: item.descr
+                }));
+            } else {
+                console.log("the interface request data does not exist!")
+            }
+        })
+    } catch (error) {
+        console.error("Failed to fetch data", error);
+    }
+}
+onMounted(() => {
+    comLinkList()
+})
+</script>
+
+<style scoped>
+.button-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.button-group>* {
+    width: 40%;
+    margin: 12px;
+}
+
+</style>

src/components/blogs/HomePage.vue

@@ -28,7 +28,7 @@
         <!-- 主要内容区域 -->
         <div class="mainContainer" :style="mainCss">
             <div class="leftBar">
-                <a-card hoverable>
+                <!-- <a-card hoverable>
                     <template #cover>
                         <img alt="example" src="/src/assets/images/头像.jpg" />
                     </template>
@@ -51,15 +51,9 @@
                             </a-collapse-panel>
                         </a-collapse>
                     </div>
-                </a-card>
-                <a-card hoverable title="常用链接">
-                    <div class="button-group">
-                        <a-button type="dashed" v-for="comlink in comlinklist" :key="comlink.id"
-                            @click="comLinkClick(comlink.linkurl)">{{
-                                comlink.linktext
-                            }}</a-button>
-                    </div>
-                </a-card>
+                </a-card> -->
+                <LeftSiteInfo/>
+                <ComLink />
             </div>
             <RouterView />
             <div class="rightBar">
@@ -176,8 +170,10 @@ import { get } from "@/tools/request"
 import { createEcharts } from "@/hooks/intex"
 import { useRouter, useRoute } from 'vue-router';
 import iconComponents from "@/assets/index";
-import type { classticInterface, comLinkInterface, labelInterface } from '@/api/admin';
+import type { classticInterface, labelInterface } from '@/api/admin';
 import type { homePageInterface } from '@/api';
+import ComLink from './ComLink.vue';
+import LeftSiteInfo from "./LeftSiteInfo.vue"
 const router = useRouter()
 const route = useRoute()
 const author = ref("SunFree.")
@@ -315,65 +311,65 @@ const downScroll = () => {
  * 左侧栏
  */
 // 折叠面板
-const classticlist = ref<classticInterface[]>([])
-const classticList = async () => {
-    try {
-        await get("/classtics/list").then(response => {
-            if (response) {
-                classticlist.value = response.data.data.map((item: any, index: any) => ({
-                    key: (index + 1).toString(),
-                    header: item.header,
-                    text: item.text,
-                    descr: item.descr
-                }));
-            } else {
-                console.log("the interface request data does 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 方法导航
-    }
-}
-const comlinklist = ref<comLinkInterface[]>([])
-const comLinkList = async () => {
-    try {
-        await get("/comlinks/list").then(response => {
-            if (response) {
-                comlinklist.value = response.data.data.map((item: any, index: any) => ({
-                    key: (index + 1).toString(),
-                    id: item.id,
-                    linktext: item.linktext,
-                    linkurl: item.linkurl,
-                    descr: item.descr
-                }));
-            } else {
-                console.log("the interface request data does not exist!")
-            }
-        })
-    } catch (error) {
-        console.error("Failed to fetch data", error);
-    }
-}
-const activeKey = ref(['']);
-const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
-
-const buttons = ref([
-    { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
-    { icon: iconComponents.QQLined, url: '/qqcode' },
-    { icon: iconComponents.WechatLined, url: '/wechatcode' },
-    { icon: iconComponents.MusicLined, url: 'https://music.163.com/#/playlist?id=160266689' },
-    { icon: iconComponents.GitHubLined, url: 'https://gitee.com/c_panda' },
-]);
-const handleClick = (url: string) => {
-    window.open(url)
-}
+// const classticlist = ref<classticInterface[]>([])
+// const classticList = async () => {
+//     try {
+//         await get("/classtics/list").then(response => {
+//             if (response) {
+//                 classticlist.value = response.data.data.map((item: any, index: any) => ({
+//                     key: (index + 1).toString(),
+//                     header: item.header,
+//                     text: item.text,
+//                     descr: item.descr
+//                 }));
+//             } else {
+//                 console.log("the interface request data does 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 方法导航
+//     }
+// }
+// const comlinklist = ref<comLinkInterface[]>([])
+// const comLinkList = async () => {
+//     try {
+//         await get("/comlinks/list").then(response => {
+//             if (response) {
+//                 comlinklist.value = response.data.data.map((item: any, index: any) => ({
+//                     key: (index + 1).toString(),
+//                     id: item.id,
+//                     linktext: item.linktext,
+//                     linkurl: item.linkurl,
+//                     descr: item.descr
+//                 }));
+//             } else {
+//                 console.log("the interface request data does not exist!")
+//             }
+//         })
+//     } catch (error) {
+//         console.error("Failed to fetch data", error);
+//     }
+// }
+// const activeKey = ref(['']);
+// const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
+
+// const buttons = ref([
+//     { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
+//     { icon: iconComponents.QQLined, url: '/qqcode' },
+//     { icon: iconComponents.WechatLined, url: '/wechatcode' },
+//     { icon: iconComponents.MusicLined, url: 'https://music.163.com/#/playlist?id=160266689' },
+//     { icon: iconComponents.GitHubLined, url: 'https://gitee.com/c_panda' },
+// ]);
+// const handleClick = (url: string) => {
+//     window.open(url)
+// }
 
 /**
  * 右侧栏
@@ -580,11 +576,11 @@ const labelList = async () => {
     }
 }
 onMounted(() => {
-    classticList()
+    // classticList()
     blogList()
     labelList()
     diaryList()
-    comLinkList()
+    // comLinkList()
     statisticList()
     updateCurrentDate();
     homePageList()
@@ -789,18 +785,6 @@ watch(
     justify-content: space-between;
 }
 
-.leftBar>:nth-child(2) .button-group {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.leftBar>:nth-child(2) .button-group>* {
-    width: 40%;
-    margin: 12px;
-}
-
-
 .rightBar {
     width: 15%;
 }
@@ -809,10 +793,11 @@ watch(
     margin-bottom: 24px;
 }
 
-.rightBar .article-text{
+.rightBar .article-text {
     margin: 12px 0;
 }
-.rightBar .article-text span{
+
+.rightBar .article-text span {
     margin-right: 12px;
     font-family: "Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif";
 }

src/components/blogs/LeftSiteInfo.vue

@@ -0,0 +1,91 @@
+<template>
+    <a-card hoverable>
+        <template #cover>
+            <img alt="example" src="/src/assets/images/头像.jpg" />
+        </template>
+        <h1>sunfree</h1>
+        <div class="cardText"></div>
+        <div class="button-group">
+            <a-button v-for="(button, index) in buttons" :key="index" shape="circle" size="large"
+                @click="handleClick(button.url)">
+                <component :is="button.icon" />
+            </a-button>
+        </div>
+        <div class="fold-panel">
+            <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end">
+                <template #expandIcon="{ isActive }">
+                    <caret-right-outlined :rotate="isActive ? 90 : 0" />
+                </template>
+                <a-collapse-panel v-for="classtic in classticlist" :key=classtic.id :header=classtic.header
+                    :style="customStyle">
+                    <p>{{ classtic.text }}</p>
+                </a-collapse-panel>
+            </a-collapse>
+        </div>
+    </a-card>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import iconComponents from "@/assets/index";
+import { get } from '@/tools/request';
+import type { classticInterface } from '@/api/admin';
+import { CaretRightOutlined } from '@ant-design/icons-vue';
+const buttons = ref([
+    { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
+    { icon: iconComponents.QQLined, url: '/qqcode' },
+    { icon: iconComponents.WechatLined, url: '/wechatcode' },
+    { icon: iconComponents.MusicLined, url: 'https://music.163.com/#/playlist?id=160266689' },
+    { icon: iconComponents.GitHubLined, url: 'https://gitee.com/c_panda' },
+]);
+const classticlist = ref<classticInterface[]>([])
+const classticList = async () => {
+    try {
+        await get("/classtics/list").then(response => {
+            if (response) {
+                classticlist.value = response.data.data.map((item: any, index: any) => ({
+                    key: (index + 1).toString(),
+                    header: item.header,
+                    text: item.text,
+                    descr: item.descr
+                }));
+            } else {
+                console.log("the interface request data does not exist!")
+            }
+        })
+    } catch (error) {
+        console.error("Failed to fetch data", error);
+    }
+}
+const activeKey = ref(['']);
+const handleClick = (url: string) => {
+    window.open(url)
+}
+const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
+onMounted(() => {
+    classticList()
+})
+</script>
+
+<style scoped>
+img {
+    /* 图片自适应容器并保持宽高比例 */
+    aspect-ratio: 1/1;
+}
+
+h1 {
+    text-align: center;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.cardText {
+    min-height: 60px;
+    text-align: center;
+}
+
+.button-group {
+    display: flex;
+    margin: 0 12px 24px 12px;
+    justify-content: space-between;
+}
+</style>

src/views/blog/AboutMe.vue

@@ -1,14 +1,59 @@
 <template>
-    <div class="aboutme">这是关于我的内容</div>
+  <div id="blogDetail">
+    <a-card>
+      <v-md-preview :text="aboutMe"/>
+    </a-card>
+  </div>
+
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
+import { ref } from 'vue';
+const aboutMe = ref(`# 关于我
+
+<p style="text-align:center;">
+  <img src="https://via.placeholder.com/150" alt="头像" style="border-radius:50%;">
+</p>
+
+<p style="text-align:center; font-size:1.5em; font-weight:bold;">SunFree</p>
+
+## 简介
+
+大家好，我是SunFree，目前是一名软件工程师。热爱编程，喜欢学习新技术，并且在自动化测试方面都有丰富的经验。
+
+## 技能
 
+- **编程语言：** JavaScript, TypeScript, Python
+- **前端框架：** Vue.js
+- **后端框架：** FastAPI
+- **数据库：** MySQL
+
+## 爱好
+
+- **编程：** 我喜欢在空闲时间编写各种小工具和应用程序。
+- **音乐：** 我喜欢听音乐，尤其是古典音乐和流行音乐。
+- **旅行：** 我喜欢探索新的地方，体验不同的文化。
+
+## 联系我
+
+<p style="text-align:center;">
+  <a href="mailto:your-email@example.com" style="margin-right:15px;">
+    <img src="https://img.icons8.com/color/48/000000/email.png" alt="Email">
+  </a>
+  <a href="https://github.com/your-github" target="_blank" style="margin-right:15px;">
+    <img src="https://img.icons8.com/ios-glyphs/48/000000/github.png" alt="GitHub">
+  </a>
+  <a href="https://www.linkedin.com/in/your-linkedin" target="_blank">
+    <img src="https://img.icons8.com/color/48/000000/linkedin.png" alt="LinkedIn">
+  </a>
+</p>
+`);
 </script>
 
-<style>
-.aboutme {
-    width: 45%;
-    margin: 0 24px;
+
+<style scoped>
+#blogDetail {
+  width: 45%;
+  margin: 0 24px;
 }
 </style>

src/views/blog/AmountChartView.vue

@@ -66,7 +66,7 @@ const lastyear = reactive({
     thisyeardate: [],
     thisyeardata: []
 })
-const bardata=ref<any[]>([])
+const bardata = ref([])
 const piedata = ref([])
 const lineChartOptions = reactive<Record<Period, any>>({
     nighweek: {
@@ -232,13 +232,7 @@ const barChartOptions = {
         }
     },
     dataset: {
-        source: [
-            ['product', '2015', '2016', '2017'],
-            ['Matcha Latte', 43.3, 85.8, 93.7],
-            ['Milk Tea', 83.1, 73.4, 55.1],
-            ['Cheese Cocoa', 86.4, 65.2, 82.5],
-            ['Walnut Brownie', 72.4, 53.9, 39.1]
-        ]
+        source: bardata.value
     },
     xAxis: { type: 'category' },
     yAxis: {},
@@ -373,13 +367,13 @@ const updateLinesChartData = (disbursetype: any, disbursedate: any, disbursedata
     chartOptions.legend.data = disbursetype;
     chartOptions.xAxis.data = disbursedate;
     chartOptions.series = disbursedata;
-    console.log("disbursedata", disbursedata)
-    console.log("chartOptions", chartOptions)
 }
-
 const updatePieChartData = (pieData: any, chartOptions: any) => {
     chartOptions.series[0].data = pieData;
 }
+const updateBarChartData = (barData:any) => {
+    barChartOptions.dataset.source=barData;
+}
 const fetchLineAndUpdateChart = async (days: number, chartOptions: any) => {
     const response = await get("/disburses/list/specificdate", { days });
     const data = response.data.data;
@@ -392,8 +386,8 @@ const fetchLineAndUpdateChart = async (days: number, chartOptions: any) => {
 const fetchLinesAndUpdateChart = async (days: number, chartOptions: any) => {
     const now = new Date();
     let currentYear = now.getFullYear();
-    if (days==1) {
-        currentYear=currentYear-1
+    if (days == 1) {
+        currentYear = currentYear - 1
     }
     const months = Array.from({ length: 12 }, (_, i) => {
         const month = (i + 1).toString().padStart(2, '0');
@@ -411,7 +405,6 @@ const fetchLinesAndUpdateChart = async (days: number, chartOptions: any) => {
             data: item.data
         }
     })
-    console.log(`output->disbursedata`, disbursedata)
     updateLinesChartData(disbursetype, disbursedate, disbursedata, chartOptions)
     createEcharts(lineschart, chartOptions);
 }
@@ -422,7 +415,12 @@ const fetchPieAndUpdateChart = async (days: number, chartOptions: any) => {
     updatePieChartData(data, chartOptions);
     createEcharts(piechart, chartOptions);
 }
-
+const fetchBarAndUpdateChart = async () => {
+    const response = await get("/disburses/list/calendar");
+    const data = response.data.data;
+    updateBarChartData(data);
+    createEcharts(barchart, barChartOptions);
+}
 const getLineWeekList = () => fetchLineAndUpdateChart(7, lineChartOptions.nighweek);
 const getLineMonthList = () => fetchLineAndUpdateChart(30, lineChartOptions.nighmonth);
 const getLineYearList = () => fetchLineAndUpdateChart(365, lineChartOptions.nighyear);
@@ -440,6 +438,7 @@ onMounted(() => {
     getPieYearList()
     getLinesThisYearList()
     getLinesLastYearList()
+    fetchBarAndUpdateChart()
     createEcharts(lineschart, linesChartOptions.thisyear)
     createEcharts(linechart, lineChartOptions.nighweek);
     createEcharts(piechart, pieChartOptions.nighweek);