new feature: recover all settings, optimize code logic

src/components/KUNGalgameTopBar.vue

@@ -1,17 +1,10 @@
 <script setup lang="ts">
 // 导入 Vue 函数
-import {
-  defineAsyncComponent,
-  onBeforeMount,
-  onBeforeUnmount,
-  onUpdated,
-} from 'vue'
+import { defineAsyncComponent, onBeforeMount, onBeforeUnmount } from 'vue'
 // 导入图标
 import { Icon } from '@iconify/vue'
 // 导入 css 动画
 import 'animate.css'
-// 导入路由
-import router from '@/router'
 // 导入设置面板 store
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 
@@ -68,16 +61,6 @@ if (isTopicPage) {
 let navItemNum = topBarItem.length
 const navItemNumString = navItemNum + '00px'
 
-// 用户点击头像时的操作
-const handleClickAvatar = () => {
-  // isShowInfo.value = !isShowInfo.value
-  router.push('/kungalgamer')
-}
-
-// 用户点击网站设置时的操作
-const handleSittingsClick = () => {
-  showKUNGalgamePanel.value = !showKUNGalgamePanel.value
-}
 // 在路由跳转时关闭设置面板
 onBeforeUnmount(() => {
   showKUNGalgamePanel.value = false
@@ -111,12 +94,13 @@ onBeforeMount(() => {
       </div>
     </div>
     <div class="kungalgamer-info">
-      <span @click="handleSittingsClick"><Icon icon="uiw:setting-o" /></span>
-      <img
-        src="../assets/images/KUN.jpg"
-        alt="KUN"
-        @click="handleClickAvatar"
-      />
+      <!-- showKUNGalgamePanel 为 store 里的布尔值,其真假控制设置面板的显示与关闭 -->
+      <span @click="showKUNGalgamePanel = !showKUNGalgamePanel"
+        ><Icon icon="uiw:setting-o"
+      /></span>
+      <router-link to="/kungalgamer">
+        <img src="../assets/images/KUN.jpg" alt="KUN" />
+      </router-link>
     </div>
   </div>
   <div class="settings-panel" :style="topicStyle">

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -29,15 +29,8 @@ const handleChangeLanguage = () => {
 }
 
 /* 恢复所有设置为默认 */
-const handleRecover = () => {}
-
-/*
- * 设置面板显示切换
- */
-
-// 关闭设置面板
-const handleClose = () => {
-  showKUNGalgamePanel.value = false
+const handleRecover = () => {
+  settingsStore.restoreSettings()
 }
 </script>
 
@@ -111,7 +104,8 @@ const handleClose = () => {
 
     <!-- 关闭面板 -->
     <div class="close">
-      <Icon @click="handleClose" icon="line-md:close" />
+      <!-- showKUNGalgamePanel 存在于 settings 里,false 为关闭设置面板 -->
+      <Icon @click="showKUNGalgamePanel = false" icon="line-md:close" />
     </div>
   </div>
 </template>

src/components/setting-panel/components/Background.vue

@@ -11,7 +11,7 @@ import { restoreBackground } from '@/hooks/useBackgroundPicture'
 
 // 使用设置面板的 store
 const settingsStore = useKUNGalgameSettingsStore()
-const { showKUNGalgameBackground, showCustomBackground } =
+const { showKUNGalgameBackground, showKUNGalgameCustomBackground } =
   storeToRefs(settingsStore)
 
 // 更改背景图片
@@ -36,7 +36,7 @@ const handelChangeImage = (index: number) => {
 const url = ref('')
 const handleCustomBackground = () => {
   if (url.value) {
-    showCustomBackground.value = url.value
+    showKUNGalgameCustomBackground.value = url.value
     showKUNGalgameBackground.value = '1007'
     url.value = ''
   } else {

src/hooks/useBackgroundPicture.ts

@@ -5,7 +5,7 @@ import { computed } from 'vue'
 
 // 使用设置面板的 store
 const settingsStore = useKUNGalgameSettingsStore()
-const { showKUNGalgameBackground, showCustomBackground } =
+const { showKUNGalgameBackground, showKUNGalgameCustomBackground } =
   storeToRefs(settingsStore)
 
 // 恢复空白背景
@@ -20,11 +20,9 @@ export const currBackground = computed(() => {
   ) {
     return 'none'
   } else if (showKUNGalgameBackground.value === '1007') {
-    return `url(${showCustomBackground.value})`
+    return `url(${showKUNGalgameCustomBackground.value})`
   } else {
     // TODO: 替换为后端接口
     return `url(src/assets/images/bg/bg${showKUNGalgameBackground.value}.png)`
   }
 })
-
-console.log(currBackground.value)

src/store/modules/settings.ts

@@ -12,17 +12,28 @@ interface KUNGalgameSettings {
   // 背景图
   showKUNGalgameBackground: string
   // 自定义背景图
-  showCustomBackground: string
+  showKUNGalgameCustomBackground: string
 }
 
 export const useKUNGalgameSettingsStore = defineStore({
   id: 'KUNGalgame-settings',
   persist: true,
+  // 默认值
   state: (): KUNGalgameSettings => ({
     showKUNGalgamePanel: false,
     showKUNGalgameLanguage: 'en',
     showKUNGalgameMainPageWidth: '61.8',
     showKUNGalgameBackground: 'none',
-    showCustomBackground: '',
+    showKUNGalgameCustomBackground: '',
   }),
+  actions: {
+    // 恢复出厂设置()
+    restoreSettings() {
+      this.showKUNGalgamePanel = false
+      this.showKUNGalgameLanguage = 'en'
+      this.showKUNGalgameMainPageWidth = '61.8'
+      this.showKUNGalgameBackground = 'none'
+      this.showKUNGalgameCustomBackground = ''
+    },
+  },
 })