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

Compare commits

base: Kisechan:348d39cf42eeebf36dce7baec98d3da31c714297
Branches Tags
Kisechan:main
...
compare: Kisechan:main
Branches Tags
Kisechan:main

2 Commits
348d39cf42 ... main

Author SHA1 Message Date
Kisechan
182768afcb Fix: 修复背景不透明的 bug 2025-08-09 23:32:55 +08:00
Kisechan
77ce0b8f69 Update: 完善 README.md ，添加项目描述和使用流程 2025-08-09 11:36:31 +08:00
4 changed files with 85 additions and 60 deletions
Expand all files Collapse all files

53
README.md
View File

@ -1 +1,52 @@
# Pet # Shuodedaoli-Deskpet
[![Static Badge](https://img.shields.io/badge/HTML5-%23E34F26?style=flat-square&logo=html5&logoColor=white)](https://www.w3.org/TR/2011/WD-html5-20110405/index.html)
[![Static Badge](https://img.shields.io/badge/CSS-%23663399?style=flat-square&logo=css&logoColor=white)](https://www.w3.org/Style/CSS/Overview.en.html)
[![Static Badge](https://img.shields.io/badge/JavaScript-%23F7DF1E?style=flat-square&logo=javascript&logoColor=white)](https://www.javascript.com/)
[![Static Badge](https://img.shields.io/badge/Vue.js-%234FC08D?style=flat-square&logo=vuedotjs&logoColor=white)](https://vuejs.org/)
[![Static Badge](https://img.shields.io/badge/Vite-%23646CFF?style=flat-square&logo=vite&logoColor=white)](https://cn.vite.dev/)
[![Static Badge](https://img.shields.io/badge/Electron-%2347848F?style=flat-square&logo=electron&logoColor=white)](https://www.electronjs.org/zh/)
一只非常非常可爱的“说的道理”桌宠（可鬼叫）。
仅供娱乐。
## 主要功能
- **非常可爱**，哇这个好可爱鸭。
- **哇袄！**
- **跨平台**（支持 Windows， Linux 和 MacOS）。
## 使用流程
1. **复制项目**
```bash
git clone https://github.com/Kisechan/Shuodedaoli-Deskpet.git
```
2. **安装依赖**（需要 npm）
```bash
npm install
```
3. **运行项目**
```bash
npm run start
```
## 贡献和反馈
欢迎提交 [Issue](https://github.com/Kisechan/Shuodedaoli-Deskpet/issues) 或 [PR](https://github.com/Kisechan/Shuodedaoli-Deskpet/pulls)。
## 许可证
[MIT](./LICENSE).
## TODO
- [ ] 更美观的说的道理，优化 UI
- [ ] 更多的哇袄
- [ ] 自定义更换不同的道理

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>

58
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,72 +18,67 @@ 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);
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,
@ -115,4 +113,4 @@ onMounted(() => {
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
</style> </style>