diff --git a/src/api/admin.ts b/src/api/admin.ts index 6cfdd84..7068339 100644 --- a/src/api/admin.ts +++ b/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, diff --git a/src/api/index.ts b/src/api/index.ts index 8014654..b9b5856 100644 --- a/src/api/index.ts +++ b/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[]; // 标签名称数组,可选字段 } diff --git a/src/assets/front/Testimonia-3zp8X.ttf b/src/assets/front/Testimonia-3zp8X.ttf deleted file mode 100644 index 704efda..0000000 Binary files a/src/assets/front/Testimonia-3zp8X.ttf and /dev/null differ diff --git a/src/components/blogs/ComLink.vue b/src/components/blogs/ComLink.vue new file mode 100644 index 0000000..af4c6e7 --- /dev/null +++ b/src/components/blogs/ComLink.vue @@ -0,0 +1,61 @@ + + + + + \ No newline at end of file diff --git a/src/components/blogs/HomePage.vue b/src/components/blogs/HomePage.vue index 2767cf3..45b6c92 100644 --- a/src/components/blogs/HomePage.vue +++ b/src/components/blogs/HomePage.vue @@ -28,7 +28,7 @@
- + + +
@@ -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([]) -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([]) -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([]) +// 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([]) +// 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"; } diff --git a/src/components/blogs/LeftSiteInfo.vue b/src/components/blogs/LeftSiteInfo.vue new file mode 100644 index 0000000..b91732e --- /dev/null +++ b/src/components/blogs/LeftSiteInfo.vue @@ -0,0 +1,91 @@ + + + + + \ No newline at end of file diff --git a/src/views/blog/AboutMe.vue b/src/views/blog/AboutMe.vue index eae42ff..280693f 100644 --- a/src/views/blog/AboutMe.vue +++ b/src/views/blog/AboutMe.vue @@ -1,14 +1,59 @@ - - \ No newline at end of file diff --git a/src/views/blog/AmountChartView.vue b/src/views/blog/AmountChartView.vue index 0d4d752..ec3a0aa 100644 --- a/src/views/blog/AmountChartView.vue +++ b/src/views/blog/AmountChartView.vue @@ -66,7 +66,7 @@ const lastyear = reactive({ thisyeardate: [], thisyeardata: [] }) -const bardata=ref([]) +const bardata = ref([]) const piedata = ref([]) const lineChartOptions = reactive>({ 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);