update

Author: tiltysola

.github/electronrt.png

@@ -4,6 +4,10 @@
 > 一个开源的 Electron 开发环境脚手架，使用了 Electron + React + Typescript + Less + Webpack进行构建。  
 > 代码检查使用了 Eslint ，规则集采用的是 eslint-config-ali ，强制删除不必要的分号。
 
+## 界面预览
+
+<img src=".github/electronrt.png" width="80%">
+
 ## 食用方法
 
 ### 克隆代码

README.md

@@ -8,8 +8,12 @@ let mainWindow: BrowserWindow | null
 
 function createMainWindow() {
   const window = new BrowserWindow({
+    width: 1280,
+    height: 730,
+    frame: false,
     webPreferences: {
       nodeIntegration: true,
+      enableRemoteModule: true,
     },
   })
 

src/main/index.ts

@@ -1,25 +1,49 @@
 import React, { useState } from 'react'
 import { HashRouter, NavLink } from 'react-router-dom'
 import useInterval from '@use-it/interval'
-// import _ from 'lodash'
+import { remote } from 'electron'
 
 import Router from '../routes/router'
 
 import './style.less'
 
+const isDev = process.env.NODE_ENV !== 'production'
+const winContent = remote.getCurrentWindow()
+
 const Index = () => {
   const [hash, setHash] = useState<any>(window.location.hash)
 
   useInterval(() => {
     setHash(() => window.location.hash)
   }, 100)
 
+  const close = () => {
+    if (isDev) {
+      winContent.destroy()
+    } else {
+      winContent.close()
+    }
+  }
+
   return (
     <HashRouter>
       <div id="layout">
         <div className="layout-header">
           <div className="clearfix" />
-          <span className="slg">Now you are at: {hash}</span>
+          <h1 className="title">Electron RT Boilerplate</h1>
+          <span className="slg">{hash}</span>
+          <div className="control">
+            <ul>
+              <li className="close" onClick={() => { close() }}>
+                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
+                  <path d="M816 816m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" />
+                  <path d="M512 968a456 456 0 1 1 395.76-229.36 32 32 0 0 1-55.52-32 392 392 0 1 0-145.44 145.44 32 32 0 0 1 32 55.52A456 456 0 0 1 512 968z" />
+                  <path d="M376 680a32 32 0 0 1-22.64-54.64L625.12 353.6a32 32 0 1 1 45.28 45.28L398.88 670.4A32 32 0 0 1 376 680z" />
+                  <path d="M648 680a32 32 0 0 1-22.64-9.36L353.6 398.88a32 32 0 0 1 45.28-45.28L670.4 625.12A32 32 0 0 1 648 680z" />
+                </svg>
+              </li>
+            </ul>
+          </div>
         </div>
         <div className="layout-content">
           <div className="clearfix" />

src/renderer/layouts/index.tsx

@@ -1,27 +1,62 @@
-@youmuGreen: rgb(47, 128, 55);
-
 #layout {
-  .layout-header, .layout-footer {
-    background-color: rgb(233, 233, 233);
-  }
   .layout-content {
     min-height: calc(100vh - 58px);
   }
   .layout-header {
-    .slg {
-      margin-left: 4px;
+    position: relative;
+    height: 30px;
+    background-color: rgb(20, 20, 20);
+    color: white;
+    -webkit-app-region: drag;
+    .title {
+      display: inline-block;
+      margin: 0 8px;
       font-size: 13px;
+      line-height: 30px;
+    }
+    .slg {
+      display: inline-block;
+      font-size: 10px;
+      color: rgb(122, 122, 122);
+      line-height: 30px;
+    }
+    .control {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 30px;
+      -webkit-app-region: no-drag;
+      ul {
+        margin: 0;
+        height: 30px;
+        li {
+          display: inline-block;
+          list-style: none;
+          line-height: 30px;
+          &.close {
+            padding: 4px 6px;
+            path {
+              fill: rgb(216, 216, 216);
+            }
+            &:hover {
+              background-color: rgb(213, 81, 45);
+            }
+          }
+        }
+      }
     }
   }
   .layout-footer {
+    position: absolute;
+    bottom: 0;
     .nav {
       margin-left: 8px;
       a {
         display: inline-block;
         font-size: 14px;
         padding: 2px;
         margin: 6px;
-        color: @youmuGreen;
+        color: rgb(255, 255, 255);
         text-decoration: none;
         &.active {
           text-decoration: underline;

src/renderer/layouts/style.less

@@ -9,7 +9,7 @@ const About = () => {
       <h1 className="title">Electron RT Boilerplate</h1>
       <span>It seems you entered the about page.</span>
       <p>Author: YoumuKonpaku</p>
-      <p>Website: <a href="#" onClick={() => { openExternal('https://youmukonpaku.com') }}>https://youmukonpaku.com</a></p>
+      <p>Website: <a className="link" href="#" onClick={() => { openExternal('https://youmukonpaku.com') }}>https://youmukonpaku.com</a></p>
     </div>
   )
 }

src/renderer/pages/about/index.tsx

@@ -1,11 +1,15 @@
-@gray: rgb(72, 82, 92);
-@youmuGreen: rgb(47, 128, 55);
-
 #about {
   text-align: center;
-  color: @gray;
+  color: rgb(233, 233, 233);
   .title {
-    margin: 64px 0 12px 0;
+    margin: 64px 0 24px 0;
     font-size: 22px;
   }
+  .link {
+    color:  rgba(72, 72, 196);
+    text-decoration: none;
+    &:hover {
+      color: rgba(92, 92, 216);
+    }
+  }
 }

src/renderer/pages/about/style.less

@@ -1,12 +1,8 @@
-@gray: rgb(72, 82, 92);
-@youmuGreen: rgb(47, 128, 55);
-@youmuHoverGreen: rgb(47, 168, 55);
-
 #welcome {
   text-align: center;
-  color: @gray;
+  color: rgb(233, 233, 233);
   .title {
-    margin: 64px 0 12px 0;
+    margin: 64px 0 24px 0;
     font-size: 22px;
   }
   .links {
@@ -20,7 +16,7 @@
         display: table-cell;
         width: 50%;
         padding: 4px 12px;
-        color: @youmuGreen;
+        color:  rgba(72, 72, 196);
         text-decoration: none;
         &:first-child {
           text-align: right;
@@ -29,7 +25,7 @@
           text-align: left;
         }
         &:hover {
-          color: @youmuHoverGreen
+          color: rgba(92, 92, 216);
         }
       }
     }

src/renderer/pages/welcome/style.less

@@ -1,10 +1,17 @@
 * {
   outline: none;
   user-select: none;
+  overflow: hidden;
 }
 
 html, body {
   margin: 0;
+  height: 100vh;
+}
+
+body {
+  position: relative;
+  background-image: linear-gradient(135deg, rgb(61, 154, 188), rgb(55, 99, 146));
 }
 
 .clearfix:before,.clearfix:after {