Fix: 修复背景不透明的 bug

.gitignore

@@ -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-*

README.md

@@ -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
+- [ ] 更多的哇袄
+- [ ] 自定义更换不同的道理

main/main.js

@@ -0,0 +1,78 @@
+const { app, BrowserWindow, ipcMain } = require("electron");
+const path = require("path");
+const { spawn } = require('child_process')
+
+// 音效播放器
+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;
+  }
+});
+
+let mainWindow;
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 300,
+    height: 300,
+    transparent: true, // 开启透明窗口
+    frame: false,      // 无边框窗口
+    resizable: false,  // 禁止调整大小
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js"),
+      contextIsolation: true,
+      webSecurity: false,
+    },
+  });
+
+  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);

main/preload.js

@@ -0,0 +1,16 @@
+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),
+  showTooltip: (text) => ipcRenderer.send('show-tooltip', text),
+  onUpdatePosition: (callback) => {
+    ipcRenderer.on('update-position', (_, position) => callback(position))
+  }
+})

package.json

@@ -0,0 +1,74 @@
+{
+  "name": "shuodedaoli-deskpet",
+  "version": "0.1.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": "说的道理桌面宠物",
+    "copyright": "Copyright © 2025 Kisechan",
+    "directories": {
+      "output": "out"
+    },
+    "files": [
+      "main/",
+      "renderer/dist/",
+      "package.json"
+    ],
+    "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"
+  }
+}

renderer/.gitignore

@@ -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?

renderer/README.md

@@ -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).

renderer/index.html

@@ -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>

renderer/package.json

@@ -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"
+  }
+}

renderer/src/App.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { ref } from "vue";
+import petGif from "./assets/pet.gif";
+import { Howl } from "howler";
+
+// 配置数据
+const tooltips = [
+  "说的道理~",
+  "尊尼获加",
+  "为什么不开大！！",
+  "（凤鸣）",
+];
+const soundFiles = [
+  "cnmb.mp3",
+  "冲刺，冲.mp3",
+  "哎你怎么死了.mp3",
+  "哎，猪逼.mp3",
+  "啊啊啊我草你妈呀.mp3",
+  "嘟嘟嘟.mp3",
+  "韭菜盒子.mp3",
+  "哇袄.mp3",
+];
+
+// 状态管理
+const showTooltip = ref(false);
+const currentTooltip = ref("");
+
+// 点击事件处理
+const handleClick = async () => {
+  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"],
+      });
+      sound.play();
+    } else {
+      console.error("无法获取音频路径:", randomSoundFile);
+    }
+  } catch (err) {
+    console.error("播放失败:", err);
+  }
+
+  currentTooltip.value = tooltips[Math.floor(Math.random() * tooltips.length)];
+  showTooltip.value = true;
+  setTimeout(() => (showTooltip.value = false), 2000);
+};
+</script>
+
+<template>
+  <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 {
+  width: 300px;
+  height: 300px;
+  /* 将整个容器设置为可拖拽区域 */
+  -webkit-app-region: drag;
+}
+
+.pet-gif {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  user-select: none;
+  /* 设置图片为不可拖拽，以便响应点击事件 */
+  -webkit-app-region: no-drag;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: -40px;
+  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;
+  /* 确保提示框不会干扰拖拽 */
+  -webkit-app-region: no-drag;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

renderer/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

renderer/src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

renderer/src/style.css

@@ -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;
+  }
+}

renderer/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

renderer/tsconfig.app.json

@@ -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"]
+}

renderer/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

renderer/tsconfig.node.json

@@ -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"]
+}

renderer/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  base: './',
+  build: {
+    assetsInlineLimit: 0 
+    // 强制所有资源作为文件输出
+  }
+})