feat: auto detect if there is new version avialable (#43)

#40

Signed-off-by: seven <[email protected]>

components.d.ts

@@ -39,5 +39,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterMain: typeof import('./src/components/RouterMain.vue')['default']
     RouterView: typeof import('vue-router')['RouterView']
+    VersionDetect: typeof import('./src/components/VersionDetect.vue')['default']
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "DocKit",
   "productName": "DocKit",
   "private": true,
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A faster, better and more stable NoSQL desktop tools",
   "author": "geekfun <[email protected]>",
   "license": "Apache-2.0",

src/App.vue

@@ -1,10 +1,12 @@
 <template>
   <app-provider>
     <router-main />
+    <version-detect />
   </app-provider>
 </template>
 
 <script setup lang="ts">
 import AppProvider from './components/AppProvider.vue';
 import RouterMain from './components/RouterMain.vue';
+import VersionDetect from './components/VersionDetect.vue';
 </script>

src/components/VersionDetect.vue

@@ -0,0 +1,119 @@
+<template>
+  <n-modal v-model:show="dialogVisible" :mask-closable="false" class="version-detect-modal">
+    <n-card
+      style="width: 400px"
+      :title="$t('version.newVersion')"
+      :bordered="false"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="version-info-box">
+        <span>{{ $t('version.message') }} ({{ version }})?</span>
+      </div>
+      <template #footer>
+        <div class="action-button-group">
+          <n-button type="warning" secondary @click="skip">{{ $t('version.skip') }}</n-button>
+          <n-button type="tertiary" secondary @click="later">{{ $t('version.later') }}</n-button>
+          <n-button type="primary" secondary @click="download">{{
+            $t('version.download')
+          }}</n-button>
+        </div>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { NModal, NButton } from 'naive-ui';
+import { useAppStore } from '../store';
+
+const platforms: { [key: string]: string } = {
+  macos_x86: 'universal.dmg',
+  macos_arm: 'universal.dmg',
+  windows_x86: 'x64.Setup.exe',
+  windows_arm: 'arm64.Setup.exe',
+  linux_x86: '_amd64.deb',
+  linux_arm: '_arm64.deb',
+};
+const appStore = useAppStore();
+const { skipVersion } = storeToRefs(appStore);
+
+const dialogVisible = ref(false);
+const version = ref('');
+const link = ref({ name: '', url: '' });
+
+const download = () => {
+  window.electronAPI.openLink(link.value.url);
+  dialogVisible.value = false;
+};
+
+const later = () => {
+  dialogVisible.value = false;
+};
+
+const skip = () => {
+  skipVersion.value = version.value;
+  dialogVisible.value = false;
+};
+
+const getLatestReleaseInfo = async (): Promise<{
+  version: string;
+  assets: Array<{ name: string; url: string }>;
+}> => {
+  const data = await fetch('https://api.github.com/repos/geek-fun/dockit/releases/latest')
+    .then(res => res.json())
+    .catch(err => console.error(err));
+  const assets = data.assets.map((item: { name: string; browser_download_url: string }) => ({
+    name: item.name,
+    url: item.browser_download_url,
+  }));
+
+  return { version: data.tag_name, assets };
+};
+const getLatestLink = async () => {
+  const { architecture, platform } = await window.navigator.userAgentData.getHighEntropyValues([
+    'architecture',
+  ]);
+  const { assets } = await getLatestReleaseInfo();
+
+  return assets.find(item =>
+    item.name.endsWith(platforms[`${platform}_${architecture}`.toLowerCase()]),
+  );
+};
+
+onMounted(async () => {
+  try {
+    const { version: newVersion } = await getLatestReleaseInfo();
+    const { version: currentVersion } = await window.electronAPI.versions();
+    if (newVersion.endsWith(currentVersion) && skipVersion.value !== newVersion) return;
+
+    const assetsLink = await getLatestLink();
+    if (link) {
+      version.value = newVersion;
+      link.value = assetsLink;
+      dialogVisible.value = true;
+    }
+  } catch (error) {
+    console.error('VersionDetect error:', error);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.version-detect-modal {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  width: 400px; /* adjust as needed */
+  .version-info-box {
+    margin: 20px 0;
+  }
+  .action-button-group {
+    margin-left: 50px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

src/electron/preload.ts

@@ -2,13 +2,10 @@
 // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
 import { contextBridge, ipcRenderer } from 'electron';
 
-contextBridge.exposeInMainWorld('browserWindow', {
-  versions: () => ipcRenderer.invoke('versions'),
-});
-
 contextBridge.exposeInMainWorld('electronAPI', {
   openGitHub: () => ipcRenderer.send('open-github'),
   openLink: (link: string) => ipcRenderer.send('open-link', link),
+  versions: () => ipcRenderer.invoke('versions'),
 });
 
 contextBridge.exposeInMainWorld('storeAPI', {

src/lang/enUS.ts

@@ -58,4 +58,11 @@ export const enUS = {
     empty: 'No history yet',
     emptyDesc: 'History of queries will appear here as you execute Scans and Queries',
   },
+  version: {
+    newVersion: 'New version available',
+    message: 'A new version is available, download it now',
+    download: 'Download',
+    skip: 'Skip this version',
+    later: 'Later',
+  },
 };

src/lang/zhCN.ts

@@ -58,4 +58,11 @@ export const zhCN = {
     empty: '无历史记录',
     emptyDesc: '执行扫描和查询时，查询历史记录将显示在此处',
   },
+  version: {
+    newVersion: '发现新版本',
+    message: '发现新版本，是否立即下载',
+    skip: '跳过该版本',
+    download: '下载',
+    later: '忽略',
+  },
 };

src/store/appStore.ts

@@ -15,12 +15,14 @@ export const useAppStore = defineStore('app', {
     languageType: LanguageType;
     connectPanel: boolean;
     uiThemeType: Exclude<ThemeType, ThemeType.AUTO>;
+    skipVersion: string;
   } => {
     return {
       themeType: ThemeType.AUTO,
       languageType: LanguageType.AUTO,
       connectPanel: true, //
       uiThemeType: ThemeType.LIGHT,
+      skipVersion: '',
     };
   },
   persist: true,

src/views/connect/components/connect-dialog.vue

@@ -137,7 +137,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, defineExpose, watch } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { Close, Unlocked, Locked } from '@vicons/carbon';
 import { CustomError } from '../../../common';
 import { Connection, useConnectionStore } from '../../../store';

src/vite-env.d.ts

@@ -14,6 +14,13 @@ declare module '*.css';
 export interface IElectronAPI {
   openGitHub: () => void;
   openLink: (link: string) => void;
+  versions: () => Promise<{
+    node: string;
+    chrome: string;
+    electron: string;
+    version: string;
+    name: string;
+  }>;
 }
 export interface IStoreAPI {
   get: <T>(key: string, defaultValue: T) => Promise<T>;

tsconfig.json

@@ -12,5 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "auto-imports.d.ts"
+  ]
 }