使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

使用 Electron 实现类似新版 QQ 的登录界面效果，需要注意以下几点：

1. 创建 Electron 项目

使用命令行创建一个新的 Electron 项目，进入项目文件夹后安装必要的依赖：

# 初始化项目
npm init
# 安装 electron
npm install electron --save
# 安装 jquery 和 bootstrap
npm install jquery bootstrap --save

为了实现窗体的旋转效果，我们使用 CSS 3D Transform 这个特性。这里我们还需要引入一个元素，使得窗体可以进行翻转。我使用的是 Flipster，一个 jQuery 插件。安装 Flipster：

npm install flipster --save

2. 编写登录窗口的 HTML 和 CSS

在项目的根目录下，创建一个名为 index.html 的文件，并添加下面的 html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ Login</title>
    <!-- 引入 bootstrap 样式文件 -->
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <!-- 引入 flipster 样式文件 -->
    <link rel="stylesheet" href="./node_modules/flipster/dist/jquery.flipster.min.css">
    <!-- 引入自己的样式文件 -->
    <link rel="stylesheet" href="./src/style.css">
</head>
<body>
    <div class="container">
        <div class="login-form-wrapper">
            <form class="login-form">
                <h3>Please Login</h3>
                <div class="form-group">
                    <input type="text" placeholder="Username" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary">Login</button>
            </form>
            <!-- 构建翻转窗体 -->
            <ul id="flipster-wrapper">
                <li><img src="./res/1.jpg"></li>
                <li><img src="./res/2.jpg"></li>
                <li><img src="./res/3.jpg"></li>
                <li><img src="./res/4.jpg"></li>
            </ul>
        </div>
    </div>
    <!-- 引入 jQuery -->
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <!-- 引入 bootstrap.js -->
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- 引入 flipster.js -->
    <script src="./node_modules/flipster/dist/jquery.flipster.min.js"></script>
    <!-- 引入自己的脚本文件 -->
    <script src="./src/main.js"></script>
</body>
</html>

接下来在项目的根目录下，创建一个名为 style.css 的样式文件，并添加下列代码：

body {
    margin: 0;
    background-color: #f3f3f3;
    font-family: 'Roboto', sans-serif;
}

.container {
    background-color: transparent;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form-wrapper {
    position: absolute;
    width: 450px;
    height: 400px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(102, 119, 136, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.login-form-wrapper .login-form {
    padding: 30px;
}

.login-form-wrapper h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 400;
    color: #333;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    box-shadow: none;
    border-radius: 2px;
    border-color: #dcdcdc;
    height: 50px;
    font-size: 16px;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    padding: 12px 18px;
    font-size: 16px;
    border-radius: 2px;
}

.btn-primary:hover {
    background-color: #0069d9;
}

/* 翻转窗体相关 */
#flipster-wrapper {
    margin: 70px auto 0;
}

#flipster-wrapper li {
    margin-bottom: 20px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#flipster-wrapper img {
    display: block;
    width: 100%;
    border-radius: 2px;
}

3. 编写 Electron 主进程代码和渲染进程代码

需要注意的是，我们需要使用这个标签来开启和禁用部分 Electron 特性来达到最佳的运行效果。

在根目录下，创建一个名为 main.js 的文件，添加如下代码：

const { app, BrowserWindow } = require('electron')

let mainWindow = null

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        width: 450,
        height: 400,
        frame: false, // 隐藏默认窗口栏
        resizable: false, // 禁止窗口大小缩放
        transparent: true, // 窗口透明
        show: false, // 创建窗口时先不显示
        webPreferences: {
            nodeIntegration: true // 开启 Node.js
        }
    })

    // 加载 HTML 文件
    mainWindow.loadFile('./index.html')

    // 当最初的 html 文件加载完成时触发
    mainWindow.once('ready-to-show', () => {
        mainWindow.show() // 显示窗口
    })

    // 监听渲染器进程发来的 ipc 消息
    const { ipcMain } = require('electron')
    ipcMain.on('window-close', () => {
        if (mainWindow !== null) {
            mainWindow.close()
        }
    })
})

在根目录下，创建一个名为 renderer.js 的文件，添加如下代码：

$(function () {
    // 初始化 flipster
    $('#flipster-wrapper').flipster({
        style: 'carousel',
        spacing: -0.5,
        buttons: true,
        nav: false,
        start: 1,
        loop: true
    })

    // 窗口拖动
    var _electron = require('electron')
    var remote = _electron.remote
    var win = remote.getCurrentWindow()
    var drag = document.querySelector('.login-form-wrapper')

    drag.addEventListener('mousedown', function (e) {
        if (e.button !== 0) {
            return
        }

        win.setIgnoreMouseEvents(true)
        var mousePos = null

        document.addEventListener('mousemove', moveCallback, true)
        document.addEventListener('mouseup', mouseupCallback, true)

        function moveCallback (e) {
            e.preventDefault()

            var pos
            if (mousePos === null) {
                mousePos = {
                    x: e.screenX,
                    y: e.screenY
                }
            } else {
                pos = {
                    x: e.screenX - mousePos.x,
                    y: e.screenY - mousePos.y
                }

                win.setPosition(remote.screen.getCursorScreenPoint().x - pos.x, remote.screen.getCursorScreenPoint().y - pos.y)
            }

            mousePos = {
                x: e.screenX,
                y: e.screenY
            }
        }

        function mouseupCallback () {
            win.setIgnoreMouseEvents(false)
            document.removeEventListener('mousemove', moveCallback, true)
            document.removeEventListener('mouseup', mouseupCallback, true)
        }
    })
})

4. 编写菜单和 ipc 监听器

const { Menu, MenuItem } = require('electron')
const { app, BrowserWindow, ipcMain } = require('electron')

app.on('ready', function() {
    const mainWindow = new BrowserWindow({
        width: 700,
        height: 500,
        webPreferences: {
            nodeIntegration: true
        }
    })

    mainWindow.loadFile('index.html')

    mainWindow.webContents.on('did-finish-load', () => {
        const menu = Menu.buildFromTemplate([
            {
                label: 'File',
                submenu: [
                    {
                        label: 'Close',
                        accelerator: 'CmdOrCtrl+W',
                        click() {
                            mainWindow.close()
                        }
                    }
                ]
            },
            {
                label: 'Edit',
                submenu: [
                    {
                        label: 'Undo',
                        accelerator: 'CmdOrCtrl+Z',
                        selector: 'undo:'
                    },
                    {
                        label: 'Redo',
                        accelerator: 'Shift+CmdOrCtrl+Z',
                        selector: 'redo:'
                    },
                    {
                        type: 'separator'
                    },
                    {
                        label: 'Copy',
                        accelerator: 'CmdOrCtrl+C',
                        selector: 'copy:'
                    },
                    {
                        label: 'Cut',
                        accelerator: 'CmdOrCtrl+X',
                        selector: 'cut:'
                    },
                    {
                        label: 'Paste',
                        accelerator: 'CmdOrCtrl+V',
                        selector: 'paste:'
                    },
                    {
                        label: 'Select All',
                        accelerator: 'CmdOrCtrl+A',
                        selector: 'selectAll:'
                    }
                ]
            }
        ])

        ipcMain.on('show-context-menu', (event) => {
            event.preventDefault()
            menu.popup({ window: mainWindow })
        })

        mainWindow.webContents.on('context-menu', (event) => {
            event.preventDefault()
            ipcMain.emit('show-context-menu', event)
        })
    })
})