component-hub

KO | EN

gitlite — search

#ai #llm #go #android #machine-learning #rust #linux #java #awesome #kubernetes #pytorch #security #ios #open-source

(★ 19)

个人电子元器件管理系统

component-hub Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# component-hub

# 个人电子元器件管理系统

一个纯前端实现的个人元器件库存管理工具，数据保存在浏览器本地，无需后端即可运行。
v2.3.5版本后支持node.js将数据保存在本地。

**在线体验**：

[https://parkerneol.github.io/component-hub/](https://parkerneol.github.io/component-hub/)

[https://4jwmqzpmb7.coze.site/index.html](https://4jwmqzpmb7.coze.site/index.html)（停止更新于v2.3.3）

##  当前状态

本项目处于持续开发中（当前版本 **v2.3.10**），可能存在已知或未知 bug。  
如果你发现问题，欢迎在 [Issues](https://github.com/ParkerNeol/component-hub/issues) 页面反馈，我会尽快修复。

## 功能特性

###  搜索与筛选
- **多关键词实时搜索**：支持名称、型号、参数、分类、品牌、商品编号等字段，空格分隔多关键词 AND 逻辑
- **单位等价搜索**：自动识别单位简写，如 `1k` = `1000`、`1uf` = `1000000pf`
- **分类 / 子类别 / 参数范围筛选**：11 个预设分类 + 自定义类别 + 二级子类别 + 数值范围过滤 + 单位换算
- **库存状态筛选**：充足 / 预警 / 缺货 复选框筛选

###  元器件管理
- **分化参数模板**：电阻、电容、电感、MOS管、二极管、三极管、LED、晶振、IC 等品类自动显示专属参数输入
- **IC 子类别专属参数**：MCU、运放、传感器、存储器等各有独立参数模板
- **批量编辑 & 批量删除**：多选后批量更新，支持撤回
- **品类默认图片**：每个品类独立缺省占位图
- **单价管理**：每个元器件可设置单价（元），未设置的价格默认为 0
- **数据手册管理**：IndexedDB 存储，支持上传/下载/删除，50MB 上限
- **图片预览 + 透镜放大镜**：2x–4x 可配置，鼠标悬停局部放大

###  类别管理
- **自定义类别**：支持在系统设置中添加自定义元器件类别（如传感器、继电器等）
- **子类别自定义**：每个类别可自由配置子类别列表，内置类别和自定义类别均支持
- **分化参数自定义**：自定义类别可定义专属筛选参数（参数名 + 单位）
- **位置编号前缀**：每个类别可单独设置位置编号前缀（如 R=电阻, C=电容），编辑元器件时自动应用
- **统一配置界面**：在系统设置 → 类别配置中，左右分栏布局，左侧选择类别，右侧编辑子类别和位置前缀
- **数据持久化**：类别配置随设置备份导出/导入，可选 Node.js 服务端实时同步

###  BOM 智能匹配
- **LCSC 立创 EDA 标准 9 列格式支持**：自动检测 Comment / Footprint / Value / Primary Category / Secondary Category / Description / Supplier Part / Manufacturer Part / Name 等列
- **品类差异化匹配策略**：
  - **Group A（电阻/电容/电感/晶振）**：参数驱动，提取 p1 主要参数 + `normalizeValue` 单位换算精确对比，按封装过滤/排序
  - **Group B（IC/二极管/三极管/MOSFET）**：型号驱动，精确名称匹配，封装排序辅助
  - **Group C（开关/LED/其他）**：描述性匹配 + 品类兜底
- **9 级匹配规则**：LCSC料号(1.0) → 厂商型号(0.95) → 精确匹配(0.95) → 类别精确(0.88) → 型号匹配(0.85) → 名称+型号组合(0.75) → 规格值+类别(0.75) → 语义相似(0.55) → 类别兜底(0.35)
- **品牌(Manufacturer)匹配**：辅助匹配信号
- **Description 键值对解析**：自动解析 "容值:10uF;精度:±10%" 等参数
- **单位换算引擎**：电容(μF/nF/pF)、电阻(Ω/kΩ/MΩ)、电感(μH/nH) 自动标准化对比
- **封装智能排序**：BOM 封装与组件 model 匹配度评分 + 排序/过滤
- **匹配结果按置信度排序**：点击匹配项跳转时，元器件卡片按匹配度排列
- **可拖动详情窗**：点击 BOM 条目弹出浮动详情窗，内容随点击切换，可拖拽移动
- **多候选显示**：每个 BOM 条目展示匹配数量角标，无匹配 / 单匹配 / 多匹配视觉区分
- **交互式筛选**：点击 BOM 条目自动筛选主网格并高亮匹配卡片

###  库存管理
- **出入库清单**：入库 / 出库 双标签页，会话存储
- **操作撤回**：Ctrl+Z，支持 8 种操作类型，50 步历史栈持久化
- **出入库历史记录**：按类型筛选、一键清空
- **库存预警**：可配置阈值，低库存视觉高亮
- **库存变化动画**：anime.js 弹性缩放 + 颜色过渡

###  统计分析
- **ECharts 图表**：分类分布（饼图）、库存分布（柱状图）、预警元器件、出入库趋势
- **子类别分布图表**
- **关键指标**：总元器件数、库存预警数、缺货数、总估值
- **时间范围选择**：7天 / 30天 / 90天 / 一年

###  数据管理
- **JSON 导出/导入**：支持 File System Access API 或传统下载，数据迁移完整
- **数据预览**：上传/粘贴 JSON 后预览表格，确认后再导入
- **服务器持久化**（可选）：配合 Node.js 后端，组件和设置变更时自动实时同步到 data/components.json 和 data/settings/settings.json
- **首次使用自动加载示例数据**：12+ 个示例元器件 + 6 条历史记录

###  高级功能
- **分类拖拽排序**：按手柄拖拽排序，插入线精准指示，排序持久化保存
- **MQTT 通信**：完整 MQTT 客户端，支持 Broker 连接/订阅/发布，可用于 IoT 互联
- **键盘快捷键**：`Ctrl+F` 搜索 / `Ctrl+A` 添加 / `Ctrl+B` BOM / `Ctrl+Z` 撤回 / `Enter` 快速保存 / `Escape` 关闭弹窗
- **通知系统**：滑入式 3 秒自动消失，成功/错误/信息
- **分页**：30 项/页，页码导航 + 省略号
- **按位置排序**：位置前缀 + 数字编号智能排序

## 演示视频(v2.3.0)

[B站：我做了一个让找电阻不再翻抽屉的管理库！](https://b23.tv/fCl2oAq)

> 视频展示了搜索、分类、BOM匹配、出入库等核心功能。

## 技术栈

- HTML5
- CSS3（自定义深色主题，CSS 变量体系）
- JavaScript（Vanilla JS，无框架）
- ECharts 图表库
- anime.js 动画引擎
- MQTT.js 通信协议

## 本地使用

1. 克隆仓库到本地
2. 直接用浏览器打开 `index.html` 即可
3. 所有数据自动保存在浏览器 localStorage 中

如需使用元器件数据本地存储，启动后端服务：
(需要配置node.js环境)
```bash
# 方式一：双击 start.bat（推荐）
双击 start.bat 即可自动启动服务并打开浏览器

# 方式二：命令行
npm install
node server.js
```

关闭服务：双击 `stop.bat` 或直接关闭服务窗口。

## LCSC 立创商城订单导入（待开发）

> **由于立创商城/嘉立创开放平台暂未开放元器件相关的 API 接口，此功能暂时搁置。**  
> 后续 API 开放后将继续开发一键导入立创商城订单的功能，敬请期待。

## MQTT 通信

支持通过 MQTT 协议与外部系统互联，在「系统设置 → MQTT 通信配置」中配置：

- Broker 地址、端口、路径
- Client ID、用户名/密码
- SSL 加密连接
- 消息订阅/发布
- 实时消息日志

## 数据备份

- 点击侧边栏「导出数据」可下载 JSON 备份
- 更换设备或浏览器时，通过「导入数据」恢复
- 导入前可预览数据内容

## 开源协议

[MIT](LICENSE)

component-hub

component-hub Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

component-hub

component-hub Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README