fix loli

src/components/KUNGalgameTopBar.vue

@@ -104,25 +104,29 @@ onBeforeMount(() => {})
       />
     </div>
   </div>
-  <transition name="kungalgame-panel">
+  <transition
+    name="kungalgame-panel"
+    enter-active-class="animate__animated animate__jackInTheBox animate__faster"
+    leave-active-class="animate__animated animate__fadeOutRight animate__faster"
+  >
     <KUNGalgameSettingsPanel v-show="showSettings" />
   </transition>
 </template>
 
 <style lang="less" scoped>
-.kungalgame-panel-enter-active,
+// .kungalgame-panel-enter-active,
-.kungalgame-panel-leave-active {
+// .kungalgame-panel-leave-active {
-  transition: right 0.5s;
+//   transition: right 0.5s;
-}
+// }
-.kungalgame-panel-enter-from {
+// .kungalgame-panel-enter-from {
-  right: -600px;
+//   right: -600px;
-}
+// }
-.kungalgame-panel-enter-to {
+// .kungalgame-panel-enter-to {
-  right: 0;
+//   right: 0;
-}
+// }
-.kungalgame-panel-leave-to {
+// .kungalgame-panel-leave-to {
-  right: -600px;
+//   right: -600px;
-}
+// }
 /* 头部样式 */
 .header {
   /* 头部高度 */

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -12,21 +12,12 @@ import { storeToRefs } from 'pinia'
 // 导入看板娘 hook
 import { useFixedLoli } from '@/hooks/useFixedLoli'
 
-// 获取 localeStorage 中的看板娘信息
-
 // 使用设置面板的 store
 const settingsStore = useSettingsPanelStore()
 
 // 使用全局固定看板娘的 hook
-const {
+const { kungalgameLoliStatus, setLoli, initLoli, setLoliX, setLoliY } =
-  kungalgameLoliStatus,
+  useFixedLoli()
-  kungalgameLoliPositionX,
-  kungalgameLoliPositionY,
-  setLoli,
-  setLoliX,
-  setLoliY,
-  initLoli,
-} = useFixedLoli()
 
 // 初始化看板娘
 initLoli()
@@ -36,6 +27,7 @@ const handleClose = () => {
   showSettings.value = false
 }
 
+// 点击按钮的选中状态
 let checked = kungalgameLoliStatus.value === 'true'
 
 // 用户点击固定看板娘
@@ -44,17 +36,10 @@ const handleClick = () => {
     setLoli('true')
   } else {
     setLoli('false')
+    setLoliX('120')
+    setLoliY('-250')
   }
 }
-// 看板娘的位置数据
-let loliPositionX = parseFloat(kungalgameLoliPositionX.value)
-let loliPositionY = parseFloat(kungalgameLoliPositionY.value)
-
-// 看板娘的位置样式
-const loliPosition = {
-  left: `${loliPositionX}px`,
-  top: `${loliPositionY}px`,
-}
 </script>
 
 <template>
@@ -108,22 +93,25 @@ const loliPosition = {
     <!-- 看板娘组件 -->
     <!-- 此处使用 Teleport，如果固定看板娘，则将看板娘传送到根组件，传送的状态使用全局 store 中的 showFixedLoli -->
     <Teleport to="body" :disabled="kungalgameLoliStatus === 'false'">
-      <Loli class="loli" :style="loliPosition" @get-position="getPosition" />
+      <!-- 绑定看板娘组件的样式（位置），给其传递信息获取它现在的位置，给它传递状态（是否允许拖动） -->
+      <Loli class="loli" />
     </Teleport>
     <!-- 关闭面板 -->
-    <div class="close"><Icon @click="handleClose" icon="line-md:close" /></div>
+    <div class="close" v-if="kungalgameLoliStatus === 'false'">
+      <Icon @click="handleClose" icon="line-md:close" />
+    </div>
   </div>
 </template>
 
 <style lang="less" scoped>
 /* 根容器 */
 .root {
-  width: 600px;
   top: 65px;
   right: 0;
   position: absolute;
   background-color: @kungalgame-trans-white-5;
   backdrop-filter: blur(5px);
+  box-shadow: @shadow;
   border-radius: 10px;
   z-index: 1007;
   display: flex;
@@ -241,7 +229,7 @@ const loliPosition = {
 }
 .close {
   font-size: 25px;
-  width: 100%;
+  width: 270px;
   display: flex;
   justify-content: end;
   margin: 20px;

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

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-// 导入设置面板 store
+// 使用全局 hook
-import { useSettingsPanelStore } from '@/store/modules/settings'
+import { useFixedLoli } from '@/hooks/useFixedLoli'
-import { storeToRefs } from 'pinia'
-
-// 使用设置面板的 store
-const settingsStore = useSettingsPanelStore()
 /* 导入 loli 数据 */
 import {
   loliBodyLeft,
@@ -27,38 +23,54 @@ import {
 // 用户拖动看板娘和缩放看板娘
 import { ref, reactive, CSSProperties, onMounted, onBeforeUnmount } from 'vue'
 
+// 使用全局固定看板娘的 hook
+const {
+  kungalgameLoliStatus,
+  kungalgameLoliPositionX,
+  kungalgameLoliPositionY,
+  setLoliX,
+  setLoliY,
+} = useFixedLoli()
+
 const loli = ref<HTMLElement | null>(null)
 
 const state = reactive({
   isDragging: false,
-  isResizing: false,
+  origin: {
-  origin: { x: 0, y: 0 },
+    x: 0,
-  translation: { x: 0, y: 0 },
+    y: 0,
+  },
+  translation: {
+    x: parseFloat(kungalgameLoliPositionX.value),
+    y: parseFloat(kungalgameLoliPositionY.value),
+  },
 })
 
+let loliPosX = `${state.translation.x}px`
+let loliPosY = `${state.translation.y}px`
+
 const loliStyle: CSSProperties = {
-  top: `${state.translation.y}px`,
+  left: loliPosX,
-  left: `${state.translation.x}px`,
+  top: loliPosY,
-  width: 0,
+  height: 0,
 }
 
 const startDragLoli = (event: MouseEvent) => {
-  if (event.ctrlKey) {
+  state.isDragging = true
-    state.isResizing = true
-  } else {
-    state.isDragging = true
-  }
   state.origin.x = event.clientX
   state.origin.y = event.clientY
 }
 
 const stopDrag = () => {
   state.isDragging = false
-  state.isResizing = false
 }
 
 const drag = (event: MouseEvent) => {
-  if (state.isDragging && loli.value !== null) {
+  if (
+    state.isDragging &&
+    loli.value !== null &&
+    kungalgameLoliStatus.value === 'true'
+  ) {
     const deltaX = event.clientX - state.origin.x
     const deltaY = event.clientY - state.origin.y
     state.translation.x += deltaX
@@ -77,6 +89,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
   window.removeEventListener('mouseup', stopDrag)
   window.removeEventListener('mousemove', drag)
+  setLoliX(state.translation.x.toString())
+  setLoliY(state.translation.y.toString())
 })
 </script>
 

src/config/setting-panel.ts

@@ -35,7 +35,7 @@ const KUNGalgameBackgroundPicture = ref<number>(getBackgroundPicture() || 61.8)
 const KUNGalgameLoliStatus = ref<boolean>(getLoliStatus() || false)
 
 const kungalgameSettings: KUNGalgameSettings = {
-  settings: true,
+  settings: false,
   darkMode: KUNGalgameTheme,
   pageWidth: KUNGalgameMainPageWidth,
   kungalgameBackground: KUNGalgameBackgroundPicture || 0,

src/main.ts

@@ -6,6 +6,8 @@ import App from './App.vue'
 import router from './router'
 /* 引入 Pinia */
 import { createPinia } from 'pinia'
+// 导入 css 动画
+import 'animate.css'
 
 /* 导入 Pinia */
 const store = createPinia()