Merge pull request #100 from imsyy/dev

Dev
This commit is contained in:
底层用户 2023-03-09 18:29:33 +08:00 committed by GitHub
commit e3af10fb68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 141 additions and 771 deletions

9
.env
View File

@ -1,8 +1,14 @@
# 站点名称 # 站点名称
VITE_SITE_NAME = "無名の主页" VITE_SITE_NAME = "無名の主页"
VITE_SITE_ANTHOR = "無名"
VITE_SITE_KEYWORDS = "無名,个人主页"
VITE_SITE_DES = "一个默默无闻的主页"
VITE_SITE_URL = "imsyy.top" VITE_SITE_URL = "imsyy.top"
VITE_SITE_LOGO = "/images/icon/logo.png" VITE_SITE_LOGO = "/images/icon/logo.png"
# 百度统计(若不需要可不填)
VITE_SITE_BAIDUTONGJI = "14e9f35ff8bc67fd4bcb5f07a6e6655a"
# 简介文本 # 简介文本
VITE_DESC_HELLO = "Hello World !" VITE_DESC_HELLO = "Hello World !"
VITE_DESC_TEXT = "一个建立于 21 世纪的小站,存活于互联网的边缘" VITE_DESC_TEXT = "一个建立于 21 世纪的小站,存活于互联网的边缘"
@ -25,8 +31,9 @@ VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
VITE_SITE_START = "2020-10-24" VITE_SITE_START = "2020-10-24"
# 歌曲 API 地址 # 歌曲 API 地址
## 请参照 https://github.com/imsyy/Meting-API#cloudflare-workers 进行 API 服务部署 ## 请参照 https://github.com/xizeyoupan/Meting-API#deno-deploy 进行 API 服务部署
## 此处提供的服务可能会超量从而无法访问,请自行部署 ## 此处提供的服务可能会超量从而无法访问,请自行部署
## 若使用QQ音乐歌单歌曲数量最好不要超出50首
## 备用https://api.wuenci.com/meting/api/ ## 备用https://api.wuenci.com/meting/api/
VITE_SONG_API = "https://api-meting.imsyy.top/api" VITE_SONG_API = "https://api-meting.imsyy.top/api"
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 ) # 歌曲服务器 ( netease-网易云, tencent-qq音乐 )

View File

@ -33,13 +33,16 @@
* **安装** [node.js](https://nodejs.org/zh-cn/) **环境** * **安装** [node.js](https://nodejs.org/zh-cn/) **环境**
> node > 16.16.0 > node > 16.16.0
> npm > 8.15.0 > npm > 8.15.0
* 然后以 **管理员权限** 运行 `cmd` 终端,并 `cd` 到 项目根目录 * 然后以 **管理员权限** 运行 `cmd` 终端,并 `cd` 到 项目根目录
* 在 `终端` 中输入: * 在 `终端` 中输入:
```bash ```bash
# 安装 yarn
npm install -g yarn
# 安装依赖 # 安装依赖
yarn install yarn install

View File

@ -6,9 +6,9 @@
<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" />
<meta name="description" content="一个默默无闻的主页" /> <meta name="description" content="<%- description %>" />
<meta name="keywords" content="無名,个人主页" /> <meta name="keywords" content="<%- keywords %>" />
<meta name="author" content="無名" /> <meta name="author" content="<%- author %>" />
<meta name="theme-color" content="#424242" /> <meta name="theme-color" content="#424242" />
<title><%- title %></title> <title><%- title %></title>
<!-- HarmonyOS Sans --> <!-- HarmonyOS Sans -->
@ -24,16 +24,18 @@
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>
<% if (tongji) { %>
<!-- 百度统计 --> <!-- 百度统计 -->
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function () {
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?14e9f35ff8bc67fd4bcb5f07a6e6655a"; hm.src = "https://hm.baidu.com/hm.js?<%- tongji %>";
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
})(); })();
</script> </script>
<% } %>
</head> </head>
<body class="loading"> <body class="loading">

View File

@ -4,7 +4,7 @@
"github": "https://github.com/imsyy/home", "github": "https://github.com/imsyy/home",
"home": "https://imsyy.top", "home": "https://imsyy.top",
"private": true, "private": true,
"version": "4.0.2", "version": "4.0.3",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --host", "dev": "vite --host",
@ -16,6 +16,7 @@
"aplayer": "^1.10.1", "aplayer": "^1.10.1",
"axios": "^1.1.3", "axios": "^1.1.3",
"element-plus": "^2.2.18", "element-plus": "^2.2.18",
"fetch-jsonp": "^1.2.3",
"pinia": "^2.0.23", "pinia": "^2.0.23",
"pinia-plugin-persistedstate": "^3.0.0", "pinia-plugin-persistedstate": "^3.0.0",
"terser": "^5.16.1", "terser": "^5.16.1",

View File

@ -18,9 +18,14 @@
"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",
"icon": "/images/icon/twitter.png",
"tip": "你懂的 ~",
"url": "https://twitter.com/iimmsyy"
}, { }, {
"name": "Telegram", "name": "Telegram",
"icon": "/images/icon/telegram.png", "icon": "/images/icon/telegram.png",
"tip": "你懂的 ~", "tip": "你懂的 ~",
"url": "https://twitter.com/iimmsyy" "url": "https://t.me/bottom_user"
}] }]

View File

@ -1,4 +1,5 @@
// import axios from "axios"; // import axios from "axios";
import fetchJsonp from "fetch-jsonp";
/** /**
* 音乐播放器 * 音乐播放器
@ -6,9 +7,38 @@
// 获取音乐播放列表 // 获取音乐播放列表
export const getPlayerList = async (server, type, id) => { export const getPlayerList = async (server, type, id) => {
const res = await fetch(`${import.meta.env.VITE_SONG_API}?server=${server}&type=${type}&id=${id}`); const res = await fetch(
return await res.json(); `${import.meta.env.VITE_SONG_API}?server=${server}&type=${type}&id=${id}`
} );
const data = await res.json();
if (data[0].url.startsWith("@")) {
const [handle, jsonpCallback, jsonpCallbackFunction, url] = data[0].url
.split("@")
.slice(1);
const jsonpData = await fetchJsonp(url).then((res) => res.json());
const domain = (
jsonpData.req_0.data.sip.find((i) => !i.startsWith("http://ws")) ||
jsonpData.req_0.data.sip[0]
).replace("http://", "https://");
return data.map((v, i) => ({
title: v.name || v.title,
artist: v.artist || v.author,
src: domain + jsonpData.req_0.data.midurlinfo[i].purl,
pic: v.pic,
lrc: v.lrc,
}));
} else {
return data.map((v) => ({
title: v.name || v.title,
artist: v.artist || v.author,
src: v.url,
pic: v.pic,
lrc: v.lrc,
}));
}
};
/** /**
* 一言 * 一言
@ -16,26 +46,27 @@ 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();
} };
/** /**
* 天气 * 天气
*/ */
// 获取高德地理位置信息 // 获取高德地理位置信息
export const getAdcode = async (key) => { export const getAdcode = async (key) => {
const res = await fetch(`https://restapi.amap.com/v3/ip?key=${key}`); const res = await fetch(`https://restapi.amap.com/v3/ip?key=${key}`);
return await res.json(); return await res.json();
} };
// 获取高德地理天气信息 // 获取高德地理天气信息
export const getWeather = async (key, city) => { export const getWeather = async (key, city) => {
const res = await fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`); const res = await fetch(
return await res.json(); `https://restapi.amap.com/v3/weather/weatherInfo?key=${key}&city=${city}`
} );
return await res.json();
};
/** /**
* 获取配置 * 获取配置
@ -43,6 +74,6 @@ export const getWeather = async (key, city) => {
// 获取社交链接 // 获取社交链接
export const getSocialLinks = async () => { export const getSocialLinks = async () => {
const res = await fetch("/socialLinks.json"); const res = await fetch("/socialLinks.json");
return await res.json(); return await res.json();
} };

View File

@ -1,375 +0,0 @@
<template>
<!-- 音乐控制面板 -->
<div
class="music"
@mouseenter="volumeShow = true"
@mouseleave="volumeShow = false"
v-show="store.musicOpenState"
>
<div class="btns">
<span @click="musicListShow = true">音乐列表</span>
<span @click="store.musicOpenState = false">回到一言</span>
</div>
<div class="control">
<go-start
theme="filled"
size="30"
fill="#efefef"
@click="changeMusicIndex(0)"
/>
<div class="state" @click="changePlayState">
<play-one
theme="filled"
size="50"
fill="#efefef"
v-show="!store.playerState"
/>
<pause
theme="filled"
size="50"
fill="#efefef"
v-show="store.playerState"
/>
</div>
<go-end
theme="filled"
size="30"
fill="#efefef"
@click="changeMusicIndex(1)"
/>
</div>
<div class="menu">
<div class="name" v-show="!volumeShow">
<span>{{
store.getPlayerData.name
? store.getPlayerData.name + " - " + store.getPlayerData.artist
: "未播放音乐"
}}</span>
</div>
<div class="volume" v-show="volumeShow">
<div class="icon">
<volume-mute
theme="filled"
size="24"
fill="#efefef"
v-if="volumeNum == 0"
/>
<volume-small
theme="filled"
size="24"
fill="#efefef"
v-else-if="volumeNum > 0 && volumeNum < 0.7"
/>
<volume-notice theme="filled" size="24" fill="#efefef" v-else />
</div>
<el-slider
v-model="volumeNum"
:show-tooltip="false"
:min="0"
:max="1"
:step="0.01"
/>
</div>
</div>
</div>
<!-- 音乐列表弹窗 -->
<Transition name="fade">
<div
class="music-list"
v-show="musicListShow"
@click="musicListShow = false"
>
<Transition name="zoom">
<div class="list" v-show="musicListShow" @click.stop>
<close-one
class="close"
theme="filled"
size="28"
fill="#ffffff60"
@click="musicListShow = false"
/>
<Player
:songServer="playerData.server"
:songType="playerData.type"
:songId="playerData.id"
ref="playerRef"
/>
<div class="error" v-if="!store.musicIsOk">
<play-wrong theme="outline" size="60" />
<span>音乐播放器加载失败</span>
</div>
</div>
</Transition>
</div>
</Transition>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import {
GoStart,
PlayOne,
Pause,
GoEnd,
CloseOne,
VolumeMute,
VolumeSmall,
VolumeNotice,
PlayWrong,
} from "@icon-park/vue-next";
import Player from "@/components/Player/old.vue";
import { mainStore } from "@/store";
const store = mainStore();
//
let volumeShow = ref(false);
let volumeNum = ref(
localStorage.getItem("aplayer-setting")
? JSON.parse(localStorage.getItem("aplayer-setting")).volume
: 0.7
);
//
let musicListShow = ref(false);
const playerRef = ref(null);
const musicDialog = ref(null);
const playerData = reactive({
server: import.meta.env.VITE_SONG_SERVER,
type: import.meta.env.VITE_SONG_TYPE,
id: import.meta.env.VITE_SONG_ID,
});
//
const changePlayState = () => {
playerRef.value.playToggle();
};
//
const changeMusicIndex = (type) => {
if (type) {
playerRef.value.changeSongPrev();
} else {
playerRef.value.changeSongNext();
}
};
onMounted(() => {
//
window.addEventListener("keydown", (e) => {
if (e.code == "Space" && store.musicIsOk) {
changePlayState();
}
});
});
//
watch(
() => volumeNum.value,
(value) => {
console.log(value);
playerRef.value.changeVolume(value);
}
);
</script>
<style lang="scss" scoped>
.music {
width: 100%;
height: 100%;
background: #00000040;
backdrop-filter: blur(10px);
border-radius: 6px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
animation: fade;
-webkit-animation: fade 0.5s;
.btns {
display: flex;
align-items: center;
margin-bottom: 6px;
span {
background: #ffffff26;
padding: 2px 8px;
border-radius: 6px;
margin: 0px 6px;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
&:hover {
background: #ffffff4d;
}
}
}
.control {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
width: 100%;
.state {
.i-icon {
width: 50px;
height: 50px;
display: block;
}
}
.i-icon {
width: 36px;
height: 36px;
display: flex;
border-radius: 6px;
align-items: center;
justify-content: center;
border-radius: 6px;
transform: scale(1);
&:hover {
background: #ffffff33;
}
&:active {
transform: scale(0.95);
}
}
}
.menu {
height: 26px;
width: 100%;
line-height: 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.name {
width: 100%;
text-align: center;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
// font-size: 1.1rem;
animation: fade;
-webkit-animation: fade 0.3s;
}
.volume {
width: 100%;
padding: 0 12px;
display: flex;
align-items: center;
flex-direction: row;
animation: fade;
-webkit-animation: fade 0.3s;
.icon {
margin-right: 12px;
span {
width: 24px;
height: 24px;
display: block;
}
}
:deep(*) {
transition: none;
}
:deep(.el-slider__button) {
transition: 0.3s;
}
.el-slider {
margin-right: 12px;
--el-slider-main-bg-color: #efefef;
--el-slider-runway-bg-color: #ffffff40;
--el-slider-button-size: 16px;
}
}
}
}
.music-list {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%;
background-color: #00000080;
backdrop-filter: blur(20px);
z-index: 1;
.list {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: calc(50% - 300px);
left: calc(50% - 320px);
width: 640px;
height: 600px;
background-color: #ffffff66;
border-radius: 6px;
z-index: 999;
.close {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
display: block;
&:hover {
transform: scale(1.2);
}
&:active {
transform: scale(0.95);
}
}
.error {
display: flex;
flex-direction: column;
align-items: center;
.i-icon {
margin-bottom: 20px;
}
}
}
}
//
.fade-enter-active {
animation: fade 0.3s ease-in-out;
}
.fade-leave-active {
animation: fade 0.3s ease-in-out reverse;
}
.zoom-enter-active {
animation: zoom 0.4s ease-in-out;
}
.zoom-leave-active {
animation: zoom 0.3s ease-in-out reverse;
}
@keyframes zoom {
0% {
opacity: 0;
transform: scale(0) translateY(-600px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
</style>

View File

@ -18,19 +18,12 @@
@onSelectSong="onSelectSong" @onSelectSong="onSelectSong"
/> />
</template> </template>
<script setup> <script setup>
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
import aplayer from "vue3-aplayer"; import aplayer from "vue3-aplayer";
import { import fetchJsonp from "fetch-jsonp";
h, import { h, ref, nextTick, onMounted } from "vue";
ref, import { MusicOne, PlayWrong } from "@icon-park/vue-next";
reactive,
nextTick,
onMounted,
onBeforeUnmount,
watch,
} from "vue";
import { getPlayerList } from "@/api"; import { getPlayerList } from "@/api";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
@ -107,42 +100,46 @@ const props = defineProps({
// //
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
getPlayerList(props.songServer, props.songType, props.songId) try {
.then((res) => { getPlayerList(props.songServer, props.songType, props.songId).then(
// (res) => {
playIndex.value = Math.floor(Math.random() * res.length); console.log(res);
playListCount.value = res.length; //
// playIndex.value = Math.floor(Math.random() * res.length);
store.musicIsOk = true; playListCount.value = res.length;
console.log( //
"音乐加载完成", store.musicIsOk = true;
res, //
playIndex.value, res.forEach((v) => {
playListCount.value, playList.value.push({
props.volume title: v.name || v.title,
); artist: v.artist || v.author,
// src: v.url || v.src,
res.forEach((v) => { pic: v.pic,
playList.value.push({ lrc: v.lrc,
title: v.name || v.title, });
artist: v.artist || v.author,
src: v.url,
pic: v.pic,
lrc: v.lrc,
}); });
}); console.log(
}) "音乐加载完成",
.catch(() => { playList.value,
store.musicIsOk = false; playIndex.value,
ElMessage({ playListCount.value,
message: "播放器加载失败", props.volume
grouping: true, );
icon: h(PlayWrong, { }
theme: "filled", );
fill: "#efefef", } catch (err) {
}), console.error(err);
}); store.musicIsOk = false;
ElMessage({
message: "播放器加载失败",
grouping: true,
icon: h(PlayWrong, {
theme: "filled",
fill: "#efefef",
}),
}); });
}
}); });
}); });
@ -213,8 +210,8 @@ const changeSong = (type) => {
// //
defineExpose({ playToggle, changeVolume, changeSong }); defineExpose({ playToggle, changeVolume, changeSong });
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.aplayer { .aplayer {
width: 80%; width: 80%;
background: transparent; background: transparent;
@ -226,7 +223,7 @@ defineExpose({ playToggle, changeVolume, changeSong });
.aplayer-info { .aplayer-info {
margin-left: 0; margin-left: 0;
background-color: #ffffff40; background-color: #ffffff40;
border-color: transparent; border-color: transparent !important;
.aplayer-music { .aplayer-music {
flex-grow: initial; flex-grow: initial;
margin-bottom: 2px; margin-bottom: 2px;
@ -296,4 +293,4 @@ defineExpose({ playToggle, changeVolume, changeSong });
} }
} }
} }
</style> </style>

View File

@ -1,319 +0,0 @@
<template>
<div ref="playerRef"></div>
</template>
<script setup>
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
import APlayer from "APlayer";
import "aplayer/dist/APlayer.min.css";
import {
h,
ref,
reactive,
nextTick,
onMounted,
onBeforeUnmount,
watch,
} from "vue";
import { getPlayerList } from "@/api";
import { mainStore } from "@/store";
const store = mainStore();
const playerRef = ref();
const state = reactive({
instance: null,
});
const playerData = reactive({
name: null,
artist: null,
lrc: null,
});
// APlayer
class Audio {
//
// artist: String;
//
// name: String;
//
// url: String;
//
// cover: String;
//
// lrc: String;
constructor(artist, name, url, cover, lrc) {
this.artist = artist;
this.name = name;
this.url = url;
this.cover = cover;
this.lrc = lrc;
}
}
const props = defineProps({
//
fixed: {
type: Boolean,
default: false,
},
//
mini: {
type: Boolean,
default: false,
},
//
autoplay: {
type: Boolean,
default: false,
},
//
theme: {
type: String,
default: "#efefef",
},
//
loop: {
type: String,
default: "all", //'all' | 'one' | 'none'
},
//
order: {
type: String,
default: "random", //'list' | 'random'
},
//
preload: {
type: String,
default: "auto", //'auto' | 'metadata' | 'none'
},
//
volume: {
type: Number,
default: 0.7,
validator: (value) => {
return value >= 0 && value <= 1;
},
},
// ( netease-, tencent-qq, kugou-, xiami-, baidu- )
songServer: {
type: String,
default: "netease", //'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'
},
// ( song-, playlist-, album-, search-, artist- )
songType: {
type: String,
default: "playlist",
},
// id
songId: {
type: String,
default: "7452421335",
},
//
mutex: {
type: Boolean,
default: true,
},
//
lrcType: {
type: Number,
default: 3,
},
//
listFolded: {
type: Boolean,
default: false,
},
//
listMaxHeight: {
type: String,
default: "420px",
},
// localStorage key
storageName: {
type: String,
default: "aplayer-setting",
},
});
//
onMounted(() => {
nextTick(() => {
getPlayerList(props.songServer, props.songType, props.songId)
.then((res) => {
// console.log(res);
//
store.musicIsOk = true;
console.log("音乐加载完成");
let audioList = res.map(
(value) =>
new Audio(value.artist, value.name, value.url, value.pic, value.lrc)
);
state.instance = new APlayer({
container: playerRef.value,
fixed: props.fixed,
mini: props.mini,
autoplay: props.autoplay,
theme: props.theme,
loop: props.loop,
order: props.order,
preload: props.preload,
volume: props.volume,
mutex: props.mutex,
lrcType: props.lrcType,
listFolded: props.listFolded,
listMaxHeight: props.listMaxHeight,
storageName: props.storageName,
audio: audioList,
});
state.instance.on("play", () => {
//
store.setPlayerState(state.instance.audio.paused);
//
store.setPlayerData(
playerRef.value.getElementsByClassName("aplayer-title")[0]
.innerHTML,
playerRef.value
.getElementsByClassName("aplayer-author")[0]
.innerHTML.split("-")[1]
.trim()
);
ElMessage({
message:
store.getPlayerData.name + " - " + store.getPlayerData.artist,
grouping: true,
icon: h(MusicOne, {
theme: "filled",
fill: "#efefef",
}),
});
});
state.instance.on("pause", () => {
//
store.setPlayerState(state.instance.audio.paused);
});
state.instance.on("timeupdate", () => {
if (playerRef.value) {
playerData.lrc = playerRef.value.getElementsByClassName(
"aplayer-lrc-current"
)[0].innerHTML;
}
});
})
.catch(() => {
store.musicIsOk = false;
ElMessage({
message: "播放器加载失败",
grouping: true,
icon: h(PlayWrong, {
theme: "filled",
fill: "#efefef",
}),
});
});
});
});
//
onBeforeUnmount(() => {
state.instance.destroy();
});
//
const playToggle = () => {
state.instance.toggle();
};
//
const changeVolume = (value) => {
state.instance.volume(value);
};
//
const changeSongPrev = () => {
state.instance.skipBack();
};
const changeSongNext = () => {
state.instance.skipForward();
};
//
defineExpose({ playToggle, changeVolume, changeSongPrev, changeSongNext });
//
watch(
() => playerData.lrc,
(value) => {
console.log(value);
// pinia
store.setPlayerLrc(value);
}
);
</script>
<style lang='scss' scoped>
.aplayer {
width: 80%;
background: transparent;
border-radius: 6px;
:deep(.aplayer-body) {
.aplayer-pic {
display: none;
}
.aplayer-info {
margin-left: 0;
background-color: #ffffff40;
border-color: transparent;
.aplayer-title {
font-size: 16px;
}
.aplayer-author {
color: #efefef;
}
.aplayer-lrc {
text-align: left;
margin: 4px 0 0 6px;
height: 38px;
&::before,
&::after {
display: none;
}
p {
color: #efefef;
}
.aplayer-lrc-current {
font-size: 0.95rem;
margin-bottom: 4px !important;
}
}
.aplayer-controller {
display: none;
}
}
}
:deep(.aplayer-list) {
margin-top: 6px;
ol {
li {
border-color: transparent;
&.aplayer-list-light {
background: #ffffff40;
border-radius: 6px;
}
&:hover {
background: #ffffff26 !important;
border-radius: 6px !important;
}
.aplayer-list-index,
.aplayer-list-author {
color: #efefef;
}
}
}
}
}
</style>

View File

@ -14,4 +14,11 @@ const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); pinia.use(piniaPluginPersistedstate);
app.use(pinia); app.use(pinia);
app.mount('#app') app.mount('#app')
// PWA
navigator.serviceWorker.addEventListener('controllerchange', () => {
// 弹出更新提醒
console.log("站点已更新,刷新后生效");
ElMessage("站点已更新,刷新后生效");
})

View File

@ -36,6 +36,10 @@ export default ({
inject: { inject: {
data: { data: {
title: loadEnv(mode, process.cwd()).VITE_SITE_NAME, title: loadEnv(mode, process.cwd()).VITE_SITE_NAME,
author: loadEnv(mode, process.cwd()).VITE_SITE_ANTHOR,
keywords: loadEnv(mode, process.cwd()).VITE_SITE_KEYWORDS,
description: loadEnv(mode, process.cwd()).VITE_SITE_DES,
tongji: loadEnv(mode, process.cwd()).VITE_SITE_BAIDUTONGJI,
}, },
}, },
}), }),
@ -46,6 +50,8 @@ export default ({
navigateFallbackAllowlist: [/^index.html$/] navigateFallbackAllowlist: [/^index.html$/]
}, },
workbox: { workbox: {
skipWaiting: true,
clientsClaim: true,
runtimeCaching: [{ runtimeCaching: [{
urlPattern: /(.*?)\.(js|css|woff2|woff|ttf)/, // js / css 静态资源缓存 urlPattern: /(.*?)\.(js|css|woff2|woff|ttf)/, // js / css 静态资源缓存
handler: 'CacheFirst', handler: 'CacheFirst',
@ -63,9 +69,9 @@ export default ({
], ],
}, },
manifest: { manifest: {
"name": "無名の主页", "name": loadEnv(mode, process.cwd()).VITE_SITE_NAME,
"short_name": "無名の主页", "short_name": loadEnv(mode, process.cwd()).VITE_SITE_NAME,
"description": "一个默默无闻的主页", "description": loadEnv(mode, process.cwd()).VITE_SITE_DES,
"display": "standalone", "display": "standalone",
"start_url": "/", "start_url": "/",
"theme_color": "#424242", "theme_color": "#424242",

View File

@ -2024,6 +2024,11 @@ fastq@^1.6.0:
dependencies: dependencies:
reusify "^1.0.4" reusify "^1.0.4"
fetch-jsonp@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/fetch-jsonp/-/fetch-jsonp-1.2.3.tgz#ae99a867095cb1ce5c39fac601d70d1084db122f"
integrity sha512-C13k1o7R9JTN1wmhKkrW5bU/00LwixXnkufQUR6Rbf4KCS0i8mycQaovt4WVbHnA2NKgi7Ryp9Whpy/CGcij6Q==
filelist@^1.0.1: filelist@^1.0.1:
version "1.0.4" version "1.0.4"
resolved "https://registry.npmmirror.com/filelist/-/filelist-1.0.4.tgz" resolved "https://registry.npmmirror.com/filelist/-/filelist-1.0.4.tgz"