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

Merge pull request #190 from OrzMiku/dev

Browse Source 
添加 Prettier 并应用代码格式化
This commit is contained in:
底层用户 2023-08-26 15:47:01 +08:00 committed by GitHub
commit 75c75fff0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 472 additions and 594 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.prettierrc.json Normal file
View File

@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"printWidth": 100
}

21
index.html
View File

@ -1,12 +1,11 @@
<!DOCTYPE html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*"> <meta http-equiv="Access-Control-Allow-Origin" content="*" />
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> --> <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="%VITE_SITE_LOGO%"> <link rel="icon" href="%VITE_SITE_LOGO%" />
<link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" /> <link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" />
<link rel="bookmark" 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%" /> <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
@ -21,13 +20,14 @@
<!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> --> <!-- <link rel="stylesheet" href="https://cdn.imsyy.top/gh/imsyy/file/font/HarmonyOS_Sans/regular.min.css" /> -->
<!-- IE Out --> <!-- IE Out -->
<script> <script>
if ( /*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode)) if (/*@cc_on!@*/ false || (!!window.MSInputMethodContext && !!document.documentMode))
window.location.href = window.location.href =
"https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(window.location.href) 'https://support.dmeng.net/upgrade-your-browser.html?referrer=' +
encodeURIComponent(window.location.href);
</script> </script>
</head> </head>
<body> <body>
<!-- 主体内容 --> <!-- 主体内容 -->
<div id="app"></div> <div id="app"></div>
<!-- noscript --> <!-- noscript -->
@ -35,6 +35,5 @@
<div style="text-align: center">请开启 JavaScript</div> <div style="text-align: center">请开启 JavaScript</div>
</noscript> </noscript>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

6
package.json
View File

@ -9,7 +9,8 @@
"scripts": { "scripts": {
"dev": "vite --host", "dev": "vite --host",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview",
"format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"aplayer": "^1.10.1", "aplayer": "^1.10.1",
@ -33,6 +34,7 @@
"unplugin-vue-components": "^0.22.8", "unplugin-vue-components": "^0.22.8",
"vite": "^4.4.5", "vite": "^4.4.5",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-pwa": "^0.14.1" "vite-plugin-pwa": "^0.14.1",
"prettier": "^3.0.2"
} }
} }

9
pnpm-lock.yaml
View File

@ -46,6 +46,9 @@ devDependencies:
'@vitejs/plugin-vue': '@vitejs/plugin-vue':
specifier: ^4.2.3 specifier: ^4.2.3
version: 4.2.3(vite@4.4.9)(vue@3.3.4) version: 4.2.3(vite@4.4.9)(vue@3.3.4)
prettier:
specifier: ^3.0.2
version: 3.0.2
sass: sass:
specifier: ^1.55.0 specifier: ^1.55.0
version: 1.55.0 version: 1.55.0
@ -3289,6 +3292,12 @@ packages:
source-map-js: 1.0.2 source-map-js: 1.0.2
dev: true dev: true
/prettier@3.0.2:
resolution: {integrity: sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==}
engines: {node: '>=14'}
hasBin: true
dev: true
/pretty-bytes@5.6.0: /pretty-bytes@5.6.0:
resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==} resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
engines: {node: '>=6'} engines: {node: '>=6'}

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"
}] }
]

40
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); store.setImgLoadStatus(true);
}, Math.floor(Math.random() * (600 - 300 + 1)) + 300); },
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();

22
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();

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 {

22
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';
} }
} }
} }

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>

57
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,8 +98,7 @@ 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);
@ -117,23 +116,22 @@ onMounted(() => {
}); });
}); });
console.log( console.log(
"音乐加载完成", '音乐加载完成',
playList.value, playList.value,
playIndex.value, playIndex.value,
playListCount.value, playListCount.value,
props.volume 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);
}); });

24
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);

16
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',
], ],
}, },
}); });

7
src/style/global.scss
View File

@ -1,7 +1,7 @@
// scss 全局变量 // scss 全局变量
// 响应式布局 // 响应式布局
@mixin changeWidth($maxWidth:1200px) { @mixin changeWidth($maxWidth: 1200px) {
.container { .container {
max-width: $maxWidth; max-width: $maxWidth;
} }
@ -19,17 +19,16 @@
/* 小于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;

45
src/utils/cursor.js
View File

@ -4,18 +4,16 @@ 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] :
el.currentStyle[attr];
} catch (e) {} } catch (e) {}
return ""; 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();
@ -24,34 +22,33 @@ class Cursor {
} }
move(left, top) { move(left, top) {
this.cursor.style["left"] = `${left}px`; this.cursor.style['left'] = `${left}px`;
this.cursor.style["top"] = `${top}px`; this.cursor.style['top'] = `${top}px`;
} }
create() { create() {
if (!this.cursor) { if (!this.cursor) {
this.cursor = document.createElement("div"); this.cursor = document.createElement('div');
this.cursor.id = "cursor"; this.cursor.id = 'cursor';
this.cursor.classList.add("xs-hidden"); this.cursor.classList.add('xs-hidden');
this.cursor.classList.add("hidden"); this.cursor.classList.add('hidden');
document.body.append(this.cursor); document.body.append(this.cursor);
} }
var el = document.getElementsByTagName('*'); var el = document.getElementsByTagName('*');
for (let i = 0; i < el.length; i++) for (let i = 0; i < el.length; i++)
if (getStyle(el[i], "cursor") == "pointer") if (getStyle(el[i], 'cursor') == 'pointer') this.pt.push(el[i].outerHTML);
this.pt.push(el[i].outerHTML);
document.body.appendChild((this.scr = document.createElement("style"))); document.body.appendChild((this.scr = document.createElement('style')));
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}`; 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}`;
} }
refresh() { refresh() {
this.scr.remove(); this.scr.remove();
this.cursor.classList.remove("active"); this.cursor.classList.remove('active');
this.pos = { this.pos = {
curr: null, curr: null,
prev: null prev: null,
}; };
this.pt = []; this.pt = [];
@ -61,18 +58,18 @@ class Cursor {
} }
init() { init() {
document.onmousemove = e => { document.onmousemove = (e) => {
(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr == null && this.move(e.clientX - 8, e.clientY - 8);
this.pos.curr = { this.pos.curr = {
x: e.clientX - 8, x: e.clientX - 8,
y: e.clientY - 8 y: e.clientY - 8,
}; };
this.cursor.classList.remove("hidden"); this.cursor.classList.remove('hidden');
}; };
document.onmouseenter = e => this.cursor.classList.remove("hidden"); document.onmouseenter = (e) => this.cursor.classList.remove('hidden');
document.onmouseleave = e => this.cursor.classList.add("hidden"); document.onmouseleave = (e) => this.cursor.classList.add('hidden');
document.onmousedown = e => this.cursor.classList.add("active"); document.onmousedown = (e) => this.cursor.classList.add('active');
document.onmouseup = e => this.cursor.classList.remove("active"); document.onmouseup = (e) => this.cursor.classList.remove('active');
} }
render() { render() {

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 {

6
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>

11
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%;

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 {