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_NAME = "無名の主页" # 名称
VITE_SITE_ANTHOR = "無名" VITE_SITE_ANTHOR = "無名" # 作者
VITE_SITE_KEYWORDS = "無名,个人主页" VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
VITE_SITE_DES = "一个默默无闻的主页" VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
VITE_SITE_URL = "imsyy.top" VITE_SITE_URL = "imsyy.top" # 作者地址
VITE_SITE_LOGO = "/images/icon/favicon.ico" VITE_SITE_LOGO = "/images/icon/favicon.ico" # 站点主图标
VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png" VITE_SITE_MAIN_LOGO = "/images/icon/logo.png" # 主页图标
VITE_SITE_APPLE_LOGO = "/images/logo/apple-touch-icon.png" # Apple 端图标
# 简介文本 # 简介文本
VITE_DESC_HELLO = "Hello World !" VITE_DESC_HELLO = "Hello World !"

View File

@ -12,7 +12,6 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@icon-park/vue-next": "^1.4.2",
"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",
@ -24,8 +23,8 @@
"vue3-aplayer": "^1.7.3" "vue3-aplayer": "^1.7.3"
}, },
"devDependencies": { "devDependencies": {
"@icon-park/vue-next": "^1.4.2",
"@vicons/fa": "^0.12.0", "@vicons/fa": "^0.12.0",
"@vicons/material": "^0.12.0",
"@vicons/utils": "^0.1.4", "@vicons/utils": "^0.1.4",
"@vitejs/plugin-vue": "^4.2.3", "@vitejs/plugin-vue": "^4.2.3",
"sass": "^1.55.0", "sass": "^1.55.0",

View File

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

View File

@ -36,7 +36,6 @@
</Transition> </Transition>
</template> </template>
<script setup> <script setup>
import { onMounted, onBeforeUnmount, watch, nextTick } from "vue";
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";
@ -136,6 +135,11 @@ onBeforeUnmount(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
#main { #main {
position: absolute;
top: 0;
left: 0;
width: 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)

View File

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

View File

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

View File

@ -26,7 +26,6 @@
</template> </template>
<script setup> <script setup>
import { reactive, ref, onMounted, h } from "vue";
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";

View File

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

View File

@ -28,7 +28,6 @@
</template> </template>
<script setup> <script setup>
import { reactive, watch, h } from "vue";
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";
@ -36,7 +35,7 @@ import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
// logo // 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("."); const siteUrl = import.meta.env.VITE_SITE_URL.split(".");

View File

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

View File

@ -20,7 +20,6 @@
</template> </template>
<script setup> <script setup>
import { h, ref, nextTick, onMounted } from "vue";
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";

View File

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

View File

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

View File

@ -54,7 +54,6 @@
</template> </template>
<script setup> <script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
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";

View File

@ -18,7 +18,6 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, h } from "vue";
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";

View File

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

View File

@ -13,6 +13,8 @@ html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 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;
@ -23,8 +25,6 @@ a,
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-user-select: none;
-webkit-user-drag: none;
user-select: none; user-select: none;
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;

View File

@ -31,7 +31,6 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
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";

View File

@ -33,7 +33,6 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
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";

View File

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

View File

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

3515
yarn.lock

File diff suppressed because it is too large Load Diff