feat(update): implement auto-update functionality with electron-updater

- Add AppUpdater module with update lifecycle management - Create UpdateSettings UI component with progress display - Add Progress UI component based on Radix UI - Create update Zustand store for state management - Register update IPC handlers in main process - Auto-check for updates on production startup - Add commit documentation for commits 2-6
2026-02-05 23:36:12 +08:00
parent 98a2d9bc83
commit e02cf05baf
13 changed files with 1313 additions and 50 deletions
--- a/build_process/commit_6_auto_update.md
+++ b/build_process/commit_6_auto_update.md
@@ -0,0 +1,171 @@
+# Commit 6: Auto-Update Functionality
+
+## Summary
+Integrate electron-updater for automatic application updates with a comprehensive UI for checking, downloading, and installing updates.
+
+## Changes
+
+### Electron Main Process
+
+#### `electron/main/updater.ts` (New)
+Complete auto-update module:
+
+**AppUpdater Class:**
+- Extends EventEmitter for event-based notifications
+- Configures electron-updater settings
+- Manages update lifecycle
+
+**Methods:**
+- `setMainWindow(window)` - Set window for IPC
+- `getStatus()` - Get current update status
+- `checkForUpdates()` - Check for available updates
+- `downloadUpdate()` - Download available update
+- `quitAndInstall()` - Install update and restart
+- `setChannel(channel)` - Set update channel (stable/beta/dev)
+- `setAutoDownload(enable)` - Configure auto-download
+- `getCurrentVersion()` - Get app version
+
+**Update Status:**
+- `idle` - No update activity
+- `checking` - Checking for updates
+- `available` - Update available
+- `not-available` - Already on latest
+- `downloading` - Download in progress
+- `downloaded` - Ready to install
+- `error` - Update failed
+
+**IPC Handlers (registerUpdateHandlers):**
+- `update:status` - Get current status
+- `update:version` - Get app version
+- `update:check` - Trigger update check
+- `update:download` - Start download
+- `update:install` - Install and restart
+- `update:setChannel` - Change update channel
+- `update:setAutoDownload` - Toggle auto-download
+
+**Events forwarded to renderer:**
+- `update:status-changed`
+- `update:checking`
+- `update:available`
+- `update:not-available`
+- `update:progress`
+- `update:downloaded`
+- `update:error`
+
+#### `electron/main/index.ts`
+- Import and register update handlers
+- Auto-check for updates in production (10s delay)
+
+#### `electron/preload/index.ts`
+- Added all update IPC channels
+
+### React Renderer
+
+#### `src/stores/update.ts` (New)
+Zustand store for update state:
+- State: `status`, `currentVersion`, `updateInfo`, `progress`, `error`, `isInitialized`
+- Actions: `init`, `checkForUpdates`, `downloadUpdate`, `installUpdate`, `setChannel`, `setAutoDownload`, `clearError`
+- Listens for all update events from main process
+
+#### `src/components/settings/UpdateSettings.tsx` (New)
+Update UI component:
+- Current version display
+- Status indicator with icon
+- Status text description
+- Action buttons (Check/Download/Install/Retry)
+- Download progress bar with transfer stats
+- Update info card (version, date, release notes)
+- Error details display
+
+**Progress Display:**
+- Transferred / Total bytes
+- Transfer speed (bytes/second)
+- Progress percentage bar
+
+#### `src/components/ui/progress.tsx` (New)
+Radix UI Progress component for download visualization.
+
+#### `src/pages/Settings/index.tsx`
+- Replaced manual update section with `UpdateSettings` component
+- Added `useUpdateStore` for version display
+- Removed unused state and effect hooks
+
+## Technical Details
+
+### Update Flow
+```
+App Start (Production)
+       |
+       v
+  10s Delay
+       |
+       v
+checkForUpdates()
+       |
+       +-- No Update --> status: 'not-available'
+       |
+       +-- Update Found --> status: 'available'
+              |
+              v
+         [User Action]
+              |
+              v
+       downloadUpdate()
+              |
+              v
+       status: 'downloading'
+       progress events
+              |
+              v
+       status: 'downloaded'
+              |
+              v
+         [User Action]
+              |
+              v
+       quitAndInstall()
+              |
+              v
+         App Restarts
+```
+
+### electron-updater Configuration
+```typescript
+autoUpdater.autoDownload = false;        // Manual download trigger
+autoUpdater.autoInstallOnAppQuit = true; // Install on quit
+autoUpdater.logger = customLogger;       // Console logging
+```
+
+### Update Channels
+- `stable` - Production releases
+- `beta` - Pre-release testing
+- `dev` - Development builds
+
+### Progress Info Interface
+```typescript
+interface ProgressInfo {
+  total: number;           // Total bytes
+  delta: number;           // Bytes since last event
+  transferred: number;     // Bytes downloaded
+  percent: number;         // 0-100
+  bytesPerSecond: number;  // Transfer speed
+}
+```
+
+### UI States
+| Status | Icon | Action Button |
+|--------|------|---------------|
+| idle | RefreshCw (gray) | Check for Updates |
+| checking | Loader2 (spin, blue) | Checking... (disabled) |
+| available | Download (green) | Download Update |
+| downloading | Download (pulse, blue) | Downloading... (disabled) |
+| downloaded | CheckCircle2 (green) | Install & Restart |
+| error | AlertCircle (red) | Retry |
+| not-available | CheckCircle2 (green) | Check for Updates |
+
+## Dependencies
+- electron-updater ^6.3.9 (already installed)
+- @radix-ui/react-progress ^1.1.1 (already installed)
+
+## Version
+v0.1.0-alpha (incremental)