caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(formatting): apply Prettier code formatting

Browse Source
This commit is contained in:
神奇のDz 2023-08-23 13:38:17 +08:00
parent 8d23deeb40
commit 981320feb2
28 changed files with 451 additions and 592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
index.html
View File

@ -1,40 +1,39 @@
<!DOCTYPE html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="%VITE_SITE_LOGO%" />
<link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" />
<link rel="bookmark" href="%VITE_SITE_APPLE_LOGO%" />
<link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
<meta name="description" content="%VITE_SITE_DES%" />
<meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
<meta name="author" content="%VITE_SITE_ANTHOR%" />
<meta name="theme-color" content="#424242" />
<title>%VITE_SITE_NAME%</title>
<!-- HarmonyOS Sans -->
<!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
<link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
<!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
<!-- IE Out -->
<script>
if (/*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
window.location.href =
'https://support.dmeng.net/upgrade-your-browser.html?referrer=' +
encodeURIComponent(window.location.href);
</script>
</head>
<head> <body>
<meta charset="UTF-8" /> <!-- 主体内容 -->
<meta http-equiv="Access-Control-Allow-Origin" content="*"> <div id="app"></div>
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> --> <!-- noscript -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <noscript>
<link rel="icon" href="%VITE_SITE_LOGO%"> <div style="text-align: center">请开启 JavaScript</div>
<link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" /> </noscript>
<link rel="bookmark" href="%VITE_SITE_APPLE_LOGO%" /> <script type="module" src="/src/main.js"></script>
<link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" /> </body>
<meta name="description" content="%VITE_SITE_DES%" /> </html>
<meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
<meta name="author" content="%VITE_SITE_ANTHOR%" />
<meta name="theme-color" content="#424242" />
<title>%VITE_SITE_NAME%</title>
<!-- HarmonyOS Sans -->
<!-- 本站 CDN 已开启防盗链，非本站域名不可访问，请更改链接为下方内容，否则自定义字体将失效 -->
<link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
<!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
<!-- IE Out -->
<script>
if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
window.location.href =
"https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href)
</script>
</head>
<body>
<!-- 主体内容 -->
<div id="app"></div>
<!-- noscript -->
<noscript>
<div style="text-align: center">请开启 JavaScript</div>
</noscript>
<script type="module" src="/src/main.js"></script>
</body>
</html>

69
src/App.vue
View File

@ -12,20 +12,12 @@
<MainRight v-show="!store.boxOpenState" /> <MainRight v-show="!store.boxOpenState" />
<Box v-show="store.boxOpenState" /> <Box v-show="store.boxOpenState" />
</section> </section>
<section <section class="more" v-show="store.setOpenState" @click="store.setOpenState = false">
class="more"
v-show="store.setOpenState"
@click="store.setOpenState = false"
>
<MoreSet /> <MoreSet />
</section> </section>
</div> </div>
<!-- 移动端菜单按钮 --> <!-- 移动端菜单按钮 -->
<Icon <Icon class="menu" size="24" @click="store.mobileOpenState = !store.mobileOpenState">
class="menu"
size="24"
@click="store.mobileOpenState = !store.mobileOpenState"
>
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" /> <component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
</Icon> </Icon>
<!-- 页脚 --> <!-- 页脚 -->
@ -36,19 +28,19 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup>
import { helloInit, checkDays } from "@/utils/getTime.js"; import { helloInit, checkDays } from '@/utils/getTime.js';
import { HamburgerButton, CloseSmall } from "@icon-park/vue-next"; import { HamburgerButton, CloseSmall } from '@icon-park/vue-next';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import { Icon } from "@vicons/utils"; import { Icon } from '@vicons/utils';
import Loading from "@/components/Loading.vue"; import Loading from '@/components/Loading.vue';
import MainLeft from "@/views/Main/Left.vue"; import MainLeft from '@/views/Main/Left.vue';
import MainRight from "@/views/Main/Right.vue"; import MainRight from '@/views/Main/Right.vue';
import Background from "@/components/Background.vue"; import Background from '@/components/Background.vue';
import Footer from "@/components/Footer.vue"; import Footer from '@/components/Footer.vue';
import Box from "@/views/Box/index.vue"; import Box from '@/views/Box/index.vue';
import MoreSet from "@/views/MoreSet/index.vue"; import MoreSet from '@/views/MoreSet/index.vue';
import cursorInit from "@/utils/cursor.js"; import cursorInit from '@/utils/cursor.js';
import config from "@/../package.json"; import config from '@/../package.json';
const store = mainStore(); const store = mainStore();
@ -74,7 +66,7 @@ watch(
if (value < 990) { if (value < 990) {
store.boxOpenState = false; store.boxOpenState = false;
} }
} },
); );
onMounted(() => { onMounted(() => {
@ -84,7 +76,7 @@ onMounted(() => {
// 屏蔽右键 // 屏蔽右键
document.oncontextmenu = () => { document.oncontextmenu = () => {
ElMessage({ ElMessage({
message: "为了浏览体验，本站禁用右键", message: '为了浏览体验，本站禁用右键',
grouping: true, grouping: true,
duration: 2000, duration: 2000,
}); });
@ -92,11 +84,11 @@ onMounted(() => {
}; };
// 鼠标中键事件 // 鼠标中键事件
window.addEventListener("mousedown", (event) => { window.addEventListener('mousedown', (event) => {
if (event.button == 1) { if (event.button == 1) {
store.backgroundShow = !store.backgroundShow; store.backgroundShow = !store.backgroundShow;
ElMessage({ ElMessage({
message: `已${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`, message: `已${store.backgroundShow ? '开启' : '退出'}壁纸展示状态`,
grouping: true, grouping: true,
}); });
} }
@ -104,14 +96,13 @@ onMounted(() => {
// 监听当前页面宽度 // 监听当前页面宽度
getWidth(); getWidth();
window.addEventListener("resize", getWidth); window.addEventListener('resize', getWidth);
// 控制台输出 // 控制台输出
const styleTitle1 = const styleTitle1 = 'font-size: 20px;font-weight: 600;color: rgb(244,167,89);';
"font-size: 20px;font-weight: 600;color: rgb(244,167,89);"; const styleTitle2 = 'font-size:12px;color: rgb(244,167,89);';
const styleTitle2 = "font-size:12px;color: rgb(244,167,89);"; const styleContent = 'color: rgb(30,152,255);';
const styleContent = "color: rgb(30,152,255);"; const title1 = '無名の主页';
const title1 = "無名の主页";
const title2 = ` const title2 = `
_____ __ __ _______ ____ __ _____ __ __ _______ ____ __
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / / |_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
@ -120,16 +111,11 @@ onMounted(() => {
_| |_| | | |____) | | | | | _| |_| | | |____) | | | | |
|_____|_| |_|_____/ |_| |_|`; |_____|_| |_|_____/ |_| |_|`;
const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`; const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
console.info( console.info(`%c${title1} %c${title2} %c${content}`, styleTitle1, styleTitle2, styleContent);
`%c${title1} %c${title2} %c${content}`,
styleTitle1,
styleTitle2,
styleContent
);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("resize", getWidth); window.removeEventListener('resize', getWidth);
}); });
</script> </script>
@ -142,8 +128,7 @@ onBeforeUnmount(() => {
height: 100%; height: 100%;
transform: scale(1.2); transform: scale(1.2);
transition: transform 0.3s; transition: transform 0.3s;
animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
forwards;
animation-delay: 0.5s; animation-delay: 0.5s;
.container { .container {
width: 100%; width: 100%;

20
src/api/index.js
View File

@ -1,5 +1,5 @@
// import axios from "axios"; // import axios from "axios";
import fetchJsonp from "fetch-jsonp"; import fetchJsonp from 'fetch-jsonp';
/** /**
* 音乐播放器 * 音乐播放器
@ -8,19 +8,17 @@ import fetchJsonp from "fetch-jsonp";
// 获取音乐播放列表 // 获取音乐播放列表
export const getPlayerList = async (server, type, id) => { export const getPlayerList = async (server, type, id) => {
const res = await fetch( const res = await fetch(
`${import.meta.env.VITE_SONG_API}?server=${server}&type=${type}&id=${id}` `${import.meta.env.VITE_SONG_API}?server=${server}&type=${type}&id=${id}`,
); );
const data = await res.json(); const data = await res.json();
if (data[0].url.startsWith("@")) { if (data[0].url.startsWith('@')) {
const [handle, jsonpCallback, jsonpCallbackFunction, url] = data[0].url const [handle, jsonpCallback, jsonpCallbackFunction, url] = data[0].url.split('@').slice(1);
.split("@")
.slice(1);
const jsonpData = await fetchJsonp(url).then((res) => res.json()); const jsonpData = await fetchJsonp(url).then((res) => res.json());
const domain = ( const domain = (
jsonpData.req_0.data.sip.find((i) => !i.startsWith("http://ws")) || jsonpData.req_0.data.sip.find((i) => !i.startsWith('http://ws')) ||
jsonpData.req_0.data.sip[0] jsonpData.req_0.data.sip[0]
).replace("http://", "https://"); ).replace('http://', 'https://');
return data.map((v, i) => ({ return data.map((v, i) => ({
title: v.name || v.title, title: v.name || v.title,
@ -46,7 +44,7 @@ export const getPlayerList = async (server, type, id) => {
// 获取一言数据 // 获取一言数据
export const getHitokoto = async () => { export const getHitokoto = async () => {
const res = await fetch("https://v1.hitokoto.cn"); const res = await fetch('https://v1.hitokoto.cn');
return await res.json(); return await res.json();
}; };
@ -63,7 +61,7 @@ export const getAdcode = async (key) => {
// 获取高德地理天气信息 // 获取高德地理天气信息
export const getWeather = async (key, city) => { export const getWeather = async (key, city) => {
const res = await fetch( const res = await fetch(
`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}` `https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`,
); );
return await res.json(); return await res.json();
}; };
@ -71,6 +69,6 @@ export const getWeather = async (key, city) => {
// 获取教书先生天气 API // 获取教书先生天气 API
// https://api.oioweb.cn/doc/weather/GetWeather // https://api.oioweb.cn/doc/weather/GetWeather
export const getOtherWeather = async () => { export const getOtherWeather = async () => {
const res = await fetch("https://api.oioweb.cn/api/weather/GetWeather"); const res = await fetch('https://api.oioweb.cn/api/weather/GetWeather');
return await res.json(); return await res.json();
}; };

21
src/assets/socialLinks.json
View File

@ -1,31 +1,38 @@
[{ [
{
"name": "Github", "name": "Github",
"icon": "/images/icon/github.png", "icon": "/images/icon/github.png",
"tip": "去 Github 看看", "tip": "去 Github 看看",
"url": "https://github.com/imsyy" "url": "https://github.com/imsyy"
}, { },
{
"name": "BiliBili", "name": "BiliBili",
"icon": "/images/icon/bilibili.png", "icon": "/images/icon/bilibili.png",
"tip": "(゜-゜)つロ 干杯 ~", "tip": "(゜-゜)つロ 干杯 ~",
"url": "https://space.bilibili.com/98544142" "url": "https://space.bilibili.com/98544142"
}, { },
{
"name": "QQ", "name": "QQ",
"icon": "/images/icon/qq.png", "icon": "/images/icon/qq.png",
"tip": "有什么事吗", "tip": "有什么事吗",
"url": "https://res.abeim.cn/api/qq/?qq=1539250352" "url": "https://res.abeim.cn/api/qq/?qq=1539250352"
}, { },
{
"name": "Email", "name": "Email",
"icon": "/images/icon/email.png", "icon": "/images/icon/email.png",
"tip": "来封 Email ~", "tip": "来封 Email ~",
"url": "mailto:one@imsyy.top" "url": "mailto:one@imsyy.top"
}, { },
{
"name": "Twitter", "name": "Twitter",
"icon": "/images/icon/twitter.png", "icon": "/images/icon/twitter.png",
"tip": "你懂的 ~", "tip": "你懂的 ~",
"url": "https://twitter.com/iimmsyy" "url": "https://twitter.com/iimmsyy"
}, { },
{
"name": "Telegram", "name": "Telegram",
"icon": "/images/icon/telegram.png", "icon": "/images/icon/telegram.png",
"tip": "你懂的 ~", "tip": "你懂的 ~",
"url": "https://t.me/bottom_user" "url": "https://t.me/bottom_user"
}] }
]

42
src/components/Background.vue
View File

@ -24,13 +24,13 @@
</template> </template>
<script setup> <script setup>
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import { Error } from "@icon-park/vue-next"; import { Error } from '@icon-park/vue-next';
const store = mainStore(); const store = mainStore();
const bgUrl = ref(null); const bgUrl = ref(null);
const imgTimeout = ref(null); const imgTimeout = ref(null);
const emit = defineEmits(["loadComplete"]); const emit = defineEmits(['loadComplete']);
// 壁纸随机数 // 壁纸随机数
// 请依据文件夹内的图片个数修改 Math.random() 后面的第一个数字 // 请依据文件夹内的图片个数修改 Math.random() 后面的第一个数字
@ -41,36 +41,39 @@ const changeBg = (type) => {
if (type == 0) { if (type == 0) {
bgUrl.value = `/images/background${bgRandom}.jpg`; bgUrl.value = `/images/background${bgRandom}.jpg`;
} else if (type == 1) { } else if (type == 1) {
bgUrl.value = "https://api.dujin.org/bing/1920.php"; bgUrl.value = 'https://api.dujin.org/bing/1920.php';
} else if (type == 2) { } else if (type == 2) {
bgUrl.value = "https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images"; bgUrl.value = 'https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images';
} else if (type == 3) { } else if (type == 3) {
bgUrl.value = "https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images"; bgUrl.value = 'https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images';
} }
}; };
// 图片加载完成 // 图片加载完成
const imgLoadComplete = () => { const imgLoadComplete = () => {
imgTimeout.value = setTimeout(() => { imgTimeout.value = setTimeout(
store.setImgLoadStatus(true); () => {
}, Math.floor(Math.random() * (600 - 300 + 1)) + 300); store.setImgLoadStatus(true);
},
Math.floor(Math.random() * (600 - 300 + 1)) + 300,
);
}; };
// 图片动画完成 // 图片动画完成
const imgAnimationEnd = () => { const imgAnimationEnd = () => {
console.log("壁纸加载且动画完成"); console.log('壁纸加载且动画完成');
// 加载完成事件 // 加载完成事件
emit("loadComplete"); emit('loadComplete');
}; };
// 图片显示失败 // 图片显示失败
const imgLoadError = () => { const imgLoadError = () => {
console.error("壁纸加载失败：", bgUrl.value); console.error('壁纸加载失败：', bgUrl.value);
ElMessage({ ElMessage({
message: "壁纸加载失败，已临时切换回默认", message: '壁纸加载失败，已临时切换回默认',
icon: h(Error, { icon: h(Error, {
theme: "filled", theme: 'filled',
fill: "#efefef", fill: '#efefef',
}), }),
}); });
bgUrl.value = `/images/background${bgRandom}.jpg`; bgUrl.value = `/images/background${bgRandom}.jpg`;
@ -105,7 +108,9 @@ onBeforeUnmount(() => {
object-fit: cover; object-fit: cover;
backface-visibility: hidden; backface-visibility: hidden;
filter: blur(20px) brightness(0.3); filter: blur(20px) brightness(0.3);
transition: filter 0.3s, transform 0.3s; transition:
filter 0.3s,
transform 0.3s;
animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
animation-delay: 0.45s; animation-delay: 0.45s;
} }
@ -116,10 +121,7 @@ onBeforeUnmount(() => {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: radial-gradient( background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%),
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.5) 100%
),
radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%); radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
transition: 1.5s; transition: 1.5s;

6
src/components/Footer.vue
View File

@ -38,9 +38,9 @@
</template> </template>
<script setup> <script setup>
import { MusicOne } from "@icon-park/vue-next"; import { MusicOne } from '@icon-park/vue-next';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import config from "@/../package.json"; import config from '@/../package.json';
const store = mainStore(); const store = mainStore();
const fullYear = new Date().getFullYear(); const fullYear = new Date().getFullYear();

24
src/components/Hitokoto.vue
View File

@ -26,10 +26,10 @@
</template> </template>
<script setup> <script setup>
import { MusicMenu, Error } from "@icon-park/vue-next"; import { MusicMenu, Error } from '@icon-park/vue-next';
import { getHitokoto } from "@/api"; import { getHitokoto } from '@/api';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import debounce from "@/utils/debounce.js"; import debounce from '@/utils/debounce.js';
const store = mainStore(); const store = mainStore();
@ -38,8 +38,8 @@ const openMusicShow = ref(false);
// 一言数据 // 一言数据
const hitokotoData = reactive({ const hitokotoData = reactive({
text: "这里应该显示一句话", text: '这里应该显示一句话',
from: "無名", from: '無名',
}); });
// 获取一言数据 // 获取一言数据
@ -51,10 +51,10 @@ const getHitokotoData = () => {
}) })
.catch(() => { .catch(() => {
ElMessage({ ElMessage({
message: "一言获取失败", message: '一言获取失败',
icon: h(Error, { icon: h(Error, {
theme: "filled", theme: 'filled',
fill: "#efefef", fill: '#efefef',
}), }),
}); });
}); });
@ -62,8 +62,8 @@ const getHitokotoData = () => {
// 更新一言数据 // 更新一言数据
const updateHitokoto = () => { const updateHitokoto = () => {
hitokotoData.text = "新的一言正在赶来的路上"; hitokotoData.text = '新的一言正在赶来的路上';
hitokotoData.from = "来源加载中"; hitokotoData.from = '来源加载中';
// 防抖 // 防抖
debounce(() => { debounce(() => {
getHitokotoData(); getHitokotoData();
@ -124,4 +124,4 @@ onMounted(() => {
} }
} }
} }
</style> </style>

31
src/components/Links.vue
View File

@ -41,24 +41,15 @@
</template> </template>
<script setup> <script setup>
import { Icon } from "@vicons/utils"; import { Icon } from '@vicons/utils';
// 可前往 https://www.xicons.org 自行挑选并在此处引入 // 可前往 https://www.xicons.org 自行挑选并在此处引入
import { import { Link, Blog, CompactDisc, Cloud, Compass, Book, Fire, LaptopCode } from '@vicons/fa'; // 注意使用正确的类别
Link, import { mainStore } from '@/store';
Blog, import { Swiper, SwiperSlide } from 'swiper/vue';
CompactDisc, import { Pagination, Mousewheel } from 'swiper';
Cloud, import siteLinks from '@/assets/siteLinks.json';
Compass, import 'swiper/scss';
Book, import 'swiper/scss/pagination';
Fire,
LaptopCode,
} from "@vicons/fa"; // 注意使用正确的类别
import { mainStore } from "@/store";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Mousewheel } from "swiper";
import siteLinks from "@/assets/siteLinks.json";
import "swiper/scss";
import "swiper/scss/pagination";
const store = mainStore(); const store = mainStore();
@ -85,10 +76,10 @@ const siteIcon = {
// 链接跳转 // 链接跳转
const jumpLink = (data) => { const jumpLink = (data) => {
if (data.name === "音乐" && store.musicClick) { if (data.name === '音乐' && store.musicClick) {
if (typeof $openList === "function") $openList(); if (typeof $openList === 'function') $openList();
} else { } else {
window.open(data.link, "_blank"); window.open(data.link, '_blank');
} }
}; };

10
src/components/Loading.vue
View File

@ -15,7 +15,7 @@
</template> </template>
<script setup> <script setup>
import { mainStore } from "@/store"; import { mainStore } from '@/store';
const store = mainStore(); const store = mainStore();
@ -52,7 +52,7 @@ const siteName = import.meta.env.VITE_SITE_NAME;
z-index: 2; z-index: 2;
&:before { &:before {
content: ""; content: '';
position: absolute; position: absolute;
top: 5px; top: 5px;
left: 5px; left: 5px;
@ -65,7 +65,7 @@ const siteName = import.meta.env.VITE_SITE_NAME;
} }
&:after { &:after {
content: ""; content: '';
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
@ -109,7 +109,9 @@ const siteName = import.meta.env.VITE_SITE_NAME;
&.loaded { &.loaded {
visibility: hidden; visibility: hidden;
transform: translateY(-100%); transform: translateY(-100%);
transition: transform 0.3s 1s ease-out, visibility 0.3s 1s ease-out; transition:
transform 0.3s 1s ease-out,
visibility 0.3s 1s ease-out;
.loader { .loader {
.loader-circle, .loader-circle,
.loader-text { .loader-text {

24
src/components/Message.vue
View File

@ -28,16 +28,16 @@
</template> </template>
<script setup> <script setup>
import { Icon } from "@vicons/utils"; import { Icon } from '@vicons/utils';
import { QuoteLeft, QuoteRight } from "@vicons/fa"; import { QuoteLeft, QuoteRight } from '@vicons/fa';
import { Error } from "@icon-park/vue-next"; import { Error } from '@icon-park/vue-next';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
const store = mainStore(); const store = mainStore();
// 主页站点logo // 主页站点logo
const siteLogo = import.meta.env.VITE_SITE_MAIN_LOGO; const siteLogo = import.meta.env.VITE_SITE_MAIN_LOGO;
// 站点链接 // 站点链接
const siteUrl = import.meta.env.VITE_SITE_URL.split("."); const siteUrl = import.meta.env.VITE_SITE_URL.split('.');
// 简介区域文字 // 简介区域文字
const descriptionText = reactive({ const descriptionText = reactive({
@ -51,11 +51,11 @@ const changeBox = () => {
store.boxOpenState = !store.boxOpenState; store.boxOpenState = !store.boxOpenState;
} else { } else {
ElMessage({ ElMessage({
message: "当前页面宽度不足以开启盒子", message: '当前页面宽度不足以开启盒子',
grouping: true, grouping: true,
icon: h(Error, { icon: h(Error, {
theme: "filled", theme: 'filled',
fill: "#efefef", fill: '#efefef',
}), }),
}); });
} }
@ -72,7 +72,7 @@ watch(
descriptionText.hello = import.meta.env.VITE_DESC_HELLO; descriptionText.hello = import.meta.env.VITE_DESC_HELLO;
descriptionText.text = import.meta.env.VITE_DESC_TEXT; descriptionText.text = import.meta.env.VITE_DESC_TEXT;
} }
} },
); );
</script> </script>
@ -92,7 +92,7 @@ watch(
height: 142px; height: 142px;
margin-left: 12px; margin-left: 12px;
transform: translateY(-8px); transform: translateY(-8px);
font-family: "Pacifico-Regular"; font-family: 'Pacifico-Regular';
.bg { .bg {
font-size: 5rem; font-size: 5rem;
@ -136,7 +136,7 @@ watch(
p { p {
&:nth-of-type(1) { &:nth-of-type(1) {
font-family: "Pacifico-Regular"; font-family: 'Pacifico-Regular';
} }
} }
} }
@ -174,4 +174,4 @@ watch(
} }
} }
} }
</style> </style>

65
src/components/Music.vue
View File

@ -11,49 +11,24 @@
<span @click="store.musicOpenState = false">回到一言</span> <span @click="store.musicOpenState = false">回到一言</span>
</div> </div>
<div class="control"> <div class="control">
<go-start <go-start theme="filled" size="30" fill="#efefef" @click="changeMusicIndex(0)" />
theme="filled"
size="30"
fill="#efefef"
@click="changeMusicIndex(0)"
/>
<div class="state" @click="changePlayState"> <div class="state" @click="changePlayState">
<play-one <play-one theme="filled" size="50" fill="#efefef" v-show="!store.playerState" />
theme="filled" <pause theme="filled" size="50" fill="#efefef" v-show="store.playerState" />
size="50"
fill="#efefef"
v-show="!store.playerState"
/>
<pause
theme="filled"
size="50"
fill="#efefef"
v-show="store.playerState"
/>
</div> </div>
<go-end <go-end theme="filled" size="30" fill="#efefef" @click="changeMusicIndex(1)" />
theme="filled"
size="30"
fill="#efefef"
@click="changeMusicIndex(1)"
/>
</div> </div>
<div class="menu"> <div class="menu">
<div class="name" v-show="!volumeShow"> <div class="name" v-show="!volumeShow">
<span>{{ <span>{{
store.getPlayerData.name store.getPlayerData.name
? store.getPlayerData.name + " - " + store.getPlayerData.artist ? store.getPlayerData.name + ' - ' + store.getPlayerData.artist
: "未播放音乐" : '未播放音乐'
}}</span> }}</span>
</div> </div>
<div class="volume" v-show="volumeShow"> <div class="volume" v-show="volumeShow">
<div class="icon"> <div class="icon">
<volume-mute <volume-mute theme="filled" size="24" fill="#efefef" v-if="volumeNum == 0" />
theme="filled"
size="24"
fill="#efefef"
v-if="volumeNum == 0"
/>
<volume-small <volume-small
theme="filled" theme="filled"
size="24" size="24"
@ -62,23 +37,13 @@
/> />
<volume-notice theme="filled" size="24" fill="#efefef" v-else /> <volume-notice theme="filled" size="24" fill="#efefef" v-else />
</div> </div>
<el-slider <el-slider v-model="volumeNum" :show-tooltip="false" :min="0" :max="1" :step="0.01" />
v-model="volumeNum"
:show-tooltip="false"
:min="0"
:max="1"
:step="0.01"
/>
</div> </div>
</div> </div>
</div> </div>
<!-- 音乐列表弹窗 --> <!-- 音乐列表弹窗 -->
<Transition name="fade"> <Transition name="fade">
<div <div class="music-list" v-show="musicListShow" @click="musicListShow = false">
class="music-list"
v-show="musicListShow"
@click="musicListShow = false"
>
<Transition name="zoom"> <Transition name="zoom">
<div class="list" v-show="musicListShow" @click.stop> <div class="list" v-show="musicListShow" @click.stop>
<close-one <close-one
@ -112,9 +77,9 @@ import {
VolumeMute, VolumeMute,
VolumeSmall, VolumeSmall,
VolumeNotice, VolumeNotice,
} from "@icon-park/vue-next"; } from '@icon-park/vue-next';
import Player from "@/components/Player.vue"; import Player from '@/components/Player.vue';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
const store = mainStore(); const store = mainStore();
// 音量条数据 // 音量条数据
@ -147,8 +112,8 @@ const changeMusicIndex = (type) => {
onMounted(() => { onMounted(() => {
// 空格键事件 // 空格键事件
window.addEventListener("keydown", (e) => { window.addEventListener('keydown', (e) => {
if (e.code == "Space") { if (e.code == 'Space') {
changePlayState(); changePlayState();
} }
}); });
@ -162,7 +127,7 @@ watch(
(value) => { (value) => {
store.musicVolume = value; store.musicVolume = value;
playerRef.value.changeVolume(store.musicVolume); playerRef.value.changeVolume(store.musicVolume);
} },
); );
</script> </script>

97
src/components/Player.vue
View File

@ -20,10 +20,10 @@
</template> </template>
<script setup> <script setup>
import { MusicOne, PlayWrong } from "@icon-park/vue-next"; import { MusicOne, PlayWrong } from '@icon-park/vue-next';
import { getPlayerList } from "@/api"; import { getPlayerList } from '@/api';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import aplayer from "vue3-aplayer"; import aplayer from 'vue3-aplayer';
const store = mainStore(); const store = mainStore();
@ -47,12 +47,12 @@ const props = defineProps({
// 主题色 // 主题色
theme: { theme: {
type: String, type: String,
default: "#efefef", default: '#efefef',
}, },
// 音频循环播放 // 音频循环播放
repeat: { repeat: {
type: String, type: String,
default: "list", //'list' | 'music' | 'none' default: 'list', //'list' | 'music' | 'none'
}, },
// 随机播放 // 随机播放
shuffle: { shuffle: {
@ -70,17 +70,17 @@ const props = defineProps({
// 歌曲服务器 ( netease-网易云, tencent-qq音乐 ) // 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
songServer: { songServer: {
type: String, type: String,
default: "netease", //'netease' | 'tencent' default: 'netease', //'netease' | 'tencent'
}, },
// 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 ) // 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
songType: { songType: {
type: String, type: String,
default: "playlist", default: 'playlist',
}, },
// id // id
songId: { songId: {
type: String, type: String,
default: "7452421335", default: '7452421335',
}, },
// 列表是否默认折叠 // 列表是否默认折叠
listFolded: { listFolded: {
@ -90,7 +90,7 @@ const props = defineProps({
// 列表最大高度 // 列表最大高度
listMaxHeight: { listMaxHeight: {
type: String, type: String,
default: "420px", default: '420px',
}, },
}); });
@ -98,42 +98,40 @@ const props = defineProps({
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
try { try {
getPlayerList(props.songServer, props.songType, props.songId).then( getPlayerList(props.songServer, props.songType, props.songId).then((res) => {
(res) => { console.log(res);
console.log(res); // 生成歌单信息
// 生成歌单信息 playIndex.value = Math.floor(Math.random() * res.length);
playIndex.value = Math.floor(Math.random() * res.length); playListCount.value = res.length;
playListCount.value = res.length; // 更改播放器加载状态
// 更改播放器加载状态 store.musicIsOk = true;
store.musicIsOk = true; // 生成歌单
// 生成歌单 res.forEach((v) => {
res.forEach((v) => { playList.value.push({
playList.value.push({ title: v.name || v.title,
title: v.name || v.title, artist: v.artist || v.author,
artist: v.artist || v.author, src: v.url || v.src,
src: v.url || v.src, pic: v.pic,
pic: v.pic, lrc: v.lrc,
lrc: v.lrc,
});
}); });
console.log( });
"音乐加载完成", console.log(
playList.value, '音乐加载完成',
playIndex.value, playList.value,
playListCount.value, playIndex.value,
props.volume playListCount.value,
); props.volume,
} );
); });
} catch (err) { } catch (err) {
console.error(err); console.error(err);
store.musicIsOk = false; store.musicIsOk = false;
ElMessage({ ElMessage({
message: "播放器加载失败", message: '播放器加载失败',
grouping: true, grouping: true,
icon: h(PlayWrong, { icon: h(PlayWrong, {
theme: "filled", theme: 'filled',
fill: "#efefef", fill: '#efefef',
}), }),
}); });
} }
@ -142,20 +140,17 @@ onMounted(() => {
// 播放 // 播放
const onPlay = () => { const onPlay = () => {
console.log("播放"); console.log('播放');
// 播放状态 // 播放状态
store.setPlayerState(player.value.audio.paused); store.setPlayerState(player.value.audio.paused);
// 储存播放器信息 // 储存播放器信息
store.setPlayerData( store.setPlayerData(player.value.currentMusic.title, player.value.currentMusic.artist);
player.value.currentMusic.title,
player.value.currentMusic.artist
);
ElMessage({ ElMessage({
message: store.getPlayerData.name + " - " + store.getPlayerData.artist, message: store.getPlayerData.name + ' - ' + store.getPlayerData.artist,
grouping: true, grouping: true,
icon: h(MusicOne, { icon: h(MusicOne, {
theme: "filled", theme: 'filled',
fill: "#efefef", fill: '#efefef',
}), }),
}); });
}; };
@ -169,12 +164,10 @@ const onPause = () => {
const onTimeUp = () => { const onTimeUp = () => {
let playerRef = player.value.$.vnode.el; let playerRef = player.value.$.vnode.el;
if (playerRef) { if (playerRef) {
const currentLrcElement = playerRef.querySelector(".aplayer-lrc-current"); const currentLrcElement = playerRef.querySelector('.aplayer-lrc-current');
const previousLrcElement = currentLrcElement?.previousElementSibling; const previousLrcElement = currentLrcElement?.previousElementSibling;
const lrcContent = const lrcContent =
currentLrcElement?.innerHTML || currentLrcElement?.innerHTML || previousLrcElement?.innerHTML || '这句没有歌词';
previousLrcElement?.innerHTML ||
"这句没有歌词";
store.setPlayerLrc(lrcContent); store.setPlayerLrc(lrcContent);
} }
}; };
@ -218,7 +211,7 @@ defineExpose({ playToggle, changeVolume, changeSong });
width: 80%; width: 80%;
background: transparent; background: transparent;
border-radius: 6px; border-radius: 6px;
font-family: "HarmonyOS_Regular", sans-serif !important; font-family: 'HarmonyOS_Regular', sans-serif !important;
:deep(.aplayer-body) { :deep(.aplayer-body) {
.aplayer-pic { .aplayer-pic {
display: none; display: none;

23
src/components/Set.vue
View File

@ -3,11 +3,7 @@
<el-collapse class="collapse" v-model="activeName" accordion> <el-collapse class="collapse" v-model="activeName" accordion>
<el-collapse-item title="个性壁纸" name="1"> <el-collapse-item title="个性壁纸" name="1">
<div class="bg-set"> <div class="bg-set">
<el-radio-group <el-radio-group v-model="coverType" text-color="#ffffff" @change="radioChange">
v-model="coverType"
text-color="#ffffff"
@change="radioChange"
>
<el-radio label="0" size="large" border>默认壁纸</el-radio> <el-radio label="0" size="large" border>默认壁纸</el-radio>
<el-radio label="1" size="large" border>每日一图</el-radio> <el-radio label="1" size="large" border>每日一图</el-radio>
<el-radio label="2" size="large" border>随机风景</el-radio> <el-radio label="2" size="large" border>随机风景</el-radio>
@ -64,24 +60,23 @@
</template> </template>
<script setup> <script setup>
import { CheckSmall, CloseSmall, SuccessPicture } from "@icon-park/vue-next"; import { CheckSmall, CloseSmall, SuccessPicture } from '@icon-park/vue-next';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import { storeToRefs } from "pinia"; import { storeToRefs } from 'pinia';
const store = mainStore(); const store = mainStore();
const { coverType, siteStartShow, musicClick, playerLrcShow, footerBlur } = const { coverType, siteStartShow, musicClick, playerLrcShow, footerBlur } = storeToRefs(store);
storeToRefs(store);
// 默认选中项 // 默认选中项
const activeName = ref("1"); const activeName = ref('1');
// 壁纸切换 // 壁纸切换
const radioChange = () => { const radioChange = () => {
ElMessage({ ElMessage({
message: "壁纸设置成功，刷新后生效", message: '壁纸设置成功，刷新后生效',
icon: h(SuccessPicture, { icon: h(SuccessPicture, {
theme: "filled", theme: 'filled',
fill: "#efefef", fill: '#efefef',
}), }),
}); });
}; };

8
src/components/SocialLinks.vue
View File

@ -18,10 +18,10 @@
</template> </template>
<script setup> <script setup>
import socialLinks from "@/assets/socialLinks.json"; import socialLinks from '@/assets/socialLinks.json';
// 社交链接提示 // 社交链接提示
const socialTip = ref("通过这里联系我吧"); const socialTip = ref('通过这里联系我吧');
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -37,7 +37,9 @@ const socialTip = ref("通过这里联系我吧");
border-radius: 6px; border-radius: 6px;
backdrop-filter: blur(0); backdrop-filter: blur(0);
animation: fade 0.5s; animation: fade 0.5s;
transition: background-color 0.3s, backdrop-filter 0.3s; transition:
background-color 0.3s,
backdrop-filter 0.3s;
@media (max-width: 840px) { @media (max-width: 840px) {
max-width: 100%; max-width: 100%;
justify-content: center; justify-content: center;

55
src/components/TimeCapsule.vue
View File

@ -1,45 +1,17 @@
<template> <template>
<div class="time-capsule"> <div class="time-capsule">
<div class="title"> <div class="title">
<hourglass-full <hourglass-full theme="two-tone" size="24" :fill="['#efefef', '#00000020']" />
theme="two-tone"
size="24"
:fill="['#efefef', '#00000020']"
/>
<span>时光胶囊</span> <span>时光胶囊</span>
</div> </div>
<span class="text" <span class="text">今日已经度过了&nbsp;{{ timeData.day.elapsed }}&nbsp;小时</span>
>今日已经度过了&nbsp;{{ timeData.day.elapsed }}&nbsp;小时</span <el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.day.pass" />
> <span class="text">本周已经度过了&nbsp;{{ timeData.week.elapsed }}&nbsp;天</span>
<el-progress <el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.week.pass" />
:text-inside="true" <span class="text">本月已经度过了&nbsp;{{ timeData.month.elapsed }}&nbsp;天</span>
:stroke-width="20" <el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.month.pass" />
:percentage="timeData.day.pass" <span class="text">今年已经度过了&nbsp;{{ timeData.year.elapsed }}&nbsp;个月</span>
/> <el-progress :text-inside="true" :stroke-width="20" :percentage="timeData.year.pass" />
<span class="text"
>本周已经度过了&nbsp;{{ timeData.week.elapsed }}&nbsp;天</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.week.pass"
/>
<span class="text"
>本月已经度过了&nbsp;{{ timeData.month.elapsed }}&nbsp;天</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.month.pass"
/>
<span class="text"
>今年已经度过了&nbsp;{{ timeData.year.elapsed }}&nbsp;个月</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.year.pass"
/>
<div v-if="startDate?.length >= 4 && store.siteStartShow"> <div v-if="startDate?.length >= 4 && store.siteStartShow">
<span class="text" v-html="startDateText" /> <span class="text" v-html="startDateText" />
<!-- <el-progress <!-- <el-progress
@ -54,9 +26,9 @@
</template> </template>
<script setup> <script setup>
import { HourglassFull } from "@icon-park/vue-next"; import { HourglassFull } from '@icon-park/vue-next';
import { getTimeCapsule, siteDateStatistics } from "@/utils/getTime.js"; import { getTimeCapsule, siteDateStatistics } from '@/utils/getTime.js';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
const store = mainStore(); const store = mainStore();
// 进度条数据 // 进度条数据
@ -68,8 +40,7 @@ const timeInterval = ref(null);
onMounted(() => { onMounted(() => {
timeInterval.value = setInterval(() => { timeInterval.value = setInterval(() => {
timeData.value = getTimeCapsule(); timeData.value = getTimeCapsule();
if (startDate.value) if (startDate.value) startDateText.value = siteDateStatistics(new Date(startDate.value));
startDateText.value = siteDateStatistics(new Date(startDate.value));
}, 1000); }, 1000);
}); });

26
src/components/Weather.vue
View File

@ -5,9 +5,9 @@
<span>{{ weatherData.weather.temperature }}℃</span> <span>{{ weatherData.weather.temperature }}℃</span>
<span class="sm-hidden"> <span class="sm-hidden">
&nbsp;{{ &nbsp;{{
weatherData.weather.winddirection?.endsWith("风") weatherData.weather.winddirection?.endsWith('风')
? weatherData.weather.winddirection ? weatherData.weather.winddirection
: weatherData.weather.winddirection + "风" : weatherData.weather.winddirection + '风'
}}&nbsp; }}&nbsp;
</span> </span>
<span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span> <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
@ -18,8 +18,8 @@
</template> </template>
<script setup> <script setup>
import { getAdcode, getWeather, getOtherWeather } from "@/api"; import { getAdcode, getWeather, getOtherWeather } from '@/api';
import { Error } from "@icon-park/vue-next"; import { Error } from '@icon-park/vue-next';
// 高德开发者 Key // 高德开发者 Key
const mainKey = import.meta.env.VITE_WEATHER_KEY; const mainKey = import.meta.env.VITE_WEATHER_KEY;
@ -58,8 +58,8 @@ const getWeatherData = () => {
}; };
}) })
.catch((err) => { .catch((err) => {
console.error("天气信息获取失败:" + err); console.error('天气信息获取失败:' + err);
onError("天气信息获取失败"); onError('天气信息获取失败');
}); });
} else { } else {
getAdcode(mainKey) getAdcode(mainKey)
@ -79,13 +79,13 @@ const getWeatherData = () => {
}; };
}) })
.catch((err) => { .catch((err) => {
console.error("天气信息获取失败:" + err); console.error('天气信息获取失败:' + err);
onError("天气信息获取失败"); onError('天气信息获取失败');
}); });
}) })
.catch((err) => { .catch((err) => {
console.error("地理位置获取失败:" + err); console.error('地理位置获取失败:' + err);
onError("地理位置获取失败"); onError('地理位置获取失败');
}); });
} }
}; };
@ -95,8 +95,8 @@ const onError = (message) => {
ElMessage({ ElMessage({
message, message,
icon: h(Error, { icon: h(Error, {
theme: "filled", theme: 'filled',
fill: "#efefef", fill: '#efefef',
}), }),
}); });
console.error(message); console.error(message);

18
src/main.js
View File

@ -1,12 +1,8 @@
import { import { createApp } from 'vue';
createApp
} from 'vue';
import '@/style/style.scss'; import '@/style/style.scss';
import App from '@/App.vue'; import App from '@/App.vue';
// 引入 pinia // 引入 pinia
import { import { createPinia } from 'pinia';
createPinia
} from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'; import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const app = createApp(App); const app = createApp(App);
@ -14,11 +10,11 @@ const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); pinia.use(piniaPluginPersistedstate);
app.use(pinia); app.use(pinia);
app.mount('#app') app.mount('#app');
// PWA // PWA
navigator.serviceWorker.addEventListener('controllerchange', () => { navigator.serviceWorker.addEventListener('controllerchange', () => {
// 弹出更新提醒 // 弹出更新提醒
console.log("站点已更新，刷新后生效"); console.log('站点已更新，刷新后生效');
ElMessage("站点已更新，刷新后生效"); ElMessage('站点已更新，刷新后生效');
}) });

22
src/store/index.js
View File

@ -1,11 +1,11 @@
import { defineStore } from "pinia"; import { defineStore } from 'pinia';
export const mainStore = defineStore("main", { export const mainStore = defineStore('main', {
state: () => { state: () => {
return { return {
imgLoadStatus: false, // 壁纸加载状态 imgLoadStatus: false, // 壁纸加载状态
innerWidth: null, // 当前窗口宽度 innerWidth: null, // 当前窗口宽度
coverType: "0", // 壁纸种类 coverType: '0', // 壁纸种类
siteStartShow: false, // 建站日期显示 siteStartShow: false, // 建站日期显示
musicClick: false, // 音乐链接是否跳转 musicClick: false, // 音乐链接是否跳转
musicIsOk: false, // 音乐是否加载完成 musicIsOk: false, // 音乐是否加载完成
@ -19,7 +19,7 @@ export const mainStore = defineStore("main", {
playerState: false, // 当前播放状态 playerState: false, // 当前播放状态
playerTitle: null, // 当前播放歌曲名 playerTitle: null, // 当前播放歌曲名
playerArtist: null, // 当前播放歌手名 playerArtist: null, // 当前播放歌手名
playerLrc: "歌词加载中", // 当前播放歌词 playerLrc: '歌词加载中', // 当前播放歌词
playerLrcShow: true, // 是否显示底栏歌词 playerLrcShow: true, // 是否显示底栏歌词
footerBlur: true, // 底栏模糊 footerBlur: true, // 底栏模糊
}; };
@ -73,15 +73,15 @@ export const mainStore = defineStore("main", {
}, },
}, },
persist: { persist: {
key: "data", key: 'data',
storage: window.localStorage, storage: window.localStorage,
paths: [ paths: [
"coverType", 'coverType',
"musicVolume", 'musicVolume',
"siteStartShow", 'siteStartShow',
"musicClick", 'musicClick',
"playerLrcShow", 'playerLrcShow',
"footerBlur", 'footerBlur',
], ],
}, },
}); });

29
src/style/global.scss
View File

@ -1,10 +1,10 @@
// scss 全局变量 // scss 全局变量
// 响应式布局 // 响应式布局
@mixin changeWidth($maxWidth:1200px) { @mixin changeWidth($maxWidth: 1200px) {
.container { .container {
max-width: $maxWidth; max-width: $maxWidth;
} }
} }
// 首次调用 // 首次调用
@ -12,26 +12,25 @@
/* 小于1380px时 */ /* 小于1380px时 */
@media (max-width: 1380px) { @media (max-width: 1380px) {
.el-radio-group { .el-radio-group {
justify-content: center !important; justify-content: center !important;
} }
} }
/* 小于1280px时 */ /* 小于1280px时 */
@media (max-width: 1280px) { @media (max-width: 1280px) {
@include changeWidth($maxWidth:1100px); @include changeWidth($maxWidth: 1100px);
} }
/* 小于992px时 */ /* 小于992px时 */
@media (max-width: 992px) { @media (max-width: 992px) {
@include changeWidth($maxWidth:900px); @include changeWidth($maxWidth: 900px);
} }
/* 小于720px时 */ /* 小于720px时 */
@media (max-width: 720px) { @media (max-width: 720px) {
// 隐藏元素
// 隐藏元素 .xs-hidden {
.xs-hidden { display: none;
display: none; }
} }
}

16
src/style/style.scss
View File

@ -17,7 +17,7 @@ body {
padding: 0; padding: 0;
background-color: #333; background-color: #333;
overflow: hidden; overflow: hidden;
font-family: "HarmonyOS_Regular", sans-serif; font-family: 'HarmonyOS_Regular', sans-serif;
} }
*, *,
@ -37,13 +37,13 @@ p {
// 字体文件 // 字体文件
@font-face { @font-face {
font-family: "Pacifico-Regular"; font-family: 'Pacifico-Regular';
src: url("/font/Pacifico-Regular.ttf") format("truetype"); src: url('/font/Pacifico-Regular.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: "UnidreamLED"; font-family: 'UnidreamLED';
src: url("/font/UnidreamLED.ttf") format("truetype"); src: url('/font/UnidreamLED.ttf') format('truetype');
} }
// 基础样式 // 基础样式
@ -62,7 +62,9 @@ p {
background-color: #00000040; background-color: #00000040;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transform: scale(1); transform: scale(1);
transition: backdrop-filter 0.3s, transform 0.3s; transition:
backdrop-filter 0.3s,
transform 0.3s;
&:hover { &:hover {
transform: scale(1.01); transform: scale(1.01);
} }
@ -104,7 +106,7 @@ p {
background-color: #efefef; background-color: #efefef;
border-radius: 6px; border-radius: 6px;
text-align: center; text-align: center;
font-family: "UnidreamLED"; font-family: 'UnidreamLED';
span { span {
color: #564d59; color: #564d59;
font-size: 0.9rem; font-size: 0.9rem;

153
src/utils/cursor.js
View File

@ -3,92 +3,89 @@ var CURSOR;
Math.lerp = (a, b, n) => (1 - n) * a + n * b; Math.lerp = (a, b, n) => (1 - n) * a + n * b;
const getStyle = (el, attr) => { const getStyle = (el, attr) => {
try { try {
return window.getComputedStyle ? return window.getComputedStyle ? window.getComputedStyle(el)[attr] : el.currentStyle[attr];
window.getComputedStyle(el)[attr] : } catch (e) {}
el.currentStyle[attr]; return '';
} catch (e) {}
return "";
}; };
class Cursor { class Cursor {
constructor() { constructor() {
this.pos = { this.pos = {
curr: null, curr: null,
prev: null prev: null,
}; };
this.pt = []; this.pt = [];
this.create(); this.create();
this.init(); this.init();
this.render(); this.render();
}
move(left, top) {
this.cursor.style['left'] = `${left}px`;
this.cursor.style['top'] = `${top}px`;
}
create() {
if (!this.cursor) {
this.cursor = document.createElement('div');
this.cursor.id = 'cursor';
this.cursor.classList.add('xs-hidden');
this.cursor.classList.add('hidden');
document.body.append(this.cursor);
} }
move(left, top) { var el = document.getElementsByTagName('*');
this.cursor.style["left"] = `${left}px`; for (let i = 0; i < el.length; i++)
this.cursor.style["top"] = `${top}px`; if (getStyle(el[i], 'cursor') == 'pointer') this.pt.push(el[i].outerHTML);
}
document.body.appendChild((this.scr = document.createElement('style')));
create() { this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important}`;
if (!this.cursor) { }
this.cursor = document.createElement("div");
this.cursor.id = "cursor"; refresh() {
this.cursor.classList.add("xs-hidden"); this.scr.remove();
this.cursor.classList.add("hidden"); this.cursor.classList.remove('active');
document.body.append(this.cursor); this.pos = {
} curr: null,
prev: null,
var el = document.getElementsByTagName('*'); };
for (let i = 0; i < el.length; i++) this.pt = [];
if (getStyle(el[i], "cursor") == "pointer")
this.pt.push(el[i].outerHTML); this.create();
this.init();
document.body.appendChild((this.scr = document.createElement("style"))); this.render();
this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='10px' height='10px'><circle cx='4' cy='4' r='4' fill='white' /></svg>") 4 4, auto !important}`; }
}
init() {
refresh() { document.onmousemove = (e) => {
this.scr.remove(); this.pos.curr == null && this.move(e.clientX - 8, e.clientY - 8);
this.cursor.classList.remove("active"); this.pos.curr = {
this.pos = { x: e.clientX - 8,
curr: null, y: e.clientY - 8,
prev: null };
}; this.cursor.classList.remove('hidden');
this.pt = []; };
document.onmouseenter = (e) => this.cursor.classList.remove('hidden');
this.create(); document.onmouseleave = (e) => this.cursor.classList.add('hidden');
this.init(); document.onmousedown = (e) => this.cursor.classList.add('active');
this.render(); document.onmouseup = (e) => this.cursor.classList.remove('active');
} }
init() { render() {
document.onmousemove = e => { if (this.pos.prev) {
(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.35);
this.pos.curr = { this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.35);
x: e.clientX - 8, this.move(this.pos.prev.x, this.pos.prev.y);
y: e.clientY - 8 } else {
}; this.pos.prev = this.pos.curr;
this.cursor.classList.remove("hidden");
};
document.onmouseenter = e => this.cursor.classList.remove("hidden");
document.onmouseleave = e => this.cursor.classList.add("hidden");
document.onmousedown = e => this.cursor.classList.add("active");
document.onmouseup = e => this.cursor.classList.remove("active");
}
render() {
if (this.pos.prev) {
this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.35);
this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.35);
this.move(this.pos.prev.x, this.pos.prev.y);
} else {
this.pos.prev = this.pos.curr;
}
requestAnimationFrame(() => this.render());
} }
requestAnimationFrame(() => this.render());
}
} }
const cursorInit = () => { const cursorInit = () => {
CURSOR = new Cursor(); CURSOR = new Cursor();
}; };
export default cursorInit; export default cursorInit;

34
src/utils/debounce.js
View File

@ -2,22 +2,22 @@
let timeout; let timeout;
function debounce(func, wait = 300, immediate = false) { function debounce(func, wait = 300, immediate = false) {
// 清除定时器 // 清除定时器
if (timeout !== null) { if (timeout !== null) {
clearTimeout(timeout); clearTimeout(timeout);
} }
// 立即执行 // 立即执行
if (immediate) { if (immediate) {
var callNow = !timeout; var callNow = !timeout;
timeout = setTimeout(function () { timeout = setTimeout(function () {
timeout = null; timeout = null;
}, wait); }, wait);
if (callNow) typeof func === 'function' && func(); if (callNow) typeof func === 'function' && func();
} else { } else {
timeout = setTimeout(function () { timeout = setTimeout(function () {
typeof func === 'function' && func(); typeof func === 'function' && func();
}, wait); }, wait);
} }
} }
export default debounce; export default debounce;

65
src/utils/getTime.js
View File

@ -1,29 +1,16 @@
import { h } from "vue"; import { h } from 'vue';
import { SpaCandle } from "@icon-park/vue-next"; import { SpaCandle } from '@icon-park/vue-next';
// 时钟 // 时钟
export const getCurrentTime = () => { export const getCurrentTime = () => {
let time = new Date(); let time = new Date();
let year = time.getFullYear(); let year = time.getFullYear();
let month = let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
time.getMonth() + 1 < 10 let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
? "0" + (time.getMonth() + 1) let hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
: time.getMonth() + 1; let minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
let day = time.getDate() < 10 ? "0" + time.getDate() : time.getDate(); let second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
let hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours(); let weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
let minute =
time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
let second =
time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
let weekday = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
let currentTime = { let currentTime = {
year, year,
month, month,
@ -87,21 +74,21 @@ export const helloInit = () => {
const hour = new Date().getHours(); const hour = new Date().getHours();
let hello = null; let hello = null;
if (hour < 6) { if (hour < 6) {
hello = "凌晨好"; hello = '凌晨好';
} else if (hour < 9) { } else if (hour < 9) {
hello = "早上好"; hello = '早上好';
} else if (hour < 12) { } else if (hour < 12) {
hello = "上午好"; hello = '上午好';
} else if (hour < 14) { } else if (hour < 14) {
hello = "中午好"; hello = '中午好';
} else if (hour < 17) { } else if (hour < 17) {
hello = "下午好"; hello = '下午好';
} else if (hour < 19) { } else if (hour < 19) {
hello = "傍晚好"; hello = '傍晚好';
} else if (hour < 22) { } else if (hour < 22) {
hello = "晚上好"; hello = '晚上好';
} else { } else {
hello = "夜深了"; hello = '夜深了';
} }
ElMessage({ ElMessage({
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
@ -111,11 +98,11 @@ export const helloInit = () => {
// 默哀模式 // 默哀模式
const anniversaries = { const anniversaries = {
4.4: "清明节", 4.4: '清明节',
5.12: "汶川大地震纪念日", 5.12: '汶川大地震纪念日',
7.7: "中国人民抗日战争纪念日", 7.7: '中国人民抗日战争纪念日',
9.18: "九·一八事变纪念日", 9.18: '九·一八事变纪念日',
12.13: "南京大屠杀死难者国家公祭日", 12.13: '南京大屠杀死难者国家公祭日',
}; };
export const checkDays = () => { export const checkDays = () => {
const myDate = new Date(); const myDate = new Date();
@ -124,13 +111,13 @@ export const checkDays = () => {
const key = `${mon}.${date}`; const key = `${mon}.${date}`;
if (anniversaries.hasOwnProperty(key)) { if (anniversaries.hasOwnProperty(key)) {
console.log(`今天是${anniversaries[key]}`); console.log(`今天是${anniversaries[key]}`);
const gray = document.createElement("style"); const gray = document.createElement('style');
gray.innerHTML = "html{filter: grayscale(100%)}"; gray.innerHTML = 'html{filter: grayscale(100%)}';
document.head.appendChild(gray); document.head.appendChild(gray);
ElMessage({ ElMessage({
message: `今天是${anniversaries[key]}`, message: `今天是${anniversaries[key]}`,
duration: 14000, duration: 14000,
icon: h(SpaCandle, { theme: "filled", fill: "#efefef" }), icon: h(SpaCandle, { theme: 'filled', fill: '#efefef' }),
}); });
} }
}; };
@ -144,11 +131,11 @@ export const siteDateStatistics = (startDate) => {
const differenceInYears = differenceInMonths / 12; const differenceInYears = differenceInMonths / 12;
if (differenceInYears >= 1) { if (differenceInYears >= 1) {
return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor( return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor(
differenceInMonths % 12 differenceInMonths % 12,
)} 月 ${Math.round(differenceInDays % 30)} 天`; )} 月 ${Math.round(differenceInDays % 30)} 天`;
} else if (differenceInMonths >= 1) { } else if (differenceInMonths >= 1) {
return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round( return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round(
differenceInDays % 30 differenceInDays % 30,
)} 天`; )} 天`;
} else { } else {
return `本站已经苟活了 ${Math.round(differenceInDays)} 天`; return `本站已经苟活了 ${Math.round(differenceInDays)} 天`;

16
src/views/Box/index.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div <div class="box cards" @mouseenter="closeShow = true" @mouseleave="closeShow = false">
class="box cards"
@mouseenter="closeShow = true"
@mouseleave="closeShow = false"
>
<transition name="el-fade-in-linear"> <transition name="el-fade-in-linear">
<close-one <close-one
class="close" class="close"
@ -31,9 +27,9 @@
</template> </template>
<script setup> <script setup>
import { CloseOne, SettingTwo } from "@icon-park/vue-next"; import { CloseOne, SettingTwo } from '@icon-park/vue-next';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import TimeCapsule from "@/components/TimeCapsule.vue"; import TimeCapsule from '@/components/TimeCapsule.vue';
const store = mainStore(); const store = mainStore();
const closeShow = ref(false); const closeShow = ref(false);
@ -58,7 +54,9 @@ const closeShow = ref(false);
right: 14px; right: 14px;
width: 28px; width: 28px;
height: 28px; height: 28px;
transition: transform 0.3s, opacity 0.3s; transition:
transform 0.3s,
opacity 0.3s;
&:hover { &:hover {
transform: scale(1.2); transform: scale(1.2);

18
src/views/Func/index.vue
View File

@ -18,11 +18,7 @@
<span class="sm-hidden">{{ currentTime.weekday }}</span> <span class="sm-hidden">{{ currentTime.weekday }}</span>
</div> </div>
<div class="text"> <div class="text">
<span> <span> {{ currentTime.hour }}:{{ currentTime.minute }}:{{ currentTime.second }}</span>
{{ currentTime.hour }}:{{ currentTime.minute }}:{{
currentTime.second
}}</span
>
</div> </div>
</div> </div>
<Weather /> <Weather />
@ -33,11 +29,11 @@
</template> </template>
<script setup> <script setup>
import { getCurrentTime } from "@/utils/getTime"; import { getCurrentTime } from '@/utils/getTime';
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import Music from "@/components/Music.vue"; import Music from '@/components/Music.vue';
import Hitokoto from "@/components/Hitokoto.vue"; import Hitokoto from '@/components/Hitokoto.vue';
import Weather from "@/components/Weather.vue"; import Weather from '@/components/Weather.vue';
const store = mainStore(); const store = mainStore();
@ -126,7 +122,7 @@ onBeforeUnmount(() => {
margin-top: 10px; margin-top: 10px;
font-size: 3.25rem; font-size: 3.25rem;
letter-spacing: 2px; letter-spacing: 2px;
font-family: "UnidreamLED"; font-family: 'UnidreamLED';
} }
} }
.weather { .weather {

8
src/views/Main/Left.vue
View File

@ -6,9 +6,9 @@
</template> </template>
<script setup> <script setup>
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import Message from "@/components/Message.vue"; import Message from '@/components/Message.vue';
import SocialLinks from "@/components/SocialLinks.vue"; import SocialLinks from '@/components/SocialLinks.vue';
const store = mainStore(); const store = mainStore();
</script> </script>
@ -26,4 +26,4 @@ const store = mainStore();
width: 100%; width: 100%;
} }
} }
</style> </style>

13
src/views/Main/Right.vue
View File

@ -13,16 +13,15 @@
</template> </template>
<script setup> <script setup>
import { mainStore } from "@/store"; import { mainStore } from '@/store';
import Func from "@/views/Func/index.vue"; import Func from '@/views/Func/index.vue';
import Link from "@/components/Links.vue"; import Link from '@/components/Links.vue';
const store = mainStore(); const store = mainStore();
// 站点链接 // 站点链接
const siteUrl = import.meta.env.VITE_SITE_URL.split("."); const siteUrl = import.meta.env.VITE_SITE_URL.split('.');
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.right { .right {
// flex: 1 0 0%; // flex: 1 0 0%;
@ -30,7 +29,7 @@ const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
margin-left: 0.75rem; margin-left: 0.75rem;
.logo { .logo {
width: 100%; width: 100%;
font-family: "Pacifico-Regular"; font-family: 'Pacifico-Regular';
font-size: 1.75rem; font-size: 1.75rem;
position: fixed; position: fixed;
top: 6%; top: 6%;
@ -53,4 +52,4 @@ const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
} }
} }
} }
</style> </style>

55
src/views/MoreSet/index.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div <div class="set" @mouseenter="closeShow = true" @mouseleave="closeShow = false" @click.stop>
class="set"
@mouseenter="closeShow = true"
@mouseleave="closeShow = false"
@click.stop
>
<transition name="el-fade-in-linear"> <transition name="el-fade-in-linear">
<close-one <close-one
class="close" class="close"
@ -23,17 +18,8 @@
</div> </div>
<div class="version"> <div class="version">
<div class="num">v&nbsp;{{ config.version }}</div> <div class="num">v&nbsp;{{ config.version }}</div>
<el-tooltip <el-tooltip content="Github 源代码仓库" placement="right" :show-arrow="false">
content="Github 源代码仓库" <github-one class="github" theme="outline" size="24" @click="jumpTo(config.github)" />
placement="right"
:show-arrow="false"
>
<github-one
class="github"
theme="outline"
size="24"
@click="jumpTo(config.github)"
/>
</el-tooltip> </el-tooltip>
</div> </div>
<el-card class="update"> <el-card class="update">
@ -66,37 +52,26 @@
</template> </template>
<script setup> <script setup>
import { import { CloseOne, SettingTwo, GithubOne, AddOne, Bug } from '@icon-park/vue-next';
CloseOne, import { mainStore } from '@/store';
SettingTwo, import Set from '@/components/Set.vue';
GithubOne, import config from '@/../package.json';
AddOne,
Bug,
} from "@icon-park/vue-next";
import { mainStore } from "@/store";
import Set from "@/components/Set.vue";
import config from "@/../package.json";
const store = mainStore(); const store = mainStore();
const closeShow = ref(false); const closeShow = ref(false);
// 站点链接 // 站点链接
const siteUrl = import.meta.env.VITE_SITE_URL.split("."); const siteUrl = import.meta.env.VITE_SITE_URL.split('.');
// 更新日志 // 更新日志
const upData = reactive({ const upData = reactive({
new: [ new: [
"采用 Vue 进行重构", '采用 Vue 进行重构',
"音乐歌单支持快速自定义", '音乐歌单支持快速自定义',
"壁纸支持个性化设置", '壁纸支持个性化设置',
"音乐播放器支持音量控制", '音乐播放器支持音量控制',
],
fix: [
"修复天气 API",
"时光胶囊显示错误",
"移动端动画及细节",
"图标更换为 IconPark",
], ],
fix: ['修复天气 API', '时光胶囊显示错误', '移动端动画及细节', '图标更换为 IconPark'],
}); });
// 跳转源代码仓库 // 跳转源代码仓库
@ -148,7 +123,7 @@ const jumpTo = (url) => {
.logo { .logo {
transform: translateY(-8%); transform: translateY(-8%);
font-family: "Pacifico-Regular"; font-family: 'Pacifico-Regular';
// line-height: 5rem; // line-height: 5rem;
width: 100%; width: 100%;
height: 260px; height: 260px;
@ -170,7 +145,7 @@ const jumpTo = (url) => {
.num { .num {
font-size: 2rem; font-size: 2rem;
font-family: "Pacifico-Regular"; font-family: 'Pacifico-Regular';
} }
.github { .github {