音乐控制组件

dist-electron/main.js

@@ -1,54 +1,70 @@
-import { app as s, BrowserWindow as l } from "electron";
-import { createRequire as d } from "node:module";
-import { fileURLToPath as c } from "node:url";
-import e from "node:path";
-d(import.meta.url);
-const i = e.dirname(c(import.meta.url));
-process.env.APP_ROOT = e.join(i, "..");
-const t = process.env.VITE_DEV_SERVER_URL, f = e.join(process.env.APP_ROOT, "dist-electron"), p = e.join(process.env.APP_ROOT, "dist");
-process.env.VITE_PUBLIC = t ? e.join(process.env.APP_ROOT, "public") : p;
-let o;
-function r() {
-  if (console.log("Creating window..."), console.log("__dirname", i), o = new l({
-    icon: e.join(process.env.VITE_PUBLIC, "electron-vite.svg"),
+import { app, BrowserWindow } from "electron";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+createRequire(import.meta.url);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+process.env.APP_ROOT = path.join(__dirname, "..");
+const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
+const MAIN_DIST = path.join(process.env.APP_ROOT, "dist-electron");
+const RENDERER_DIST = path.join(process.env.APP_ROOT, "dist");
+process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, "public") : RENDERER_DIST;
+let win;
+function createWindow() {
+  console.log("Creating window...");
+  console.log("__dirname", __dirname);
+  win = new BrowserWindow({
+    icon: path.join(process.env.VITE_PUBLIC, "electron-vite.svg"),
     width: 1920,
     height: 1080,
     webPreferences: {
-      preload: e.join(i, "preload.mjs"),
+      preload: path.join(__dirname, "preload.mjs"),
       // 确保预加载文件路径正确
-      contextIsolation: !0,
+      contextIsolation: true,
       // 如果需要隔离上下文，请确保这符合你的应用需求
-      enableRemoteModule: !1,
+      enableRemoteModule: false,
       // 根据需要启用或禁用
-      nodeIntegration: !0
+      nodeIntegration: true
       // 如果你的 React 项目需要 Node.js 的 API，则为 `true`
     }
-  }), o.webContents.on("did-finish-load", () => {
-    console.log("Window finished loading"), o == null || o.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
-  }), console.log("VITE_DEV_SERVER_URL", t), t)
-    o.loadURL(t).catch((n) => {
-      console.error("Failed to load URL:", n);
+  });
+  win.webContents.on("did-finish-load", () => {
+    console.log("Window finished loading");
+    win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
+  });
+  console.log("VITE_DEV_SERVER_URL", VITE_DEV_SERVER_URL);
+  if (VITE_DEV_SERVER_URL) {
+    win.loadURL(VITE_DEV_SERVER_URL).catch((err) => {
+      console.error("Failed to load URL:", err);
     });
-  else {
-    const n = e.join(i, "../dist/index.html");
-    console.log("Loading index from:", n), o.loadFile(n).catch((a) => {
-      console.error("Failed to load index.html:", a);
-    }), o.webContents.on("did-finish-load", () => {
+  } else {
+    const indexPath = path.join(__dirname, "../dist/index.html");
+    console.log("Loading index from:", indexPath);
+    win.loadFile(indexPath).catch((err) => {
+      console.error("Failed to load index.html:", err);
+    });
+    win.webContents.on("did-finish-load", () => {
       console.log("Page loaded successfully");
     });
   }
 }
-s.on("window-all-closed", () => {
-  process.platform !== "darwin" && (s.quit(), o = null);
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+    win = null;
+  }
 });
-s.on("activate", () => {
-  l.getAllWindows().length === 0 && r();
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
 });
-s.whenReady().then(() => {
-  console.log("App is ready"), r();
+app.whenReady().then(() => {
+  console.log("App is ready");
+  createWindow();
 });
 export {
-  f as MAIN_DIST,
-  p as RENDERER_DIST,
-  t as VITE_DEV_SERVER_URL
+  MAIN_DIST,
+  RENDERER_DIST,
+  VITE_DEV_SERVER_URL
 };

dist-electron/preload.mjs

@@ -1 +1,22 @@
-"use strict";const o=require("electron");o.contextBridge.exposeInMainWorld("ipcRenderer",{on(...e){const[n,r]=e;return o.ipcRenderer.on(n,(t,...c)=>r(t,...c))},off(...e){const[n,...r]=e;return o.ipcRenderer.off(n,...r)},send(...e){const[n,...r]=e;return o.ipcRenderer.send(n,...r)},invoke(...e){const[n,...r]=e;return o.ipcRenderer.invoke(n,...r)}});
+"use strict";
+const electron = require("electron");
+electron.contextBridge.exposeInMainWorld("ipcRenderer", {
+  on(...args) {
+    const [channel, listener] = args;
+    return electron.ipcRenderer.on(channel, (event, ...args2) => listener(event, ...args2));
+  },
+  off(...args) {
+    const [channel, ...omit] = args;
+    return electron.ipcRenderer.off(channel, ...omit);
+  },
+  send(...args) {
+    const [channel, ...omit] = args;
+    return electron.ipcRenderer.send(channel, ...omit);
+  },
+  invoke(...args) {
+    const [channel, ...omit] = args;
+    return electron.ipcRenderer.invoke(channel, ...omit);
+  }
+  // You can expose other APTs you need here.
+  // ...
+});

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.7.7",
     "electron-squirrel-startup": "^1.0.1",
     "react": "^18.2.0",
+    "react-audio-player": "^0.17.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.27.0",
     "react-router-dom": "^6.27.0"
@@ -47,4 +48,4 @@
     "vite-plugin-electron-renderer": "^0.14.5"
   },
   "main": "dist-electron/main.js"
-}
+}

src/components/Home.tsx

@@ -8,16 +8,7 @@ import Settings from './Settings.tsx';
 import HomeHeader from './HomeHeader.tsx'
 import "./Home.css"
 
-const { Header, Footer, Sider, Content } = Layout;
-
-
-const contentStyle = {
-    textAlign: 'center',
-    minHeight: 120,
-    lineHeight: '120px',
-    color: '#333',
-    backgroundColor: '#F7F9FC',
-};
+const { Header, Sider, Content } = Layout;
 
 const items = [
     {
@@ -58,7 +49,7 @@ function Home({ handleLogOut }) {
                         items={items}
                     />
                 </Sider>
-                <Content style={contentStyle}>
+                <Content>
                     <Routes>
                         <Route path="music" element={<Music />} />
                         <Route path="user" element={<User />} />

src/components/Music.css

@@ -6,10 +6,11 @@
 
 .music-list-box {
     margin-top: 1.5%;
+
 }
 
 .music-search-box {
     margin-top: 1.5%;
-    width: 50%;
+    width: 100%;
     margin-right: 0;
 }