✨ feat: 添加设置菜单 优化移动端菜单显示

src/App.vue

@@ -13,12 +13,19 @@ import { darkTheme } from 'naive-ui';
 import { onMounted } from 'vue';
 
 import { isElectron } from '@/hooks/MusicHook';
+import homeRouter from '@/router/home';
 import store from '@/store';
 
 import { isMobile } from './utils';
 
 onMounted(() => {
   store.dispatch('initializeSettings');
+  if (isMobile.value) {
+    store.commit(
+      'setMenus',
+      homeRouter.filter((item) => item.meta.isMobile),
+    );
+  }
 });
 </script>
 

src/components/common/InstallAppModal.vue

@@ -23,6 +23,7 @@
 import { onMounted, ref } from 'vue';
 
 import config from '@/../package.json';
+import { isMobile } from '@/utils';
 
 const showModal = ref(false);
 const isElectron = ref((window as any).electron !== undefined);
@@ -37,7 +38,7 @@ const closeModal = () => {
 
 onMounted(() => {
   // 如果是 electron 环境，不显示安装提示
-  if (isElectron.value) {
+  if (isElectron.value || isMobile.value) {
     return;
   }
 

src/layout/AppLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout-page">
     <div id="layout-main" class="layout-main" :style="{ background: backgroundColor }">
-      <title-bar />
+      <title-bar v-if="!isMobile" />
       <div class="layout-main-page">
         <!-- 侧边菜单栏 -->
         <app-menu v-if="!isMobile" class="menu" :menus="menus" />
@@ -39,7 +39,6 @@ import { useStore } from 'vuex';
 
 import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
-import { isElectron } from '@/hooks/MusicHook';
 import homeRouter from '@/router/home';
 import { isMobile } from '@/utils';
 

src/router/home.ts

@@ -6,6 +6,7 @@ const layoutRouter = [
       title: '首页',
       icon: 'icon-Home',
       keepAlive: true,
+      isMobile: true,
     },
     component: () => import('@/views/home/index.vue'),
   },
@@ -17,6 +18,7 @@ const layoutRouter = [
       noScroll: true,
       icon: 'icon-Search',
       keepAlive: true,
+      isMobile: true,
     },
     component: () => import('@/views/search/index.vue'),
   },
@@ -27,6 +29,7 @@ const layoutRouter = [
       title: '歌单',
       icon: 'icon-Paper',
       keepAlive: true,
+      isMobile: true,
     },
     component: () => import('@/views/list/index.vue'),
   },
@@ -37,6 +40,7 @@ const layoutRouter = [
       title: 'MV',
       icon: 'icon-recordfill',
       keepAlive: true,
+      isMobile: true,
     },
     component: () => import('@/views/mv/index.vue'),
   },
@@ -67,8 +71,20 @@ const layoutRouter = [
       icon: 'icon-Profile',
       keepAlive: true,
       noScroll: true,
+      isMobile: true,
     },
     component: () => import('@/views/user/index.vue'),
   },
+  {
+    path: '/set',
+    name: 'set',
+    meta: {
+      title: '设置',
+      icon: 'ri-settings-3-fill',
+      keepAlive: true,
+      noScroll: true,
+    },
+    component: () => import('@/views/set/index.vue'),
+  },
 ];
 export default layoutRouter;

src/views/set/index.vue

@@ -1,6 +1,6 @@
 <template>
   <n-scrollbar>
-    <div class="set-page">
+    <div class="set-page" :class="setAnimationClass('animate__bounceInLeft')">
       <div v-if="isElectron" class="set-item">
         <div>
           <div class="set-item-title">代理</div>
@@ -60,7 +60,7 @@
         }}</n-button>
       </div>
 
-      <div class="p-6 bg-black rounded-lg shadow-lg mt-20">
+      <div class="p-6 bg-black rounded-lg shadow-lg mt-10">
         <div class="text-gray-100 text-base text-center">支持作者</div>
         <div class="flex gap-60">
           <div class="flex flex-col items-center gap-2 cursor-none hover:scale-[2] transition-all z-10 bg-black">
@@ -85,6 +85,7 @@ import config from '@/../package.json';
 import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 import store from '@/store';
+import { setAnimationClass } from '@/utils';
 
 defineOptions({
   name: 'Setting',
@@ -108,7 +109,7 @@ const handleSave = () => {
   if (isElectron.value) {
     (window as any).electronAPI.restart();
   }
-  router.back();
+  router.push('/');
 };
 
 const openAuthor = () => {