feat: 增加检查更新机制，更新后重启软件

Author: codexu

messages/en.json

@@ -30,9 +30,10 @@
       "language": "Language",
       "checkUpdate": "Check for Updates",
       "checkError": "Failed to check for updates",
-      "updateAvailable": "New version available",
+      "updateAvailable": "Update to new version",
       "updateDownloading": "Updating {downloaded} / {contentLength}",
       "updateInstalled": "Restart app",
+      "noUpdate": "Current version is the latest",
       "items": {
         "github": {
           "title": "GitHub",

messages/ja.json

@@ -65,6 +65,7 @@
       "updateAvailable": "新しいバージョンが利用可能です",
       "updateDownloading": "Updating {downloaded} / {contentLength}",
       "updateInstalled": "Restart app",
+      "noUpdate": "現在已是最新版本",
       "items": {
         "github": {
           "title": "GitHub",

messages/zh.json

@@ -62,9 +62,10 @@
       "language": "语言",
       "checkUpdate": "检查更新",
       "checkError": "检查更新失败",
-      "updateAvailable": "检测到新版本",
+      "updateAvailable": "更新至最新版本",
       "updateDownloading": "更新中 {downloaded} / {contentLength}",
       "updateInstalled": "重启应用",
+      "noUpdate": "当前已是最新版本",
       "items": {
         "github": {
           "title": "GitHub",

src/app/core/setting/about/updater.tsx

@@ -1,88 +1,90 @@
 import { check, Update } from '@tauri-apps/plugin-updater';
 import { relaunch } from '@tauri-apps/plugin-process';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { useTranslations } from 'next-intl';
 import useSettingStore from '@/stores/setting';
 import Image from 'next/image';
 import { toast } from '@/hooks/use-toast';
 import { Badge } from '@/components/ui/badge';
-import { Loader2 } from 'lucide-react';
+import { ArrowBigRightDash, Loader2 } from 'lucide-react';
 
 export default function Updater() {
     const t = useTranslations('settings.about');
+    const [checking, setChecking] = useState(false);
     const [loading, setLoading] = useState(false);
-    const [updateStatus, setUpdateStatus] = useState(t('checkUpdate'));
-    const [downloaded, setDownloaded] = useState(0);
-    const [contentLength, setContentLength] = useState(0);
     const { version } = useSettingStore();
+    const [update, setUpdate] = useState<Update | null>(null);
+
+    async function checkUpdate() {
+      setChecking(true);
+      try {
+        setUpdate(await check());
+      } catch (error) {
+        toast({
+          title: t('checkError'),
+          description: error as string,
+          variant: 'destructive'
+        });
+      } finally {
+        setChecking(false);
+      }
+    }
 
     async function checkVersion() {
-      if (updateStatus === t('checkUpdate')) {
-        setLoading(true);
-        let update: Update | null = null;
+      setLoading(true);
+      if (update) {
         try {
-          update = await check();
+          await update.downloadAndInstall();
         } catch (error) {
           toast({
             title: t('checkError'),
             description: error as string,
             variant: 'destructive'
           });
-        } finally {
-          setLoading(false);
         }
-        if (update) {
-          try {
-            setUpdateStatus(t('updateAvailable', { version: update.version }));
-            await update.downloadAndInstall((event) => {
-              switch (event.event) {
-                case 'Started':
-                  setContentLength(event.data.contentLength || 0);
-                  break;
-                case 'Progress':
-                  setDownloaded(event.data.chunkLength || 0);
-                  setUpdateStatus(t('updateDownloading', { downloaded, contentLength }));
-                  break;
-                case 'Finished':
-                  setUpdateStatus(t('updateInstalled'));
-                  break;
-              }
-            });
-          } catch (error) {
-            toast({
-              title: t('checkError'),
-              description: error as string,
-              variant: 'destructive'
-            });
-          } finally {
-            setLoading(false);
-          }
-        }
-      } else if (updateStatus === t('updateInstalled')) {
         await relaunch();
+      } else {
+        toast({
+          title: t('checkError'),
+          description: t('noUpdate'),
+          variant: 'default'
+        });
+        setLoading(false);
       }
     }
 
+    useEffect(() => {
+      checkUpdate();
+    }, []);
+
     return (
       <div className="flex justify-between w-full items-center">
-        <div className='flex items-center gap-4'>
+        <div className="flex items-center gap-4">
           <div>
-            <Image src="/app-icon.png" alt="logo" className='size-24' width={0} height={0} />
+            <Image src="/app-icon.png" alt="logo" className="size-24 dark:invert" width={0} height={0} />
           </div>
-          <div className='h-24 flex flex-col justify-between'>
-            <span className='text-2xl font-bold flex items-center gap-2'>NoteGen</span>
+          <div className="h-24 flex flex-col justify-between">
+            <span className="text-2xl font-bold flex items-center gap-2">NoteGen</span>
             <span>
               {t('desc')}
             </span>
-            <div>
+            <div className="flex items-center gap-2">
               <Badge variant="outline">v{version}</Badge>
+              {
+                update ? (
+                  <>
+                    <ArrowBigRightDash className="size-4" />
+                    <Badge className="bg-green-500 text-white" variant="outline">v{update.version}</Badge>
+                  </>
+                ) : null
+              }
             </div>
           </div>
         </div>
-        <Button disabled={loading} onClick={checkVersion}>
+        <Button disabled={!update || loading || checking} onClick={checkVersion}>
           {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-          {updateStatus}
+          {checking ? t('checkUpdate') : update ? t('updateAvailable') : t('noUpdate')}
         </Button>
       </div>
     )

src/app/core/setting/config.tsx

@@ -1,6 +1,10 @@
 import { BotMessageSquare, LayoutTemplate, Command, FileUp, Palette, ScanText, Store, UserRoundCog, Drama, FolderOpen, Package } from "lucide-react"
 
 const baseConfig = [
+  {
+    icon: <Store />,
+    anchor: 'about',
+  },
   {
     icon: <BotMessageSquare />,
     anchor: 'ai',
@@ -40,11 +44,7 @@ const baseConfig = [
   {
     icon: <UserRoundCog />,
     anchor: 'dev',
-  },
-  {
-    icon: <Store />,
-    anchor: 'about',
-  },
+  }
 ]
 
 export default baseConfig