loli position

src/components/KUNGalgameTopBar.vue

@@ -17,13 +17,7 @@ import { storeToRefs } from 'pinia'
 const settingsStore = useSettingsPanelStore()
 
 // 使数据变为响应式
-let {
+let { showSettings } = storeToRefs(settingsStore)
-  showSettings,
-  showDarkMode,
-  showPageWidth,
-  showKUNGalgameBackground,
-  showFixedLoli,
-} = storeToRefs(settingsStore)
 
 // 顶部导航栏单个项目的接口
 interface topBar {

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -18,7 +18,15 @@ import { useFixedLoli } from '@/hooks/useFixedLoli'
 const settingsStore = useSettingsPanelStore()
 
 // 使用全局固定看板娘的 hook
-const { kungalgameLoliStatus, setLoli, setLoliBtn, initLoli } = useFixedLoli()
+const {
+  kungalgameLoliStatus,
+  kungalgameLoliPositionX,
+  kungalgameLoliPositionY,
+  setLoli,
+  setLoliX,
+  setLoliY,
+  initLoli,
+} = useFixedLoli()
 
 // 初始化看板娘
 initLoli()
@@ -30,20 +38,23 @@ const handleClose = () => {
 
 let checked = kungalgameLoliStatus.value === 'true'
 
-let flag = false
 // 用户点击固定看板娘
 const handleClick = () => {
-  let str = 'false'
+  if (!checked) {
-  if (flag) {
+    setLoli('true')
-    setLoli(str)
-    str = 'false'
-    flag = !flag
   } else {
-    setLoli(str)
+    setLoli('false')
-    str = 'true'
-    flag = !flag
   }
 }
+// 看板娘的位置数据
+let loliPositionX = parseFloat(kungalgameLoliPositionX.value)
+let loliPositionY = parseFloat(kungalgameLoliPositionY.value)
+
+// 看板娘的位置样式
+const loliPosition = {
+  left: `${loliPositionX}px`,
+  top: `${loliPositionY}px`,
+}
 </script>
 
 <template>
@@ -97,7 +108,7 @@ const handleClick = () => {
     <!-- 看板娘组件 -->
     <!-- 此处使用 Teleport，如果固定看板娘，则将看板娘传送到根组件，传送的状态使用全局 store 中的 showFixedLoli -->
     <Teleport to="body" :disabled="kungalgameLoliStatus === 'false'">
-      <Loli class="loli" />
+      <Loli class="loli" :style="loliPosition" @get-position="getPosition" />
     </Teleport>
     <!-- 关闭面板 -->
     <div class="close"><Icon @click="handleClose" icon="line-md:close" /></div>

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

@@ -39,6 +39,7 @@ const state = reactive({
 const loliStyle: CSSProperties = {
   top: `${state.translation.y}px`,
   left: `${state.translation.x}px`,
+  width: 0,
 }
 
 const startDragLoli = (event: MouseEvent) => {
@@ -101,8 +102,6 @@ onBeforeUnmount(() => {
   position: fixed;
   z-index: 9999;
   // 根据父元素控制面板传过来的参数确定看板娘的位置
-  // top: v-bind(loliPositionYPixel);
-  // left: v-bind(loliPositionXPixel);
 }
 .lass {
   position: absolute;

src/hooks/useFixedLoli.ts

@@ -4,31 +4,46 @@ import { ref, watchEffect } from 'vue'
 import {
   getLoliStatus,
   setLoliStatus,
-  getLoliButtonStatus,
+  getLoliPositionX,
-  setLoliButtonStatus,
+  setLoliPositionX,
+  getLoliPositionY,
+  setLoliPositionY,
 } from '@/utils/cache/local-storage'
 
+// 初始化看板娘状态
 const kungalgameLoliStatus = ref<string>(getLoliStatus() || 'false')
-const kungalgameLoliBtnStatus = ref<string>(getLoliButtonStatus() || 'false')
+const kungalgameLoliPositionX = ref<string>(getLoliPositionX() || '120')
+const kungalgameLoliPositionY = ref<string>(getLoliPositionY() || '-250')
 
 const setLoli = (status: string) => {
   kungalgameLoliStatus.value = status
 }
 
-const setLoliBtn = (status: string) => {
+const setLoliX = (x: string) => {
-  kungalgameLoliBtnStatus.value = status
+  kungalgameLoliPositionX.value = x
+}
+
+const setLoliY = (y: string) => {
+  kungalgameLoliPositionY.value = y
 }
 
 const initLoli = () => {
   watchEffect(() => {
-    const loli = kungalgameLoliStatus.value
+    setLoliStatus(kungalgameLoliStatus.value)
-    const loliBtn = kungalgameLoliStatus.value
+    setLoliPositionX(kungalgameLoliPositionX.value)
-    setLoliStatus(loli)
+    setLoliPositionY(kungalgameLoliPositionY.value)
-    setLoliButtonStatus(loliBtn)
   })
 }
 
 // 全局 hook
 export function useFixedLoli() {
-  return { kungalgameLoliStatus, setLoli, setLoliBtn, initLoli }
+  return {
+    kungalgameLoliStatus,
+    kungalgameLoliPositionX,
+    kungalgameLoliPositionY,
+    setLoli,
+    setLoliX,
+    setLoliY,
+    initLoli,
+  }
 }

src/utils/cache/cache-key.ts

@@ -12,8 +12,10 @@ class KUNCacheKey {
   static BACKGROUND_PICTURE = `${KUN}-background-picture`
   // 是否固定看板娘
   static LOLI_STATUS = `${KUN}-loli-status`
-  // 看板娘点击按钮的选中状态
+  // 看板娘定位 X
-  static LOLI_BTN_STATUS = `${KUN}-loli-btn-status`
+  static LOLI_POSITION_X = `${KUN}-loli-position-x`
+  // 看板娘定位 Y
+  static LOLI_POSITION_Y = `${KUN}-loli-position-y`
 }
 
 export default KUNCacheKey

src/utils/cache/local-storage.ts

@@ -35,10 +35,17 @@ export const setLoliStatus = (loli: string) => {
   // 看板娘的状态是一个布尔值，对应着固定还是不固定
   localStorage.setItem(KUNCacheKey.LOLI_STATUS, loli)
 }
-export const getLoliButtonStatus = () => {
+// 看板娘的水平位置
-  return localStorage.getItem(KUNCacheKey.LOLI_BTN_STATUS) as string
+export const getLoliPositionX = () => {
+  return localStorage.getItem(KUNCacheKey.LOLI_POSITION_X) as string
 }
-export const setLoliButtonStatus = (loliBtn: string) => {
+export const setLoliPositionX = (loliX: string) => {
-  // 看板娘的状态是一个布尔值，对应着固定还是不固定
+  localStorage.setItem(KUNCacheKey.LOLI_POSITION_X, loliX)
-  localStorage.setItem(KUNCacheKey.LOLI_BTN_STATUS, loliBtn)
+}
+// 看板娘的竖直位置
+export const getLoliPositionY = () => {
+  return localStorage.getItem(KUNCacheKey.LOLI_POSITION_Y) as string
+}
+export const setLoliPositionY = (loliY: string) => {
+  localStorage.setItem(KUNCacheKey.LOLI_POSITION_Y, loliY)
 }