初步实现功能

renderer/src/App.vue

@@ -1,39 +1,48 @@
 <script setup>
-import { ref, onMounted } from 'vue'
-import petVideo from './assets/pet.mp4'
+import { ref, onMounted } from "vue";
+import petGif from "./assets/pet.gif";
 
+// 配置数据
 const tooltips = [
-  "说的道理",
-]
-const sounds = [
-  
-]
+  "说的道理~",
+  "尊尼获加",
+  "为什么不开大！！",
+  "（凤鸣）",
+];
+const soundFiles = ["example.mp3"];
 
-const showTooltip = ref(false)
-const currentTooltip = ref('')
+// 状态管理
+const showTooltip = ref(false);
+const currentTooltip = ref("");
+const position = ref({ x: 0, y: 0 });
 
+// 点击事件处理
 const handleClick = () => {
-  // 随机播放音效
-  const sound = sounds[Math.floor(Math.random() * sounds.length)]
-  window.electronAPI.playSound(sound)
-  
-  // 随机显示提示
-  showTooltip.value = true
-  currentTooltip.value = tooltips[Math.floor(Math.random() * tooltips.length)]
-  setTimeout(() => showTooltip.value = false, 2000)
-}
+  const randomSound = soundFiles[Math.floor(Math.random() * soundFiles.length)];
+  window.electronAPI?.playSound(randomSound);
+
+  currentTooltip.value = tooltips[Math.floor(Math.random() * tooltips.length)];
+  showTooltip.value = true;
+  setTimeout(() => (showTooltip.value = false), 2000);
+};
+
+// 初始化位置监听
+onMounted(() => {
+  if (window.electronAPI) {
+    window.electronAPI.onUpdatePosition((pos) => {
+      position.value = pos;
+    });
+  }
+});
 </script>
 
 <template>
-  <div class="container">
-    <!-- MP4素材播放 -->
-    <video 
-      autoplay loop muted 
-      :src="petVideo" 
-      @click="handleClick"
-    />
-    
-    <!-- 文字提示框 -->
+  <div
+    class="pet-container"
+    :style="{ left: `${position.x}px`, top: `${position.y}px` }"
+  >
+    <img :src="petGif" class="pet-gif" @click="handleClick" draggable="false" />
+
     <transition name="fade">
       <div v-if="showTooltip" class="tooltip">
         {{ currentTooltip }}
@@ -43,22 +52,24 @@ const handleClick = () => {
 </template>
 
 <style scoped>
-.container {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+.pet-container {
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  -webkit-app-region: no-drag;
 }
 
-video {
+.pet-gif {
   width: 100%;
   height: 100%;
-  object-fit: contain;
   cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 
 .tooltip {
   position: absolute;
-  bottom: 20px;
+  bottom: -40px;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.7);
@@ -66,12 +77,15 @@ video {
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 14px;
+  white-space: nowrap;
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.5s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
-</style>
+</style>