Merge pull request #18 from imsyy/dev

feat: 设置页面重构
imsyy · Apr 19, 2023 · bc84e11 · bc84e11 · vercel · Apr 19, 2023
2 parents 6a102a1 + 5425288
commit bc84e11
Show file tree

Hide file tree

Showing 24 changed files with 688 additions and 462 deletions.
diff --git a/.env b/.env
@@ -16,5 +16,5 @@ VITE_ICP = "豫ICP备2022018134号-1"
 VITE_ANN_TITLE = ""
 ## 公告内容
 VITE_ANN_CONTENT = ""
-## 公告时长（毫秒）
+## 公告时长（毫秒）不可超过 999999
 VITE_ANN_DURATION = 3000
diff --git a/.hintrc b/.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"
+        ]
+      }
+    ]
+  }
+}
diff --git a/package.json b/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",

diff --git a/src/api/song.js b/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",

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

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

diff --git a/src/components/Personalized/PaPersonalFm.vue b/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;
   }

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

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

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

diff --git a/src/components/Player/PlayerRecord.vue b/src/components/Player/PlayerRecord.vue
@@ -190,6 +190,7 @@ const music = musicStore();
     height: 68%;
     border-radius: 50%;
     background-color: #00000050;
+    -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
     transition: all 0.5s;
     .n-icon {

diff --git a/src/components/Player/RollingLyrics.vue b/src/components/Player/RollingLyrics.vue
@@ -214,16 +214,19 @@ const lrcTextClick = (time) => {
   }
   .placeholder {
     width: 100%;
-    height: 50%;
     &:nth-of-type(1) {
+      height: 50%;
       display: flex;
       align-items: flex-end;
       padding: 0 0 0.8vh 3vh;
     }
+    &:nth-last-of-type(1) {
+      height: 80%;
+    }
   }
   .lrc,
   .yrc {
-    opacity: 0.4;
+    opacity: 0.2;
     transition: all 0.3s;
     margin-bottom: 0.8vh;
     padding: 1.8vh 4vh 1.8vh 3vh;
@@ -285,6 +288,7 @@ const lrcTextClick = (time) => {
     &:hover {
       @media (min-width: 768px) {
         background-color: #ffffff20;
+        opacity: 1;
       }
     }
     &:active {

diff --git a/src/components/Player/index.vue b/src/components/Player/index.vue
@@ -272,17 +272,23 @@ const player = ref(null);
 // 获取歌曲播放数据
 const getPlaySongData = (data, level = setting.songLevel) => {
   try {
-    const { id, fee } = data;
+    const { id, fee, pc } = data;
     // VIP 歌曲或需要购买专辑
-    if (useUnmServerHas && setting.useUnmServer && (fee === 1 || fee === 4)) {
+    if (
+      useUnmServerHas &&
+      setting.useUnmServer &&
+      !pc &&
+      (fee === 1 || fee === 4)
+    ) {
+      console.log("网易云解灰");
       getMusicNumUrlData(id);
     }
     // 免费或无版权
     else {
       checkMusicCanUse(id).then((res) => {
         if (res.success) {
           console.log("当前歌曲可用");
-          if (fee === 1 || fee === 4)
+          if (!pc && (fee === 1 || fee === 4))
             $message.info("当前歌曲为 VIP 专享，仅可试听");
           // 获取音乐地址
           getMusicUrl(id, level).then((res) => {

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -125,7 +125,25 @@ const routes = [
     meta: {
       title: "全局设置",
     },
-    component: () => import("@/views/Setting/SettingView.vue"),
+    component: () => import("@/views/Setting/index.vue"),
+    redirect: "/setting/main",
+    children: [
+      {
+        path: "main",
+        name: "setting-main",
+        component: () => import("@/views/Setting/main.vue"),
+      },
+      {
+        path: "player",
+        name: "setting-player",
+        component: () => import("@/views/Setting/player.vue"),
+      },
+      {
+        path: "other",
+        name: "setting-other",
+        component: () => import("@/views/Setting/other.vue"),
+      },
+    ],
   },
   // 登录页
   {

diff --git a/src/store/musicData.js b/src/store/musicData.js
@@ -403,7 +403,7 @@ const useMusicDataStore = defineStore("musicData", {
       try {
         if (
           value.id !==
-          this.persistData.playlists[this.persistData.playSongIndex].id
+          this.persistData.playlists[this.persistData.playSongIndex]?.id
         ) {
           console.log("播放歌曲与上一次不一致");
           this.playSongLink = null;

diff --git a/src/style/global.scss b/src/style/global.scss
@@ -49,14 +49,36 @@ body,
     .n-card-header__main {
       // font-weight: bold;
       font-size: 18px;
+      // position: relative;
+      // padding-left: 6px;
+      // display: flex;
+      // align-items: center;
+      // &::before {
+      //   content: "";
+      //   position: absolute;
+      //   left: -4px;
+      //   width: 4px;
+      //   height: 80%;
+      //   border-radius: 4px;
+      //   background-color: $mainColor;
+      // }
     }
   }
+  .n-card__content {
+    padding-right: 28px;
+  }
   .n-scrollbar {
     max-height: 60vh;
     font-size: 16px;
     line-height: 32px;
   }
 }
+.n-modal-body-wrapper {
+  .n-modal-mask {
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+  }
+}
 
 // Nscrollbar
 .n-scrollbar {

diff --git a/src/views/Discover/toplists.vue b/src/views/Discover/toplists.vue
@@ -158,6 +158,7 @@ onMounted(() => {
           color: #fff;
           background-color: #00000030;
           font-size: 12px;
+          -webkit-backdrop-filter: blur(40px);
           backdrop-filter: blur(40px);
           padding: 4px 8px;
           border-radius: 8px 0 8px 0;