From f22478ecd378596cb6a5719b1fd5ad87020cdf4f Mon Sep 17 00:00:00 2001
From: Moltemort <mcbihv@126.com>
Date: Mon, 1 Nov 2021 20:27:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix:=20preview=20not=20show=20bug?=
 =?UTF-8?q?=20due=20to=20incorrect=20hosts=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/locales.ts   |  5 +++++
 src/background.ts       |  3 ++-
 src/components/Main.vue | 38 +++++++++++++++++++++++++++++---------
 src/server.ts           |  9 +++++++--
 4 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/src/assets/locales.ts b/src/assets/locales.ts
index 0258b8c6..96e16648 100644
--- a/src/assets/locales.ts
+++ b/src/assets/locales.ts
@@ -10,6 +10,7 @@ const message = {
     remote: '远 程',
     system: '系 统',
     renderSuccess: '渲染完毕，快去预览吧！',
+    renderError: '渲染失败，请检查 hosts 文件中 127.0.0.1 是否指向 localhost。确认配置正确后，尝试重启应用。',
     syncWarning: '必须完成配置才能同步哦！',
     syncSuccess: '同步成功啦！',
     syncError1: '同步遇到了错误，请查阅',
@@ -135,6 +136,7 @@ const message = {
     remote: '遠 程',
     system: '系 統',
     renderSuccess: '渲染完毕，快去预览吧！',
+    renderError: '渲染失敗，請檢查 hosts 文件中 127.0.0.1 是否指向 localhost。確認配置正確後，嘗試重啟應用。',
     syncWarning: '必須完成配置才能同步哦！',
     syncSuccess: '同步成功啦！',
     syncError1: '同步遇到了错误，请查閱',
@@ -259,6 +261,7 @@ const message = {
     remote: 'Server',
     system: 'System',
     renderSuccess: 'Congratulations, the rendering is complete, go ahead and preview.',
+    renderError: 'Rendering failed, please check whether 127.0.0.1 in the hosts file points to localhost. After confirming that the configuration is correct, try to restart the application.',
     syncWarning: 'You must complete the configuration to synchronize!',
     syncSuccess: 'Synchronization succeeded!',
     syncError1: 'Sorry, synchronization encountered an error, please refer to',
@@ -383,6 +386,7 @@ const message = {
     remote: 'Serveur',
     system: 'Système',
     renderSuccess: 'Félicitations, le rendu est terminé et regardez en avant-première.',
+    renderError: 'Le rendu a échoué, veuillez vérifier si 127.0.0.1 dans le fichier hosts pointe vers localhost. Après avoir vérifié que la configuration est correcte, essayez de redémarrer l\'application.',
     syncWarning: 'Vous devez compléter la configuration pour synchroniser !',
     syncSuccess: 'La synchronisation a réussi !',
     syncError1: 'Désolé, la synchronisation a rencontré une erreur, veuillez vous référer à',
@@ -507,6 +511,7 @@ const message = {
     remote: 'リモート',
     system: 'システム',
     renderSuccess: 'レンダリングは完成しました、プレビューしてください。',
+    renderError: 'レンダリングに失敗しました。hostsファイルの127.0.0.1がlocalhostを指しているかどうかを確認してください。構成が正しいことを確認した後、アプリケーションを再起動してみてください。',
     syncWarning: 'サイトを同期化する前に、システムの配置を完成してください！',
     syncSuccess: 'サイトの同期化は完成しました！',
     syncError1: '同期化の途中でエラーが発生しました、ご確認ください。',
diff --git a/src/background.ts b/src/background.ts
index ea52da7b..afd1823a 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -32,6 +32,7 @@ function createWindow() {
     webPreferences: {
       webSecurity: false, // FIXED: Not allowed to load local resource
       nodeIntegration: true,
+      enableRemoteModule: true, // FIXED: 兼容 electron@11.0.1
     },
     // frame: false, // 去除默认窗口栏
     titleBarStyle: 'hiddenInset' as ('hidden' | 'default' | 'hiddenInset' | 'customButtonsOnHover' | undefined),
@@ -40,7 +41,7 @@ function createWindow() {
   if (process.platform !== 'darwin') {
     winOption.icon = `${__dirname}/app-icons/gridea.png`
   }
-  
+
   win = new BrowserWindow(winOption)
   win.setTitle('Gridea')
 
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 1a5cd9c3..a0be6adf 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -89,6 +89,7 @@
 </template>
 
 <script lang="ts">
+import { VNodeChildren } from 'vue'
 import { ipcRenderer, IpcRendererEvent, shell } from 'electron'
 import { Vue, Component } from 'vue-property-decorator'
 import axios from 'axios'
@@ -121,11 +122,11 @@ export default class App extends Vue {
   hasUpdate = false
 
   newVersion = ''
-  
+
   syncErrorModalVisible = false
 
   updateModalVisible = false
-  
+
   systemModalVisible = false
 
   updateContent = ''
@@ -137,7 +138,7 @@ export default class App extends Vue {
   get currentRouter() {
     return this.$route.path
   }
-  
+
   get sideMenus() {
     return [
       {
@@ -226,15 +227,34 @@ export default class App extends Vue {
     ga.event('Preview', 'Preview - start', { evLabel: this.site.setting.domain })
 
     ipcRenderer.once('html-rendered', (event: IpcRendererEvent, result: any) => {
-      this.$message.success(`🎉  ${this.$t('renderSuccess')}`)
+      // this.$message.success(`🎉  ${this.$t('renderSuccess')}`)
 
       ga.event('Preview', 'Preview - success', { evLabel: this.site.setting.domain })
 
       ipcRenderer.send('app-preview-server-port-get')
       ipcRenderer.once(
         'app-preview-server-port-got',
-        (portGotEvent: IpcRendererEvent, port: any) => {
-          this.openInBrowser(`http://localhost:${port}`)
+        (portGotEvent: IpcRendererEvent, port: number | string | null) => {
+          if (!port && typeof port !== 'number') {
+            this.$message.config({
+              top: '36px',
+            })
+            this.$message.open({
+              content: (h: Vue.CreateElement) => {
+                const errStyle = {
+                  display: 'inline-block',
+                  maxWidth: '800px',
+                }
+                return h('span', {
+                  style: errStyle,
+                }, `❌ ${this.$t('renderError')}` as any as VNodeChildren)
+              },
+              icon: '',
+            })
+          } else {
+            this.$message.success(`🎉  ${this.$t('renderSuccess')}`)
+            this.openInBrowser(`http://localhost:${port}`)
+          }
         },
       )
     })
@@ -480,7 +500,7 @@ export default class App extends Vue {
     list-style-type: none;
     font-size: 14px;
     margin: 30px 20px;
-    
+
     ul,
     ol {
       margin: 20px 20px 10px;
@@ -493,14 +513,14 @@ export default class App extends Vue {
 
   /deep/ ul > li {
       display: table-row;
-      
+
       &:before {
         content:'\25CF';
         color: #fad849;
         padding-right: 10px;
         display: table-cell;
       }
-      
+
       + li:before {
         padding-top: 10px;
       }
diff --git a/src/server.ts b/src/server.ts
index 4fb18fed..700e583b 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -7,8 +7,13 @@ export default function initServer() {
   function listen(port: number) {
     server = app.listen(port, 'localhost').on('error', (err: NodeJS.ErrnoException) => {
       if (err) {
-        console.log(`Preview server port ${port} is busy, trying with port ${port + 1}`)
-        listen(port + 1)
+        if (err.message === 'getaddrinfo ENOTFOUND localhost') {
+          // Fixed: 修复渲染服务在找不到 localhost 时崩溃问题
+          console.log('\x1B[31m%s\x1B[0m', 'Localhost is not found so that the preview server is not working. Please check your hosts file and then restart the application.')
+        } else {
+          console.log(`Preview server port ${port} is busy, trying with port ${port + 1}`)
+          listen(port + 1)
+        }
       }
     }).on('listening', () => {
       app.set('port', port)