From 8e1259d2aa9dd1a3ecd2d551538e6a9306de887b Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Fri, 19 Dec 2025 00:23:24 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=92=88=E5=AF=B9=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/DisclaimerModal.vue     | 359 ++++++++++++++
 .../components/common/MobileUpdateModal.vue   | 280 +++++++++++
 .../components/lyric/MusicFullMobile.vue      |  83 +++-
 .../components/player/MobilePlayBar.vue       | 208 ++------
 .../player/MobilePlayerSettings.vue           | 363 ++++++++++++++
 src/renderer/index.css                        |   4 +
 src/renderer/layout/AppLayout.vue             |  23 +-
 src/renderer/layout/MobileLayout.vue          | 133 +++++
 src/renderer/layout/components/AppMenu.vue    |   4 +-
 .../layout/components/MobileHeader.vue        | 113 +++++
 src/renderer/layout/components/SearchBar.vue  |  11 +-
 src/renderer/router/home.ts                   |   6 +-
 src/renderer/router/other.ts                  |  22 +
 src/renderer/views/history/index.vue          |  18 +-
 .../views/historyAndFavorite/index.vue        |   3 +-
 src/renderer/views/home/index.vue             |   2 +-
 .../views/mobile-search-result/index.vue      | 464 ++++++++++++++++++
 src/renderer/views/mobile-search/index.vue    | 392 +++++++++++++++
 18 files changed, 2299 insertions(+), 189 deletions(-)
 create mode 100644 src/renderer/components/common/DisclaimerModal.vue
 create mode 100644 src/renderer/components/common/MobileUpdateModal.vue
 create mode 100644 src/renderer/components/player/MobilePlayerSettings.vue
 create mode 100644 src/renderer/layout/MobileLayout.vue
 create mode 100644 src/renderer/layout/components/MobileHeader.vue
 create mode 100644 src/renderer/views/mobile-search-result/index.vue
 create mode 100644 src/renderer/views/mobile-search/index.vue

diff --git a/src/renderer/components/common/DisclaimerModal.vue b/src/renderer/components/common/DisclaimerModal.vue
new file mode 100644
index 0000000..56b39d0
--- /dev/null
+++ b/src/renderer/components/common/DisclaimerModal.vue
@@ -0,0 +1,359 @@
+<template>
+  <Teleport to="body">
+    <Transition name="disclaimer-modal">
+      <!-- 免责声明页面 -->
+      <div
+        v-if="showDisclaimer"
+        class="fixed inset-0 z-[999999] flex items-center justify-center bg-black/60 backdrop-blur-md"
+      >
+        <div
+          class="w-full max-w-md mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
+        >
+          <!-- 顶部渐变装饰 -->
+          <div class="h-2 bg-gradient-to-r from-amber-400 via-orange-500 to-red-500"></div>
+          <!-- 标题 -->
+          <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white px-6 mt-10">
+            {{ t('comp.disclaimer.title') }}
+          </h2>
+
+          <!-- 内容区域 -->
+          <div class="px-6 py-6">
+            <div class="space-y-4 text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+              <!-- 警告框 -->
+              <div
+                class="p-4 rounded-2xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800"
+              >
+                <div class="flex items-start gap-3">
+                  <i class="ri-alert-line text-amber-500 text-xl flex-shrink-0 mt-0.5"></i>
+                  <p class="text-amber-700 dark:text-amber-300">
+                    {{ t('comp.disclaimer.warning') }}
+                  </p>
+                </div>
+              </div>
+
+              <!-- 免责条款列表 -->
+              <div class="space-y-3">
+                <div class="flex items-start gap-3">
+                  <div
+                    class="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
+                  >
+                    <i class="ri-book-2-line text-blue-500 text-sm"></i>
+                  </div>
+                  <p>{{ t('comp.disclaimer.item1') }}</p>
+                </div>
+
+                <div class="flex items-start gap-3">
+                  <div
+                    class="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
+                  >
+                    <i class="ri-time-line text-green-500 text-sm"></i>
+                  </div>
+                  <p>{{ t('comp.disclaimer.item2') }}</p>
+                </div>
+
+                <div class="flex items-start gap-3">
+                  <div
+                    class="w-6 h-6 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
+                  >
+                    <i class="ri-shield-check-line text-purple-500 text-sm"></i>
+                  </div>
+                  <p>{{ t('comp.disclaimer.item3') }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="px-6 pb-8 space-y-3">
+            <button
+              @click="handleAgree"
+              class="w-full py-4 rounded-2xl text-base font-medium text-white bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-[0.98] transition-all duration-200 shadow-lg shadow-green-500/25"
+            >
+              <span class="flex items-center justify-center gap-2">
+                <i class="ri-check-line text-lg"></i>
+                {{ t('comp.disclaimer.agree') }}
+              </span>
+            </button>
+
+            <button
+              @click="handleDisagree"
+              class="w-full py-3 rounded-2xl text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+            >
+              {{ t('comp.disclaimer.disagree') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- 捐赠页面 -->
+    <Transition name="donate-modal">
+      <div
+        v-if="showDonate"
+        class="fixed inset-0 z-[999999] flex items-center justify-center bg-black/60 backdrop-blur-md"
+      >
+        <div
+          class="w-full max-w-md mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
+        >
+          <!-- 顶部渐变装饰 -->
+          <div class="h-2 bg-gradient-to-r from-pink-400 via-rose-500 to-red-500"></div>
+
+          <!-- 图标区域 -->
+          <div class="flex justify-center pt-8 pb-4">
+            <div
+              class="w-20 h-20 rounded-2xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center shadow-lg"
+            >
+              <i class="ri-heart-3-fill text-4xl text-white"></i>
+            </div>
+          </div>
+
+          <!-- 标题 -->
+          <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white px-6">
+            {{ t('comp.donate.title') }}
+          </h2>
+
+          <p class="text-sm text-gray-500 dark:text-gray-400 text-center mt-2 px-6">
+            {{ t('comp.donate.subtitle') }}
+          </p>
+
+          <!-- 内容区域 -->
+          <div class="px-6 py-6">
+            <!-- 提示信息 -->
+            <div
+              class="p-4 rounded-2xl bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 mb-6"
+            >
+              <div class="flex items-start gap-3">
+                <i class="ri-gift-line text-rose-500 text-xl flex-shrink-0 mt-0.5"></i>
+                <p class="text-rose-700 dark:text-rose-300 text-sm">
+                  {{ t('comp.donate.tip') }}
+                </p>
+              </div>
+            </div>
+
+            <!-- 捐赠方式 -->
+            <div class="grid grid-cols-2 gap-4">
+              <button
+                @click="openDonateLink('wechat')"
+                class="flex flex-col items-center gap-2 p-4 rounded-2xl bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors"
+              >
+                <div class="w-12 h-12 rounded-xl bg-green-500 flex items-center justify-center">
+                  <i class="ri-wechat-fill text-2xl text-white"></i>
+                </div>
+                <span class="text-sm font-medium text-green-700 dark:text-green-300">{{
+                  t('comp.donate.wechat')
+                }}</span>
+              </button>
+
+              <button
+                @click="openDonateLink('alipay')"
+                class="flex flex-col items-center gap-2 p-4 rounded-2xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors"
+              >
+                <div class="w-12 h-12 rounded-xl bg-blue-500 flex items-center justify-center">
+                  <i class="ri-alipay-fill text-2xl text-white"></i>
+                </div>
+                <span class="text-sm font-medium text-blue-700 dark:text-blue-300">{{
+                  t('comp.donate.alipay')
+                }}</span>
+              </button>
+            </div>
+          </div>
+
+          <!-- 进入应用按钮 -->
+          <div class="px-6 pb-8">
+            <button
+              @click="handleEnterApp"
+              class="w-full py-4 rounded-2xl text-base font-medium text-white bg-gradient-to-r from-gray-700 to-gray-900 dark:from-gray-600 dark:to-gray-800 hover:from-gray-800 hover:to-gray-950 active:scale-[0.98] transition-all duration-200 shadow-lg"
+            >
+              <span class="flex items-center justify-center gap-2">
+                <i class="ri-arrow-right-line text-lg"></i>
+                {{ t('comp.donate.enterApp') }}
+              </span>
+            </button>
+
+            <p class="text-xs text-gray-400 dark:text-gray-500 text-center mt-3">
+              {{ t('comp.donate.noForce') }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- 收款码弹窗 -->
+    <Transition name="qrcode-modal">
+      <div
+        v-if="showQRCode"
+        class="fixed inset-0 z-[9999999] flex items-center justify-center bg-black/70 backdrop-blur-md"
+        @click.self="closeQRCode"
+      >
+        <div
+          class="w-full max-w-sm mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
+        >
+          <!-- 顶部渐变装饰 -->
+          <div
+            class="h-2"
+            :class="
+              qrcodeType === 'wechat'
+                ? 'bg-gradient-to-r from-green-400 to-green-600'
+                : 'bg-gradient-to-r from-blue-400 to-blue-600'
+            "
+          ></div>
+
+          <!-- 标题 -->
+          <div class="flex items-center justify-between px-6 py-4">
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white">
+              {{ qrcodeType === 'wechat' ? t('comp.donate.wechatQR') : t('comp.donate.alipayQR') }}
+            </h3>
+            <button
+              @click="closeQRCode"
+              class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            >
+              <i class="ri-close-line text-xl"></i>
+            </button>
+          </div>
+
+          <!-- 二维码图片 -->
+          <div class="px-6 pb-6">
+            <div class="bg-white p-4 rounded-2xl">
+              <img
+                :src="qrcodeType === 'wechat' ? wechatQRCode : alipayQRCode"
+                :alt="qrcodeType === 'wechat' ? 'WeChat QR Code' : 'Alipay QR Code'"
+                class="w-full rounded-xl"
+              />
+            </div>
+            <p class="text-sm text-gray-500 dark:text-gray-400 text-center mt-4">
+              {{ t('comp.donate.scanTip') }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// 导入收款码图片
+import alipayQRCode from '@/assets/alipay.png';
+import wechatQRCode from '@/assets/wechat.png';
+
+const { t } = useI18n();
+
+// 缓存键
+const DISCLAIMER_AGREED_KEY = 'disclaimer_agreed_timestamp';
+
+const showDisclaimer = ref(false);
+const showDonate = ref(false);
+const showQRCode = ref(false);
+const qrcodeType = ref<'wechat' | 'alipay'>('wechat');
+const isTransitioning = ref(false); // 防止用户点击过快
+
+// 检查是否需要显示免责声明
+const shouldShowDisclaimer = (): boolean => {
+  const agreedTime = localStorage.getItem(DISCLAIMER_AGREED_KEY);
+
+  // 从未同意过
+  if (!agreedTime) return true;
+
+  const savedTime = parseInt(agreedTime, 10);
+  const now = Date.now();
+
+  // 随机 3-10 天后再次显示
+  const randomDays = Math.floor(Math.random() * 8) + 3; // 3-10 天
+  const intervalMs = randomDays * 24 * 60 * 60 * 1000;
+
+  return now - savedTime >= intervalMs;
+};
+
+// 处理同意
+const handleAgree = () => {
+  if (isTransitioning.value) return;
+  isTransitioning.value = true;
+
+  showDisclaimer.value = false;
+  setTimeout(() => {
+    showDonate.value = true;
+    isTransitioning.value = false;
+  }, 300);
+};
+
+// 处理不同意 - 关闭窗口
+const handleDisagree = () => {
+  if (isTransitioning.value) return;
+  isTransitioning.value = true;
+
+  // Web 环境下尝试关闭窗口
+  window.close();
+  isTransitioning.value = false;
+};
+
+// 打开捐赠链接
+const openDonateLink = (type: 'wechat' | 'alipay') => {
+  if (isTransitioning.value) return;
+
+  qrcodeType.value = type;
+  showQRCode.value = true;
+};
+
+// 关闭二维码弹窗
+const closeQRCode = () => {
+  showQRCode.value = false;
+};
+
+// 进入应用
+const handleEnterApp = () => {
+  if (isTransitioning.value) return;
+  isTransitioning.value = true;
+
+  // 记录同意时间
+  localStorage.setItem(DISCLAIMER_AGREED_KEY, Date.now().toString());
+  showDonate.value = false;
+
+  setTimeout(() => {
+    isTransitioning.value = false;
+  }, 300);
+};
+
+onMounted(() => {
+  // 检查是否需要显示免责声明
+  if (shouldShowDisclaimer()) {
+    showDisclaimer.value = true;
+  }
+});
+</script>
+
+<style scoped>
+/* 免责声明弹窗动画 */
+.disclaimer-modal-enter-active,
+.disclaimer-modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.disclaimer-modal-enter-from,
+.disclaimer-modal-leave-to {
+  opacity: 0;
+}
+
+/* 捐赠弹窗动画 */
+.donate-modal-enter-active,
+.donate-modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.donate-modal-enter-from,
+.donate-modal-leave-to {
+  opacity: 0;
+}
+
+/* 二维码弹窗动画 */
+.qrcode-modal-enter-active,
+.qrcode-modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.qrcode-modal-enter-from,
+.qrcode-modal-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/renderer/components/common/MobileUpdateModal.vue b/src/renderer/components/common/MobileUpdateModal.vue
new file mode 100644
index 0000000..ca689b4
--- /dev/null
+++ b/src/renderer/components/common/MobileUpdateModal.vue
@@ -0,0 +1,280 @@
+<template>
+  <Teleport to="body">
+    <Transition name="update-modal">
+      <div
+        v-if="showModal"
+        class="fixed inset-0 z-[999999] flex items-end justify-center bg-black/50 backdrop-blur-sm"
+      >
+        <!-- 弹窗内容 -->
+        <div
+          class="w-full max-w-lg bg-white dark:bg-gray-900 rounded-t-3xl overflow-hidden animate-slide-up"
+        >
+          <!-- 顶部装饰条 -->
+          <div class="h-1 bg-gradient-to-r from-green-400 via-green-500 to-emerald-600"></div>
+
+          <!-- 关闭条 -->
+          <div class="flex justify-center pt-3 pb-2">
+            <div class="w-10 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+          </div>
+
+          <!-- 头部信息 -->
+          <div class="px-6 pb-5">
+            <div class="flex items-center gap-4">
+              <!-- 应用图标 -->
+              <div
+                class="w-20 h-20 rounded-2xl overflow-hidden shadow-lg flex-shrink-0 ring-2 ring-green-500/20"
+              >
+                <img src="@/assets/logo.png" alt="App Icon" class="w-full h-full object-cover" />
+              </div>
+
+              <!-- 版本信息 -->
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-2 mb-2">
+                  <span
+                    class="px-3 py-1 text-xs font-medium text-white bg-gradient-to-r from-green-500 to-emerald-600 rounded-full"
+                  >
+                    {{ t('comp.update.newVersion') }}
+                  </span>
+                </div>
+                <h2 class="text-2xl font-bold text-gray-900 dark:text-white truncate">
+                  v{{ updateInfo.latestVersion }}
+                </h2>
+                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                  {{ t('comp.update.currentVersion') }}: v{{ updateInfo.currentVersion }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 更新内容 -->
+          <div
+            class="mx-6 mb-6 max-h-80 overflow-y-auto rounded-2xl bg-gray-50 dark:bg-gray-800/50"
+          >
+            <div
+              class="p-5 text-sm text-gray-600 dark:text-gray-300 leading-relaxed"
+              v-html="parsedReleaseNotes"
+            ></div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div
+            class="px-6 pb-8 flex gap-3"
+            :style="{ paddingBottom: `calc(32px + var(--safe-area-inset-bottom, 0px))` }"
+          >
+            <button
+              @click="handleLater"
+              class="flex-1 py-4 px-4 rounded-2xl text-base font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 active:scale-[0.98] transition-all duration-200"
+            >
+              {{ t('comp.update.later') }}
+            </button>
+            <button
+              @click="handleUpdate"
+              class="flex-1 py-4 px-4 rounded-2xl text-base font-medium text-white bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 active:scale-[0.98] transition-all duration-200 shadow-lg shadow-green-500/25"
+            >
+              <span class="flex items-center justify-center gap-2">
+                <i class="ri-download-2-line text-lg"></i>
+                {{ t('comp.update.updateNow') }}
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { marked } from 'marked';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';
+
+import config from '../../../../package.json';
+
+const { t } = useI18n();
+
+// 缓存键：记录用户点击"稍后提醒"的时间
+const REMIND_LATER_KEY = 'update_remind_later_timestamp';
+
+// 配置 marked
+marked.setOptions({
+  breaks: true,
+  gfm: true
+});
+
+const showModal = ref(false);
+
+const updateInfo = ref<UpdateResult>({
+  hasUpdate: false,
+  latestVersion: '',
+  currentVersion: config.version,
+  releaseInfo: null
+});
+
+// 解析 Markdown
+const parsedReleaseNotes = computed(() => {
+  if (!updateInfo.value.releaseInfo?.body) return '';
+  try {
+    return marked.parse(updateInfo.value.releaseInfo.body);
+  } catch (error) {
+    console.error('Error parsing markdown:', error);
+    return updateInfo.value.releaseInfo.body;
+  }
+});
+
+// 检查是否应该显示更新提醒
+const shouldShowReminder = (): boolean => {
+  const remindLaterTime = localStorage.getItem(REMIND_LATER_KEY);
+  if (!remindLaterTime) return true;
+
+  const savedTime = parseInt(remindLaterTime, 10);
+  const now = Date.now();
+  const oneDayInMs = 24 * 60 * 60 * 1000; // 24小时
+
+  // 如果距离上次点击"稍后提醒"超过24小时，则显示
+  return now - savedTime >= oneDayInMs;
+};
+
+// 处理"稍后提醒"
+const handleLater = () => {
+  // 记录当前时间
+  localStorage.setItem(REMIND_LATER_KEY, Date.now().toString());
+  showModal.value = false;
+};
+
+const closeModal = () => {
+  showModal.value = false;
+};
+
+const checkForUpdates = async () => {
+  // 检查是否应该显示提醒
+  if (!shouldShowReminder()) {
+    console.log('更新提醒被延迟，等待24小时后再提醒');
+    return;
+  }
+
+  try {
+    const result = await checkUpdate(config.version);
+    if (result && result.hasUpdate) {
+      updateInfo.value = result;
+      showModal.value = true;
+    }
+  } catch (error) {
+    console.error('检查更新失败:', error);
+  }
+};
+
+const handleUpdate = async () => {
+  const version = updateInfo.value.latestVersion;
+
+  // Android APK 下载地址
+  const downloadUrl = `https://github.com/algerkong/AlgerMusicPlayer/releases/download/v${version}/AlgerMusicPlayer-${version}.apk`;
+
+  try {
+    // 获取代理节点
+    const proxyHosts = await getProxyNodes();
+    const proxyDownloadUrl = `${proxyHosts[0]}/${downloadUrl}`;
+
+    // 清除"稍后提醒"记录（用户选择更新后，下次应该正常提醒）
+    localStorage.removeItem(REMIND_LATER_KEY);
+
+    // 使用系统浏览器打开下载链接
+    window.open(proxyDownloadUrl, '_blank');
+
+    // 关闭弹窗
+    closeModal();
+  } catch (error) {
+    console.error('打开下载链接失败:', error);
+    // 回退到直接打开 GitHub Releases
+    const releaseUrl =
+      updateInfo.value.releaseInfo?.html_url ||
+      'https://github.com/algerkong/AlgerMusicPlayer/releases/latest';
+    window.open(releaseUrl, '_blank');
+    closeModal();
+  }
+};
+
+onMounted(() => {
+  // 延迟检查更新，确保应用完全加载
+  setTimeout(() => {
+    checkForUpdates();
+  }, 2000);
+});
+</script>
+
+<style scoped>
+/* 动画 */
+.update-modal-enter-active,
+.update-modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.update-modal-enter-from,
+.update-modal-leave-to {
+  opacity: 0;
+}
+
+.update-modal-enter-active .animate-slide-up,
+.update-modal-leave-active .animate-slide-up {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.update-modal-enter-from .animate-slide-up {
+  transform: translateY(100%);
+}
+
+.update-modal-leave-to .animate-slide-up {
+  transform: translateY(100%);
+}
+
+/* 更新内容样式 */
+:deep(h1) {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+:deep(h2) {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+:deep(h3) {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+:deep(ul) {
+  list-style-type: disc;
+  padding-left: 1.25rem;
+  margin-bottom: 0.75rem;
+}
+
+:deep(ol) {
+  list-style-type: decimal;
+  padding-left: 1.25rem;
+  margin-bottom: 0.75rem;
+}
+
+:deep(li) {
+  margin-bottom: 0.25rem;
+}
+
+:deep(p) {
+  margin-bottom: 0.5rem;
+}
+
+:deep(code) {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  background-color: rgba(0, 0, 0, 0.05);
+  font-size: 0.875rem;
+}
+
+:deep(a) {
+  color: #22c55e;
+}
+</style>
diff --git a/src/renderer/components/lyric/MusicFullMobile.vue b/src/renderer/components/lyric/MusicFullMobile.vue
index e4d47f7..9068c46 100644
--- a/src/renderer/components/lyric/MusicFullMobile.vue
+++ b/src/renderer/components/lyric/MusicFullMobile.vue
@@ -21,13 +21,38 @@
         <i class="ri-loader-4-line loading-icon"></i>
       </div>
       <div
-        class="control-btn absolute top-5 left-5"
+        class="control-btn absolute left-5"
         :class="{ 'pure-mode': config.pureModeEnabled }"
         @click="closeMusicFull"
       >
         <i class="ri-arrow-down-s-line"></i>
       </div>
 
+      <!-- 右上角设置按钮 -->
+      <div
+        class="control-btn absolute right-5 flex items-center gap-2"
+        :class="[
+          { 'pure-mode': config.pureModeEnabled },
+          hasSleepTimerActive ? '!w-auto !px-2' : ''
+        ]"
+      >
+        <!-- 定时器倒计时显示 -->
+        <div
+          v-if="hasSleepTimerActive"
+          class="flex items-center gap-1 px-2 py-1 rounded-full bg-black/30 backdrop-blur-sm text-xs text-white/90"
+          @click="showPlayerSettings = true"
+        >
+          <i class="ri-timer-line text-green-400"></i>
+          <span class="font-medium tabular-nums">{{ sleepTimerDisplayText }}</span>
+        </div>
+        <div @click="showPlayerSettings = true">
+          <i class="ri-more-2-fill"></i>
+        </div>
+      </div>
+
+      <!-- 播放设置弹窗 -->
+      <mobile-player-settings v-model:visible="showPlayerSettings" />
+
       <!-- 全屏歌词页面 - 竖屏模式下 -->
       <transition name="fade">
         <div v-if="showFullLyrics && !isLandscape" class="fullscreen-lyrics" :class="config.theme">
@@ -368,6 +393,7 @@ import { useWindowSize } from '@vueuse/core';
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import MobilePlayerSettings from '@/components/player/MobilePlayerSettings.vue';
 import {
   allTime,
   artistList,
@@ -396,6 +422,55 @@ const playerStore = usePlayerStore();
 const play = computed(() => playerStore.isPlay);
 const playIcon = computed(() => (play.value ? 'ri-pause-fill' : 'ri-play-fill'));
 
+// 播放设置弹窗
+const showPlayerSettings = ref(false);
+
+// 定时器相关
+const sleepTimerRefresh = ref(0);
+let sleepTimerInterval: ReturnType<typeof setInterval> | null = null;
+
+const hasSleepTimerActive = computed(() => playerStore.hasSleepTimerActive);
+
+const sleepTimerDisplayText = computed(() => {
+  void sleepTimerRefresh.value; // 触发响应式更新
+
+  const timer = playerStore.sleepTimer;
+  if (timer.type === 'time' && timer.endTime) {
+    const remaining = Math.max(0, timer.endTime - Date.now());
+    const totalSeconds = Math.floor(remaining / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }
+  if (timer.type === 'songs' && timer.remainingSongs) {
+    return `${timer.remainingSongs}首`;
+  }
+  if (timer.type === 'end') {
+    return '列表结束';
+  }
+  return '';
+});
+
+// 启动/停止定时器刷新
+watch(
+  hasSleepTimerActive,
+  (active) => {
+    if (active && playerStore.sleepTimer.type === 'time') {
+      if (!sleepTimerInterval) {
+        sleepTimerInterval = setInterval(() => {
+          sleepTimerRefresh.value = Date.now();
+        }, 1000);
+      }
+    } else {
+      if (sleepTimerInterval) {
+        clearInterval(sleepTimerInterval);
+        sleepTimerInterval = null;
+      }
+    }
+  },
+  { immediate: true }
+);
+
 // 播放模式
 const { playMode, playModeIcon, playModeText, togglePlayMode: togglePlayModeBase } = usePlayMode();
 // 打开播放列表
@@ -443,9 +518,11 @@ watch(isLandscape, (newVal) => {
   }
 });
 
+// 显示全屏歌词
 // 显示全屏歌词
 const showFullLyricScreen = () => {
   showFullLyrics.value = true;
+
   // 使用多次延迟尝试滚动，确保能够滚动到当前歌词
   nextTick(() => {
     scrollToCurrentLyric(true);
@@ -1754,9 +1831,8 @@ const getWordStyle = (lineIndex: number, _wordIndex: number, word: any) => {
   }
 
   .fullscreen-header {
-    @apply pt-8 pb-4 px-6 flex flex-col items-center fixed top-0 left-0 w-full z-10;
+    @apply pt-16 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 {
@@ -1817,6 +1893,7 @@ const getWordStyle = (lineIndex: number, _wordIndex: number, word: any) => {
   @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);
+  top: calc(var(--safe-area-inset-top, 0) + 20px);
 
   i {
     @apply text-xl;
diff --git a/src/renderer/components/player/MobilePlayBar.vue b/src/renderer/components/player/MobilePlayBar.vue
index dcacebe..9fbcc0a 100644
--- a/src/renderer/components/player/MobilePlayBar.vue
+++ b/src/renderer/components/player/MobilePlayBar.vue
@@ -1,13 +1,14 @@
 <template>
   <div
+    ref="playBarRef"
     class="mobile-play-bar"
     :class="[
       setAnimationClass('animate__fadeInUp'),
-      musicFullVisible ? 'play-bar-expanded' : 'play-bar-mini',
-      !shouldShowMobileMenu ? 'mobile-play-bar-no-menu' : ''
+      playerStore.musicFull ? 'play-bar-expanded' : 'play-bar-mini',
+      shouldShowMobileMenu ? 'is-menu-show' : 'is-menu-hide'
     ]"
     :style="{
-      color: musicFullVisible
+      color: playerStore.musicFull
         ? textColors.theme === 'dark'
           ? '#ffffff'
           : '#ffffff'
@@ -16,63 +17,8 @@
           : '#000000'
     }"
   >
-    <!-- 完整模式 - 在musicFullVisible为true时显示 -->
-    <template v-if="false">
-      <!-- 顶部信息区域 -->
-      <div class="music-info-header">
-        <div class="music-info-main">
-          <h1 class="music-title">{{ playMusic.name }}</h1>
-          <div class="artist-info">
-            <span class="artist-name">
-              <span v-for="(artists, artistsindex) in artistList" :key="artistsindex">
-                {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
-              </span>
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 进度条 -->
-      <div class="music-progress-bar">
-        <span class="current-time">{{ secondToMinute(nowTime) }}</span>
-        <div class="progress-wrapper">
-          <n-slider
-            v-model:value="timeSlider"
-            :step="1"
-            :max="allTime"
-            :min="0"
-            :tooltip="false"
-            class="progress-slider"
-          ></n-slider>
-        </div>
-        <span class="total-time">{{ secondToMinute(allTime) }}</span>
-      </div>
-
-      <!-- 主控制区 -->
-      <div class="player-controls">
-        <div class="control-btn like" @click="toggleFavorite">
-          <i class="iconfont ri-heart-3-fill" :class="{ 'like-active': isFavorite }"></i>
-        </div>
-        <div class="control-btn prev" @click="handlePrev">
-          <i class="iconfont ri-skip-back-fill"></i>
-        </div>
-        <div class="control-btn play-pause" @click="playMusicEvent">
-          <i class="iconfont" :class="play ? 'ri-pause-fill' : 'ri-play-fill'"></i>
-        </div>
-        <div class="control-btn next" @click="handleNext">
-          <i class="iconfont ri-skip-forward-fill"></i>
-        </div>
-        <div class="control-btn list" @click="openPlayListDrawer">
-          <i class="iconfont ri-menu-line"></i>
-        </div>
-      </div>
-
-      <!-- 定时关闭按钮 -->
-      <!-- <SleepTimerPopover mode="mobile" /> -->
-    </template>
-
     <!-- Mini模式 - 在musicFullVisible为false时显示 -->
-    <div v-if="!musicFullVisible" class="mobile-mini-controls">
+    <div v-if="!playerStore.musicFull" class="mobile-mini-controls">
       <!-- 歌曲信息 -->
       <div class="mini-song-info" @click="setMusicFull">
         <n-image
@@ -85,16 +31,17 @@
           <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
+              class="mini-song-artist"
+              v-for="(artists, artistsindex) in artistList"
+              :key="artistsindex"
+            >
+              {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
             </span>
           </n-ellipsis>
         </div>
       </div>
 
-      <!-- 播放按钮 -->
       <div class="mini-playback-controls">
         <div class="mini-control-btn play" @click="playMusicEvent">
           <i class="iconfont icon" :class="play ? 'icon-stop' : 'icon-play'"></i>
@@ -104,21 +51,26 @@
     </div>
 
     <!-- 全屏播放器 -->
-    <music-full-wrapper ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
+    <music-full-wrapper
+      ref="MusicFullRef"
+      v-model="playerStore.musicFull"
+      :background="background"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useThrottleFn } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
+import { useSwipe } from '@vueuse/core';
+import type { Ref } from 'vue';
+import { computed, inject, onMounted, ref, watch } from 'vue';
 
 import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
-import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
+import { artistList, playMusic, textColors } from '@/hooks/MusicHook';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
-import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';
+import { getImgUrl, setAnimationClass } from '@/utils';
 
-const shouldShowMobileMenu = inject('shouldShowMobileMenu');
+const shouldShowMobileMenu = inject('shouldShowMobileMenu') as Ref<boolean>;
 
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
@@ -128,18 +80,6 @@ const play = computed(() => playerStore.isPlay);
 // 背景颜色
 const background = ref('#000');
 
-// 播放进度条
-const throttledSeek = useThrottleFn((value: number) => {
-  if (!sound.value) return;
-  sound.value.seek(value);
-  nowTime.value = value;
-}, 50);
-
-const timeSlider = computed({
-  get: () => nowTime.value,
-  set: throttledSeek
-});
-
 // 播放控制
 function handleNext() {
   playerStore.nextPlay();
@@ -151,36 +91,27 @@ function handlePrev() {
 
 // 全屏播放器
 const MusicFullRef = ref<any>(null);
-const musicFullVisible = ref(false);
 
 // 设置musicFull
 const setMusicFull = () => {
-  musicFullVisible.value = !musicFullVisible.value;
-  playerStore.setMusicFull(musicFullVisible.value);
-  if (musicFullVisible.value) {
+  playerStore.setMusicFull(!playerStore.musicFull);
+  if (playerStore.musicFull) {
     settingsStore.showArtistDrawer = false;
   }
 };
 
+watch(
+  () => playerStore.musicFull,
+  (_newVal) => {
+    // 状态栏样式更新已在 Web 环境下禁用
+  }
+);
+
 // 打开播放列表抽屉
 const openPlayListDrawer = () => {
   playerStore.setPlayListDrawerVisible(true);
 };
 
-// 收藏功能
-const isFavorite = computed(() => {
-  return playerStore.favoriteList.includes(playMusic.value.id as number);
-});
-
-const toggleFavorite = () => {
-  console.log('isFavorite.value', isFavorite.value);
-  if (isFavorite.value) {
-    playerStore.removeFromFavorite(playMusic.value.id as number);
-  } else {
-    playerStore.addToFavorite(playMusic.value.id as number);
-  }
-};
-
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   try {
@@ -191,6 +122,20 @@ const playMusicEvent = async () => {
   }
 };
 
+// 滑动切歌
+const playBarRef = ref<HTMLElement | null>(null);
+onMounted(() => {
+  if (playBarRef.value) {
+    const { direction } = useSwipe(playBarRef, {
+      onSwipeEnd: () => {
+        if (direction.value === 'left') handleNext();
+        if (direction.value === 'right') handlePrev();
+      },
+      threshold: 30
+    });
+  }
+});
+
 watch(
   () => playerStore.playMusic,
   async () => {
@@ -207,8 +152,11 @@ watch(
   animation-duration: 0.3s !important;
   transition: all 0.3s ease;
 
-  &.mobile-play-bar-no-menu {
-    @apply bottom-[10px];
+  &.is-menu-show {
+    bottom: calc(var(--safe-area-inset-bottom, 0) + 66px);
+  }
+  &.is-menu-hide {
+    bottom: calc(var(--safe-area-inset-bottom, 0) + 10px);
   }
 
   &.play-bar-expanded {
@@ -222,66 +170,12 @@ watch(
       rgba(0, 0, 0, 0.8) 80%,
       rgba(0, 0, 0, 0.9) 100%
     );
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: -50px; /* 延伸到上方 */
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-image: v-bind('`url(${getImgUrl(playMusic?.picUrl, "300y300")})`');
-      background-size: cover;
-      background-position: center;
-      filter: blur(20px);
-      opacity: 0.2;
-      z-index: -1;
-    }
   }
 
   &.play-bar-mini {
     @apply h-14 py-0;
   }
 
-  // 顶部信息区域
-  .music-info-header {
-    @apply flex justify-between items-start px-6 pt-3 pb-2 relative z-10;
-
-    .music-info-main {
-      @apply flex flex-col;
-
-      .music-title {
-        @apply text-xl font-bold text-white mb-1;
-        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-      }
-
-      .artist-info {
-        @apply flex items-center;
-
-        .artist-name {
-          @apply text-sm text-white opacity-90;
-        }
-      }
-    }
-
-    .action-stats {
-      @apply flex items-center gap-4;
-
-      .like-count,
-      .comment-count {
-        @apply flex items-center text-white;
-
-        i {
-          @apply text-base mr-1;
-        }
-
-        span {
-          @apply text-xs font-medium;
-        }
-      }
-    }
-  }
-
   // 进度条
   .music-progress-bar {
     @apply flex items-center justify-between px-4 py-2 relative z-10;
@@ -388,7 +282,7 @@ watch(
       }
 
       .mini-song-text {
-        @apply ml-3 min-w-0 flex-1;
+        @apply ml-3 min-w-0 flex-1 flex items-center;
 
         .mini-song-title {
           @apply text-sm font-medium;
diff --git a/src/renderer/components/player/MobilePlayerSettings.vue b/src/renderer/components/player/MobilePlayerSettings.vue
new file mode 100644
index 0000000..40fba34
--- /dev/null
+++ b/src/renderer/components/player/MobilePlayerSettings.vue
@@ -0,0 +1,363 @@
+<template>
+  <Teleport to="body">
+    <Transition name="settings-drawer">
+      <div
+        v-if="visible"
+        class="fixed inset-0 z-[99999] flex items-end justify-center"
+        @click.self="close"
+      >
+        <!-- 遮罩层 -->
+        <div class="absolute inset-0 bg-black/50" @click="close"></div>
+
+        <!-- 弹窗内容 - 磨砂玻璃效果 -->
+        <div
+          class="relative w-full max-w-lg bg-gray-900/70 backdrop-blur-2xl rounded-t-3xl overflow-hidden max-h-[85vh] flex flex-col border-t border-white/10 shadow-2xl"
+        >
+          <!-- 顶部拖拽条 -->
+          <div class="flex justify-center pt-3 pb-2 flex-shrink-0">
+            <div class="w-10 h-1 rounded-full bg-white/30"></div>
+          </div>
+
+          <!-- 标题栏 -->
+          <div class="flex items-center justify-between px-5 pb-4 flex-shrink-0">
+            <h2 class="text-lg font-semibold text-white">
+              {{ t('player.settings.title') }}
+            </h2>
+            <button
+              @click="close"
+              class="w-8 h-8 rounded-full flex items-center justify-center text-white/60 hover:bg-white/10"
+            >
+              <i class="ri-close-line text-xl"></i>
+            </button>
+          </div>
+
+          <!-- 内容区域 -->
+          <div
+            class="flex-1 overflow-y-auto px-5 pb-6"
+            :style="{ paddingBottom: `calc(24px + var(--safe-area-inset-bottom, 0px))` }"
+          >
+            <!-- 播放速度 -->
+            <div class="mb-6">
+              <div class="flex items-center justify-between mb-3">
+                <span class="text-sm font-medium text-white/80">
+                  {{ t('player.settings.playbackSpeed') }}
+                </span>
+                <span class="text-sm text-green-400 font-medium">{{ playbackRate }}x</span>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button
+                  v-for="option in speedOptions"
+                  :key="option"
+                  @click="setSpeed(option)"
+                  class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
+                  :class="
+                    playbackRate === option
+                      ? 'bg-green-500 text-white'
+                      : 'bg-white/10 text-white/70 hover:bg-white/15'
+                  "
+                >
+                  {{ option }}x
+                </button>
+              </div>
+            </div>
+
+            <!-- 分隔线 -->
+            <div class="h-px bg-white/10 my-5"></div>
+
+            <!-- 定时关闭 -->
+            <div>
+              <div class="flex items-center justify-between mb-3">
+                <span class="text-sm font-medium text-white/80">
+                  {{ t('player.sleepTimer.title') }}
+                </span>
+                <span v-if="hasTimerActive" class="text-sm text-green-400 font-medium">
+                  {{ timerStatusText }}
+                </span>
+              </div>
+
+              <!-- 已激活状态 -->
+              <div v-if="hasTimerActive" class="space-y-3">
+                <div class="p-4 rounded-2xl bg-green-500/15 border border-green-500/30">
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                      <i class="ri-timer-line text-green-400 text-xl"></i>
+                      <span class="text-green-400">
+                        {{ timerDisplayText }}
+                      </span>
+                    </div>
+                    <button
+                      @click="cancelTimer"
+                      class="px-3 py-1 rounded-full text-sm bg-red-500/20 text-red-400 hover:bg-red-500/30"
+                    >
+                      {{ t('player.sleepTimer.cancel') }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 未激活状态 - 设置选项 -->
+              <div v-else class="space-y-4">
+                <!-- 按时间 -->
+                <div>
+                  <p class="text-xs text-white/50 mb-2">
+                    {{ t('player.sleepTimer.timeMode') }}
+                  </p>
+                  <div class="flex flex-wrap gap-2">
+                    <button
+                      v-for="minutes in [15, 30, 60, 90]"
+                      :key="minutes"
+                      @click="setTimeTimer(minutes)"
+                      class="px-4 py-2 rounded-full text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
+                    >
+                      {{ minutes }}{{ t('player.sleepTimer.minutes') }}
+                    </button>
+                  </div>
+                  <!-- 自定义时间 -->
+                  <div class="flex items-center gap-2 mt-3">
+                    <div class="flex items-center flex-1 bg-white/10 rounded-full overflow-hidden">
+                      <button
+                        @click="decreaseMinutes"
+                        class="w-10 h-10 flex items-center justify-center text-white/70 hover:bg-white/10 active:bg-white/20"
+                      >
+                        <i class="ri-subtract-line text-lg"></i>
+                      </button>
+                      <input
+                        v-model="customMinutes"
+                        type="text"
+                        inputmode="numeric"
+                        pattern="[0-9]*"
+                        placeholder="分钟"
+                        class="flex-1 px-2 py-2 text-sm text-center bg-transparent text-white/80 border-0 outline-none placeholder-white/40"
+                        @input="handleMinutesInput"
+                      />
+                      <button
+                        @click="increaseMinutes"
+                        class="w-10 h-10 flex items-center justify-center text-white/70 hover:bg-white/10 active:bg-white/20"
+                      >
+                        <i class="ri-add-line text-lg"></i>
+                      </button>
+                    </div>
+                    <button
+                      @click="setCustomTimeTimer"
+                      :disabled="!customMinutes || Number(customMinutes) < 1"
+                      class="px-4 py-2 rounded-full text-sm font-medium bg-green-500 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {{ t('player.sleepTimer.set') }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- 按歌曲数 -->
+                <div>
+                  <p class="text-xs text-white/50 mb-2">
+                    {{ t('player.sleepTimer.songsMode') }}
+                  </p>
+                  <div class="flex flex-wrap gap-2">
+                    <button
+                      v-for="songs in [1, 3, 5, 10]"
+                      :key="songs"
+                      @click="setSongsTimer(songs)"
+                      class="px-4 py-2 rounded-full text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
+                    >
+                      {{ songs }}{{ t('player.sleepTimer.songs') }}
+                    </button>
+                  </div>
+                </div>
+
+                <!-- 播放列表结束 -->
+                <button
+                  @click="setPlaylistEndTimer"
+                  class="w-full py-3 rounded-2xl text-sm font-medium bg-white/10 text-white/70 hover:bg-white/15"
+                >
+                  {{ t('player.sleepTimer.playlistEnd') }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { usePlayerStore } from '@/store/modules/player';
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+const { sleepTimer, playbackRate } = storeToRefs(playerStore);
+
+// Props & Emits
+defineProps<{
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+}>();
+
+// 播放速度选项
+const speedOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
+
+// 自定义时间
+const customMinutes = ref<number | string>(30);
+
+// 定时器相关
+const refreshTrigger = ref(0);
+let timerInterval: number | null = null;
+
+const hasTimerActive = computed(() => playerStore.hasSleepTimerActive);
+
+const timerStatusText = computed(() => {
+  if (sleepTimer.value.type === 'time') return t('player.sleepTimer.activeTime');
+  if (sleepTimer.value.type === 'songs') return t('player.sleepTimer.activeSongs');
+  if (sleepTimer.value.type === 'end') return t('player.sleepTimer.activeEnd');
+  return '';
+});
+
+const timerDisplayText = computed(() => {
+  void refreshTrigger.value;
+
+  if (sleepTimer.value.type === 'time' && sleepTimer.value.endTime) {
+    const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
+    const totalSeconds = Math.floor(remaining / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = Math.floor(totalSeconds % 60);
+    if (hours > 0) {
+      return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    }
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }
+
+  if (sleepTimer.value.type === 'songs') {
+    return t('player.sleepTimer.songsRemaining', { count: sleepTimer.value.remainingSongs || 0 });
+  }
+
+  if (sleepTimer.value.type === 'end') {
+    return t('player.sleepTimer.afterPlaylist');
+  }
+
+  return '';
+});
+
+// 方法
+const close = () => {
+  emit('update:visible', false);
+};
+
+const setSpeed = (speed: number) => {
+  playerStore.setPlaybackRate(speed);
+};
+
+const setTimeTimer = (minutes: number) => {
+  playerStore.setSleepTimerByTime(minutes);
+};
+
+const setCustomTimeTimer = () => {
+  const minutes =
+    typeof customMinutes.value === 'number'
+      ? customMinutes.value
+      : parseInt(String(customMinutes.value) || '0', 10);
+  if (minutes >= 1) {
+    playerStore.setSleepTimerByTime(minutes);
+    customMinutes.value = 30;
+  }
+};
+
+const increaseMinutes = () => {
+  const current = Number(customMinutes.value) || 0;
+  customMinutes.value = Math.min(300, current + 1);
+};
+
+const decreaseMinutes = () => {
+  const current = Number(customMinutes.value) || 0;
+  customMinutes.value = Math.max(1, current - 1);
+};
+
+const handleMinutesInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  const value = input.value.replace(/[^0-9]/g, '');
+  if (value) {
+    customMinutes.value = Math.min(300, Math.max(1, parseInt(value, 10)));
+  } else {
+    customMinutes.value = '';
+  }
+};
+
+const setSongsTimer = (songs: number) => {
+  playerStore.setSleepTimerBySongs(songs);
+};
+
+const setPlaylistEndTimer = () => {
+  playerStore.setSleepTimerAtPlaylistEnd();
+};
+
+const cancelTimer = () => {
+  playerStore.clearSleepTimer();
+};
+
+// 定时刷新倒计时
+const startTimerUpdate = () => {
+  if (timerInterval) return;
+  timerInterval = window.setInterval(() => {
+    refreshTrigger.value = Date.now();
+  }, 500);
+};
+
+const stopTimerUpdate = () => {
+  if (timerInterval) {
+    clearInterval(timerInterval);
+    timerInterval = null;
+  }
+};
+
+watch(
+  () => [hasTimerActive.value, sleepTimer.value.type],
+  ([active, type]) => {
+    if (active && type === 'time') {
+      startTimerUpdate();
+    } else {
+      stopTimerUpdate();
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (hasTimerActive.value && sleepTimer.value.type === 'time') {
+    startTimerUpdate();
+  }
+});
+
+onUnmounted(() => {
+  stopTimerUpdate();
+});
+</script>
+
+<style scoped>
+/* 弹窗动画 */
+.settings-drawer-enter-active,
+.settings-drawer-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.settings-drawer-enter-active > div:last-child,
+.settings-drawer-leave-active > div:last-child {
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.settings-drawer-enter-from,
+.settings-drawer-leave-to {
+  opacity: 0;
+}
+
+.settings-drawer-enter-from > div:last-child,
+.settings-drawer-leave-to > div:last-child {
+  transform: translateY(100%);
+}
+</style>
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 0555b7e..db9cf78 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -64,6 +64,10 @@
 
 :root {
   --text-color: #000000dd;
+  --safe-area-inset-top: 0px;
+  --safe-area-inset-right: 0px;
+  --safe-area-inset-bottom: 10px;
+  --safe-area-inset-left: 0px;
 }
 
 :root[class='dark'] {
diff --git a/src/renderer/layout/AppLayout.vue b/src/renderer/layout/AppLayout.vue
index fb6f302..5d0057c 100644
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="layout-page">
+  <!-- 移动端使用专用布局（平板模式下使用 PC 布局） -->
+  <mobile-layout v-if="isPhone && !settingsStore.setData?.tabletMode" :is-phone="isPhone" />
+
+  <!-- PC 端 / 浏览器移动端 / 平板模式 保持原有布局 -->
+  <div v-else class="layout-page" :class="{ mobile: settingsStore.isMobile }">
     <div id="layout-main" class="layout-main">
       <title-bar />
       <div class="layout-main-page">
@@ -7,7 +11,7 @@
         <app-menu v-if="!settingsStore.isMobile" class="menu" :menus="menuStore.menus" />
         <div class="main">
           <!-- 搜索栏 -->
-          <search-bar />
+          <search-bar class="search-bar" />
           <!-- 主页面路由 -->
           <div
             class="main-content"
@@ -25,7 +29,8 @@
             </router-view>
           </div>
           <play-bottom />
-          <app-menu v-if="shouldShowMobileMenu" class="menu" :menus="menuStore.menus" />
+          <!-- 移动端底部菜单（浏览器模拟移动端时使用） -->
+          <app-menu v-if="shouldShowMobileMenu" class="menu mobile-menu" :menus="menuStore.menus" />
         </div>
       </div>
       <!-- 底部音乐播放 -->
@@ -42,7 +47,6 @@
         />
       </template>
     </div>
-    <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
     <playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
     <sleep-timer-top v-if="!settingsStore.isMobile" />
@@ -65,7 +69,6 @@ import { computed, defineAsyncComponent, onMounted, provide, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
-import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import UpdateModal from '@/components/common/UpdateModal.vue';
 import SleepTimerTop from '@/components/player/SleepTimerTop.vue';
@@ -76,6 +79,9 @@ import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron } from '@/utils';
 
+// 移动端专用布局
+import MobileLayout from './MobileLayout.vue';
+
 const keepAliveInclude = computed(() => {
   const allRoutes = [...homeRouter, ...otherRouter];
 
@@ -118,6 +124,9 @@ const shouldShowMobileMenu = computed(() => {
 
 provide('shouldShowMobileMenu', shouldShowMobileMenu);
 
+// 使用 settingsStore.isMobile 进行移动端检测而不是 Capacitor 设备检测
+const isPhone = computed(() => settingsStore.isMobile);
+
 onMounted(() => {
   settingsStore.initializeSettings();
   settingsStore.initializeTheme();
@@ -144,7 +153,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
 }
 
 .layout-main {
-  @apply w-full h-full relative  text-gray-900 dark:text-white;
+  @apply w-full h-full relative text-gray-900 dark:text-white;
 }
 
 .layout-main-page {
@@ -173,10 +182,12 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
     overflow: auto;
     display: block;
     flex: none;
+    position: relative;
   }
 
   .mobile-content {
     height: calc(100vh - 75px);
+    position: relative;
   }
 }
 </style>
diff --git a/src/renderer/layout/MobileLayout.vue b/src/renderer/layout/MobileLayout.vue
new file mode 100644
index 0000000..ea503f2
--- /dev/null
+++ b/src/renderer/layout/MobileLayout.vue
@@ -0,0 +1,133 @@
+<template>
+  <div id="layout-main" class="mobile-layout mobile" :class="{ 'has-safe-area': isPhone }">
+    <!-- 顶部头部 -->
+    <mobile-header />
+
+    <!-- 主内容区域 -->
+    <div
+      class="mobile-content"
+      :class="{ 'has-bottom-menu': shouldShowBottomMenu, 'has-player': isPlay }"
+    >
+      <router-view v-slot="{ Component }" class="mobile-page">
+        <keep-alive :include="keepAliveInclude">
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+    </div>
+
+    <!-- 底部播放条 -->
+    <mobile-play-bar v-if="isPlay" />
+
+    <!-- 底部导航菜单 -->
+    <div v-if="shouldShowBottomMenu" class="mobile-bottom-menu">
+      <app-menu class="mobile-menu" :menus="menuStore.menus" />
+    </div>
+    <!-- 其他弹窗/抽屉 -->
+    <playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
+    <playing-list-drawer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, provide, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import homeRouter from '@/router/home';
+import otherRouter from '@/router/other';
+import { useMenuStore } from '@/store/modules/menu';
+import { usePlayerStore } from '@/store/modules/player';
+
+import MobileHeader from './components/MobileHeader.vue';
+
+const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
+const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
+const PlayingListDrawer = defineAsyncComponent(
+  () => import('@/components/player/PlayingListDrawer.vue')
+);
+const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
+
+const props = defineProps<{
+  isPhone: boolean;
+}>();
+
+const route = useRoute();
+const playerStore = usePlayerStore();
+const menuStore = useMenuStore();
+
+// 提供是否有安全区域
+provide('hasSafeArea', props.isPhone);
+
+// 是否有播放的歌曲
+const isPlay = computed(() => playerStore.playMusic && playerStore.playMusic.id);
+
+// 是否显示底部菜单
+const shouldShowBottomMenu = computed(() => {
+  const menuPaths = menuStore.menus.map((item: any) => item.path);
+  return menuPaths.includes(route.path) && !playerStore.musicFull;
+});
+
+// 提供给 MobilePlayBar 使用，用于调整播放栏位置
+provide('shouldShowMobileMenu', shouldShowBottomMenu);
+
+// Keep-alive 配置
+const keepAliveInclude = computed(() => {
+  const allRoutes = [...homeRouter, ...otherRouter];
+  return allRoutes
+    .filter((item) => item.meta?.keepAlive)
+    .map((item) =>
+      typeof item.name === 'string' ? item.name.charAt(0).toUpperCase() + item.name.slice(1) : ''
+    )
+    .filter(Boolean);
+});
+
+// 歌单抽屉
+const showPlaylistDrawer = ref(false);
+const currentSongId = ref<number | undefined>();
+
+// 提供打开歌单抽屉的方法
+const openPlaylistDrawer = (songId: number, isOpen: boolean = true) => {
+  currentSongId.value = songId;
+  showPlaylistDrawer.value = isOpen;
+  playerStore.setMusicFull(false);
+  playerStore.setPlayListDrawerVisible(!isOpen);
+};
+
+provide('openPlaylistDrawer', openPlaylistDrawer);
+</script>
+
+<style lang="scss" scoped>
+.mobile-layout {
+  @apply w-screen h-screen flex flex-col;
+  @apply bg-light dark:bg-black;
+  @apply overflow-hidden;
+  position: relative;
+}
+
+.mobile-content {
+  @apply flex-1 overflow-auto;
+
+  // // 只有底部菜单
+  // &.has-bottom-menu:not(.has-player) {
+  //   padding-bottom: calc(60px + var(--safe-area-inset-bottom, 0px));
+  // }
+
+  // // 只有播放栏
+  // &.has-player:not(.has-bottom-menu) {
+  //   padding-bottom: calc(70px + var(--safe-area-inset-bottom, 0px));
+  // }
+}
+
+.mobile-page {
+  @apply h-full;
+}
+
+// 底部菜单固定在底部
+.mobile-bottom-menu {
+  @apply bg-light dark:bg-black;
+  @apply border-t border-gray-200 dark:border-gray-800;
+}
+
+.mobile-menu {
+  @apply w-full;
+}
+</style>
diff --git a/src/renderer/layout/components/AppMenu.vue b/src/renderer/layout/components/AppMenu.vue
index 7cc7af8..0ba4b05 100644
--- a/src/renderer/layout/components/AppMenu.vue
+++ b/src/renderer/layout/components/AppMenu.vue
@@ -172,9 +172,11 @@ const toggleMenu = () => {
   .app-menu {
     max-width: 100%;
     width: 100vw;
-    position: fixed;
+    position: relative;
     bottom: 0;
     left: 0;
+    z-index: 99;
+    @apply bg-light dark:bg-black border-t border-gray-200 dark:border-gray-700;
     z-index: 99999;
     @apply bg-light dark:bg-black border-none border-gray-200 dark:border-gray-700;
 
diff --git a/src/renderer/layout/components/MobileHeader.vue b/src/renderer/layout/components/MobileHeader.vue
new file mode 100644
index 0000000..894fc47
--- /dev/null
+++ b/src/renderer/layout/components/MobileHeader.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="mobile-header" :class="{ 'safe-area-top': hasSafeArea }">
+    <!-- 左侧区域 -->
+    <div class="header-left">
+      <div v-if="showBack" class="header-btn" @click="goBack">
+        <i class="ri-arrow-left-s-line"></i>
+      </div>
+      <div v-else class="header-logo">
+        <span class="logo-text">Alger</span>
+      </div>
+    </div>
+
+    <!-- 中间标题 -->
+    <div class="header-title">
+      <span v-if="title">{{ t(title) }}</span>
+    </div>
+
+    <!-- 右侧区域 -->
+    <div class="header-right">
+      <div class="header-btn" @click="openSearch">
+        <i class="ri-search-line"></i>
+      </div>
+      <div class="header-btn" @click="openSettings">
+        <i class="ri-settings-3-line"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+// 注入是否有安全区域
+const hasSafeArea = inject('hasSafeArea', false);
+
+// 是否显示返回按钮
+const showBack = computed(() => {
+  return route.meta.back === true;
+});
+
+// 页面标题
+const title = computed(() => {
+  return (route.meta.title as string) || '';
+});
+
+// 返回上一页
+const goBack = () => {
+  router.back();
+};
+
+// 打开搜索
+const openSearch = () => {
+  router.push('/mobile-search');
+};
+
+const openSettings = () => {
+  router.push('/set');
+};
+</script>
+
+<style lang="scss" scoped>
+.mobile-header {
+  @apply flex items-center justify-between px-4 py-3;
+  @apply bg-light dark:bg-black;
+  @apply border-b border-gray-100 dark:border-gray-800;
+  min-height: 56px;
+
+  &.safe-area-top {
+    padding-top: calc(var(--safe-area-inset-top, 0px) + 16px);
+  }
+}
+
+.header-left {
+  @apply flex items-center;
+  min-width: 80px;
+}
+
+.header-logo {
+  @apply flex items-center;
+
+  .logo-text {
+    @apply text-lg font-bold text-green-500;
+  }
+}
+
+.header-title {
+  @apply flex-1 text-center;
+
+  span {
+    @apply text-base font-medium text-gray-900 dark:text-white;
+  }
+}
+
+.header-right {
+  @apply flex items-center gap-2;
+  min-width: 80px;
+  justify-content: flex-end;
+}
+
+.header-btn {
+  @apply flex items-center justify-center;
+  @apply w-10 h-10 rounded-full;
+  @apply text-xl text-gray-600 dark:text-gray-300;
+  @apply active:bg-gray-100 dark:active:bg-gray-800;
+  @apply transition-colors duration-150;
+}
+</style>
diff --git a/src/renderer/layout/components/SearchBar.vue b/src/renderer/layout/components/SearchBar.vue
index a1aa6b0..ba51d96 100644
--- a/src/renderer/layout/components/SearchBar.vue
+++ b/src/renderer/layout/components/SearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="search-box flex">
+  <div class="search-box flex search-bar">
     <div v-if="showBackButton" class="back-button" @click="goBack">
       <i class="ri-arrow-left-line"></i>
     </div>
@@ -364,14 +364,9 @@ const checkForUpdates = async () => {
 };
 
 const toGithubRelease = () => {
-  if (updateInfo.value.hasUpdate) {
-    settingsStore.showUpdateModal = true;
-  } else {
-    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
-  }
+  window.location.href = 'https://donate.alger.fun/download';
 };
 
-// ==================== 搜索建议相关的状态和方法 ====================
 const suggestions = ref<string[]>([]);
 const showSuggestions = ref(false);
 const suggestionsLoading = ref(false);
@@ -446,8 +441,6 @@ const handleKeydown = (event: KeyboardEvent) => {
       break;
   }
 };
-
-// ================================================================
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/router/home.ts b/src/renderer/router/home.ts
index a86be44..10389ea 100644
--- a/src/renderer/router/home.ts
+++ b/src/renderer/router/home.ts
@@ -17,8 +17,7 @@ const layoutRouter = [
       title: 'comp.search',
       noScroll: true,
       icon: 'icon-Search',
-      keepAlive: true,
-      isMobile: true
+      keepAlive: true
     },
     component: () => import('@/views/search/index.vue')
   },
@@ -62,7 +61,8 @@ const layoutRouter = [
     meta: {
       title: 'comp.history',
       icon: 'icon-a-TicketStar',
-      keepAlive: true
+      keepAlive: true,
+      isMobile: true
     }
   },
   {
diff --git a/src/renderer/router/other.ts b/src/renderer/router/other.ts
index 7d0197b..d067cf1 100644
--- a/src/renderer/router/other.ts
+++ b/src/renderer/router/other.ts
@@ -108,6 +108,28 @@ const otherRouter = [
       back: true
     },
     component: () => import('@/views/music/HistoryRecommend.vue')
+  },
+  {
+    path: '/mobile-search',
+    name: 'mobileSearch',
+    meta: {
+      title: '搜索',
+      keepAlive: false,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/mobile-search/index.vue')
+  },
+  {
+    path: '/mobile-search-result',
+    name: 'mobileSearchResult',
+    meta: {
+      title: '搜索结果',
+      keepAlive: false,
+      showInMenu: false,
+      back: true
+    },
+    component: () => import('@/views/mobile-search-result/index.vue')
   }
 ];
 export default otherRouter;
diff --git a/src/renderer/views/history/index.vue b/src/renderer/views/history/index.vue
index 60f0be0..2f14793 100644
--- a/src/renderer/views/history/index.vue
+++ b/src/renderer/views/history/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="history-page">
-    <div class="title-wrapper" :class="setAnimationClass('animate__fadeInRight')">
+    <div class="title-wrapper" :class="setAnimationClass('animate__fadeInRight')" v-if="!isMobile">
       <div class="title">{{ t('history.title') }}</div>
       <n-button
         secondary
@@ -54,12 +54,14 @@
             :style="setAnimationDelay(index, 30)"
           >
             <song-item class="history-item-content" :item="item" @play="handlePlay" />
-            <div class="history-item-count min-w-[60px]" v-show="currentTab === 'local'">
-              {{ t('history.playCount', { count: item.count }) }}
-            </div>
-            <div class="history-item-delete" v-show="currentTab === 'local'">
-              <i class="iconfont icon-close" @click="handleDelMusic(item)"></i>
-            </div>
+            <template v-if="!isMobile">
+              <div class="history-item-count min-w-[60px]" v-show="currentTab === 'local'">
+                {{ t('history.playCount', { count: item.count }) }}
+              </div>
+              <div class="history-item-delete" v-show="currentTab === 'local'">
+                <i class="iconfont icon-close" @click="handleDelMusic(item)"></i>
+              </div>
+            </template>
           </div>
         </template>
 
@@ -130,7 +132,7 @@ import { usePlaylistHistory } from '@/hooks/PlaylistHistoryHook';
 import { usePlayerStore } from '@/store/modules/player';
 import { useUserStore } from '@/store/modules/user';
 import type { SongResult } from '@/types/music';
-import { setAnimationClass, setAnimationDelay } from '@/utils';
+import { isMobile, setAnimationClass, setAnimationDelay } from '@/utils';
 
 // 扩展历史记录类型以包含 playTime
 interface HistoryRecord extends Partial<SongResult> {
diff --git a/src/renderer/views/historyAndFavorite/index.vue b/src/renderer/views/historyAndFavorite/index.vue
index d6efecf..5970404 100644
--- a/src/renderer/views/historyAndFavorite/index.vue
+++ b/src/renderer/views/historyAndFavorite/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex gap-4 h-full pb-4">
-    <favorite class="flex-item" />
+    <favorite class="flex-item" v-if="!isMobile" />
     <history-list class="flex-item" />
   </div>
 </template>
@@ -10,6 +10,7 @@ defineOptions({
   name: 'History'
 });
 
+import { isMobile } from '@/utils';
 import Favorite from '@/views/favorite/index.vue';
 import HistoryList from '@/views/history/index.vue';
 </script>
diff --git a/src/renderer/views/home/index.vue b/src/renderer/views/home/index.vue
index 7140a43..0b4a980 100644
--- a/src/renderer/views/home/index.vue
+++ b/src/renderer/views/home/index.vue
@@ -41,7 +41,7 @@ defineOptions({
 
 .mobile {
   .main-content {
-    @apply flex-col mx-4;
+    @apply flex-col mx-4 mb-40;
   }
   :deep(.favorite-page) {
     @apply p-0 mx-4 h-full;
diff --git a/src/renderer/views/mobile-search-result/index.vue b/src/renderer/views/mobile-search-result/index.vue
new file mode 100644
index 0000000..35765bd
--- /dev/null
+++ b/src/renderer/views/mobile-search-result/index.vue
@@ -0,0 +1,464 @@
+<template>
+  <div class="mobile-search-result">
+    <!-- 搜索结果头部 -->
+    <div class="result-header" :class="{ 'safe-area-top': hasSafeArea }">
+      <div class="header-back" @click="goBack">
+        <i class="ri-arrow-left-s-line"></i>
+      </div>
+      <div class="header-keyword">{{ keyword }}</div>
+      <div class="header-actions">
+        <div class="action-btn" @click="openSearch">
+          <i class="ri-search-line"></i>
+        </div>
+      </div>
+    </div>
+
+    <!-- 搜索类型标签 -->
+    <div class="search-types">
+      <div
+        v-for="type in searchTypes"
+        :key="type.key"
+        class="type-tag"
+        :class="{ active: searchType === type.key }"
+        @click="selectType(type.key)"
+      >
+        {{ type.label }}
+      </div>
+    </div>
+
+    <!-- 搜索结果列表 -->
+    <div class="result-content" @scroll="handleScroll">
+      <!-- 加载中 -->
+      <div v-if="loading && !results.length" class="loading-state">
+        <n-spin size="medium" />
+        <span class="ml-2">{{ t('search.loading.searching') }}</span>
+      </div>
+
+      <!-- 搜索结果 -->
+      <div v-else-if="results.length" class="result-list">
+        <!-- B站视频 -->
+        <template v-if="searchType === SEARCH_TYPE.BILIBILI">
+          <bilibili-item
+            v-for="item in results"
+            :key="item.bvid"
+            :item="item"
+            @play="handlePlayBilibili"
+          />
+        </template>
+
+        <!-- 歌曲搜索 -->
+        <template v-else-if="searchType === SEARCH_TYPE.MUSIC">
+          <song-item
+            v-for="item in results"
+            :key="item.id"
+            :item="item"
+            :is-next="true"
+            @play="handlePlay"
+          />
+        </template>
+
+        <!-- 专辑/歌单/MV 搜索 -->
+        <template v-else>
+          <search-item v-for="item in results" :key="item.id" :item="item" class="mb-3" />
+        </template>
+
+        <!-- 加载更多 -->
+        <div v-if="isLoadingMore" class="loading-more">
+          <n-spin size="small" />
+          <span class="ml-2">{{ t('search.loading.more') }}</span>
+        </div>
+
+        <!-- 没有更多 -->
+        <div v-if="!hasMore && results.length" class="no-more">
+          {{ t('search.noMore') }}
+        </div>
+      </div>
+
+      <!-- 无结果 -->
+      <div v-else-if="!loading" class="empty-state">
+        <i class="ri-search-line"></i>
+        <span>{{ t('search.noResult') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import {
+  createSimpleBilibiliSong,
+  getBilibiliAudioUrl,
+  getBilibiliProxyUrl,
+  getBilibiliVideoDetail,
+  searchBilibili
+} from '@/api/bilibili';
+import { getSearch } from '@/api/search';
+import BilibiliItem from '@/components/common/BilibiliItem.vue';
+import SearchItem from '@/components/common/SearchItem.vue';
+import SongItem from '@/components/common/SongItem.vue';
+import { SEARCH_TYPE, SEARCH_TYPES } from '@/const/bar-const';
+import { usePlayerStore } from '@/store/modules/player';
+import { useSearchStore } from '@/store/modules/search';
+import type { IBilibiliSearchResult } from '@/types/bilibili';
+
+const { t, locale } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const playerStore = usePlayerStore();
+const searchStore = useSearchStore();
+
+// 注入是否有安全区域
+const hasSafeArea = inject('hasSafeArea', false);
+
+// 搜索关键词
+const keyword = ref((route.query.keyword as string) || '');
+
+// 搜索类型
+const searchType = ref(Number(route.query.type) || searchStore.searchType || 1);
+const searchTypes = computed(() => {
+  locale.value;
+  return SEARCH_TYPES.map((type) => ({
+    label: t(type.label),
+    key: type.key
+  }));
+});
+
+// 搜索结果
+const results = ref<any[]>([]);
+const loading = ref(false);
+
+// 分页
+const ITEMS_PER_PAGE = 30;
+const page = ref(1);
+const hasMore = ref(true);
+const isLoadingMore = ref(false);
+
+// 执行搜索
+const performSearch = async (isLoadMore = false) => {
+  if (!keyword.value) return;
+
+  if (isLoadMore) {
+    if (!hasMore.value || isLoadingMore.value) return;
+    isLoadingMore.value = true;
+  } else {
+    loading.value = true;
+    results.value = [];
+    page.value = 1;
+    hasMore.value = true;
+  }
+
+  try {
+    // B站搜索
+    if (searchType.value === SEARCH_TYPE.BILIBILI) {
+      const response = await searchBilibili({
+        keyword: keyword.value,
+        page: page.value,
+        pagesize: ITEMS_PER_PAGE
+      });
+
+      const bilibiliVideos = response.data.data.result.map((item: any) => ({
+        id: item.aid,
+        bvid: item.bvid,
+        title: item.title,
+        author: item.author,
+        pic: getBilibiliProxyUrl(item.pic),
+        duration: item.duration,
+        pubdate: item.pubdate,
+        description: item.description,
+        view: item.play,
+        danmaku: item.video_review
+      }));
+
+      if (isLoadMore) {
+        results.value = [...results.value, ...bilibiliVideos];
+      } else {
+        results.value = bilibiliVideos;
+      }
+
+      hasMore.value = bilibiliVideos.length === ITEMS_PER_PAGE;
+    }
+    // 歌曲搜索
+    else if (searchType.value === SEARCH_TYPE.MUSIC) {
+      const { data } = await getSearch({
+        keywords: keyword.value,
+        type: searchType.value,
+        limit: ITEMS_PER_PAGE,
+        offset: (page.value - 1) * ITEMS_PER_PAGE
+      });
+
+      const songs = (data.result.songs || []).map((item: any) => ({
+        ...item,
+        picUrl: item.al?.picUrl,
+        artists: item.ar
+      }));
+
+      if (isLoadMore) {
+        results.value = [...results.value, ...songs];
+      } else {
+        results.value = songs;
+      }
+
+      hasMore.value = songs.length === ITEMS_PER_PAGE;
+    }
+    // 专辑搜索
+    else if (searchType.value === SEARCH_TYPE.ALBUM) {
+      const { data } = await getSearch({
+        keywords: keyword.value,
+        type: searchType.value,
+        limit: ITEMS_PER_PAGE,
+        offset: (page.value - 1) * ITEMS_PER_PAGE
+      });
+
+      const albums = (data.result.albums || []).map((item: any) => ({
+        ...item,
+        desc: `${item.artist?.name || ''} ${item.company || ''}`,
+        type: 'album'
+      }));
+
+      if (isLoadMore) {
+        results.value = [...results.value, ...albums];
+      } else {
+        results.value = albums;
+      }
+
+      hasMore.value = albums.length === ITEMS_PER_PAGE;
+    }
+    // 歌单搜索
+    else if (searchType.value === SEARCH_TYPE.PLAYLIST) {
+      const { data } = await getSearch({
+        keywords: keyword.value,
+        type: searchType.value,
+        limit: ITEMS_PER_PAGE,
+        offset: (page.value - 1) * ITEMS_PER_PAGE
+      });
+
+      const playlists = (data.result.playlists || []).map((item: any) => ({
+        ...item,
+        picUrl: item.coverImgUrl,
+        playCount: item.playCount,
+        desc: item.creator?.nickname || '',
+        type: 'playlist'
+      }));
+
+      if (isLoadMore) {
+        results.value = [...results.value, ...playlists];
+      } else {
+        results.value = playlists;
+      }
+
+      hasMore.value = playlists.length === ITEMS_PER_PAGE;
+    }
+    // MV 搜索
+    else if (searchType.value === SEARCH_TYPE.MV) {
+      const { data } = await getSearch({
+        keywords: keyword.value,
+        type: searchType.value,
+        limit: ITEMS_PER_PAGE,
+        offset: (page.value - 1) * ITEMS_PER_PAGE
+      });
+
+      const mvs = (data.result.mvs || []).map((item: any) => ({
+        ...item,
+        picUrl: item.cover,
+        playCount: item.playCount,
+        desc: item.artists?.map((artist: any) => artist.name).join('/') || '',
+        type: 'mv'
+      }));
+
+      if (isLoadMore) {
+        results.value = [...results.value, ...mvs];
+      } else {
+        results.value = mvs;
+      }
+
+      hasMore.value = mvs.length === ITEMS_PER_PAGE;
+    }
+
+    page.value++;
+  } catch (error) {
+    console.error('搜索失败:', error);
+  } finally {
+    loading.value = false;
+    isLoadingMore.value = false;
+  }
+};
+
+// 选择搜索类型
+const selectType = (type: number) => {
+  if (searchType.value === type) return;
+
+  searchType.value = type;
+  searchStore.searchType = type;
+
+  // 更新路由查询参数
+  router.replace({
+    query: {
+      ...route.query,
+      type: type.toString()
+    }
+  });
+
+  performSearch();
+};
+
+// 滚动加载更多
+const handleScroll = (e: Event) => {
+  const target = e.target as HTMLElement;
+  const { scrollTop, scrollHeight, clientHeight } = target;
+
+  if (scrollTop + clientHeight >= scrollHeight - 100) {
+    performSearch(true);
+  }
+};
+
+// 播放音乐
+const handlePlay = (item: any) => {
+  playerStore.addToNextPlay(item);
+};
+
+// 播放B站视频
+const handlePlayBilibili = async (item: IBilibiliSearchResult) => {
+  try {
+    const videoDetail = await getBilibiliVideoDetail(item.bvid);
+    const pages = videoDetail.data.pages;
+
+    if (pages && pages.length === 1) {
+      const audioUrl = await getBilibiliAudioUrl(item.bvid, pages[0].cid);
+      const playItem = createSimpleBilibiliSong(item, audioUrl);
+      playItem.bilibiliData = {
+        bvid: item.bvid,
+        cid: pages[0].cid
+      };
+      playerStore.setPlay(playItem);
+    } else {
+      router.push(`/bilibili/${item.bvid}`);
+    }
+  } catch (error) {
+    console.error('播放B站视频失败:', error);
+    router.push(`/bilibili/${item.bvid}`);
+  }
+};
+
+// 返回
+const goBack = () => {
+  router.back();
+};
+
+// 打开搜索
+const openSearch = () => {
+  router.push('/mobile-search');
+};
+
+// 监听路由变化
+watch(
+  () => route.query,
+  (query) => {
+    if (route.path === '/mobile-search-result' && query.keyword) {
+      keyword.value = query.keyword as string;
+      searchType.value = Number(query.type) || searchStore.searchType || 1;
+      performSearch();
+    }
+  }
+);
+
+onMounted(() => {
+  if (keyword.value) {
+    performSearch();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.mobile-search-result {
+  @apply fixed inset-0;
+  @apply bg-light dark:bg-black;
+  @apply flex flex-col;
+}
+
+.result-header {
+  @apply flex items-center gap-3 px-4 py-3;
+  @apply border-b border-gray-100 dark:border-gray-800;
+
+  &.safe-area-top {
+    padding-top: calc(var(--safe-area-inset-top, 0px) + 12px);
+  }
+}
+
+.header-back {
+  @apply flex items-center justify-center;
+  @apply w-10 h-10 rounded-full text-xl;
+  @apply text-gray-600 dark:text-gray-300;
+  @apply active:bg-gray-100 dark:active:bg-gray-800;
+}
+
+.header-keyword {
+  @apply flex-1 text-base font-medium;
+  @apply text-gray-900 dark:text-white;
+  @apply truncate;
+}
+
+.header-actions {
+  @apply flex items-center gap-2;
+}
+
+.action-btn {
+  @apply flex items-center justify-center;
+  @apply w-10 h-10 rounded-full text-xl;
+  @apply text-gray-600 dark:text-gray-300;
+  @apply active:bg-gray-100 dark:active:bg-gray-800;
+}
+
+.search-types {
+  @apply flex gap-2 px-4 py-3 overflow-x-auto;
+  @apply border-b border-gray-100 dark:border-gray-800;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.type-tag {
+  @apply px-4 py-1.5 rounded-full text-sm whitespace-nowrap;
+  @apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300;
+  @apply transition-colors duration-200;
+
+  &.active {
+    @apply bg-green-500 text-white;
+  }
+}
+
+.result-content {
+  @apply flex-1 overflow-y-auto;
+}
+
+.loading-state {
+  @apply flex flex-col items-center justify-center py-20;
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.result-list {
+  @apply pb-20;
+}
+
+.loading-more {
+  @apply flex justify-center items-center py-4;
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.no-more {
+  @apply text-center py-4;
+  @apply text-gray-500 dark:text-gray-400;
+}
+
+.empty-state {
+  @apply flex flex-col items-center justify-center py-20;
+  @apply text-gray-400 dark:text-gray-500;
+
+  i {
+    @apply text-6xl mb-4;
+  }
+}
+</style>
diff --git a/src/renderer/views/mobile-search/index.vue b/src/renderer/views/mobile-search/index.vue
new file mode 100644
index 0000000..99717f0
--- /dev/null
+++ b/src/renderer/views/mobile-search/index.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="mobile-search-page">
+    <!-- 搜索头部 -->
+    <div class="search-header" :class="{ 'safe-area-top': hasSafeArea }">
+      <div class="header-back" @click="goBack">
+        <i class="ri-arrow-left-s-line"></i>
+      </div>
+      <div class="search-input-wrapper">
+        <i class="ri-search-line search-icon"></i>
+        <input
+          ref="searchInputRef"
+          v-model="searchValue"
+          type="text"
+          class="search-input"
+          :placeholder="hotSearchKeyword"
+          @input="handleInput"
+          @keydown.enter="handleSearch"
+        />
+        <i v-if="searchValue" class="ri-close-circle-fill clear-icon" @click="clearSearch"></i>
+      </div>
+      <div class="search-button" @click="handleSearch">
+        {{ t('common.search') }}
+      </div>
+    </div>
+
+    <!-- 搜索类型标签 -->
+    <div class="search-types">
+      <div
+        v-for="type in searchTypes"
+        :key="type.key"
+        class="type-tag"
+        :class="{ active: searchType === type.key }"
+        @click="selectType(type.key)"
+      >
+        {{ type.label }}
+      </div>
+    </div>
+
+    <!-- 搜索内容区域 -->
+    <div class="search-content">
+      <!-- 搜索建议 -->
+      <div v-if="suggestions.length > 0" class="search-section">
+        <div class="section-title">{{ t('search.suggestions') }}</div>
+        <div class="suggestion-list">
+          <div
+            v-for="(item, index) in suggestions"
+            :key="index"
+            class="suggestion-item"
+            @click="selectSuggestion(item)"
+          >
+            <i class="ri-search-line"></i>
+            <span>{{ item }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 搜索历史 -->
+      <div v-else-if="searchHistory.length > 0" class="search-section">
+        <div class="section-header">
+          <span class="section-title">{{ t('search.history') }}</span>
+          <span class="clear-history" @click="clearHistory">{{ t('common.clear') }}</span>
+        </div>
+        <div class="history-tags">
+          <div
+            v-for="(item, index) in searchHistory"
+            :key="index"
+            class="history-tag"
+            @click="selectSuggestion(item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 热门搜索 -->
+      <div v-if="hotSearchList.length > 0 && !searchValue" class="search-section">
+        <div class="section-title">{{ t('search.hot') }}</div>
+        <div class="hot-list">
+          <div
+            v-for="(item, index) in hotSearchList"
+            :key="index"
+            class="hot-item"
+            @click="selectSuggestion(item.searchWord)"
+          >
+            <span class="hot-rank" :class="{ top: index < 3 }">{{ index + 1 }}</span>
+            <span class="hot-word">{{ item.searchWord }}</span>
+            <span v-if="item.iconUrl" class="hot-icon">
+              <img :src="item.iconUrl" alt="" />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core';
+import { computed, inject, nextTick, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getHotSearch, getSearchKeyword } from '@/api/home';
+import { getSearchSuggestions } from '@/api/search';
+import { SEARCH_TYPES } from '@/const/bar-const';
+import { useSearchStore } from '@/store/modules/search';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const searchStore = useSearchStore();
+
+// 注入是否有安全区域
+const hasSafeArea = inject('hasSafeArea', false);
+
+// 搜索值
+const searchValue = ref('');
+const searchInputRef = ref<HTMLInputElement | null>(null);
+
+// 热门搜索关键词占位符
+const hotSearchKeyword = ref('搜索音乐、歌手、歌单');
+
+// 搜索类型
+const searchType = ref(searchStore.searchType || 1);
+const searchTypes = computed(() => {
+  locale.value;
+  return SEARCH_TYPES.map((type) => ({
+    label: t(type.label),
+    key: type.key
+  }));
+});
+
+// 搜索建议
+const suggestions = ref<string[]>([]);
+
+// 搜索历史
+const HISTORY_KEY = 'mobile_search_history';
+const searchHistory = ref<string[]>([]);
+
+// 热门搜索
+const hotSearchList = ref<any[]>([]);
+
+// 加载热门搜索关键词
+const loadHotSearchKeyword = async () => {
+  try {
+    const { data } = await getSearchKeyword();
+    hotSearchKeyword.value = data.data.showKeyword;
+  } catch (e) {
+    console.error('加载热门搜索关键词失败:', e);
+  }
+};
+
+// 加载热门搜索列表
+const loadHotSearchList = async () => {
+  try {
+    const { data } = await getHotSearch();
+    hotSearchList.value = data.data || [];
+  } catch (e) {
+    console.error('加载热门搜索失败:', e);
+  }
+};
+
+// 加载搜索历史
+const loadSearchHistory = () => {
+  try {
+    const history = localStorage.getItem(HISTORY_KEY);
+    searchHistory.value = history ? JSON.parse(history) : [];
+  } catch (e) {
+    console.error('加载搜索历史失败:', e);
+    searchHistory.value = [];
+  }
+};
+
+// 保存搜索历史
+const saveSearchHistory = (keyword: string) => {
+  if (!keyword.trim()) return;
+
+  // 移除重复项并添加到开头
+  const history = searchHistory.value.filter((item) => item !== keyword);
+  history.unshift(keyword);
+
+  // 最多保存20条
+  searchHistory.value = history.slice(0, 20);
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value));
+};
+
+// 清除搜索历史
+const clearHistory = () => {
+  searchHistory.value = [];
+  localStorage.removeItem(HISTORY_KEY);
+};
+
+// 获取搜索建议（防抖）
+const debouncedGetSuggestions = useDebounceFn(async (keyword: string) => {
+  if (!keyword.trim()) {
+    suggestions.value = [];
+    return;
+  }
+  suggestions.value = await getSearchSuggestions(keyword);
+}, 300);
+
+// 处理输入
+const handleInput = () => {
+  debouncedGetSuggestions(searchValue.value);
+};
+
+// 清除搜索
+const clearSearch = () => {
+  searchValue.value = '';
+  suggestions.value = [];
+};
+
+// 选择搜索类型
+const selectType = (type: number) => {
+  searchType.value = type;
+  searchStore.searchType = type;
+};
+
+// 选择建议
+const selectSuggestion = (keyword: string) => {
+  searchValue.value = keyword;
+  handleSearch();
+};
+
+// 执行搜索
+const handleSearch = () => {
+  const keyword = searchValue.value.trim();
+  if (!keyword) return;
+
+  // 保存搜索历史
+  saveSearchHistory(keyword);
+
+  // 跳转到搜索结果页
+  router.push({
+    path: '/mobile-search-result',
+    query: {
+      keyword,
+      type: searchType.value
+    }
+  });
+};
+
+// 返回上一页
+const goBack = () => {
+  router.back();
+};
+
+onMounted(() => {
+  loadHotSearchKeyword();
+  loadHotSearchList();
+  loadSearchHistory();
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.mobile-search-page {
+  @apply fixed inset-0 z-50;
+  @apply bg-light dark:bg-black;
+  @apply flex flex-col;
+}
+
+.search-header {
+  @apply flex items-center gap-3 pl-1 pr-3 py-3;
+  @apply border-b border-gray-100 dark:border-gray-800;
+
+  &.safe-area-top {
+    padding-top: calc(var(--safe-area-inset-top, 0px) + 12px);
+  }
+}
+
+.header-back {
+  @apply flex items-center justify-center;
+  @apply w-8 h-8 rounded-full text-2xl;
+  @apply text-gray-600 dark:text-gray-300;
+  @apply active:bg-gray-100 dark:active:bg-gray-800;
+}
+
+.search-input-wrapper {
+  @apply flex-1 flex items-center gap-2;
+  @apply bg-gray-100 dark:bg-gray-800 rounded-full;
+  @apply px-4 py-1;
+}
+
+.search-icon {
+  @apply text-gray-400 text-lg;
+}
+
+.search-input {
+  @apply flex-1 bg-transparent border-none outline-none;
+  @apply text-gray-900 dark:text-white text-base;
+
+  &::placeholder {
+    @apply text-gray-400;
+  }
+}
+
+.clear-icon {
+  @apply text-gray-400 text-lg cursor-pointer;
+}
+
+.search-types {
+  @apply flex gap-2 px-4 py-3 overflow-x-auto;
+  @apply border-b border-gray-100 dark:border-gray-800;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.type-tag {
+  @apply px-4 py-1.5 rounded-full text-sm whitespace-nowrap;
+  @apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300;
+  @apply transition-colors duration-200;
+
+  &.active {
+    @apply bg-green-500 text-white;
+  }
+}
+
+.search-content {
+  @apply flex-1 overflow-y-auto px-4 py-3;
+}
+
+.search-section {
+  @apply mb-6;
+}
+
+.section-header {
+  @apply flex items-center justify-between mb-3;
+}
+
+.section-title {
+  @apply text-sm font-medium text-gray-500 dark:text-gray-400 mb-3;
+}
+
+.clear-history {
+  @apply text-sm text-gray-400 dark:text-gray-500;
+}
+
+.suggestion-list {
+  @apply space-y-1;
+}
+
+.suggestion-item {
+  @apply flex items-center gap-3 py-3;
+  @apply text-gray-700 dark:text-gray-200;
+  @apply active:bg-gray-50 dark:active:bg-gray-800;
+
+  i {
+    @apply text-gray-400;
+  }
+}
+
+.history-tags {
+  @apply flex flex-wrap gap-2;
+}
+
+.history-tag {
+  @apply px-3 py-1.5 rounded-full text-sm;
+  @apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300;
+  @apply active:bg-gray-200 dark:active:bg-gray-700;
+}
+
+.hot-list {
+  @apply space-y-1;
+}
+
+.hot-item {
+  @apply flex items-center gap-3 py-2.5;
+  @apply active:bg-gray-50 dark:active:bg-gray-800;
+}
+
+.hot-rank {
+  @apply w-5 text-center text-sm font-medium text-gray-400;
+
+  &.top {
+    @apply text-red-500;
+  }
+}
+
+.hot-word {
+  @apply flex-1 text-gray-700 dark:text-gray-200;
+}
+
+.hot-icon {
+  img {
+    @apply h-4;
+  }
+}
+</style>