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

.env

@@ -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 !"

package.json

@@ -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",

pnpm-lock.yaml

@@ -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:

src/App.vue

@@ -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)

src/components/Background.vue

@@ -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";
 

src/components/Footer.vue

@@ -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 {

src/components/Hitokoto.vue

@@ -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";

src/components/Links.vue

@@ -21,15 +21,11 @@
     >
       <SwiperSlide v-for="site in siteLinksList" :key="site">
         <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
               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>

src/components/Message.vue

@@ -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(".");
 

src/components/Music.vue

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

src/components/Player.vue

@@ -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";

src/components/Set.vue

@@ -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, {
-watch(
+      theme: "filled",
-  () => bgSet.value,
+      fill: "#efefef",
-  (value) => {
+    }),
-    store.coverType = value;
+  });
-  }
+};
-);
 </script>
 
 <style lang="scss" scoped>

src/components/SocialLinks.vue

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

src/components/TimeCapsule.vue

@@ -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";

src/components/Weather.vue

@@ -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";
 

src/store/index.js

@@ -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, // 音乐音量;

src/style/style.scss

@@ -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;

src/views/Box/index.vue

@@ -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";

src/views/Func/index.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";

src/views/MoreSet/index.vue

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

vite.config.js

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