feat: improve updater UX (closes #16)

Author: legeling

README.md

@@ -389,7 +389,7 @@ If PromptHub is helpful to your work, feel free to buy the author a coffee!
         <b>微信支付 / WeChat Pay</b>
       </td>
       <td align="center">
-        <img src="./docs/imgs/donate/alipay.jpg" width="200" alt="Alipay"/>
+        <img src="./docs/imgs/donate/alipay.png" width="200" alt="Alipay"/>
         <br/>
         <b>支付宝 / Alipay</b>
       </td>

electron-builder.json

@@ -90,6 +90,10 @@
   "publish": {
     "provider": "github",
     "owner": "legeling",
-    "repo": "PromptHub"
+    "repo": "PromptHub",
+    "releaseType": "release"
+  },
+  "releaseInfo": {
+    "releaseNotesFile": "CHANGELOG.md"
   }
 }

src/main/updater.ts

@@ -1,4 +1,4 @@
-import { BrowserWindow, ipcMain, app } from 'electron';
+import { BrowserWindow, ipcMain, app, shell } from 'electron';
 import type { UpdateInfo as ElectronUpdateInfo } from 'electron-updater';
 import { autoUpdater } from 'electron-updater';
 
@@ -52,6 +52,9 @@ function toSimpleInfo(info: ElectronUpdateInfo): SimpleUpdateInfo {
 }
 
 let mainWindow: BrowserWindow | null = null;
+let lastPercent = 0; // 跟踪上次进度，防止进度回退
+
+const isMac = process.platform === 'darwin';
 
 export interface UpdateStatus {
   status: 'checking' | 'available' | 'not-available' | 'downloading' | 'downloaded' | 'error';
@@ -107,6 +110,13 @@ export function initUpdater(win: BrowserWindow) {
 
   // 下载进度
   autoUpdater.on('download-progress', (progress: ProgressInfo) => {
+    // 防止进度回退（electron-updater 下载多个文件时会重置进度）
+    if (progress.percent < lastPercent && lastPercent < 99) {
+      // 进度回退时，保持上次进度
+      console.info(`Download progress (ignored regression): ${progress.percent.toFixed(2)}% -> keeping ${lastPercent.toFixed(2)}%`);
+      return;
+    }
+    lastPercent = progress.percent;
     console.info(`Download progress: ${progress.percent.toFixed(2)}%`);
     sendStatusToWindow({
       status: 'downloading',
@@ -159,6 +169,7 @@ export function registerUpdaterIPC() {
       return { success: false, error: 'Download disabled in development mode' };
     }
     try {
+      lastPercent = 0; // 重置进度跟踪
       await autoUpdater.downloadUpdate();
       return { success: true };
     } catch (error) {
@@ -170,7 +181,27 @@ export function registerUpdaterIPC() {
   // 安装更新并重启
   ipcMain.handle('updater:install', async () => {
     if (!isDev) {
-      autoUpdater.quitAndInstall(false, true);
+      if (isMac) {
+        // macOS: 打开下载目录让用户手动安装
+        // 因为没有代码签名，自动安装会失败
+        const downloadDir = app.getPath('downloads');
+        shell.openPath(downloadDir);
+        return { success: true, manual: true };
+      } else {
+        // Windows/Linux: 自动安装
+        autoUpdater.quitAndInstall(false, true);
+        return { success: true, manual: false };
+      }
     }
   });
+
+  // 获取平台信息
+  ipcMain.handle('updater:platform', () => {
+    return process.platform;
+  });
+
+  // 打开 GitHub Releases 页面
+  ipcMain.handle('updater:openReleases', () => {
+    shell.openExternal('https://github.com/legeling/PromptHub/releases');
+  });
 }

src/preload/index.ts

@@ -119,6 +119,8 @@ contextBridge.exposeInMainWorld('electron', {
     download: () => ipcRenderer.invoke('updater:download'),
     install: () => ipcRenderer.invoke('updater:install'),
     getVersion: () => ipcRenderer.invoke('updater:version'),
+    getPlatform: () => ipcRenderer.invoke('updater:platform'),
+    openReleases: () => ipcRenderer.invoke('updater:openReleases'),
     onStatus: (callback: (status: any) => void) => {
       ipcRenderer.on('updater:status', (_event, status) => callback(status));
     },
@@ -183,8 +185,10 @@ declare global {
       updater?: {
         check: () => Promise<{ success: boolean; result?: any; error?: string }>;
         download: () => Promise<{ success: boolean; error?: string }>;
-        install: () => Promise<void>;
+        install: () => Promise<{ success: boolean; manual?: boolean } | void>;
         getVersion: () => Promise<string>;
+        getPlatform: () => Promise<string>;
+        openReleases: () => Promise<void>;
         onStatus: (callback: (status: any) => void) => void;
         offStatus: () => void;
       };

src/renderer/App.tsx

@@ -32,13 +32,18 @@ function App() {
   // Close dialog state (Windows)
   const [showCloseDialog, setShowCloseDialog] = useState(false);
 
+  // 更新状态（用于顶部栏显示更新提示）
+  const [updateAvailable, setUpdateAvailable] = useState<UpdateStatus | null>(null);
+
   useEffect(() => {
     // Listen for update status
     const handleStatus = (status: UpdateStatus) => {
-      // If update available, show dialog
+      // If update available, save status for TopBar indicator (don't auto-show dialog)
       if (status.status === 'available') {
+        setUpdateAvailable(status);
         setInitialUpdateStatus(status);
-        setShowUpdateDialog(true);
+        // 不再自动弹窗，用户点击顶部栏提示后才显示
+        // setShowUpdateDialog(true);
       }
     };
 
@@ -251,7 +256,11 @@ function App() {
           {/* 主内容区 */}
           <div className="flex flex-1 flex-col overflow-hidden">
             {/* 顶部栏 */}
-            <TopBar onOpenSettings={() => setCurrentPage('settings')} />
+            <TopBar 
+              onOpenSettings={() => setCurrentPage('settings')} 
+              updateAvailable={updateAvailable}
+              onShowUpdateDialog={() => setShowUpdateDialog(true)}
+            />
 
             {/* 页面内容 */}
             {currentPage === 'home' ? (

src/renderer/components/UpdateDialog.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { DownloadIcon, CheckCircleIcon, XIcon, Loader2Icon, RefreshCwIcon } from 'lucide-react';
+import { DownloadIcon, CheckCircleIcon, XIcon, Loader2Icon, RefreshCwIcon, FolderOpenIcon, ExternalLinkIcon } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
@@ -35,6 +35,7 @@ export function UpdateDialog({ isOpen, onClose, initialStatus }: UpdateDialogPro
   const { t } = useTranslation();
   const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(initialStatus || null);
   const [currentVersion, setCurrentVersion] = useState<string>('');
+  const [platform, setPlatform] = useState<string>('');
 
   useEffect(() => {
     if (initialStatus) {
@@ -43,8 +44,9 @@ export function UpdateDialog({ isOpen, onClose, initialStatus }: UpdateDialogPro
   }, [initialStatus]);
 
   useEffect(() => {
-    // 获取当前版本
+    // 获取当前版本和平台
     window.electron?.updater?.getVersion().then(setCurrentVersion);
+    window.electron?.updater?.getPlatform?.().then(setPlatform);
 
     // 监听更新状态
     const handleStatus = (status: UpdateStatus) => {
@@ -216,6 +218,7 @@ export function UpdateDialog({ isOpen, onClose, initialStatus }: UpdateDialogPro
         );
 
       case 'downloaded':
+        const isMac = platform === 'darwin';
         return (
           <div className="py-4">
             <div className="flex items-center gap-3 mb-4">
@@ -225,16 +228,30 @@ export function UpdateDialog({ isOpen, onClose, initialStatus }: UpdateDialogPro
               <div>
                 <h3 className="font-semibold text-lg">{t('settings.downloadComplete')}</h3>
                 <p className="text-sm text-muted-foreground">
-                  {t('settings.downloadCompleteDesc')}
+                  {isMac ? '' : t('settings.downloadCompleteDesc')}
                 </p>
               </div>
             </div>
+            {isMac && (
+              <div className="mb-4 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                <p className="text-sm text-amber-600 dark:text-amber-400 whitespace-pre-line">
+                  {t('settings.macManualInstall')}
+                </p>
+              </div>
+            )}
             <div className="flex gap-2">
               <button
                 onClick={handleInstall}
                 className="flex-1 flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors"
               >
-                {t('settings.installNow')}
+                {isMac ? (
+                  <>
+                    <FolderOpenIcon className="w-4 h-4" />
+                    {t('settings.openDownloadFolder')}
+                  </>
+                ) : (
+                  t('settings.installNow')
+                )}
               </button>
               <button
                 onClick={onClose}
@@ -253,12 +270,22 @@ export function UpdateDialog({ isOpen, onClose, initialStatus }: UpdateDialogPro
               <XIcon className="w-6 h-6 text-red-500" />
             </div>
             <h3 className="font-semibold text-lg mb-1 text-red-500">{t('common.error')}</h3>
-            <p className="text-sm text-muted-foreground break-all whitespace-pre-wrap max-h-40 overflow-y-auto">
+            <p className="text-sm text-muted-foreground break-all whitespace-pre-wrap max-h-32 overflow-y-auto mb-4">
               {updateStatus.error}
             </p>
+            <div className="p-3 rounded-lg bg-muted/50 mb-4">
+              <p className="text-sm text-muted-foreground mb-2">{t('settings.manualDownloadHint')}</p>
+              <button
+                onClick={() => window.electron?.updater?.openReleases()}
+                className="flex items-center justify-center gap-2 w-full px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors"
+              >
+                <ExternalLinkIcon className="w-4 h-4" />
+                {t('settings.manualDownload')}
+              </button>
+            </div>
             <button
               onClick={handleCheckUpdate}
-              className="mt-4 px-4 py-2 rounded-lg bg-muted hover:bg-muted/80 transition-colors"
+              className="px-4 py-2 rounded-lg bg-muted hover:bg-muted/80 transition-colors"
             >
               {t('settings.checkUpdate')}
             </button>

src/renderer/components/layout/MainContent.tsx

@@ -6,6 +6,7 @@ import { StarIcon, CopyIcon, HistoryIcon, HashIcon, SparklesIcon, EditIcon, Tras
 import { EditPromptModal, VersionHistoryModal, VariableInputModal, PromptListHeader, PromptListView, PromptTableView, AiTestModal, PromptDetailModal, PromptGalleryView } from '../prompt';
 import { ContextMenu, ContextMenuItem } from '../ui/ContextMenu';
 import { ImagePreviewModal } from '../ui/ImagePreviewModal';
+import { LocalImage } from '../ui/LocalImage';
 import { ConfirmDialog } from '../ui/ConfirmDialog';
 import { useToast } from '../ui/Toast';
 import { chatCompletion, buildMessagesFromPrompt, multiModelCompare, AITestResult, StreamCallbacks } from '../../services/ai';
@@ -832,10 +833,11 @@ export function MainContent() {
                   <div className="flex flex-wrap gap-3">
                     {selectedPrompt.images.map((img, index) => (
                       <div key={index} className="rounded-lg overflow-hidden border border-border shadow-sm">
-                        <img
-                          src={`local-image://${img}`}
+                        <LocalImage
+                          src={img}
                           alt={`image-${index}`}
                           className="max-w-[160px] max-h-[160px] object-cover hover:scale-105 transition-transform duration-300 cursor-pointer"
+                          fallbackClassName="w-[160px] h-[120px]"
                           onClick={() => setPreviewImage(img)}
                         />
                       </div>

src/renderer/components/layout/TopBar.tsx

@@ -1,4 +1,5 @@
-import { SearchIcon, PlusIcon, SettingsIcon, SunIcon, MoonIcon } from 'lucide-react';
+import { SearchIcon, PlusIcon, SettingsIcon, SunIcon, MoonIcon, DownloadIcon } from 'lucide-react';
+import { UpdateStatus } from '../UpdateDialog';
 import { usePromptStore } from '../../stores/prompt.store';
 import { useSettingsStore } from '../../stores/settings.store';
 import { useFolderStore } from '../../stores/folder.store';
@@ -8,9 +9,11 @@ import { useTranslation } from 'react-i18next';
 
 interface TopBarProps {
   onOpenSettings: () => void;
+  updateAvailable?: UpdateStatus | null;
+  onShowUpdateDialog?: () => void;
 }
 
-export function TopBar({ onOpenSettings }: TopBarProps) {
+export function TopBar({ onOpenSettings, updateAvailable, onShowUpdateDialog }: TopBarProps) {
   const { t } = useTranslation();
   const searchQuery = usePromptStore((state) => state.searchQuery);
   const setSearchQuery = usePromptStore((state) => state.setSearchQuery);
@@ -94,6 +97,19 @@ export function TopBar({ onOpenSettings }: TopBarProps) {
 
         {/* 右侧操作按钮 - 只有按钮本身不可拖动 */}
         <div className="flex items-center gap-1 ml-4">
+          {/* 更新提示 */}
+          {updateAvailable && updateAvailable.status === 'available' && (
+            <button
+              onClick={onShowUpdateDialog}
+              className="flex items-center gap-1.5 h-8 px-3 rounded-lg bg-green-500/10 text-green-600 dark:text-green-400 text-sm font-medium hover:bg-green-500/20 transition-colors animate-pulse"
+              style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+              title={t('settings.updateAvailable')}
+            >
+              <DownloadIcon className="w-4 h-4" />
+              <span className="hidden sm:inline">{t('settings.newVersion', { version: updateAvailable.info?.version })}</span>
+            </button>
+          )}
+
           {/* 新建按钮 */}
           <button
             onClick={() => setIsCreateModalOpen(true)}

src/renderer/components/prompt/PromptDetailModal.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { StarIcon, HashIcon, ClockIcon, CopyIcon, CheckIcon, SparklesIcon, EditIcon, MaximizeIcon, MinimizeIcon, GlobeIcon } from 'lucide-react';
 import { Modal } from '../ui/Modal';
 import { ImagePreviewModal } from '../ui/ImagePreviewModal';
+import { LocalImage } from '../ui/LocalImage';
 import type { Prompt } from '../../../shared/types';
 import { useEffect, useMemo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -237,10 +238,11 @@ export function PromptDetailModal({
             <div className="flex flex-wrap gap-4">
               {prompt.images.map((img, index) => (
                 <div key={index} className="rounded-lg overflow-hidden border border-border shadow-sm">
-                  <img
-                    src={`local-image://${img}`}
+                  <LocalImage
+                    src={img}
                     alt={`image-${index}`}
                     className="max-w-[200px] max-h-[200px] object-cover hover:scale-105 transition-transform duration-300 cursor-pointer"
+                    fallbackClassName="w-[200px] h-[150px]"
                     onClick={() => setPreviewImage(img)}
                   />
                 </div>

src/renderer/components/prompt/PromptGalleryView.tsx

@@ -1,5 +1,5 @@
 
-import { useRef, memo } from 'react';
+import { useRef, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Prompt } from '../../../shared/types';
 import { ImageIcon, FolderIcon, HashIcon, MoreHorizontalIcon, StarIcon, EditIcon, TrashIcon, CopyIcon, PlayIcon, HistoryIcon } from 'lucide-react';
@@ -29,7 +29,8 @@ const GalleryCard = memo(({
     onToggleFavorite: (e: React.MouseEvent) => void;
     folderName?: string;
 }) => {
-    const imageSrc = prompt.images && prompt.images.length > 0
+    const [imageError, setImageError] = useState(false);
+    const imageSrc = prompt.images && prompt.images.length > 0 && !imageError
         ? `local-image://${prompt.images[0]}`
         : null;
 
@@ -46,6 +47,7 @@ const GalleryCard = memo(({
                         alt={prompt.title}
                         className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                         loading="lazy"
+                        onError={() => setImageError(true)}
                     />
                 ) : (
                     <div className="w-full h-full flex flex-col items-center justify-center text-muted-foreground/30">