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

imsyy · Aug 17, 2023 · 231c5b6 · 231c5b6
1 parent c12ddfb
commit 231c5b6
Show file tree

Hide file tree

Showing 22 changed files with 57 additions and 3,582 deletions.
diff --git a/.env b/.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 !"

diff --git a/package.json b/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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/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)

diff --git a/src/components/Background.vue b/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";
 

diff --git a/src/components/Footer.vue b/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,13 +91,17 @@ 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 {
     transition: opacity 0.15s ease-in-out;
   }
   @media (max-width: 720px) {
     font-size: 0.85rem;
+    &.blur {
+      font-size: 0.85rem;
+    }
   }
   @media (max-width: 480px) {
     .hidden {

diff --git a/src/components/Hitokoto.vue b/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";

diff --git a/src/components/Links.vue b/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
-            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>
diff --git a/src/components/Message.vue b/src/components/Message.vue
@@ -28,15 +28,14 @@
 </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";
 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(".");
 

diff --git a/src/components/Music.vue b/src/components/Music.vue
@@ -103,7 +103,6 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, onMounted } from "vue";
 import {
   GoStart,
   PlayOne,

diff --git a/src/components/Player.vue b/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";

diff --git a/src/components/Set.vue b/src/components/Set.vue
@@ -1,17 +1,21 @@
 <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>
             <el-radio label="3" size="large" border>随机动漫</el-radio>
           </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>

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

diff --git a/src/components/TimeCapsule.vue b/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";

diff --git a/src/components/Weather.vue b/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";
 

diff --git a/src/store/index.js b/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, // 音乐音量;

diff --git a/src/style/style.scss b/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;

diff --git a/src/views/Box/index.vue b/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";

diff --git a/src/views/Func/index.vue b/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";