危化品柜-自助终端项目代码逻辑

最新推荐文章于 2025-12-02 17:50:12 发布

原创

最新推荐文章于 2025-12-02 17:50:12 发布 · 655 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#java

危化品柜管理系统

项目简介

危化品柜管理系统是一款基于Vue 3、Vite和Electron开发的桌面应用程序，用于管理和监控危化品柜的使用情况。该系统主要面向自助终端场景，提供危化品存取记录管理、权限控制、安全监控等核心功能。为增强自助终端使用的安全性和专注性，系统包含辅助性的禁用系统快捷键功能。

系统要求

开发环境要求

Node.js：v20.19.5（当前系统安装版本）
npm：10.8.2（当前系统安装版本）
Python：3.13.5（当前系统安装版本，用于运行辅助安全功能脚本）
操作系统：Windows 7/8/10/11（最佳支持平台）

依赖包版本

从 package.json 中提取的主要依赖版本：

vue: ^3.4.21
vite: ^7.1.6
electron: ^27.0.0
electron-builder: ^24.13.3
electron-packager: ^17.1.2

安装步骤

克隆项目代码

git clone [项目仓库地址]
cd qilin-application

安装npm依赖
```
npm install
```
确保Python环境已安装
- Windows系统通常预装了Python，可通过 python --version 检查
- 如需安装，请从 Python官网下载并安装

开发环境启动

启动前端开发服务器

npm run dev

此命令将启动Vite开发服务器，通常在 http://localhost:5173 访问。

启动Electron开发模式

# 先在一个终端启动前端开发服务器
npm run dev

# 在另一个终端启动Electron
npm run electron:dev

构建和打包应用程序

构建前端代码

npm run build

此命令将在 dist 目录生成优化后的生产版本前端代码。

打包Windows应用程序

npm run package:win

此命令将使用electron-packager打包Windows平台应用程序，输出到 dist_packaged\appName-win32-x64 目录。

打包Linux应用程序

npm run package:linux

此命令将打包Linux平台应用程序，输出到 dist_packaged 目录。

使用electron-builder构建（支持更多打包格式）

# 构建Windows安装包
npm run electron:build:win

# 构建macOS安装包
npm run electron:build:mac

# 构建Linux安装包
npm run electron:build:linux

# 构建所有平台安装包
npm run electron:build:all

项目结构

├── electron/          # Electron主进程代码
│   ├── main.js        # 主进程入口文件
│   └── preload.js     # 预加载脚本
├── src/               # 前端源代码
│   ├── App.vue        # 应用主组件
│   ├── assets/        # 静态资源
│   ├── components/    # Vue组件
│   ├── main.js        # 前端入口文件
│   └── style.css      # 全局样式
├── disable_shortcuts_alt.py # 禁用系统快捷键的Python脚本
├── package.json       # 项目配置和依赖
└── vite.config.js     # Vite配置文件

主要功能模块

1. 前端界面

基于Vue 3和Vite构建的现代化前端界面，包含登录页面和主功能页面。

2. Electron桌面应用

将前端页面封装为跨平台桌面应用程序，支持Windows、macOS和Linux系统。

辅助安全功能说明

快捷键禁用功能概述

作为自助终端场景的安全辅助功能，disable_shortcuts_alt.py 脚本使用Windows API拦截并禁用一系列系统快捷键，增强用户在操作应用程序时的专注性和安全性，避免意外退出或切换操作。

被禁用的快捷键

单独的Win键（左Win和右Win）
Alt+Tab（切换应用程序）
Win+Tab（任务视图）
Win+D（显示桌面）
Alt+F4（关闭窗口）
Ctrl+Alt+Delete（任务管理器/安全选项）
Ctrl+Shift+Esc（任务管理器）
Win+L（锁定屏幕）
Win+R（运行对话框）
Win+M（最小化所有窗口）
Win+E（文件资源管理器）
Win+S（搜索）
Win+A（操作中心）
Win+X（快速链接菜单）
单独的F4键

Electron 部分代码

// Electron 主进程
const {
   
    app, BrowserWindow } = require('electron')
const path = require('path')
const {
   
    spawn } = require('child_process')
const fs = require('fs')

// 保持对窗口对象的全局引用，避免JavaScript对象被垃圾回收时窗口被自动关闭
let mainWindow

function createWindow () {
   
   
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
   
   
    width: 1024,
    height: 768,
    minWidth: 800,
    minHeight: 600,
    // 自动隐藏菜单栏
    autoHideMenuBar: true,
    // 不显示窗口边框和控制按钮
    frame: false,
    // 允许窗口调整大小
    resizable: true,
    // 设置窗口背景色
    backgroundColor: '#242424',
    webPreferences: {
   
   
      // 启用Node.js集成
      nodeIntegration: true,
      // 禁用上下文隔离，使渲染进程可以直接使用Node.js API
      contextIsolation: false,
      // 允许远程模块（Electron 12+可能需要额外配置）
      enableRemoteModule: true
    }
  })

  // 设置应用为全屏显示模式，覆盖整个屏幕包括任务栏
  mainWindow.setFullScreen(true);

  // 添加全屏切换快捷键
  mainWindow.webContents.on('before-input-event', (event, input) => {
   
   
    if (input.key === 'F11' && input.type === 'keyDown') {
   
   
      mainWindow.setFullScreen(!mainWindow.isFullScreen());
    }
  });

  // 监听窗口大小变化事件，实现内容自适应
  mainWindow.on('resize', () => {
   
   
    // 可以在这里添加任何需要在窗口大小变化时执行的逻辑
    const {
   
    width, height } = mainWindow.getBounds();
    // 向渲染进程发送窗口大小变化的消息
    if (mainWindow.webContents) {
   
   
      mainWindow.webContents.send('window-resized', {
   
    width, height });
    }
  })

  // 监听全屏状态变化
  mainWindow.on('enter-full-screen', () => {
   
   
    console.log('应用进入全屏模式')