✨ feat: 修改样式和启动命令

app.js

@@ -14,8 +14,8 @@ function createWindow() {
   win.setMinimumSize(1280, 900);
 
   if (process.env.NODE_ENV === 'dev') {
-    win.loadURL('http://localhost:4678/')
     win.webContents.openDevTools({ mode: 'detach' })
+    win.loadURL('http://localhost:4678/')
   } else {
     win.loadURL(`file://${__dirname}/dist/index.html`)
   }

index.html

@@ -10,6 +10,7 @@
       href="./public/icon/iconfont.css"
     />
     <link rel="stylesheet" href="./public/css/animate.css" />
+    <link rel="stylesheet" href="./public/css/base.css" />
     <style>
       :root {
         --animate-delay: 0.5s;

package.json

@@ -7,9 +7,9 @@
     "build": "vite build",
     "serve": "vite preview",
     "es": "vite && electron .",
-    "eb": "vite build && electron-builder",
+    "start": "set NODE_ENV=production && electron .",
-    "start": "electron .",
+    "e:b": "electron-builder --config ./electron.config.json",
-    "e:b": "electron-builder --config ./electron.config.json"
+    "eb": "vite build && e:b"
   },
   "dependencies": {
     "@tailwindcss/postcss7-compat": "^2.2.4",
@@ -35,7 +35,6 @@
     "typescript": "^4.3.2",
     "vfonts": "^0.1.0",
     "vite": "^4.4.7",
-    "vite-plugin-electron-builder": "^0.1.0",
     "vite-plugin-vue-devtools": "1.0.0-beta.5",
     "vue-tsc": "^0.0.24"
   }

public/css/base.css

@@ -0,0 +1,3 @@
+body{
+  background-color: #000;
+}

src/components/PlaylistType.vue

@@ -2,7 +2,7 @@
     <!-- 歌单分类列表 -->
     <div class="play-list-type">
         <div class="title" :class="setAnimationClass('animate__fadeInLeft')">歌单分类</div>
-        <n-layout>
+        <div>
             <template v-for="(item, index) in playlistCategory?.sub" :key="item.name">
                 <span
                     class="play-list-type-item"
@@ -24,7 +24,7 @@
                 "
                 @click="isShowAllPlaylistCategory = !isShowAllPlaylistCategory"
             >{{ !isShowAllPlaylistCategory ? "显示全部" : "隐藏一些" }}</div>
-        </n-layout>
+        </div>
     </div>
 </template>
 

src/layout/components/MusicFull.vue

@@ -137,8 +137,7 @@ defineExpose({
 
   .music-lrc {
     background-color: inherit;
-    min-width: 400px;
+    width: 500px;
-    max-width: 800px;
     height: 550px;
 
     &-text {

src/layout/components/PlayBar.vue

@@ -82,7 +82,7 @@
 
 <script lang="ts" setup>
 import type { SongResult } from '@/type/music'
-import { secondToMinute, getImgUrl } from '@/utils'
+import { secondToMinute, getImgUrl, getIsMc } from '@/utils'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { setAnimationClass } from '@/utils'
@@ -107,7 +107,7 @@ const playMusicUrl = ref('')
 watch(
   () => store.state.playMusicUrl,
   async (value, oldValue) => {
-    const isUrlHasMc = location.href.includes('mc.')
+    const isUrlHasMc = getIsMc()
     if (value && isUrlHasMc) {
       let playMusicUrl1 = value as string
       if (!ProxyUrl) {

src/router/home.ts

@@ -1,54 +1,54 @@
 const layoutRouter = [
   {
-    path: "/",
+    path: '/',
-    name: "home",
+    name: 'home',
     mate: {
       keepAlive: true,
-      title: "首页",
+      title: '首页',
-      icon: "icon-Home",
+      icon: 'icon-Home',
     },
-    component: () => import("@/views/home/index.vue"),
+    component: () => import('@/views/home/index.vue'),
   },
   {
-    path: "/search",
+    path: '/search',
-    name: "search",
+    name: 'search',
     mate: {
-      title: "搜索",
+      title: '搜索',
       keepAlive: true,
-      icon: "icon-Search",
+      icon: 'icon-Search',
     },
-    component: () => import("@/views/search/index.vue"),
+    component: () => import('@/views/search/index.vue'),
   },
   {
-    path: "/list",
+    path: '/list',
-    name: "list",
+    name: 'list',
     mate: {
-      title: "歌单",
+      title: '歌单',
       keepAlive: true,
-      icon: "icon-Paper",
+      icon: 'icon-Paper',
     },
-    component: () => import("@/views/list/index.vue"),
+    component: () => import('@/views/list/index.vue'),
   },
   {
-    path: "/user",
+    path: '/user',
-    name: "user",
+    name: 'user',
     mate: {
-      title: "用户",
+      title: '用户',
       keepAlive: true,
-      icon: "icon-Profile",
+      icon: 'icon-Profile',
     },
-    component: () => import("@/views/user/index.vue"),
+    component: () => import('@/views/user/index.vue'),
   },
-  {
+  // {
-    path: "/test",
+  //   path: "/test",
-    name: "test",
+  //   name: "test",
-    mate: {
+  //   mate: {
-      title: "用户",
+  //     title: "用户",
-      keepAlive: true,
+  //     keepAlive: true,
-      icon: "icon-Profile",
+  //     icon: "icon-Profile",
-    },
+  //   },
-    component: () => import("@/views/test/test.vue"),
+  //   component: () => import("@/views/test/test.vue"),
-  },
+  // },
-];
+]
 
 export default layoutRouter;

src/utils/index.ts

@@ -31,7 +31,7 @@ export const getIsMc = () => {
   return true
 }
 
-export const getImgUrl = computed(() => (url: string, size: string) => {
+export const getImgUrl = computed(() => (url: string, size: string = '') => {
   const bdUrl = 'https://image.baidu.com/search/down?url='
   const imgUrl = encodeURIComponent(`${url}?param=${size}`)
   return `${bdUrl}${imgUrl}`

src/views/home/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <n-layout class="main-page" :native-scrollbar="false">
+  <div class="main-page">
+    <n-scrollbar>
       <!-- 推荐歌手 -->
       <recommend-singer />
       <div class="main-content">
@@ -10,7 +11,8 @@
         <!-- 推荐最新专辑 -->
         <recommend-album />
       </div>
-  </n-layout>
+    </n-scrollbar>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -22,11 +24,10 @@ const RecommendAlbum = defineAsyncComponent(() => import("@/components/Recommend
 </script>
 
 <style lang="scss" scoped>
-.main-page {
+.main-page{
-  @apply mt-4 h-full;
+  @apply pt-4 h-full w-full;
 }
-
 .main-content {
-  @apply mt-6 flex;
+  @apply mt-6 flex pb-28;
 }
 </style>

src/views/list/index.vue

@@ -105,7 +105,7 @@ const handlePlay = (item: any) => {
 <template>
   <div class="list-page">
     <!-- 歌单列表 -->
-    <n-layout class="recommend" :native-scrollbar="false" @click="showMusic = false">
+    <n-scrollbar class="recommend" @click="showMusic = false" :size="100">
       <div
         class="recommend-title"
         :class="setAnimationClass('animate__bounceInLeft')"
@@ -133,7 +133,7 @@ const handlePlay = (item: any) => {
           <div class="recommend-item-title">{{ item.name }}</div>
         </div>
       </div>
-    </n-layout>
+    </n-scrollbar>
 
     <transition name="musicPage">
       <div class="music-page" v-if="showMusic">
@@ -157,7 +157,7 @@ const handlePlay = (item: any) => {
 
 <style lang="scss" scoped>
 .list-page {
-  @apply relative h-full;
+  @apply relative h-full w-full pt-4;
 }
 
 .musicPage-enter-active {
@@ -169,13 +169,13 @@ const handlePlay = (item: any) => {
 }
 
 .recommend {
-  @apply w-full h-full;
+  @apply w-full h-full bg-none;
   &-title {
-    @apply text-lg font-bold text-white py-4;
+    @apply text-lg font-bold text-white pb-4;
   }
 
   &-list {
-    @apply grid gap-6 pb-28;
+    @apply grid gap-6 pb-28 pr-3;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
   &-item {

src/views/login/index.vue

@@ -46,6 +46,9 @@ const timerIsQr = (key: string) => {
         console.log(res);
       })
       clearInterval(timer)
+      setTimeout(() => {
+        router.push('/user')
+      }, 1000);
     }
   }, 5000);
 }
@@ -67,7 +70,7 @@ const loginPhone = async () => {
     store.state.user = data.profile
     localStorage.setItem('token', data.cookie)
     setTimeout(() => {
-      router.push('/')
+      router.push('/user')
     }, 1000);
   }
 }

src/views/user/index.vue

@@ -89,7 +89,7 @@ const handlePlay = (item: any) => {
       <div class="page">
         <div class="user-name">{{ user.nickname }}</div>
         <div class="user-info">
-          <n-avatar round :size="50" :src="user.avatarUrl" />
+          <n-avatar round :size="50" :src="getImgUrl(user.avatarUrl)" />
           <div class="user-info-list">
             <div class="user-info-item">
               <div class="label">{{ userDetail.profile.followeds }}</div>