Feat: 添加托盘功能和响应的托盘菜单

Fix: 修正打包文件路径错误

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Kisechan
+Copyright (c) 2025 Kisechan <admin@kisechan.space>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -53,4 +53,4 @@ npm run start
 
 - [x] 更美观的说的道理，优化 UI
 - [ ] 更多的哇袄
-- [ ] 自定义更换不同的道理
+- [x] 自定义更换不同的道理

main/main.js

@@ -1,76 +1,250 @@
-const { app, BrowserWindow, ipcMain } = require("electron");
+const { app, BrowserWindow, ipcMain, Menu, Tray, nativeImage } = require("electron");
 const path = require("path");
-const { spawn } = require('child_process')
+const { spawn } = require("child_process");
 const fs = require("fs");
 
 app.disableHardwareAcceleration(); // 高 DPI 缩放修复
 
+let tray = null;
+let isQuiting = false;
+
 // 音效播放器
 function playAudioFile(filePath) {
-  if (process.platform === 'win32') {
+  if (process.platform === "win32") {
-    spawn('cmd', ['/c', `start "" "${filePath}"`])
+    spawn("cmd", ["/c", `start "" "${filePath}"`]);
-  } else if (process.platform === 'darwin') {
+  } else if (process.platform === "darwin") {
-    spawn('afplay', [filePath])
+    spawn("afplay", [filePath]);
   } else {
-    spawn('aplay', [filePath])
+    spawn("aplay", [filePath]);
   }
 }
 
-ipcMain.on('play-sound', (_, soundFile) => {
+ipcMain.on("play-sound", (_, soundFile) => {
   let soundPath;
 
   // 判断是开发环境还是生产环境
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === "development") {
     // 在开发模式下，直接指向 renderer/public 里的文件
-    soundPath = path.join(__dirname, '../renderer/public/assets/sounds', soundFile);
+    soundPath = path.join(
+      __dirname,
+      "../renderer/public/sounds",
+      soundFile
+    );
   } else {
     // 在生产模式下，Vite 会把 public 里的文件复制到 dist 文件夹
-    soundPath = path.join(__dirname, '../renderer/dist/assets/sounds', soundFile);
+    soundPath = path.join(
+      __dirname,
+      "../renderer/dist/sounds",
+      soundFile
+    );
   }
 
-  console.log('Main process trying to play sound at path:', soundPath);
+  console.log("Main process trying to play sound at path:", soundPath);
 
-  if (require('fs').existsSync(soundPath)) {
+  if (require("fs").existsSync(soundPath)) {
     playAudioFile(soundPath);
   } else {
-    console.error('Sound file not found:', soundPath);
+    console.error("Sound file not found:", soundPath);
   }
 });
 
-ipcMain.handle('get-sound-path', (_, soundFile) => {
+ipcMain.handle("get-sound-path", (_, soundFile) => {
   let soundPath;
 
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === "development") {
-    soundPath = path.join(__dirname, '../renderer/public/assets/sounds', soundFile);
+    soundPath = path.join(
+      __dirname,
+      "../renderer/public/sounds",
+      soundFile
+    );
   } else {
-    soundPath = path.join(__dirname, '../renderer/dist/assets/sounds', soundFile);
+    soundPath = path.join(
+      __dirname,
+      "../renderer/dist/sounds",
+      soundFile
+    );
   }
 
-  if (require('fs').existsSync(soundPath)) {
+  if (require("fs").existsSync(soundPath)) {
     // 返回一个可供 web 环境使用的 file 协议 URL
     return `file://${soundPath}`;
   } else {
-    console.error('Sound file not found:', soundPath);
+    console.error("Sound file not found:", soundPath);
     return null;
   }
 });
 
-ipcMain.handle('get-sound-files', async () => {
+ipcMain.handle("get-sound-files", async () => {
-  const soundDir = process.env.NODE_ENV === 'development'
+  const soundDir =
-    ? path.join(__dirname, '../renderer/public/assets/sounds')
+    process.env.NODE_ENV === "development"
-    : path.join(__dirname, '../renderer/dist/assets/sounds');
+      ? path.join(__dirname, "../renderer/public/sounds")
+      : path.join(__dirname, "../renderer/dist/sounds");
 
   try {
     // 读取目录下的所有文件名
     const files = await fs.promises.readdir(soundDir);
     // 筛选出 .mp3 文件并返回
-    return files.filter(file => file.endsWith('.mp3'));
+    return files.filter((file) => file.endsWith(".mp3"));
   } catch (error) {
-    console.error('无法读取声音目录:', error);
+    console.error("无法读取声音目录:", error);
     return []; // 如果出错则返回空数组
   }
 });
 
+// 持久化用户设置 (用于保存所选宠物素材文件名)
+const settingsFile = path.join(app.getPath('userData') || __dirname, 'settings.json');
+
+ipcMain.handle('get-pet-selection', async () => {
+  try {
+    if (fs.existsSync(settingsFile)) {
+      const data = JSON.parse(await fs.promises.readFile(settingsFile, 'utf8'));
+      return data.petAsset || null;
+    }
+  } catch (err) {
+    console.error('读取设置失败:', err);
+  }
+  return null;
+});
+
+ipcMain.handle('set-pet-selection', async (_, petAsset) => {
+  try {
+    let data = {};
+    if (fs.existsSync(settingsFile)) {
+      try {
+        data = JSON.parse(await fs.promises.readFile(settingsFile, 'utf8')) || {};
+      } catch (e) {
+        data = {};
+      }
+    }
+    data.petAsset = petAsset;
+    await fs.promises.writeFile(settingsFile, JSON.stringify(data, null, 2), 'utf8');
+    return true;
+  } catch (err) {
+    console.error('写入设置失败:', err);
+    return false;
+  }
+});
+
+ipcMain.on("show-context-menu", async () => {
+  // 尝试动态读取 renderer 下的 public/pets 目录，开发/生产路径均尝试
+  const devAssets = path.join(__dirname, "../renderer/public/pets");
+  const prodAssets = path.join(__dirname, "../renderer/dist/pets");
+  let assetsDir = null;
+  if (fs.existsSync(devAssets)) assetsDir = devAssets;
+  else if (fs.existsSync(prodAssets)) assetsDir = prodAssets;
+
+  // 读取当前保存的选择（文件名）
+  let currentSelection = null;
+  try {
+    if (fs.existsSync(settingsFile)) {
+      const data = JSON.parse(await fs.promises.readFile(settingsFile, 'utf8')) || {};
+      currentSelection = data.petAsset || null;
+    }
+  } catch (e) {
+    console.error('读取当前选择失败:', e);
+  }
+
+  // 构建素材菜单项，如果无法读取目录，则提供一个默认值
+  let assetItems = [];
+  try {
+    if (assetsDir) {
+      const files = await fs.promises.readdir(assetsDir);
+      const imgs = files.filter(f => /\.(png|jpg|jpeg|gif)$/i.test(f));
+      assetItems = imgs.map((f) => {
+        const nameWithoutExt = f.replace(/\.[^.]+$/, '');
+        const displayLabel = nameWithoutExt + (/\.gif$/i.test(f) ? '（可动）' : '');
+        return ({
+          label: displayLabel,
+          type: 'radio',
+          checked: f === currentSelection,
+          click: async () => {
+          try {
+            // 写入 settings.json
+            let data = {};
+            if (fs.existsSync(settingsFile)) {
+              try { data = JSON.parse(await fs.promises.readFile(settingsFile, 'utf8')) || {}; } catch (e) { data = {}; }
+            }
+            data.petAsset = f;
+            await fs.promises.writeFile(settingsFile, JSON.stringify(data, null, 2), 'utf8');
+            // 通知渲染进程更新
+            if (mainWindow && mainWindow.webContents) {
+              mainWindow.webContents.send('pet-selection-changed', f);
+            }
+          } catch (err) {
+            console.error('写入选择失败:', err);
+          }
+        }
+        });
+      });
+    }
+  } catch (err) {
+    console.error('读取 assets 目录失败:', err);
+    assetItems = [];
+  }
+
+  // 如果没有任何可用素材，提供占位项
+  if (assetItems.length === 0) {
+    assetItems = [
+      { label: '（无可用素材）', enabled: false }
+    ];
+  }
+
+  const template = [
+    {
+      label: "置顶显示",
+      type: "checkbox",
+      checked: isAlwaysOnTop,
+      click: () => {
+        isAlwaysOnTop = !isAlwaysOnTop;
+        if (mainWindow) mainWindow.setAlwaysOnTop(isAlwaysOnTop);
+      },
+    },
+    { type: 'separator' },
+    {
+      label: '选择素材',
+      submenu: assetItems,
+    },
+    { type: 'separator' },
+    {
+      label: "退出",
+  click: () => { isQuiting = true; app.quit(); },
+    },
+  ];
+
+  const menu = Menu.buildFromTemplate(template);
+  menu.popup({ window: mainWindow });
+});
+
+// 提供给渲染进程：列出 public/pets 中的素材文件（开发/生产路径）
+ipcMain.handle('get-pet-files', async () => {
+  const devDir = path.join(__dirname, '../renderer/public/pets');
+  const prodDir = path.join(__dirname, '../renderer/dist/pets');
+  const dir = fs.existsSync(devDir) ? devDir : (fs.existsSync(prodDir) ? prodDir : null);
+  if (!dir) return [];
+  try {
+    const files = await fs.promises.readdir(dir);
+    return files.filter(f => /\.(png|jpg|jpeg|gif)$/i.test(f));
+  } catch (e) {
+    console.error('读取 pets 目录失败:', e);
+    return [];
+  }
+});
+
+ipcMain.handle('get-pet-url', (_, fileName) => {
+  // 在开发时，public 文件由 dev server 以根路径提供
+  if (process.env.NODE_ENV === 'development') {
+    return `http://localhost:5173/pets/${encodeURIComponent(fileName)}`;
+  }
+  // 生产时，从 dist/pets 返回 file:// URL
+  const prodPath = path.join(__dirname, '../renderer/dist/pets', fileName);
+  if (fs.existsSync(prodPath)) return `file://${prodPath}`;
+  // fallback: try public path in source tree
+  const devPath = path.join(__dirname, '../renderer/public/pets', fileName);
+  if (fs.existsSync(devPath)) return `file://${devPath}`;
+  return null;
+});
+
+let isAlwaysOnTop = true;
 let mainWindow;
 
 function createWindow() {
@@ -80,8 +254,10 @@ function createWindow() {
     transparent: true,  // 开启透明窗口
     frame: false,       // 无边框窗口
     resizable: false,   // 禁止调整大小
-    title: "说的道理桌宠",
+    title: "说的道理桌面宠物（前端）",
-    icon: path.join(__dirname, '../build/icon.png'),
+    alwaysOnTop: isAlwaysOnTop,   // 窗口始终在最上层
+    skipTaskbar: true,  // 不在任务栏显示
+    icon: path.join(__dirname, "../build/icon.png"),
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
       contextIsolation: true,
@@ -89,14 +265,31 @@ function createWindow() {
     },
   });
 
+  // 创建托盘图标
+  try {
+    // 修改托盘图标路径以确保在开发和生产环境中正确加载
+    const iconPath = process.env.NODE_ENV === "development"
+      ? path.join(__dirname, "../assets/icon.ico") // 开发环境路径
+      : path.join(process.resourcesPath, "assets/icon.ico"); // 生产环境路径
+
+    const trayIcon = nativeImage.createFromPath(iconPath);
+    if (trayIcon.isEmpty()) {
+      console.error("托盘图标加载失败，路径:", iconPath);
+    } else {
+      tray = new Tray(trayIcon);
+    }
+  } catch (e) {
+    console.error('创建托盘失败:', e);
+  }
+
   // 当渲染进程传来这个事件时，就移动窗口
-  ipcMain.on('move-window', (event, { x, y }) => {
+  ipcMain.on("move-window", (event, { x, y }) => {
     // 使用 Math.round 避免非整数坐标可能带来的问题
     mainWindow.setPosition(Math.round(x), Math.round(y), false);
   });
 
   // 添加一个 handle，用于响应前端获取窗口位置的请求
-  ipcMain.handle('get-window-position', () => {
+  ipcMain.handle("get-window-position", () => {
     if (mainWindow) {
       const [x, y] = mainWindow.getPosition();
       return { x, y };
@@ -109,6 +302,23 @@ function createWindow() {
   } else {
     mainWindow.loadFile(path.join(__dirname, "../renderer/dist/index.html"));
   }
+
+  // 启动时显示窗口（允许随后最小化到托盘）
+  try { mainWindow.show(); } catch (e) {}
+
+  // 最小化时隐藏到托盘
+  mainWindow.on('minimize', (event) => {
+    event.preventDefault();
+    mainWindow.hide();
+  });
+
+  // 关闭窗口时隐藏到托盘，除非用户选择真正退出
+  mainWindow.on('close', (event) => {
+    if (!isQuiting) {
+      event.preventDefault();
+      mainWindow.hide();
+    }
+  });
 }
 
 app.whenReady().then(createWindow);

main/preload.js

@@ -10,11 +10,19 @@ contextBridge.exposeInMainWorld('electronAPI', {
   },
   getSoundPath: (soundFile) => ipcRenderer.invoke('get-sound-path', soundFile),
   getSoundFiles: () => ipcRenderer.invoke('get-sound-files'),
+  getPetSelection: () => ipcRenderer.invoke('get-pet-selection'),
+  setPetSelection: (petAsset) => ipcRenderer.invoke('set-pet-selection', petAsset),
+  onPetSelectionChanged: (callback) => {
+    ipcRenderer.on('pet-selection-changed', (_, fileName) => callback(fileName));
+  },
+  getPetFiles: () => ipcRenderer.invoke('get-pet-files'),
+  getPetUrl: (fileName) => ipcRenderer.invoke('get-pet-url', fileName),
   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')
+  getWindowPosition: () => ipcRenderer.invoke('get-window-position'),
+  showContextMenu: () => ipcRenderer.send('show-context-menu')
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shuodedaoli-deskpet",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A cute desktop pet of 'Shuodedaoli' built with Electron and Vue 3.",
   "main": "main/main.js",
   "scripts": {
@@ -25,9 +25,9 @@
       "allowToChangeInstallationDirectory": true,
       "perMachine": false,
       "allowElevation": false,
-      "installerIcon": "build/icon.ico",
+      "installerIcon": "assets/icon.ico",
-      "uninstallerIcon": "build/icon.ico",
+      "uninstallerIcon": "assets/icon.ico",
-      "installerHeaderIcon": "build/icon.ico",
+      "installerHeaderIcon": "assets/icon.ico",
       "installerLanguages": ["zh_CN", "en_US"],
       "language": "2052"
     },
@@ -43,15 +43,15 @@
     },
     "win": {
       "target": "nsis",
-      "icon": "build/icon.png"
+      "icon": "assets/icon.png"
     },
     "mac": {
       "target": "dmg",
-      "icon": "build/icon.png"
+      "icon": "assets/icon.png"
     },
     "linux": {
       "target": "AppImage",
-      "icon": "build/icon.png"
+      "icon": "assets/icon.png"
     }
   },
   "repository": {

renderer/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="assets/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>说的道理桌宠</title>
   </head>
   <body style="background-color: transparent;">
     <div id="app"></div>

renderer/src/App.vue

@@ -1,113 +1,211 @@
 <script setup>
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, computed } from "vue";
-import petGif from "./assets/pet.gif";
 import { Howl } from "howler";
 
-// 状态管理
+import defaultPet from "/public/pets/普通型道理.gif";
-const soundFiles = ref([]);   // 存储从主进程获取的声音文件名列表
+
+// 状态
+const soundFiles = ref([]);
 const showTooltip = ref(false);
 const currentTooltip = ref("");
-const isLoading = ref(true);  // 跟踪文件列表是否已加载
+const isLoading = ref(true);
+const isPlaying = ref(false);
 
-// 在组件挂载后，从主进程获取声音文件列表
+// 处理宠物素材选择
+const assetPreviews = ref([]); // { name, fileName, url }
+const selectedAsset = ref(null); // 将保存为 URL
+const showSettings = ref(false);
+
+const selectedAssetName = computed(() => {
+  if (!selectedAsset.value) return null;
+  const match = assetPreviews.value.find(p => p.url === selectedAsset.value);
+  if (match) return match.name;
+  // fallback: 从 URL 中取最后一段
+  const parts = selectedAsset.value.split('/');
+  return parts[parts.length - 1];
+});
+
+async function loadSavedSelection() {
+  // 优先从主进程读取持久化选择（返回 fileName）
+  try {
+    if (window.electronAPI && typeof window.electronAPI.getPetSelection === 'function') {
+      const fileName = await window.electronAPI.getPetSelection();
+      if (fileName) {
+        const match = assetPreviews.value.find(p => p.fileName === fileName);
+        if (match) {
+          selectedAsset.value = match.url;
+          return;
+        }
+        // 如果 assetPreviews 中没有，但文件名存在，尝试直接请求 URL
+        if (window.electronAPI && typeof window.electronAPI.getPetUrl === 'function') {
+          const url = await window.electronAPI.getPetUrl(fileName);
+          if (url) { selectedAsset.value = url; return; }
+        }
+      }
+    }
+  } catch (e) {
+    console.error('读取保存的宠物素材失败:', e);
+  }
+  // fallback: localStorage
+  try {
+    const ls = localStorage.getItem('petAsset');
+    if (ls) {
+      const match = assetPreviews.value.find(p => p.fileName === ls);
+      if (match) { selectedAsset.value = match.url; return; }
+      if (window.electronAPI && typeof window.electronAPI.getPetUrl === 'function') {
+        const url = await window.electronAPI.getPetUrl(ls);
+        if (url) selectedAsset.value = url;
+      }
+    }
+  } catch (e) {
+    // ignore
+  }
+}
+
+async function saveSelection(assetPath) {
+  const fileName = assetPath.replace(/^.*\//, '');
+  // 保存到主进程
+  if (window.electronAPI && typeof window.electronAPI.setPetSelection === 'function') {
+    try {
+      await window.electronAPI.setPetSelection(fileName);
+    } catch (e) {
+      console.error('保存宠物素材失败:', e);
+    }
+  }
+  // fallback: localStorage
+  try { localStorage.setItem('petAsset', fileName); } catch (_) {}
+}
+
+// 初始化
 onMounted(async () => {
+  // 加载声音文件列表
   if (window.electronAPI && typeof window.electronAPI.getSoundFiles === 'function') {
     try {
       soundFiles.value = await window.electronAPI.getSoundFiles();
-    } catch (error) {
+    } catch (err) {
-      console.error("获取声音文件列表失败:", error);
+      console.error("获取声音文件列表失败:", err);
     } finally {
       isLoading.value = false;
     }
   }
+  // 从主进程读取 public/pets 下的素材文件名，然后为每个文件请求可用 URL
+  try {
+    if (window.electronAPI && typeof window.electronAPI.getPetFiles === 'function') {
+      const files = await window.electronAPI.getPetFiles();
+      const previews = await Promise.all(files.map(async (file) => {
+        const url = await window.electronAPI.getPetUrl(file);
+        const name = file.replace(/\.[^.]+$/, '');
+        const displayName = name + (/\.gif$/i.test(file) ? '（可动）' : '');
+        return { fileName: file, url, name: displayName };
+      }));
+      assetPreviews.value = previews;
+    }
+  } catch (e) {
+    console.error('获取 pets 列表失败:', e);
+  }
+
+  // 加载并应用保存的选择（依赖于 assetPreviews 已构建）
+  await loadSavedSelection();
+
+  // 监听主进程通过右键菜单发来的选择变更
+  if (window.electronAPI && typeof window.electronAPI.onPetSelectionChanged === 'function') {
+    window.electronAPI.onPetSelectionChanged(async (fileName) => {
+      const match = assetPreviews.value.find(p => p.fileName === fileName);
+      if (match) selectedAsset.value = match.url;
+    });
+  }
 });
 
+const petGifUrl = computed(() => selectedAsset.value || defaultPet);
+
 const playRandomSound = async () => {
+  if (isPlaying.value) return;
   if (isLoading.value || soundFiles.value.length === 0) return;
   const randomSoundFile = soundFiles.value[Math.floor(Math.random() * soundFiles.value.length)];
+  isPlaying.value = true;
   try {
     const audioUrl = await window.electronAPI.getSoundPath(randomSoundFile);
-    if (audioUrl) new Howl({ src: [audioUrl], format: ["mp3"] }).play();
+    if (audioUrl) {
+      new Howl({
+        src: [audioUrl],
+        format: ["mp3"],
+        onend: function() {
+          showTooltip.value = false;
+          isPlaying.value = false;
+        }
+      }).play();
+    } else {
+      isPlaying.value = false;
+    }
   } catch (err) {
+    isPlaying.value = false;
     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) {
-  // 在拖动开始时，先获取窗口的当前位置
+  if (event.button !== 0) return;
   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;
-  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();
-  if (dragState.isDragging && !dragState.hasMoved) {
-    playRandomSound();
-  }
-
-  // 状态重置
   dragState.isDragging = false;
-  
-  // 移除全局监听器(非常重要)
   window.removeEventListener('mousemove', handleMouseMove);
   window.removeEventListener('mouseup', handleMouseUp);
 }
+
+function handleRightClick() { window.electronAPI.showContextMenu(); }
+
+async function chooseAsset(entry) {
+  // entry is { fileName, url, name }
+  selectedAsset.value = entry.url;
+  await saveSelection(entry.fileName);
+  showSettings.value = false;
+}
 </script>
 
 <template>
-  <div class="pet-container" @mousedown="handleMouseDown">
+  <div 
+    class="pet-container" 
+    @mousedown="handleMouseDown"
+    @contextmenu.prevent="handleRightClick"
+  >
     <transition name="fade">
       <div v-if="showTooltip" class="tooltip">
         {{ currentTooltip }}
       </div>
     </transition>
-    <img :src="petGif" class="pet-gif" />
+    <img :src="petGifUrl" class="pet-gif" />
   </div>
 </template>