✨ feat: 修改样式和启动命令

src/components/PlaylistType.vue

@@ -2,7 +2,7 @@
     <!-- 歌单分类列表 -->
     <div class="play-list-type">
         <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
-        <n-layout>
+        <div>
             <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
                 <span
                     class="play-list-type-item"
@@ -24,7 +24,7 @@
                 "
                 @click="isShowAllPlaylistCategory = !isShowAllPlaylistCategory"
             >{{ !isShowAllPlaylistCategory ? "显示全部" : "隐藏一些" }}</div>
-        </n-layout>
+        </div>
     </div>
 </template>
 

src/layout/components/MusicFull.vue

@@ -137,8 +137,7 @@ defineExpose({
 
   .music-lrc {
     background-color: inherit;
-    min-width: 400px;
-    max-width: 800px;
+    width: 500px;
     height: 550px;
 
     &-text {

src/layout/components/PlayBar.vue

@@ -82,7 +82,7 @@
 
 <script lang="ts" setup>
 import type { SongResult } from '@/type/music'
-import { secondToMinute, getImgUrl } from '@/utils'
+import { secondToMinute, getImgUrl, getIsMc } from '@/utils'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { setAnimationClass } from '@/utils'
@@ -107,7 +107,7 @@ const playMusicUrl = ref('')
 watch(
   () => store.state.playMusicUrl,
   async (value, oldValue) => {
-    const isUrlHasMc = location.href.includes('mc.')
+    const isUrlHasMc = getIsMc()
     if (value && isUrlHasMc) {
       let playMusicUrl1 = value as string
       if (!ProxyUrl) {

src/router/home.ts

@@ -1,54 +1,54 @@
 const layoutRouter = [
   {
-    path: "/",
-    name: "home",
+    path: '/',
+    name: 'home',
     mate: {
       keepAlive: true,
-      title: "首页",
-      icon: "icon-Home",
+      title: '首页',
+      icon: 'icon-Home',
     },
-    component: () => import("@/views/home/index.vue"),
+    component: () => import('@/views/home/index.vue'),
   },
   {
-    path: "/search",
-    name: "search",
+    path: '/search',
+    name: 'search',
     mate: {
-      title: "搜索",
+      title: '搜索',
       keepAlive: true,
-      icon: "icon-Search",
+      icon: 'icon-Search',
     },
-    component: () => import("@/views/search/index.vue"),
+    component: () => import('@/views/search/index.vue'),
   },
   {
-    path: "/list",
-    name: "list",
+    path: '/list',
+    name: 'list',
     mate: {
-      title: "歌单",
+      title: '歌单',
       keepAlive: true,
-      icon: "icon-Paper",
+      icon: 'icon-Paper',
     },
-    component: () => import("@/views/list/index.vue"),
+    component: () => import('@/views/list/index.vue'),
   },
   {
-    path: "/user",
-    name: "user",
+    path: '/user',
+    name: 'user',
     mate: {
-      title: "用户",
+      title: '用户',
       keepAlive: true,
-      icon: "icon-Profile",
+      icon: 'icon-Profile',
     },
-    component: () => import("@/views/user/index.vue"),
+    component: () => import('@/views/user/index.vue'),
   },
-  {
-    path: "/test",
-    name: "test",
-    mate: {
-      title: "用户",
-      keepAlive: true,
-      icon: "icon-Profile",
-    },
-    component: () => import("@/views/test/test.vue"),
-  },
-];
+  // {
+  //   path: "/test",
+  //   name: "test",
+  //   mate: {
+  //     title: "用户",
+  //     keepAlive: true,
+  //     icon: "icon-Profile",
+  //   },
+  //   component: () => import("@/views/test/test.vue"),
+  // },
+]
 
 export default layoutRouter;

src/utils/index.ts

@@ -31,7 +31,7 @@ export const getIsMc = () => {
   return true
 }
 
-export const getImgUrl = computed(() => (url: string, size: string) => {
+export const getImgUrl = computed(() => (url: string, size: string = '') => {
   const bdUrl = 'https://image.baidu.com/search/down?url='
   const imgUrl = encodeURIComponent(`${url}?param=${size}`)
   return `${bdUrl}${imgUrl}`

src/views/home/index.vue

@@ -1,16 +1,18 @@
 <template>
-  <n-layout class="main-page" :native-scrollbar="false">
-    <!-- 推荐歌手 -->
-    <recommend-singer />
-    <div class="main-content">
-      <!-- 歌单分类列表 -->
-      <playlist-type />
-      <!-- 本周最热音乐 -->
-      <recommend-songlist />
-      <!-- 推荐最新专辑 -->
-      <recommend-album />
-    </div>
-  </n-layout>
+  <div class="main-page">
+    <n-scrollbar>
+      <!-- 推荐歌手 -->
+      <recommend-singer />
+      <div class="main-content">
+        <!-- 歌单分类列表 -->
+        <playlist-type />
+        <!-- 本周最热音乐 -->
+        <recommend-songlist />
+        <!-- 推荐最新专辑 -->
+        <recommend-album />
+      </div>
+    </n-scrollbar>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -22,11 +24,10 @@ const RecommendAlbum = defineAsyncComponent(() => import("@/components/Recommend
 </script>
 
 <style lang="scss" scoped>
-.main-page {
-  @apply mt-4 h-full;
+.main-page{
+  @apply pt-4 h-full w-full;
 }
-
 .main-content {
-  @apply mt-6 flex;
+  @apply mt-6 flex pb-28;
 }
 </style>

src/views/list/index.vue

@@ -105,7 +105,7 @@ const handlePlay = (item: any) => {
 <template>
   <div class="list-page">
     <!-- 歌单列表 -->
-    <n-layout class="recommend" :native-scrollbar="false" @click="showMusic = false">
+    <n-scrollbar class="recommend" @click="showMusic = false" :size="100">
       <div
         class="recommend-title"
         :class="setAnimationClass('animate__bounceInLeft')"
@@ -133,7 +133,7 @@ const handlePlay = (item: any) => {
           <div class="recommend-item-title">{{ item.name }}</div>
         </div>
       </div>
-    </n-layout>
+    </n-scrollbar>
 
     <transition name="musicPage">
       <div class="music-page" v-if="showMusic">
@@ -157,7 +157,7 @@ const handlePlay = (item: any) => {
 
 <style lang="scss" scoped>
 .list-page {
-  @apply relative h-full;
+  @apply relative h-full w-full pt-4;
 }
 
 .musicPage-enter-active {
@@ -169,13 +169,13 @@ const handlePlay = (item: any) => {
 }
 
 .recommend {
-  @apply w-full h-full;
+  @apply w-full h-full bg-none;
   &-title {
-    @apply text-lg font-bold text-white py-4;
+    @apply text-lg font-bold text-white pb-4;
   }
 
   &-list {
-    @apply grid gap-6 pb-28;
+    @apply grid gap-6 pb-28 pr-3;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
   &-item {

src/views/login/index.vue

@@ -1,168 +1,171 @@
-<script lang="ts" setup>
-import { getQrKey, createQr, checkQr, getLoginStatus } from '@/api/login'
-import { onMounted } from '@vue/runtime-core';
-import { ref } from 'vue';
-import { getUserDetail, loginByCellphone } from '@/api/login';
-import { useStore } from 'vuex';
-import { useMessage } from 'naive-ui'
-import { setAnimationClass, setAnimationDelay } from "@/utils";
-import { useRouter } from 'vue-router';
-
-
-const message = useMessage()
-const store = useStore();
-const router = useRouter()
-
-const qrUrl = ref<string>()
-onMounted(() => {
-  loadLogin()
-})
-
-const loadLogin = async () => {
-  const qrKey = await getQrKey()
-  const key = qrKey.data.data.unikey
-  const { data } = await createQr(key)
-  qrUrl.value = data.data.qrimg
-  timerIsQr(key)
-}
-
-
-
-const timerIsQr = (key: string) => {
-  const timer = setInterval(async () => {
-    const { data } = await checkQr(key)
-
-    if (data.code === 800) {
-      clearInterval(timer)
-    }
-    if (data.code === 803) {
-      // 将token存入localStorage
-      localStorage.setItem('token', data.cookie)
-      const user = await getUserDetail()
-      store.state.user = user.data.profile
-      message.success('登录成功')
-
-      await getLoginStatus().then(res => {
-        console.log(res);
-      })
-      clearInterval(timer)
-    }
-  }, 5000);
-}
-
-
-// 是否扫码登陆
-const isQr = ref(true)
-const chooseQr = () => {
-  isQr.value = !isQr.value
-}
-
-// 手机号登录
-const phone = ref('')
-const password = ref('')
-const loginPhone = async () => {
-  const { data } = await loginByCellphone(phone.value, password.value)
-  if (data.code === 200) {
-    message.success('登录成功')
-    store.state.user = data.profile
-    localStorage.setItem('token', data.cookie)
-    setTimeout(() => {
-      router.push('/')
-    }, 1000);
-  }
-}
-
-</script>
-
-<template>
-  <div class="login-page">
-    <div class="phone-login">
-      <div class="bg"></div>
-      <div class="content">
-        <div class="phone" v-if="isQr" :class="setAnimationClass('animate__fadeInUp')">
-          <div class="login-title">扫码登陆</div>
-          <img class="qr-img" :src="qrUrl" />
-          <div class="text">使用网易云APP扫码登录</div>
-        </div>
-        <div class="phone" v-else :class="setAnimationClass('animate__fadeInUp')">
-          <div class="login-title">手机号登录</div>
-          <div class="phone-page">
-            <input v-model="phone" class="phone-input" type="text" placeholder="手机号" />
-            <input v-model="password" class="phone-input" type="password" placeholder="密码" />
-          </div>
-          <n-button class="btn-login" @click="loginPhone()">登录</n-button>
-        </div>
-      </div>
-      <div class="bottom">
-        <div class="title" @click="chooseQr()">{{ isQr ? '手机号登录' : '扫码登录' }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.login-page {
-  @apply p-4 flex flex-col items-center justify-center p-20;
-}
-
-.login-title {
-  @apply text-2xl font-bold mb-6;
-}
-
-.text {
-  @apply mt-4 text-green-500 text-xs;
-}
-
-.phone-login {
-  width: 350px;
-  height: 550px;
-  @apply rounded-2xl rounded-b-none bg-cover bg-no-repeat relative overflow-hidden;
-  background-image: url(http://tva4.sinaimg.cn/large/006opRgRgy1gw8nf6no7uj30rs15n0x7.jpg);
-  background-color: #383838;
-  box-shadow: inset 0px 0px 20px 5px #0000005e;
-
-  .bg {
-    @apply absolute w-full h-full bg-black opacity-30;
-  }
-
-  .bottom {
-    width: 200%;
-    height: 250px;
-    bottom: -180px;
-    border-radius: 50%;
-    left: 50%;
-    padding: 10px;
-    transform: translateX(-50%);
-    color: #ffffff99;
-    @apply absolute bg-black flex justify-center  text-lg font-bold cursor-pointer;
-    box-shadow: 10px 0px 20px #000000a9;
-  }
-
-  .content {
-    @apply absolute w-full h-full p-4 flex flex-col items-center justify-center pb-20 text-center;
-    .qr-img {
-      @apply opacity-80 rounded-2xl cursor-pointer;
-    }
-
-    .phone {
-      animation-duration: 0.5s;
-      &-page {
-        background-color: #ffffffdd;
-        width: 250px;
-        @apply rounded-2xl overflow-hidden;
-      }
-
-      &-input {
-        height: 40px;
-        border-bottom: 1px solid #e5e5e5;
-        @apply w-full text-black px-4 outline-none;
-      }
-    }
-    .btn-login {
-      width: 250px;
-      height: 40px;
-      @apply mt-10 text-white rounded-xl bg-black opacity-60;
-    }
-  }
-}
+<script lang="ts" setup>
+import { getQrKey, createQr, checkQr, getLoginStatus } from '@/api/login'
+import { onMounted } from '@vue/runtime-core';
+import { ref } from 'vue';
+import { getUserDetail, loginByCellphone } from '@/api/login';
+import { useStore } from 'vuex';
+import { useMessage } from 'naive-ui'
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+import { useRouter } from 'vue-router';
+
+
+const message = useMessage()
+const store = useStore();
+const router = useRouter()
+
+const qrUrl = ref<string>()
+onMounted(() => {
+  loadLogin()
+})
+
+const loadLogin = async () => {
+  const qrKey = await getQrKey()
+  const key = qrKey.data.data.unikey
+  const { data } = await createQr(key)
+  qrUrl.value = data.data.qrimg
+  timerIsQr(key)
+}
+
+
+
+const timerIsQr = (key: string) => {
+  const timer = setInterval(async () => {
+    const { data } = await checkQr(key)
+
+    if (data.code === 800) {
+      clearInterval(timer)
+    }
+    if (data.code === 803) {
+      // 将token存入localStorage
+      localStorage.setItem('token', data.cookie)
+      const user = await getUserDetail()
+      store.state.user = user.data.profile
+      message.success('登录成功')
+
+      await getLoginStatus().then(res => {
+        console.log(res);
+      })
+      clearInterval(timer)
+      setTimeout(() => {
+        router.push('/user')
+      }, 1000);
+    }
+  }, 5000);
+}
+
+
+// 是否扫码登陆
+const isQr = ref(true)
+const chooseQr = () => {
+  isQr.value = !isQr.value
+}
+
+// 手机号登录
+const phone = ref('')
+const password = ref('')
+const loginPhone = async () => {
+  const { data } = await loginByCellphone(phone.value, password.value)
+  if (data.code === 200) {
+    message.success('登录成功')
+    store.state.user = data.profile
+    localStorage.setItem('token', data.cookie)
+    setTimeout(() => {
+      router.push('/user')
+    }, 1000);
+  }
+}
+
+</script>
+
+<template>
+  <div class="login-page">
+    <div class="phone-login">
+      <div class="bg"></div>
+      <div class="content">
+        <div class="phone" v-if="isQr" :class="setAnimationClass('animate__fadeInUp')">
+          <div class="login-title">扫码登陆</div>
+          <img class="qr-img" :src="qrUrl" />
+          <div class="text">使用网易云APP扫码登录</div>
+        </div>
+        <div class="phone" v-else :class="setAnimationClass('animate__fadeInUp')">
+          <div class="login-title">手机号登录</div>
+          <div class="phone-page">
+            <input v-model="phone" class="phone-input" type="text" placeholder="手机号" />
+            <input v-model="password" class="phone-input" type="password" placeholder="密码" />
+          </div>
+          <n-button class="btn-login" @click="loginPhone()">登录</n-button>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="title" @click="chooseQr()">{{ isQr ? '手机号登录' : '扫码登录' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.login-page {
+  @apply p-4 flex flex-col items-center justify-center p-20;
+}
+
+.login-title {
+  @apply text-2xl font-bold mb-6;
+}
+
+.text {
+  @apply mt-4 text-green-500 text-xs;
+}
+
+.phone-login {
+  width: 350px;
+  height: 550px;
+  @apply rounded-2xl rounded-b-none bg-cover bg-no-repeat relative overflow-hidden;
+  background-image: url(http://tva4.sinaimg.cn/large/006opRgRgy1gw8nf6no7uj30rs15n0x7.jpg);
+  background-color: #383838;
+  box-shadow: inset 0px 0px 20px 5px #0000005e;
+
+  .bg {
+    @apply absolute w-full h-full bg-black opacity-30;
+  }
+
+  .bottom {
+    width: 200%;
+    height: 250px;
+    bottom: -180px;
+    border-radius: 50%;
+    left: 50%;
+    padding: 10px;
+    transform: translateX(-50%);
+    color: #ffffff99;
+    @apply absolute bg-black flex justify-center  text-lg font-bold cursor-pointer;
+    box-shadow: 10px 0px 20px #000000a9;
+  }
+
+  .content {
+    @apply absolute w-full h-full p-4 flex flex-col items-center justify-center pb-20 text-center;
+    .qr-img {
+      @apply opacity-80 rounded-2xl cursor-pointer;
+    }
+
+    .phone {
+      animation-duration: 0.5s;
+      &-page {
+        background-color: #ffffffdd;
+        width: 250px;
+        @apply rounded-2xl overflow-hidden;
+      }
+
+      &-input {
+        height: 40px;
+        border-bottom: 1px solid #e5e5e5;
+        @apply w-full text-black px-4 outline-none;
+      }
+    }
+    .btn-login {
+      width: 250px;
+      height: 40px;
+      @apply mt-10 text-white rounded-xl bg-black opacity-60;
+    }
+  }
+}
 </style>

src/views/user/index.vue

@@ -89,7 +89,7 @@ const handlePlay = (item: any) => {
       <div class="page">
         <div class="user-name">{{ user.nickname }}</div>
         <div class="user-info">
-          <n-avatar round :size="50" :src="user.avatarUrl" />
+          <n-avatar round :size="50" :src="getImgUrl(user.avatarUrl)" />
           <div class="user-info-list">
             <div class="user-info-item">
               <div class="label">{{ userDetail.profile.followeds }}</div>