✨ feat: 添加网页端可拖动边缘调整窗口大小功能

src/layout/AppLayout.vue

@@ -1,6 +1,21 @@
 <template>
   <div class="layout-page">
-    <div id="layout-main" class="layout-main" :style="{ background: backgroundColor }">
+    <div
+      id="layout-main"
+      class="layout-main"
+      :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">
         <!-- 侧边菜单栏 -->
@@ -39,6 +54,7 @@ import { useStore } from 'vuex';
 
 import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
+import { isElectron } from '@/hooks/MusicHook';
 import homeRouter from '@/router/home';
 import { isMobile } from '@/utils';
 
@@ -66,6 +82,45 @@ 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>
@@ -80,6 +135,8 @@ const backgroundColor = ref('#000');
   height: 100%;
   width: 100%;
   overflow: hidden;
+  position: relative;
+  border: 2px solid #ccc; // 添加可见边框
   &-page {
     @apply flex flex-1 overflow-hidden;
   }
@@ -95,6 +152,33 @@ const backgroundColor = ref('#000');
   // }
 }
 
+.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 {
@@ -104,7 +188,7 @@ const backgroundColor = ref('#000');
 }
 
 // 如果屏幕宽度 大于 1440px 则设置布局为 70% 85%
-@media (min-width: 1440px) {
+@media (min-width: 1240px) {
   .noElectron {
     .layout-main {
       width: 70%;
@@ -113,4 +197,12 @@ const backgroundColor = ref('#000');
     }
   }
 }
+
+@media (max-width: 1240px) {
+  .layout-main {
+    width: 100% !important;
+    height: 100% !important;
+    border: none !important;
+  }
+}
 </style>