基于 Electron 构建的目标检测系统桌面应用，采用现代化深色主题设计，实现图像/视频目标检测、AI 对话、系统监控等功能。

---

📋 目录

• 项目概览

• 技术架构

• 项目结构

• 快速开始

• Electron 配置详解

  • 主进程 (main.js)

  • 预加载脚本 (preload.js)

• 界面结构

  • HTML 布局 (index.html)

• 样式系统

  • 设计令牌 (CSS Variables)

  • 组件样式

• 渲染逻辑

  • 应用状态管理

  • 视图路由系统

  • API 通信层

• 功能模块详解

  • 图像目标检测

  • 视频目标检测

  • 系统日志

  • 系统监控

  • 资源管理

  • 大模型聊天

  • 多模态聊天

• UI 组件库

• 设计规范

• 性能优化

• 常见问题

---

项目概览

本项目是一个功能完整的目标检测系统桌面应用，具有以下特点

---

功能模块详解

1. 图像目标检测

功能流程：

上传图片 ──► 显示缩略图 ──► 点击检测按钮 ──► 调用后端 API ──► 绘制检测框

2. 视频目标检测

功能流程：

上传视频 ──► 显示播放器 ──► 点击检测 ──► 后端逐帧处理 ──► 替换为检测结果视频

3. 系统日志

功能特点：

• 自动获取最新日志文件

• 显示末尾 100 行

• 支持手动刷新

4. 系统监控

功能特点：

• CPU / 内存 / 磁盘使用率仪表盘

• 网络流量统计

• 系统运行时间

• 每 2 秒自动刷新

5. 资源管理

图像资源管理：

功能	操作
预览	点击缩略图显示大图模态框
下载	直接下载原始文件
删除	删除文件并移除列表项

视频资源管理：

功能	操作
播放	模态框播放器
下载	直接下载
删除	删除视频

6. 大模型聊天 (LLM)

支持的模型：

模型	参数量
Qwen 2.5 Coder	32B
Qwen 2.5	72B / 32B
DeepSeek V3	-
DeepSeek R1	-

7. 多模态聊天 (VLLM)

功能特点：

• 支持图片 + 文本混合输入

• 图片转 Base64 发送

• 支持 OCR、图片描述等

支持的模型：

模型	说明
Qwen2-VL 72B	视觉语言大模型
InternVL2 26B	书生万象多模态
Qwen2-VL 7B	轻量版

---

UI 组件库

组件清单

组件	CSS 类名	用途
卡片	.card	内容容器
玻璃面板	.glass-panel	毛玻璃容器
主按钮	.btn.btn-primary	主要操作
描边按钮	.btn.btn-outline	次要操作
危险按钮	.btn.btn-danger	删除操作
小按钮	.btn.btn-sm	紧凑操作
上传区	.upload-zone	文件上传
检测框	.detection-box	目标标注
聊天气泡	.message.user / .message.ai	对话消息
Toast	.toast	提示消息

栅格系统

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

---

设计规范

颜色规范

用途	颜色值	示例
主色	#3b82f6	按钮、链接、激活状态
成功	#10b981	完成、正确
警告	#fbbf24	提醒、警示
危险	#ef4444	删除、错误
文本主	#f8fafc	标题、重要文字
文本次	#94a3b8	正文、说明
文本辅	#64748b	辅助信息

间距规范

间距	值	用途
xs	4px	紧凑元素间
sm	8px	相关元素间
md	16px	组件内部
lg	24px	卡片内边距
xl	32px	区块间距

圆角规范

圆角	值	用途
sm	6px	按钮、输入框
md	12px	卡片
lg	16px	大面板
full	50%	头像、小图标

---

性能优化

1. 延迟加载

• 视图内容按需渲染

• 图片使用 loading="lazy"

2. 资源清理

// 视图销毁时清理定时器
'monitoring': {
    init: () => {
        state.monitoringInterval = setInterval(updateSystemInfo, 2000);
    },
    destroy: () => {
        clearInterval(state.monitoringInterval);
    }
}

---

常见问题

1. 窗口白屏闪烁

问题：应用启动时出现白屏

解决方案：

const mainWindow = new BrowserWindow({ show: false });
mainWindow.once('ready-to-show', () => mainWindow.show());

2. 外链无法打开

问题：点击外部链接没反应

解决方案：使用 electronAPI.openExternal(url)

3. API 请求失败

问题：前端无法连接后端

解决方案：

1. 确保后端服务已启动（python main.py）

2. 检查端口 10077 是否被占用

3. 检查 CORS 配置

---

联系方式

• 微信公众号：DetectionHub