行人摔倒检测系统 - 前端文档（1）

项目概述
技术栈
目录结构
界面设计原则
核心文件解读
页面架构
API 请求规范
组件说明
开发指南

1.项目概述

行人摔倒检测系统是一个基于 Electron + FastAPI 的桌面应用程序，用于实时检测图像和视频中的行人摔倒行为。前端采用原生 JavaScript 开发，无框架依赖，界面采用 Material Design 设计语言。

主要功能

图像摔倒检测
视频摔倒检测
系统日志管理
资源下载管理
数据可视化大屏
系统监控
数据分析
模型管理
大模型聊天

2.技术栈

前端技术

Electron: 桌面应用框架
原生 JavaScript (ES6+): 无框架依赖
CSS3: 使用 CSS Variables 实现主题系统
SVG: 用于图表绘制

后端技术

FastAPI: Python Web 框架
YOLO11: 目标检测模型

开发工具

electron-builder: 应用打包工具
Node.js: 运行环境

3.目录结构

bash 复制代码

项目根目录/
├── backend/                    # 后端代码目录
│   ├── images/                # 图像存储
│   │   ├── upload/           # 上传的图像
│   │   └── detected/         # 检测结果图像
│   ├── videos/               # 视频存储
│   │   ├── upload/           # 上传的视频
│   │   └── detected/         # 检测结果视频
│   ├── logs/                 # 系统日志
│   ├── models/               # 模型文件
│   ├── routers/              # API 路由
│   │   ├── images.py        # 图像相关 API
│   │   ├── videos.py        # 视频相关 API
│   │   ├── logs.py          # 日志相关 API
│   │   └── systems.py       # 系统监控 API
│   ├── utils/                # 工具函数
│   ├── main.py               # FastAPI 主程序
│   └── requirements.txt      # Python 依赖
│
├── node_modules/              # Node.js 依赖
├── dist/                      # 打包输出目录
│
├── index.html                 # 主 HTML 文件
├── main.js                    # Electron 主进程
├── preload.js                 # Electron 预加载脚本
├── renderer.js                # 渲染进程（前端逻辑）
├── styles.css                 # 全局样式
├── package.json               # 项目配置
└── package-lock.json          # 依赖锁定文件

4.界面设计原则

Material Design 3.0

系统采用 Google Material Design 3.0 设计语言，具有以下特点：

色彩系统

bash 复制代码

--primary-color: #6200EE;        /* 主色 - 紫色 */
--primary-light: #BB86FC;        /* 主色浅色 */
--primary-dark: #3700B3;         /* 主色深色 */
--secondary-color: #03DAC6;      /* 辅助色 - 青色 */
--background-color: #F5F5F5;     /* 背景色 */
--surface-color: #FFFFFF;        /* 表面色 */
--error-color: #CF6679;          /* 错误色 */
--success-color: #4CAF50;        /* 成功色 */
--warning-color: #FF9800;        /* 警告色 */

阴影系统

bash 复制代码

--shadow-1: 0 1px 3px rgba(0,0,0,0.12);   /* 轻微阴影 */
--shadow-2: 0 3px 6px rgba(0,0,0,0.15);   /* 标准阴影 */
--shadow-3: 0 10px 20px rgba(0,0,0,0.15); /* 中等阴影 */
--shadow-4: 0 15px 25px rgba(0,0,0,0.15); /* 深度阴影 */

圆角系统

bash 复制代码

--radius-sm: 4px;   /* 小圆角 */
--radius-md: 8px;   /* 中圆角 */
--radius-lg: 12px;  /* 大圆角 */
--radius-xl: 16px;  /* 超大圆角 */

5.核心文件解读

index.html - 主 HTML 文件

bash 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="...">
  <title>行人摔倒检测系统</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="app-container">
    <!-- 侧边导航栏 -->
    <nav class="sidebar">...</nav>
    
    <!-- 主内容区 -->
    <main class="main-content">
      <div id="page-container"></div>
    </main>
  </div>
  
  <!-- Toast 通知容器 -->
  <div id="toast-container"></div>
  
  <!-- 模态框容器 -->
  <div id="modal-container"></div>
  
  <script src="renderer.js"></script>
</body>
</html>

CSP 策略限制资源加载，提高安全性
单页应用架构，所有页面动态渲染到 #page-container
全局容器用于 Toast 和 Modal

main.js - Electron 主进程

bash 复制代码

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

function createWindow() {
  Menu.setApplicationMenu(null)  // 隐藏菜单栏
  
  const mainWindow = new BrowserWindow({
    width: 1400,
    height: 900,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,      // 禁用 Node 集成
      contextIsolation: true        // 启用上下文隔离
    }
  })
  
  mainWindow.loadFile('index.html')
}

preload.js - 预加载脚本

bash 复制代码

const { contextBridge, ipcRenderer, shell } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => {
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  },
  openExternal: (url) => {
    shell.openExternal(url)
  }
})

renderer.js - 渲染进程（核心逻辑）

4.1 全局配置

bash 复制代码

const API_BASE = 'http://localhost:10077';

4.2 工具函数模块 (Utils)

bash 复制代码

const Utils = {
  // Toast 通知
  toast(message, type = 'info') { ... },
  
  // 格式化文件大小
  formatSize(bytes) { ... },
  
  // 格式化日期
  formatDate(dateStr) { ... },
  
  // API 请求封装
  async request(url, options = {}) { ... },
  
  // 下载文件
  downloadBlob(blob, filename) { ... },
  
  // 创建模态框
  createModal(title, content, footer = '') { ... },
  
  // 关闭模态框
  closeModal() { ... },
  
  // 确认对话框
  confirm(message) { ... }
}

4.3 页面管理器 (PageManager)

bash 复制代码

const PageManager = {
  currentPage: null,
  
  pages: {
    'image-detection': ImageDetectionPage,
    'video-detection': VideoDetectionPage,
    'system-logs': SystemLogsPage,
    // ... 其他页面
  },
  
  init() {
    // 绑定导航事件
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', () => {
        this.navigate(item.dataset.page);
      });
    });
    
    // 加载默认页面
    this.navigate('image-detection');
  },
  
  navigate(pageName) {
    // 清理当前页面
    if (this.currentPage && this.currentPage.destroy) {
      this.currentPage.destroy();
    }
    
    // 渲染新页面
    const PageClass = this.pages[pageName];
    if (PageClass) {
      this.currentPage = new PageClass();
      this.currentPage.render();
    }
  }
}

4.4 页面类结构

bash 复制代码

function PageName() {
  // 页面状态
  this.data = [];
  this.selectedItems = new Set();
}

PageName.prototype = {
  // 渲染页面
  async render() {
    const container = document.getElementById('page-container');
    container.innerHTML = `...`;
    
    this.bindEvents();
    await this.loadData();
    window.pageName = this;
  },
  
  // 绑定事件
  bindEvents() { ... },
  
  // 加载数据
  async loadData() { ... },
  
  // 销毁页面
  destroy() {
    window.pageName = null;
  }
}