✨ feat: 优化歌词页面样式 添加歌词进度显示 优化歌曲及列表加载方式 大幅提升歌曲歌词播放速度

.eslintrc

@@ -42,6 +42,9 @@
     "no-console": "off",
     "no-continue": "off",
     "no-restricted-syntax": "off",
+    "no-return-assign": "off",
+    "no-unused-expressions": "off",
+    "no-return-await": "off",
     "no-plusplus": "off",
     "no-param-reassign": "off",
     "no-shadow": "off",

app.js

@@ -20,7 +20,7 @@ function createWindow() {
   win.setMinimumSize(1200, 780);
   if (process.env.NODE_ENV === 'development') {
     win.webContents.openDevTools({ mode: 'detach' });
-    win.loadURL('http://localhost:7788/');
+    win.loadURL('http://localhost:4488/');
   } else {
     win.loadURL(`file://${__dirname}/dist/index.html`);
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alger-music",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "description": "这是一个用于音乐播放的应用程序。",
   "author": "Alger <[email protected]>",
   "main": "app.js",

public/css/base.css

@@ -1,3 +1,7 @@
 body{
   background-color: #000;
+}
+
+.n-popover:has(.music-play){
+  border-radius: 1.5rem !important;
 }

src/api/home.ts

@@ -43,7 +43,7 @@ export const getRecommendMusic = (params: IRecommendMusicParams) => {
 
 // 获取每日推荐
 export const getDayRecommend = () => {
-  return request.get<IData<IDayRecommend>>('/recommend/songs');
+  return request.get<IData<IData<IDayRecommend>>>('/recommend/songs');
 };
 
 // 获取最新专辑推荐

src/components/RecommendSinger.vue

@@ -74,32 +74,32 @@ const store = useStore();
 const hotSingerData = ref<IHotSinger>();
 const dayRecommendData = ref<IDayRecommend>();
 const showMusic = ref(false);
-// // 加载推荐歌手
-// const loadSingerList = async () => {
-//   const { data } = await getHotSinger({ offset: 0, limit: 5 });
-//   hotSingerData.value = data;
-// };
 
-// const loadDayRecommend = async () => {
-//   const { data } = await getDayRecommend();
-//   dayRecommendData.value = data.data;
-// };
-// 页面初始化
 onMounted(async () => {
   await loadData();
 });
 
 const loadData = async () => {
   try {
-    const [{ data: singerData }, { data: dayRecommend }] = await Promise.all([
-      getHotSinger({ offset: 0, limit: 5 }),
-      getDayRecommend(),
-    ]);
-    if (dayRecommend.data) {
-      singerData.artists = singerData.artists.slice(0, 4);
+    // 第一个请求：获取热门歌手
+    const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
+
+    // 第二个请求：获取每日推荐
+    try {
+      const {
+        data: { data: dayRecommend },
+      } = await getDayRecommend();
+      console.log('dayRecommend', dayRecommend);
+      // 处理数据
+      if (dayRecommend) {
+        singerData.artists = singerData.artists.slice(0, 4);
+      }
+      dayRecommendData.value = dayRecommend;
+    } catch (error) {
+      console.error('error', error);
     }
+
     hotSingerData.value = singerData;
-    dayRecommendData.value = dayRecommend.data;
   } catch (error) {
     console.error('error', error);
   }

src/components/common/SongItem.vue

@@ -78,9 +78,11 @@ const imageLoad = async () => {
   if (!songImageRef.value) {
     return;
   }
-  const background = await getImageBackground((songImageRef.value as any).imageRef as unknown as HTMLImageElement);
+  const { backgroundColor } = await getImageBackground(
+    (songImageRef.value as any).imageRef as unknown as HTMLImageElement,
+  );
   // eslint-disable-next-line vue/no-mutating-props
-  props.item.backgroundColor = background;
+  props.item.backgroundColor = backgroundColor;
 };
 
 // 播放音乐 设置音乐详情 打开音乐底栏