perf: 优化部分变量 & feat: 新增一个设置项 #124
This commit is contained in:
parent
db0d3b92ae
commit
acc8f54ef9
2
.env
2
.env
@ -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 格式填写
|
||||||
|
@ -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");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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) {
|
||||||
|
@ -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>
|
||||||
|
@ -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()
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
});
|
});
|
||||||
|
|
||||||
// 监听音量变化
|
// 监听音量变化
|
||||||
|
@ -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;
|
||||||
|
@ -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();
|
||||||
|
@ -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 = () => {
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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, // 城市编码
|
||||||
|
@ -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"],
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
@ -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 进行重构",
|
||||||
"音乐歌单支持快速自定义",
|
"音乐歌单支持快速自定义",
|
||||||
|
Loading…
Reference in New Issue
Block a user