feat: 支持图标分离设置 #183
This commit is contained in:
parent
c12ddfb6b4
commit
231c5b6cea
17
.env
17
.env
@ -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 !"
|
||||
|
@ -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",
|
||||
|
@ -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:
|
||||
|
@ -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)
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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";
|
||||
|
@ -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>
|
||||
|
@ -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(".");
|
||||
|
||||
|
@ -103,7 +103,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from "vue";
|
||||
import {
|
||||
GoStart,
|
||||
PlayOne,
|
||||
|
@ -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";
|
||||
|
@ -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();
|
||||
});
|
||||
|
||||
// 壁纸选中项
|
||||
watch(
|
||||
() => bgSet.value,
|
||||
(value) => {
|
||||
store.coverType = value;
|
||||
}
|
||||
);
|
||||
// 壁纸切换
|
||||
const radioChange = () => {
|
||||
ElMessage({
|
||||
message: "壁纸设置成功,刷新后生效",
|
||||
icon: h(SuccessPicture, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -18,7 +18,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import socialLinks from "@/assets/socialLinks.json";
|
||||
|
||||
// 社交链接提示
|
||||
|
@ -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";
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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, // 音乐音量;
|
||||
|
@ -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;
|
||||
|
@ -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";
|
||||
|
@ -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";
|
||||
|
@ -66,7 +66,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import {
|
||||
CloseOne,
|
||||
SettingTwo,
|
||||
|
@ -13,6 +13,7 @@ export default ({ mode }) =>
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
imports: ["vue"],
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
|
Loading…
Reference in New Issue
Block a user