|
|
|
@ -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 { |
|
|
|
|
