Merge branch 'master' into master

package.json

@@ -57,6 +57,7 @@
     "register-service-worker": "^1.7.1",
     "svg-sprite-loader": "^5.0.0",
     "tunnel": "^0.0.6",
+    "vscode-codicons": "^0.0.14",
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",
     "vue-electron": "^1.0.6",

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="referrer" content="no-referrer" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -91,6 +91,15 @@ export default {
   --color-navbar-bg: rgba(255, 255, 255, 0.86);
   --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
   --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
+
+  --main-content-padding-x: 10vw;
+  --main-content-padding: 0 var(--main-content-padding-x);
+}
+
+@media (max-width: 1336px) {
+  :root {
+    --main-content-padding-x: 5vw;
+  }
 }
 
 [data-theme="dark"] {
@@ -117,26 +126,18 @@ input {
 }
 body {
   background-color: var(--color-body-bg);
+  margin: 0;
 }
 
 html {
   overflow-y: overlay;
-  min-width: 768px;
+  min-width: 340px;
 }
 
 main {
+  max-width: 100vw;
   margin-top: 84px;
   margin-bottom: 96px;
-  padding: {
-    right: 10vw;
-    left: 10vw;
-  }
-}
-
-@media (max-width: 1336px) {
-  main {
-    padding: 0 5vw;
-  }
 }
 
 select,

src/assets/icons/arrow-down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M14.77,23.795L5.185,14.21c-0.879-0.879-0.879-2.317,0-3.195l0.8-0.801c0.877-0.878,2.316-0.878,3.194,0  l7.315,7.315l7.316-7.315c0.878-0.878,2.317-0.878,3.194,0l0.8,0.801c0.879,0.878,0.879,2.316,0,3.195l-9.587,9.585  c-0.471,0.472-1.104,0.682-1.723,0.647C15.875,24.477,15.243,24.267,14.77,23.795z" fill="#515151"/></svg>

src/assets/icons/arrow-up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M18.221,7.206l9.585,9.585c0.879,0.879,0.879,2.317,0,3.195l-0.8,0.801c-0.877,0.878-2.316,0.878-3.194,0  l-7.315-7.315l-7.315,7.315c-0.878,0.878-2.317,0.878-3.194,0l-0.8-0.801c-0.879-0.878-0.879-2.316,0-3.195l9.587-9.585  c0.471-0.472,1.103-0.682,1.723-0.647C17.115,6.524,17.748,6.734,18.221,7.206z" fill="#515151"/></svg>

src/assets/icons/plus.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M417.4,224H288V94.6c0-16.9-14.3-30.6-32-30.6c-17.7,0-32,13.7-32,30.6V224H94.6C77.7,224,64,238.3,64,256  c0,17.7,13.7,32,30.6,32H224v129.4c0,16.9,14.3,30.6,32,30.6c17.7,0,32-13.7,32-30.6V288h129.4c16.9,0,30.6-14.3,30.6-32  C448,238.3,434.3,224,417.4,224z"/></svg>

src/background.js

@@ -88,15 +88,20 @@ class Background {
   createWindow() {
     console.log("creating app window");
 
+    // Only for Windows, a special title bar for it
+    const withoutFrame = process.platform == "win32";
+
     this.window = new BrowserWindow({
       width: this.store.get("window.width") | 1440,
       height: this.store.get("window.height") | 840,
-      minWidth: 1080,
+      minWidth: 360,
-      minHeight: 720,
+      minHeight: 240,
       titleBarStyle: "hiddenInset",
+      frame: !withoutFrame,
       webPreferences: {
         webSecurity: false,
         nodeIntegration: true,
+        enableRemoteModule: true,
       },
     });
 

src/components/CoverRow.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="cover-row" :style="rowStyles">
+  <div
+    class="cover-row"
+    :style="rowStyles"
+    :class="{ 'without-padding': withoutPadding }"
+  >
     <div
       class="item"
       v-for="item in items"
@@ -50,6 +54,7 @@ export default {
     showPlayCount: { type: Boolean, default: false },
     columnNumber: { type: Number, default: 5 },
     gap: { type: String, default: "44px 24px" },
+    withoutPadding: { type: Boolean, default: false },
   },
   computed: {
     rowStyles() {
@@ -114,6 +119,13 @@ export default {
 <style lang="scss" scoped>
 .cover-row {
   display: grid;
+  padding: var(--main-content-padding);
+  max-width: calc(100vw - var(--main-content-padding-x));
+  overflow-x: scroll;
+}
+
+.cover-row.without-padding {
+  padding: 0;
 }
 
 .item {
@@ -143,6 +155,18 @@ export default {
   }
 }
 
+@media (max-width: 800px) {
+  .item {
+    width: 256px;
+  }
+}
+
+@media (max-width: 600px) {
+  .item {
+    width: 192px;
+  }
+}
+
 .item.artist {
   display: flex;
   flex-direction: column;

src/components/MvRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mv-row">
+  <div class="mv-row" :class="{ 'without-padding': withoutPadding }">
     <div class="mv" v-for="mv in mvs" :key="getID(mv)">
       <div
         class="cover"
@@ -35,6 +35,7 @@ export default {
       type: String,
       default: "artist",
     },
+    withoutPadding: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -83,9 +84,39 @@ export default {
 
 <style lang="scss" scoped>
 .mv-row {
+  --col-num: 5;
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(var(--col-num), 1fr);
   gap: 36px 24px;
+  padding: var(--main-content-padding);
+}
+
+.mv-row.without-padding {
+  padding: 0;
+}
+
+@media (max-width: 900px) {
+  .mv-row {
+    --col-num: 4;
+  }
+}
+
+@media (max-width: 800px) {
+  .mv-row {
+    --col-num: 3;
+  }
+}
+
+@media (max-width: 700px) {
+  .mv-row {
+    --col-num: 2;
+  }
+}
+
+@media (max-width: 550px) {
+  .mv-row {
+    --col-num: 1;
+  }
 }
 
 .mv {

src/components/Navbar.vue

@@ -1,5 +1,26 @@
 <template>
-  <nav>
+  <nav :class="{ 'search-box-open': isSearchBoxOpen }">
+    <div class="win32-titlebar">
+      <div class="title">YesPlayMusic</div>
+      <div class="controls">
+        <div
+          class="button minimize codicon codicon-chrome-minimize"
+          @click="windowMinimize"
+        ></div>
+        <div
+          class="button max-restore codicon"
+          @click="windowMaxRestore"
+          :class="{
+            'codicon-chrome-restore': windowIsMaximized,
+            'codicon-chrome-maximize': !windowIsMaximized,
+          }"
+        ></div>
+        <div
+          class="button close codicon codicon-chrome-close"
+          @click="windowClose"
+        ></div>
+      </div>
+    </div>
     <div class="navigation-buttons">
       <button-icon @click.native="go('back')"
         ><svg-icon icon-class="arrow-left"
@@ -30,6 +51,9 @@
         v-if="settings.showGithubIcon !== false"
         ><svg-icon icon-class="github" class="github"
       /></a>
+      <button-icon @click.native="toggleSearchBox()" class="search-button">
+        <svg-icon icon-class="search" />
+      </button-icon>
       <div class="search-box">
         <div class="container" :class="{ active: inputFocus }">
           <svg-icon icon-class="search" />
@@ -52,6 +76,15 @@
 <script>
 import ButtonIcon from "@/components/ButtonIcon.vue";
 import { mapState } from "vuex";
+const platformIsWin32 = window.require
+  ? window.require("os").platform() == "win32"
+    ? true
+    : false
+  : false;
+
+const win = platformIsWin32
+  ? window.require("electron").remote.getCurrentWindow()
+  : null;
 
 export default {
   name: "Navbar",
@@ -63,6 +96,8 @@ export default {
       inputFocus: false,
       langs: ["zh-CN", "en"],
       keywords: "",
+      isSearchBoxOpen: false,
+      windowIsMaximized: win ? win.isMaximized() : true,
     };
   },
   computed: {
@@ -86,6 +121,24 @@ export default {
         params: { keywords: this.keywords },
       });
     },
+    toggleSearchBox() {
+      this.isSearchBoxOpen = !this.isSearchBoxOpen;
+    },
+    windowMinimize() {
+      win.minimize();
+    },
+    windowMaxRestore() {
+      if (win.isMaximized()) {
+        win.restore();
+        this.windowIsMaximized = false;
+      } else {
+        win.maximize();
+        this.windowIsMaximized = true;
+      }
+    },
+    windowClose() {
+      win.close();
+    },
   },
 };
 </script>
@@ -105,6 +158,9 @@ nav {
     left: 10vw;
   }
   backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1px solid transparent;
+  transition-property: padding-bottom, border-bottom;
+  transition-duration: 0.4s;
 
   background-color: var(--color-navbar-bg);
   z-index: 100;
@@ -123,6 +179,70 @@ nav {
   }
 }
 
+.win32-titlebar {
+  display: none;
+}
+
+[data-electron-platform-win32="yes"] {
+  nav {
+    padding-top: 20px;
+    -webkit-app-region: no-drag;
+  }
+  .win32-titlebar {
+    color: var(--color-text);
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    -webkit-app-region: drag;
+    display: flex;
+    align-items: center;
+    --hover: #e6e6e6;
+    --active: #cccccc;
+
+    .title {
+      padding: 8px;
+      font-size: 12px;
+      font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
+        sans-serif;
+    }
+    .controls {
+      height: 32px;
+      margin-left: auto;
+      justify-content: flex-end;
+      display: flex;
+      .button {
+        height: 100%;
+        width: 46px;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        -webkit-app-region: no-drag;
+        &:hover {
+          background: var(--hover);
+        }
+        &:active {
+          background: var(--active);
+        }
+        &.close {
+          &:hover {
+            background: rgba(232, 17, 35, 0.9);
+          }
+          &:active {
+            background: #f1707a;
+            color: #000;
+          }
+        }
+      }
+    }
+  }
+  &[data-theme="dark"] .win32-titlebar {
+    --hover: #191919;
+    --active: #333333;
+  }
+}
+
 .navigation-buttons {
   flex: 1;
   display: flex;
@@ -248,5 +368,75 @@ nav {
     color: var(--color-text);
     -webkit-app-region: no-drag;
   }
+  @media (max-width: 400px) {
+    .github {
+      display: none;
+    }
+  }
+  .search-button {
+    display: none;
+    -webkit-app-region: no-drag;
+  }
+  @media (max-width: 600px) {
+    .search-button {
+      display: flex;
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .right-part {
+    flex: 0;
+  }
+}
+
+@media (max-width: 800px) {
+  .navigation-links > a {
+    margin: 4px;
+  }
+}
+
+@media (max-width: 700px) {
+  .navigation-buttons {
+    display: none;
+  }
+}
+
+@media (max-width: 600px) {
+  nav.search-box-open {
+    padding-bottom: 36px;
+    border-bottom-color: var(--color-secondary-bg-for-transparent);
+  }
+
+  .search-box {
+    display: block;
+    position: fixed;
+    top: 56px;
+    left: 16px;
+    right: 16px;
+    .container {
+      width: 100%;
+      opacity: 0;
+      height: 0;
+      overflow: hidden;
+      transition-property: height, opacity;
+      transition-duration: 0.4s;
+      .input {
+        width: 100%;
+      }
+    }
+  }
+
+  [data-electron-platform-win32="yes"] {
+    .search-box {
+      // Add more 20px to top for title bar
+      top: calc(56px + 20px);
+    }
+  }
+
+  nav.search-box-open .container {
+    opacity: 1;
+    height: 32px;
+  }
 }
 </style>

src/components/Player.vue

@@ -62,7 +62,10 @@
       <div class="middle-control-buttons">
         <div class="blank"></div>
         <div class="container" @click.stop>
-          <button-icon @click.native="previous" :title="$t('player.previous')"
+          <button-icon
+            @click.native="previous"
+            :title="$t('player.previous')"
+            class="auto-hide"
             ><svg-icon icon-class="previous"
           /></button-icon>
           <button-icon
@@ -78,7 +81,7 @@
         </div>
         <div class="blank"></div>
       </div>
-      <div class="right-control-buttons">
+      <div class="right-control-buttons auto-hide">
         <div class="blank"></div>
         <div class="container" @click.stop>
           <button-icon
@@ -343,6 +346,18 @@ export default {
   display: flex;
 }
 
+@media (max-width: 700px) {
+  .controls {
+    display: flex;
+  }
+  .playing {
+    flex: 1;
+  }
+  .playing .container {
+    pointer-events: none;
+  }
+}
+
 .playing .container {
   display: flex;
   align-items: center;
@@ -448,6 +463,20 @@ export default {
   margin-left: 16px;
 }
 
+@media (max-width: 700px) {
+  .controls {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .middle-control-buttons {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+  .auto-hide,
+  .blank {
+    display: none;
+  }
+}
+
 // .lyrics-button {
 //   position: fixed;
 //   right: 18px;

src/components/TrackList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="track-list">
+  <div class="track-list" :class="{ 'without-padding': withoutPadding }">
     <ContextMenu ref="menu">
       <div class="item-info">
         <img :src="rightClickedTrack.al.picUrl | resizeImage(224)" />
@@ -26,7 +26,7 @@
       >
       <div class="item" @click="addTrackToPlaylist">添加到歌单</div>
     </ContextMenu>
-    <div :style="listStyles">
+    <div :style="listStyles" class="track-list-inner-container">
       <TrackListItem
         v-for="(track, index) in tracks"
         :track="track"
@@ -78,10 +78,6 @@ export default {
         return []; // 'removeTrackFromPlaylist'
       },
     },
-    columnNumber: {
-      type: Number,
-      default: 4,
-    },
     highlightPlayingTrack: {
       type: Boolean,
       default: true,
@@ -90,6 +86,10 @@ export default {
       type: String,
       default: "id",
     },
+    withoutPadding: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -107,7 +107,6 @@ export default {
       this.listStyles = {
         display: "grid",
         gap: "4px",
-        gridTemplateColumns: `repeat(${this.columnNumber}, 1fr)`,
       };
     }
   },
@@ -240,4 +239,36 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.track-list {
+  --col-num: 4;
+  padding: var(--main-content-padding);
+
+  .track-list-inner-container {
+    grid-template-columns: repeat(var(--col-num), 1fr);
+  }
+}
+
+.track-list.without-padding {
+  padding: 0;
+}
+
+@media (max-width: 800px) {
+  .track-list {
+    --col-num: 3;
+    padding: var(--main-content-padding);
+  }
+}
+
+@media (max-width: 700px) {
+  .track-list {
+    --col-num: 2;
+  }
+}
+
+@media (max-width: 550px) {
+  .track-list {
+    --col-num: 1;
+  }
+}
+</style>

src/components/TrackListItem.vue

@@ -193,6 +193,7 @@ button {
   padding: 8px;
   border-radius: 12px;
   user-select: none;
+  transition: all 0.3s;
 
   .no {
     display: flex;
@@ -293,6 +294,11 @@ button {
     -webkit-line-clamp: 2;
     overflow: hidden;
   }
+  @media (max-width: 600px) {
+    .album {
+      flex: 0;
+    }
+  }
   .time {
     font-size: 16px;
     width: 50px;
@@ -307,7 +313,6 @@ button {
 }
 
 .track.focus {
-  transition: all 0.3s;
   background: var(--color-secondary-bg);
 }
 
@@ -354,6 +359,12 @@ button {
   justify-content: flex-end;
 }
 
+@media (max-width: 600px) {
+  .actions {
+    width: auto;
+  }
+}
+
 .track.playing {
   background: var(--color-primary-bg);
   color: var(--color-primary);

src/electron/ipcMain.js

@@ -61,4 +61,12 @@ export function initIpcMain(win, store) {
   ipcMain.on("settings", (event, options) => {
     store.set("settings", options);
   });
+
+  ipcMain.on("max-restore", () => {
+    if (win.isMaximized()) {
+      win.restore();
+    } else {
+      win.maximize();
+    }
+  });
 }

src/electron/ipcRenderer.js

@@ -2,6 +2,10 @@ export function ipcRenderer(vueInstance) {
   const self = vueInstance;
   // 添加专有的类名
   document.body.setAttribute("data-electron", "yes");
+  document.body.setAttribute(
+    "data-electron-platform-win32",
+    window.require("os").platform() == "win32" ? "yes" : "no"
+  );
   // ipc message channel
   const electron = window.require("electron");
   const ipcRenderer = electron.ipcRenderer;

src/electron/tray.js

@@ -67,6 +67,7 @@ export function createTray(win) {
             app.exit();
           },
         },
+      },
     ]);
     
     tray.popUpContextMenu(contextMenu);

src/main.js

@@ -13,6 +13,10 @@ import * as Sentry from "@sentry/browser";
 import { Vue as VueIntegration } from "@sentry/integrations";
 import { Integrations } from "@sentry/tracing";
 
+// import icons for win32 title bar
+// icons by https://github.com/microsoft/vscode-codicons
+import "vscode-codicons/dist/codicon.css";
+
 Vue.use(VueAnalytics, {
   id: "UA-180189423-1",
   router,

src/utils/staticData.js

@@ -1,32 +1,32 @@
 export const byAppleMusic = [
   {
     coverImgUrl:
-      "http://p2.music.126.net/GvYQoflE99eoeGi9jG4Bsw==/109951165375336156.jpg",
+      "https://p2.music.126.net/GvYQoflE99eoeGi9jG4Bsw==/109951165375336156.jpg",
     name: "Happy Hits",
     id: 5278068783,
   },
   {
     coverImgUrl:
-      "http://p2.music.126.net/5CJeYN35LnzRDsv5Lcs0-Q==/109951165374966765.jpg",
+      "https://p2.music.126.net/5CJeYN35LnzRDsv5Lcs0-Q==/109951165374966765.jpg",
     name: "\u4e2d\u563b\u5408\u74a7",
     id: 5277771961,
   },
 
   {
     coverImgUrl:
-      "http://p1.music.126.net/cPaBXr1wZSg86ddl47AK7Q==/109951165375130918.jpg",
+      "https://p1.music.126.net/cPaBXr1wZSg86ddl47AK7Q==/109951165375130918.jpg",
     name: "Heartbreak Pop",
     id: 5277965913,
   },
   {
     coverImgUrl:
-      "http://p2.music.126.net/FDtX55P2NjccDna-LBj9PA==/109951165375065973.jpg",
+      "https://p2.music.126.net/FDtX55P2NjccDna-LBj9PA==/109951165375065973.jpg",
     name: "Festival Bangers",
     id: 5277969451,
   },
   {
     coverImgUrl:
-      "http://p2.music.126.net/hC0q2dGbOWHVfg4nkhIXPg==/109951165374881177.jpg",
+      "https://p2.music.126.net/hC0q2dGbOWHVfg4nkhIXPg==/109951165374881177.jpg",
     name: "Bedtime Beats",
     id: 5277778542,
   },

src/views/album.vue

@@ -276,6 +276,7 @@ export default {
   display: flex;
   width: 78vw;
   margin-bottom: 72px;
+  padding: var(--main-content-padding);
   .info {
     display: flex;
     flex-direction: column;
@@ -330,6 +331,29 @@ export default {
   }
 }
 
+@media (max-width: 600px) {
+  .playlist-info {
+    width: calc(100vw - 2 * var(--main-content-padding-x));
+    padding: var(--main-content-padding);
+    display: block;
+
+    .cover {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .info {
+      margin-top: 24px;
+      margin-left: 0;
+
+      .title {
+        font-size: 48px;
+      }
+    }
+  }
+}
+
 .explicit-symbol {
   opacity: 0.28;
   color: var(--color-text);
@@ -345,6 +369,7 @@ export default {
   font-size: 12px;
   opacity: 0.48;
   color: var(--color-text);
+  padding: var(--main-content-padding);
   div {
     margin-bottom: 4px;
   }
@@ -363,6 +388,7 @@ export default {
     opacity: 0.88;
     color: var(--color-text);
     margin-bottom: 20px;
+    padding: var(--main-content-padding);
   }
 }
 .description-fulltext {

src/views/artist.vue

@@ -4,7 +4,7 @@
       <div class="head">
         <img :src="artist.img1v1Url | resizeImage(1024)" />
       </div>
-      <div>
+      <div class="info">
         <div class="name">{{ artist.name }}</div>
         <div class="artist">{{ $t("artist.artist") }}</div>
         <div class="statistics">
@@ -253,6 +253,7 @@ export default {
   align-items: center;
   margin-bottom: 26px;
   color: var(--color-text);
+  padding: var(--main-content-padding);
   img {
     height: 192px;
     width: 192px;
@@ -289,12 +290,37 @@ export default {
   }
 }
 
+@media (max-width: 600px) {
+  .artist-info {
+    display: block;
+
+    .head {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .info {
+      margin-top: 24px;
+    }
+
+    .name {
+      font-size: 36px;
+    }
+
+    img {
+      margin: 0;
+    }
+  }
+}
+
 .section-title {
   font-weight: 600;
   font-size: 22px;
   opacity: 0.88;
   color: var(--color-text);
   margin-bottom: 16px;
+  padding: var(--main-content-padding);
   padding-top: 46px;
 
   display: flex;
@@ -309,6 +335,11 @@ export default {
 
 .latest-release {
   color: var(--color-text);
+  padding: var(--main-content-padding);
+  .section-title {
+    padding-left: 0;
+    padding-right: 0;
+  }
   .release {
     display: flex;
   }
@@ -343,6 +374,7 @@ export default {
 .popular-tracks {
   .show-more {
     display: flex;
+    padding: var(--main-content-padding);
 
     button {
       padding: 4px 8px;

src/views/artistMV.vue

@@ -81,6 +81,7 @@ export default {
 h1 {
   font-size: 42px;
   color: var(--color-text);
+  padding: var(--main-content-padding);
   .avatar {
     height: 44px;
     margin-right: 12px;

src/views/explore.vue

@@ -20,7 +20,7 @@
       </div>
     </div>
 
-    <div class="panel" v-show="showCatOptions">
+    <div class="panel" v-bind:class="{ show: showCatOptions }">
       <div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
         <div class="name">{{ bigCat }}</div>
         <div class="cats">
@@ -174,6 +174,23 @@ export default {
     },
   },
   activated() {
+    var updatePanelHeight = () => {
+      var panelChildren = this.$el.getElementsByClassName("panel")[0].children;
+      this.$el.style.setProperty(
+        "--explore-panel-children-height",
+        `${
+          Math.abs(
+            panelChildren[0].getBoundingClientRect().y -
+              (panelChildren[panelChildren.length - 1].getBoundingClientRect()
+                .y +
+                panelChildren[panelChildren.length - 1].clientHeight)
+          ) + 16
+        }px`
+      );
+    };
+    window.addEventListener("load", updatePanelHeight);
+    window.addEventListener("resize", updatePanelHeight);
+
     this.loadData();
   },
   beforeRouteUpdate(to, from, next) {
@@ -193,10 +210,12 @@ export default {
 h1 {
   color: var(--color-text);
   font-size: 56px;
+  padding: var(--main-content-padding);
 }
 .buttons {
   display: flex;
   flex-wrap: wrap;
+  padding: var(--main-content-padding);
 }
 .button {
   user-select: none;
@@ -226,8 +245,19 @@ h1 {
   margin-top: 10px;
   background: var(--color-secondary-bg);
   border-radius: 10px;
-  padding: 8px;
+  padding: 0 8px;
+  margin: var(--main-content-padding);
   color: var(--color-text);
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: all 0.3s;
+
+  &.show {
+    height: var(--explore-panel-children-height);
+    opacity: 1;
+    padding: 8px;
+  }
 
   .big-cat {
     display: flex;

src/views/home.vue

@@ -152,6 +152,7 @@ export default {
   font-size: 28px;
   font-weight: 700;
   color: var(--color-text);
+  padding: var(--main-content-padding);
   a {
     font-size: 13px;
     font-weight: 600;

src/views/library.vue

@@ -39,6 +39,7 @@
           :id="likedSongsPlaylist.id"
           dbclickTrackFunc="playPlaylistByID"
           :columnNumber="3"
+          :withoutPadding="true"
         />
       </div>
     </div>
@@ -355,6 +356,7 @@ h1 {
   color: var(--color-text);
   display: flex;
   align-items: center;
+  padding: var(--main-content-padding);
   .avatar {
     height: 44px;
     margin-right: 12px;
@@ -373,6 +375,7 @@ h1 {
 .section-one {
   display: flex;
   margin-top: 24px;
+  padding: var(--main-content-padding);
   .songs {
     flex: 7;
     margin-top: 8px;
@@ -381,6 +384,16 @@ h1 {
   }
 }
 
+@media (max-width: 800px) {
+  .section-one {
+    display: block;
+    .songs {
+      margin-top: 20px;
+      margin-left: 0;
+    }
+  }
+}
+
 .liked-songs {
   flex: 3;
   margin-top: 8px;
@@ -460,6 +473,7 @@ h1 {
   display: flex;
   justify-content: space-between;
   margin-bottom: 24px;
+  padding: var(--main-content-padding);
 }
 
 .tabs {

src/views/loginUsername.vue

@@ -106,6 +106,7 @@ export default {
 .login {
   display: flex;
   color: var(--color-text);
+  padding: var(--main-content-padding);
 }
 
 .title {

src/views/lyrics.vue

@@ -118,7 +118,12 @@
       </div>
       <div class="right-side">
         <transition name="slide-fade">
-          <div class="lyrics-container" ref="lyricsContainer" v-show="!noLyric">
+          <div
+            class="lyrics-container"
+            ref="lyricsContainer"
+            v-show="!noLyric"
+            @scroll="blurEffect($event)"
+          >
             <div class="line" id="line-1"></div>
             <div
               class="line"
@@ -270,6 +275,23 @@ export default {
       this.$parent.$refs.player.setProgress(value);
       this.$parent.$refs.player.player.seek(value);
     },
+    blurEffect(ev) {
+      ev.target.children.forEach((el) => {
+        const distanceToCenterPercentage =
+          Math.abs(
+            el.getBoundingClientRect().y +
+              el.clientHeight / 2 -
+              window.innerHeight / 2
+          ) /
+          (window.innerHeight / 2);
+        const functionedEffectValue =
+          1 - Math.sqrt(1 - Math.pow(distanceToCenterPercentage, 2));
+        el.style.setProperty(
+          "--func-val",
+          isNaN(functionedEffectValue) ? "" : functionedEffectValue.toFixed(2)
+        );
+      });
+    },
     setLyricsInterval() {
       this.lyricsInterval = setInterval(() => {
         const progress = this.player.seek() ?? 0;
@@ -282,11 +304,36 @@ export default {
         });
         if (oldHighlightLyricIndex !== this.highlightLyricIndex) {
           const el = document.getElementById(`line${this.highlightLyricIndex}`);
-          if (el)
+          if (el) {
-            el.scrollIntoView({
+            const duration = 500;
-              behavior: "smooth",
+            var start;
-              block: "center",
+            var animationProgress;
-            });
+            const oldY = el.parentNode.scrollTop;
+            const newY =
+              el.offsetTop - window.innerHeight / 2 + el.clientHeight / 2;
+            const distance = oldY - newY;
+            var animation = (timeStamp) => {
+              if (!start) {
+                start = timeStamp;
+              }
+              animationProgress = (timeStamp - start) / duration;
+              if (animationProgress < 1) {
+                el.parentNode.scrollTo(
+                  0,
+                  oldY -
+                    Math.sqrt(
+                      2 * animationProgress - Math.pow(animationProgress, 2)
+                    ) *
+                      distance
+                );
+                window.requestAnimationFrame(animation);
+              } else {
+                window.cancelAnimationFrame(animation);
+              }
+            };
+
+            window.requestAnimationFrame(animation);
+          }
         }
       }, 50);
     },
@@ -316,6 +363,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$layoutBreakpoint: 1000px;
+
 .lyrics-page {
   position: fixed;
   top: 0;
@@ -424,9 +473,28 @@ export default {
           height: 22px;
           width: 22px;
         }
+        @media (max-width: $layoutBreakpoint) {
+          button:nth-child(2) .svg-icon {
+            height: 48px;
+            width: 48px;
+          }
+          .svg-icon {
+            height: 36px;
+            width: 36px;
+          }
+        }
       }
     }
   }
+
+  @media (max-width: $layoutBreakpoint) {
+    .controls {
+      max-width: 100vw;
+      width: calc(100vw - 2 * var(--main-content-padding-x));
+      padding: var(--main-content-padding);
+      margin-top: 48px;
+    }
+  }
 }
 
 .cover {
@@ -435,18 +503,31 @@ export default {
   .cover-container {
     position: relative;
   }
+
+  @media (max-width: $layoutBreakpoint) {
+    .cover-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   img {
     border-radius: 0.75em;
-    width: 54vh;
+    width: 86vw;
-    height: 54vh;
+    height: 86vw;
+    max-width: 54vh;
+    max-height: 54vh;
     user-select: none;
     object-fit: cover;
   }
   .shadow {
     position: absolute;
     top: 12px;
-    height: 54vh;
+    width: 86vw;
-    width: 54vh;
+    height: 86vw;
+    max-width: 54vh;
+    max-height: 54vh;
     filter: blur(16px) opacity(0.6);
     transform: scale(0.92, 0.96);
     z-index: -1;
@@ -469,13 +550,24 @@ export default {
     overflow-y: auto;
     transition: 0.5s;
     .line {
+      --func-val: 1;
       // margin-top: 38px;
       padding: 18px;
-      transition: 0.2s;
+      transition: background 0.2s, transform 0.5s cubic-bezier(0.2, 0, 0, 1);
       border-radius: 12px;
+      filter: blur(12px);
+      filter: blur(calc(var(--func-val) * 12px));
+      opacity: calc(1 - var(--func-val));
+      transform: scale(0.9) translate(-5%, 0);
       &:hover {
         background: var(--color-secondary-bg);
       }
+      &#line-1 {
+        pointer-events: none;
+      }
+      &.highlight {
+        transform: scale(1) translate(0, 0);
+      }
       span {
         opacity: 0.28;
         cursor: default;
@@ -497,6 +589,12 @@ export default {
   }
 }
 
+@media (max-width: $layoutBreakpoint) {
+  .right-side {
+    display: none;
+  }
+}
+
 .close-button {
   position: fixed;
   top: 24px;

src/views/mv.vue

@@ -146,11 +146,13 @@ export default {
   background: transparent;
   overflow: hidden;
   max-height: 100vh;
+  margin: var(--main-content-padding);
 }
 
 .video-info {
   margin-top: 12px;
   color: var(--color-text);
+  padding: var(--main-content-padding);
   .title {
     font-size: 24px;
     font-weight: 600;
@@ -175,6 +177,8 @@ export default {
     font-weight: 600;
     color: var(--color-text);
     opacity: 0.88;
+    padding: var(--main-content-padding);
+    margin-bottom: 8px;
   }
 }
 

src/views/playlist.vue

@@ -453,6 +453,7 @@ export default {
 .playlist-info {
   display: flex;
   margin-bottom: 72px;
+  padding: var(--main-content-padding);
   .info {
     display: flex;
     flex-direction: column;
@@ -511,6 +512,28 @@ export default {
   }
 }
 
+@media (max-width: 600px) {
+  .playlist-info {
+    width: calc(100vw - 2 * var(--main-content-padding-x));
+    display: block;
+
+    .cover {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .info {
+      margin-top: 24px;
+      margin-left: 0;
+
+      .title {
+        font-size: 48px;
+      }
+    }
+  }
+}
+
 .special-playlist {
   margin-top: 192px;
   margin-bottom: 128px;

src/views/search.vue

@@ -13,6 +13,7 @@
           :columnNumber="3"
           :items="artists.slice(0, 3)"
           gap="34px 24px"
+          :withoutPadding="true"
         />
       </div>
 
@@ -30,6 +31,7 @@
           :columnNumber="3"
           subTextFontSize="14px"
           gap="34px 24px"
+          :withoutPadding="true"
         />
       </div>
     </div>
@@ -41,7 +43,7 @@
           $t("home.seeMore")
         }}</router-link></div
       >
-      <TrackList :tracks="tracks" type="tracklist" />
+      <TrackList :tracks="tracks" type="tracklist" :withoutPadding="true" />
     </div>
 
     <div class="music-videos" v-show="musicVideos.length > 0">
@@ -51,7 +53,7 @@
           $t("home.seeMore")
         }}</router-link></div
       >
-      <MvRow :mvs="musicVideos.slice(0, 5)" />
+      <MvRow :mvs="musicVideos.slice(0, 5)" :withoutPadding="true" />
     </div>
 
     <div class="playlists" v-show="playlists.length > 0">
@@ -68,6 +70,7 @@
         :columnNumber="6"
         subTextFontSize="14px"
         gap="34px 24px"
+        :withoutPadding="true"
       />
     </div>
 
@@ -215,6 +218,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.search {
+  padding: var(--main-content-padding);
+}
+
 .section-title {
   font-weight: 600;
   font-size: 22px;

src/views/searchType.vue

@@ -140,6 +140,7 @@ export default {
 h1 {
   margin-top: -10px;
   margin-bottom: 28px;
+  padding: var(--main-content-padding);
   color: var(--color-text);
   span {
     opacity: 0.58;

src/views/settings.vue

@@ -393,6 +393,7 @@ export default {
 .settings {
   display: flex;
   justify-content: center;
+  padding: var(--main-content-padding);
 }
 .container {
   margin-top: 24px;

yarn.lock

@@ -11176,6 +11176,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1589682787766&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vscode-codicons@^0.0.14:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/vscode-codicons/-/vscode-codicons-0.0.14.tgz#e0d05418e2e195564ff6f6a2199d70415911c18f"
+  integrity sha512-6CEH5KT9ct5WMw7n5dlX7rB8ya4CUI2FSq1Wk36XaW+c5RglFtAanUV0T+gvZVVFhl/WxfjTvFHq06Hz9c1SLA==
+
 vue-analytics@^5.22.1:
   version "5.22.1"
   resolved "https://registry.yarnpkg.com/vue-analytics/-/vue-analytics-5.22.1.tgz#9d6b32da56daee1b9dfb23a267b50349a03f710f"