Compare commits
17 Commits
bdaa4ea9b8
...
v0.2.0
Author | SHA1 | Date | |
---|---|---|---|
656c276f1e | |||
4eff008fd9 | |||
57b268008d | |||
a1183a35d3 | |||
3e770368b5 | |||
182768afcb | |||
77ce0b8f69 | |||
348d39cf42 | |||
1f954aad35 | |||
86a59aff1f | |||
18548ef9fb | |||
27dfb0ae69 | |||
d1682f1b1c | |||
d57b5fb540 | |||
cbe3f72d1c | |||
499f6205fa | |||
50bfdfbbe9 |
144
.gitignore
vendored
Normal file
144
.gitignore
vendored
Normal file
@ -0,0 +1,144 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
core/*build*/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
.DS_Store
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist/
|
||||
renderer/dist/
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Sveltekit cache directory
|
||||
.svelte-kit/
|
||||
|
||||
# vitepress build output
|
||||
**/.vitepress/dist
|
||||
|
||||
# vitepress cache directory
|
||||
**/.vitepress/cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# Firebase cache directory
|
||||
.firebase/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# yarn v3
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/sdks
|
||||
!.yarn/versions
|
||||
|
||||
# Vite logs files
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
57
README.md
57
README.md
@ -1 +1,56 @@
|
||||
# Pet
|
||||
# Shuodedaoli-Deskpet
|
||||
|
||||
[](https://www.w3.org/TR/2011/WD-html5-20110405/index.html)
|
||||
[](https://www.w3.org/Style/CSS/Overview.en.html)
|
||||
[](https://www.javascript.com/)
|
||||
[](https://vuejs.org/)
|
||||
[](https://cn.vite.dev/)
|
||||
[](https://www.electronjs.org/zh/)
|
||||
|
||||
一只非常非常可爱的**说的道理**桌宠(可鬼叫)。
|
||||
|
||||
仅供娱乐。
|
||||
|
||||
## 主要功能
|
||||
|
||||
- **非常可爱**,哇这个好可爱鸭。
|
||||
- **哇袄!**
|
||||
- **跨平台**(支持 Windows, Linux 和 MacOS)。
|
||||
|
||||
## 使用流程
|
||||
|
||||
1. **复制项目**
|
||||
|
||||
```bash
|
||||
git clone https://github.com/Kisechan/Shuodedaoli-Deskpet.git
|
||||
```
|
||||
|
||||
2. **安装依赖**(需要 npm)
|
||||
|
||||
```bash
|
||||
npm install
|
||||
cd renderer
|
||||
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
|
||||
|
||||
- [x] 更美观的说的道理,优化 UI
|
||||
- [ ] 更多的哇袄
|
||||
- [ ] 自定义更换不同的道理
|
||||
|
BIN
build/icon.ico
Normal file
BIN
build/icon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
BIN
build/icon.png
Normal file
BIN
build/icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 90 KiB |
114
main/main.js
Normal file
114
main/main.js
Normal file
@ -0,0 +1,114 @@
|
||||
const { app, BrowserWindow, ipcMain } = require("electron");
|
||||
const path = require("path");
|
||||
const { spawn } = require('child_process')
|
||||
const fs = require("fs");
|
||||
|
||||
app.disableHardwareAcceleration(); // 高 DPI 缩放修复
|
||||
|
||||
// 音效播放器
|
||||
function playAudioFile(filePath) {
|
||||
if (process.platform === 'win32') {
|
||||
spawn('cmd', ['/c', `start "" "${filePath}"`])
|
||||
} else if (process.platform === 'darwin') {
|
||||
spawn('afplay', [filePath])
|
||||
} else {
|
||||
spawn('aplay', [filePath])
|
||||
}
|
||||
}
|
||||
|
||||
ipcMain.on('play-sound', (_, soundFile) => {
|
||||
let soundPath;
|
||||
|
||||
// 判断是开发环境还是生产环境
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// 在开发模式下,直接指向 renderer/public 里的文件
|
||||
soundPath = path.join(__dirname, '../renderer/public/assets/sounds', soundFile);
|
||||
} else {
|
||||
// 在生产模式下,Vite 会把 public 里的文件复制到 dist 文件夹
|
||||
soundPath = path.join(__dirname, '../renderer/dist/assets/sounds', soundFile);
|
||||
}
|
||||
|
||||
console.log('Main process trying to play sound at path:', soundPath);
|
||||
|
||||
if (require('fs').existsSync(soundPath)) {
|
||||
playAudioFile(soundPath);
|
||||
} else {
|
||||
console.error('Sound file not found:', soundPath);
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('get-sound-path', (_, soundFile) => {
|
||||
let soundPath;
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
soundPath = path.join(__dirname, '../renderer/public/assets/sounds', soundFile);
|
||||
} else {
|
||||
soundPath = path.join(__dirname, '../renderer/dist/assets/sounds', soundFile);
|
||||
}
|
||||
|
||||
if (require('fs').existsSync(soundPath)) {
|
||||
// 返回一个可供 web 环境使用的 file 协议 URL
|
||||
return `file://${soundPath}`;
|
||||
} else {
|
||||
console.error('Sound file not found:', soundPath);
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('get-sound-files', async () => {
|
||||
const soundDir = process.env.NODE_ENV === 'development'
|
||||
? path.join(__dirname, '../renderer/public/assets/sounds')
|
||||
: path.join(__dirname, '../renderer/dist/assets/sounds');
|
||||
|
||||
try {
|
||||
// 读取目录下的所有文件名
|
||||
const files = await fs.promises.readdir(soundDir);
|
||||
// 筛选出 .mp3 文件并返回
|
||||
return files.filter(file => file.endsWith('.mp3'));
|
||||
} catch (error) {
|
||||
console.error('无法读取声音目录:', error);
|
||||
return []; // 如果出错则返回空数组
|
||||
}
|
||||
});
|
||||
|
||||
let mainWindow;
|
||||
|
||||
function createWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 200,
|
||||
height: 200,
|
||||
transparent: true, // 开启透明窗口
|
||||
frame: false, // 无边框窗口
|
||||
resizable: false, // 禁止调整大小
|
||||
title: "说的道理桌宠",
|
||||
icon: path.join(__dirname, '../build/icon.png'),
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "preload.js"),
|
||||
contextIsolation: true,
|
||||
webSecurity: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 当渲染进程传来这个事件时,就移动窗口
|
||||
ipcMain.on('move-window', (event, { x, y }) => {
|
||||
// 使用 Math.round 避免非整数坐标可能带来的问题
|
||||
mainWindow.setPosition(Math.round(x), Math.round(y), false);
|
||||
});
|
||||
|
||||
// 添加一个 handle,用于响应前端获取窗口位置的请求
|
||||
ipcMain.handle('get-window-position', () => {
|
||||
if (mainWindow) {
|
||||
const [x, y] = mainWindow.getPosition();
|
||||
return { x, y };
|
||||
}
|
||||
return { x: 0, y: 0 };
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
mainWindow.loadURL("http://localhost:5173");
|
||||
} else {
|
||||
mainWindow.loadFile(path.join(__dirname, "../renderer/dist/index.html"));
|
||||
}
|
||||
}
|
||||
|
||||
app.whenReady().then(createWindow);
|
20
main/preload.js
Normal file
20
main/preload.js
Normal file
@ -0,0 +1,20 @@
|
||||
const { contextBridge, ipcRenderer } = require('electron')
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', {
|
||||
playSound: (soundFile) => {
|
||||
try {
|
||||
ipcRenderer.send('play-sound', soundFile)
|
||||
} catch (err) {
|
||||
console.error('播放音效失败:', err)
|
||||
}
|
||||
},
|
||||
getSoundPath: (soundFile) => ipcRenderer.invoke('get-sound-path', soundFile),
|
||||
getSoundFiles: () => ipcRenderer.invoke('get-sound-files'),
|
||||
showTooltip: (text) => ipcRenderer.send('show-tooltip', text),
|
||||
onUpdatePosition: (callback) => {
|
||||
ipcRenderer.on('update-position', (_, position) => callback(position))
|
||||
},
|
||||
moveWindow: (position) => ipcRenderer.send('move-window', position),
|
||||
// 暴露获取窗口位置的函数
|
||||
getWindowPosition: () => ipcRenderer.invoke('get-window-position')
|
||||
})
|
6208
package-lock.json
generated
Normal file
6208
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
91
package.json
Normal file
91
package.json
Normal file
@ -0,0 +1,91 @@
|
||||
{
|
||||
"name": "shuodedaoli-deskpet",
|
||||
"version": "0.2.0",
|
||||
"description": "A cute desktop pet of 'Shuodedaoli' built with Electron and Vue 3.",
|
||||
"main": "main/main.js",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"cd renderer && npm run dev\" \"wait-on http://localhost:5173 && cross-env NODE_ENV=development electron .\"",
|
||||
"build": "npm run build:renderer && electron-builder",
|
||||
"start": "electron .",
|
||||
"build:renderer": "cd renderer && npm run build",
|
||||
"build:win": "npm run build:renderer && electron-builder --win",
|
||||
"build:linux": "npm run build:renderer && electron-builder --linux",
|
||||
"build:all": "npm run build:renderer && electron-builder --win --linux"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.kisechan.deskpet",
|
||||
"productName": "说的道理桌面宠物",
|
||||
"compression": "maximum",
|
||||
"copyright": "Copyright © 2025 Kisechan",
|
||||
"directories": {
|
||||
"output": "out"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"perMachine": false,
|
||||
"allowElevation": false,
|
||||
"installerIcon": "build/icon.ico",
|
||||
"uninstallerIcon": "build/icon.ico",
|
||||
"installerHeaderIcon": "build/icon.ico",
|
||||
"installerLanguages": ["zh_CN", "en_US"],
|
||||
"language": "2052"
|
||||
},
|
||||
"files": [
|
||||
"main/",
|
||||
"renderer/dist/",
|
||||
"package.json"
|
||||
],
|
||||
"publish": {
|
||||
"provider": "github",
|
||||
"owner": "Kisechan",
|
||||
"repo": "Shuodedaoli-Deskpet"
|
||||
},
|
||||
"win": {
|
||||
"target": "nsis",
|
||||
"icon": "build/icon.png"
|
||||
},
|
||||
"mac": {
|
||||
"target": "dmg",
|
||||
"icon": "build/icon.png"
|
||||
},
|
||||
"linux": {
|
||||
"target": "AppImage",
|
||||
"icon": "build/icon.png"
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Kisechan/Shuodedaoli-Deskpet.git.git"
|
||||
},
|
||||
"keywords": [
|
||||
"electron",
|
||||
"vue3",
|
||||
"desktop-pet",
|
||||
"desktop-widget",
|
||||
"shuodedaoli",
|
||||
"meme",
|
||||
"fun-project",
|
||||
"opensource"
|
||||
],
|
||||
"author": "Kisechan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Kisechan/Shuodedaoli-Deskpet.git/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Kisechan/Shuodedaoli-Deskpet.git#readme",
|
||||
"dependencies": {
|
||||
"fs-extra": "^11.3.1",
|
||||
"howler": "^2.2.4",
|
||||
"vue": "^3.5.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"concurrently": "^9.2.0",
|
||||
"cross-env": "^10.0.0",
|
||||
"electron": "^37.2.6",
|
||||
"electron-builder": "^26.0.12",
|
||||
"vite": "^7.1.1",
|
||||
"wait-on": "^8.0.4"
|
||||
}
|
||||
}
|
24
renderer/.gitignore
vendored
Normal file
24
renderer/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
5
renderer/README.md
Normal file
5
renderer/README.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
13
renderer/index.html
Normal file
13
renderer/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue + TS</title>
|
||||
</head>
|
||||
<body style="background-color: transparent;">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
5713
renderer/package-lock.json
generated
Normal file
5713
renderer/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
renderer/package.json
Normal file
24
renderer/package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "renderer",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.0",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"concurrently": "^9.2.0",
|
||||
"electron-builder": "^26.0.12",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.0.4",
|
||||
"vue-tsc": "^2.2.12",
|
||||
"wait-on": "^8.0.4"
|
||||
}
|
||||
}
|
BIN
renderer/public/assets/sounds/cnmb.mp3
Normal file
BIN
renderer/public/assets/sounds/cnmb.mp3
Normal file
Binary file not shown.
BIN
renderer/public/assets/sounds/冲刺,冲.mp3
Normal file
BIN
renderer/public/assets/sounds/冲刺,冲.mp3
Normal file
Binary file not shown.
BIN
renderer/public/assets/sounds/哇袄.mp3
Normal file
BIN
renderer/public/assets/sounds/哇袄.mp3
Normal file
Binary file not shown.
BIN
renderer/public/assets/sounds/哎你怎么死了.mp3
Normal file
BIN
renderer/public/assets/sounds/哎你怎么死了.mp3
Normal file
Binary file not shown.
BIN
renderer/public/assets/sounds/哎,猪逼.mp3
Normal file
BIN
renderer/public/assets/sounds/哎,猪逼.mp3
Normal file
Binary file not shown.
BIN
renderer/public/assets/sounds/啊啊啊我草你妈呀.mp3
Normal file
BIN
renderer/public/assets/sounds/啊啊啊我草你妈呀.mp3
Normal file
Binary file not shown.
BIN
renderer/public/assets/sounds/嘟嘟嘟.mp3
Normal file
BIN
renderer/public/assets/sounds/嘟嘟嘟.mp3
Normal file
Binary file not shown.
BIN
renderer/public/assets/sounds/韭菜盒子.mp3
Normal file
BIN
renderer/public/assets/sounds/韭菜盒子.mp3
Normal file
Binary file not shown.
162
renderer/src/App.vue
Normal file
162
renderer/src/App.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import petGif from "./assets/pet.gif";
|
||||
import { Howl } from "howler";
|
||||
|
||||
// 状态管理
|
||||
const soundFiles = ref([]); // 存储从主进程获取的声音文件名列表
|
||||
const showTooltip = ref(false);
|
||||
const currentTooltip = ref("");
|
||||
const isLoading = ref(true); // 跟踪文件列表是否已加载
|
||||
|
||||
// 在组件挂载后,从主进程获取声音文件列表
|
||||
onMounted(async () => {
|
||||
if (window.electronAPI && typeof window.electronAPI.getSoundFiles === 'function') {
|
||||
try {
|
||||
soundFiles.value = await window.electronAPI.getSoundFiles();
|
||||
} catch (error) {
|
||||
console.error("获取声音文件列表失败:", error);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const playRandomSound = async () => {
|
||||
if (isLoading.value || soundFiles.value.length === 0) return;
|
||||
const randomSoundFile = soundFiles.value[Math.floor(Math.random() * soundFiles.value.length)];
|
||||
try {
|
||||
const audioUrl = await window.electronAPI.getSoundPath(randomSoundFile);
|
||||
if (audioUrl) new Howl({ src: [audioUrl], format: ["mp3"] }).play();
|
||||
} catch (err) {
|
||||
console.error("播放失败:", err);
|
||||
}
|
||||
currentTooltip.value = randomSoundFile.replace(/\.mp3$/, '');
|
||||
showTooltip.value = true;
|
||||
setTimeout(() => (showTooltip.value = false), 2000);
|
||||
};
|
||||
|
||||
const dragState = reactive({
|
||||
isDragging: false,
|
||||
hasMoved: false,
|
||||
// 分别记录鼠标和窗口的起始位置
|
||||
mouseStartX: 0,
|
||||
mouseStartY: 0,
|
||||
windowStartX: 0,
|
||||
windowStartY: 0,
|
||||
});
|
||||
|
||||
// 鼠标按下事件 (改为异步函数)
|
||||
async function handleMouseDown(event) {
|
||||
// 在拖动开始时,先获取窗口的当前位置
|
||||
const { x, y } = await window.electronAPI.getWindowPosition();
|
||||
dragState.windowStartX = x;
|
||||
dragState.windowStartY = y;
|
||||
|
||||
// 记录鼠标的初始位置
|
||||
dragState.mouseStartX = event.screenX;
|
||||
dragState.mouseStartY = event.screenY;
|
||||
|
||||
dragState.isDragging = true;
|
||||
dragState.hasMoved = false;
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
function handleMouseMove(event) {
|
||||
if (!dragState.isDragging) return;
|
||||
|
||||
// 计算鼠标从起点移动的距离(偏移量)
|
||||
const deltaX = event.screenX - dragState.mouseStartX;
|
||||
const deltaY = event.screenY - dragState.mouseStartY;
|
||||
|
||||
if (!dragState.hasMoved && (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5)) {
|
||||
dragState.hasMoved = true;
|
||||
}
|
||||
|
||||
// 计算窗口的新位置 = 窗口初始位置 + 鼠标偏移量
|
||||
const newWindowX = dragState.windowStartX + deltaX;
|
||||
const newWindowY = dragState.windowStartY + deltaY;
|
||||
|
||||
// 将计算出的正确位置发送给主进程
|
||||
window.electronAPI.moveWindow({ x: newWindowX, y: newWindowY });
|
||||
}
|
||||
|
||||
// 鼠标抬起事件
|
||||
function handleMouseUp() {
|
||||
// 如果鼠标按下后没有真正移动过,就认为这是一次点击
|
||||
if (dragState.isDragging && !dragState.hasMoved) {
|
||||
playRandomSound();
|
||||
}
|
||||
|
||||
// 状态重置
|
||||
dragState.isDragging = false;
|
||||
|
||||
// 移除全局监听器(非常重要)
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pet-container" @mousedown="handleMouseDown">
|
||||
<transition name="fade">
|
||||
<div v-if="showTooltip" class="tooltip">
|
||||
{{ currentTooltip }}
|
||||
</div>
|
||||
</transition>
|
||||
<img :src="petGif" class="pet-gif" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* 全局样式保持不变 */
|
||||
html, body, #app {
|
||||
background-color: transparent !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/* 样式大大简化 */
|
||||
.pet-container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none; /* 防止拖动时选中文本 */
|
||||
}
|
||||
|
||||
.pet-gif {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
/* 图片现在不接收任何鼠标事件,所有事件都由父容器处理 */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none; /* 提示框也不响应鼠标 */
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
BIN
renderer/src/assets/pet.gif
Normal file
BIN
renderer/src/assets/pet.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.5 MiB |
5
renderer/src/main.ts
Normal file
5
renderer/src/main.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
5
renderer/src/shims.d.ts
vendored
Normal file
5
renderer/src/shims.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
79
renderer/src/style.css
Normal file
79
renderer/src/style.css
Normal file
@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
1
renderer/src/vite-env.d.ts
vendored
Normal file
1
renderer/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
15
renderer/tsconfig.app.json
Normal file
15
renderer/tsconfig.app.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
7
renderer/tsconfig.json
Normal file
7
renderer/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
25
renderer/tsconfig.node.json
Normal file
25
renderer/tsconfig.node.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
11
renderer/vite.config.ts
Normal file
11
renderer/vite.config.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
base: './',
|
||||
build: {
|
||||
assetsInlineLimit: 0
|
||||
// 强制所有资源作为文件输出
|
||||
}
|
||||
})
|
Reference in New Issue
Block a user