🎈 perf: 添加自动导入，优化性能

.gitignore

@@ -4,6 +4,7 @@ dist
 dist-ssr
 *.local
 dist_electron
+.idea
 
 pnpm-lock.yaml
 package-lock.json

app.js

@@ -4,8 +4,8 @@ const path = require('path')
 let mainWin = null
 function createWindow() {
   mainWin = new BrowserWindow({
-    width: 1280,
-    height: 900,
+    width: 1200,
+    height: 780,
     frame: false,
     webPreferences: {
       nodeIntegration: true,
@@ -13,7 +13,7 @@ function createWindow() {
     },
   })
   const win = mainWin
-  win.setMinimumSize(1280, 900)
+  win.setMinimumSize(1200, 780)
   if (process.env.NODE_ENV === 'development') {
     win.webContents.openDevTools({ mode: 'detach' })
     win.loadURL('http://localhost:4678/')

auto-imports.d.ts

@@ -0,0 +1,70 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useDialog: typeof import('naive-ui')['useDialog']
+  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
+  const useMessage: typeof import('naive-ui')['useMessage']
+  const useNotification: typeof import('naive-ui')['useNotification']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

components.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    MPop: typeof import('./src/components/common/MPop.vue')['default']
+    MusicList: typeof import('./src/components/MusicList.vue')['default']
+    NAvatar: typeof import('naive-ui')['NAvatar']
+    NButton: typeof import('naive-ui')['NButton']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default']
+    PlaylistType: typeof import('./src/components/PlaylistType.vue')['default']
+    RecommendAlbum: typeof import('./src/components/RecommendAlbum.vue')['default']
+    RecommendSinger: typeof import('./src/components/RecommendSinger.vue')['default']
+    RecommendSonglist: typeof import('./src/components/RecommendSonglist.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SongItem: typeof import('./src/components/common/SongItem.vue')['default']
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alger-music",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "这是一个用于音乐播放的应用程序。",
   "author": "Alger <algerkc@qq.com>",
   "main": "app.js",
@@ -24,7 +24,8 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
-    "vuex": "^4.1.0"
+    "vuex": "^4.1.0",
+    "naive-ui": "^2.34.4"
   },
   "devDependencies": {
     "@sicons/antd": "^0.10.0",
@@ -33,11 +34,12 @@
     "@vue/compiler-sfc": "^3.3.4",
     "electron": "^28.0.0",
     "electron-builder": "^24.9.1",
-    "naive-ui": "^2.34.4",
     "typescript": "^4.3.2",
     "vfonts": "^0.1.0",
     "vite": "^4.4.7",
     "vite-plugin-vue-devtools": "1.0.0-beta.5",
-    "vue-tsc": "^0.0.24"
+    "vue-tsc": "^0.0.24",
+    "unplugin-auto-import": "^0.17.2",
+    "unplugin-vue-components": "^0.26.0"
   }
 }

public/icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2685283 */
-  src: url('iconfont.woff2?t=1702897818159') format('woff2'),
-       url('iconfont.woff?t=1702897818159') format('woff'),
-       url('iconfont.ttf?t=1702897818159') format('truetype');
+  src: url('iconfont.woff2?t=1703643214551') format('woff2'),
+       url('iconfont.woff?t=1703643214551') format('woff'),
+       url('iconfont.ttf?t=1703643214551') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-list:before {
+  content: "\e603";
+}
+
 .icon-maxsize:before {
   content: "\e692";
 }

public/icon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1111849",
+      "name": "list",
+      "font_class": "list",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
     {
       "icon_id": "1306794",
       "name": "maxsize",

src/App.vue

@@ -11,7 +11,6 @@
 
 <script lang="ts" setup>
 import { darkTheme } from 'naive-ui'
-import { ref, computed } from 'vue'
 import { useStore } from 'vuex'
 
 const audio = ref<HTMLAudioElement | null>(null)

src/components/MusicList.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useStore } from 'vuex'
 import { Playlist } from '@/type/listDetail';
 import { setAnimationClass, setAnimationDelay } from "@/utils";
@@ -48,7 +47,7 @@ const formatDetail = computed(() => (detail: any) => {
 const handlePlay = (item: any) => {
   const tracks = props.musicList?.tracks || []
   const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
-  store.commit('setPlayList', tracks.slice(musicIndex))
+  store.commit('setPlayList', tracks)
 }
 
 const close = () => {

src/components/RecommendSinger.vue

@@ -66,7 +66,7 @@ const toSearchSinger = (keyword: string) => {
 .recommend-singer {
     &-list {
         @apply flex;
-        height: 350px;
+        height: 280px;
     }
     &-item {
         @apply flex-1 h-full rounded-3xl p-5 mr-5 flex flex-col justify-between;

src/components/RecommendSonglist.vue

@@ -22,7 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
 import { getRecommendMusic } from '@/api/home'
 import type { IRecommendMusic } from '@/type/music'
 import { setAnimationClass, setAnimationDelay } from '@/utils'
@@ -46,7 +45,7 @@ onMounted(() => {
 
 const handlePlay = (item: any) => {
   const musicIndex = (recommendMusic.value?.result.findIndex((music: any) => music.id == item.id) || 0) + 1
-  store.commit('setPlayList', recommendMusic.value?.result.slice(musicIndex))
+  store.commit('setPlayList', recommendMusic.value?.result)
 }
 </script>
 

src/components/common/MPop.vue

@@ -1,43 +1,42 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { setAnimationClass, setAnimationDelay } from "@/utils";
-
-const props = defineProps({
-  showPop: {
-    type: Boolean,
-    default: false
-  },
-  showClose: {
-    type: Boolean,
-    default: true
-  },
-})
-
-const musicFullClass = computed(() => {
-  if (props.showPop) {
-    return setAnimationClass('animate__fadeInUp')
-  } else {
-    return setAnimationClass('animate__fadeOutDown')
-  }
-})
-
-</script>
-
-<template>
-  <div class="pop-page" v-show="props.showPop" :class="musicFullClass">
-    <i class="iconfont icon-icon_error close" v-if="props.showClose" @click="close()"></i>
-    <img src="http://code.myalger.top/2000*2000.jpg,f054f0,0f2255" />
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.pop-page {
-  height: 800px;
-  @apply absolute top-4 left-0 w-full;
-  background-color: #000000f0;
-  .close {
-    @apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
-  }
-}
+<script lang="ts" setup>
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+
+const props = defineProps({
+  showPop: {
+    type: Boolean,
+    default: false
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+})
+
+const musicFullClass = computed(() => {
+  if (props.showPop) {
+    return setAnimationClass('animate__fadeInUp')
+  } else {
+    return setAnimationClass('animate__fadeOutDown')
+  }
+})
+
+</script>
+
+<template>
+  <div class="pop-page" v-show="props.showPop" :class="musicFullClass">
+    <i class="iconfont icon-icon_error close" v-if="props.showClose"></i>
+    <img src="http://code.myalger.top/2000*2000.jpg,f054f0,0f2255" />
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.pop-page {
+  height: 800px;
+  @apply absolute top-4 left-0 w-full;
+  background-color: #000000f0;
+  .close {
+    @apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
+  }
+}
 </style>

src/components/common/PlayBottom.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useStore } from 'vuex';
 const store = useStore()
 const isPlay = computed(() => store.state.isPlay as boolean)

src/hooks/MusicHook.ts

@@ -1,7 +1,6 @@
 import { getMusicLrc } from '@/api/music'
 import { ILyric } from '@/type/lyric'
 import { getIsMc } from '@/utils'
-import { ref } from 'vue'
 
 interface ILrcData {
   text: string

src/layout/AppLayout.vue

@@ -31,10 +31,7 @@
 
 <script lang="ts" setup>
 import type { SongResult } from '@/type/music';
-import { computed } from 'vue';
 import { useStore } from 'vuex';
-// import { AppMenu, PlayBar, SearchBar } from './components';
-import { defineAsyncComponent } from 'vue';
 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
 const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));

src/layout/components/lrcFull.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
-
 const props = defineProps({
   lrcList: {
     type: Array,

src/main.ts

@@ -1,19 +1,19 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-
-import naive from "naive-ui";
-import "vfonts/Lato.css";
-import "vfonts/FiraCode.css";
-
-// tailwind css
-import "./index.css";
-
-import router from "@/router";
-
-import store from "@/store";
-
-const app = createApp(App);
-app.use(router);
-app.use(store);
-app.use(naive);
-app.mount("#app");
+import { createApp } from "vue";
+import App from "./App.vue";
+
+import naive from "naive-ui";
+import "vfonts/Lato.css";
+import "vfonts/FiraCode.css";
+
+// tailwind css
+import "./index.css";
+
+import router from "@/router";
+
+import store from "@/store";
+
+const app = createApp(App);
+app.use(router);
+app.use(store);
+// app.use(naive);
+app.mount("#app");

src/utils/index.ts

@@ -1,5 +1,3 @@
-import { computed } from 'vue'
-
 // 设置歌手背景图片
 export const setBackgroundImg = (url: String) => {
   return 'background-image:' + 'url(' + url + ')'
@@ -41,7 +39,6 @@ export const getMusicProxyUrl = (url: string) => {
   return `${ProxyUrl}/mc?url=${PUrl}`
 }
 
-
 export const getImgUrl = computed(() => (url: string, size: string = '') => {
   const bdUrl = 'https://image.baidu.com/search/down?url='
   const imgUrl = encodeURIComponent(`${url}?param=${size}`)

src/views/home/index.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
 const RecommendSinger = defineAsyncComponent(() => import("@/components/RecommendSinger.vue"));
 const PlaylistType = defineAsyncComponent(() => import("@/components/PlaylistType.vue"));
 const RecommendSonglist = defineAsyncComponent(() => import("@/components/RecommendSonglist.vue"));

src/views/list/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { getRecommendList, getListDetail, getListByCat } from '@/api/list'
-import { ref, watch } from 'vue';
 import type { IRecommendItem } from "@/type/list";
 import type { IListDetail } from "@/type/listDetail";
 import { setAnimationClass, setAnimationDelay, getImgUrl } from "@/utils";
@@ -125,8 +124,7 @@ const formatNumber = (num: any) => {
         @apply hover:scale-110 transition-all duration-300 ease-in-out;
       }
       &-img {
-        width: 200px;
-        height: 200px;
+        @apply h-full w-full rounded-xl overflow-hidden;
       }
       .top {
         @apply absolute w-full h-full top-0 left-0 flex justify-center items-center transition-all duration-300 ease-in-out cursor-pointer;

src/views/login/index.vue

@@ -1,7 +1,6 @@
 <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'
@@ -105,7 +104,7 @@ const loginPhone = async () => {
 
 <style lang="scss" scoped>
 .login-page {
-  @apply p-4 flex flex-col items-center justify-center p-20;
+  @apply flex flex-col items-center justify-center p-20;
 }
 
 .login-title {

src/views/search/index.vue

@@ -115,7 +115,7 @@ const store = useStore()
 const handlePlay = (item: any) => {
   const tracks = searchDetail.value?.result.songs || []
   const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
-  store.commit('setPlayList', tracks.slice(musicIndex))
+  store.commit('setPlayList', tracks)
 }
 </script>
 

src/views/user/index.vue

@@ -64,7 +64,7 @@ const formatDetail = computed(() => (detail: any) => {
 const handlePlay = (item: any) => {
   const tracks = recordList.value || []
   const musicIndex = (tracks.findIndex((music: any) => music.id == item.id) || 0)
-  store.commit('setPlayList', tracks.slice(musicIndex))
+  store.commit('setPlayList', tracks)
 }
 
 </script>

tsconfig.json

@@ -1,32 +1,37 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": [
-      "esnext",
-      "dom"
-    ],
-    "baseUrl": "./",
-    "paths": {
-      "@": [
-        "src"
-      ],
-      "@/*": [
-        "src/*"
-      ],
-    }
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ]
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "types": [
+      "naive-ui/volar",
+      "./auto-imports.d.ts",
+      "./components.d.ts"
+    ],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "baseUrl": "./",
+    "paths": {
+      "@": [
+        "src"
+      ],
+      "@/*": [
+        "src/*"
+      ],
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
 }

vite.config.ts

@@ -2,10 +2,32 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import VueDevTools from 'vite-plugin-vue-devtools'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), VueDevTools()],
+  plugins: [
+    vue(),
+    VueDevTools(),
+    AutoImport({
+      imports: [
+        'vue',
+        {
+          'naive-ui': [
+            'useDialog',
+            'useMessage',
+            'useNotification',
+            'useLoadingBar',
+          ],
+        },
+      ],
+    }),
+    Components({
+      resolvers: [NaiveUiResolver()],
+    }),
+  ],
   base: './',
   resolve: {
     alias: {
@@ -36,4 +58,15 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['vue', 'axios'],
+          naiveui: ['naive-ui'],
+          lodash: ['lodash'],
+        },
+      },
+    },
+  },
 })