✨ feat: 加个新模式

Author: imsyy

components.d.ts

@@ -82,6 +82,7 @@ declare module 'vue' {
     NGi: typeof import('naive-ui')['NGi']
     NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
     NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
     NH1: typeof import('naive-ui')['NH1']
     NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
@@ -124,6 +125,7 @@ declare module 'vue' {
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
+    NUpload: typeof import('naive-ui')['NUpload']
     NVirtualList: typeof import('naive-ui')['NVirtualList']
     OtherSetting: typeof import('./src/components/Setting/OtherSetting.vue')['default']
     PersonalFM: typeof import('./src/components/Player/PersonalFM.vue')['default']
@@ -157,6 +159,7 @@ declare module 'vue' {
     SongUnlockManager: typeof import('./src/components/Modal/Setting/SongUnlockManager.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/Setting/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/components/Card/SongCard.vue

@@ -420,6 +420,7 @@ const localCover = async (show: boolean) => {
     justify-content: center;
     width: 40px;
     .n-icon {
+      color: var(--primary-hex);
       transition: transform 0.3s;
       cursor: pointer;
       &:hover {

src/components/Global/Provider.vue

@@ -37,11 +37,9 @@ import {
   useMessage,
   useNotification,
   GlobalThemeOverrides,
-  NButton,
 } from "naive-ui";
 import { useSettingStore, useStatusStore } from "@/stores";
 import { setColorSchemes } from "@/utils/color";
-import { openLink } from "@/utils/helper";
 // import { rgbToHex } from "@imsyy/color-utils";
 import themeColor from "@/assets/data/themeColor.json";
 
@@ -279,43 +277,5 @@ watchDebounced(
 
 onMounted(() => {
   changeGlobalTheme();
-  
-  // 增加启动次数
-  settingStore.appLaunchCount++;
-
-  // 检查是否需要弹出 Star 提示（第 100 次启动且未隐藏）
-  if (settingStore.appLaunchCount === 100 && !settingStore.hideStarPopup) {
-    const dialog = window.$dialog.create({
-      title: "🎉 感谢",
-      content: "SPlayer已经被打开了100次，喜欢此项目请考虑在 Github 仓库给作者一个 Star 哦",
-      type: "success",
-      closable: false,
-      maskClosable: false,
-      action: () => h("div", { style: "display: flex; justify-content: flex-end; gap: 12px;" }, [
-        h(NButton, {
-          size: "small",
-          onClick: () => {
-            settingStore.hideStarPopup = true;
-            window.$message.success("已永久关闭此类弹窗");
-            dialog.destroy();
-          }
-        }, { default: () => "永久关闭此类弹窗" }),
-        h(NButton, {
-          size: "small",
-          onClick: () => {
-            dialog.destroy();
-          }
-        }, { default: () => "我知道了" }),
-        h(NButton, {
-          type: "primary",
-          size: "small",
-          onClick: () => {
-            openLink("https://github.com/imsyy/SPlayer");
-            dialog.destroy();
-          }
-        }, { default: () => "去 Github 支持" })
-      ])
-    });
-  }
 });
 </script>

src/components/Layout/Menu.vue

@@ -34,7 +34,7 @@ import { renderIcon } from "@/utils/helper";
 import { openCreatePlaylist } from "@/utils/modal";
 import { debounce } from "lodash-es";
 import { isLogin } from "@/utils/auth";
-import { isDevBuild, isElectron } from "@/utils/env";
+import { isElectron } from "@/utils/env";
 import { usePlayerController } from "@/core/player/PlayerController";
 
 const router = useRouter();
@@ -105,7 +105,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
               h(NText, null, () => "我喜欢的音乐"),
               !settingStore.hideHeartbeatMode
                 ? h(NButton, {
-                    type: "tertiary",
+                    type: "primary",
                     round: true,
                     strong: true,
                     secondary: true,
@@ -145,7 +145,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
               },
               () => "下载管理",
             ),
-          show: isDevBuild && isElectron && !settingStore.hideDownload,
+          show: statusStore.isDeveloperMode && isElectron && !settingStore.hideDownload,
           icon: renderIcon("Download"),
         },
         {

src/components/Menu/SongListMenu.vue

@@ -33,7 +33,6 @@ import { songUrl } from "@/api/song";
 import { dailyRecommendDislike } from "@/api/rec";
 import { formatSongsList } from "@/utils/format";
 import { usePlayerController } from "@/core/player/PlayerController";
-import { isDevBuild } from "@/utils/env";
 
 const emit = defineEmits<{ removeSong: [index: number[]] }>();
 
@@ -251,14 +250,14 @@ const openDropdown = (
         {
           key: "download",
           label: "下载歌曲",
-          show: isDevBuild && !isLocal && type === "song" && !isDownloading,
+          show: statusStore.isDeveloperMode && !isLocal && type === "song" && !isDownloading,
           props: { onClick: () => openDownloadSong(song) },
           icon: renderIcon("Download"),
         },
         {
           key: "retry-download",
           label: "重试下载",
-          show: isDevBuild && isDownloading,
+          show: statusStore.isDeveloperMode && isDownloading,
           props: { onClick: () => downloadManager.retryDownload(song.id) },
           icon: renderIcon("Refresh"),
         },

src/components/Modal/BatchList.vue

@@ -41,7 +41,7 @@
       <n-flex class="menu">
         <!-- 批量下载 -->
         <n-button
-          v-if="isDevBuild"
+          v-if="statusStore.isDeveloperMode"
           :disabled="!checkCount || isLocal"
           type="primary"
           strong
@@ -111,11 +111,11 @@ import { isArray, isObject } from "lodash-es";
 import { openPlaylistAdd } from "@/utils/modal";
 import { deleteSongs } from "@/utils/auth";
 import { NInput, NInputNumber, NButton, NText, NFlex } from "naive-ui";
-import { useLocalStore } from "@/stores";
+import { useLocalStore, useStatusStore } from "@/stores";
 import { openDownloadSongs } from "@/utils/modal";
-import { isDevBuild } from "@/utils/env";
 
 const localStore = useLocalStore();
+const statusStore = useStatusStore();
 
 interface DataType {
   key?: number;

src/components/Player/MainPlayer.vue

@@ -201,7 +201,6 @@ import {
 } from "@/utils/modal";
 import { useSongManager } from "@/core/player/SongManager";
 import { usePlayerController } from "@/core/player/PlayerController";
-import { isDevBuild } from "@/utils/env";
 
 const router = useRouter();
 const dataStore = useDataStore();
@@ -290,7 +289,7 @@ const songMoreOptions = computed<DropdownOption[]>(() => {
     {
       key: "download",
       label: "下载歌曲",
-      show: isDevBuild && !isLocal && isSong,
+      show: statusStore.isDeveloperMode && !isLocal && isSong,
       props: { onClick: () => openDownloadSong(musicStore.playSong) },
       icon: renderIcon("Download"),
     },

src/components/Setting/AboutSetting.vue

@@ -6,8 +6,8 @@
         <n-flex align="center" class="about">
           <SvgIcon name="SPlayer" size="26" />
           <n-text class="logo-name">SPlayer</n-text>
-          <n-tag v-if="isDevBuild" size="small" type="warning" round> DEV </n-tag>
-          <n-tag :bordered="false" size="small" type="primary" round>
+          <n-tag v-if="statusStore.isDeveloperMode" size="small" type="warning" round> DEV </n-tag>
+          <n-tag :bordered="false" size="small" type="primary" round @click="openDeveloperMode">
             {{ packageJson.version }}
           </n-tag>
         </n-flex>
@@ -102,11 +102,14 @@ import type { UpdateLogType } from "@/types/main";
 import { getUpdateLog, openLink } from "@/utils/helper";
 import { debounce } from "lodash-es";
 import { useStatusStore } from "@/stores";
+import { isElectron } from "@/utils/env";
 import packageJson from "@/../package.json";
-import { isDevBuild, isElectron } from "@/utils/env";
 
 const statusStore = useStatusStore();
 
+// 开发者模式点击次数
+const developerModeClickCount = ref(0);
+
 // 特别鸣谢
 const contributors = [
   {
@@ -195,6 +198,23 @@ const jumpLink = (e: MouseEvent) => {
 // 获取更新日志
 const getUpdateData = async () => (updateData.value = await getUpdateLog());
 
+// 打开开发者模式
+const openDeveloperMode = useThrottleFn(() => {
+  developerModeClickCount.value++;
+  if (developerModeClickCount.value >= 5 && developerModeClickCount.value < 8) {
+    if (statusStore.developerMode) {
+      window.$message.info("已处于开发者模式！");
+      developerModeClickCount.value = 0;
+      return;
+    }
+    window.$message.info(`再点击${8 - developerModeClickCount.value}次以开启开发者模式`);
+  } else if (developerModeClickCount.value >= 8) {
+    developerModeClickCount.value = 0;
+    statusStore.developerMode = true;
+    window.$message.warning("开发者模式已开启，请谨慎使用！");
+  }
+}, 100);
+
 onMounted(getUpdateData);
 </script>
 

src/components/Setting/GeneralSetting.vue

@@ -29,8 +29,8 @@
       </n-card>
       <n-card class="set-item">
         <div class="label">
-          <n-text class="name">全局主题色</n-text>
-          <n-text class="tip" :depth="3">更改全局主题色</n-text>
+          <n-text class="name">主题配置</n-text>
+          <n-text class="tip" :depth="3">更改主题色或自定义图片</n-text>
         </div>
         <n-select
           v-model:value="settingStore.themeColorType"
@@ -49,9 +49,9 @@
           </div>
           <n-color-picker
             v-model:value="settingStore.themeCustomColor"
-            class="set"
             :show-alpha="false"
             :modes="['hex']"
+            class="set"
           />
         </n-card>
       </n-collapse-transition>
@@ -70,7 +70,7 @@
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">全局动态取色</n-text>
-          <n-text class="tip" :depth="3">主题色是否跟随封面，目前感觉不好看</n-text>
+          <n-text class="tip" :depth="3">主题色是否跟随封面，开启后自定义主题色将失效</n-text>
         </div>
         <n-switch
           v-model:value="settingStore.themeFollowCover"

src/components/Setting/LocalSetting.vue

@@ -95,7 +95,7 @@
         <n-card class="set-item">
           <div class="label">
             <n-text class="name">缓存大小上限</n-text>
-            <n-text class="tip" :depth="3">达到上限后将清理最旧的缓存，数值可以是小数，最低 2GB</n-text>
+            <n-text class="tip" :depth="3">达到上限后将清理最旧的缓存，可以是小数，最低 2GB</n-text>
           </div>
           <n-input-group class="set">
             <n-input-number
@@ -105,31 +105,35 @@
               :max="9999"
               :style="{
                 width: cacheLimited ? '55%' : '0%',
-                transition: isMounted ? 'width 0.3s ease' : 'none',
-              }"
-              @update:value="(value) => {
-                cacheLimit = value ?? 2;
-                changeCacheLimit(cacheLimit);
+                transition: 'width 0.3s',
               }"
+              @update:value="
+                (value) => {
+                  cacheLimit = value ?? 2;
+                  changeCacheLimit(cacheLimit);
+                }
+              "
             />
             <n-select
               v-model:value="cacheLimited"
               :options="[
                 { label: '不限制', value: 0 },
-                { label: cacheLimited === 0 ? '输入数值 (单位 GB)' : 'GB', value: 1 },
+                { label: cacheLimited === 0 ? '自定义大小 (GB)' : 'GB', value: 1 },
               ]"
               :style="{
                 width: cacheLimited ? '45%' : '100%',
-                transition: isMounted ? 'width 0.3s ease' : 'none',
+                transition: 'width 0.3s',
               }"
-              @update:value="(value) => {
-                if (value === 0) {
-                  changeCacheLimit(0);
-                } else {
-                  if (cacheLimit === 0) cacheLimit = 2;
-                  changeCacheLimit(cacheLimit);
+              @update:value="
+                (value) => {
+                  if (value === 0) {
+                    changeCacheLimit(0);
+                  } else {
+                    if (cacheLimit === 0) cacheLimit = 2;
+                    changeCacheLimit(cacheLimit);
+                  }
                 }
-              }"
+              "
             />
           </n-input-group>
         </n-card>
@@ -158,7 +162,7 @@
         <n-button type="error" strong secondary @click="confirmClearCache"> 清空缓存 </n-button>
       </n-card>
     </div>
-    <div v-if="isDevBuild" class="set-list">
+    <div v-if="statusStore.isDeveloperMode" class="set-list">
       <n-h3 prefix="bar"> 下载配置 </n-h3>
       <n-card class="set-item">
         <div class="label">
@@ -309,18 +313,16 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from "@/stores";
+import { useSettingStore, useStatusStore } from "@/stores";
 import { changeLocalLyricPath, changeLocalMusicPath, formatFileSize } from "@/utils/helper";
 import { songLevelData, getSongLevelsData } from "@/utils/meta";
 import { useCacheManager, type CacheResourceType } from "@/core/resource/CacheManager";
 import { pick } from "lodash-es";
-import { isDevBuild } from "@/utils/env";
 
+const statusStore = useStatusStore();
 const settingStore = useSettingStore();
 const cacheManager = useCacheManager();
 
-const isMounted = ref<boolean>(false);
-
 const cachePath = ref<string>("");
 const cacheSizeDisplay = ref<string>("--");
 const cacheLimit = ref<number>(10); // 本地状态
@@ -470,7 +472,6 @@ onMounted(async () => {
     console.error("读取缓存路径失败:", error);
   }
   await loadCacheSize();
-  isMounted.value = true;
 });
 </script>