✨ feat: 更新依赖和配置，增强开发体验

- 在 electron.vite.config.ts 中启用 Vue DevTools 插件
- 更新 package.json 中多个依赖版本，确保兼容性和性能
- 调整 tsconfig.node.json 的配置，优化模块解析
- 删除不再使用的组件 PlaylistType.vue、RecommendAlbum.vue、RecommendSinger.vue 和 RecommendSonglist.vue
- 在请求处理逻辑中改进错误日志输出，使用 console.error 替代 console.log
- 在首页视图中替换推荐歌手组件为顶部横幅组件

这些更改旨在提升开发效率和用户体验，确保项目的稳定性和可维护性。

electron.vite.config.ts

@@ -5,6 +5,7 @@ import AutoImport from 'unplugin-auto-import/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
 import viteCompression from 'vite-plugin-compression';
+import VueDevTools from 'vite-plugin-vue-devtools';
 
 export default defineConfig({
   main: {
@@ -23,7 +24,7 @@ export default defineConfig({
     plugins: [
       vue(),
       viteCompression(),
-      // VueDevTools(),
+      VueDevTools(),
       AutoImport({
         imports: [
           'vue',

package.json

@@ -21,40 +21,41 @@
     "build:linux": "npm run build && electron-builder --linux"
   },
   "dependencies": {
-    "@electron-toolkit/preload": "^3.0.0",
+    "@electron-toolkit/preload": "^3.0.1",
-    "@electron-toolkit/utils": "^3.0.0",
+    "@electron-toolkit/utils": "^4.0.0",
     "@unblockneteasemusic/server": "^0.27.8-patch.1",
-    "electron-store": "^8.1.0",
+    "electron-store": "^8.1.1",
     "electron-updater": "^6.1.7",
     "font-list": "^1.5.1",
     "netease-cloud-music-api-alger": "^4.25.0",
-    "vue-i18n": "9"
+    "vue-i18n": "11.1.2"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.14",
     "@electron-toolkit/eslint-config": "^1.0.2",
     "@electron-toolkit/eslint-config-ts": "^2.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@rushstack/eslint-patch": "^1.10.3",
     "@tailwindcss/postcss7-compat": "^2.2.4",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@types/howler": "^2.2.12",
     "@types/node": "^20.14.8",
     "@types/tinycolor2": "^1.4.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@vitejs/plugin-vue": "^5.2.3",
-    "@typescript-eslint/parser": "^7.0.0",
+    "@vue/compiler-sfc": "^3.5.13",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/compiler-sfc": "^3.5.0",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/runtime-core": "^3.5.13",
-    "@vue/runtime-core": "^3.5.0",
+    "@vueuse/core": "^13.0.0",
-    "@vueuse/core": "^11.0.3",
+    "@vueuse/electron": "^13.0.0",
-    "@vueuse/electron": "^11.0.3",
     "animate.css": "^4.1.1",
+    "axios": "^1.8.3",
     "autoprefixer": "^10.4.20",
-    "axios": "^1.7.7",
     "cross-env": "^7.0.3",
     "electron": "^34.0.0",
     "electron-builder": "^25.1.8",
-    "electron-vite": "^2.3.0",
+    "electron-vite": "3.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
@@ -65,26 +66,24 @@
     "eslint-plugin-vue-scoped-css": "^2.7.2",
     "howler": "^2.2.4",
     "lodash": "^4.17.21",
-    "marked": "^15.0.4",
+    "marked": "^15.0.7",
     "naive-ui": "^2.41.0",
-    "postcss": "^8.4.49",
+    "prettier": "^3.5.3",
-    "prettier": "^3.3.2",
+    "remixicon": "^4.6.0",
-    "remixicon": "^4.2.0",
+    "sass": "^1.86.0",
-    "sass": "^1.83.4",
     "tailwindcss": "^3.4.17",
     "tinycolor2": "^1.6.0",
-    "typescript": "^5.5.2",
+    "tunajs": "^1.0.15",
-    "unplugin-auto-import": "^0.18.2",
+    "typescript": "^5.8.2",
-    "unplugin-vue-components": "^0.27.4",
+    "unplugin-auto-import": "^19.1.1",
-    "vfonts": "^0.1.0",
+    "unplugin-vue-components": "^28.4.1",
-    "vite": "^5.3.1",
+    "vite": "^6.2.2",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-vue-devtools": "7.4.0",
+    "vite-plugin-vue-devtools": "7.7.2",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "vue-tsc": "^2.0.22",
+    "vue-tsc": "^2.2.8",
-    "vuex": "^4.1.0",
+    "vuex": "^4.1.0"
-    "tunajs": "^1.0.15"
   },
   "build": {
     "appId": "com.alger.music",

src/renderer/api/music.ts

@@ -91,7 +91,7 @@ export const likeSong = (id: number, like: boolean = true) => {
 // 获取用户喜欢的音乐列表
 export const getLikedList = (uid: number) => {
   return request.get('/likelist', {
-    params: { uid }
+    params: { uid, noLogin: true }
   });
 };
 

src/renderer/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
@@ -11,6 +12,8 @@ declare module 'vue' {
     NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
     NButtonGroup: typeof import('naive-ui')['NButtonGroup']
+    NCarousel: typeof import('naive-ui')['NCarousel']
+    NCarouselItem: typeof import('naive-ui')['NCarouselItem']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']

src/renderer/components/RecommendSinger.vue

@@ -1,179 +0,0 @@
-<template>
-  <!-- 推荐歌手 -->
-  <n-scrollbar :size="100" :x-scrollable="true">
-    <div class="recommend-singer">
-      <div class="recommend-singer-list">
-        <div
-          v-if="dayRecommendData"
-          class="recommend-singer-item relative"
-          :class="setAnimationClass('animate__backInRight')"
-          :style="setAnimationDelay(0, 100)"
-        >
-          <div
-            :style="
-              setBackgroundImg(getImgUrl(dayRecommendData?.dailySongs[0].al.picUrl, '500y500'))
-            "
-            class="recommend-singer-item-bg"
-          ></div>
-          <div
-            class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
-            @click="showMusic = true"
-          >
-            <div class="font-bold text-lg">
-              {{ t('comp.recommendSinger.title') }}
-            </div>
-
-            <div class="mt-2">
-              <p
-                v-for="item in dayRecommendData?.dailySongs.slice(0, 5)"
-                :key="item.id"
-                class="text-el"
-              >
-                {{ item.name }}
-                <br />
-              </p>
-            </div>
-          </div>
-        </div>
-        <div
-          v-for="(item, index) in hotSingerData?.artists"
-          :key="item.id"
-          class="recommend-singer-item relative"
-          :class="setAnimationClass('animate__backInRight')"
-          :style="setAnimationDelay(index + 1, 100)"
-        >
-          <div
-            :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
-            class="recommend-singer-item-bg"
-          ></div>
-          <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
-            {{ t('common.songCount', { count: item.musicSize }) }}
-          </div>
-          <div class="recommend-singer-item-info z-10">
-            <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
-              <i class="iconfont icon-playfill text-xl"></i>
-            </div>
-            <div class="ml-4">
-              <div class="recommend-singer-item-info-name text-el">{{ item.name }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <music-list
-        v-if="dayRecommendData?.dailySongs.length"
-        v-model:show="showMusic"
-        :name="t('comp.recommendSinger.songlist')"
-        :song-list="dayRecommendData?.dailySongs"
-        :cover="false"
-      />
-    </div>
-  </n-scrollbar>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-
-import { getDayRecommend, getHotSinger } from '@/api/home';
-import MusicList from '@/components/MusicList.vue';
-import router from '@/router';
-import { IDayRecommend } from '@/type/day_recommend';
-import type { IHotSinger } from '@/type/singer';
-import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
-
-const store = useStore();
-const { t } = useI18n();
-
-// 歌手信息
-const hotSingerData = ref<IHotSinger>();
-const dayRecommendData = ref<IDayRecommend>();
-const showMusic = ref(false);
-
-onMounted(async () => {
-  await loadData();
-});
-
-const loadData = async () => {
-  try {
-    // 第一个请求：获取热门歌手
-    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
-
-    // 第二个请求：获取每日推荐
-    try {
-      const {
-        data: { data: dayRecommend }
-      } = await getDayRecommend();
-      // 处理数据
-      if (dayRecommend) {
-        singerData.artists = singerData.artists.slice(0, 4);
-      }
-      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
-    } catch (error) {
-      console.error('error', error);
-    }
-
-    hotSingerData.value = singerData;
-  } catch (error) {
-    console.error('error', error);
-  }
-};
-
-const toSearchSinger = (keyword: string) => {
-  router.push({
-    path: '/search',
-    query: {
-      keyword
-    }
-  });
-};
-
-// 监听登录状态
-watchEffect(() => {
-  if (store.state.user) {
-    loadData();
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.recommend-singer {
-  &-list {
-    @apply flex;
-    height: 280px;
-  }
-  &-item {
-    @apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between overflow-hidden;
-    &-bg {
-      @apply bg-gray-900 dark:bg-gray-800 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
-      filter: brightness(60%);
-    }
-    &-info {
-      @apply flex items-center p-2;
-      &-play {
-        @apply w-12 h-12 bg-green-500 rounded-full flex justify-center items-center hover:bg-green-600 cursor-pointer text-white;
-      }
-      &-name {
-        @apply text-gray-100 dark:text-gray-100;
-      }
-    }
-    &-count {
-      @apply text-gray-100 dark:text-gray-100;
-    }
-  }
-}
-
-.mobile .recommend-singer {
-  &-list {
-    height: 180px;
-    @apply ml-4;
-  }
-  &-item {
-    @apply p-4 rounded-xl;
-    &-bg {
-      @apply rounded-xl;
-    }
-  }
-}
-</style>

src/renderer/components/home/RecommendSonglist.vue

@@ -27,11 +27,10 @@ import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 
 import { getRecommendMusic } from '@/api/home';
+import SongItem from '@/components/common/SongItem.vue';
 import type { IRecommendMusic } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';
 
-import SongItem from './common/SongItem.vue';
-
 const { t } = useI18n();
 const store = useStore();
 // 推荐歌曲

src/renderer/components/home/TopBanner.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="recommend-singer">
+    <div class="recommend-singer-list">
+      <n-carousel
+        slides-per-view="auto"
+        :show-dots="false"
+        :space-between="20"
+        draggable
+        show-arrow
+        :autoplay="false"
+      >
+        <n-carousel-item :class="setAnimationClass('animate__backInRight')" :style="setAnimationDelay(0, 100)" style="width: calc((100% / 5) - 16px)">
+          <div
+            v-if="dayRecommendData"
+            class="recommend-singer-item relative"
+          >
+            <div
+              :style="
+                setBackgroundImg(getImgUrl(dayRecommendData?.dailySongs[0].al.picUrl, '500y500'))
+              "
+              class="recommend-singer-item-bg"
+            ></div>
+            <div
+              class="recommend-singer-item-count p-2 text-base text-gray-200 z-10 cursor-pointer"
+              @click="showMusic = true"
+            >
+              <div class="font-bold text-lg">
+                {{ t('comp.recommendSinger.title') }}
+              </div>
+
+              <div class="mt-2">
+                <p
+                  v-for="item in dayRecommendData?.dailySongs.slice(0, 5)"
+                  :key="item.id"
+                  class="text-el"
+                >
+                  {{ item.name }}
+                  <br />
+                </p>
+              </div>
+            </div>
+          </div>
+        </n-carousel-item>
+
+        <n-carousel-item  :class="setAnimationClass('animate__backInRight')"
+          :style="setAnimationDelay(1, 100)"
+          style="width: calc(((100% / 5) - 16px) * 3)">
+          <div class="user-play">
+            <div class="user-play-title">
+              {{ store.state.user?.nickname }}
+            </div>
+            <div class="user-play-item" v-for="item in userPlaylist" :key="item.id">
+              <div class="user-play-item-img">
+                <img :src="getImgUrl(item.coverImgUrl, '200y200')" alt="">
+              </div>
+              <div class="user-play-item-info">
+                <div class="user-play-item-info-name text- overflow-hidden">{{ item.name }}</div>
+                <div class="user-play-item-info-count">{{ t('common.songCount', { count: item.trackCount }) }}</div>
+              </div>
+            </div>
+          </div>
+        </n-carousel-item>
+        <n-carousel-item
+          v-for="(item, index) in hotSingerData?.artists"
+          :key="item.id"
+          :class="setAnimationClass('animate__backInRight')"
+          :style="setAnimationDelay(index + 1, 100)"
+          style="width: calc((100% / 5) - 16px)"
+        >
+          <div
+            class="recommend-singer-item relative"
+            :class="setAnimationClass('animate__backInRight')"
+            :style="setAnimationDelay(index + 2, 100)"
+          >
+            <div
+              :style="setBackgroundImg(getImgUrl(item.picUrl, '500y500'))"
+              class="recommend-singer-item-bg"
+            ></div>
+            <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
+              {{ t('common.songCount', { count: item.musicSize }) }}
+            </div>
+            <div class="recommend-singer-item-info z-10">
+              <div class="recommend-singer-item-info-play" @click="toSearchSinger(item.name)">
+                <i class="iconfont icon-playfill text-xl"></i>
+              </div>
+              <div class="ml-4">
+                <div class="recommend-singer-item-info-name text-el">{{ item.name }}</div>
+              </div>
+            </div>
+          </div>
+        </n-carousel-item>
+      </n-carousel>
+    </div>
+
+    <music-list
+      v-if="dayRecommendData?.dailySongs.length"
+      v-model:show="showMusic"
+      :name="t('comp.recommendSinger.songlist')"
+      :song-list="dayRecommendData?.dailySongs"
+      :cover="false"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+
+import { getDayRecommend, getHotSinger } from '@/api/home';
+import MusicList from '@/components/MusicList.vue';
+import router from '@/router';
+import { IDayRecommend } from '@/type/day_recommend';
+import type { IHotSinger } from '@/type/singer';
+import { getImgUrl, setAnimationClass, setAnimationDelay, setBackgroundImg } from '@/utils';
+import { getUserPlaylist } from '@/api/user';
+import { Playlist } from '@/type/list';
+
+
+const store = useStore();
+const { t } = useI18n();
+
+// 歌手信息
+const hotSingerData = ref<IHotSinger>();
+const dayRecommendData = ref<IDayRecommend>();
+const showMusic = ref(false);
+const userPlaylist = ref<Playlist[]>([]);
+
+onMounted(async () => {
+  await loadData();
+});
+
+const loadData = async () => {
+  try {
+    // 第一个请求：获取热门歌手
+    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
+
+    // 第二个请求：获取每日推荐
+    try {
+      const {
+        data: { data: dayRecommend }
+      } = await getDayRecommend();
+      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
+    } catch (error) {
+      console.error('error', error);
+    }
+
+    hotSingerData.value = singerData;
+    if(store.state.user){
+      const { data: playlistData } = await getUserPlaylist(store.state.user?.userId);
+      userPlaylist.value = (playlistData.playlist as Playlist[]).sort((a, b) => b.playCount - a.playCount).slice(0, 3);
+    }
+  } catch (error) {
+    console.error('error', error);
+  }
+};
+
+const toSearchSinger = (keyword: string) => {
+  router.push({
+    path: '/search',
+    query: {
+      keyword
+    }
+  });
+};
+
+// 监听登录状态
+watchEffect(() => {
+  if (store.state.user) {
+    loadData();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.recommend-singer {
+  &-list {
+    @apply flex;
+    height: 280px;
+    margin-right: 20px;
+  }
+  &-item {
+    @apply flex-1 h-full rounded-3xl p-5 flex flex-col justify-between overflow-hidden;
+    &-bg {
+      @apply bg-gray-900 dark:bg-gray-800 bg-no-repeat bg-cover bg-center rounded-3xl absolute w-full h-full top-0 left-0 z-0;
+      filter: brightness(60%);
+    }
+    &-info {
+      @apply flex items-center p-2;
+      &-play {
+        @apply w-12 h-12 bg-green-500 rounded-full flex justify-center items-center hover:bg-green-600 cursor-pointer text-white;
+      }
+      &-name {
+        @apply text-gray-100 dark:text-gray-100;
+      }
+    }
+    &-count {
+      @apply text-gray-100 dark:text-gray-100;
+    }
+  }
+}
+
+.user-play{
+  @apply flex bg-light-100 dark:bg-dark rounded-3xl p-4 gap-4;
+  &-item{
+    @apply bg-light dark:bg-dark-100 rounded-3xl overflow-hidden w-28;
+    &-img{
+      @apply w-28 h-28 rounded-3xl overflow-hidden;
+      img{
+        @apply w-full h-full object-cover;
+      }
+    }
+    &-info{
+      @apply flex-1;
+      &-name{
+        @apply text-gray-900 dark:text-gray-100 line-clamp-1;
+      }
+      &-count{
+        @apply text-gray-900 dark:text-gray-100;
+      }
+    }
+  }
+}
+.mobile .recommend-singer {
+  &-list {
+    height: 180px;
+    @apply ml-4;
+  }
+  &-item {
+    @apply p-4 rounded-xl;
+    &-bg {
+      @apply rounded-xl;
+    }
+  }
+}
+</style>

src/renderer/main.ts

@@ -1,6 +1,3 @@
-import 'vfonts/Lato.css';
-import 'vfonts/FiraCode.css';
-// tailwind css
 import './index.css';
 import 'animate.css';
 import 'remixicon/fonts/remixicon.css';

src/renderer/utils/request.ts

@@ -75,7 +75,7 @@ request.interceptors.response.use(
     return response;
   },
   async (error) => {
-    console.log('error', error);
+    console.error('error', error);
     const config = error.config as CustomAxiosRequestConfig;
 
     // 如果没有配置，直接返回错误
@@ -84,10 +84,10 @@ request.interceptors.response.use(
     }
 
     // 处理 301 状态码
-    if (error.response?.status === 301) {
+    if (error.response?.status === 301 && config.params.noLogin !== true) {
       // 使用 store mutation 清除用户信息
       store.commit('logout');
-      console.log(`301 状态码，清除登录信息后重试第 ${config.retryCount} 次`);
+      console.error(`301 状态码，清除登录信息后重试第 ${config.retryCount} 次`, config);
       config.retryCount = 3;
     }
 
@@ -98,7 +98,7 @@ request.interceptors.response.use(
       !NO_RETRY_URLS.includes(config.url as string)
     ) {
       config.retryCount++;
-      console.log(`请求重试第 ${config.retryCount} 次`);
+      console.error(`请求重试第 ${config.retryCount} 次`);
 
       // 延迟重试
       await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
@@ -107,7 +107,7 @@ request.interceptors.response.use(
       return request(config);
     }
 
-    console.log(`重试${MAX_RETRIES}次后仍然失败`);
+    console.error(`重试${MAX_RETRIES}次后仍然失败`);
     return Promise.reject(error);
   }
 );

src/renderer/views/home/index.vue

@@ -2,7 +2,7 @@
   <n-scrollbar :size="100" :x-scrollable="false">
     <div class="main-page">
       <!-- 推荐歌手 -->
-      <recommend-singer />
+      <top-banner />
       <div class="main-content">
         <!-- 歌单分类列表 -->
         <playlist-type v-if="!isMobile" />
@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts" setup>
-import PlaylistType from '@/components/PlaylistType.vue';
+import PlaylistType from '@/components/home/PlaylistType.vue';
-import RecommendAlbum from '@/components/RecommendAlbum.vue';
+import RecommendAlbum from '@/components/home/RecommendAlbum.vue';
-import RecommendSinger from '@/components/RecommendSinger.vue';
+import RecommendSonglist from '@/components/home/RecommendSonglist.vue';
-import RecommendSonglist from '@/components/RecommendSonglist.vue';
+import TopBanner from '@/components/home/TopBanner.vue';
 import { isMobile } from '@/utils';
 import FavoriteList from '@/views/favorite/index.vue';
 

src/renderer/views/login/index.vue

@@ -135,9 +135,9 @@ const loginPhone = async () => {
         </div>
       </div>
       <div class="bottom">
-        <div class="title" @click="chooseQr()">
+        <!-- <div class="title" @click="chooseQr()">
           {{ isQr ? t('login.button.switchToPhone') : t('login.button.switchToQr') }}
-        </div>
+        </div> -->
       </div>
     </div>
   </div>

tsconfig.node.json

@@ -1,8 +1,16 @@
 {
   "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
-  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*", "src/i18n/**/*"],
+  "include": [
+    "electron.vite.config.*",
+    "src/main/**/*",
+    "src/preload/**/*",
+    "src/i18n/**/*"
+  ],
   "compilerOptions": {
     "composite": true,
-    "types": ["electron-vite/node"]
+    "types": [
+      "electron-vite/node"
+    ],
+    "moduleResolution": "bundler",
   }
-}
+}