Fix: 修复背景不透明的 bug
This commit is contained in:
32
main/main.js
32
main/main.js
@ -58,45 +58,21 @@ function createWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 300,
|
||||
height: 300,
|
||||
transparent: true,
|
||||
frame: false,
|
||||
resizable: false, // 固定大小
|
||||
transparent: true, // 开启透明窗口
|
||||
frame: false, // 无边框窗口
|
||||
resizable: false, // 禁止调整大小
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "preload.js"),
|
||||
contextIsolation: true,
|
||||
webSecurity: false, // 信任应用，并允许加载本地资源
|
||||
webSecurity: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 开发模式加载Vite服务器
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
mainWindow.loadURL("http://localhost:5173");
|
||||
} else {
|
||||
mainWindow.loadFile(path.join(__dirname, "../renderer/dist/index.html"));
|
||||
}
|
||||
|
||||
// 窗口拖拽功能
|
||||
let isDragging = false;
|
||||
mainWindow.webContents.on("before-input-event", (_, input) => {
|
||||
if (input.type === "mouseDown") {
|
||||
isDragging = true;
|
||||
mainWindow.webContents.executeJavaScript(`
|
||||
window.dragOffset = { x: ${input.x}, y: ${input.y} }
|
||||
`);
|
||||
} else if (input.type === "mouseUp") {
|
||||
isDragging = false;
|
||||
}
|
||||
});
|
||||
|
||||
mainWindow.on("moved", () => {
|
||||
if (isDragging) {
|
||||
mainWindow.webContents.executeJavaScript(`
|
||||
window.electronAPI.updatePosition()
|
||||
`);
|
||||
}
|
||||
const [x, y] = mainWindow.getPosition();
|
||||
mainWindow.webContents.send("update-position", { x, y });
|
||||
});
|
||||
}
|
||||
|
||||
app.whenReady().then(createWindow);
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<body style="background-color: transparent;">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref } from "vue";
|
||||
import petGif from "./assets/pet.gif";
|
||||
import { Howl } from 'howler';
|
||||
import { Howl } from "howler";
|
||||
|
||||
// 配置数据
|
||||
const tooltips = [
|
||||
@ -18,72 +18,67 @@ const soundFiles = [
|
||||
"啊啊啊我草你妈呀.mp3",
|
||||
"嘟嘟嘟.mp3",
|
||||
"韭菜盒子.mp3",
|
||||
"哇袄.mp3"
|
||||
"哇袄.mp3",
|
||||
];
|
||||
|
||||
// 状态管理
|
||||
const showTooltip = ref(false);
|
||||
const currentTooltip = ref("");
|
||||
const position = ref({ x: 0, y: 0 });
|
||||
|
||||
// 点击事件处理
|
||||
const handleClick = async () => {
|
||||
const randomSoundFile = soundFiles[Math.floor(Math.random() * soundFiles.length)];
|
||||
console.log('请求播放:', randomSoundFile);
|
||||
|
||||
const randomSoundFile =
|
||||
soundFiles[Math.floor(Math.random() * soundFiles.length)];
|
||||
console.log("请求播放:", randomSoundFile);
|
||||
|
||||
try {
|
||||
const audioUrl = await window.electronAPI?.getSoundPath(randomSoundFile);
|
||||
|
||||
if (audioUrl) {
|
||||
const sound = new Howl({
|
||||
src: [audioUrl],
|
||||
format: ['mp3']
|
||||
format: ["mp3"],
|
||||
});
|
||||
sound.play();
|
||||
} else {
|
||||
console.error('无法获取音频路径:', randomSoundFile);
|
||||
console.error("无法获取音频路径:", randomSoundFile);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('播放失败:', err);
|
||||
console.error("播放失败:", err);
|
||||
}
|
||||
|
||||
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="pet-container"
|
||||
:style="{ left: `${position.x}px`, top: `${position.y}px` }"
|
||||
>
|
||||
<img :src="petGif" class="pet-gif" @click="handleClick" draggable="false" />
|
||||
|
||||
<div class="pet-container">
|
||||
<transition name="fade">
|
||||
<div v-if="showTooltip" class="tooltip">
|
||||
{{ currentTooltip }}
|
||||
</div>
|
||||
</transition>
|
||||
<img :src="petGif" class="pet-gif" @click="handleClick" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html, body, #app {
|
||||
background-color: transparent !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; /* 隐藏滚动条 */
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.pet-container {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
-webkit-app-region: no-drag;
|
||||
/* 将整个容器设置为可拖拽区域 */
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.pet-gif {
|
||||
@ -91,7 +86,8 @@ onMounted(() => {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
/* 设置图片为不可拖拽，以便响应点击事件 */
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@ -105,6 +101,8 @@ onMounted(() => {
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
/* 确保提示框不会干扰拖拽 */
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
@ -115,4 +113,4 @@ onMounted(() => {
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user