perf: 优化部分变量 & feat: 新增一个设置项 #124

This commit is contained in:
imsyy 2023-04-21 16:37:08 +08:00
parent db0d3b92ae
commit acc8f54ef9
18 changed files with 145 additions and 125 deletions

2
.env
View File

@ -24,7 +24,7 @@ VITE_DESC_TEXT_OTHER = "哎呀,这都被你发现了( 再点击一次可关
# 天气 Key # 天气 Key
## 请前往高德开放平台注册 Web服务 Key免费的 ## 请前往高德开放平台注册 Web服务 Key免费的
## 请各位大佬行行好,别再让我超量了 ## 请各位大佬行行好,别再让我超量了
VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a" VITE_WEATHER_KEY = "6c13af6fc30868bee488faf2cc652ab4"
# 建站日期 # 建站日期
## 请按照 YYYY-MM-DD 格式填写 ## 请按照 YYYY-MM-DD 格式填写

View File

@ -65,7 +65,7 @@ onMounted(() => {
// //
document.getElementsByTagName("body")[0].className = ""; document.getElementsByTagName("body")[0].className = "";
// //
let loadingBox = document.getElementById("loading-box"); const loadingBox = document.getElementById("loading-box");
loadingBox.classList.add("loaded"); loadingBox.classList.add("loaded");
}); });

View File

@ -20,7 +20,7 @@ import { SuccessPicture } from "@icon-park/vue-next";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
let bgUrl = ref(null); // const bgUrl = ref(null); //
const changeBg = (type) => { const changeBg = (type) => {
if (type == 0) { if (type == 0) {

View File

@ -35,7 +35,7 @@ import { mainStore } from "@/store";
import config from "@/../package.json"; import config from "@/../package.json";
const store = mainStore(); const store = mainStore();
let fullYear = new Date().getFullYear(); const fullYear = new Date().getFullYear();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -34,17 +34,14 @@ import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
// //
let openMusicShow = ref(false); const openMusicShow = ref(false);
// //
let hitokotoData = reactive({ const hitokotoData = reactive({
text: "这里应该显示一句话", text: "这里应该显示一句话",
from: "無名", from: "無名",
}); });
//
const openMusic = () => {};
// //
const getHitokotoData = () => { const getHitokotoData = () => {
getHitokoto() getHitokoto()

View File

@ -11,7 +11,7 @@
:span="8" :span="8"
v-for="(item, index) in linksData" v-for="(item, index) in linksData"
:key="item" :key="item"
@click="jumpLink(item.link)" @click="jumpLink(item)"
> >
<div <div
class="item cards" class="item cards"
@ -28,7 +28,6 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import { Icon } from "@vicons/utils"; import { Icon } from "@vicons/utils";
import { import {
Link, Link,
@ -39,10 +38,12 @@ import {
Book, Book,
Fire, Fire,
} from "@vicons/fa"; } from "@vicons/fa";
import { mainStore } from "@/store";
const store = mainStore();
// //
// 6 // 6
let linksData = [ const linksData = [
{ {
icon: Blog, icon: Blog,
name: "博客", name: "博客",
@ -76,8 +77,12 @@ let linksData = [
]; ];
// //
const jumpLink = (url) => { const jumpLink = (data) => {
window.open(url, "_blank"); if (data.name === "音乐" && store.musicClick) {
if ($openList) $openList();
} else {
window.open(data.link, "_blank");
}
}; };
</script> </script>
@ -112,6 +117,11 @@ const jumpLink = (url) => {
background: rgb(0 0 0 / 40%); background: rgb(0 0 0 / 40%);
transition: 0.3s; transition: 0.3s;
} }
&:active {
transform: scale(1);
}
.name { .name {
font-size: 1.1rem; font-size: 1.1rem;
margin-left: 8px; margin-left: 8px;

View File

@ -36,12 +36,12 @@ import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
// logo // logo
let siteLogo = import.meta.env.VITE_SITE_LOGO; const siteLogo = import.meta.env.VITE_SITE_LOGO;
// //
let siteUrl = import.meta.env.VITE_SITE_URL.split("."); const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
// //
let descriptionText = reactive({ const descriptionText = reactive({
hello: import.meta.env.VITE_DESC_HELLO, hello: import.meta.env.VITE_DESC_HELLO,
text: import.meta.env.VITE_DESC_TEXT, text: import.meta.env.VITE_DESC_TEXT,
}); });

View File

@ -7,7 +7,7 @@
v-show="store.musicOpenState" v-show="store.musicOpenState"
> >
<div class="btns"> <div class="btns">
<span @click="musicListShow = true">音乐列表</span> <span @click="openMusicList()">音乐列表</span>
<span @click="store.musicOpenState = false">回到一言</span> <span @click="store.musicOpenState = false">回到一言</span>
</div> </div>
<div class="control"> <div class="control">
@ -103,7 +103,7 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, watch, onMounted, nextTick } from "vue"; import { ref, reactive, watch, onMounted } from "vue";
import { import {
GoStart, GoStart,
PlayOne, PlayOne,
@ -119,19 +119,23 @@ import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
// //
let volumeShow = ref(false); const volumeShow = ref(false);
let volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7); const volumeNum = ref(store.musicVolume ? store.musicVolume : 0.7);
// //
let musicListShow = ref(false); const musicListShow = ref(false);
const playerRef = ref(null); const playerRef = ref(null);
const musicDialog = ref(null);
const playerData = reactive({ const playerData = reactive({
server: import.meta.env.VITE_SONG_SERVER, server: import.meta.env.VITE_SONG_SERVER,
type: import.meta.env.VITE_SONG_TYPE, type: import.meta.env.VITE_SONG_TYPE,
id: import.meta.env.VITE_SONG_ID, id: import.meta.env.VITE_SONG_ID,
}); });
//
const openMusicList = () => {
musicListShow.value = true;
};
// //
const changePlayState = () => { const changePlayState = () => {
playerRef.value.playToggle(); playerRef.value.playToggle();
@ -149,6 +153,8 @@ onMounted(() => {
changePlayState(); changePlayState();
} }
}); });
// window
window.$openList = openMusicList;
}); });
// //

View File

@ -33,12 +33,12 @@ const store = mainStore();
const player = ref(null); const player = ref(null);
// //
let playList = ref([]); const playList = ref([]);
let playerLrc = ref(""); const playerLrc = ref("");
// //
let playIndex = ref(0); const playIndex = ref(0);
let playListCount = ref(0); const playListCount = ref(0);
// //
const props = defineProps({ const props = defineProps({
@ -216,6 +216,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;
:deep(.aplayer-body) { :deep(.aplayer-body) {
.aplayer-pic { .aplayer-pic {
display: none; display: none;

View File

@ -21,6 +21,15 @@
:inactive-icon="CloseSmall" :inactive-icon="CloseSmall"
/> />
</div> </div>
<div class="item">
<span class="text">音乐点击是否打开面板</span>
<el-switch
v-model="musicClick"
inline-prompt
:active-icon="CheckSmall"
:inactive-icon="CloseSmall"
/>
</div>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="其他设置" name="3"> <el-collapse-item title="其他设置" name="3">
<div>设置内容待增加</div> <div>设置内容待增加</div>
@ -39,11 +48,11 @@ import { CheckSmall, CloseSmall } from "@icon-park/vue-next";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
const store = mainStore(); const store = mainStore();
const { siteStartShow } = storeToRefs(store); const { siteStartShow, musicClick } = storeToRefs(store);
// //
let activeName = ref("1"); const activeName = ref("1");
let bgSet = ref("0"); const bgSet = ref("0");
onMounted(() => { onMounted(() => {
bgSet.value = store.coverType.toString(); bgSet.value = store.coverType.toString();

View File

@ -23,8 +23,8 @@ import { getSocialLinks } from "@/api";
import { Error } from "@icon-park/vue-next"; import { Error } from "@icon-park/vue-next";
// //
let socialLinksData = ref([]); const socialLinksData = ref([]);
let socialTip = ref("通过这里联系我吧"); const socialTip = ref("通过这里联系我吧");
// //
const getSocialLinksData = () => { const getSocialLinksData = () => {

View File

@ -61,13 +61,13 @@ import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
// //
let timeData = ref(getTimeCapsule()); const timeData = ref(getTimeCapsule());
let startDate = ref(import.meta.env.VITE_SITE_START); const startDate = ref(import.meta.env.VITE_SITE_START);
let startDateText = ref(null); const startDateText = ref(null);
let timeInterval = null; const timeInterval = ref(null);
onMounted(() => { onMounted(() => {
timeInterval = 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));
@ -75,7 +75,7 @@ onMounted(() => {
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timeInterval); clearInterval(timeInterval.value);
}); });
</script> </script>

View File

@ -20,10 +20,10 @@ import { getAdcode, getWeather } from "@/api";
import { Error } from "@icon-park/vue-next"; import { Error } from "@icon-park/vue-next";
// Key // Key
let mainKey = import.meta.env.VITE_WEATHER_KEY; const mainKey = import.meta.env.VITE_WEATHER_KEY;
// //
let weatherData = reactive({ const weatherData = reactive({
adCode: { adCode: {
city: null, // city: null, //
adcode: null, // adcode: null, //

View File

@ -1,6 +1,4 @@
import { import { defineStore } from "pinia";
defineStore
} from "pinia";
export const mainStore = defineStore("main", { export const mainStore = defineStore("main", {
state: () => { state: () => {
@ -20,7 +18,8 @@ export const mainStore = defineStore("main", {
playerTitle: null, // 当前播放歌曲名 playerTitle: null, // 当前播放歌曲名
playerArtist: null, // 当前播放歌手名 playerArtist: null, // 当前播放歌手名
playerLrc: "歌词加载中", // 当前播放歌词 playerLrc: "歌词加载中", // 当前播放歌词
} musicClick: false, // 音乐链接是否跳转
};
}, },
getters: { getters: {
// 获取歌词 // 获取歌词
@ -32,12 +31,12 @@ export const mainStore = defineStore("main", {
return { return {
name: state.playerTitle, name: state.playerTitle,
artist: state.playerArtist, artist: state.playerArtist,
} };
}, },
// 获取页面宽度 // 获取页面宽度
getInnerWidth(state) { getInnerWidth(state) {
return state.innerWidth; return state.innerWidth;
} },
}, },
actions: { actions: {
// 更改当前页面宽度 // 更改当前页面宽度
@ -55,7 +54,6 @@ export const mainStore = defineStore("main", {
} else { } else {
this.playerState = true; this.playerState = true;
} }
}, },
// 更改歌词 // 更改歌词
setPlayerLrc(value) { setPlayerLrc(value) {
@ -65,11 +63,11 @@ export const mainStore = defineStore("main", {
setPlayerData(title, artist) { setPlayerData(title, artist) {
this.playerTitle = title; this.playerTitle = title;
this.playerArtist = artist; this.playerArtist = artist;
} },
}, },
persist: { persist: {
key: 'data', key: "data",
storage: window.localStorage, storage: window.localStorage,
paths: ['coverType', 'musicVolume', 'siteStartShow'], paths: ["coverType", "musicVolume", "siteStartShow", "musicClick"],
}, },
}) });

View File

@ -37,7 +37,7 @@ import TimeCapsule from "@/components/TimeCapsule/index.vue";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
let closeShow = ref(false); const closeShow = ref(false);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -43,17 +43,17 @@ import Weather from "@/components/Weather/index.vue";
const store = mainStore(); const store = mainStore();
// //
let currentTime = ref({}); const currentTime = ref({});
let timeInterval = null; const timeInterval = ref(null);
onMounted(() => { onMounted(() => {
timeInterval = setInterval(() => { timeInterval.value = setInterval(() => {
currentTime.value = getCurrentTime(); currentTime.value = getCurrentTime();
}, 1000); }, 1000);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(timeInterval); clearInterval(timeInterval.value);
}); });
</script> </script>

View File

@ -13,14 +13,13 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted } from "vue";
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/index.vue"; import Link from "@/components/Links/index.vue";
const store = mainStore(); const store = mainStore();
// //
let siteUrl = import.meta.env.VITE_SITE_URL.split("."); const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
</script> </script>

View File

@ -79,13 +79,13 @@ import Set from "@/components/Set/index.vue";
import config from "@/../package.json"; import config from "@/../package.json";
const store = mainStore(); const store = mainStore();
let closeShow = ref(false); const closeShow = ref(false);
// //
let siteUrl = import.meta.env.VITE_SITE_URL.split("."); const siteUrl = import.meta.env.VITE_SITE_URL.split(".");
// //
let upData = reactive({ const upData = reactive({
new: [ new: [
"采用 Vue 进行重构", "采用 Vue 进行重构",
"音乐歌单支持快速自定义", "音乐歌单支持快速自定义",