Merge pull request #4 from ruchuby/xxy

CourseHelper 0.1.2
AkiChase · May 26, 2022 · 9a06b8e · 9a06b8e
2 parents 7be53bf + 7f1f42a
commit 9a06b8e
Show file tree

Hide file tree

Showing 12 changed files with 304 additions and 44 deletions.
diff --git a/app/.gitignore b/app/.gitignore
@@ -23,4 +23,7 @@ pnpm-debug.log*
 *.sw?
 
 #Electron-builder output
-/dist_electron
+/dist_electron
+
+#Custom
+*.pid
diff --git a/app/package.json b/app/package.json
@@ -17,6 +17,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "electron-store": "^8.0.1",
+    "open": "^8.4.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
@@ -30,6 +31,7 @@
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "electron": "13.0.0",
+    "electron-builder": "^23.0.3",
     "electron-devtools-installer": "^3.1.0",
     "naive-ui": "^2.28.2",
     "vue-cli-plugin-electron-builder": "^2.1.1"

diff --git a/app/src/background.js b/app/src/background.js
@@ -5,6 +5,7 @@ import {createProtocol} from 'vue-cli-plugin-electron-builder/lib'
 import path from 'path'
 
 import ipcHelper from "@/utils/ipcHelper"
+import open from "open";
 
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
@@ -54,8 +55,11 @@ app.on('activate', () => {
 })
 
 app.on('ready', () => {
-    createWindow().then(() => {
+    createWindow().then(async () => {
         ipcHelper(win)
+        const serverPath = isDevelopment ?
+            path.join(__dirname, "../../server/dist/server.exe") : path.join(process.cwd(), "/resources/server.exe")
+        await open.openApp(serverPath, {arguments: ['start']})
     })
 })
 

diff --git a/app/src/components/NavigationBar.vue b/app/src/components/NavigationBar.vue
@@ -20,13 +20,25 @@
       <cloud-download-outline/>
     </nav-button>
 
-    <n-icon v-show="connectState" title="服务已连接" class="conn-state" size="30">
-      <Link/>
-    </n-icon>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-icon @click="devTools" class="dev-tools" size="30">
+          <tool/>
+        </n-icon>
+      </template>
+      开发者工具
+    </n-tooltip>
 
-    <n-icon v-show="!connectState" title="服务已断开" class="conn-state" size="30">
-      <unlink/>
-    </n-icon>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-icon :color="connectState?'#ffffff':'#f38181'" @click="showServerModal" title="服务已连接" class="conn-state"
+                size="30">
+          <Link v-show="connectState"/>
+          <unlink v-show="!connectState"/>
+        </n-icon>
+      </template>
+      服务已{{ connectState ? '连接' : '断开' }}
+    </n-tooltip>
 
     <n-switch v-model:value="darkThemeFlag" size="large" style="position: absolute; bottom: 20px">
       <template #checked-icon>
@@ -36,11 +48,32 @@
         <n-icon :component="Sunny"/>
       </template>
     </n-switch>
+
+    <n-modal v-model:show="showModal">
+      <n-card
+          style="width: 600px"
+          title="后台服务管理"
+          :bordered="false"
+          size="huge"
+          role="dialog"
+          aria-modal="true"
+      >
+        <div style="text-align: center">
+          <h3>状态：已{{ connectState ? '连接' : '断开' }}</h3>
+          <n-space :size="30" justify="center">
+            <n-button @click="server('start')">启动服务</n-button>
+            <n-button @click="server('stop')">停止服务</n-button>
+            <n-button @click="server('restart')">重启服务</n-button>
+          </n-space>
+        </div>
+      </n-card>
+    </n-modal>
+
   </div>
 </template>
 
 <script>
-import {NIcon, NSwitch} from "naive-ui";
+import {NButton, NCard, NIcon, NModal, NSpace, NSwitch, NTooltip} from "naive-ui";
 import Login from "@/views/Login";
 import NavButton from "@/components/NavButton";
 import {
@@ -53,18 +86,20 @@ import {
   Sunny
 } from "@vicons/ionicons5";
 import {useStore} from "vuex";
-import {computed} from "vue";
-import {Link, Unlink} from "@vicons/tabler";
+import {computed, ref} from "vue";
+import {Link, Tool, Unlink} from "@vicons/tabler";
 
 export default {
   name: "NavigationBar",
   components: {
     Login,
     Sunny, Moon, PersonCircleOutline, Link, Unlink, BookOutline, ListOutline, DocumentTextOutline, CloudDownloadOutline,
-    NavButton, NSwitch, NIcon
+    Tool,
+    NavButton, NSwitch, NIcon, NTooltip, NModal, NCard, NSpace, NButton
   },
   setup() {
     const store = useStore()
+    const showModal = ref(false)
 
     const connectState = computed(() => store.state.connectState)
 
@@ -80,7 +115,27 @@ export default {
     return {
       darkThemeFlag,
       connectState,
-      Sunny, Moon
+      showModal,
+      Sunny, Moon,
+      showServerModal() {
+        showModal.value = true
+      },
+      devTools() {
+        window.$electron.win.devTools()
+      },
+      server(state) {
+        switch (state) {
+          case 'start':
+            window.$electron.utils.server('start')
+            break
+          case 'stop':
+            window.$electron.utils.server('stop')
+            break
+          case 'restart':
+            window.$electron.utils.server('restart')
+            break
+        }
+      }
     }
   }
 }
@@ -108,8 +163,10 @@ export default {
   color: white;
 }
 
-.conn-state[title='服务已断开'] {
-  color: #f38181;
+.dev-tools {
+  position: absolute;
+  bottom: 115px;
+  color: white;
 }
 
 </style>
diff --git a/app/src/preload.js b/app/src/preload.js
@@ -11,6 +11,7 @@ contextBridge.exposeInMainWorld('$electron', {
             minimize: () => ipcRenderer.send('win:minimize'),
             maximize: () => ipcRenderer.send('win:maximize'),
             close: () => ipcRenderer.send('win:close'),
+            devTools: () => ipcRenderer.send('win:devTools'),
         },
         store: {
             set: (key, val) => electronStore.set(key, val),
@@ -26,8 +27,9 @@ contextBridge.exposeInMainWorld('$electron', {
                 return finalPath
             },
             fExists: (path) => fs.existsSync(path),
+            server: async (cmd) => await ipcRenderer.invoke('open:server', cmd),
             shell: {
-                showItemInFolder: async (path) => await ipcRenderer.invoke('shell:showItemInFolder', path)
+                showItemInFolder: async (path) => await ipcRenderer.invoke('shell:showItemInFolder', path),
             },
             app: {
                 getPath: async (name) => await ipcRenderer.invoke('app:getPath', name),

diff --git a/app/src/utils/ipcHelper.js b/app/src/utils/ipcHelper.js
@@ -1,22 +1,27 @@
 import {app, dialog, ipcMain, shell} from 'electron'
+import path from 'path'
+import open from 'open'
 
 export default (win) => {
     ipcMain.on('win:minimize', () => win.minimize())
-    ipcMain.on('win:maximize', () => {
-        if (win.isMaximized()) {
-            win.unmaximize()
-        } else {
-            win.maximize()
-        }
-    })
-    ipcMain.on('win:close', () => {
-        win.destroy()
-    })
+    ipcMain.on('win:maximize', () => win.isMaximized() ? win.unmaximize() : win.maximize())
+    ipcMain.on('win:close', () => win.destroy())
+    ipcMain.on('win:devTools', () => win.webContents.isDevToolsOpened() ?
+        win.webContents.closeDevTools() : win.webContents.openDevTools())
 
     ipcMain.handle('dialog:showOpenDialog', async (e, options) => dialog.showOpenDialog(options))
+
     ipcMain.handle('app:getPath', async (e, name) => app.getPath(name))
     ipcMain.handle('app:getFileIconUrl', async (e, filePath) =>
         (await app.getFileIcon(filePath, {size: 'large'})).toDataURL())
+
     ipcMain.handle('shell:showItemInFolder', async (e, filePath) => shell.showItemInFolder(filePath))
+
     ipcMain.handle('download:downloadURL', async (e, url) => win.webContents.downloadURL(url))
+
+    ipcMain.handle('open:server', async (e, cmd) => {
+        const serverPath = process.env.NODE_ENV !== 'production' ?
+            path.join(__dirname, "../../server/dist/server.exe") : path.join(process.cwd(), "/resources/server.exe")
+        await open.openApp(serverPath, {arguments: [cmd]})
+    })
 }
diff --git a/app/vue.config.js b/app/vue.config.js
@@ -7,15 +7,22 @@ module.exports = defineConfig({
             builderOptions: {
                 "appId": "com.ruchuby.course",
                 "productName": "CourseHelper",
+                "extraResources":[{
+                    "from": "../server/dist/server.exe",
+                    "to": "./server.exe",
+                    "filter": ["**/*", "!foo/*.js"]
+                }],
                 "win": {
-                    "icon": "dist_electron/icons/logo.ico"
+                    "icon": "dist_electron/icons/icon.png"
                 },
                 "nsis": {
                     "oneClick": false,
-                    "perMachine": true,
                     "allowElevation": true,
                     "allowToChangeInstallationDirectory": true,
-                    "createDesktopShortcut": true
+                    "deleteAppDataOnUninstall":true,
+                    "shortcutName":'course助手',
+                    "installerIcon":'dist_electron/icons/installer.ico',
+                    "uninstallerIcon":'dist_electron/icons/uninstaller.ico'
                 }
             }
         }