Merge pull request #770 from imsyy/dev-theme

✨ feat: 新增自定义背景图

Author: imsyy

components.d.ts

@@ -148,6 +148,7 @@ declare module 'vue' {
     Provider: typeof import('./src/components/Global/Provider.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScalingModal: typeof import('./src/components/Modal/ScalingModal.vue')['default']
     SearchDefault: typeof import('./src/components/Search/SearchDefault.vue')['default']
     SearchInp: typeof import('./src/components/Search/SearchInp.vue')['default']
     SearchInpMenu: typeof import('./src/components/Menu/SearchInpMenu.vue')['default']
@@ -168,6 +169,7 @@ declare module 'vue' {
     StreamingSetting: typeof import('./src/components/Setting/StreamingSetting.vue')['default']
     SvgIcon: typeof import('./src/components/Global/SvgIcon.vue')['default']
     TextContainer: typeof import('./src/components/Global/TextContainer.vue')['default']
+    ThemeConfig: typeof import('./src/components/Modal/ThemeConfig.vue')['default']
     ThirdSetting: typeof import('./src/components/Setting/ThirdSetting.vue')['default']
     UpdateApp: typeof import('./src/components/Modal/UpdateApp.vue')['default']
     UpdatePlaylist: typeof import('./src/components/Modal/UpdatePlaylist.vue')['default']

src/assets/data/themeColor.json

@@ -4,50 +4,105 @@
     "name": "默认",
     "color": "#fe7971"
   },
-  "orange": {
-    "label": "orange",
-    "name": "橙色",
-    "color": "#ff8c00"
-  },
-  "blue": {
-    "label": "blue",
-    "name": "蓝色",
-    "color": "#3b5998"
+  "red": {
+    "label": "red",
+    "name": "红色",
+    "color": "#F44336"
   },
   "pink": {
     "label": "pink",
     "name": "粉色",
-    "color": "#e91e63"
+    "color": "#E91E63"
   },
-  "brown": {
-    "label": "brown",
-    "name": "棕色",
-    "color": "#795548"
+  "purple": {
+    "label": "purple",
+    "name": "紫色",
+    "color": "#9C27B0"
+  },
+  "deepPurple": {
+    "label": "deepPurple",
+    "name": "深紫色",
+    "color": "#673AB7"
   },
   "indigo": {
     "label": "indigo",
     "name": "靛青色",
-    "color": "#3f51b5"
+    "color": "#3F51B5"
+  },
+  "blue": {
+    "label": "blue",
+    "name": "蓝色",
+    "color": "#2196F3"
+  },
+  "lightBlue": {
+    "label": "lightBlue",
+    "name": "淡蓝色",
+    "color": "#03A9F4"
+  },
+  "cyan": {
+    "label": "cyan",
+    "name": "青色",
+    "color": "#00BCD4"
+  },
+  "teal": {
+    "label": "teal",
+    "name": "水鸭青",
+    "color": "#009688"
   },
   "green": {
     "label": "green",
     "name": "绿色",
-    "color": "#2ecc71"
+    "color": "#4CAF50"
   },
-  "purple": {
-    "label": "purple",
-    "name": "紫色",
-    "color": "#9c27b0"
+  "lightGreen": {
+    "label": "lightGreen",
+    "name": "浅绿色",
+    "color": "#8BC34A"
+  },
+  "lime": {
+    "label": "lime",
+    "name": "柠檬绿",
+    "color": "#CDDC39"
   },
   "yellow": {
     "label": "yellow",
     "name": "黄色",
-    "color": "#FBC02D"
+    "color": "#FFEB3B"
   },
-  "teal": {
-    "label": "teal",
-    "name": "青色",
-    "color": "#009688"
+  "amber": {
+    "label": "amber",
+    "name": "琥珀色",
+    "color": "#FFC107"
+  },
+  "orange": {
+    "label": "orange",
+    "name": "橙色",
+    "color": "#FF9800"
+  },
+  "deepOrange": {
+    "label": "deepOrange",
+    "name": "深橙色",
+    "color": "#FF5722"
+  },
+  "brown": {
+    "label": "brown",
+    "name": "棕色",
+    "color": "#795548"
+  },
+  "grey": {
+    "label": "grey",
+    "name": "灰色",
+    "color": "#9E9E9E"
+  },
+  "blueGrey": {
+    "label": "blueGrey",
+    "name": "蓝灰色",
+    "color": "#607D8B"
+  },
+  "solid": {
+    "label": "solid",
+    "name": "纯色",
+    "color": "#9e9e9e"
   },
   "custom": {
     "label": "custom",

src/assets/icons/Palette.svg

@@ -39,7 +39,7 @@ import {
   GlobalThemeOverrides,
 } from "naive-ui";
 import { useSettingStore, useStatusStore } from "@/stores";
-import { setColorSchemes } from "@/utils/color";
+import { setColorSchemes, MONOTONOUS_THEME } from "@/utils/color";
 import { useCustomCode } from "@/composables/useCustomCode";
 // import { rgbToHex } from "@imsyy/color-utils";
 import themeColor from "@/assets/data/themeColor.json";
@@ -59,6 +59,8 @@ let lastThemeCacheKey: string | null = null;
 
 // 获取明暗模式
 const theme = computed(() => {
+  // 图片模式强制深色
+  if (statusStore.themeBackgroundMode === "image") return darkTheme;
   return settingStore.themeMode === "auto"
     ? // 跟随系统
       osTheme.value === "dark"
@@ -73,19 +75,35 @@ const theme = computed(() => {
 // 获取当前主题色数据
 const getThemeMainColor = () => {
   const themeType = theme.value ? "dark" : "light";
+  // 背景图模式
+  if (statusStore.themeBackgroundMode === "image") {
+    const { themeColor, useCustomColor, customColor, isSolid } = statusStore.backgroundConfig;
+    // 纯色覆盖
+    if (isSolid) return setColorSchemes(MONOTONOUS_THEME, themeType);
+    const color = useCustomColor ? customColor : themeColor;
+    // 强制使用 dark 模式生成
+    if (color) return setColorSchemes(color, "dark");
+  }
+  // 封面模式
   if (settingStore.themeFollowCover && statusStore.songCoverTheme) {
     const coverColor = statusStore.songCoverTheme;
     if (!coverColor) return {};
     return setColorSchemes(coverColor, themeType);
+  } else if (settingStore.themeColorType === "solid") {
+    // 纯色预设
+    return setColorSchemes(MONOTONOUS_THEME, themeType);
   } else if (settingStore.themeColorType !== "custom") {
+    // 预设模式
     return setColorSchemes(themeColor[settingStore.themeColorType].color, themeType);
   } else {
+    // 自定义模式
     return setColorSchemes(settingStore.themeCustomColor, themeType);
   }
 };
 
 // 更改全局主题
 const changeGlobalTheme = () => {
+  applyThemeBackgroundMode();
   try {
     // 获取配色方案
     const colorSchemes = getThemeMainColor();
@@ -261,6 +279,15 @@ const NaiveProviderContent = defineComponent({
   },
 });
 
+// 应用背景模式类名
+const applyThemeBackgroundMode = () => {
+  if (statusStore.themeBackgroundMode === "image") {
+    document.documentElement.classList.add("image");
+  } else {
+    document.documentElement.classList.remove("image");
+  }
+};
+
 // 监听设置更改
 watch(
   () => [
@@ -269,6 +296,11 @@ watch(
     settingStore.themeGlobalColor,
     settingStore.globalFont,
     statusStore.songCoverTheme?.main,
+    statusStore.themeBackgroundMode,
+    statusStore.backgroundConfig.themeColor,
+    statusStore.backgroundConfig.useCustomColor,
+    statusStore.backgroundConfig.customColor,
+    statusStore.backgroundConfig.isSolid,
     theme.value,
   ],
   () => changeGlobalTheme(),

src/components/Global/Provider.vue

@@ -26,7 +26,7 @@
         <!-- 用户 -->
         <User v-if="settingStore.useOnlineService" />
         <!-- 设置菜单 -->
-        <n-dropdown :options="setOptions" trigger="click" show-arrow @select="setSelect">
+        <n-dropdown :options="setOptions" trigger="click" @select="setSelect">
           <n-button :focusable="false" title="设置" tertiary circle>
             <template #icon>
               <SvgIcon name="Settings" />
@@ -131,14 +131,15 @@
 
 <script setup lang="ts">
 import type { DropdownOption } from "naive-ui";
-import { useSettingStore } from "@/stores";
+import { useSettingStore, useStatusStore } from "@/stores";
 import { renderIcon } from "@/utils/helper";
-import { openSetting } from "@/utils/modal";
+import { openSetting, openThemeConfig, openScalingModal } from "@/utils/modal";
 import { isDev, isElectron } from "@/utils/env";
 import { useMobile } from "@/composables/useMobile";
 
 const router = useRouter();
 const settingStore = useSettingStore();
+const statusStore = useStatusStore();
 const { isDesktop, isSmallScreen } = useMobile();
 
 const showCloseModal = ref(false);
@@ -150,23 +151,6 @@ const useBorderless = ref(true);
 const isMax = ref(false);
 // 是否显示侧边栏
 const showAside = ref(false);
-// 当前缩放系数
-const currentZoomFactor = ref(1.0);
-
-// 缩放系数选项
-const zoomFactorList = [0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.75, 2];
-
-// 缩放选项列表
-const zoomOptions = computed<DropdownOption[]>(() =>
-  zoomFactorList.map((factor) => {
-    const isSelected = Math.abs(currentZoomFactor.value - factor) < 0.01;
-    return {
-      label: `${Math.round(factor * 100)}%`,
-      key: `zoom-${factor}`,
-      icon: isSelected ? renderIcon("Check") : undefined,
-    };
-  }),
-);
 
 // 最小化
 const min = () => window.electron.ipcRenderer.send("win-min");
@@ -209,6 +193,7 @@ const setOptions = computed<DropdownOption[]>(() => [
           ? "深色模式"
           : "跟随系统",
     key: "themeMode",
+    disabled: !!statusStore.backgroundImageUrl,
     icon: renderIcon(
       settingStore.themeMode === "auto"
         ? "LightTheme"
@@ -217,12 +202,16 @@ const setOptions = computed<DropdownOption[]>(() => [
           : "AutoTheme",
     ),
   },
+  {
+    label: "主题配置",
+    key: "themeConfig",
+    icon: renderIcon("Palette"),
+  },
   {
     key: "zoom",
     label: "界面缩放",
     icon: renderIcon("ZoomIn"),
     show: isElectron,
-    children: zoomOptions.value,
   },
   {
     key: "divider-1",
@@ -255,22 +244,18 @@ const setSelect = (key: string) => {
     case "themeMode":
       settingStore.setThemeMode();
       break;
+    case "themeConfig":
+      openThemeConfig();
+      break;
+    case "zoom":
+      openScalingModal();
+      break;
     case "setting":
       openSetting();
       break;
     case "dev-tools":
       window.electron.ipcRenderer.send("open-dev-tools");
       break;
-    default:
-      // 处理缩放选项
-      if (key.startsWith("zoom-")) {
-        const factor = parseFloat(key.replace("zoom-", ""));
-        if (!isNaN(factor)) {
-          window.electron.ipcRenderer.invoke("set-zoom-factor", factor);
-          currentZoomFactor.value = factor;
-        }
-      }
-      break;
   }
 };
 
@@ -280,8 +265,6 @@ onMounted(async () => {
     // 获取无边框窗口配置
     const windowConfig = await window.api.store.get("window");
     useBorderless.value = windowConfig?.useBorderless ?? true;
-    // 获取当前缩放系数
-    currentZoomFactor.value = await window.electron.ipcRenderer.invoke("get-zoom-factor");
     // 获取窗口状态
     isMax.value = window.electron.ipcRenderer.sendSync("win-state");
     window.electron.ipcRenderer.on("win-state-change", (_event, value: boolean) => {

src/components/Layout/Nav.vue

@@ -469,7 +469,7 @@ onBeforeUnmount(() => {
     padding: 8px 12px;
     // margin-right: 4px;
     border: 1px solid transparent;
-    background-color: var(--background-hex);
+    // background-color: var(--background-hex);
     .n-text {
       opacity: 0.6;
     }