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,73 +170,74 @@ 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 {
+.sidebar {
-    grid-column: 1 / 2;
+  grid-column: 1 / 2;
-    grid-row: 1 / 2;
+  grid-row: 1 / 3; /* 侧边栏跨越所有行 */
-  }
+}
 
-  /* 主内容区 */
+/* 主内容区 */
-  .main-content {
+.main-content {
-    grid-column: 2 / 3;
+  grid-column: 2 / 3;
-    grid-row: 1 / 2;
+  grid-row: 1 / 2;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: var(--content-bg);
+  overflow: hidden;
+
+  /* 顶部拖拽区 */
+  .header-bar {
+    height: 60px;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    -webkit-app-region: drag; /* Electron 拖拽 */
+    background: var(--header-bg);
     position: relative;
-    background: var(--content-bg);
+    z-index: 1000; /* 确保窗口控制按钮在最上层 */
+    padding-top: 10px; /* 添加上边距，避免贴边 */
     
-    /* 顶部拖拽区 */
+    .header-left {
-    .header-bar {
+      padding: 0 20px;
-      height: 60px;
+      -webkit-app-region: no-drag;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      -webkit-app-region: drag; /* Electron 拖拽 */
-      background: var(--header-bg);
       
-      .header-left {
+      .navigation-buttons {
-        padding: 0 20px;
+        display: flex;
-        -webkit-app-region: no-drag;
+        gap: 12px;
         
-        .navigation-buttons {
+        .nav-btn {
           display: flex;
-          gap: 12px;
+          align-items: center;
+          justify-content: center;
+          width: 36px;
+          height: 36px;
+          border: 1px solid var(--border-color);
+          background: var(--bg-primary);
+          color: var(--text-primary);
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.3s ease;
           
-          .nav-btn {
+          &:hover:not(:disabled) {
-            display: flex;
+            background: var(--bg-secondary);
-            align-items: center;
+            border-color: var(--border-light);
-            justify-content: center;
+            transform: translateY(-2px);
-            width: 36px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-            height: 36px;
+          }
-            border: 1px solid var(--border-color);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
           
-            &:hover:not(:disabled) {
+          &:disabled {
-              background: var(--bg-secondary);
+            opacity: 0.4;
-              border-color: var(--border-light);
+            cursor: not-allowed;
-              transform: translateY(-2px);
+            transform: none;
-              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            box-shadow: none;
-            }
-            
-            &:disabled {
-              opacity: 0.4;
-              cursor: not-allowed;
-              transform: none;
-              box-shadow: none;
-            }
           }
         }
       }
@@ -248,8 +247,9 @@ 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,14 +262,16 @@ html, body, #app {
       }
     }
   }
+}
 
-  /* 底部播放器跨越两列 */
+/* 底部播放器跨越两列 */
-  .footer-player {
+.footer-player {
-    grid-column: 1 / 3;
+  grid-column: 1 / 3;
-    grid-row: 2 / 3;
+  grid-row: 2 / 3;
-    z-index: 200;
+  z-index: 200;
-    background: var(--player-bg);
+  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; // 按钮间距拉大