🦄 refactor: 适配 web移动端 改造

src/views/history/index.vue

@@ -38,7 +38,7 @@ const { delMusic, musicList } = useMusicHistory();
 .history-page {
   @apply h-full w-full pt-2;
   .title {
-    @apply text-xl font-bold;
+    @apply pl-4 text-xl font-bold;
   }
 
   .history-list-content {

src/views/home/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <n-scrollbar :size="100">
+  <n-scrollbar :size="100" :x-scrollable="false">
     <div class="main-page">
       <!-- 推荐歌手 -->
       <recommend-singer />
       <div class="main-content">
         <!-- 歌单分类列表 -->
-        <playlist-type />
+        <playlist-type v-if="!isMobile" />
         <!-- 本周最热音乐 -->
         <recommend-songlist />
         <!-- 推荐最新专辑 -->
@@ -16,6 +16,8 @@
 </template>
 
 <script lang="ts" setup>
+import { isMobile } from '@/utils';
+
 const RecommendSinger = defineAsyncComponent(() => import('@/components/RecommendSinger.vue'));
 const PlaylistType = defineAsyncComponent(() => import('@/components/PlaylistType.vue'));
 const RecommendSonglist = defineAsyncComponent(() => import('@/components/RecommendSonglist.vue'));
@@ -27,9 +29,13 @@ defineOptions({
 
 <style lang="scss" scoped>
 .main-page {
-  @apply h-full w-full;
+  @apply h-full w-full overflow-hidden;
 }
 .main-content {
   @apply mt-6 flex mb-28;
 }
+
+.mobile .main-content {
+  @apply flex-col mx-4;
+}
 </style>

src/views/list/index.vue

@@ -14,9 +14,11 @@ defineOptions({
 const recommendList = ref();
 const showMusic = ref(false);
 
-const recommendItem = ref<IRecommendItem>();
-const listDetail = ref<IListDetail>();
+const recommendItem = ref<IRecommendItem | null>();
+const listDetail = ref<IListDetail | null>();
 const selectRecommendItem = async (item: IRecommendItem) => {
+  recommendItem.value = null;
+  listDetail.value = null;
   showMusic.value = true;
   const { data } = await getListDetail(item.id);
   recommendItem.value = item;
@@ -98,7 +100,7 @@ watch(
 
 <style lang="scss" scoped>
 .list-page {
-  @apply relative h-full w-full;
+  @apply relative h-full w-full px-4;
 }
 
 .recommend {
@@ -149,4 +151,10 @@ watch(
     }
   }
 }
+
+.mobile {
+  .recommend-list {
+    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
+  }
+}
 </style>

src/views/login/index.vue

@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 
 import { checkQr, createQr, getQrKey, getUserDetail, loginByCellphone } from '@/api/login';
-import { setAnimationClass } from '@/utils';
+import { isMobile, setAnimationClass } from '@/utils';
 
 defineOptions({
   name: 'Login',
@@ -71,7 +71,7 @@ const timerIsQr = (key: string) => {
 };
 
 // 是否扫码登陆
-const isQr = ref(true);
+const isQr = ref(!isMobile.value);
 const chooseQr = () => {
   isQr.value = !isQr.value;
 };

src/views/mv/index.vue

@@ -87,7 +87,7 @@ const close = () => {
 
 <style scoped lang="scss">
 .mv-list {
-  @apply relative h-full w-full;
+  @apply relative h-full w-full px-4;
 
   &-title {
     @apply text-xl font-bold;
@@ -173,4 +173,10 @@ const close = () => {
     @apply top-0;
   }
 }
+
+.mobile {
+  .mv-list-content {
+    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+  }
+}
 </style>

src/views/search/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="search-page">
-    <n-layout class="hot-search" :class="setAnimationClass('animate__fadeInDown')" :native-scrollbar="false">
+    <n-layout
+      v-if="isMobile ? !searchDetail : true"
+      class="hot-search"
+      :class="setAnimationClass('animate__fadeInDown')"
+      :native-scrollbar="false"
+    >
       <div class="title">热搜列表</div>
       <div class="hot-search-list">
         <template v-for="(item, index) in hotSearchData?.data" :key="index">
@@ -17,7 +22,12 @@
       </div>
     </n-layout>
     <!-- 搜索到的歌曲列表 -->
-    <n-layout class="search-list" :class="setAnimationClass('animate__fadeInUp')" :native-scrollbar="false">
+    <n-layout
+      v-if="isMobile ? searchDetail : true"
+      class="search-list"
+      :class="setAnimationClass('animate__fadeInUp')"
+      :native-scrollbar="false"
+    >
       <div class="title">{{ hotKeyword }}</div>
       <n-spin :show="searchDetailLoading">
         <div class="search-list-box">
@@ -59,7 +69,7 @@ import { getHotSearch } from '@/api/home';
 import { getSearch } from '@/api/search';
 import SongItem from '@/components/common/SongItem.vue';
 import type { IHotSearch } from '@/type/search';
-import { setAnimationClass, setAnimationDelay } from '@/utils';
+import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 defineOptions({
   name: 'Search',
@@ -195,4 +205,10 @@ const handlePlay = () => {
 .title {
   @apply text-gray-200 text-xl font-bold my-2 mx-4;
 }
+
+.mobile {
+  .hot-search {
+    @apply mr-0 w-full;
+  }
+}
 </style>

src/views/user/index.vue

@@ -10,7 +10,7 @@ import SongItem from '@/components/common/SongItem.vue';
 import MusicList from '@/components/MusicList.vue';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
-import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+import { getImgUrl, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 defineOptions({
   name: 'User',
@@ -120,7 +120,7 @@ const handlePlay = () => {
         </div>
       </div>
     </div>
-    <div class="right" :class="setAnimationClass('animate__fadeInRight')">
+    <div v-if="!isMobile" class="right" :class="setAnimationClass('animate__fadeInRight')">
       <div class="title">听歌排行</div>
       <div class="record-list">
         <n-scrollbar>
@@ -217,4 +217,10 @@ const handlePlay = () => {
     }
   }
 }
+
+.mobile {
+  .user-page {
+    @apply px-4;
+  }
+}
 </style>