✨ feat: 样式优化

src/const/bar-const.ts

@@ -0,0 +1,65 @@
+export const USER_SET_OPTIONS = [
+  // {
+  //   label: '打卡',
+  //   key: 'card',
+  // },
+  // {
+  //   label: '听歌升级',
+  //   key: 'card_music',
+  // },
+  // {
+  //   label: '歌曲次数',
+  //   key: 'listen',
+  // },
+  {
+    label: '退出登录',
+    key: 'logout',
+  },
+  {
+    label: '设置',
+    key: 'set',
+  },
+]
+
+export const SEARCH_TYPES = [
+  {
+    label: '单曲',
+    key: 1,
+  },
+  {
+    label: '专辑',
+    key: 10,
+  },
+  {
+    label: '歌手',
+    key: 100,
+  },
+  {
+    label: '歌单',
+    key: 1000,
+  },
+  {
+    label: '用户',
+    key: 1002,
+  },
+  {
+    label: 'MV',
+    key: 1004,
+  },
+  {
+    label: '歌词',
+    key: 1006,
+  },
+  {
+    label: '电台',
+    key: 1009,
+  },
+  {
+    label: '视频',
+    key: 1014,
+  },
+  {
+    label: '综合',
+    key: 1018,
+  },
+]

src/index.css

@@ -6,6 +6,6 @@
 @tailwind utilities;
 
 .n-image img {
-  @apply bg-gray-900;
+  background-color: #111111;
   width: 100%;
 }

src/layout/components/SearchBar.vue

@@ -23,7 +23,7 @@
             </n-input>
         </div>
         <div class="user-box">
-            <n-dropdown trigger="hover" @select="selectItem" :options="options">
+            <n-dropdown trigger="hover" @select="selectItem" :options="userSetOptions">
                 <i class="iconfont icon-xiasanjiaoxing"></i>
             </n-dropdown>
             <n-avatar
@@ -33,28 +33,24 @@
                 :src="getImgUrl(store.state.user.avatarUrl)"
                 v-if="store.state.user"
             />
-            <n-avatar
-                class="ml-2 cursor-pointer"
-                circle
-                size="medium"
-                src="https://picsum.photos/200/300?random=1"
-                @click="toLogin()"
-                v-else
-            >登录</n-avatar>
+            <div class="mx-2 rounded-full cursor-pointer text-sm" v-else @click="toLogin">登录</div>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { getSearchKeyword, getHotSearch } from '@/api/home';
+import { getSearchKeyword } from '@/api/home';
 import { getUserDetail, logout } from '@/api/login';
 import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import request from '@/utils/request_mt'
 import { getImgUrl } from '@/utils';
+import {USER_SET_OPTIONS, SEARCH_TYPES} from '@/const/bar-const'
 
 const router = useRouter()
 const store = useStore();
+const userSetOptions = ref(USER_SET_OPTIONS)
+
 
 // 推荐热搜词
 const hotSearchKeyword = ref("搜索点什么吧...")
@@ -65,9 +61,17 @@ const loadHotSearchKeyword = async () => {
     hotSearchValue.value = data.data.realkeyword
 }
 
-store.state.user = JSON.parse(localStorage.getItem('user') || '{}')
+watchEffect(() => {
+    const user = localStorage.getItem('user')
+    store.state.user = user ? JSON.parse(user) : null
+    if(!user){
+      userSetOptions.value = USER_SET_OPTIONS.filter(item => item.key !== 'logout')
+    }
+})
 
 const loadPage = async () => {
+    const token = localStorage.getItem("token")
+    if (!token) return
     const { data } = await getUserDetail()
     store.state.user = data.profile
     localStorage.setItem('user', JSON.stringify(data.profile))
@@ -77,8 +81,6 @@ const toLogin = () => {
     router.push('/login')
 }
 
-
-
 // 页面初始化
 onMounted(() => {
     loadHotSearchKeyword()
@@ -90,7 +92,6 @@ onMounted(() => {
 const searchValue = ref("")
 const searchType = ref(1)
 const search = () => {
-
     let value = searchValue.value
     if (value == "") {
         searchValue.value = hotSearchValue.value
@@ -109,79 +110,9 @@ const selectSearchType = (key: any) => {
     searchType.value = key
 }
 
-const SEARCH_TYPES = [
-    {
-        label: '单曲',
-        key: 1
-    },
-    {
-        label: '专辑',
-        key: 10
-    },
-    {
-        label: '歌手',
-        key: 100
-    },
-    {
-        label: '歌单',
-        key: 1000
-    },
-    {
-        label: '用户',
-        key: 1002
-    },
-    {
-        label: 'MV',
-        key: 1004
-    },
-    {
-        label: '歌词',
-        key: 1006
-    },
-    {
-        label: '电台',
-        key: 1009
-    },
-    {
-        label: '视频',
-        key: 1014
-    },
-    {
-        label: '综合',
-        key: 1018
-    }
-]
 
 const searchTypeOptions = ref(SEARCH_TYPES)
 
-const value = 'Drive My Car'
-const options = [
-    {
-        label: '打卡',
-        key: 'card'
-    },
-    {
-        label: '听歌升级',
-        key: 'card_music'
-    },
-    {
-        label: '歌曲次数',
-        key: 'listen'
-    },
-    {
-        label: '登录',
-        key: 'login'
-    },
-    {
-        label: '退出登录',
-        key: 'logout'
-    },
-    {
-      label: '设置',
-      key: 'set'
-    }
-]
-
 const selectItem = async (key: any) => {
     // switch 判断
     switch (key) {

src/router/home.ts

@@ -53,6 +53,7 @@ const layoutRouter = [
       title: '用户',
       noKeepAlive: true,
       icon: 'icon-Profile',
+      noScroll: true,
     },
     component: () => import('@/views/user/index.vue'),
   },

src/views/list/index.vue

@@ -78,6 +78,8 @@ watch(
             <n-image
               class="recommend-item-img-img"
               :src="getImgUrl( (item.picUrl || item.coverImgUrl), '200y200')"
+              width="200"
+              height="200"
               lazy
               preview-disabled
             />

src/views/mv/index.vue

@@ -8,7 +8,7 @@
         <div class="mv-item" v-for="(item, index) in mvList" :key="item.id"
           :class="setAnimationClass('animate__bounceIn')" :style="setAnimationDelay(index, 30)">
           <div class="mv-item-img" @click="handleShowMv(item)">
-            <n-image class="mv-item-img-img" :src="getImgUrl((item.cover), '200y200')" lazy preview-disabled />
+            <n-image class="mv-item-img-img" :src="getImgUrl((item.cover), '200y112')" lazy preview-disabled width="200" height="112" />
             <div class="top">
               <div class="play-count">{{ formatNumber(item.playCount) }}</div>
               <i class="iconfont icon-videofill"></i>
@@ -85,16 +85,17 @@ const close = () => {
 
   .mv-item {
     @apply p-2 rounded-lg;
-    background-color: #454545;
+    background-color: #1f1f1f;
     &-img {
       @apply rounded-lg overflow-hidden relative;
+      line-height: 0;
 
       &:hover img {
         @apply hover:scale-110 transition-all duration-300 ease-in-out object-top;
       }
 
       &-img {
-        @apply h-full w-full rounded-xl overflow-hidden;
+        @apply w-full rounded-lg overflow-hidden;
       }
 
       .top {
@@ -118,7 +119,7 @@ const close = () => {
 
         .play-count {
           position: absolute;
-          top: 10px;
+          top: 20px;
           left: 10px;
           font-size: 14px;
         }

src/views/user/index.vue

@@ -17,7 +17,7 @@ const router = useRouter()
 const userDetail = ref<IUserDetail>()
 const playList = ref<any[]>([])
 const recordList = ref()
-const user = store.state.user
+let user = store.state.user
 
 const loadPage = async () => {
   if (!user) {
@@ -35,14 +35,14 @@ const loadPage = async () => {
   recordList.value = recordData.allData
 }
 
-loadPage()
-
-watch(() => router.currentRoute.value, (to) => {
-  if (to.path === "/user") {
+watchEffect(() => {
+    const localUser = localStorage.getItem('user')
+    store.state.user = localUser ? JSON.parse(localUser) : null
+    user = store.state.user
     loadPage()
-  }
 })
 
+
 const isShowList = ref(false)
 const list = ref<Playlist>()
 // 展示歌单
@@ -83,7 +83,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="getImgUrl(user.avatarUrl)" />
+          <n-avatar round :size="50" :src="getImgUrl(user.avatarUrl,'50y50')" />
           <div class="user-info-list">
             <div class="user-info-item">
               <div class="label">{{ userDetail.profile.followeds }}</div>
@@ -111,7 +111,7 @@ const handlePlay = (item: any) => {
               @click="showPlaylist(item.id)"
             >
               <n-image
-                :src="getImgUrl( item.coverImgUrl, '')"
+                :src="getImgUrl( item.coverImgUrl, '50y50')"
                 class="play-list-item-img"
                 lazy
                 preview-disabled