feat: 支持图标分离设置 #183

This commit is contained in:
imsyy 2023-08-17 11:54:26 +08:00
parent c12ddfb6b4
commit 231c5b6cea
22 changed files with 57 additions and 3582 deletions

17
.env
View File

@ -1,11 +1,12 @@
# 站点名称
VITE_SITE_NAME = "無名の主页"
VITE_SITE_ANTHOR = "無名"
VITE_SITE_KEYWORDS = "無名,个人主页"
VITE_SITE_DES = "一个默默无闻的主页"
VITE_SITE_URL = "imsyy.top"
VITE_SITE_LOGO = "/images/icon/favicon.ico"
VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png"
# 站点信息
VITE_SITE_NAME = "無名の主页" # 名称
VITE_SITE_ANTHOR = "無名" # 作者
VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
VITE_SITE_URL = "imsyy.top" # 作者地址
VITE_SITE_LOGO = "/images/icon/favicon.ico" # 站点主图标
VITE_SITE_MAIN_LOGO = "/images/icon/logo.png" # 主页图标
VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png" # Apple 端图标
# 简介文本
VITE_DESC_HELLO = "Hello World !"

View File

@ -12,7 +12,6 @@
"preview": "vite preview"
},
"dependencies": {
"@icon-park/vue-next": "^1.4.2",
"aplayer": "^1.10.1",
"axios": "^1.1.3",
"element-plus": "^2.2.18",
@ -24,8 +23,8 @@
"vue3-aplayer": "^1.7.3"
},
"devDependencies": {
"@icon-park/vue-next": "^1.4.2",
"@vicons/fa": "^0.12.0",
"@vicons/material": "^0.12.0",
"@vicons/utils": "^0.1.4",
"@vitejs/plugin-vue": "^4.2.3",
"sass": "^1.55.0",

View File

@ -5,9 +5,6 @@ settings:
excludeLinksFromLockfile: false
dependencies:
'@icon-park/vue-next':
specifier: ^1.4.2
version: 1.4.2(vue@3.3.4)
aplayer:
specifier: ^1.10.1
version: 1.10.1
@ -37,12 +34,12 @@ dependencies:
version: 1.7.3(vue@3.3.4)(webpack@5.88.0)
devDependencies:
'@icon-park/vue-next':
specifier: ^1.4.2
version: 1.4.2(vue@3.3.4)
'@vicons/fa':
specifier: ^0.12.0
version: 0.12.0
'@vicons/material':
specifier: ^0.12.0
version: 0.12.0
'@vicons/utils':
specifier: ^0.1.4
version: 0.1.4(vue@3.3.4)
@ -1531,7 +1528,7 @@ packages:
vue: 3.x
dependencies:
vue: 3.3.4
dev: false
dev: true
/@jridgewell/gen-mapping@0.3.3:
resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
@ -1752,10 +1749,6 @@ packages:
resolution: {integrity: sha512-g2PIeJLsTHUjt6bK63LxqC0uYQB7iu+xViJOxvp1s8b9/akpXVPVWjDTTsP980/0KYyMMe4U7F/aUo7wY+MsXA==}
dev: true
/@vicons/material@0.12.0:
resolution: {integrity: sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==}
dev: true
/@vicons/utils@0.1.4(vue@3.3.4):
resolution: {integrity: sha512-OHI19qVNN6i+uPQ+Y3f2s0dUxwsYnOCcKBW7XOU4yXXO1aU3ZoKpblCc3+4N0qmgoJs5rWKRAaMisipqEXJwAg==}
peerDependencies:

View File

@ -36,7 +36,6 @@
</Transition>
</template>
<script setup>
import { onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import { helloInit, checkDays } from "@/utils/getTime.js";
import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
import { mainStore } from "@/store";
@ -136,6 +135,11 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
#main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(1.2);
transition: transform 0.3s;
animation: fade-blur-main-in 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94)

View File

@ -24,7 +24,6 @@
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref, h } from "vue";
import { mainStore } from "@/store";
import { Error } from "@icon-park/vue-next";

View File

@ -38,7 +38,6 @@
</template>
<script setup>
import { ref } from "vue";
import { MusicOne } from "@icon-park/vue-next";
import { mainStore } from "@/store";
import config from "@/../package.json";
@ -63,6 +62,7 @@ const SiteUrl = ref(import.meta.env.VITE_SITE_URL);
line-height: 46px;
text-align: center;
z-index: 0;
font-size: 14px;
.power {
animation: fade 0.3s;
}
@ -91,6 +91,7 @@ const SiteUrl = ref(import.meta.env.VITE_SITE_URL);
&.blur {
backdrop-filter: blur(10px);
background: rgb(0 0 0 / 25%);
font-size: 16px;
}
.fade-enter-active,
.fade-leave-active {
@ -98,6 +99,9 @@ const SiteUrl = ref(import.meta.env.VITE_SITE_URL);
}
@media (max-width: 720px) {
font-size: 0.85rem;
&.blur {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.hidden {

View File

@ -26,7 +26,6 @@
</template>
<script setup>
import { reactive, ref, onMounted, h } from "vue";
import { MusicMenu, Error } from "@icon-park/vue-next";
import { getHitokoto } from "@/api";
import { mainStore } from "@/store";

View File

@ -21,15 +21,11 @@
>
<SwiperSlide v-for="site in siteLinksList" :key="site">
<el-row class="link-all" :gutter="20">
<el-col
v-for="(item, index) in site"
:span="8"
:key="item"
@click="jumpLink(item)"
>
<el-col v-for="(item, index) in site" :span="8" :key="item">
<div
class="item cards"
:style="index < 3 ? 'margin-bottom: 20px' : null"
@click="jumpLink(item)"
>
<Icon size="26">
<component :is="siteIcon[item.icon]" />
@ -45,7 +41,6 @@
</template>
<script setup>
import { onMounted, computed } from "vue";
import { Icon } from "@vicons/utils";
// https://www.xicons.org
import {
@ -57,7 +52,7 @@ import {
Book,
Fire,
LaptopCode,
} from "@vicons/fa";
} from "@vicons/fa"; // 使
import { mainStore } from "@/store";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Mousewheel } from "swiper";
@ -182,6 +177,9 @@ onMounted(() => {
}
}
}
@media (max-width: 720px) {
height: 180px;
}
}
}
</style>

View File

@ -28,7 +28,6 @@
</template>
<script setup>
import { reactive, watch, h } from "vue";
import { Icon } from "@vicons/utils";
import { QuoteLeft, QuoteRight } from "@vicons/fa";
import { Error } from "@icon-park/vue-next";
@ -36,7 +35,7 @@ import { mainStore } from "@/store";
const store = mainStore();
// logo
const siteLogo = import.meta.env.VITE_SITE_LOGO;
const siteLogo = import.meta.env.VITE_SITE_MAIN_LOGO;
//
const siteUrl = import.meta.env.VITE_SITE_URL.split(".");

View File

@ -103,7 +103,6 @@
</template>
<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import {
GoStart,
PlayOne,

View File

@ -20,7 +20,6 @@
</template>
<script setup>
import { h, ref, nextTick, onMounted } from "vue";
import { MusicOne, PlayWrong } from "@icon-park/vue-next";
import { getPlayerList } from "@/api";
import { mainStore } from "@/store";

View File

@ -1,9 +1,13 @@
<template>
<div class="setting">
<el-collapse class="collapse" v-model="activeName" accordion>
<el-collapse-item title="壁纸设置" name="1">
<el-collapse-item title="个性壁纸" name="1">
<div class="bg-set">
<el-radio-group v-model="bgSet" text-color="#ffffff">
<el-radio-group
v-model="coverType"
text-color="#ffffff"
@change="radioChange"
>
<el-radio label="0" size="large" border>默认壁纸</el-radio>
<el-radio label="1" size="large" border>每日一图</el-radio>
<el-radio label="2" size="large" border>随机风景</el-radio>
@ -11,7 +15,7 @@
</el-radio-group>
</div>
</el-collapse-item>
<el-collapse-item title="个性设置" name="2">
<el-collapse-item title="个性化调整" name="2">
<div class="item">
<span class="text">建站日期显示</span>
<el-switch
@ -40,7 +44,7 @@
/>
</div>
<div class="item">
<span class="text">底栏是否模糊</span>
<span class="text">底栏背景模糊</span>
<el-switch
v-model="footerBlur"
inline-prompt
@ -49,7 +53,7 @@
/>
</div>
</el-collapse-item>
<el-collapse-item title="其他设置" name="3">
<el-collapse-item title="播放器配置" name="3">
<div>设置内容待增加</div>
</el-collapse-item>
<el-collapse-item title="其他设置" name="4">
@ -60,30 +64,27 @@
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { CheckSmall, CloseSmall, SuccessPicture } from "@icon-park/vue-next";
import { mainStore } from "@/store";
import { CheckSmall, CloseSmall } from "@icon-park/vue-next";
import { storeToRefs } from "pinia";
const store = mainStore();
const { siteStartShow, musicClick, playerLrcShow, footerBlur } =
const { coverType, siteStartShow, musicClick, playerLrcShow, footerBlur } =
storeToRefs(store);
//
const activeName = ref("1");
const bgSet = ref("0");
onMounted(() => {
bgSet.value = store.coverType.toString();
//
const radioChange = () => {
ElMessage({
message: "壁纸设置成功,刷新后生效",
icon: h(SuccessPicture, {
theme: "filled",
fill: "#efefef",
}),
});
//
watch(
() => bgSet.value,
(value) => {
store.coverType = value;
}
);
};
</script>
<style lang="scss" scoped>

View File

@ -18,7 +18,6 @@
</template>
<script setup>
import { ref } from "vue";
import socialLinks from "@/assets/socialLinks.json";
//

View File

@ -54,7 +54,6 @@
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import { HourglassFull } from "@icon-park/vue-next";
import { getTimeCapsule, siteDateStatistics } from "@/utils/getTime.js";
import { mainStore } from "@/store";

View File

@ -18,7 +18,6 @@
</template>
<script setup>
import { onMounted, reactive, h } from "vue";
import { getAdcode, getWeather, getOtherWeather } from "@/api";
import { Error } from "@icon-park/vue-next";

View File

@ -6,7 +6,7 @@ export const mainStore = defineStore("main", {
imgLoadStatus: false, // 壁纸加载状态
innerWidth: null, // 当前窗口宽度
coverType: "0", // 壁纸种类
siteStartShow: true, // 建站日期显示
siteStartShow: false, // 建站日期显示
musicClick: false, // 音乐链接是否跳转
musicIsOk: false, // 音乐是否加载完成
musicVolume: 0, // 音乐音量;

View File

@ -13,6 +13,8 @@ html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
font-family: "HarmonyOS_Regular", sans-serif;
@ -23,8 +25,6 @@ a,
p {
margin: 0;
padding: 0;
-webkit-user-select: none;
-webkit-user-drag: none;
user-select: none;
text-decoration: none;
color: #fff;

View File

@ -31,7 +31,6 @@
</template>
<script setup>
import { ref } from "vue";
import { CloseOne, SettingTwo } from "@icon-park/vue-next";
import { mainStore } from "@/store";
import TimeCapsule from "@/components/TimeCapsule.vue";

View File

@ -33,7 +33,6 @@
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { getCurrentTime } from "@/utils/getTime";
import { mainStore } from "@/store";
import Music from "@/components/Music.vue";

View File

@ -66,7 +66,6 @@
</template>
<script setup>
import { reactive, ref } from "vue";
import {
CloseOne,
SettingTwo,

View File

@ -13,6 +13,7 @@ export default ({ mode }) =>
plugins: [
vue(),
AutoImport({
imports: ["vue"],
resolvers: [ElementPlusResolver()],
}),
Components({

3515
yarn.lock

File diff suppressed because it is too large Load Diff