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

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>