diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index c7b7e58..dfab181 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -39,6 +39,7 @@ export default defineConfig({
     ],
     publicDir: resolve('resources'),
     server: {
+      host: '0.0.0.0',
       proxy: {
         // with options
         [process.env.VITE_API_LOCAL as string]: {
diff --git a/src/i18n/lang/en-US/settings.ts b/src/i18n/lang/en-US/settings.ts
index aa21568..3e7c60f 100644
--- a/src/i18n/lang/en-US/settings.ts
+++ b/src/i18n/lang/en-US/settings.ts
@@ -168,42 +168,57 @@ export default {
   },
   lyricSettings: {
     title: 'Lyric Settings',
+    tabs: {
+      display: 'Display',
+      interface: 'Interface',
+      typography: 'Typography',
+      mobile: 'Mobile'
+    },
     pureMode: 'Pure Mode',
     hideCover: 'Hide Cover',
     centerDisplay: 'Center Display',
     showTranslation: 'Show Translation',
+    hideLyrics: 'Hide Lyrics',
     hidePlayBar: 'Hide Play Bar',
-    fontSize: 'Font Size',
-    letterSpacing: 'Letter Spacing',
-    lineHeight: 'Line Height',
+    hideMiniPlayBar: 'Hide Mini Play Bar',
     backgroundTheme: 'Background Theme',
-    fontSizeMarks: {
-      small: 'Small',
-      medium: 'Medium',
-      large: 'Large'
-    },
-    letterSpacingMarks: {
-      compact: 'Compact',
-      default: 'Default',
-      loose: 'Loose'
-    },
-    lineHeightMarks: {
-      compact: 'Compact',
-      default: 'Default',
-      loose: 'Loose'
-    },
     themeOptions: {
       default: 'Default',
       light: 'Light',
       dark: 'Dark'
     },
-    hideMiniPlayBar: 'Hide Mini Play Bar',
-    hideLyrics: 'Hide Lyrics',
-    tabs: {
-      interface: 'Interface',
-      display: 'Display',
-      typography: 'Typography'
-    }
+    fontSize: 'Font Size',
+    fontSizeMarks: {
+      small: 'Small',
+      medium: 'Medium',
+      large: 'Large'
+    },
+    letterSpacing: 'Letter Spacing',
+    letterSpacingMarks: {
+      compact: 'Compact',
+      default: 'Default',
+      loose: 'Loose'
+    },
+    lineHeight: 'Line Height',
+    lineHeightMarks: {
+      compact: 'Compact',
+      default: 'Default',
+      loose: 'Loose'
+    },
+    mobileLayout: 'Mobile Layout',
+    layoutOptions: {
+      default: 'Default',
+      ios: 'iOS Style',
+      android: 'Android Style'
+    },
+    mobileCoverStyle: 'Cover Style',
+    coverOptions: {
+      record: 'Record',
+      square: 'Square',
+      full: 'Full Screen'
+    },
+    lyricLines: 'Lyric Lines',
+    mobileUnavailable: 'This setting is only available on mobile devices'
   },
   shortcutSettings: {
     title: 'Shortcut Settings',
diff --git a/src/i18n/lang/zh-CN/player.ts b/src/i18n/lang/zh-CN/player.ts
index 073b5c4..867ff49 100644
--- a/src/i18n/lang/zh-CN/player.ts
+++ b/src/i18n/lang/zh-CN/player.ts
@@ -16,7 +16,7 @@ export default {
   playFailed: '当前歌曲播放失败，播放下一首',
   playMode: {
     sequence: '顺序播放',
-    loop: '循环播放',
+    loop: '单曲循环',
     random: '随机播放'
   },
   fullscreen: {
diff --git a/src/i18n/lang/zh-CN/settings.ts b/src/i18n/lang/zh-CN/settings.ts
index 6731ab9..bbed282 100644
--- a/src/i18n/lang/zh-CN/settings.ts
+++ b/src/i18n/lang/zh-CN/settings.ts
@@ -167,19 +167,33 @@ export default {
     portNumber: '请输入有效的端口号(1-65535)'
   },
   lyricSettings: {
-    title: '页面设置',
+    title: '歌词设置',
+    tabs: {
+      display: '显示',
+      interface: '界面',
+      typography: '文字',
+      mobile: '移动端'
+    },
     pureMode: '纯净模式',
     hideCover: '隐藏封面',
     centerDisplay: '居中显示',
     showTranslation: '显示翻译',
+    hideLyrics: '隐藏歌词',
     hidePlayBar: '隐藏播放栏',
+    hideMiniPlayBar: '隐藏迷你播放栏',
+    backgroundTheme: '背景主题',
+    themeOptions: {
+      default: '默认',
+      light: '亮色',
+      dark: '暗色'
+    },
     fontSize: '字体大小',
     fontSizeMarks: {
       small: '小',
       medium: '中',
       large: '大'
     },
-    letterSpacing: '文字间距',
+    letterSpacing: '字间距',
     letterSpacingMarks: {
       compact: '紧凑',
       default: '默认',
@@ -191,19 +205,20 @@ export default {
       default: '默认',
       loose: '宽松'
     },
-    backgroundTheme: '背景主题',
-    themeOptions: {
+    mobileLayout: '移动端布局',
+    layoutOptions: {
       default: '默认',
-      light: '亮色',
-      dark: '暗色'
+      ios: 'iOS风格',
+      android: '安卓风格'
     },
-    hideMiniPlayBar: '隐藏迷你播放栏',
-    hideLyrics: '隐藏歌词',
-    tabs: {
-      interface: '界面',
-      typography: '文字',
-      display: '显示'
-    }
+    mobileCoverStyle: '封面样式',
+    coverOptions: {
+      record: '唱片',
+      square: '方形',
+      full: '全屏'
+    },
+    lyricLines: '歌词行数',
+    mobileUnavailable: '此设置仅在移动端可用'
   },
   shortcutSettings: {
     title: '快捷键设置',
diff --git a/src/locale/zh-CN.json b/src/locale/zh-CN.json
new file mode 100644
index 0000000..a5563da
--- /dev/null
+++ b/src/locale/zh-CN.json
@@ -0,0 +1,58 @@
+{
+  "settings": {
+    "lyricSettings": {
+      "title": "歌词设置",
+      "tabs": {
+        "display": "显示",
+        "interface": "界面",
+        "typography": "文字",
+        "mobile": "移动端"
+      },
+      "pureMode": "纯净模式",
+      "hideCover": "隐藏封面",
+      "centerDisplay": "居中显示",
+      "showTranslation": "显示翻译",
+      "hideLyrics": "隐藏歌词",
+      "hidePlayBar": "隐藏播放栏",
+      "hideMiniPlayBar": "隐藏迷你播放栏",
+      "backgroundTheme": "背景主题",
+      "themeOptions": {
+        "default": "默认",
+        "light": "亮色",
+        "dark": "暗色"
+      },
+      "fontSize": "字体大小",
+      "fontSizeMarks": {
+        "small": "小",
+        "medium": "中",
+        "large": "大"
+      },
+      "letterSpacing": "字间距",
+      "letterSpacingMarks": {
+        "compact": "紧凑",
+        "default": "默认",
+        "loose": "宽松"
+      },
+      "lineHeight": "行高",
+      "lineHeightMarks": {
+        "compact": "紧凑",
+        "default": "默认",
+        "loose": "宽松"
+      },
+      "mobileLayout": "移动端布局",
+      "layoutOptions": {
+        "default": "默认",
+        "ios": "iOS风格",
+        "android": "安卓风格"
+      },
+      "mobileCoverStyle": "封面样式",
+      "coverOptions": {
+        "record": "唱片",
+        "square": "方形",
+        "full": "全屏"
+      },
+      "lyricLines": "歌词行数",
+      "mobileUnavailable": "此设置仅在移动端可用"
+    }
+  }
+} 
\ No newline at end of file
diff --git a/src/renderer/components/lyric/LyricSettings.vue b/src/renderer/components/lyric/LyricSettings.vue
index 2e1ff77..243d374 100644
--- a/src/renderer/components/lyric/LyricSettings.vue
+++ b/src/renderer/components/lyric/LyricSettings.vue
@@ -114,6 +114,47 @@
             </div>
           </div>
         </n-tab-pane>
+
+        <!-- 移动端设置 -->
+        <n-tab-pane :name="'mobile'" :tab="t('settings.lyricSettings.tabs.mobile')">
+          <div class="tab-content" v-if="isMobile">
+            <div class="section-title">{{ t('settings.lyricSettings.mobileLayout') }}</div>
+            <n-radio-group v-model:value="config.mobileLayout" name="mobileLayout" class="mb-4">
+              <n-space>
+                <n-radio value="default">{{ t('settings.lyricSettings.layoutOptions.default') }}</n-radio>
+                <n-radio value="ios">{{ t('settings.lyricSettings.layoutOptions.ios') }}</n-radio>
+                <n-radio value="android">{{ t('settings.lyricSettings.layoutOptions.android') }}</n-radio>
+              </n-space>
+            </n-radio-group>
+            
+            <div class="section-title">{{ t('settings.lyricSettings.mobileCoverStyle') }}</div>
+            <n-radio-group v-model:value="config.mobileCoverStyle" name="mobileCoverStyle" class="mb-4">
+              <n-space>
+                <n-radio value="record">{{ t('settings.lyricSettings.coverOptions.record') }}</n-radio>
+                <n-radio value="square">{{ t('settings.lyricSettings.coverOptions.square') }}</n-radio>
+                <n-radio value="full">{{ t('settings.lyricSettings.coverOptions.full') }}</n-radio>
+              </n-space>
+            </n-radio-group>
+            
+            <div class="slider-item">
+              <span>{{ t('settings.lyricSettings.lyricLines') }}</span>
+              <n-slider
+                v-model:value="config.mobileShowLyricLines"
+                :step="1"
+                :min="1"
+                :max="5"
+                :marks="{
+                  1: '1',
+                  3: '3',
+                  5: '5'
+                }"
+              />
+            </div>
+          </div>
+          <div v-else class="mobile-unavailable">
+            {{ t('settings.lyricSettings.mobileUnavailable') }}
+          </div>
+        </n-tab-pane>
       </n-tabs>
     </div>
   </div>
@@ -124,6 +165,7 @@ import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
+import { isMobile } from '@/utils';
 
 const { t } = useI18n();
 const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
@@ -253,4 +295,8 @@ defineExpose({
   color: var(--text-color-active) !important;
   @apply text-xs;
 }
+
+.mobile-unavailable {
+  @apply text-center py-4 text-gray-500 text-sm;
+}
 </style>
diff --git a/src/renderer/components/lyric/MusicFullMobile.vue b/src/renderer/components/lyric/MusicFullMobile.vue
new file mode 100644
index 0000000..ecb30ad
--- /dev/null
+++ b/src/renderer/components/lyric/MusicFullMobile.vue
@@ -0,0 +1,1166 @@
+<template>
+  <n-drawer
+    v-model:show="isVisible"
+    height="100%"
+    placement="bottom"
+    :style="{ background: playerStore.playMusic.primaryColor || background }"
+    :to="`#layout-main`"
+    :z-index="9998"
+  >
+  
+    <div id="mobile-drawer-target" :class="[config.theme, `cover-style-${config.mobileCoverStyle}`]">
+      <!-- 顶部控制按钮 -->
+      <div v-if="playMusic?.playLoading" class="loading-overlay">
+        <i class="ri-loader-4-line loading-icon"></i>
+      </div>
+      <div
+        class="control-btn absolute top-5 left-5"
+        :class="{ 'pure-mode': config.pureModeEnabled }"
+        @click="closeMusicFull"
+      >
+        <i class="ri-arrow-down-s-line"></i>
+      </div>
+
+      <n-popover trigger="click" placement="bottom">
+        <template #trigger>
+          <div
+            class="control-btn absolute top-5 right-5"
+            :class="{ 'pure-mode': config.pureModeEnabled }"
+          >
+            <i class="ri-settings-3-line"></i>
+          </div>
+        </template>
+        <lyric-settings ref="lyricSettingsRef" />
+      </n-popover>
+
+      <!-- 全屏歌词页面 -->
+      <transition name="fade">
+        <div 
+          v-if="showFullLyrics" 
+          class="fullscreen-lyrics"
+          :class="config.theme"
+        >
+          <div class="fullscreen-header">
+            <div class="song-title">{{ playMusic.name }}</div>
+            <div class="artist-name">
+              <span v-for="(item, index) in artistList" :key="index">
+                {{ item.name }}{{ index < artistList.length - 1 ? ' / ' : '' }}
+              </span>
+            </div>
+          </div>
+
+          <div
+            ref="lyricsScrollerRef"
+            class="lyrics-scroller"
+            @touchstart="handleTouchStart"
+            @touchmove="handleTouchMove"
+            @touchend="handleTouchEnd"
+            @scroll="handleScroll"
+          >
+            <div class="lyrics-padding-top"></div>
+            <div 
+              v-for="(item, index) in lrcArray" 
+              :key="index"
+              :id="`lyric-line-${index}`"
+              class="lyric-line"
+              :class="{ 'now-text': index === nowIndex, 'hover-text': item.text }"
+              @click="jumpToLyricTime(index)"
+            >
+              <span :style="getLrcStyle(index)">{{ item.text }}</span>
+              <div v-if="config.showTranslation && item.trText" class="translation">
+                {{ item.trText }}
+              </div>
+            </div>
+            <div class="lyrics-padding-bottom"></div>
+          </div>
+        </div>
+      </transition>
+
+      <!-- 主要内容区域 -->
+      <transition name="fade">
+        <div v-if="!showFullLyrics" class="ios-layout-container">
+          <!-- 封面区域 -->
+          <div
+            class="cover-container"
+            :class="{ 
+              'record-style': config.mobileCoverStyle === 'record',
+              'square-style': config.mobileCoverStyle === 'square',
+              'full-style': config.mobileCoverStyle === 'full',
+              'paused': !play
+            }"
+            @click="cycleCoverStyle"
+          >
+            <div class="img-wrapper">
+              <n-image
+                ref="PicImgRef"
+                :src="getImgUrl(playMusic?.picUrl, '500y500')"
+                lazy
+                preview-disabled
+                class="cover-image"
+                :class="{ 'full-blend': config.mobileCoverStyle === 'full' }"
+              />
+            </div>
+          </div>
+
+          <div class="px-2">
+            <!-- 歌曲信息 -->
+            <div class="song-info">
+              <h1 class="song-title">{{ playMusic.name }}</h1>
+              <p class="song-artist">
+                <span
+                  v-for="(item, index) in artistList"
+                  :key="index"
+                  class="artist-name"
+                  @click="handleArtistClick(item.id)"
+                >
+                  {{ item.name }}
+                  {{ index < artistList.length - 1 ? ' / ' : '' }}
+                </span>
+              </p>
+            </div>
+
+            <!-- 歌词区域 -->
+            <div 
+              class="lyrics-container"
+              v-if="!config.hideLyrics"
+              @click="showFullLyricScreen"
+            >
+              <div v-if="lrcArray.length > 0" class="lyrics-wrapper">
+                <div v-for="(line, idx) in visibleLyrics" :key="idx" class="lyric-line">
+                  {{ line.text }}
+                  <div v-if="config.showTranslation && line.trText" class="translation">
+                    {{ line.trText }}
+                  </div>
+                </div>
+              </div>
+              <div v-else class="no-lyrics">
+                {{ t('player.lrc.noLrc') }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+
+      <!-- 统一的控制区域 -->
+      <div class="unified-controls" :class="{ 'fullscreen-mode': showFullLyrics }">
+        <!-- 进度条 (苹果风格) -->
+        <div class="progress-container">
+          <div class="time-info">
+            <span class="current-time">{{ secondToMinute(nowTime) }}</span>
+            <span class="total-time">{{ secondToMinute(allTime) }}</span>
+          </div>
+          <div class="apple-style-progress" @click="handleProgressBarClick">
+            <div class="progress-track">
+              <div 
+                class="progress-fill" 
+                :style="{ width: `${(nowTime / Math.max(1, allTime)) * 100}%` }"
+              ></div>
+              <div 
+                class="progress-thumb"
+                :class="{ 'active': isThumbDragging }"
+                :style="{ left: `${(nowTime / Math.max(1, allTime)) * 100}%` }"
+                @touchstart="handleThumbTouchStart"
+                @touchmove="handleThumbTouchMove"
+                @touchend="handleThumbTouchEnd"
+              ></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 控制按钮 -->
+        <div class="control-buttons">
+          <!-- 返回按钮，仅在全屏歌词模式下显示 -->
+          <div v-if="showFullLyrics" class="back-button" @click.stop="closeFullLyrics">
+            <i class="ri-arrow-down-s-line"></i>
+          </div>
+          <div class="side-button" @click="togglePlayMode">
+            <i :class="playModeIcon"></i>
+          </div>
+          <div class="main-button prev" @click="prevSong">
+            <i class="ri-skip-back-fill"></i>
+          </div>
+          <div class="main-button play-pause" @click="togglePlay">
+            <i :class="playIcon"></i>
+          </div>
+          <div class="main-button next" @click="nextSong">
+            <i class="ri-skip-forward-fill"></i>
+          </div>
+          <div class="side-button" @click="toggleFavorite">
+            <i class="ri-heart-3-fill" :class="{ 'favorite': isFavorite }"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </n-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import LyricSettings from '@/components/lyric/LyricSettings.vue';
+import {
+  allTime,
+  artistList,
+  lrcArray,
+  nowIndex,
+  nowTime,
+  playMusic,
+  sound,
+  textColors,
+  useLyricProgress
+} from '@/hooks/MusicHook';
+import { useArtist } from '@/hooks/useArtist';
+import { usePlayerStore } from '@/store/modules/player';
+import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
+import { getImgUrl, secondToMinute } from '@/utils';
+import { animateGradient, getHoverBackgroundColor, getTextColors } from '@/utils/linearColor';
+import { showBottomToast } from '@/utils/shortcutToast';
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+// 播放控制相关
+const play = computed(() => playerStore.isPlay);
+const playIcon = computed(() => play.value ? 'ri-pause-fill' : 'ri-play-fill');
+const playMode = computed(() => playerStore.playMode);
+const playModeIcon = computed(() => {
+  switch (playMode.value) {
+    case 0:
+      return 'ri-repeat-line';
+    case 1:
+      return 'ri-repeat-one-line';
+    case 2:
+      return 'ri-shuffle-line';
+    default:
+      return 'ri-repeat-line';
+  }
+});
+
+// 喜欢歌曲
+const isFavorite = computed(() => {
+  return playerStore.favoriteList.includes(playMusic.value.id as number);
+});
+
+const toggleFavorite = () => {
+  if (isFavorite.value) {
+    playerStore.removeFromFavorite(playMusic.value.id as number);
+  } else {
+    playerStore.addToFavorite(playMusic.value.id as number);
+  }
+};
+
+// 歌词全屏控制
+const showFullLyrics = ref(false);
+const isAutoScrollEnabled = ref(true);
+const lyricsScrollerRef = ref<HTMLElement | null>(null);
+const isTouchScrolling = ref(false);
+const touchStartY = ref(0);
+const lastScrollTop = ref(0);
+const autoScrollTimer = ref<number | null>(null);
+
+// 显示全屏歌词
+const showFullLyricScreen = () => {
+  showFullLyrics.value = true;
+  // 使用多次延迟尝试滚动，确保能够滚动到当前歌词
+  nextTick(() => {
+    scrollToCurrentLyric(true);
+    
+    setTimeout(() => {
+      scrollToCurrentLyric(true);
+    }, 200);
+    
+    setTimeout(() => {
+      scrollToCurrentLyric(true);
+    }, 500);
+  });
+};
+
+// 关闭全屏歌词
+const closeFullLyrics = () => {
+  showFullLyrics.value = false;
+  if (autoScrollTimer.value) {
+    clearTimeout(autoScrollTimer.value);
+    autoScrollTimer.value = null;
+  }
+};
+
+// 滚动到当前歌词，添加错误处理和日志
+const scrollToCurrentLyric = (immediate = false) => {
+  try {
+    if (!lyricsScrollerRef.value || !isAutoScrollEnabled.value || isTouchScrolling.value) return;
+    
+    const activeEl = document.getElementById(`lyric-line-${nowIndex.value}`);
+    if (!activeEl) {
+      console.log('找不到当前歌词元素');
+      return;
+    }
+    
+    const containerRect = lyricsScrollerRef.value.getBoundingClientRect();
+    const lineRect = activeEl.getBoundingClientRect();
+    
+    const scrollTop = lyricsScrollerRef.value.scrollTop + (lineRect.top - containerRect.top) - (containerRect.height / 2) + (lineRect.height / 2);
+    
+    console.log('滚动到位置:', scrollTop);
+    
+    lyricsScrollerRef.value.scrollTo({
+      top: scrollTop,
+      behavior: immediate ? 'auto' : 'smooth'
+    });
+  } catch (err) {
+    console.error('滚动歌词出错:', err);
+  }
+};
+
+// 监听歌词变化，自动滚动
+watch(nowIndex, () => {
+  if (showFullLyrics.value && isAutoScrollEnabled.value && !isTouchScrolling.value) {
+    nextTick(() => {
+      scrollToCurrentLyric();
+    });
+  }
+});
+
+// 当显示状态变化时，触发滚动
+watch(showFullLyrics, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      setTimeout(() => {
+        scrollToCurrentLyric(true);
+      }, 300);
+    });
+  }
+});
+
+// 处理滚动事件
+const handleScroll = () => {
+  if (!isTouchScrolling.value) return;
+  
+  // 用户手动滚动时，停止自动滚动
+  isAutoScrollEnabled.value = false;
+  
+  // 清除之前的计时器
+  if (autoScrollTimer.value) {
+    clearTimeout(autoScrollTimer.value);
+  }
+  
+  // 设置新的计时器，5秒后恢复自动滚动
+  autoScrollTimer.value = window.setTimeout(() => {
+    isAutoScrollEnabled.value = true;
+    isTouchScrolling.value = false;
+    scrollToCurrentLyric();
+  }, 5000);
+};
+
+// 触摸相关事件
+const handleTouchStart = (e: TouchEvent) => {
+  touchStartY.value = e.touches[0].clientY;
+  lastScrollTop.value = lyricsScrollerRef.value?.scrollTop || 0;
+  isTouchScrolling.value = true;
+  
+  // 用户开始触摸时，暂时停止自动滚动
+  isAutoScrollEnabled.value = false;
+};
+
+const handleTouchMove = () => {
+  if (!isTouchScrolling.value || !lyricsScrollerRef.value) return;
+  // 实际的滚动处理由浏览器默认行为完成
+};
+
+const handleTouchEnd = () => {
+  // 设置计时器，5秒后恢复自动滚动
+  if (autoScrollTimer.value) {
+    clearTimeout(autoScrollTimer.value);
+  }
+  
+  autoScrollTimer.value = window.setTimeout(() => {
+    isAutoScrollEnabled.value = true;
+    isTouchScrolling.value = false;
+    scrollToCurrentLyric();
+  }, 5000);
+};
+
+// 封面样式循环切换
+const cycleCoverStyle = () => {
+  const styles = ['record', 'square', 'full'];
+  const currentIdx = styles.indexOf(config.value.mobileCoverStyle);
+  const nextIdx = (currentIdx + 1) % styles.length;
+  config.value.mobileCoverStyle = styles[nextIdx] as 'record' | 'square' | 'full';
+  
+  // 添加动画反馈
+  const container = document.querySelector('.cover-container');
+  if (container) {
+    container.classList.add('style-changing');
+    setTimeout(() => {
+      container.classList.remove('style-changing');
+    }, 500);
+  }
+};
+
+// 进度条相关
+const isThumbDragging = ref(false);
+const progressContainerWidth = ref(0);
+
+// 处理进度条点击
+const handleProgressBarClick = (e: MouseEvent) => {
+  if (!sound.value) return;
+  
+  const progressBar = e.currentTarget as HTMLElement;
+  const rect = progressBar.getBoundingClientRect();
+  const offsetX = e.clientX - rect.left;
+  progressContainerWidth.value = rect.width;
+  
+  const percentage = offsetX / rect.width;
+  const newTime = Math.max(0, Math.min(percentage * allTime.value, allTime.value));
+  
+  sound.value.seek(newTime);
+  nowTime.value = newTime;
+};
+
+// 处理滑块拖动
+const handleThumbTouchStart = (e: TouchEvent) => {
+  e.stopPropagation();
+  isThumbDragging.value = true;
+  
+  // 获取进度条宽度
+  const target = e.currentTarget as HTMLElement;
+  const progressBar = target.parentElement?.parentElement as HTMLElement;
+  if (progressBar) {
+    progressContainerWidth.value = progressBar.getBoundingClientRect().width;
+  }
+};
+
+const handleThumbTouchMove = (e: TouchEvent) => {
+  if (!isThumbDragging.value || !sound.value) return;
+  
+  const touch = e.touches[0];
+  const target = e.currentTarget as HTMLElement;
+  const progressBar = target.parentElement?.parentElement as HTMLElement;
+  const rect = progressBar.getBoundingClientRect();
+  const offsetX = touch.clientX - rect.left;
+  
+  // 计算百分比并限制在0-1之间
+  const percentage = Math.max(0, Math.min(1, offsetX / rect.width));
+  const newTime = percentage * allTime.value;
+  
+  // 实时更新UI，但不频繁seek
+  nowTime.value = newTime;
+};
+
+const handleThumbTouchEnd = () => {
+  if (!isThumbDragging.value || !sound.value) return;
+  
+  // 拖动结束时执行seek操作
+  sound.value.seek(nowTime.value);
+  isThumbDragging.value = false;
+};
+
+// 背景相关
+const currentBackground = ref('');
+const animationFrame = ref<number | null>(null);
+const isDark = ref(false);
+const lyricSettingsRef = ref<InstanceType<typeof LyricSettings>>();
+const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
+
+// 可见歌词计算
+const visibleLyrics = computed(() => {
+  const centerIndex = nowIndex.value + 1;
+  const numLines = config.value.mobileShowLyricLines;
+  const halfLines = Math.floor(numLines / 2);
+  
+  let startIdx = centerIndex - halfLines;
+  let endIdx = centerIndex + halfLines;
+  
+  // 处理奇偶数行数的情况
+  if (numLines % 2 === 0) {
+    endIdx -= 1;
+  }
+  
+  // 处理边界情况
+  if (startIdx < 0) {
+    startIdx = 0;
+    endIdx = Math.min(numLines - 1, lrcArray.value.length - 1);
+  }
+  
+  if (endIdx >= lrcArray.value.length) {
+    endIdx = lrcArray.value.length - 1;
+    startIdx = Math.max(0, endIdx - numLines + 1);
+  }
+  
+  return lrcArray.value.slice(startIdx, endIdx + 1);
+});
+
+// 监听设置组件的配置变化
+watch(
+  () => lyricSettingsRef.value?.config,
+  (newConfig) => {
+    if (newConfig) {
+      config.value = newConfig;
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 监听本地配置变化，保存到 localStorage
+watch(
+  () => config.value,
+  (newConfig) => {
+    localStorage.setItem('music-full-config', JSON.stringify(newConfig));
+    if (lyricSettingsRef.value) {
+      lyricSettingsRef.value.config = newConfig;
+    }
+  },
+  { deep: true }
+);
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  background: {
+    type: String,
+    default: ''
+  }
+});
+
+const themeMusic = {
+  light: 'linear-gradient(to bottom, #ffffff, #f5f5f5)',
+  dark: 'linear-gradient(to bottom, #1a1a1a, #000000)'
+};
+
+const emit = defineEmits(['update:modelValue']);
+
+const isVisible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+// 设置文字颜色
+const setTextColors = (background: string) => {
+  if (!background) {
+    textColors.value = getTextColors();
+    document.documentElement.style.setProperty('--hover-bg-color', getHoverBackgroundColor(false));
+    document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
+    document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
+    document.documentElement.style.setProperty('--bg-color', 'rgba(25, 25, 25, 1)');
+    return;
+  }
+
+  // 更新文字颜色
+  textColors.value = getTextColors(background);
+  isDark.value = textColors.value.active === '#000000';
+
+  document.documentElement.style.setProperty(
+    '--hover-bg-color',
+    getHoverBackgroundColor(isDark.value)
+  );
+  document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
+  document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
+  
+  // 解析背景颜色用于封面融合
+  let bgColor = playerStore.playMusic.primaryColor || 'rgba(25, 25, 25, 1)';
+  
+  document.documentElement.style.setProperty('--bg-color', bgColor);
+
+  // 处理背景颜色动画
+  if (currentBackground.value) {
+    if (animationFrame.value) {
+      cancelAnimationFrame(animationFrame.value);
+    }
+    const result = animateGradient(currentBackground.value, background, (gradient) => {
+      currentBackground.value = gradient;
+    });
+    if (typeof result === 'number') {
+      animationFrame.value = result;
+    }
+  } else {
+    currentBackground.value = background;
+  }
+};
+
+// 监听背景变化
+watch(
+  () => props.background,
+  (newBg) => {
+    if (config.value.theme === 'default') {
+      setTextColors(newBg);
+    } else {
+      setTextColors(themeMusic[config.value.theme] || props.background);
+    }
+  },
+  { immediate: true }
+);
+
+// 组件卸载时清理动画
+onBeforeUnmount(() => {
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
+  }
+  if (autoScrollTimer.value) {
+    clearTimeout(autoScrollTimer.value);
+  }
+});
+
+const { navigateToArtist } = useArtist();
+
+const handleArtistClick = (id: number) => {
+  isVisible.value = false;
+  navigateToArtist(id);
+};
+
+// 播放控制功能
+const togglePlay = () => {
+  try {
+    playerStore.setPlay(playMusic.value);
+  } catch (error) {
+    console.error('播放出错:', error);
+  }
+};
+
+const nextSong = () => {
+  playerStore.nextPlay();
+};
+
+const prevSong = () => {
+  playerStore.prevPlay();
+};
+
+const togglePlayMode = () => {
+  playerStore.togglePlayMode();
+  showBottomToast([
+    t('player.playMode.sequence'),
+    t('player.playMode.loop'),
+    t('player.playMode.random')
+  ][playMode.value]);
+};
+
+const closeMusicFull = () => {
+  isVisible.value = false;
+  playerStore.setMusicFull(false);
+};
+
+// 监听主题变化
+watch(
+  () => config.value.theme,
+  (newTheme) => {
+    const newBackground = themeMusic[newTheme] || props.background;
+    setTextColors(newBackground);
+  },
+  { immediate: true }
+);
+
+// 加载保存的配置
+onMounted(() => {
+  const savedConfig = localStorage.getItem('music-full-config');
+  if (savedConfig) {
+    config.value = { ...config.value, ...JSON.parse(savedConfig) };
+  }
+});
+
+// 当显示状态变化时，更新封面与背景融合效果
+watch(isVisible, (newVal) => {
+  if (newVal) {
+    // 播放器显示时，重新设置背景颜色
+    setTextColors(props.background);
+  } else {
+    showFullLyrics.value = false;
+    if (autoScrollTimer.value) {
+      clearTimeout(autoScrollTimer.value);
+      autoScrollTimer.value = null;
+    }
+  }
+});
+
+// 通过点击跳转到歌词对应时间点
+const jumpToLyricTime = (index: number) => {
+  if (lrcArray.value[index] && 'time' in lrcArray.value[index] && sound.value) {
+    // 使用类型断言确保time属性存在
+    const lrcItem = lrcArray.value[index] as { time: number; text: string; trText?: string };
+    const time = lrcItem.time / 1000;
+    sound.value.seek(time);
+    nowTime.value = time;
+    
+    // 显示反馈动画
+    const activeEl = document.getElementById(`lyric-line-${index}`);
+    if (activeEl) {
+      activeEl.classList.add('clicked');
+      setTimeout(() => {
+        activeEl.classList.remove('clicked');
+      }, 300);
+    }
+  }
+};
+
+// 添加getLrcStyle函数
+const { getLrcStyle: originalLrcStyle } = useLyricProgress();
+
+// 修改 getLrcStyle 函数
+const getLrcStyle = (index: number) => {
+  const colors = textColors.value || getTextColors;
+  const originalStyle = originalLrcStyle(index);
+
+  if (index === nowIndex.value) {
+    // 当前播放的歌词，使用渐变效果
+    return {
+      ...originalStyle,
+      backgroundImage: originalStyle.backgroundImage
+        ?.replace(/#ffffff/g, colors.active)
+        .replace(/#ffffff8a/g, `${colors.primary}`),
+      backgroundClip: 'text',
+      WebkitBackgroundClip: 'text',
+      color: 'transparent'
+    };
+  }
+
+  // 非当前播放的歌词，使用普通颜色
+  return {
+    color: colors.primary
+  };
+};
+
+defineExpose({
+  config
+});
+</script>
+
+<style scoped lang="scss">
+#mobile-drawer-target {
+  @apply top-0 left-0 absolute overflow-hidden flex flex-col w-full h-full;
+  animation-duration: 300ms;
+  
+  .control-btn {
+    @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
+    background: rgba(142, 142, 142, 0.192);
+    backdrop-filter: blur(12px);
+
+    i {
+      @apply text-xl;
+      color: var(--text-color-active);
+    }
+
+    &.pure-mode {
+      background: transparent;
+      backdrop-filter: none;
+
+      &:not(:hover) {
+        i {
+          opacity: 0;
+        }
+      }
+    }
+
+    &:hover {
+      background: rgba(126, 121, 121, 0.2);
+      i {
+        opacity: 1;
+      }
+    }
+  }
+  
+  // 全屏歌词样式
+  .fullscreen-lyrics {
+    @apply flex flex-col w-full h-full relative;
+    
+    &.light {
+      background: linear-gradient(to bottom, #ffffff, #f5f5f5);
+    }
+    
+    &.dark {
+      background: linear-gradient(to bottom, #1a1a1a, #000000);
+    }
+    
+    .fullscreen-header {
+      @apply pt-8 pb-4 px-6 flex flex-col items-center fixed top-0 left-0 w-full z-10;
+      background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
+      height: 100px;
+      pointer-events: auto;
+      
+      .song-title {
+        @apply text-xl font-semibold text-white text-center mb-1 max-w-full line-clamp-1;
+        color: var(--text-color-active);
+      }
+      
+      .artist-name {
+        @apply text-sm text-opacity-80 text-center;
+        color: var(--text-color-primary);
+      }
+    }
+    
+    .lyrics-scroller {
+      @apply flex-1 overflow-y-auto px-4;
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+      mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
+      -webkit-mask-image: linear-gradient(
+        to bottom,
+        transparent 0%,
+        black 10%,
+        black 90%,
+        transparent 100%
+      );
+      padding-top: 100px;
+      padding-bottom: 200px;
+      margin-bottom: 180px; /* 确保底部留出足够空间 */
+      
+      .lyrics-padding-top {
+        height: 70px;
+        min-height: 70px;
+      }
+      
+      .lyrics-padding-bottom {
+        height: 150px;
+        min-height: 150px;
+      }
+      
+      .lyric-line {
+        @apply px-6 py-4 cursor-pointer font-bold text-center transition-all duration-300;
+        font-size: var(--lyric-font-size, 22px);
+        letter-spacing: var(--lyric-letter-spacing, 0);
+        line-height: var(--lyric-line-height, 2);
+        
+        span {
+          background-clip: text !important;
+          -webkit-background-clip: text !important;
+          padding-right: 10px;
+        }
+        
+        .translation {
+          @apply font-normal opacity-70;
+          color: var(--text-color-primary);
+        }
+      }
+      
+      .now-text {
+        @apply text-2xl font-semibold;
+        
+        span {
+          background-clip: text !important;
+          -webkit-background-clip: text !important;
+        }
+      }
+    }
+  }
+  
+  // 统一的控制区域样式
+  .unified-controls {
+    @apply fixed bottom-0 left-0 right-0 px-6 pt-6 pb-8 z-[9999];
+    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
+    height: 210px;
+    pointer-events: auto;
+    
+    .progress-container {
+      @apply w-full mb-6;
+      pointer-events: auto;
+      
+      .time-info {
+        @apply flex justify-between items-center mb-2;
+        
+        .current-time, .total-time {
+          @apply text-xs;
+          color: var(--text-color-primary);
+          opacity: 0.7;
+        }
+      }
+      
+      .apple-style-progress {
+        @apply w-full h-10 flex items-center relative cursor-pointer;
+        
+        .progress-track {
+          @apply relative w-full h-1.5 bg-white bg-opacity-20 rounded-full;
+          
+          .progress-fill {
+            @apply absolute top-0 left-0 h-full bg-white rounded-full;
+            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+            z-index: 1;
+            transition: width 0.1s linear;
+          }
+          
+          .progress-thumb {
+            @apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-white;
+            box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+            z-index: 2;
+            transition: transform 0.15s ease-out;
+            
+            &.active {
+              transform: translate(-50%, -50%) scale(1.3);
+              box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
+            }
+            
+            &:active {
+              transform: translate(-50%, -50%) scale(1.3);
+            }
+          }
+        }
+      }
+    }
+    
+    .control-buttons {
+      @apply flex items-center justify-between w-full px-4;
+      
+      .back-button{
+        @apply absolute top-4 left-1/2 -translate-x-1/2 w-10 h-10 flex items-center justify-center bg-black bg-opacity-30 rounded-2xl;
+
+        i{
+          @apply text-4xl;
+          color: var(--text-color-primary);
+        }
+      }
+      
+      .side-button {
+        @apply w-10 h-10 flex items-center justify-center cursor-pointer transition-all duration-200;
+        
+        i {
+          @apply text-xl;
+          color: var(--text-color-primary);
+          
+          &.favorite {
+            @apply text-red-500;
+          }
+        }
+        
+        &:hover {
+          i {
+            color: var(--text-color-active);
+          }
+        }
+      }
+      
+      .main-button {
+        @apply w-14 h-14 flex items-center justify-center cursor-pointer transition-all duration-200;
+        
+        i {
+          @apply text-2xl;
+          color: var(--text-color-primary);
+        }
+        
+        &.play-pause {
+          @apply w-16 h-16 bg-white/20 rounded-full;
+          
+          i {
+            @apply text-4xl;
+            color: var(--text-color-active);
+          }
+        }
+        
+        &:hover:not(.play-pause) {
+          i {
+            color: var(--text-color-active);
+          }
+        }
+        
+        &.play-pause:hover {
+          @apply bg-white/30;
+        }
+      }
+    }
+  }
+  
+  // iOS风格布局容器
+  .ios-layout-container {
+    @apply flex flex-col items-center justify-between w-full h-full pt-10;
+    padding-bottom: 180px; /* 为统一控制区域留出空间 */
+    
+    // 封面样式
+    .cover-container {
+      @apply relative mb-6 transition-all duration-500;
+      
+      &.style-changing {
+        animation: styleChange 0.5s ease;
+      }
+      
+      .img-wrapper {
+        @apply relative overflow-hidden;
+      }
+      
+      &.record-style {
+        @apply w-72 h-72 rounded-full overflow-hidden;
+        
+        .cover-image {
+          @apply w-full h-full rounded-full;
+          animation: spin 20s linear infinite;
+          animation-play-state: running;
+        }
+        
+        &.paused .cover-image {
+          animation-play-state: paused;
+        }
+      }
+      
+      &.square-style {
+        @apply w-72 h-72;
+        
+        .cover-image {
+          @apply w-full h-full rounded-xl shadow-lg;
+          transition: transform 0.3s ease-out;
+          
+          &:active {
+            transform: scale(0.95);
+          }
+        }
+      }
+      
+      &.full-style {
+        @apply w-full max-h-[50vh] relative;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 40%;
+          background: linear-gradient(transparent, var(--bg-color, rgba(25, 25, 25, 1)) 70%, var(--bg-color, rgba(25, 25, 25, 1)));
+          z-index: 1;
+          pointer-events: none;
+        }
+        
+        .cover-image {
+          @apply w-full h-auto shadow-lg;
+        }
+      }
+    }
+    
+    // 歌曲信息
+    .song-info {
+      @apply flex flex-col items-center mb-5 w-full;
+      
+      .song-title {
+        @apply text-center text-2xl font-bold mb-1 max-w-full;
+        color: var(--text-color-active);
+      }
+      
+      .song-artist {
+        @apply text-center text-base mb-0;
+        color: var(--text-color-primary);
+        opacity: 0.8;
+        
+        .artist-name {
+          @apply cursor-pointer;
+          
+          &:hover {
+            @apply underline;
+          }
+        }
+      }
+    }
+    
+    // 歌词区域
+    .lyrics-container {
+      @apply w-full flex-grow flex flex-col items-center justify-center mb-6 overflow-hidden cursor-pointer;
+      
+      .lyrics-wrapper {
+        @apply w-full flex flex-col items-center justify-center;
+        
+        .lyric-line {
+          @apply text-center py-1 transition-all duration-300 opacity-70;
+          color: var(--text-color-primary);
+          
+          &:nth-child(2) {
+            @apply text-lg font-medium opacity-100;
+            color: var(--text-color-active);
+          }
+          
+          .translation {
+            @apply text-sm opacity-60 mt-1;
+          }
+        }
+      }
+      
+      .no-lyrics {
+        @apply text-center text-base opacity-60;
+        color: var(--text-color-primary);
+      }
+    }
+  }
+}
+
+// 旋转动画
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// 加载动画
+.loading-overlay {
+  @apply absolute top-0 left-0 w-full h-full flex items-center justify-center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  
+  .loading-icon {
+    font-size: 36px;
+    color: white;
+    animation: spin 1s linear infinite;
+  }
+}
+
+// 根据封面样式调整容器布局
+#mobile-drawer-target.cover-style-record {
+  .ios-layout-container .cover-container {
+    @apply mt-4;
+  }
+}
+
+#mobile-drawer-target.cover-style-full {
+  .ios-layout-container {
+    @apply pt-0;
+  }
+}
+
+// 过渡动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes styleChange {
+  0% {
+    opacity: 0.7;
+    transform: scale(0.95);
+  }
+  50% {
+    opacity: 0.9;
+    transform: scale(1.03);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes clickPulse {
+  0% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.9;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.9;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/renderer/components/player/MobilePlayBar.vue b/src/renderer/components/player/MobilePlayBar.vue
index 51cdc89..d73cd24 100644
--- a/src/renderer/components/player/MobilePlayBar.vue
+++ b/src/renderer/components/player/MobilePlayBar.vue
@@ -3,7 +3,8 @@
     class="mobile-play-bar"
     :class="[
       setAnimationClass('animate__fadeInUp'),
-      musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini'
+      musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini',
+      !shouldShowMobileMenu ? 'mobile-play-bar-no-menu' : ''
     ]"
     :style="{
       color: musicFullVisible
@@ -16,7 +17,7 @@
     }"
   >
     <!-- 完整模式 - 在musicFullVisible为true时显示 -->
-    <template v-if="musicFullVisible">
+    <template v-if="false">
       <!-- 顶部信息区域 -->
       <div class="music-info-header">
         <div class="music-info-main">
@@ -61,31 +62,9 @@
         <div class="control-btn next" @click="handleNext">
           <i class="iconfont ri-skip-forward-fill"></i>
         </div>
-        <n-popover
-          trigger="click"
-          :z-index="99999999"
-          content-class="mobile-play-list"
-          raw
-          :show-arrow="false"
-          placement="top"
-          @update-show="scrollToPlayList"
-        >
-          <template #trigger>
-            <div class="control-btn list">
-              <i class="iconfont ri-menu-line"></i>
-            </div>
-          </template>
-          <div class="mobile-play-list-container">
-            <div class="mobile-play-list-back"></div>
-            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
-              <template #default="{ item }">
-                <div class="mobile-play-list-item">
-                  <song-item :key="item.id" :item="item" mini></song-item>
-                </div>
-              </template>
-            </n-virtual-list>
-          </div>
-        </n-popover>
+        <div class="control-btn list" @click="openPlayListDrawer">
+          <i class="iconfont ri-menu-line"></i>
+        </div>
       </div>
 
       <!-- 定时关闭按钮 -->
@@ -93,7 +72,7 @@
     </template>
 
     <!-- Mini模式 - 在musicFullVisible为false时显示 -->
-    <div v-else class="mobile-mini-controls">
+    <div v-if="!musicFullVisible" class="mobile-mini-controls">
       <!-- 歌曲信息 -->
       <div class="mini-song-info" @click="setMusicFull">
         <n-image
@@ -103,12 +82,13 @@
           preview-disabled
         />
         <div class="mini-song-text">
-          <n-ellipsis class="mini-song-title" line-clamp="1">
-            {{ playMusic.name }}
-          </n-ellipsis>
-          <n-ellipsis class="mini-song-artist" line-clamp="1">
-            <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
-              {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+          <n-ellipsis line-clamp="1">
+            <span class="mini-song-title">{{ playMusic.name }}</span>
+            <span class="mx-2 text-gray-500 dark:text-gray-400">-</span>
+            <span class="mini-song-artist">
+              <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
+                {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+              </span>
             </span>
           </n-ellipsis>
         </div>
@@ -119,34 +99,12 @@
         <div class="mini-control-btn play" @click="playMusicEvent">
           <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
         </div>
-        <n-popover
-          trigger="click"
-          :z-index="99999999"
-          content-class="mobile-play-list"
-          raw
-          :show-arrow="false"
-          placement="top"
-          @update-show="scrollToPlayList"
-        >
-          <template #trigger>
-            <i class="iconfont icon-list mini-list-icon"></i>
-          </template>
-          <div class="mobile-play-list-container">
-            <div class="mobile-play-list-back"></div>
-            <n-virtual-list ref="playListRef" :item-size="56" item-resizable :items="playList">
-              <template #default="{ item }">
-                <div class="mobile-play-list-item">
-                  <song-item :key="item.id" :item="item" mini></song-item>
-                </div>
-              </template>
-            </n-virtual-list>
-          </div>
-        </n-popover>
+        <i class="iconfont icon-list mini-list-icon" @click="openPlayListDrawer"></i>
       </div>
     </div>
 
     <!-- 全屏播放器 -->
-    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
+    <music-full-wrapper ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
   </div>
 </template>
 
@@ -154,21 +112,19 @@
 import { useThrottleFn } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 
-import SongItem from '@/components/common/SongItem.vue';
 import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
-import MusicFull from '@/layout/components/MusicFull.vue';
+import MusicFullWrapper from '@/layout/components/MusicFullWrapper.vue';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
-import type { SongResult } from '@/type/music';
 import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
 
+const shouldShowMobileMenu = inject('shouldShowMobileMenu');
+
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
 
 // 是否播放
 const play = computed(() => playerStore.isPlay);
-// 播放列表
-const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');
 
@@ -206,14 +162,9 @@ const setMusicFull = () => {
   }
 };
 
-// 播放列表引用
-const playListRef = ref<any>(null);
-
-const scrollToPlayList = (val: boolean) => {
-  if (!val) return;
-  setTimeout(() => {
-    playListRef.value?.scrollTo({ top: playerStore.playListIndex * 56 });
-  }, 50);
+// 打开播放列表抽屉
+const openPlayListDrawer = () => {
+  playerStore.setPlayListDrawerVisible(true);
 };
 
 // 收藏功能
@@ -251,11 +202,15 @@ watch(
 
 <style lang="scss" scoped>
 .mobile-play-bar {
-  @apply fixed bottom-[56px] left-0 w-full flex flex-col shadow-lg;
+  @apply fixed bottom-[56px] left-0 w-full flex flex-col;
   z-index: 10000;
   animation-duration: 0.3s !important;
   transition: all 0.3s ease;
 
+  &.mobile-play-bar-no-menu {
+    @apply bottom-[10px];
+  }
+
   &.play-bar-expanded {
     @apply bg-transparent;
     height: auto; /* 自动适应内容高度 */
@@ -285,7 +240,7 @@ watch(
   }
 
   &.play-bar-mini {
-    @apply h-14 py-0 bg-light dark:bg-dark;
+    @apply h-14 py-0;
   }
 
   // 顶部信息区域
@@ -423,13 +378,13 @@ watch(
 
   // Mini模式样式
   .mobile-mini-controls {
-    @apply flex items-center justify-between px-4 h-14;
+    @apply flex items-center justify-between pr-4 mx-3 h-12 rounded-full bg-light-100 dark:bg-dark-100 shadow-lg;
 
     .mini-song-info {
       @apply flex items-center flex-1 min-w-0 cursor-pointer;
 
       .mini-song-cover {
-        @apply w-8 h-8 rounded-md;
+        @apply w-12 h-12 rounded-full border-8 border-dark-300 dark:border-light-300;
       }
 
       .mini-song-text {
@@ -440,7 +395,7 @@ watch(
         }
 
         .mini-song-artist {
-          @apply text-xs text-gray-500 dark:text-gray-400 mt-0.5;
+          @apply text-xs text-gray-500 dark:text-gray-400;
         }
       }
     }
diff --git a/src/renderer/components/player/PlayBar.vue b/src/renderer/components/player/PlayBar.vue
index cd587cb..494a240 100644
--- a/src/renderer/components/player/PlayBar.vue
+++ b/src/renderer/components/player/PlayBar.vue
@@ -148,8 +148,8 @@
         {{ t('player.playBar.playList') }}
       </n-tooltip>
     </div>
-    <!-- 播放音乐 -->
-    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
+    <!-- 全屏播放器 -->
+    <music-full-wrapper ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
   </div>
 </template>
 
@@ -169,7 +169,7 @@ import {
   textColors
 } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
-import MusicFull from '@/layout/components/MusicFull.vue';
+import MusicFullWrapper from '@/layout/components/MusicFullWrapper.vue';
 import { audioService } from '@/services/audioService';
 import { 
   isBilibiliIdMatch, 
diff --git a/src/renderer/components/player/PlayingListDrawer.vue b/src/renderer/components/player/PlayingListDrawer.vue
index fe6c330..fa3b2bc 100644
--- a/src/renderer/components/player/PlayingListDrawer.vue
+++ b/src/renderer/components/player/PlayingListDrawer.vue
@@ -117,6 +117,10 @@ const handleClearPlaylist = () => {
     message.info(t('player.playList.alreadyEmpty'));
     return;
   }
+
+  if(isMobile.value){
+    closePanel();
+  }
   
   dialog.warning({
     title: t('player.playList.clearConfirmTitle'),
@@ -254,17 +258,18 @@ const handleDeleteSong = (song: SongResult) => {
 // 移动端适配
 @media (max-width: 768px) {
   .playlist-panel {
+    position: fixed;
     width: 100%;
-    height: 60vh;
+    height: 80vh;
     top: auto;
-    bottom: 56px; // 移动端底部留出导航栏高度
-    border-radius: 16px 16px 0 0;
+    bottom: 0; // 移动端底部留出导航栏高度
+    border-radius: 30px 30px 0 0;
     border-left: none;
     border-top: 1px solid theme('colors.gray.200');
     box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
     
     &-header {
-      @apply text-center relative;
+      @apply text-center relative px-4;
       
       &::before {
         content: '';
@@ -280,7 +285,11 @@ const handleDeleteSong = (song: SongResult) => {
     }
     
     &-content {
-      height: calc(60vh - 60px);
+      height: calc(80vh - 60px);
+      @apply px-4;
+      .delete-btn{
+        @apply visible;
+      }
     }
   }
 }
diff --git a/src/renderer/hooks/useDownload.ts b/src/renderer/hooks/useDownload.ts
index 61d61d6..d1edaa1 100644
--- a/src/renderer/hooks/useDownload.ts
+++ b/src/renderer/hooks/useDownload.ts
@@ -5,6 +5,9 @@ import { useMessage } from 'naive-ui';
 
 import { getSongUrl } from '@/store/modules/player';
 import type { SongResult } from '@/type/music';
+import { isElectron } from '@/utils';
+
+const ipcRenderer = isElectron ? window.electron.ipcRenderer : null;
 
 // 全局下载管理（闭包模式）
 const createDownloadManager = () => {
@@ -58,11 +61,11 @@ const createDownloadManager = () => {
       
       // 移除可能存在的旧监听器
       if (completeListener) {
-        window.electron.ipcRenderer.removeListener('music-download-complete', completeListener);
+        ipcRenderer?.removeListener('music-download-complete', completeListener);
       }
       
       if (errorListener) {
-        window.electron.ipcRenderer.removeListener('music-download-error', errorListener);
+        ipcRenderer?.removeListener('music-download-error', errorListener);
       }
       
       // 创建新的监听器
@@ -99,8 +102,8 @@ const createDownloadManager = () => {
       };
       
       // 添加监听器
-      window.electron.ipcRenderer.on('music-download-complete', completeListener);
-      window.electron.ipcRenderer.on('music-download-error', errorListener);
+      ipcRenderer?.on('music-download-complete', completeListener);
+      ipcRenderer?.on('music-download-error', errorListener);
       
       isInitialized = true;
     },
@@ -110,12 +113,12 @@ const createDownloadManager = () => {
       if (!isInitialized) return;
       
       if (completeListener) {
-        window.electron.ipcRenderer.removeListener('music-download-complete', completeListener);
+        ipcRenderer?.removeListener('music-download-complete', completeListener);
         completeListener = null;
       }
       
       if (errorListener) {
-        window.electron.ipcRenderer.removeListener('music-download-error', errorListener);
+        ipcRenderer?.removeListener('music-download-error', errorListener);
         errorListener = null;
       }
       
@@ -181,7 +184,7 @@ export const useDownload = () => {
       songData.ar = songData.ar || songData.song?.artists;
       
       // 发送下载请求
-      window.electron.ipcRenderer.send('download-music', {
+      ipcRenderer?.send('download-music', {
         url: typeof musicUrl === 'string' ? musicUrl : musicUrl.url,
         filename,
         songInfo: {
@@ -277,7 +280,7 @@ export const useDownload = () => {
           downloadTime: Date.now()
         };
         
-        window.electron.ipcRenderer.send('download-music', {
+        ipcRenderer?.send('download-music', {
           url,
           filename,
           songInfo,
diff --git a/src/renderer/hooks/useSongItem.ts b/src/renderer/hooks/useSongItem.ts
index 2c466f4..5a7d7c2 100644
--- a/src/renderer/hooks/useSongItem.ts
+++ b/src/renderer/hooks/useSongItem.ts
@@ -53,9 +53,9 @@ export function useSongItem(props: {
   const handleImageLoad = async (imageElement: HTMLImageElement) => {
     if (!imageElement) return;
     
-    const { backgroundColor } = await getImageBackground(imageElement);
-    // eslint-disable-next-line vue/no-mutating-props
+    const { backgroundColor, primaryColor } = await getImageBackground(imageElement);
     props.item.backgroundColor = backgroundColor;
+    props.item.primaryColor = primaryColor;
   };
   
   // 播放音乐
diff --git a/src/renderer/layout/AppLayout.vue b/src/renderer/layout/AppLayout.vue
index 150084c..0030ae2 100644
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -9,7 +9,7 @@
           <!-- 搜索栏 -->
           <search-bar />
           <!-- 主页面路由 -->
-          <div class="main-content" :native-scrollbar="false">
+          <div class="main-content" :native-scrollbar="false" :class="{'mobile-content': !shouldShowMobileMenu}">
             <router-view
               v-slot="{ Component }"
               class="main-page"
@@ -21,7 +21,7 @@
             </router-view>
           </div>
           <play-bottom />
-          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
+          <app-menu v-if="shouldShowMobileMenu" class="menu" :menus="menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
@@ -103,6 +103,16 @@ const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id)
 const { menus } = menuStore;
 const route = useRoute();
 
+// 判断当前路由是否应该在移动端显示AppMenu
+const shouldShowMobileMenu = computed(() => {
+  // 过滤出在menus中定义的路径
+  const menuPaths = menus.map((item: any) => item.path);
+  // 检查当前路由路径是否在menus中
+  return menuPaths.includes(route.path) && isMobile.value && !playerStore.musicFull;
+});
+
+provide('shouldShowMobileMenu', shouldShowMobileMenu);
+
 onMounted(() => {
   settingsStore.initializeSettings();
   settingsStore.initializeTheme();
@@ -156,7 +166,10 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
     overflow: auto;
     display: block;
     flex: none;
-    padding-bottom: 70px;
+  }
+
+  .mobile-content {
+    height: calc(100vh - 75px);
   }
 }
 </style>
diff --git a/src/renderer/layout/components/AppMenu.vue b/src/renderer/layout/components/AppMenu.vue
index ec5e287..3c6122f 100644
--- a/src/renderer/layout/components/AppMenu.vue
+++ b/src/renderer/layout/components/AppMenu.vue
@@ -27,6 +27,7 @@
 
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
+import { ref, watch } from 'vue';
 
 import icon from '@/assets/icon.png';
 
@@ -115,7 +116,7 @@ const isText = ref(false);
     bottom: 0;
     left: 0;
     z-index: 99999;
-    @apply bg-light dark:bg-black border-t border-gray-200 dark:border-gray-700;
+    @apply bg-light dark:bg-black border-none border-gray-200 dark:border-gray-700;
 
     &-header {
       display: none;
@@ -127,9 +128,16 @@ const isText = ref(false);
 
     &-item {
       &-link {
-        @apply my-2 w-auto;
+        @apply my-2 w-auto px-2;
+        width: auto !important;
+        margin-top: 8px;
+        margin-bottom: 8px;
       }
     }
+
+    &-expanded {
+      @apply w-full;
+    }
   }
 }
 </style>
diff --git a/src/renderer/layout/components/MusicFullWrapper.vue b/src/renderer/layout/components/MusicFullWrapper.vue
new file mode 100644
index 0000000..96a5447
--- /dev/null
+++ b/src/renderer/layout/components/MusicFullWrapper.vue
@@ -0,0 +1,15 @@
+<template>
+  <component :is="componentToUse" v-bind="$attrs" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { isMobile } from '@/utils';
+import MusicFull from '@/layout/components/MusicFull.vue';
+import MusicFullMobile from '@/components/lyric/MusicFullMobile.vue';
+
+// 根据当前设备类型选择需要显示的组件
+const componentToUse = computed(() => {
+  return isMobile.value ? MusicFullMobile : MusicFull;
+});
+</script> 
\ No newline at end of file
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 34fbc20..13a1be2 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -20,10 +20,11 @@ const getSettingsStore = () => {
 const loginRouter = {
   path: '/login',
   name: 'login',
-  mate: {
+  meta: {
     keepAlive: true,
     title: '登录',
-    icon: 'icon-Home'
+    icon: 'icon-Home',
+    back: true
   },
   component: () => import('@/views/login/index.vue')
 };
@@ -31,7 +32,7 @@ const loginRouter = {
 const setRouter = {
   path: '/set',
   name: 'set',
-  mate: {
+  meta: {
     keepAlive: true,
     title: '设置',
     icon: 'icon-Home'
diff --git a/src/renderer/types/lyric.ts b/src/renderer/types/lyric.ts
index 4cbf670..03aa1c9 100644
--- a/src/renderer/types/lyric.ts
+++ b/src/renderer/types/lyric.ts
@@ -10,6 +10,10 @@ export interface LyricConfig {
   pureModeEnabled: boolean;
   hideMiniPlayBar: boolean;
   hideLyrics: boolean;
+  // 移动端配置
+  mobileLayout: 'default' | 'ios' | 'android';
+  mobileCoverStyle: 'record' | 'square' | 'full';
+  mobileShowLyricLines: number;
 }
 
 export const DEFAULT_LYRIC_CONFIG: LyricConfig = {
@@ -23,5 +27,9 @@ export const DEFAULT_LYRIC_CONFIG: LyricConfig = {
   hidePlayBar: false,
   hideMiniPlayBar: true,
   pureModeEnabled: false,
-  hideLyrics: false
+  hideLyrics: false,
+  // 移动端默认配置
+  mobileLayout: 'ios',
+  mobileCoverStyle: 'full',
+  mobileShowLyricLines: 3
 };
diff --git a/src/renderer/views/artist/detail.vue b/src/renderer/views/artist/detail.vue
index 194246b..1a151a2 100644
--- a/src/renderer/views/artist/detail.vue
+++ b/src/renderer/views/artist/detail.vue
@@ -115,6 +115,7 @@
                     :compact="isCompactLayout"
                     :item="formatSong(item)"
                     @play="handlePlay"
+                    :style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
                   />
                 </div>
               </template>
@@ -697,7 +698,7 @@ const handleVirtualScroll = (e: any) => {
   }
 
   .albums-grid {
-    @apply grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6;
+    @apply grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 pb-40;
   }
 
   .loading-more {
diff --git a/src/renderer/views/favorite/index.vue b/src/renderer/views/favorite/index.vue
index bec557a..212a2a0 100644
--- a/src/renderer/views/favorite/index.vue
+++ b/src/renderer/views/favorite/index.vue
@@ -539,7 +539,7 @@ const handleBatchDownload = async () => {
 
   .mobile {
     .favorite-page {
-      @apply p-4;
+      @apply p-4 m-0;
 
       .favorite-header {
         @apply mb-4;
diff --git a/src/renderer/views/login/index.vue b/src/renderer/views/login/index.vue
index c78cbc2..b24dec3 100644
--- a/src/renderer/views/login/index.vue
+++ b/src/renderer/views/login/index.vue
@@ -146,7 +146,7 @@ const loginPhone = async () => {
 
 <style lang="scss" scoped>
 .login-page {
-  @apply flex flex-col items-center justify-center p-20 pt-20;
+  @apply flex flex-col items-center justify-center pt-20;
   @apply bg-light dark:bg-black;
 }
 
@@ -216,4 +216,10 @@ const loginPhone = async () => {
     }
   }
 }
+
+.mobile {
+  .login-page {
+    @apply pt-0;
+  }
+}
 </style>
diff --git a/src/renderer/views/music/MusicListPage.vue b/src/renderer/views/music/MusicListPage.vue
index fc502e0..89d98ab 100644
--- a/src/renderer/views/music/MusicListPage.vue
+++ b/src/renderer/views/music/MusicListPage.vue
@@ -160,7 +160,7 @@
               <n-virtual-list
                 ref="songListRef"
                 class="song-virtual-list"
-                style="height: calc(80vh - 60px)"
+                style="max-height: calc(100vh - 130px);"
                 :items="filteredSongs"
                 :item-size="isCompactLayout ? 50 : 70"
                 item-resizable
@@ -179,6 +179,7 @@
                       @play="handlePlay"
                       @remove-song="handleRemoveSong"
                       @select="(id, selected) => handleSelect(id, selected)"
+                      :style="{paddingBottom: index === filteredSongs.length - 1 ? '100px' : '0'}"
                     />
                   </div>
                 </template>
diff --git a/src/renderer/views/user/index.vue b/src/renderer/views/user/index.vue
index 36db8d5..9475d44 100644
--- a/src/renderer/views/user/index.vue
+++ b/src/renderer/views/user/index.vue
@@ -90,6 +90,10 @@
         </n-scrollbar>
       </div>
     </div>
+    <!-- 未登录时显示登录组件 -->
+    <div v-if="!isLoggedIn && isMobile" class="login-container" :class="setAnimationClass('animate__fadeIn')">
+      <login-component @login-success="handleLoginSuccess" />
+    </div>
   </div>
 </template>
 
@@ -109,6 +113,7 @@ import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
 import { getImgUrl, isElectron, isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
+import LoginComponent from '@/views/login/index.vue';
 
 defineOptions({
   name: 'User'
@@ -143,7 +148,7 @@ const checkLoginStatus = () => {
   const userData = localStorage.getItem('user');
 
   if (!token || !userData) {
-    router.push('/login');
+    !isMobile.value && router.push('/login');
     return false;
   }
 
@@ -270,6 +275,14 @@ const showFollowList = () => {
 //   if (!user.value) return;
 //   router.push('/user/followers');
 // };
+
+const handleLoginSuccess = () => {
+  // 处理登录成功后的逻辑
+  checkLoginStatus();
+  loadData();
+};
+
+const isLoggedIn = computed(() => userStore.user);
 </script>
 
 <style lang="scss" scoped>
@@ -398,5 +411,9 @@ const showFollowList = () => {
   .user-page {
     @apply px-4;
   }
+
+  .login-container {
+    @apply flex justify-center items-center h-full w-full;
+  }
 }
 </style>