demo/NFCReader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

feat: 初始化 NFC 读卡器项目

Browse Source 
- 添加 Electron 主进程和渲染进程
- 实现读卡器连接、断开和读取卡片 ID 功能
- 添加自定义窗口标题栏和窗口控制
- 实现简洁美观的用户界面
- 添加项目文档 README.md
This commit is contained in:
袁涛
2026-01-12 01:07:01 +08:00
commit 8e329418f0
8 changed files with 901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
index.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NFC 读卡器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="titlebar">
<div class="titlebar-drag-region"></div>
<div class="titlebar-title">NFC 读卡器</div>
<div class="window-controls">
<button class="window-control minimize" id="minimizeBtn">
<svg width="10" height="10" viewBox="0 0 10 10">
<rect x="0" y="4" width="10" height="2" fill="currentColor"/>
</svg>
</button>
<button class="window-control maximize" id="maximizeBtn">
<svg width="10" height="10" viewBox="0 0 10 10">
<rect x="0" y="0" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
</svg>
</button>
<button class="window-control close" id="closeBtn">
<svg width="10" height="10" viewBox="0 0 10 10">
<line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.5"/>
<line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.5"/>
</svg>
</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card-body">
<div class="status-section">
<div class="status-indicator">
<span id="statusDot" class="status-dot disconnected"></span>
<span id="statusText">未连接</span>
</div>
</div>
<div class="control-buttons">
<button id="connectBtn" class="btn btn-primary">连接读卡器</button>
<button id="disconnectBtn" class="btn btn-secondary" disabled>断开连接</button>
<button id="readBtn" class="btn btn-success" disabled>读取卡片</button>
</div>
<div class="result-section">
<h4>读取结果</h4>
<div id="resultBox" class="result-box">
<p class="placeholder-text">请先连接读卡器，然后点击"读取卡片"按钮</p>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="renderer.js"></script>
</body>
</html>