✨ feat: 优化下载应用功能 去除web 窗口样式

src/components/common/InstallAppModal.vue

@@ -15,6 +15,15 @@
         <n-button class="cancel-btn" @click="closeModal">暂不安装</n-button>
         <n-button type="primary" class="install-btn" @click="handleInstall">立即安装</n-button>
       </div>
+      <div class="modal-desc mt-4 text-center">
+        <p class="text-xs text-gray-400">
+          下载遇到问题？去
+          <a class="text-green-500" target="_blank" href="https://github.com/algerkong/AlgerMusicPlayer/releases"
+            >GitHub</a
+          >
+          下载最新版本
+        </p>
+      </div>
     </div>
   </n-modal>
 </template>
@@ -62,9 +71,9 @@ const handleInstall = async (): Promise<void> => {
 
   const getDownloadUrl = (os: string, arch: string): string => {
     const version = config.version as string;
-    return `https://github.com/algerkong/AlgerMusicPlayer/releases/download/${version}/AlgerMusic_${version}_${arch}.${os === 'mac' ? 'dmg' : 'exe'}`;
+    const setup = os !== 'mac' ? 'Setup_' : '';
+    return `https://gh.llkk.cc/https://github.com/algerkong/AlgerMusicPlayer/releases/download/${version}/AlgerMusic_${version}_${setup}${arch}.${os === 'mac' ? 'dmg' : 'exe'}`;
   };
-
   const osType: string | null = isMac ? 'mac' : isWindows ? 'windows' : null;
   const archType: string | null = isARM ? 'arm64' : isX64 ? 'x64' : isX86 ? 'x86' : null;
 
@@ -80,11 +89,11 @@ const handleInstall = async (): Promise<void> => {
     @apply max-w-sm;
   }
   .modal-content {
-    @apply p-4;
+    @apply p-4 pb-0;
     .modal-header {
       @apply flex items-center mb-6;
       .app-icon {
-        @apply w-16 h-16 mr-4 rounded-2xl overflow-hidden;
+        @apply w-20 h-20 mr-4 rounded-2xl overflow-hidden;
         img {
           @apply w-full h-full object-cover;
         }
@@ -100,7 +109,7 @@ const handleInstall = async (): Promise<void> => {
       }
     }
     .modal-actions {
-      @apply flex gap-3;
+      @apply flex gap-3 mt-4;
       .n-button {
         @apply flex-1;
       }

src/layout/AppLayout.vue

@@ -1,23 +1,8 @@
 <template>
   <div class="layout-page">
-    <div
+    <div id="layout-main" class="layout-main" :style="{ background: backgroundColor }">
-      id="layout-main"
+      <title-bar v-if="isElectron" />
-      class="layout-main"
+      <div class="layout-main-page" :class="isElectron ? '' : 'pt-6'">
-      :style="{
-        background: backgroundColor,
-        width: mainWidth + 'px',
-        height: mainHeight + 'px',
-        minWidth: '1200px',
-        minHeight: '780px',
-      }"
-    >
-      <!-- 拖动手柄 -->
-      <div class="resize-handle right" @mousedown="startResize('right', $event)"></div>
-      <div class="resize-handle bottom" @mousedown="startResize('bottom', $event)"></div>
-      <div class="resize-handle corner" @mousedown="startResize('corner', $event)"></div>
-
-      <title-bar v-if="!isMobile" />
-      <div class="layout-main-page">
         <!-- 侧边菜单栏 -->
         <app-menu v-if="!isMobile" class="menu" :menus="menus" />
         <div class="main">
@@ -82,45 +67,6 @@ const { menus } = store.state;
 const route = useRoute();
 
 const backgroundColor = ref('#000');
-const windowSize = JSON.parse(localStorage.getItem('windowSize') || '{}');
-const mainWidth = ref(windowSize.width || document.documentElement.clientWidth * 0.8); // 初始宽度
-const mainHeight = ref(windowSize.height || document.documentElement.clientHeight * 0.85); // 初始高度
-let isResizing = false;
-
-const startResize = (direction: string, event: MouseEvent) => {
-  if (isElectron.value) return;
-  isResizing = true;
-  document.body.style.cursor =
-    direction === 'right' ? 'ew-resize' : direction === 'bottom' ? 'ns-resize' : 'nwse-resize';
-  const startX = event.clientX;
-  const startY = event.clientY;
-  const startWidth = mainWidth.value;
-  const startHeight = mainHeight.value;
-
-  const doResize = (moveEvent: MouseEvent) => {
-    if (!isResizing) return;
-    requestAnimationFrame(() => {
-      if (direction === 'right' || direction === 'corner') {
-        mainWidth.value = Math.max(300, startWidth + (moveEvent.clientX - startX)); // 设置最小宽度
-      }
-      if (direction === 'bottom' || direction === 'corner') {
-        mainHeight.value = Math.max(200, startHeight + (moveEvent.clientY - startY)); // 设置最小高度
-      }
-
-      localStorage.setItem('windowSize', JSON.stringify({ width: mainWidth.value, height: mainHeight.value }));
-    });
-  };
-
-  const stopResize = () => {
-    isResizing = false;
-    document.body.style.cursor = 'default'; // 恢复鼠标样式
-    window.removeEventListener('mousemove', doResize);
-    window.removeEventListener('mouseup', stopResize);
-  };
-
-  window.addEventListener('mousemove', doResize);
-  window.addEventListener('mouseup', stopResize);
-};
 </script>
 
 <style lang="scss" scoped>
@@ -135,8 +81,6 @@ const startResize = (direction: string, event: MouseEvent) => {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  position: relative;
-  border: 2px solid #ccc; // 添加可见边框
   &-page {
     @apply flex flex-1 overflow-hidden;
   }
@@ -152,33 +96,6 @@ const startResize = (direction: string, event: MouseEvent) => {
   // }
 }
 
-.resize-handle {
-  position: absolute;
-  background: transparent; // 添加背景色以便可见
-  z-index: 9999999999;
-  &.right {
-    top: 0;
-    right: 0;
-    width: 5px;
-    height: 100%;
-    cursor: ew-resize;
-  }
-  &.bottom {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 5px;
-    cursor: ns-resize;
-  }
-  &.corner {
-    bottom: 0;
-    right: 0;
-    width: 8px;
-    height: 8px;
-    cursor: nwse-resize;
-  }
-}
-
 .mobile {
   .layout-main {
     &-page {
@@ -186,23 +103,4 @@ const startResize = (direction: string, event: MouseEvent) => {
     }
   }
 }
-
-// 如果屏幕宽度 大于 1440px 则设置布局为 70% 85%
-@media (min-width: 1240px) {
-  .noElectron {
-    .layout-main {
-      width: 70%;
-      height: 85%;
-      @apply rounded-2xl border-2 border-gray-500 shadow-xl;
-    }
-  }
-}
-
-@media (max-width: 1240px) {
-  .layout-main {
-    width: 100% !important;
-    height: 100% !important;
-    border: none !important;
-  }
-}
 </style>