feat(desktop): add database reset page to fix blank screen from corrupted file

src/background.ts

@@ -4,6 +4,7 @@ import { app, protocol, BrowserWindow, ipcMain, shell, Menu } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 import { quitAndRenameLogger } from './utils/logger'
+import rebuildDatabase from './utils/rebuildDatabase'
 import { createUpdateWindow, autoDownload } from './main/updateDownloader'
 import { getCurrentLang } from './main/updateChecker'
 import getMenuTemplate from './main/getMenuTemplate'
@@ -14,6 +15,7 @@ import { onSystemThemeChanged } from './main/systemTheme'
 import useConnection, { initOptionModel } from '@/database/useConnection'
 import useServices from '@/database/useServices'
 import { dialog } from 'electron'
+import ORMConfig from './database/database.config'
 import version from '@/version'
 
 declare const __static: string
@@ -92,6 +94,20 @@ function handleIpcMessages() {
   ipcMain.on('insertCodeToEditor', (event, ...args) => {
     event.sender.send('insertCodeToEditor', ...args)
   })
+  ipcMain.on('rebuildDatabase', (event) => {
+    try {
+      rebuildDatabase(ORMConfig.database as string)
+      app.relaunch()
+      app.exit()
+    } catch (error) {
+      dialog.showMessageBox({
+        type: 'error',
+        title: 'Rebuild Database Error',
+        message: 'An error occurred while rebuilding the database.',
+        detail: error.message
+      })
+    }
+  })
 }
 
 // handle event when APP quit
@@ -106,30 +122,41 @@ function beforeAppQuit() {
 
 async function createWindow() {
   // Init tables and connect to local database.
-  await ConnectionInit({ doMigrations: true } as initOptionModel)
-  const { settingService } = useServices()
-  await settingService.set()
-  const setting = await settingService.get()
-  if (setting) {
-    theme = setting.currentTheme
-    autoCheckUpdate = setting.autoCheck
-    syncOsTheme = setting.syncOsTheme
-    windowSize.height = setting.height
-    windowSize.width = setting.width
+  try {
+    await ConnectionInit({ doMigrations: true } as initOptionModel)
+    const { settingService } = useServices()
+    await settingService.set()
+    const setting = await settingService.get()
+    if (setting) {
+      theme = setting.currentTheme
+      autoCheckUpdate = setting.autoCheck
+      syncOsTheme = setting.syncOsTheme
+      windowSize.height = setting.height
+      windowSize.width = setting.width
+      //@ts-ignore
+      global.sharedData = {
+        currentTheme: setting.currentTheme,
+        currentLang: setting.currentLang,
+        autoCheck: setting.autoCheck,
+        autoResub: setting.autoResub,
+        maxReconnectTimes: setting.maxReconnectTimes,
+        syncOsTheme: setting.syncOsTheme,
+        multiTopics: setting.multiTopics,
+        jsonHighlight: setting.jsonHighlight,
+        enableCopilot: setting.enableCopilot,
+        openAIAPIKey: setting.openAIAPIKey,
+        model: setting.model,
+        logLevel: setting.logLevel,
+      }
+    }
+  } catch (error) {
+    console.error('ConnectionInit error:', error)
     //@ts-ignore
     global.sharedData = {
-      currentTheme: setting.currentTheme,
-      currentLang: setting.currentLang,
-      autoCheck: setting.autoCheck,
-      autoResub: setting.autoResub,
-      maxReconnectTimes: setting.maxReconnectTimes,
-      syncOsTheme: setting.syncOsTheme,
-      multiTopics: setting.multiTopics,
-      jsonHighlight: setting.jsonHighlight,
-      enableCopilot: setting.enableCopilot,
-      openAIAPIKey: setting.openAIAPIKey,
-      model: setting.model,
-      logLevel: setting.logLevel,
+      connectDatabaseFailMessage: error.message,
+      currentTheme: 'light',
+      currentLang: 'en',
+      syncOsTheme: false,
     }
   }
   // Create the browser window.
@@ -156,7 +183,8 @@ async function createWindow() {
     }
   })
   // Menu Manger
-  const templateMenu = getMenuTemplate(win, setting?.currentLang)
+  // @ts-ignore
+  const templateMenu = getMenuTemplate(win, global.sharedData.currentLang)
   menu = Menu.buildFromTemplate(templateMenu)
   Menu.setApplicationMenu(menu)
 

src/components/DatabaseError.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="connect-database-error-page">
+    <div class="page-content">
+      <p class="info">A corruption has been detected in the database file, preventing the software from launching properly. To fix this, please click 'Rebuild Database'.</p>
+      <p class="error">Error - {{ connectDatabaseFailMessage }}</p>
+    </div>
+    <el-button class="rebuild-database-btn" type="primary" @click="confirmRebuild">
+      Rebuild Database
+    </el-button>
+  </div>
+</template>
+
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Getter } from 'vuex-class'
+import { ipcRenderer } from 'electron'
+
+@Component
+export default class DatabaseError extends Vue {
+  @Getter('connectDatabaseFailMessage') private connectDatabaseFailMessage!: string
+
+  private rebuildDatabase() {
+    ipcRenderer.send('rebuildDatabase')
+  }
+
+  private confirmRebuild() {
+    this.$confirm(
+      'Proceed with database rebuild now? All data will be lost and cannot be undone',
+      {
+        title:'Database Rebuild Confirmation',
+        showClose: false,
+        closeOnClickModal:false,
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true
+            instance.confirmButtonText = 'Loading...'
+          }
+          done()
+        }
+      }
+    )
+    .then(() => {
+      try {
+        this.rebuildDatabase()
+        this.$log.info('Database rebuild completed. The application will restart')
+      } catch (error) {
+        this.$log.error(`Failed to rebuilding database: ${error}`)
+      }
+    })
+  }
+
+  private mounted() {
+    this.$log.error(`Database connect error - ${this.connectDatabaseFailMessage}`)
+  }
+}
+</script>
+
+<style lang="scss">
+.connect-database-error-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  .page-content {
+    text-align: center;
+    width: 60%;
+    font-size: 20px;
+    margin-bottom: 24px;
+    .info {
+      margin-bottom: 14px;
+    }
+    .error {
+      color: var(--color-minor-red);
+    }
+  }
+  .rebuild-database-btn {
+    padding: 10px 16px;
+    border: none;
+    border-radius: 8px;
+  }
+}
+</style>

src/store/getter.ts

@@ -21,6 +21,7 @@ const getters = {
   isPrismButtonAdded: (state: State) => state.app.isPrismButtonAdded,
   logLevel: (state: State) => state.app.logLevel,
   showConnectionList: (state: State) => state.app.showConnectionList,
+  connectDatabaseFailMessage: (state: State) => state.app.connectDatabaseFailMessage,
 }
 
 export default getters

src/store/modules/app.ts

@@ -61,6 +61,7 @@ const app = {
     isPrismButtonAdded: false,
     logLevel: settingData.logLevel || 'info',
     showConnectionList: getShowConnectionList(),
+    connectDatabaseFailMessage: settingData.connectDatabaseFailMessage || '',
   },
   mutations: {
     [TOGGLE_THEME](state: App, currentTheme: Theme) {

src/types/global.d.ts

@@ -110,6 +110,7 @@ declare global {
     isPrismButtonAdded: boolean
     logLevel: LogLevel
     showConnectionList: boolean
+    connectDatabaseFailMessage: string
   }
 
   interface State {

src/utils/rebuildDatabase.ts

@@ -0,0 +1,13 @@
+import fs from 'fs'
+
+const rebuildDatabase = (filePath: string) => {
+  fs.writeFile(filePath, '', (error) => {
+    if (error) {
+      console.error('Error rebuilding database:', error)
+    } else {
+      console.log('Database rebuilt successfully.')
+    }
+  })
+}
+
+export default rebuildDatabase

src/views/Home.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="home-view">
+  <DatabaseError v-if="connectDatabaseFailMessage" />
+  <div class="home-view" v-else>
     <Leftbar />
     <RouterView />
     <Ipc @setTheme="setTheme" @setLang="setLang" />
@@ -13,18 +14,21 @@ import { Getter, Action } from 'vuex-class'
 import { remote } from 'electron'
 import Ipc from '@/components/Ipc.vue'
 import Leftbar from '@/components/Leftbar.vue'
+import DatabaseError from '@/components/DatabaseError.vue'
 
 @Component({
   components: {
     Ipc,
     Leftbar,
     Update: () => import('@/views/update/index.vue'),
+    DatabaseError,
   },
 })
 export default class Home extends Vue {
   @Getter('currentTheme') private getterTheme!: Theme
   @Getter('currentLang') private getterLang!: Language
   @Getter('syncOsTheme') private syncOsTheme!: boolean
+  @Getter('connectDatabaseFailMessage') private connectDatabaseFailMessage!: string
   @Action('TOGGLE_THEME') private actionTheme!: (payload: { currentTheme: string }) => void
   @Action('TOGGLE_LANG') private actionLang!: (payload: { currentLang: string }) => void
   private updateActive: boolean = false