From e64bedf2a4216b949b8b661e5b780999c81f8bef Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Mon, 15 May 2023 02:14:02 +0800
Subject: [PATCH] switch loli button

---
 .../setting-panel/KUNGalgameSettingPanel.vue  | 12 +++++++-----
 .../setting-panel/components/Loli.vue         |  6 ++++++
 .../setting-panel/components/SwitchButton.vue | 19 +++++++++++++++++--
 src/config/setting-panel.ts                   |  2 +-
 src/store/modules/topic.ts                    |  1 -
 5 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
index 7c9b8a0c..dcc459ff 100644
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@@ -11,7 +11,6 @@ import SwitchButton from './components/SwitchButton.vue'
 // 导入设置面板 store
 import { useSettingsPanelStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
-import Drug from './components/Drug.vue'
 
 // 使用设置面板的 store
 const settingsStore = useSettingsPanelStore()
@@ -21,7 +20,10 @@ const handleClose = () => {
 }
 
 // 用户点击固定看板娘
-const handleClick = () => {}
+const handleClick = () => {
+  showFixedLoli.value = false
+  console.log(showFixedLoli.value)
+}
 </script>
 
 <template>
@@ -61,15 +63,15 @@ const handleClick = () => {}
       <!-- 背景设置组件 -->
       <Background />
       <div class="fix-loli">
-        <!-- 处理固定看板娘按钮点击事件 -->
+        <!-- 处理固定看板娘按钮点击事件，点击切换是否固定看板娘 -->
         <span>是否固定看板娘</span><SwitchButton @click="handleClick" />
       </div>
       <div><button class="reset">恢复所有设置为默认</button></div>
     </div>
     <!-- 看板娘组件 -->
-    <!-- 此处使用 Teleport，如果固定看板娘，则将看板娘传送到根组件 -->
+    <!-- 此处使用 Teleport，如果固定看板娘，则将看板娘传送到根组件，传送的状态使用全局 store 中的 showFixedLoli -->
     <Teleport to="body" :disabled="showFixedLoli">
-      <Loli class="loli" :isShowFixedLoli="showFixedLoli" />
+      <Loli class="loli" />
     </Teleport>
     <!-- 关闭面板 -->
     <div class="close"><Icon @click="handleClose" icon="line-md:close" /></div>
diff --git a/src/components/setting-panel/components/Loli.vue b/src/components/setting-panel/components/Loli.vue
index 472c7a6b..cbc9d2f4 100644
--- a/src/components/setting-panel/components/Loli.vue
+++ b/src/components/setting-panel/components/Loli.vue
@@ -1,4 +1,10 @@
 <script setup lang="ts">
+// 导入设置面板 store
+import { useSettingsPanelStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+
+// 使用设置面板的 store
+const settingsStore = useSettingsPanelStore()
 /* 导入 loli 数据 */
 import {
   loliBodyLeft,
diff --git a/src/components/setting-panel/components/SwitchButton.vue b/src/components/setting-panel/components/SwitchButton.vue
index 26e9ebbc..3973069b 100644
--- a/src/components/setting-panel/components/SwitchButton.vue
+++ b/src/components/setting-panel/components/SwitchButton.vue
@@ -1,9 +1,24 @@
 <!-- KUNGalgame 通用切换按钮 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// 导入设置面板 store
+import { useSettingsPanelStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+
+// 使用设置面板的 store
+const settingsStore = useSettingsPanelStore()
+let { showSettings, showFixedLoli } = storeToRefs(settingsStore)
+// 用户点击固定看板娘
+const handleClick = () => {
+  showFixedLoli.value = !showFixedLoli.value
+  console.log(showFixedLoli.value)
+}
+</script>
 
 <template>
-  <input type="checkbox" id="switch" /><label for="switch">Toggle</label>
+  <input type="checkbox" id="switch" /><label @click="handleClick" for="switch"
+    >Toggle</label
+  >
 </template>
 
 <style lang="less" scoped>
diff --git a/src/config/setting-panel.ts b/src/config/setting-panel.ts
index 974f081c..4cd0091a 100644
--- a/src/config/setting-panel.ts
+++ b/src/config/setting-panel.ts
@@ -17,7 +17,7 @@ const kungalgameSettings: KUNGalgameSettings = {
   darkMode: false,
   pageWidth: 61.8,
   kungalgameBackground: 0,
-  fixLoli: false,
+  fixLoli: true,
 }
 
 export default kungalgameSettings
diff --git a/src/store/modules/topic.ts b/src/store/modules/topic.ts
index 468a529b..cec1d900 100644
--- a/src/store/modules/topic.ts
+++ b/src/store/modules/topic.ts
@@ -1,4 +1,3 @@
-import { reactive, ref } from "vue"
 import { defineStore } from "pinia";
 
 export const useTopicStore = defineStore("app", ()=> {