Merge pull request #18 from imsyy/dev

feat: 设置页面重构

Author: imsyy

.env

@@ -16,5 +16,5 @@ VITE_ICP = "豫ICP备2022018134号-1"
 VITE_ANN_TITLE = ""
 ## 公告内容
 VITE_ANN_CONTENT = ""
-## 公告时长（毫秒）
+## 公告时长（毫秒）不可超过 999999
 VITE_ANN_DURATION = 3000

.hintrc

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "detect-css-reflows/composite": "off",
+    "detect-css-reflows/layout": "off",
+    "detect-css-reflows/paint": "off",
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "backdrop-filter"
+        ]
+      }
+    ]
+  }
+}

package.json

@@ -1,7 +1,6 @@
 {
   "name": "splayer",
-  "version": "1.1.1",
-  "private": true,
+  "version": "1.1.2",
   "author": "imsyy",
   "home": "https://imsyy.top",
   "github": "https://github.com/imsyy/SPlayer",

src/api/song.js

@@ -44,7 +44,9 @@ export const getMusicUrl = (id, level = "exhigh") => {
  */
 export const getMusicNumUrl = async (id) => {
   const server =
-    process.env.NODE_ENV === "development" ? "kuwo,qq,pyncmd" : "qq,pyncmd";
+    process.env.NODE_ENV === "development"
+      ? "kuwo,qq,pyncmd,kugou"
+      : "qq,pyncmd,kugou";
   const url = `${import.meta.env.VITE_UNM_API}match?id=${id}&server=${server}`;
   const response = await fetch(url, {
     method: "GET",

src/components/DataList/CoverLists.vue

@@ -373,6 +373,7 @@ onMounted(() => {
         color: #fff;
         padding: 0.5vw;
         background-color: #00000010;
+        -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
         border-radius: 50%;
         transform: scale(0.8);
@@ -385,6 +386,7 @@ onMounted(() => {
         color: #fff;
         background-color: #00000030;
         font-size: 12px;
+        -webkit-backdrop-filter: blur(4px);
         backdrop-filter: blur(4px);
         padding: 6px;
         border-top-left-radius: 8px;

src/components/DataList/VideoLists.vue

@@ -115,6 +115,7 @@ const props = defineProps({
         color: #fff;
         padding: 0.5vw;
         background-color: #00000010;
+        -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
         border-radius: 50%;
         transform: scale(0.8);
@@ -126,6 +127,7 @@ const props = defineProps({
         color: #fff;
         background-color: #00000030;
         font-size: 12px;
+        -webkit-backdrop-filter: blur(4px);
         backdrop-filter: blur(4px);
         padding: 4px 8px;
         transition: all 0.3s;

src/components/Personalized/PaPersonalFm.vue

@@ -127,6 +127,7 @@ onMounted(() => {
     width: 100%;
     height: 100%;
     background-color: #00000040;
+    -webkit-backdrop-filter: blur(80px);
     backdrop-filter: blur(80px);
     z-index: -1;
   }

src/components/Player/BigPlayer.vue

@@ -12,18 +12,40 @@
       "
     >
       <div class="gray" />
-      <n-icon
-        class="close"
-        size="40"
-        :component="KeyboardArrowDownFilled"
-        @click="music.setBigPlayerState(false)"
-      />
-      <n-icon
-        class="screenfull"
-        size="36"
-        :component="screenfullIcon"
-        @click="screenfullChange"
-      />
+      <div class="icon-menu">
+        <div class="menu-left">
+          <div class="icon">
+            <n-icon
+              class="setting"
+              size="30"
+              :component="SettingsRound"
+              @click="
+                () => {
+                  music.setBigPlayerState(false);
+                  router.push('/setting/player');
+                }
+              "
+            />
+          </div>
+        </div>
+        <div class="menu-right">
+          <div class="icon">
+            <n-icon
+              class="screenfull"
+              :component="screenfullIcon"
+              @click="screenfullChange"
+            />
+          </div>
+          <div class="icon">
+            <n-icon
+              class="close"
+              :component="KeyboardArrowDownFilled"
+              @click="music.setBigPlayerState(false)"
+            />
+          </div>
+        </div>
+      </div>
+
       <div
         :class="
           music.getPlaySongLyric.lrc[0] && music.getPlaySongLyric.lrc.length > 4
@@ -124,6 +146,7 @@ import {
   MessageFilled,
   FullscreenRound,
   FullscreenExitRound,
+  SettingsRound,
 } from "@vicons/material";
 import { musicStore, settingStore } from "@/store";
 import { useRouter } from "vue-router";
@@ -296,11 +319,63 @@ watch(
     width: 100%;
     height: 100%;
     background-color: #00000060;
+    -webkit-backdrop-filter: blur(80px);
     backdrop-filter: blur(80px);
     z-index: -1;
   }
+  .icon-menu {
+    padding: 20px;
+    width: 100%;
+    height: 80px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 2;
+    box-sizing: border-box;
+    .menu-left,
+    .menu-right {
+      display: flex;
+      align-items: center;
+      .icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 40px;
+        opacity: 0.3;
+        border-radius: 8px;
+        transition: all 0.3s;
+        cursor: pointer;
+        &:hover {
+          background-color: #ffffff20;
+          transform: scale(1.05);
+          opacity: 1;
+        }
+        &:active {
+          transform: scale(1);
+        }
+        .screenfull,
+        .setting {
+          @media (max-width: 768px) {
+            display: none;
+          }
+        }
+      }
+    }
+    .menu-right {
+      .icon {
+        margin-left: 12px;
+      }
+    }
+  }
+  /*
   .close,
-  .screenfull {
+  .screenfull,
+  .setting {
     position: absolute;
     top: 24px;
     right: 24px;
@@ -326,6 +401,9 @@ watch(
       display: none;
     }
   }
+  .setting {
+    left: 24px;
+  }*/
   .all {
     width: 100%;
     height: 100%;
@@ -379,6 +457,7 @@ watch(
       height: 40px;
       border-radius: 25px;
       background-color: #ffffff20;
+      -webkit-backdrop-filter: blur(20px);
       backdrop-filter: blur(20px);
       display: flex;
       align-items: center;

src/components/Player/CountDown.vue

@@ -3,7 +3,7 @@
     <div
       class="countdown"
       :style="{ animationPlayState: music.getPlayState ? 'running' : 'paused' }"
-      v-if="remainingPoint <= 2"
+      v-if="remainingPoint <= 2 && totalDuration > 3"
     >
       <span class="point" :class="remainingPoint > 2 ? 'hidden' : null">●</span>
       <span class="point" :class="remainingPoint > 1 ? 'hidden' : null">●</span>

src/components/Player/PlayerCover.vue

@@ -149,8 +149,6 @@ const router = useRouter();
 const music = musicStore();
 const user = userStore();
 
-const canvas = ref(null);
-
 // 歌曲进度条更新
 const songTimeSliderUpdate = (val) => {
   if ($player && music.getPlaySongTime && music.getPlaySongTime.duration)