From 27f6d858a3c650580784de7a3cd21eb13fef85f9 Mon Sep 17 00:00:00 2001
From: seven <zilisheng1996@gmail.com>
Date: Mon, 1 Apr 2024 23:58:33 +0800
Subject: [PATCH] feat: auto detect if there is new version avialable (#43)

#40

Signed-off-by: seven <zilisheng1996@gmail.com>
---
 components.d.ts                               |   1 +
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/App.vue                                   |   2 +
 src/components/VersionDetect.vue              | 119 ++++++++++++++++++
 src/electron/preload.ts                       |   5 +-
 src/lang/enUS.ts                              |   7 ++
 src/lang/zhCN.ts                              |   7 ++
 src/store/appStore.ts                         |   2 +
 .../connect/components/connect-dialog.vue     |   2 +-
 src/vite-env.d.ts                             |   7 ++
 tsconfig.json                                 |   5 +-
 12 files changed, 154 insertions(+), 9 deletions(-)
 create mode 100644 src/components/VersionDetect.vue

diff --git a/components.d.ts b/components.d.ts
index 82a73b07..f1bc830f 100644
--- a/components.d.ts
+++ b/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']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index cb4dc58f..28385aef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "DocKit",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "DocKit",
-      "version": "0.2.5",
+      "version": "0.2.6",
       "license": "Apache-2.0",
       "dependencies": {
         "buffer": "^6.0.3",
diff --git a/package.json b/package.json
index a702a916..474380e3 100644
--- a/package.json
+++ b/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 <support@geekfun.club>",
   "license": "Apache-2.0",
diff --git a/src/App.vue b/src/App.vue
index 156f0503..f5e3f5e6 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/VersionDetect.vue b/src/components/VersionDetect.vue
new file mode 100644
index 00000000..2ea04f23
--- /dev/null
+++ b/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>
diff --git a/src/electron/preload.ts b/src/electron/preload.ts
index 732fb2a5..d1004a8f 100644
--- a/src/electron/preload.ts
+++ b/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', {
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index b2a69bad..eead176f 100644
--- a/src/lang/enUS.ts
+++ b/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',
+  },
 };
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 83d41ef6..c1c0fd90 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -58,4 +58,11 @@ export const zhCN = {
     empty: '无历史记录',
     emptyDesc: '执行扫描和查询时，查询历史记录将显示在此处',
   },
+  version: {
+    newVersion: '发现新版本',
+    message: '发现新版本，是否立即下载',
+    skip: '跳过该版本',
+    download: '下载',
+    later: '忽略',
+  },
 };
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index 6d276b02..b7f1a1c4 100644
--- a/src/store/appStore.ts
+++ b/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,
diff --git a/src/views/connect/components/connect-dialog.vue b/src/views/connect/components/connect-dialog.vue
index da7206dd..1dc17d1a 100644
--- a/src/views/connect/components/connect-dialog.vue
+++ b/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';
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index e3da2025..96189d3d 100644
--- a/src/vite-env.d.ts
+++ b/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>;
diff --git a/tsconfig.json b/tsconfig.json
index f13c4bd0..34fe75b5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,5 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "auto-imports.d.ts"
+  ]
 }