add ops of save and read config files. migrate mainWindow to single file.

packages/geek-auto-start-chat-with-boss/runtime-file-utils.mjs

@@ -1,4 +1,5 @@
 import fs from 'node:fs'
+import fsPromise from 'node:fs/promises'
 import path from 'node:path'
 import os from 'node:os'
 
@@ -6,6 +7,8 @@ import defaultDingtalkConf from './default-config-file/dingtalk.json' assert {ty
 import defaultBossConf from './default-config-file/boss.json' assert {type: 'json'}
 import defaultTargetCompanyListConf from './default-config-file/target-company-list.json' assert {type: 'json'}
 
+export const configFileNameList = ['boss.json', 'dingtalk.json', 'target-company-list.json']
+
 const defaultConfigFileContentMap = {
   'boss.json': JSON.stringify(defaultBossConf),
   'dingtalk.json': JSON.stringify(defaultDingtalkConf),
@@ -28,15 +31,13 @@ const ensureRuntimeFolderPathExist = () => {
   })
 }
 
-const configFolderPath = path.join(
+export const configFolderPath = path.join(
   runtimeFolderPath,
   'config'
 )
 export const ensureConfigFileExist = () => {
   ensureRuntimeFolderPathExist()
-  ;[
+  ;configFileNameList.forEach(
-    'boss.json', 'dingtalk.json', 'target-company-list.json'
-  ].forEach(
     fileName => {
       if (!fs.existsSync(
         path.join(configFolderPath, fileName)
@@ -71,3 +72,12 @@ export const readConfigFile = (fileName) => {
   return o
 }
 
+export const writeConfigFile = async (fileName, content) => {
+  const filePath = path.join(configFolderPath, fileName)
+  const fileContent = JSON.stringify(content)
+  return fsPromise.writeFile(
+    filePath,
+    fileContent
+  )
+}
+

packages/ui/src/main/index.ts

@@ -1,39 +1,8 @@
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, BrowserWindow, ipcMain } from 'electron'
-import { join } from 'path'
+import { electronApp, optimizer } from '@electron-toolkit/utils'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import { mainLoop } from '@bossgeekgo/geek-auto-start-chat-with-boss/index.mjs'
+import { createMainWindow } from './window/mainWindow'
 console.log(mainLoop)
-function createWindow(): void {
-  // Create the browser window.
-  const mainWindow = new BrowserWindow({
-    width: 900,
-    height: 670,
-    show: false,
-    autoHideMenuBar: true,
-    ...(process.platform === 'linux' ? { icon } : {}),
-    webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
-      sandbox: false
-    }
-  })
-
-  mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
-  })
-
-  mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
-
-  // HMR for renderer base on electron-vite cli.
-  // Load the remote URL for development or the local html file for production.
-  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
-  } else {
-    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
-  }
-}
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
@@ -52,12 +21,12 @@ app.whenReady().then(() => {
   // IPC test
   ipcMain.on('ping', () => console.log('pong'))
 
-  createWindow()
+  createMainWindow()
 
   app.on('activate', function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+    if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
   })
 })
 

packages/ui/src/main/window/mainWindow.ts

@@ -0,0 +1,77 @@
+import { BrowserWindow, ipcMain, shell } from 'electron'
+import path from 'path'
+import { is } from '@electron-toolkit/utils'
+import {
+  readConfigFile,
+  configFileNameList,
+  ensureConfigFileExist,
+  writeConfigFile
+} from '@bossgeekgo/geek-auto-start-chat-with-boss/runtime-file-utils.mjs'
+let mainWindow: BrowserWindow
+
+export function createMainWindow(): void {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 900,
+    height: 670,
+    show: false,
+    autoHideMenuBar: true,
+    ...(process.platform === 'linux'
+      ? {
+          /* icon */
+        }
+      : {}),
+    webPreferences: {
+      preload: path.join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+
+  is.dev && mainWindow.webContents.openDevTools()
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
+  }
+
+  ipcMain.handle('fetch-config-file-content', async () => {
+    const fileContentList = configFileNameList.map((fileName) => {
+      return readConfigFile(fileName)
+    })
+    const result = {}
+
+    configFileNameList.forEach((fileName, index) => {
+      result[fileName] = fileContentList[index]
+    })
+    return result
+  })
+
+  ipcMain.handle('save-config-file-from-ui', async (ev, payload) => {
+    payload = JSON.parse(payload)
+    ensureConfigFileExist()
+
+    const dingtalkConfig = readConfigFile('dingtalk.json')
+    dingtalkConfig.groupRobotAccessToken = payload.dingtalkRobotAccessToken
+
+    const bossZhipinConfig = readConfigFile('boss.json')
+    bossZhipinConfig.cookies = JSON.parse(payload.bossZhipinCookies)
+
+    return await Promise.all([
+      writeConfigFile('boss.json', bossZhipinConfig),
+      writeConfigFile('dingtalk.json', dingtalkConfig),
+      writeConfigFile('target-company-list.json', payload.expectCompanies.split(','))
+    ])
+  })
+}

packages/ui/src/renderer/src/page/Configuration/GeekAutoStartChatWithBoss.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-wrap">
-    <el-form :model="formContent" label-position="top">
+    <el-form ref="formRef" :model="formContent" label-position="top" :rules="formRules">
       <el-form-item
         label="BossZhipin cookies (copy with EditThisCookie Extension from a window which has been logined)"
         prop="bossZhipinCookies"
@@ -19,10 +19,12 @@
           v-model="formContent.expectCompanies"
           :autosize="{ minRows: 4 }"
           type="textarea"
+          @blur="handleExpectCompaniesInputBlur"
         />
       </el-form-item>
       <el-form-item class="last-form-item">
-        <el-button type="primary"> I'm ready, geekgeekgo! </el-button>
+        <el-button @click="handleSave">Just save the configuration</el-button>
+        <el-button type="primary" @click="handleSubmit"> I'm ready, geekgeekgo! </el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -30,16 +32,60 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import JSON5 from 'json5'
+import { ElForm } from 'element-plus';
 
 const formContent = ref({
   bossZhipinCookies: '',
   dingtalkRobotAccessToken: '',
   expectCompanies: ''
 })
+
+electron.ipcRenderer.invoke('fetch-config-file-content').then((res) => {
+  console.log(res)
+  formContent.value.bossZhipinCookies = JSON.stringify(res['boss.json'].cookies, null, 2)
+  formContent.value.dingtalkRobotAccessToken = res['dingtalk.json']['groupRobotAccessToken']
+  formContent.value.expectCompanies = res['target-company-list.json'].join(',')
+})
+
+const formRules = {
+  bossZhipinCookies: [
+    {
+      required: true,
+    },
+    {
+      trigger: 'blur',
+      validator (rule, val, cb) {
+        try {
+          JSON5.parse(val)
+        } catch (err) {
+          cb(new Error(`JSON content is invalid: ${err.message}`))
+        }
+        cb()
+      }
+    }
+  ]
+}
+
+const formRef = ref<InstanceType<typeof ElForm>>()
+const handleSubmit = async () => {
+  await formRef.value!.validate()
+  await electron.ipcRenderer.invoke('save-config-file-from-ui', JSON.stringify(formContent.value))
+}
+const handleSave = async () => {
+  await formRef.value!.validate()
+  await electron.ipcRenderer.invoke('save-config-file-from-ui', JSON.stringify(formContent.value))
+  window.alert('Configuration saved.')
+}
+
+const handleExpectCompaniesInputBlur = (event) => {
+  event.target.value = (event.target?.value ?? '').split(/,|，/).map(it => it.trim()).filter(Boolean).join(',')
+}
 </script>
 
 <style scoped lang="scss">
 .form-wrap {
+  --monospace-font-family: Monaco, Consolas, Menlo, monospace;
   padding-top: 100px;
   margin: 0 auto;
   max-width: 640px;
@@ -49,5 +95,10 @@ const formContent = ref({
       justify-content: flex-end;
     }
   }
+
+  font-family: var(--monospace-font-family);
+  button, input, textarea {
+    font-family: var(--monospace-font-family);
+  }
 }
 </style>

packages/ui/src/renderer/src/router/index.ts

@@ -10,12 +10,12 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/configuration',
-    component: import('@renderer/page/Configuration/index.vue'),
+    component: () => import('@renderer/page/Configuration/index.vue'),
     redirect: '/configuration/GeekAutoStartChatWithBoss',
     children: [
       {
         path: 'GeekAutoStartChatWithBoss',
-        component: import('@renderer/page/Configuration/GeekAutoStartChatWithBoss.vue'),
+        component: () => import('@renderer/page/Configuration/GeekAutoStartChatWithBoss.vue'),
         meta: {
           title: '"geek auto start chat with boss" configuration'
         }