如何为Electron应用添加类似原生顶部栏的底部状态栏？

已实现的顶部应用栏代码 #

我已通过Electron的Menu API实现了正常工作的顶部应用栏，代码如下：

_setupMenu() {
        const template = [
            {
                label: 'File',
                submenu: [
                    { role: 'quit' }
                ]
            },
            {
                label: 'View',
                submenu: [
                    { role: 'reload' },
                    { role: 'toggleDevTools' },
                    { type: 'separator' },
                    { role: 'resetZoom' },
                    { role: 'zoomIn' },
                    { role: 'zoomOut' },
                    { type: 'separator' },
                    { role: 'togglefullscreen' }
                ]
            }
        ];

        const menu = Menu.buildFromTemplate(template);
        Menu.setApplicationMenu(menu);
    }

需求与问题 #

我想添加一个类似顶部栏的原生风格底部状态栏，用来放置各类操作元素和状态信息。但目前找到的方案都是基于HTML/CSS注入实现的，并非Electron原生方案。

我试过以下HTML/CSS注入的方式，但不符合预期，而且代码实现、参数配置和顶部应用栏差异很大：

_injectStatusBarStyles() {
        const css = `
            .status-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 25px;
                background-color: #e8e8e8;
                border-top: 1px solid #c1c1c1;
                display: flex;
                align-items: center;
                padding: 0 10px;
                font-family: system-ui;
                -webkit-app-region: no-drag;
                z-index: 1000;
            }
            .status-bar-item {
                margin-right: 15px;
                cursor: pointer;
                color: #2c2c2c;
                display: flex;
                align-items: center;
            }
            .status-bar-item:hover {
                background-color: #d0d0d0;
                border-radius: 3px;
                padding: 2px 4px;
            }
        `;
        this.mainWindow.webContents.insertCSS(css).then(r => console.log('CSS injected:', r));
    }

    _injectStatusBarHTML() {
        const js = `
            const statusBar = document.createElement('div');
            statusBar.className = 'status-bar';
            
            const folderIcon = document.createElement('div');
            folderIcon.className = 'status-bar-item';
            folderIcon.innerHTML = '📁';
            folderIcon.onclick = () => {
                window.electron.openUserDataPath();
            };
            
            statusBar.appendChild(folderIcon);
            document.body.appendChild(statusBar);
        `;
        this.mainWindow.webContents.executeJavaScript(js).then(r => console.log('JS injected:', r));
    }

尝试的原生方案疑问 #

我尝试用第二个Menu模板来实现底部状态栏，但不确定能不能把这个Menu显示在应用底部，也不知道具体实现方法：

_createStatusBar() {
        const statusTemplate = [
            {
                label: '📁',
                click: () => {
                    // Handle folder click
                    console.log('Folder clicked');
                }
            },
            {
                label: 'Status: Ready',
                enabled: false
            },
            {
                label: '🔄',
                click: () => {
                    // Handle refresh click
                    console.log('Refresh clicked');
                }
            }
        ];
        const statusMenu = Menu.buildFromTemplate(statusTemplate);
        Menu.setApplicationMenu(statusMenu);
        
    }

内容的提问来源于stack exchange，提问作者Francisco IA Lover