minnan-demo-app/electron/main.ts

import { app, BrowserWindow, dialog, Event, Input, ipcMain, Menu, shell, WebContentsView } from 'electron'
import { fileURLToPath } from 'node:url'
import path from 'node:path'
import fs from 'node:fs'
import { initUpdater } from './updater'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

// The built directory structure
//
// ├─┬─┬ dist
// │ │ └── index.html
// │ │
// │ ├─┬ dist-electron
// │ │ ├── main.js
// │ │ └── preload.mjs
// │
process.env.APP_ROOT = path.join(__dirname, '..')

// 🚧 Use ['ENV_NAME'] avoid vite:define plugin - Vite@2.x
export const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')

process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, 'public') : RENDERER_DIST

type InputPassword = {
  username: string;
  password: string;
}

let mainWindow: BrowserWindow | null
let childView: WebContentsView | null

let isSideOpen = true
let childViewAspectRatio = 0; 
let childViewInputPassword: InputPassword | undefined;
const SIDE_WIDTH = 250
const EXPAND_VIEW_SIZE = 40
const LOADING_VIEW_WIDTH = 150
const LOADING_VIEW_HEIGHT = 60

function loadWindowPage(window: BrowserWindow, subPath: string) {
  if (VITE_DEV_SERVER_URL) {
    window.loadURL(VITE_DEV_SERVER_URL + "#" + subPath)
  } else {
    window.loadFile(path.join(RENDERER_DIST, 'index.html'), {
      hash: subPath,
    })
  }
}
function loadViewUrl(view: WebContentsView, subPath: string) {
  if (!mainWindow) {
    return
  }
  if (VITE_DEV_SERVER_URL) {
    view.webContents.loadURL(VITE_DEV_SERVER_URL + "#" + subPath)
  } else {
    view.webContents.loadFile(path.join(RENDERER_DIST, 'index.html'), {
      hash: subPath,
    })
  }
}

Menu.setApplicationMenu(null)

function createWindow() {
  mainWindow = new BrowserWindow({
    icon: path.join(process.env.VITE_PUBLIC, 'icon.ico'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.mjs'),
      contextIsolation: true,
      devTools: true,
      allowRunningInsecureContent: true,
    },
    width: 1200,
    height: 800,
  })

  childView = new WebContentsView({
    webPreferences: {
      allowRunningInsecureContent: true,
    },
  })
  const expandButtonView = new WebContentsView({
    webPreferences: {
      preload: path.join(__dirname, 'preload.mjs'),
      contextIsolation: true,
    },
  })
  const loadingView = new BrowserWindow({
    skipTaskbar: true,
    width: LOADING_VIEW_WIDTH,
    height: LOADING_VIEW_HEIGHT,
    parent: mainWindow,
    thickFrame: true,
    titleBarStyle: 'hidden',
    webPreferences: {
      preload: path.join(__dirname, 'preload.mjs'),
      contextIsolation: true,
    },
  })
  mainWindow.contentView.addChildView(childView)
  mainWindow.contentView.addChildView(expandButtonView)
  expandButtonView.setVisible(false)  
  expandButtonView.setBackgroundColor('#00000000')

  childView.webContents.on('did-start-loading', () => {
    loadingView.show()
  });
  childView.webContents.on('did-stop-loading', () => {
    loadingView.hide()
  });
  childView.webContents.on('did-fail-load', (_, errorCode, errorDescription) => {
    loadingView.hide()
    loadViewUrl(childView!, '/error?code=' + errorCode + '&message=' + errorDescription);
  });

  function updateChildWindowBounds() {
    const bounds = mainWindow!.getBounds();
    const contentBounds = mainWindow!.getContentBounds();
    const contentWidth = contentBounds.width;
    const contentHeight = contentBounds.height;

    expandButtonView.setBounds({
      x: 0,
      y: contentHeight - 100,
      width: EXPAND_VIEW_SIZE,
      height: EXPAND_VIEW_SIZE
    })
    loadingView.setBounds({
      x: bounds.x + (bounds.width - LOADING_VIEW_WIDTH) / 2,
      y: bounds.y + 30,
      width: LOADING_VIEW_WIDTH,
      height: LOADING_VIEW_HEIGHT
    })

    const availableX = isSideOpen ? SIDE_WIDTH : 0;
    const availableWidth = contentWidth - availableX;
    const availableHeight = contentHeight;

    if (childViewAspectRatio) {
      const availableRatio = availableWidth / availableHeight;
      let childWidth, childHeight;

      if (availableRatio > childViewAspectRatio) {
        childHeight = availableHeight;
        childWidth = childHeight * childViewAspectRatio;
      } else {
        childWidth = availableWidth;
        childHeight = childWidth / childViewAspectRatio;
      }

      const childX = availableX + (availableWidth - childWidth) / 2;
      const childY = (availableHeight - childHeight) / 2;

      childView!.setBounds({
        x: Math.round(childX),
        y: Math.round(childY),
        width: Math.round(childWidth),
        height: Math.round(childHeight)
      });
    } else {
      childView!.setBounds({
        x: availableX,
        y: 0,
        width: availableWidth,
        height: availableHeight
      });
    }
  }

  loadWindowPage(mainWindow, '/');
  loadWindowPage(loadingView, '/loading');
  loadViewUrl(childView, '/hello');
  loadViewUrl(expandButtonView, '/expand');
  updateChildWindowBounds();
  initUpdater(mainWindow);

  mainWindow.on('resize', () => {
    updateChildWindowBounds()
  })
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow?.webContents.send('main-process-message', (new Date).toLocaleString())
  })

  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();
      if (window === mainWindow) {
        toggleDevTools()
      } else if (window === childView) {
        childView?.webContents.toggleDevTools()
      }
    } else if (input.key === 'F5' && input.type === 'keyDown') {
      event.preventDefault();
      if (window === mainWindow) {
        if (input.control)
          mainWindow?.webContents.reloadIgnoringCache()
        else 
          mainWindow?.webContents.reload()
      } else if (window === childView) {
        if (input.control)
          childView?.webContents.reloadIgnoringCache()
        else 
          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(mainWindow!, event, input)
  })
  childView.webContents.on('before-input-event', (event, input) => {
    handleWindowFullScreenKeys(childView!, event, input)
  })
  childView.webContents.on('did-finish-load', () => {
    if (childViewInputPassword) {
      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(childViewInputPassword.username)});
              usernameInput.dispatchEvent(new Event('input', { bubbles: true }));
              usernameInput.dispatchEvent(new Event('change', { bubbles: true }));
            }
            const pwdInput = passwordInputs[0];
            nativeInputValueSetter.call(pwdInput, ${JSON.stringify(childViewInputPassword.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(() => {});
    }
  });

  // 处理退出应用事件
  ipcMain.on('exit-app', () => {
    app.quit()
  })
  // 处理全屏切换事件
  ipcMain.on('toggle-fullscreen', (_event, isFullScreen: boolean) => {
    if (mainWindow) {
      if (isFullScreen) {
        mainWindow.setFullScreen(true)
      } else {
        mainWindow.setFullScreen(false)
      }
    }
  })
  ipcMain.on('toggle-dev-tools', toggleDevTools)
  // 加载子页URL
  ipcMain.on('load-child-url', (_event, url: string, aspectRatio: number, inputPassword?: InputPassword) => {
    if (childView)
      childView.webContents.loadURL(url)
    childViewInputPassword = inputPassword;
    childViewAspectRatio = aspectRatio
    updateChildWindowBounds()
  })
  // 子页侧边栏开关
  ipcMain.on('toggle-child-side', (_event, value: boolean) => {
    isSideOpen = value
    expandButtonView.setVisible(!isSideOpen)
    mainWindow?.webContents.send('main-side-state-changed', isSideOpen)
    updateChildWindowBounds()
  })
  ipcMain.on('open-in-system', (_event, url: string) => {
    shell.openExternal(url)
  })
  ipcMain.on('refresh-child-view', () => {
    childView?.webContents.reloadIgnoringCache()
  })
  // 处理获取应用路径事件
  ipcMain.handle('get-app-path', () => {
    return app.getAppPath()
  })
  // 处理打开窗口事件
  ipcMain.on('open-window', (_event, url: string) => {
    const newWin = new BrowserWindow({
      icon: path.join(process.env.VITE_PUBLIC, 'icon.ico'),
      webPreferences: {
        preload: path.join(__dirname, 'preload.mjs'),
        contextIsolation: true,
        allowRunningInsecureContent: true,
      },
      fullscreenable: true,
      maximizable: true,
      width: 1200,
      height: 800,
    })
    newWin.loadURL(url)
    newWin.maximize();
    // 添加F11全屏切换功能
    newWin.webContents.on('before-input-event', (event, input) => {
      if (input.key === 'F11' && input.type === 'keyDown') {
        event.preventDefault();
        newWin?.setFullScreen(!newWin?.fullScreen)
      } else if (input.key === 'F12' && input.type === 'keyDown') {
        event.preventDefault();
        newWin?.webContents.toggleDevTools();
      }
    })
  })
  // 处理加载apps.json事件
  ipcMain.handle('load-apps-json', async () => {
    const appPath = process.cwd()
    const appsJsonPath = path.join(appPath, 'apps.json')

    try {
      if (fs.existsSync(appsJsonPath)) {
        const data = fs.readFileSync(appsJsonPath, 'utf8')
        return JSON.parse(data)
      } else {
        // 开发环境下回退到public目录
        const devAppsJsonPath = path.join(process.env.VITE_PUBLIC || '', 'apps.json')
        if (fs.existsSync(devAppsJsonPath)) {
          const data = fs.readFileSync(devAppsJsonPath, 'utf8')
          return JSON.parse(data)
        }
        throw new Error('apps.json not found')
      }
    } catch (error) {
      console.error('Error loading apps.json:', error)
      throw error
    }
  })
  // 处理加载默认apps.json事件
  ipcMain.handle('load-default-apps-json', async () => {
    const devAppsJsonPath = path.join(process.env.VITE_PUBLIC || '', 'apps.json')
    if (fs.existsSync(devAppsJsonPath)) {
      const data = fs.readFileSync(devAppsJsonPath, 'utf8')
      return JSON.parse(data)
    }
    throw new Error('apps.json not found')
  })
  // 处理显示配置窗口事件
  ipcMain.on('show-config', () => {
    const configWindow = new BrowserWindow({
      icon: path.join(process.env.VITE_PUBLIC, 'icon.ico'),
      webPreferences: {
        preload: path.join(__dirname, 'preload.mjs'),
        contextIsolation: true,
        allowRunningInsecureContent: true,
      },
      title: '列表配置',
      parent: mainWindow || undefined,
      skipTaskbar: true,
      minimizable: false,
      maximizable: false,
      modal: true,
      width: 800,
      height: 600,
    })
    loadWindowPage(configWindow, '/config')
  });
  // 处理保存apps.json事件
  ipcMain.on('save-apps-json', (_event, appsJson: string) => {
    const appPath = process.cwd()
    const appsJsonPath = path.join(appPath, 'apps.json')
    try {
      fs.writeFileSync(appsJsonPath, appsJson)
      mainWindow?.webContents.send('main-config-changed')
    } catch (error) {
      console.error('Error saving apps.json:', error)
      throw error
    }
  })
  // 处理显示关于窗口事件
  ipcMain.handle('clear-cache', async () => {
    if (mainWindow) {
      const res = await dialog.showMessageBox(mainWindow, {
        title: '提示',
        message: '是否要清除缓存？',
        type: 'question',
        buttons: ['取消', '确定'],
        defaultId: 0,
        noLink: true,
      });
      if (res.response === 0) 
        return
      await mainWindow.webContents.session.clearCache()
      if (childView) {
        await childView.webContents.session.clearCache()
        childView.webContents.reloadIgnoringCache();
      }
    }
  })

  ipcMain.on('show-about', () => {
    const aboutWindow = new BrowserWindow({
      icon: path.join(process.env.VITE_PUBLIC, 'icon.ico'),
      webPreferences: {
        preload: path.join(__dirname, 'preload.mjs'),
        contextIsolation: true,
        allowRunningInsecureContent: true,
      },
      parent: mainWindow || undefined,
      title: '关于程序',
      skipTaskbar: true,
      maximizable: false,
      minimizable: false,
      modal: true,
      width: 450,
      height: 470,
    })
    loadWindowPage(aboutWindow, '/about')
  });

}

// Quit when all mainWindowdows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
    mainWindow = null
  }
})
app.on('activate', () => {
  // On OS X it's common to re-create a mainWindowdow in the app when the
  // dock icon is clicked and there are no other mainWindowdows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

app.whenReady().then(createWindow)