✨ Feature(custom): add custom update page

src/renderer/i18n/locales/en.json

@@ -6,7 +6,8 @@
     "confirm": "Confirm",
     "import": "Import",
     "reset": "Reset",
-    "submit": "Submit"
+    "submit": "Submit",
+    "version": "Version"
   },
   "navigation": {
     "choosePicBed": "Choose PicBed",
@@ -931,6 +932,17 @@
       "uploaded": "Uploaded",
       "waitForUpload": "Waiting for Upload"
     },
+    "update": {
+      "download": "Download",
+      "downloading": "Downloading",
+      "goToDownloadPage": "Go to Download Page",
+      "installNow": "Install Now",
+      "later": "Later",
+      "newUpdateAvailable": "New Update Available",
+      "noMoreNotice": "Do not show this again",
+      "releaseNotes": "What's New",
+      "updateReady": "Update Ready to Install"
+    },
     "upload": {
       "changePicBed": "Change PicBed",
       "clickToUpload": "Click to Upload",

src/renderer/i18n/locales/zh-CN.json

@@ -6,7 +6,8 @@
     "confirm": "确认",
     "import": "导入",
     "reset": "重置",
-    "submit": "提交"
+    "submit": "提交",
+    "version": "版本"
   },
   "navigation": {
     "choosePicBed": "选择图床",
@@ -926,6 +927,17 @@
       "uploaded": "已上传",
       "waitForUpload": "等待上传"
     },
+    "update": {
+      "download": "下载",
+      "downloading": "下载中",
+      "goToDownloadPage": "前往下载页面",
+      "installNow": "立即安装",
+      "later": "稍后",
+      "newUpdateAvailable": "发现新版本",
+      "noMoreNotice": "不再提示",
+      "releaseNotes": "更新内容",
+      "updateReady": "更新已准备好"
+    },
     "upload": {
       "changePicBed": "切换图床",
       "clickToUpload": "点击上传",

src/renderer/i18n/locales/zh-TW.json

@@ -6,7 +6,8 @@
     "confirm": "確認",
     "import": "匯入",
     "reset": "重置",
-    "submit": "提交"
+    "submit": "提交",
+    "version": "版本"
   },
   "navigation": {
     "choosePicBed": "選擇圖床",
@@ -926,6 +927,17 @@
       "uploaded": "已上傳",
       "waitForUpload": "等待上傳"
     },
+    "update": {
+      "download": "下載",
+      "downloading": "下載中",
+      "goToDownloadPage": "前往下載頁面",
+      "installNow": "立即安裝",
+      "later": "稍後",
+      "newUpdateAvailable": "發現新版本",
+      "noMoreNotice": "不再提示",
+      "releaseNotes": "更新內容",
+      "updateReady": "更新已準備好"
+    },
     "upload": {
       "changePicBed": "切換圖床",
       "clickToUpload": "點擊上傳",

src/renderer/pages/UpdatePage.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="update-page">
+    <div class="update-dialog">
+      <!-- Header -->
+      <header class="dialog-header">
+        <h1 class="dialog-title">{{ updateInfo.title }}</h1>
+        <p v-if="updateInfo.version" class="dialog-version">
+          <span class="version-label">Version</span>
+          <span class="version-number">v{{ updateInfo.version }}</span>
+        </p>
+      </header>
+
+      <div v-if="updateInfo.type !== 'downloading' && downloadProgress !== null" class="progress-section">
+        <div class="progress-info">
+          <span class="progress-label">{{ $t('pages.update.downloading') }}</span>
+          <span class="progress-percentage">{{ Math.round(downloadProgress) }}%</span>
+        </div>
+        <div class="progress-track">
+          <div class="progress-fill" :style="{ width: `${downloadProgress}%` }"></div>
+        </div>
+      </div>
+
+      <div class="dialog-content">
+        <div v-if="updateInfo.releaseNotes" class="release-notes">
+          <h2 class="content-title">{{ $t('pages.update.releaseNotes') }}</h2>
+          <div class="notes-body" v-html="renderMarkdown(updateInfo.releaseNotes)"></div>
+        </div>
+
+        <div v-else-if="updateInfo.message" class="update-message">
+          <p>{{ updateInfo.message }}</p>
+        </div>
+
+        <!-- Checkbox (only for update-available) -->
+        <div v-if="updateInfo.type === 'update-available'" class="settings-section">
+          <label class="checkbox-wrapper">
+            <input v-model="dontShowAgain" type="checkbox" class="checkbox-input" />
+            <span class="checkbox-box">
+              <svg
+                class="checkbox-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </span>
+            <span class="checkbox-label">{{ $t('pages.update.noMoreNotice') }}</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <footer class="dialog-footer">
+        <template v-if="updateInfo.type === 'update-available'">
+          <button class="btn btn-ghost" @click="goToDownloadPage">
+            <Link2Icon class="btn-icon" />
+            {{ $t('pages.update.goToDownloadPage') }}
+          </button>
+          <button class="btn btn-primary" @click="downloadUpdate">
+            <DownloadIcon class="btn-icon" />
+            {{ $t('pages.update.download') }}
+          </button>
+        </template>
+        <template v-else-if="updateInfo.type === 'downloading'">
+          <button class="btn btn-ghost" @click="closeWindow">
+            <XIcon class="btn-icon" />
+            {{ $t('common.cancel') }}
+          </button>
+        </template>
+        <template v-else-if="updateInfo.type === 'update-downloaded'">
+          <button class="btn btn-ghost" @click="closeWindow">
+            {{ $t('pages.update.later') }}
+          </button>
+          <button class="btn btn-primary" @click="installUpdate">
+            <DownloadIcon class="btn-icon" />
+            {{ $t('pages.update.installNow') }}
+          </button>
+        </template>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { DownloadIcon, Link2Icon, XIcon } from 'lucide-vue-next'
+import { marked } from 'marked'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import { SHOW_UPDATE_INFO, UPDATE_PROGRESS } from '@/utils/constant'
+import { IRPCActionType } from '@/utils/enum'
+
+interface UpdateInfo {
+  type: 'update-available' | 'downloading' | 'update-downloaded'
+  title: string
+  version?: string
+  message?: string
+  releaseNotes?: string
+}
+
+const updateInfo = ref<UpdateInfo>({
+  type: 'update-available',
+  title: 'New Update Available',
+})
+
+const dontShowAgain = ref(false)
+const downloadProgress = ref<number | null>(null)
+
+const handleUpdateInfo = (info: UpdateInfo) => {
+  updateInfo.value = info
+  if (info.type !== 'downloading') {
+    downloadProgress.value = null
+  }
+}
+
+const handleUpdateProgress = (progress: { progress: number }) => {
+  downloadProgress.value = progress.progress
+}
+
+const renderMarkdown = (content: string) => {
+  return marked(content, { breaks: true, gfm: true })
+}
+
+const downloadUpdate = () => {
+  updateInfo.value.type = 'downloading'
+  downloadProgress.value = 0
+  window.electron.sendRPC(IRPCActionType.DOWNLOAD_UPDATE)
+  if (dontShowAgain.value) {
+    window.electron.sendRPC(IRPCActionType.SET_SHOW_UPDATE_TIP, false)
+  }
+}
+
+const goToDownloadPage = () => {
+  window.electron.sendRPC(IRPCActionType.GO_TO_DOWNLOAD_PAGE)
+  if (dontShowAgain.value) {
+    window.electron.sendRPC(IRPCActionType.SET_SHOW_UPDATE_TIP, false)
+  }
+  closeWindow()
+}
+
+const installUpdate = () => {
+  window.electron.sendRPC(IRPCActionType.INSTALL_UPDATE)
+}
+
+const closeWindow = () => {
+  if (dontShowAgain.value && updateInfo.value.type === 'update-available') {
+    window.electron.sendRPC(IRPCActionType.SET_SHOW_UPDATE_TIP, false)
+  }
+  window.electron.sendRPC(IRPCActionType.CLOSE_CURRENT_WINDOW)
+}
+
+onMounted(() => {
+  window.electron.ipcRendererOn(SHOW_UPDATE_INFO, handleUpdateInfo)
+  window.electron.ipcRendererOn(UPDATE_PROGRESS, handleUpdateProgress)
+})
+
+onBeforeUnmount(() => {
+  window.electron.ipcRendererRemoveAllListeners(SHOW_UPDATE_INFO)
+  window.electron.ipcRendererRemoveAllListeners(UPDATE_PROGRESS)
+})
+</script>
+
+<style scoped src="./css/UpdatePage.css"></style>

src/renderer/pages/css/UpdatePage.css

@@ -0,0 +1,546 @@
+/* stylelint-disable property-no-deprecated */
+/* stylelint-disable selector-pseudo-class-no-unknown */
+
+/* Reset & Base */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Page Container */
+.update-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/* Dialog Card */
+.update-dialog {
+  position: relative;
+  overflow: auto;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  width: 90%;
+  height: 90%;
+  flex-shrink: 0;
+  background: white;
+  box-shadow:
+    0 4px 6px -1px rgb(0 0 0 / 10%),
+    0 2px 4px -1px rgb(0 0 0 / 6%);
+  animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.status-icon {
+  flex-shrink: 0;
+}
+
+.status-icon-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.status-text {
+  line-height: 1;
+}
+
+/* Header */
+.dialog-header {
+  padding: 1.25rem 1.5rem 1rem;
+}
+
+.dialog-title {
+  margin-bottom: 0.625rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #1e293b;
+  letter-spacing: -0.025em;
+}
+
+.dialog-version {
+  display: flex;
+  align-items: center;
+  font-size: 0.9375rem;
+  gap: 0.5rem;
+}
+
+.version-label {
+  color: #64748b;
+}
+
+.version-number {
+  border-radius: 6px;
+  padding: 0.125rem 0.5rem;
+  font-weight: 600;
+  background: #f1f5f9;
+  color: #475569;
+}
+
+/* Progress Section */
+.progress-section {
+  padding: 1.5rem;
+  background: #f8fafc;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.progress-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #475569;
+}
+
+.progress-percentage {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #1e293b;
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
+}
+
+.progress-track {
+  position: relative;
+  overflow: hidden;
+  border-radius: 9999px;
+  width: 100%;
+  height: 6px;
+  background: #e2e8f0;
+}
+
+.progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 9999px;
+  height: 100%;
+  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
+  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Content */
+.dialog-content {
+  padding: 1.5rem;
+}
+
+/* Release Notes */
+.release-notes {
+  margin-bottom: 1.5rem;
+}
+
+.content-title {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #1e293b;
+  letter-spacing: -0.01em;
+}
+
+.notes-body {
+  overflow-y: auto;
+  border-radius: 12px;
+  padding: 1.25rem;
+  max-height: 195px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  background: #f8fafc;
+  color: #475569;
+}
+
+.notes-body :deep(h1),
+.notes-body :deep(h2),
+.notes-body :deep(h3) {
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.notes-body :deep(h1:first-child),
+.notes-body :deep(h2:first-child),
+.notes-body :deep(h3:first-child) {
+  margin-top: 0;
+}
+
+.notes-body :deep(p) {
+  margin-bottom: 0.875rem;
+}
+
+.notes-body :deep(ul),
+.notes-body :deep(ol) {
+  padding-left: 1.5rem;
+  margin: 0.875rem 0;
+}
+
+.notes-body :deep(li) {
+  margin-bottom: 0.375rem;
+}
+
+.notes-body :deep(code) {
+  border-radius: 4px;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  background: #e2e8f0;
+  color: #334155;
+}
+
+.notes-body :deep(pre) {
+  overflow-x: auto;
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 0.875rem 0;
+  background: #e2e8f0;
+}
+
+.notes-body :deep(pre code) {
+  padding: 0;
+  background: transparent;
+}
+
+/* Update Message */
+.update-message {
+  margin-bottom: 1.5rem;
+}
+
+.update-message p {
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: #475569;
+}
+
+/* Settings Section */
+.settings-section {
+  border-top: 1px solid #e2e8f0;
+  padding-top: 1.25rem;
+}
+
+/* Custom Checkbox */
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 0.75rem;
+  user-select: none;
+}
+
+.checkbox-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.checkbox-box {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid #cbd5e1;
+  border-radius: 6px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  flex-shrink: 0;
+}
+
+.checkbox-icon {
+  opacity: 0;
+  transform: scale(0.8);
+  color: white;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.checkbox-input:checked + .checkbox-box {
+  border-color: #2563eb;
+  background: #2563eb;
+}
+
+.checkbox-input:checked + .checkbox-box .checkbox-icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.checkbox-wrapper:hover .checkbox-box {
+  border-color: #2563eb;
+}
+
+.checkbox-input:focus-visible + .checkbox-box {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+.checkbox-label {
+  font-size: 0.9375rem;
+  color: #475569;
+}
+
+/* Footer */
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid #e2e8f0;
+  padding: 1.25rem 1.5rem;
+  background: #f8fafc;
+  gap: 0.75rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 10px;
+  padding: 0.625rem 1.25rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  font-weight: 600;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: pointer;
+  gap: 0.5rem;
+  letter-spacing: -0.01em;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-icon {
+  flex-shrink: 0;
+}
+
+/* Primary Button */
+.btn-primary {
+  color: white;
+  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
+  box-shadow: 0 1px 3px 0 rgb(249 115 22 / 30%);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px 0 rgb(249 115 22 / 40%);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-primary:focus-visible {
+  outline: 2px solid #f97316;
+  outline-offset: 2px;
+}
+
+/* Ghost Button */
+.btn-ghost {
+  border: 1px solid #e2e8f0;
+  background: white;
+  color: #475569;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  color: #1e293b;
+}
+
+.btn-ghost:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
+/* Responsive Design */
+@media (width <= 640px) {
+  .update-page {
+    padding: 1rem;
+  }
+
+  .update-dialog {
+    max-width: 100%;
+  }
+
+  .dialog-title {
+    font-size: 1.5rem;
+  }
+
+  .dialog-footer {
+    flex-direction: column-reverse;
+  }
+
+  .btn {
+    width: 100%;
+  }
+}
+
+@media (width <= 480px) {
+  .dialog-header {
+    padding: 1rem 1rem 0.75rem;
+  }
+
+  .dialog-title {
+    font-size: 1.375rem;
+  }
+
+  .dialog-content {
+    padding: 1.25rem 1rem;
+  }
+
+  .dialog-footer {
+    padding: 1rem;
+  }
+
+  .notes-body {
+    max-height: 240px;
+    font-size: 0.875rem;
+  }
+}
+
+/* Accessibility - Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .status-icon-spin {
+    animation: none;
+  }
+}
+
+/* Dark Mode Support (if needed) */
+@media (prefers-color-scheme: dark) {
+  .update-page {
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  }
+
+  .update-dialog {
+    border-color: #334155;
+    background: #1e293b;
+  }
+
+  .dialog-title {
+    color: #f8fafc;
+  }
+
+  .version-label {
+    color: #94a3b8;
+  }
+
+  .version-number {
+    background: #334155;
+    color: #cbd5e1;
+  }
+
+  .progress-section,
+  .dialog-footer {
+    background: #0f172a;
+  }
+
+  .progress-label {
+    color: #cbd5e1;
+  }
+
+  .progress-percentage {
+    color: #f8fafc;
+  }
+
+  .progress-track {
+    background: #334155;
+  }
+
+  .content-title {
+    color: #f8fafc;
+  }
+
+  .notes-body {
+    background: #0f172a;
+    color: #cbd5e1;
+  }
+
+  .notes-body :deep(h1),
+  .notes-body :deep(h2),
+  .notes-body :deep(h3) {
+    color: #f8fafc;
+  }
+
+  .notes-body :deep(code) {
+    background: #334155;
+    color: #e2e8f0;
+  }
+
+  .notes-body :deep(pre) {
+    background: #334155;
+  }
+
+  .update-message p {
+    color: #cbd5e1;
+  }
+
+  .settings-section {
+    border-top-color: #334155;
+  }
+
+  .checkbox-box {
+    border-color: #475569;
+    background: #0f172a;
+  }
+
+  .checkbox-wrapper:hover .checkbox-box {
+    border-color: #3b82f6;
+  }
+
+  .checkbox-label {
+    color: #cbd5e1;
+  }
+
+  .dialog-footer {
+    border-top-color: #334155;
+  }
+
+  .btn-ghost {
+    border-color: #334155;
+    background: #0f172a;
+    color: #cbd5e1;
+  }
+
+  .btn-ghost:hover:not(:disabled) {
+    border-color: #475569;
+    background: #334155;
+    color: #f8fafc;
+  }
+}

src/renderer/router/config.ts

@@ -14,5 +14,6 @@ export const SETTING_PAGE = 'SettingPage'
 export const SHORTKEY_PAGE = 'ShortkeyPage'
 export const TOOLBOX_CONFIG_PAGE = 'ToolBoxPage'
 export const TRAY_PAGE = 'TrayPage'
+export const UPDATE_PAGE = 'UpdatePage'
 export const UPLOAD_PAGE = 'UploadPage'
 export const UPLOADER_CONFIG_PAGE = 'UploaderConfigPage'

src/renderer/router/index.ts

@@ -15,6 +15,7 @@ import RenamePage from '@/pages/RenamePage.vue'
 import ShortKeyPage from '@/pages/ShortKey.vue'
 import Toolbox from '@/pages/Toolbox.vue'
 import TrayPage from '@/pages/TrayPage.vue'
+import UpdatePage from '@/pages/UpdatePage.vue'
 import UploadPage from '@/pages/Upload.vue'
 import UploaderConfigPage from '@/pages/UploaderConfigPage.vue'
 import * as config from '@/router/config'
@@ -114,6 +115,11 @@ export default createRouter({
       name: config.TOOLBOX_CONFIG_PAGE,
       component: Toolbox,
     },
+    {
+      path: '/update-page',
+      name: config.UPDATE_PAGE,
+      component: UpdatePage,
+    },
     {
       path: '/:pathMatch(.*)*',
       redirect: '/main-page/upload',

src/renderer/utils/constant.ts

@@ -9,6 +9,9 @@ export const PICGO_TOGGLE_PLUGIN = 'PICGO_TOGGLE_PLUGIN'
 export const RENAME_FILE_NAME = 'RENAME_FILE_NAME'
 export const GET_RENAME_FILE_NAME = 'GET_RENAME_FILE_NAME'
 export const SHOW_MAIN_PAGE_QRCODE = 'SHOW_MAIN_PAGE_QRCODE'
+// update window
+export const SHOW_UPDATE_INFO = 'SHOW_UPDATE_INFO'
+export const UPDATE_PROGRESS = 'UPDATE_PROGRESS'
 // rpc
 export const RPC_ACTIONS = 'RPC_ACTIONS'
 export const RPC_ACTIONS_INVOKE = 'RPC_ACTIONS_INVOKE'

src/renderer/utils/enum.ts

@@ -100,6 +100,13 @@ export const IRPCActionType = {
   PLUGIN_IMPORT_LOCAL: 'PLUGIN_IMPORT_LOCAL',
   PLUGIN_UPDATE_ALL: 'PLUGIN_UPDATE_ALL',
 
+  // updater rpc
+  DOWNLOAD_UPDATE: 'DOWNLOAD_UPDATE',
+  GO_TO_DOWNLOAD_PAGE: 'GO_TO_DOWNLOAD_PAGE',
+  INSTALL_UPDATE: 'INSTALL_UPDATE',
+  SET_SHOW_UPDATE_TIP: 'SET_SHOW_UPDATE_TIP',
+  CLOSE_CURRENT_WINDOW: 'CLOSE_CURRENT_WINDOW',
+
   // tray rpc
   TRAY_SET_TOOL_TIP: 'TRAY_SET_TOOL_TIP',
   TRAY_GET_SHORT_URL: 'TRAY_GET_SHORT_URL',