🦄 refactor: 重构整个项目优化打包修改后台服务为本地运行添加更新版本检测功能

2026-05-17 18:47:29 +08:00 · 2025-01-01 02:25:18 +08:00
parent f8d421c9b1
commit 17d20fa299
260 changed files with 78557 additions and 1693 deletions
@@ -0,0 +1,224 @@
+<template>
+  <div class="search-page">
+    <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">
+          <div
+            :class="setAnimationClass('animate__bounceInLeft')"
+            :style="setAnimationDelay(index, 10)"
+            class="hot-search-item"
+            @click.stop="loadSearch(item.searchWord, 1)"
+          >
+            <span class="hot-search-item-count" :class="{ 'hot-search-item-count-3': index < 3 }">{{
+              index + 1
+            }}</span>
+            {{ item.searchWord }}
+          </div>
+        </template>
+      </div>
+    </n-layout>
+    <!-- 搜索到的歌曲列表 -->
+    <n-layout
+      v-if="isMobile ? searchDetail : true"
+      class="search-list"
+      :class="setAnimationClass('animate__fadeInUp')"
+      :native-scrollbar="false"
+    >
+      <div class="title">{{ hotKeyword }}</div>
+      <div v-loading="searchDetailLoading" class="search-list-box">
+        <template v-if="searchDetail">
+          <div
+            v-for="(item, index) in searchDetail?.songs"
+            :key="item.id"
+            :class="setAnimationClass('animate__bounceInRight')"
+            :style="setAnimationDelay(index, 50)"
+          >
+            <song-item :item="item" @play="handlePlay" />
+          </div>
+          <template v-for="(list, key) in searchDetail">
+            <template v-if="key.toString() !== 'songs'">
+              <div
+                v-for="(item, index) in list"
+                :key="item.id"
+                :class="setAnimationClass('animate__bounceInRight')"
+                :style="setAnimationDelay(index, 50)"
+              >
+                <SearchItem :item="item" />
+              </div>
+            </template>
+          </template>
+        </template>
+      </div>
+    </n-layout>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDateFormat } from '@vueuse/core';
+import { onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+import { getHotSearch } from '@/api/home';
+import { getSearch } from '@/api/search';
+import SongItem from '@/components/common/SongItem.vue';
+import type { IHotSearch } from '@/type/search';
+import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
+import SearchItem from '@/components/common/SearchItem.vue';
+
+defineOptions({
+  name: 'Search'
+});
+
+const route = useRoute();
+const store = useStore();
+
+const searchDetail = ref<any>();
+const searchType = computed(() => store.state.searchType as number);
+const searchDetailLoading = ref(false);
+
+// 热搜列表
+const hotSearchData = ref<IHotSearch>();
+const loadHotSearch = async () => {
+  const { data } = await getHotSearch();
+  hotSearchData.value = data;
+};
+
+onMounted(() => {
+  loadHotSearch();
+  loadSearch(route.query.keyword);
+});
+
+const hotKeyword = ref(route.query.keyword || '搜索列表');
+
+watch(
+  () => store.state.searchValue,
+  (value) => {
+    loadSearch(value);
+  }
+);
+
+const dateFormat = (time: any) => useDateFormat(time, 'YYYY.MM.DD').value;
+const loadSearch = async (keywords: any, type: any = null) => {
+  hotKeyword.value = keywords;
+  searchDetail.value = undefined;
+  if (!keywords) return;
+
+  searchDetailLoading.value = true;
+  const { data } = await getSearch({ keywords, type: type || searchType.value });
+
+  const songs = data.result.songs || [];
+  const albums = data.result.albums || [];
+  const mvs = (data.result.mvs || []).map((item: any) => ({
+    ...item,
+    picUrl: item.cover,
+    playCount: item.playCount,
+    desc: item.artists.map((artist: any) => artist.name).join('/'),
+    type: 'mv'
+  }));
+
+  const playlists = (data.result.playlists || []).map((item: any) => ({
+    ...item,
+    picUrl: item.coverImgUrl,
+    playCount: item.playCount,
+    desc: item.creator.nickname,
+    type: 'playlist'
+  }));
+
+  // songs map 替换属性
+  songs.forEach((item: any) => {
+    item.picUrl = item.al.picUrl;
+    item.artists = item.ar;
+  });
+  albums.forEach((item: any) => {
+    item.desc = `${item.artist.name} ${item.company} ${dateFormat(item.publishTime)}`;
+  });
+  searchDetail.value = {
+    songs,
+    albums,
+    mvs,
+    playlists
+  };
+
+  searchDetailLoading.value = false;
+};
+
+watch(
+  () => route.path,
+  async (path) => {
+    if (path === '/search') {
+      store.state.searchValue = route.query.keyword;
+    }
+  }
+);
+
+const handlePlay = () => {
+  const tracks = searchDetail.value?.songs || [];
+  store.commit('setPlayList', tracks);
+};
+</script>
+
+<style lang="scss" scoped>
+.search-page {
+  @apply flex h-full;
+}
+
+.hot-search {
+  @apply mr-4 rounded-xl flex-1 overflow-hidden;
+  @apply bg-light-100 dark:bg-dark-100;
+  animation-duration: 0.2s;
+  min-width: 400px;
+  height: 100%;
+
+  &-list {
+    @apply pb-28;
+  }
+
+  &-item {
+    @apply px-4 py-3 text-lg rounded-xl cursor-pointer;
+    @apply text-gray-900 dark:text-white;
+    transition: all 0.3s ease;
+
+    &:hover {
+      @apply bg-light-100 dark:bg-dark-200;
+    }
+
+    &-count {
+      @apply inline-block ml-3 w-8;
+      @apply text-green-500;
+
+      &-3 {
+        @apply font-bold inline-block ml-3 w-8;
+        @apply text-red-500;
+      }
+    }
+  }
+}
+
+.search-list {
+  @apply flex-1 rounded-xl;
+  @apply bg-light-100 dark:bg-dark-100;
+  height: 100%;
+
+  &-box {
+    @apply pb-28;
+  }
+}
+
+.title {
+  @apply text-xl font-bold my-2 mx-4;
+  @apply text-gray-900 dark:text-white;
+}
+
+.mobile {
+  .hot-search {
+    @apply mr-0 w-full;
+  }
+}
+</style>