快速开始
欢迎使用电子元器件管理系统！本系统专为个人电子爱好者设计，帮助您高效管理元器件库存。
首次使用
💡 提示：系统会自动保存所有数据到浏览器本地存储，无需手动保存操作。
元器件管理
添加元器件
在首页点击右下角的浮动添加按钮（+），或点击"添加元器件"按钮。
必填项：名称、型号、分类
可选项：图片URL、数据手册链接、描述、参数、数量
💡 分化参数：选择电阻/电容/电感/MOS管/二极管/三极管/LED/晶振品类后，自动显示对应的专属参数输入字段：
- 电阻：阻值（MΩ/kΩ/Ω）+ 额定功率（W）
- 电容：电容值（F/mF/μF/nF/pF）+ 耐压值（V）
- 电感：电感量（H/mH/μH）+ 额定电流（A/mA）
- MOS管：漏源击穿电压（V/mV）+ 最大漏极电流（A/mA）
- 二极管：最大反向重复峰值电压（V/mV）+ 平均整流电流（A/mA）
- 三极管：集电极-发射极击穿电压（V/mV）+ 集电极最大允许电流（A/mA）
- LED：正向压降（V/mV）+ 最大正向电流（A/mA）
- 晶振：标称频率（MHz/kHz/Hz）+ 负载电容（pF/nF/μF）
💡 提示：填写完信息后可直接按 Enter 键快速添加元器件（不适用于textarea和select元素）。
⚠️ 注意：图片需提供有效的URL链接，暂不支持文件上传。
编辑元器件
在元器件卡片上点击"查看详情"按钮，在弹出的详情页中可以：
- 修改元器件的所有信息
- 更新库存数量
- 查看数据手册链接（点击"点击打开"按钮）
- 预览图片（支持2倍放大镜效果）
💡 提示：修改完信息后可直接按 Enter 键快速保存（不适用于textarea和select元素）。
批量编辑
在首页勾选多个元器件后，点击"批量编辑"按钮：
- 筛选类别后，可批量修改子类别
- 筛选类别后，可批量修改分化参数（电阻/电容等品类）
- 也可批量修改型号、位置、阈值、备注等通用字段
- 支持按品类筛选后再操作
💡 提示：批量编辑弹窗中，留空的字段不会修改，只更新填写的字段。
删除元器件
在元器件卡片上点击"删除"按钮，系统会弹出确认提示，确认后即可删除。
⚠️ 提示：删除操作后可以使用 Ctrl+Z 撤回，但建议重要数据前先导出备份。
分类管理
预设分类
系统内置以下分类：
子类别
每个品类可设置二级子类别，实现更精细化的分类管理：
- 预设子类别：每个品类已内置常用子类别（如电阻：贴片电阻、金属膜电阻、碳膜电阻等）
- 自定义子类别：在系统设置中可增删改各品类的子类别名称
- 批量编辑：支持批量修改选中元器件的子类别
💡 提示：子类别设置后，元器件列表会显示为"品类 / 子类别"的格式。
筛选功能
点击左侧分类列表即可筛选对应分类的元器件，支持实时更新。
分化参数范围筛选
选择带分化参数的品类（电阻、电容、电感、MOS管、二极管、三极管、LED、晶振）后，侧边栏会显示"参数筛选"区域，可按数值范围精确筛选：
- 设置最小值/最大值和单位，筛选出参数值在指定范围内的元器件
- 支持同时筛选多个参数（如阻值 + 额定功率）
- 自动进行单位换算比较（如 1kΩ 自动转为 1000Ω）
- 点击"清除参数筛选"按钮一键重置
💡 示例：选择"电阻"分类后，在"阻值"参数筛选器中设置最小值 10、最大值 100、单位 Ω，即可筛选出 10Ω~100Ω 的所有电阻。
拖拽排序
支持通过左侧拖拽手柄调整分类顺序：
- 拖拽分类项左侧的 ⋮⋮ 手柄
- 拖拽时会显示插入线提示
- 松开后会自动吸附到目标位置
- 排序结果会自动保存
💡 提示：仅通过手柄触发拖拽，不会影响分类筛选的点击操作。
库存管理
添加/减少库存
在元器件卡片上直接点击"+"或"-"按钮即可快速调整库存。
库存预警
系统会根据库存数量显示不同的状态：
💡 提示：可在系统设置中调整预警阈值。
出入库清单
出库清单
用于管理批量出库操作：
- 在元器件卡片上点击"出库"按钮添加到清单
- 清单面板显示在右侧（桌面端）或底部（移动端）
- 可以直接输入数量进行修改
- 点击"提交出库"按钮执行批量出库
- 操作记录会保存到历史记录中
入库清单
用于管理批量入库操作：
- 在元器件卡片上点击"入库"按钮添加到清单
- 使用标签页切换出库/入库清单
- 其他操作与出库清单相同
操作历史
所有出入库操作都会记录在历史记录中，支持查看和撤回。支持一键清空全部、出库或入库记录。
自动记录场景：
- 添加新元器件时，如果初始库存 > 0，会自动记录入库历史
- 通过卡片 +/- 按钮调整库存时，会记录出库/入库历史
- 在详情页编辑库存时，会记录出库/入库历史
- 批量出库/入库操作时，会记录历史
💡 提示：清单数据保存在sessionStorage中，页面刷新不会丢失；出入库历史记录永久保存在localStorage中。
BOM智能匹配
BOM（Bill of Materials）智能匹配功能可以帮助您快速将BOM清单中的元器件与库内元器件进行匹配，支持Excel和CSV格式文件。
功能特点
- 多候选匹配：每个BOM项可显示多个匹配候选（如22uf、22uf 16v等），按置信度排序
- 智能推断：支持类别推断和多层级匹配规则
- 数值标准化：自动处理小数点格式差异（如6.0和6视为相同）
- 单位换算：支持电容、电阻、电感、电流、电压等单位自动转换
- 高置信度过滤：仅显示置信度≥70%的候选匹配
- 字段兼容：支持Comment字段作为名称，优先级高于Name
- 悬停提示：鼠标悬停1秒显示BOM表完整信息，按列顺序排列
- 无类别匹配：即使没有Category字段，也能基于Value参数匹配
使用步骤
BOM文件格式要求
BOM文件需要包含以下列（列名不区分大小写）：
推荐列：Model（型号）、Value（参数）、Category（分类）、Quantity（数量）
可选列：Package（封装）、Footprint（焊盘）、Description（描述）、Manufacturer（厂商）、Notes（备注）
💡 提示：系统会自动识别列名。Comment字段优先级高于Name字段，即使列名大小写不一致也能正确匹配。
💡 提示：如果没有Category字段，系统会根据Value参数自动推断类别（如"10nf"推断为电容）。
匹配规则说明
系统采用多层级匹配策略，按优先级从高到低：
- 精确匹配：型号完全匹配（置信度100%）
- 类别精确匹配：数值和类别同时匹配（置信度80-95%）
- 数值类别匹配：数值匹配后推断类别（置信度70-85%）
💡 示例：BOM中的"22uf"会同时匹配库中的"22uf"和"22uf 16v"，按置信度排序显示。
单位换算支持
系统支持以下单位的自动换算：
💡 示例：BOM中的"0.1uf"会与库中的"100nf"视为相同进行匹配；"10nf"会被识别为电容。
操作提示
- BOM面板位于左侧，只显示待查找项，不显示详细匹配结果
- BOM数据会缓存在内存中，关闭面板后不会丢失，下次打开可直接使用
- 点击待查找项会触发筛选，在主页显示所有匹配的元器件
- 匹配数字颜色：红色0无匹配、绿色1完全匹配、黄色N有N个候选
- 鼠标悬停在待查找项上1秒，会显示BOM表该行的完整信息（按列顺序，用"|"分隔）
- BOM面板宽度为320px，关闭后完全移出屏幕
- 如匹配结果不理想，可尝试调整元器件的参数描述或添加缺失字段
- 快捷键Ctrl+B可以快速打开/关闭BOM面板
⚠️ 注意：BOM匹配功能依赖于元器件的参数描述是否完整，建议在添加元器件时尽量填写详细参数。
💡 技巧：如果BOM表中没有Category字段，确保Value参数包含单位（如10nf、1k等），系统会自动推断类别。
搜索功能
系统支持强大的搜索功能，帮助您快速定位元器件。
搜索范围
- 元器件名称
- 元器件型号
- 元器件参数
- 分类名称
多关键词搜索
支持使用空格分隔多个关键词，系统会同时匹配所有关键词（AND逻辑）：
以上搜索会同时匹配包含"电阻"、"10k"、"0805"的元器件。
💡 提示：搜索结果会实时更新，无需按回车键。
数据存储与备份
自动保存机制
系统会自动保存所有数据到浏览器的本地存储（localStorage）中，包括：
- 所有元器件数据（名称、型号、分类、库存等）
- 分类排序顺序
- 出入库历史记录
💡 说明：无需手动点击保存按钮，每次添加、修改、删除元器件都会自动保存。即使意外关闭浏览器，数据也不会丢失。
数据导出
在侧边栏点击"导出数据"按钮，或在系统设置中点击"导出全部数据"，可以将数据导出为JSON文件。
保存位置选择：
- Chrome/Edge 浏览器：会弹出"另存为"对话框，您可以自由选择保存位置和修改文件名
- 其他浏览器：文件会自动保存到浏览器的默认下载目录
适用场景：
- 长期备份（避免浏览器数据被清除）
- 数据迁移（在不同设备间传输）
- 版本管理（保留不同时期的数据快照）
💡 新功能：Chrome 和 Edge 浏览器现在支持选择保存位置，不再局限于默认下载目录！
数据导入
在侧边栏点击"导入数据"按钮，选择JSON文件即可导入。
💡 提示：导入不会覆盖现有数据，而是将新元器件添加到现有列表中。
数据丢失风险
⚠️ 注意：以下情况可能导致数据丢失，请定期导出备份：
- 清除浏览器数据/缓存
- 使用隐身/无痕模式
- 更换浏览器或设备
MQTT 通信
系统支持 MQTT 协议进行实时通信，可用于与外部系统集成、设备联动等场景。
快速开始
连接参数说明
| 参数 | 说明 | 示例 |
|---|---|---|
| Broker 地址 | MQTT 服务器地址 | broker.emqx.io |
| 端口 | WebSocket 端口 | 8084 或 8083 |
| 路径 | WebSocket 路径 | /mqtt |
| 客户端 ID | 唯一标识符 | 留空自动生成 |
| 用户名 | 认证用户名（可选） | 留空或填写 |
| 密码 | 认证密码（可选） | 留空或填写 |
| 使用 SSL/TLS | 启用加密连接 | HTTPS 页面必须勾选 |
推荐配置方案
✅ 方案 1：公共服务器（推荐）
Broker 地址：broker.emqx.io 端口：8084 路径：/mqtt 使用 SSL/TLS：☑ 勾选
适用于 HTTPS 页面，安全稳定
⚠️ 方案 2：HTTP 页面（不推荐）
Broker 地址：broker.emqx.io 端口：8083 路径：/mqtt 使用 SSL/TLS：☐ 不勾选
仅适用于 HTTP 页面，不安全
⚠️ 重要：如果您的页面通过 HTTPS 访问，必须使用加密连接（端口 8084 并勾选 SSL/TLS），否则会提示"连接失败"错误。
主题订阅
支持使用通配符订阅多个主题：
- 精确订阅：
components/resistor/status- 只订阅该主题 - 单级通配符（+）：
components/+/status- 订阅所有 components 下的 status 子主题 - 多级通配符（#）：
sensors/#- 订阅 sensors 下的所有主题及其子主题
消息发布
支持发布文本和 JSON 格式的消息：
示例 1：文本消息
主题：test/hello 消息：Hello MQTT!
示例 2：JSON 消息
主题：component/outbound
消息：{
"action": "outbound",
"componentId": "resistor_001",
"quantity": 10,
"timestamp": "2026-01-25T12:00:00Z"
}
消息记录
实时显示收发消息，支持查看最近 50 条记录：
- ↓ 绿色箭头：接收到的消息
- ↑ 蓝色箭头：发送的消息
- 时间戳：消息发送/接收的时间
- 主题：消息所属的主题
- 内容：消息的实际内容
常见问题
Q: 连接失败提示"Failed to construct WebSocket"？
A: 这是因为 HTTPS 页面不能使用非加密的 ws:// 连接。请将端口改为 8084 并勾选"使用 SSL/TLS"。
Q: 可以连接但收不到消息？
A: 请确保已订阅正确的主题，并且发布消息的主题与订阅的主题匹配（或使用通配符）。
Q: 配置会保存吗？
A: 是的，MQTT 连接配置会自动保存到本地存储，下次访问时自动加载。断开后重新连接会自动恢复之前的订阅。
💡 提示：更多详细信息，请访问设置页面的"MQTT 通信"面板进行实际操作。
系统设置
数据管理
- 导出数据（保存为JSON文件）
- 导入数据（从JSON文件恢复）
导出设置
在系统设置中可以选择导出方式：
- 文件选择器（推荐）：Chrome/Edge 浏览器支持自定义保存位置
- 传统下载：文件自动保存到浏览器默认下载目录
系统信息
- 版本号
- 数据版本
- 元器件数量
- 最后更新时间
版本日志
查看系统的版本更新历史和新功能说明。
MQTT 通信
系统支持 MQTT 协议进行实时通信，可用于与外部系统集成、设备联动等场景。
配置连接参数
在设置页面的"MQTT 通信"面板中配置以下参数：
- Broker 地址：MQTT 服务器地址，如
broker.emqx.io - 端口：WebSocket 端口，如
8084（加密）或8083（非加密） - 路径：通常为
/mqtt - 客户端 ID：留空自动生成，或手动指定
- 用户名/密码：如服务器需要认证则填写
- 使用 SSL/TLS：HTTPS 页面必须勾选，HTTP 页面可勾选以增强安全性
⚠️ 重要：如果您的页面通过 HTTPS 访问，必须使用加密连接（端口 8084 并勾选 SSL/TLS），否则会连接失败。
推荐配置
Broker 地址：broker.emqx.io 端口：8084 路径：/mqtt 使用 SSL/TLS：☑ 勾选
订阅主题
支持通配符订阅：
components/resistor/status：精确订阅components/+/status：单级通配符（+）sensors/#：多级通配符（#）
发布消息
支持文本和 JSON 格式消息，例如：
{
"action": "outbound",
"componentId": "resistor_001",
"quantity": 10,
"timestamp": "2026-01-25T12:00:00Z"
}
消息记录
实时显示收发消息，绿色箭头（↓）表示接收，蓝色箭头（↑）表示发送。
💡 提示：MQTT 连接配置会自动保存到本地存储，下次访问时自动加载。断开后重新连接会自动恢复之前的订阅。
💡 提示：数据会自动保存到浏览器本地存储，无需手动操作。
快捷键
💡 提示：撤回功能支持撤回添加、删除、编辑、更新库存、批量出入库及导入数据操作。Enter键快速保存功能不适用于textarea（备注信息）和select（类别选择）。ESC键优先关闭对话框，如果没有对话框则隐藏BOM面板或清单面板。
常见问题
Q: 数据会丢失吗？
A: 数据会自动保存到浏览器的本地存储中，正常情况下不会丢失。但以下情况可能导致数据丢失：清除浏览器缓存、使用无痕模式、更换浏览器或设备。建议定期使用"导出数据"功能备份。
Q: 如何批量删除元器件？
A: 在设置页面点击"批量编辑"，勾选要删除的元器件后，点击"批量删除"按钮即可批量删除。
Q: 图片上传失败怎么办？
A: 请确保图片URL是有效的、可访问的链接。建议使用图床服务获取稳定的URL。
Q: 出入库清单数据会保存吗？
A: 清单数据保存在sessionStorage中，页面刷新不会丢失，但关闭浏览器后会清空。历史记录会永久保存。
Q: 如何在手机上使用？
A: 系统支持响应式设计，在手机浏览器上可以正常使用。清单面板会自动调整为底部全宽模式。
Q: 撤回功能有什么限制？
A: 最多撤回50条操作记录，超过限制的旧记录会被自动删除。历史记录会持久化保存。
Q: 导入数据后可以撤回吗？
A: 可以。导入数据后可以按 Ctrl+Z 撤回，系统会恢复到导入前的状态，移除所有导入的元器件。
电子元器件管理系统 v2.3.0 | 最后更新：2026-04-27
如有问题，请参考本文档或访问系统设置页面