自动输入密码功能

electron/electron-env.d.ts

@@ -32,7 +32,7 @@ interface Window {
     loadDefaultAppsJson: () => Promise<any>
     saveAppsJson: (appsJson: string) => void
     openWindow: (url: string) => void
-    loadChildUrl: (url: string, aspectRatio: number) => void
+    loadChildUrl: (url: string, aspectRatio: number, inputPassword?: { username: string; password: string }) => void
     toggleChildSide: (isSideOen: boolean) => void
     showConfig: () => void
     showAbout: () => void

electron/main.ts

@@ -63,6 +63,7 @@ function createWindow() {
     webPreferences: {
       preload: path.join(__dirname, 'preload.mjs'),
       contextIsolation: true,
+      devTools: true,
       allowRunningInsecureContent: true,
     },
     width: 1200,
@@ -178,22 +179,45 @@ function createWindow() {
     mainWindow?.webContents.send('main-process-message', (new Date).toLocaleString())
   })
 
-  function handleWindowFullScreenKeys(event: Event, input: Input) {
+  function handleWindowFullScreenKeys(window: BrowserWindow | WebContentsView, event: Event, input: Input) {
     if (input.key === 'F11' && input.type === 'keyDown') {
       event.preventDefault();
       mainWindow?.setFullScreen(!mainWindow?.isFullScreen())
     } else if (input.key === 'F12' && input.type === 'keyDown') {
       event.preventDefault();
-      mainWindow?.webContents.toggleDevTools();
+      if (window === mainWindow) {
+        toggleDevTools()
+      } else if (window === childView) {
+        childView?.webContents.toggleDevTools()
+      }
+    } else if (input.key === 'F5' && input.type === 'keyDown') {
+      event.preventDefault();
+      if (window === mainWindow) {
+        mainWindow?.webContents.reload()
+      } else if (window === childView) {
+        childView?.webContents.reload()
+      }
+    }
+  }
+
+  function toggleDevTools() {
+    if (mainWindow) {
+      if (mainWindow.webContents.isDevToolsOpened()) {
+        mainWindow.webContents.closeDevTools()
+      } else {
+        mainWindow.webContents.openDevTools({
+          mode: 'detach',
+        })
+      }
     }
   }
 
   // 添加F11全屏切换功能
   mainWindow.webContents.on('before-input-event', (event, input) => {
-    handleWindowFullScreenKeys(event, input)
+    handleWindowFullScreenKeys(mainWindow!, event, input)
   })
   childView.webContents.on('before-input-event', (event, input) => {
-    handleWindowFullScreenKeys(event, input)
+    handleWindowFullScreenKeys(childView!, event, input)
   })
   // 处理退出应用事件
   ipcMain.on('exit-app', () => {
@@ -209,10 +233,47 @@ function createWindow() {
       }
     }
   })
+  ipcMain.on('toggle-dev-tools', toggleDevTools)
   // 加载子页URL
-  ipcMain.on('load-child-url', (_event, url: string, aspectRatio: number) => {
-    if (childView)
+  ipcMain.on('load-child-url', (_event, url: string, aspectRatio: number, inputPassword?: { username: string; password: string }) => {
+    if (childView) {
+      console.log('load-child-url', url, inputPassword)
       childView.webContents.loadURL(url)
+      if (inputPassword) {
+        childView.webContents.once('did-finish-load', () => {
+          console.log('did-finish-load', inputPassword)
+          const script = `
+            (function() {
+              function tryFill() {
+                const passwordInputs = document.querySelectorAll('input[type="password"]');
+                if (passwordInputs.length === 0) return false;
+                const allInputs = Array.from(document.querySelectorAll('input'));
+                const usernameInput = allInputs.find(el => {
+                  const type = el.getAttribute('type');
+                  return !type || type === 'text' || type === 'email';
+                });
+                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+                if (usernameInput) {
+                  nativeInputValueSetter.call(usernameInput, ${JSON.stringify(inputPassword.username)});
+                  usernameInput.dispatchEvent(new Event('input', { bubbles: true }));
+                  usernameInput.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+                const pwdInput = passwordInputs[0];
+                nativeInputValueSetter.call(pwdInput, ${JSON.stringify(inputPassword.password)});
+                pwdInput.dispatchEvent(new Event('input', { bubbles: true }));
+                pwdInput.dispatchEvent(new Event('change', { bubbles: true }));
+                return true;
+              }
+              let attempts = 0;
+              const timer = setInterval(() => {
+                if (tryFill() || ++attempts >= 10) clearInterval(timer);
+              }, 500);
+            })();
+          `;
+          childView!.webContents.executeJavaScript(script).catch(() => {});
+        });
+      }
+    }
     childViewAspectRatio = aspectRatio
     updateChildWindowBounds()
   })

electron/preload.ts

@@ -32,7 +32,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   loadDefaultAppsJson: () => ipcRenderer.invoke('load-default-apps-json'),
   saveAppsJson: (appsJson: string) => ipcRenderer.send('save-apps-json', appsJson),
   openWindow: (url: string) => ipcRenderer.send('open-window', url),
-  loadChildUrl: (url: string, aspectRatio: number) => ipcRenderer.send('load-child-url', url, aspectRatio),
+  loadChildUrl: (url: string, aspectRatio: number, inputPassword?: { username: string; password: string }) => ipcRenderer.send('load-child-url', url, aspectRatio, inputPassword),
   toggleChildSide: (isSideOen: boolean) => ipcRenderer.send('toggle-child-side', isSideOen),
   showConfig: () => ipcRenderer.send('show-config'),
   showAbout: () => ipcRenderer.send('show-about'),

public/apps.json

@@ -5,7 +5,11 @@
     "keepScreenSize": true,
     "aspectRatio": "16/9",
     "openType": "iframe",
-    "url": "https://mn.wenlvti.net/test/#/"
+    "url": "https://mn.wenlvti.net/test/#/",
+    "inputPassword": {
+      "username": "admin",
+      "password": "bh2643"
+    }
   },
   {
     "id": 2,

src/App.vue

@@ -9,7 +9,11 @@
 
 <script setup lang="ts">
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
+import { onMounted } from 'vue';
 
+onMounted(() => {
+  
+})
 </script>
 
 <style lang="scss">

src/components/Update.vue

@@ -0,0 +1,12 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+function checkUpdate() {
+}
+</script>
+
+<style scoped>
+
+</style>

src/model/App.ts

@@ -19,4 +19,11 @@ export interface AppItem {
    * 屏幕尺寸比例。例如 16 / 9
    */
   aspectRatio?: string
+  /**
+   * 自动输入用户名与密码
+   */
+  inputPassword?: {
+    username: string
+    password: string
+  }
 }

src/views/About.vue

@@ -7,7 +7,7 @@
         </div>
         <div class="about-title">
           <h1>演示程序</h1>
-          <p class="about-tagline">公司内部的项目演示</p>
+          <p class="about-tagline">厦门博合文化科技有限公司内部的项目演示</p>
         </div>
       </div>
       <div class="about-info">

src/views/Config.vue

@@ -41,6 +41,7 @@
           <ul class="help-list">
             <li><code>keepScreenSize</code>: 是否保持显示尺寸比例（布尔类型，默认false）</li>
             <li><code>aspectRatio</code>: 屏幕尺寸比例（字符串类型，例如 "16/9"）</li>
+            <li><code>inputPassword</code>: 自动输入用户名与密码（对象类型，例如 {"username": "admin", "password": "123456"}）</li>
           </ul>
         </div>       
         <div class="help-section">
@@ -91,7 +92,11 @@ const configExample = ref(`[
   {
     "id": 3,
     "title": "GitHub",
-    "url": "https://github.com"
+    "url": "https://github.com",
+    "inputPassword": {
+      "username": "admin",
+      "password": "123456"
+    }
   }
 ]`)
 

src/views/Main.vue

@@ -34,6 +34,7 @@ async function loadApps() {
 
 // 选择应用
 function selectApp(app: AppItem) {
+
   isLoading.value = true
   //if (app.openType === 'window') {
   //  window.electronAPI.openWindow(app.url)
@@ -53,7 +54,10 @@ function selectApp(app: AppItem) {
 
     window.electronAPI.loadChildUrl(app.url, app.keepScreenSize ? (
       parseAspectRatio(app.aspectRatio || '16:9')
-    ) : 0)
+    ) : 0, app.inputPassword ? {
+      username: app.inputPassword.username,
+      password: app.inputPassword.password,
+    } : undefined)
   //}
   setTimeout(() => {
     isLoading.value = false
@@ -68,6 +72,10 @@ function toggleFullScreen() {
   isFullScreen.value = !isFullScreen.value
   window.electronAPI.toggleFullScreen(isFullScreen.value)
 }
+// 切换开发者工具
+function toggleDevTools() {
+  window.electronAPI.toggleDevTools()
+}
 // 显示配置窗口
 function showConfig() {
   window.electronAPI.showConfig()
@@ -95,6 +103,11 @@ function showMenu() {
         onClick: toggleFullScreen,
       },
       {
+        label: '开发者工具',
+        shortcut: 'F12',
+        onClick: toggleDevTools,
+      },
+      {
         label: '关于',
         divided: 'up',
         onClick: showAbout,