feat: 微调界面;设置最小宽度+高度;修复播放器非全屏不显示的问题

dist-electron/main.js

@@ -14,11 +14,20 @@ function createWindow() {
   win = new BrowserWindow({
     // 🔧 禁用原生标题栏（无边框）
     frame: false,
+    // 设置窗口最小大小
+    minWidth: 950,
+    minHeight: 700,
+    // 设置初始窗口大小
+    width: 1e3,
+    height: 800,
     icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"),
     webPreferences: {
       preload: path.join(__dirname$1, "preload.mjs")
     }
   });
+  if (process.env.NODE_ENV === "development") {
+    win.webContents.openDevTools({ mode: "right" });
+  }
   win.webContents.on("did-finish-load", () => {
     win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
   });

electron/main.ts

@@ -30,13 +30,22 @@ function createWindow() {
   win = new BrowserWindow({
     // 🔧 禁用原生标题栏（无边框）
     frame: false,
+    // 设置窗口最小大小
+    minWidth: 950,
+    minHeight: 700,
+    // 设置初始窗口大小
+    width: 1000,
+    height: 800,
 
     icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
     webPreferences: {
       preload: path.join(__dirname, 'preload.mjs'),
     },
-  })
     
+  })
+  if (process.env.NODE_ENV === 'development') {
+    win.webContents.openDevTools({ mode: 'right' }); // 可选：'undocked', 'bottom', 'right'
+  }
   // Test active push message to Renderer-process.
   win.webContents.on('did-finish-load', () => {
     win?.webContents.send('main-process-message', new Date().toLocaleString())

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container" :class="{ 'dark-mode': store.darkMode }">
-    <SettingsOverlay />
     <SideBar />
 
     <main class="main-content">
@@ -49,9 +48,8 @@ import { usePlayerStore } from './stores/playerStore';
 import SideBar from './components/layout/SideBar.vue';
 import WindowControls from './components/layout/WindowControls.vue';
 import PlayerBar from './components/layout/PlayerBar.vue';
-import SettingsOverlay from "./components/layout/SettingsOverlay.vue";
 import { Icon } from '@iconify/vue';
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 
 const store = usePlayerStore();
@@ -172,19 +170,17 @@ html, body, #app {
 .app-container {
   display: grid;
   grid-template-columns: 220px 1fr; /* 侧边栏宽度 | 主内容 */
-  grid-template-rows: 1fr 80px;     /* 主体高度 | 播放器高度 */
+  grid-template-rows: 1fr auto;     /* 主体高度 | 播放器高度 */
   transition: background-color 0.6s ease;
-}
-
-/* 布局结构样式 */
-.app-container {
   height: 100vh;
   width: 100vw;
+  overflow: hidden;
+}
 
-  /* 侧边栏跨越第一行 */
+/* 侧边栏样式 */
 .sidebar {
   grid-column: 1 / 2;
-    grid-row: 1 / 2;
+  grid-row: 1 / 3; /* 侧边栏跨越所有行 */
 }
 
 /* 主内容区 */
@@ -195,6 +191,7 @@ html, body, #app {
   flex-direction: column;
   position: relative;
   background: var(--content-bg);
+  overflow: hidden;
 
   /* 顶部拖拽区 */
   .header-bar {
@@ -204,6 +201,9 @@ html, body, #app {
     align-items: center;
     -webkit-app-region: drag; /* Electron 拖拽 */
     background: var(--header-bg);
+    position: relative;
+    z-index: 1000; /* 确保窗口控制按钮在最上层 */
+    padding-top: 10px; /* 添加上边距，避免贴边 */
     
     .header-left {
       padding: 0 20px;
@@ -242,14 +242,14 @@ html, body, #app {
         }
       }
     }
-    }
 
     /* 路由视图滚动区 */
     .content-scrollable {
       flex: 1;
       overflow-y: auto;
-      padding: 20px 40px;
+      padding: 0;
       background: var(--content-bg);
+      position: relative; /* 确保绝对定位的子元素能正确定位 */
 
       /* 隐藏滚动条但保留功能 */
       &::-webkit-scrollbar { width: 6px; }
@@ -262,6 +262,7 @@ html, body, #app {
       }
     }
   }
+}
 
 /* 底部播放器跨越两列 */
 .footer-player {
@@ -269,7 +270,8 @@ html, body, #app {
   grid-row: 2 / 3;
   z-index: 200;
   background: var(--player-bg);
-  }
+  height: 80px;
+  position: relative;
 }
 
 /* 路由动画 */

src/components/layout/WindowControls.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="window-controls">
-    <div class="settings-btn" @click="store.toggleSettings">
-      <Icon icon="lucide:settings" width="22" />
-    </div>
-
-    <div class="divider"></div>
-
     <div class="traffic-lights">
       <div class="light minimize" @click="handleMinimize"></div>
       <div class="light maximize" @click="handleMaximize"></div>
@@ -15,11 +9,6 @@
 </template>
 
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { usePlayerStore } from '../../stores/playerStore'
-
-const store = usePlayerStore()
-
 // ✅ 调用主进程暴露的 API
 const handleClose = () => {
   window.electronAPI.closeWindow()
@@ -41,28 +30,8 @@ const handleMaximize = async () => {
   align-items: center;
   padding: 0 24px;
   height: 100%;
-  gap: 24px; // 设置和红绿灯之间的距离
   -webkit-app-region: no-drag;
 
-  .settings-btn {
-      cursor: pointer;
-      color: var(--text-tertiary);
-      display: flex;
-      align-items: center;
-      transition: all 0.3s ease;
-
-      &:hover {
-        color: var(--text-primary);
-        transform: rotate(45deg); // 简单的交互动画
-      }
-    }
-
-    .divider {
-      width: 1px;
-      height: 18px;
-      background-color: var(--border-color);
-    }
-
   .traffic-lights {
     display: flex;
     gap: 10px; // 按钮间距拉大