Merge pull request #169 from flystar233/master

style: normalize the settings page

Author: flystar233

electron/ipc/app.ts

@@ -1,4 +1,5 @@
 import { app, ipcMain } from "electron";
+import isDev from "electron-is-dev";
 
 import { autoUpdater } from "../updater";
 import { channel } from "./channel";
@@ -38,4 +39,8 @@ export function registerAppHandlers() {
   ipcMain.handle(channel.app.quitAndInstall, async () => {
     return autoUpdater.quitAndInstall();
   });
+
+  ipcMain.handle(channel.app.isDev, async () => {
+    return isDev;
+  });
 }

electron/ipc/channel.ts

@@ -61,6 +61,7 @@ export const channel = {
     quitAndInstall: "app:quit-and-install",
     openInstallerDirectory: "app:open-installer-directory",
     onBeforeQuit: "app:on-before-quit",
+    isDev: "app:is-dev",
   },
   cookie: {
     get: "cookie:get",
@@ -77,5 +78,6 @@ export const channel = {
     enterFullScreen: "window:enter-full-screen",
     leaveFullScreen: "window:leave-full-screen",
     isFullScreen: "window:is-full-screen",
+    toggleDevTools: "window:toggle-dev-tools",
   },
 };

electron/ipc/window.ts

@@ -45,4 +45,9 @@ export function registerWindowHandlers({ getMainWindow }) {
       createMiniPlayer();
     }
   });
+
+  ipcMain.on(channel.window.toggleDevTools, event => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    win?.webContents.toggleDevTools();
+  });
 }

electron/main.ts

@@ -69,11 +69,6 @@ function createWindow() {
 
   const indexPath = path.resolve(__dirname, "../dist/web/index.html");
   mainWindow.loadFile(indexPath);
-  if (isDev) {
-    mainWindow.webContents.openDevTools({
-      mode: "bottom",
-    });
-  }
 
   // 初始化 Windows 任务栏缩略按钮，并监听播放状态更新
   if (process.platform === "win32") {

electron/preload.ts

@@ -139,6 +139,7 @@ const api: ElectronAPI = {
   },
   // 获取应用版本
   getAppVersion: () => ipcRenderer.invoke(channel.app.getVersion),
+  isDev: () => ipcRenderer.invoke(channel.app.isDev),
   // 检查应用更新
   checkAppUpdate: () => ipcRenderer.invoke(channel.app.checkUpdate),
   // 监听应用更新事件
@@ -228,6 +229,8 @@ const api: ElectronAPI = {
   },
   // 清除文件下载任务列表
   clearMediaDownloadTaskList: () => ipcRenderer.invoke(channel.download.clear),
+  // 切换开发者工具
+  toggleDevTools: () => ipcRenderer.send(channel.window.toggleDevTools),
 };
 
 contextBridge.exposeInMainWorld("electron", api);

shared/settings/app-settings.ts

@@ -4,11 +4,40 @@ export const defaultAppSettings: AppSettings = {
   fontFamily: "system-ui",
   borderRadius: 8,
   downloadPath: "",
-  backgroundColor: "#18181b",
-  contentBackgroundColor: "#1f1f1f",
   primaryColor: "#17c964",
   audioQuality: "auto",
   hiddenMenuKeys: [],
   displayMode: "card",
   ffmpegPath: "",
+  themeMode: "dark",
+  pageTransition: "none",
+  searchMusicOnly: true,
+  showSearchHistory: true,
+};
+
+export const lightThemeColors = {
+  backgroundColor: "#f5f5f5",
+  contentBackgroundColor: "#ffffff",
+  foregroundColor: "#000000",
+};
+
+export const darkThemeColors = {
+  backgroundColor: "#18181b",
+  contentBackgroundColor: "#1f1f1f",
+  foregroundColor: "#ffffff",
 };
+
+/**
+ * 根据主题模式获取对应的颜色配置
+ */
+export function getThemeColors(themeMode: ThemeMode) {
+  return themeMode === "light" ? lightThemeColors : darkThemeColors;
+}
+
+/**
+ * 主题模式选项
+ */
+export const THEME_MODE_OPTIONS = [
+  { key: "light" as const, label: "浅色" },
+  { key: "dark" as const, label: "深色" },
+] as const;

shared/types/app-setting.d.ts

@@ -1,9 +1,9 @@
 type AudioQuality = "auto" | "lossless" | "high" | "medium" | "low";
+type ThemeMode = "light" | "dark";
+type PageTransition = "none" | "fade" | "slide" | "scale" | "slideUp";
 
 interface AppSettings {
   fontFamily: string;
-  backgroundColor: string;
-  contentBackgroundColor: string;
   primaryColor: string;
   borderRadius: number;
   downloadPath?: string;
@@ -13,4 +13,8 @@ interface AppSettings {
   hiddenMenuKeys: string[];
   displayMode: "card" | "list";
   ffmpegPath?: string;
+  themeMode: ThemeMode;
+  pageTransition: PageTransition;
+  searchMusicOnly: boolean;
+  showSearchHistory: boolean;
 }

shared/types/renderer.d.ts

@@ -46,6 +46,8 @@ declare global {
     onPlayerCommand: (cb: (cmd: "prev" | "next" | "toggle") => void) => VoidFunction;
     /** 获取当前应用版本 */
     getAppVersion: () => Promise<string>;
+    /** 判断是否为开发模式 */
+    isDev: () => Promise<boolean>;
     /** 是否支持自动更新 */
     isSupportAutoUpdate: () => boolean;
     /** 检查更新 */
@@ -74,6 +76,8 @@ declare global {
     isFullScreen: () => Promise<boolean>;
     /** 监听窗口全屏状态变化 */
     onWindowFullScreenChange: (cb: (isFullScreen: boolean) => void) => VoidFunction;
+    /** 切换开发者工具 */
+    toggleDevTools: () => void;
     /** 获取下载任务列表 */
     getMediaDownloadTaskList: () => Promise<MediaDownloadTask[]>;
     /** 同步下载任务列表 */

src/app.css

@@ -51,3 +51,38 @@ html, body, #root {
 
   padding: 0;
 }
+
+/* 
+ * 修复暗色主题下 Portal 渲染组件的文本颜色
+ */
+
+/* SelectItem 组件文本颜色 */
+body.dark [data-slot="base"] :is([data-slot="content"], [data-slot="content"] > span) {
+  color: var(--heroui-foreground);
+}
+
+/* Select 下拉菜单中的项目 */
+body.dark [role="listbox"] :is([role="option"], [role="option"] > span) {
+  color: var(--heroui-foreground);
+}
+
+/* 登录弹窗内文本颜色 */
+body.dark .login-modal.text-foreground :is(
+  p,
+  label,
+  input,
+  textarea,
+  span:not([class*="icon"]),
+  div:not(button, [role="button"], [class*="button"])) {
+  color: var(--heroui-foreground);
+}
+
+/* Input 错误消息 */
+body.dark .login-modal.text-foreground :is([data-slot="errorMessage"], [data-slot="errorMessage"] > span) {
+  color: var(--heroui-danger);
+}
+
+/* placeholder */
+body.dark .login-modal.text-foreground :is(input, textarea)::placeholder {
+  color: var(--heroui-default-400);
+}

src/components/confirm-modal/index.tsx

@@ -5,10 +5,11 @@ import { RiErrorWarningLine } from "@remixicon/react";
 import { useShallow } from "zustand/shallow";
 
 import { useModalStore } from "@/store/modal";
+import { useSettings } from "@/store/settings";
 
-type ConfirmModalType = "warning" | "danger";
+type ConfirmModalType = "warning" | "danger" | "primary";
 
-const colorMap: Record<ConfirmModalType, string> = {
+const colorMap: Record<Exclude<ConfirmModalType, "primary">, string> = {
   warning: "#F5A524",
   danger: "#dc1258",
 };
@@ -35,8 +36,17 @@ const ConfirmModal = () => {
     cancelText = "取消",
   } = confirmModalData || {};
 
+  const primaryColor = useSettings(s => s.primaryColor);
   const [loading, setLoading] = useState(false);
 
+  // 根据类型获取图标颜色
+  const getIconColor = () => {
+    if (type === "primary") {
+      return primaryColor;
+    }
+    return colorMap[type as Exclude<ConfirmModalType, "primary">];
+  };
+
   const handleClose = () => onConfirmModalOpenChange(false);
 
   const handleConfirm = async () => {
@@ -62,8 +72,8 @@ const ConfirmModal = () => {
       <ModalContent>
         {() => (
           <>
-            <ModalHeader className="flex items-center gap-1">
-              <RiErrorWarningLine color={colorMap[type]} />
+            <ModalHeader className="flex items-center gap-1 [&>span]:text-[var(--heroui-foreground)]">
+              <RiErrorWarningLine color={getIconColor()} />
               <span>{title}</span>
             </ModalHeader>
             {description ? (
@@ -75,7 +85,7 @@ const ConfirmModal = () => {
               <Button variant="light" onPress={handleClose} isDisabled={loading}>
                 {cancelText}
               </Button>
-              <Button color={type} onPress={handleConfirm} isLoading={loading}>
+              <Button color={type === "primary" ? "primary" : type} onPress={handleConfirm} isLoading={loading}>
                 {confirmText}
               </Button>
             </ModalFooter>