switch loli button

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>

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,

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>

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

src/store/modules/topic.ts

@@ -1,4 +1,3 @@
-import { reactive, ref } from "vue"
 import { defineStore } from "pinia";
 
 export const useTopicStore = defineStore("app", ()=> {