Kisechan/Shuodedaoli-Deskpet
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: 修复背景不透明的 bug

Browse Source
This commit is contained in:
Kisechan
2025-08-09 23:32:55 +08:00
parent 77ce0b8f69
commit 182768afcb
3 changed files with 33 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
main/main.js
View File

@ -58,45 +58,21 @@ function createWindow() {
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: 300, width: 300,
height: 300, height: 300,
transparent: true, transparent: true, // 开启透明窗口
frame: false, frame: false, // 无边框窗口
resizable: false, // 固定大小 resizable: false, // 禁止调整大小
webPreferences: { webPreferences: {
preload: path.join(__dirname, "preload.js"), preload: path.join(__dirname, "preload.js"),
contextIsolation: true, contextIsolation: true,
webSecurity: false, // 信任应用，并允许加载本地资源 webSecurity: false,
}, },
}); });
// 开发模式加载Vite服务器
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
mainWindow.loadURL("http://localhost:5173"); mainWindow.loadURL("http://localhost:5173");
} else { } else {
mainWindow.loadFile(path.join(__dirname, "../renderer/dist/index.html")); 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); app.whenReady().then(createWindow);

2
renderer/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>Vite + Vue + TS</title>
</head> </head>
<body> <body style="background-color: transparent;">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

54
renderer/src/App.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref } from "vue";
import petGif from "./assets/pet.gif"; import petGif from "./assets/pet.gif";
import { Howl } from 'howler'; import { Howl } from "howler";
// 配置数据 // 配置数据
const tooltips = [ const tooltips = [
@ -18,18 +18,18 @@ const soundFiles = [
"啊啊啊我草你妈呀.mp3", "啊啊啊我草你妈呀.mp3",
"嘟嘟嘟.mp3", "嘟嘟嘟.mp3",
"韭菜盒子.mp3", "韭菜盒子.mp3",
"哇袄.mp3" "哇袄.mp3",
]; ];
// 状态管理 // 状态管理
const showTooltip = ref(false); const showTooltip = ref(false);
const currentTooltip = ref(""); const currentTooltip = ref("");
const position = ref({ x: 0, y: 0 });
// 点击事件处理 // 点击事件处理
const handleClick = async () => { const handleClick = async () => {
const randomSoundFile = soundFiles[Math.floor(Math.random() * soundFiles.length)]; const randomSoundFile =
console.log('请求播放:', randomSoundFile); soundFiles[Math.floor(Math.random() * soundFiles.length)];
console.log("请求播放:", randomSoundFile);
try { try {
const audioUrl = await window.electronAPI?.getSoundPath(randomSoundFile); const audioUrl = await window.electronAPI?.getSoundPath(randomSoundFile);
@ -37,53 +37,48 @@ const handleClick = async () => {
if (audioUrl) { if (audioUrl) {
const sound = new Howl({ const sound = new Howl({
src: [audioUrl], src: [audioUrl],
format: ['mp3'] format: ["mp3"],
}); });
sound.play(); sound.play();
} else { } else {
console.error('无法获取音频路径:', randomSoundFile); console.error("无法获取音频路径:", randomSoundFile);
} }
} catch (err) { } catch (err) {
console.error('播放失败:', err); console.error("播放失败:", err);
} }
currentTooltip.value = tooltips[Math.floor(Math.random() * tooltips.length)]; currentTooltip.value = tooltips[Math.floor(Math.random() * tooltips.length)];
showTooltip.value = true; showTooltip.value = true;
setTimeout(() => (showTooltip.value = false), 2000); setTimeout(() => (showTooltip.value = false), 2000);
}; };
// 初始化位置监听
onMounted(() => {
if (window.electronAPI) {
window.electronAPI.onUpdatePosition((pos) => {
position.value = pos;
});
}
});
</script> </script>
<template> <template>
<div <div class="pet-container">
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"> <transition name="fade">
<div v-if="showTooltip" class="tooltip"> <div v-if="showTooltip" class="tooltip">
{{ currentTooltip }} {{ currentTooltip }}
</div> </div>
</transition> </transition>
<img :src="petGif" class="pet-gif" @click="handleClick" />
</div> </div>
</template> </template>
<style>
html, body, #app {
background-color: transparent !important;
margin: 0;
padding: 0;
overflow: hidden; /* 隐藏滚动条 */
}
</style>
<style scoped> <style scoped>
.pet-container { .pet-container {
position: absolute;
width: 300px; width: 300px;
height: 300px; height: 300px;
-webkit-app-region: no-drag; /* 将整个容器设置为可拖拽区域 */
-webkit-app-region: drag;
} }
.pet-gif { .pet-gif {
@ -91,7 +86,8 @@ onMounted(() => {
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
-webkit-user-drag: none; /* 设置图片为不可拖拽，以便响应点击事件 */
-webkit-app-region: no-drag;
} }
.tooltip { .tooltip {
@ -105,6 +101,8 @@ onMounted(() => {
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
/* 确保提示框不会干扰拖拽 */
-webkit-app-region: no-drag;
} }
.fade-enter-active, .fade-enter-active,