Merge branch 'master' into master

2024-11-22 15:10:24 +08:00 · 2021-02-14 13:14:28 +08:00 · 2021-02-14 13:14:28 +08:00 · 3f114dda91
commit 3f114dda91
parent d425edf7ea 0c2098d01f
33 changed files with 637 additions and 50 deletions
--- a/package.json
+++ b/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",
--- a/public/index.html
+++ b/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>
--- a/src/App.vue
+++ b/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,
--- a/src/assets/icons/arrow-down.svg
+++ b/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>
--- a/src/assets/icons/arrow-up.svg
+++ b/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>
--- a/src/assets/icons/plus.svg
+++ b/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>
--- a/src/background.js
+++ b/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,
-      minHeight: 720,
+      minWidth: 360,
+      minHeight: 240,
      titleBarStyle: "hiddenInset",
+      frame: !withoutFrame,
      webPreferences: {
        webSecurity: false,
        nodeIntegration: true,
+        enableRemoteModule: true,
      },
    });

--- a/src/components/CoverRow.vue
+++ b/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;
--- a/src/components/MvRow.vue
+++ b/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 {
--- a/src/components/Navbar.vue
+++ b/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>
--- a/src/components/Player.vue
+++ b/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;
--- a/src/components/TrackList.vue
+++ b/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>
--- a/src/components/TrackListItem.vue
+++ b/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);
--- a/src/electron/ipcMain.js
+++ b/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();
+    }
+  });
 }
--- a/src/electron/ipcRenderer.js
+++ b/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;
--- a/src/electron/touchBar.js
+++ b/src/electron/touchBar.js
--- a/src/electron/tray.js
+++ b/src/electron/tray.js
@ -67,6 +67,7 @@ export function createTray(win) {
            app.exit();
          },
        },
+      },
    ]);
    
    tray.popUpContextMenu(contextMenu);
--- a/src/main.js
+++ b/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,
--- a/src/utils/staticData.js
+++ b/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,
  },
--- a/src/views/album.vue
+++ b/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 {
--- a/src/views/artist.vue
+++ b/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;
--- a/src/views/artistMV.vue
+++ b/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;
--- a/src/views/explore.vue
+++ b/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;
--- a/src/views/home.vue
+++ b/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;
--- a/src/views/library.vue
+++ b/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 {
--- a/src/views/loginUsername.vue
+++ b/src/views/loginUsername.vue
@ -106,6 +106,7 @@ export default {
 .login {
  display: flex;
  color: var(--color-text);
+  padding: var(--main-content-padding);
 }

 .title {
--- a/src/views/lyrics.vue
+++ b/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)
-            el.scrollIntoView({
-              behavior: "smooth",
-              block: "center",
-            });
+          if (el) {
+            const duration = 500;
+            var start;
+            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;
-    height: 54vh;
+    width: 86vw;
+    height: 86vw;
+    max-width: 54vh;
+    max-height: 54vh;
    user-select: none;
    object-fit: cover;
  }
  .shadow {
    position: absolute;
    top: 12px;
-    height: 54vh;
-    width: 54vh;
+    width: 86vw;
+    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;
--- a/src/views/mv.vue
+++ b/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;
  }
 }

--- a/src/views/playlist.vue
+++ b/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;
--- a/src/views/search.vue
+++ b/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;
--- a/src/views/searchType.vue
+++ b/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;
--- a/src/views/settings.vue
+++ b/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;
--- a/yarn.lock
+++ b/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"
				`@ -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>