✨ feat: 添加设置页面 可配置代理开关

app.js

@@ -1,5 +1,7 @@
 const { app, BrowserWindow, ipcMain, Tray, Menu, globalShortcut, nativeImage } = require('electron')
 const path = require('path')
+const Store = require('electron-store');
+const setJson = require('./electron/set.json')
 
 let mainWin = null
 function createWindow() {
@@ -50,6 +52,13 @@ function createWindow() {
       win.show()
     }
   })
+
+  const set = store.get('set')
+  // store.set('set', setJson)
+
+  if (!set) {
+    store.set('set', setJson)
+  }
 }
 
 app.whenReady().then(createWindow)
@@ -104,3 +113,21 @@ ipcMain.on('mini-tray', (event) => {
   const win = BrowserWindow.fromWebContents(event.sender)
   win.hide()
 })
+
+// 重启
+ipcMain.on('restart', () => {
+  app.relaunch()
+  app.exit(0)
+})
+
+const store = new Store();
+
+// 定义ipcRenderer监听事件
+ipcMain.on('setStore', (_, key, value) => {
+  store.set(key, value)
+})
+
+ipcMain.on('getStore', (_, key) => {
+  let value = store.get(key)
+  _.returnValue = value || ""
+})

components.d.ts

@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AlbumsItem: typeof import('./src/components/common/AlbumsItem.vue')['default']
     MPop: typeof import('./src/components/common/MPop.vue')['default']
     MusicList: typeof import('./src/components/MusicList.vue')['default']
     NAvatar: typeof import('naive-ui')['NAvatar']
@@ -23,8 +22,8 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NPopover: typeof import('naive-ui')['NPopover']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTooltip: typeof import('naive-ui')['NTooltip']
     PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default']
     PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default']

electron/preload.js

@@ -6,4 +6,20 @@ contextBridge.exposeInMainWorld('electronAPI', {
   close: () => ipcRenderer.send('close-window'),
   dragStart: (data) => ipcRenderer.send('drag-start', data),
   miniTray: () => ipcRenderer.send('mini-tray'),
-})
+  restart: () => ipcRenderer.send('restart'),
+})
+
+const electronHandler = {
+  ipcRenderer: {
+    setStoreValue: (key, value) => {
+      ipcRenderer.send("setStore", key, value)
+    },
+
+    getStoreValue(key) {
+      const resp = ipcRenderer.sendSync("getStore", key)
+      return resp
+    },
+  }
+}
+
+contextBridge.exposeInMainWorld('electron', electronHandler)

electron/set.json

@@ -0,0 +1,5 @@
+{
+  "version": "0.0.1",
+  "isProxy": false,
+  "author": "alger"
+}

package.json

@@ -19,6 +19,7 @@
     "@vueuse/core": "^10.7.1",
     "autoprefixer": "^9.8.6",
     "axios": "^0.21.1",
+    "electron-store": "^8.1.0",
     "lodash": "^4.17.21",
     "naive-ui": "^2.34.4",
     "postcss": "^7.0.36",

src/App.vue

@@ -11,15 +11,20 @@
 
 <script lang="ts" setup>
 import { darkTheme } from 'naive-ui'
-import { useStore } from 'vuex'
+import store from '@/store'
 
 const audio = ref<HTMLAudioElement | null>(null)
 
-const store = useStore()
 const playMusicUrl = computed(() => store.state.playMusicUrl as string)
 // 是否播放
 const play = computed(() => store.state.play as boolean)
-
+const windowData = window as any
+onMounted(()=>{
+  if(windowData.electron){
+    const setData = windowData.electron.ipcRenderer.getStoreValue('set');
+    store.commit('setSetData', setData)
+  }
+})
 </script>
 
 <style lang="scss" scoped >

src/layout/components/SearchBar.vue

@@ -175,6 +175,10 @@ const options = [
     {
         label: '退出登录',
         key: 'logout'
+    },
+    {
+      label: '设置',
+      key: 'set'
     }
 ]
 
@@ -208,6 +212,9 @@ const selectItem = async (key: any) => {
         case 'login':
             router.push("/login")
             break;
+        case 'set':
+            router.push("/set")
+            break;
     }
 }
 

src/layout/components/TitleBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="title-bar" @mousedown="drag">
+  <div id="title-bar" @mousedown="drag" v-if="isElectron">
     <div id="title">Alger Music</div>
     <div id="buttons">
       <button @click="minimize">
@@ -19,13 +19,18 @@
 import { useDialog } from 'naive-ui'
 
 const dialog = useDialog()
+const windowData = window as any
+
+const isElectron = computed(() => {
+  return !!windowData.electronAPI.minimize
+})
 
 const minimize = () => {
-  window.electronAPI.minimize()
+  windowData.electronAPI.minimize()
 }
 
 const maximize = () => {
-  window.electronAPI.maximize()
+  windowData.electronAPI.maximize()
 }
 
 const close = () => {
@@ -35,16 +40,16 @@ const close = () => {
     positiveText: '最小化',
     negativeText: '关闭',
     onPositiveClick: () => {
-      window.electronAPI.miniTray()
+      windowData.electronAPI.miniTray()
     },
     onNegativeClick: () => {
-      window.electronAPI.close()
+      windowData.electronAPI.close()
     }
   })
 }
 
-const drag = (event: HTMLElement) => {
-  window.electronAPI.dragStart(event)
+const drag = (event: MouseEvent) => {
+  windowData.electronAPI.dragStart(event)
 }
 </script>
 

src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import AppLayout from '@/layout/AppLayout.vue'
 import homeRouter from '@/router/home'
 
-let loginRouter = {
+const loginRouter = {
   path: '/login',
   name: 'login',
   mate: {
@@ -13,11 +13,22 @@ let loginRouter = {
   component: () => import('@/views/login/index.vue'),
 }
 
+const setRouter = {
+  path: '/set',
+  name: 'set',
+  mate: {
+    keepAlive: true,
+    title: '设置',
+    icon: 'icon-Home',
+  },
+  component: () => import('@/views/set/index.vue'),
+}
+
 const routes = [
   {
     path: '/',
     component: AppLayout,
-    children: [...homeRouter, loginRouter],
+    children: [...homeRouter, loginRouter, setRouter],
   },
 ]
 

src/store/index.ts

@@ -13,6 +13,7 @@ interface State {
   user: any
   playList: SongResult[]
   playListIndex: number
+  setData: any
 }
 
 const state: State = {
@@ -24,8 +25,11 @@ const state: State = {
   user: null,
   playList: [],
   playListIndex: 0,
+  setData: null,
 }
 
+const windowData = window as any
+
 const mutations = {
   setMenus(state: State, menus: any[]) {
     state.menus = menus
@@ -62,6 +66,13 @@ const mutations = {
       (state.playListIndex - 1 + state.playList.length) % state.playList.length
     await updatePlayMusic(state)
   },
+  async setSetData(state: State, setData: any) {
+    state.setData = setData
+    windowData.electron.ipcRenderer.setStoreValue(
+      'set',
+      JSON.parse(JSON.stringify(setData))
+    )
+  },
 }
 
 const getSongUrl = async (id: number) => {

src/utils/index.ts

@@ -36,8 +36,14 @@ export const formatNumber = (num: any) => {
   }
   return (num / 100000000).toFixed(1) + '亿'
 }
-
+const windowData = window as any
 export const getIsMc = () => {
+  if (!windowData.electron) {
+    return false
+  }
+  if (windowData.electron.ipcRenderer.getStoreValue('set').isProxy) {
+    return true
+  }
   return false
 }
 const ProxyUrl =

src/views/set/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="set-page">
+    <div class="set-item">
+      <div>
+        <div class="set-item-title">代理</div>
+        <div class="set-item-content">无法听音乐时打开</div>
+      </div>
+      <n-switch v-model:value="setData.isProxy"/>
+    </div>
+    <div class="set-item">
+      <div>
+        <div class="set-item-title">版本</div>
+        <div class="set-item-content">当前已是最新版本</div>
+      </div>
+      <div>{{ setData.version }}</div>
+    </div>
+    <div class="set-item">
+      <div>
+        <div class="set-item-title">作者</div>
+        <div class="set-item-content"></div>
+      </div>
+      <div>{{ setData.author }}</div>
+    </div>
+
+    <div class="set-action">
+      <n-button @click="handelCancel">取消</n-button>
+      <n-button type="primary" @click="handleSave">保存并重启</n-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import store from '@/store'
+import { useRouter } from 'vue-router';
+
+const setData = ref(store.state.setData)
+const router = useRouter()
+
+const handelCancel = () => {
+  router.back()
+}
+
+const windowData = window as any
+
+const handleSave = () => {
+  store.commit('setSetData', setData.value)
+  windowData.electronAPI.restart()
+}
+</script>
+
+<style scoped lang="scss">
+.set-page{
+  @apply flex flex-col justify-center items-center pt-8;
+}
+.set-item{
+  @apply w-3/5  flex justify-between items-center mb-4;
+  .set-item-title{
+    @apply text-gray-200 text-base;
+  }
+  .set-item-content{
+    @apply text-gray-400 text-sm;
+  }
+}
+</style>