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