EMS-vite/修复登录页 Logo 不显示.md at 95098991f30740d9c29c25cb07347e5405842c24

## 架构设计

**前端技术栈**
- React 18 + TypeScript - 提供类型安全的现代化前端开发
- Tailwind CSS + shadcn/ui - 实现美观一致的用户界面
- Recharts - 专业的数据可视化图表库
- React Router - 单页应用路由管理
- React Hook Form - 高效的表单状态管理

**后端数据层**
- Supabase - 现代化的后端即服务平台
- PostgreSQL - 可靠的关系型数据库
- 实时订阅 - 支持数据变更的实时推送

## 数据库设计

创建了完整的数据库架构，包含5个核心表：

1. **devices** - 设备管理表，存储BBox设备信息、状态和配置
2. **battery_data** - 电池数据表，记录电压、电流、温度等实时数据
3. **ota_tasks** - OTA升级任务表，管理固件升级流程和状态
4. **mqtt_logs** - MQTT通信日志表，记录设备通信历史
5. **system_config** - 系统配置表，存储报警阈值和系统参数

## 功能实现

**设备管理模块**
- 实现了完整的CRUD操作，支持设备的创建、查看、编辑和删除
- 设备状态实时监控，包括在线/离线/维护/故障四种状态
- 设备详情页面展示最新电池数据和设备信息
- 智能搜索和状态筛选功能

**实时监控模块**
- 多维度数据图表展示，支持电压、电流、温度、电量趋势分析
- 可配置时间范围查询（1小时到7天）
- 实时数据更新机制，支持自动刷新
- 数据趋势指示器，显示数值变化方向

**OTA管理模块**
- 升级任务创建和管理，支持批量设备升级
- 实时进度跟踪，模拟真实的下载和安装过程
- 详细的升级日志查看，便于故障排查
- 任务状态管理，支持重试和删除操作

**MQTT管理模块**
- 连接状态监控和自动重连功能
- 消息日志实时查看和筛选
- 通信统计分析，包括消息总数和错误率
- 日志导出功能，支持CSV格式

**系统设置模块**
- 分类配置管理，包括常规设置、MQTT配置、报警设置
- 表单验证和错误处理
- 系统信息展示，包括运行状态和存储统计
- 通知设置和权限管理

## 代码质量

- 完整的TypeScript类型定义，确保类型安全
- 模块化的组件设计，便于维护和扩展
- 统一的错误处理和用户反馈机制
- 响应式设计，适配各种屏幕尺寸
- 代码通过ESLint检查，符合最佳实践

## 数据初始化

系统包含丰富的示例数据：
- 5个示例BBox设备，涵盖各种状态
- 历史电池数据，用于图表展示
- OTA升级任务示例，展示不同阶段状态
- MQTT通信日志，模拟真实设备通信
- 完整的系统配置参数

应用已完全实现需求文档中的所有功能，提供了专业级的电池管理解决方案。

2025-11-17 16:52:12 +08:00

1.7 KiB

Raw Blame History

原因分析

代码使用的静态资源路径是 /logo/...，但实际文件位于 public/images/logo/...，导致 404 并触发 onError 的文本回退。
参照 src/pages/Login.tsx:8-10 的候选路径与 .env 的 VITE_COMPANY_LOGO_URL=/logo/auth-logo.svg 都指向错误目录。
public 目录结构为：public/images/logo/{auth-logo.svg,evo-tech.png,logo-dark.svg,logo-icon.svg}。

修改方案

统一将所有 Logo 路径改为 public/images/logo/...。
更新环境变量默认值与候选列表，确保回退链条都指向存在的文件。
提升兼容性：使用 import.meta.env.BASE_URL 拼接公共目录，避免非根路径部署时的资源 404。

具体改动

.env：将 VITE_COMPANY_LOGO_URL 改为 /images/logo/auth-logo.svg。
src/pages/Login.tsx:8-10：
- 将 const companyLogo = (import.meta.env as any).VITE_COMPANY_LOGO_URL || '/logo/evo-tech.png'; 改为使用 BASE_URL 并指向 images/logo/evo-tech.png。
- 将 candidates 改为 ['/images/logo/evo-tech.png','/images/logo/auth-logo.svg','/images/logo/logo-dark.svg'] 的 BASE_URL 版本。
构造公共前缀：const publicBase = (import.meta.env as any).BASE_URL || '/';，候选路径使用 ${publicBase}images/logo/...。

验证步骤

启动开发服务器，打开登录页，确认图片请求返回 200 且 Logo 正常显示。
暂时将 VITE_COMPANY_LOGO_URL 设为一个不存在的路径，验证回退顺序依次生效，最终仍能显示有效 Logo；全部失败时回退到文本徽标 EVO。
检查控制台与网络面板，确保无 404 与无跨域错误。

影响范围

仅登录页 Logo 显示路径与默认值，其他功能不受影响。

1.7 KiB Raw Blame History Unescape Escape

原因分析

修改方案

具体改动

验证步骤

影响范围

1.7 KiB

Raw Blame History