feat: 初始化 NFC 读卡器项目

- 添加 Electron 主进程和渲染进程
- 实现读卡器连接、断开和读取卡片 ID 功能
- 添加自定义窗口标题栏和窗口控制
- 实现简洁美观的用户界面
- 添加项目文档 README.md

.gitignore

@@ -0,0 +1,193 @@
+# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
+# Created by https://www.toptal.com/developers/gitignore/api/windows,visualstudiocode,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=windows,visualstudiocode,node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/windows,visualstudiocode,node
+
+# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
+

README.md

@@ -0,0 +1,54 @@
+# NFC 读卡器
+
+一个基于 Electron 的 NFC 卡片读取应用程序，支持连接读卡器并读取卡片 ID。
+
+## 功能特性
+
+- 连接/断开 NFC 读卡器
+- 读取 NFC 卡片 ID
+- 实时状态显示
+- 简洁美观的用户界面
+
+## 安装
+
+```bash
+npm install
+```
+
+## 运行
+
+```bash
+npm start
+```
+
+## 使用说明
+
+1. 启动应用后，点击"连接读卡器"按钮连接读卡器
+2. 连接成功后，将 NFC 卡片放置在读卡器上
+3. 点击"读取卡片"按钮读取卡片 ID
+4. 读取结果将显示在结果区域中
+5. 使用完毕后，点击"断开连接"按钮断开读卡器
+
+## 项目结构
+
+```
+NFCReader/
+├── index.html          # 主页面
+├── main.js            # Electron 主进程
+├── renderer.js        # 渲染进程逻辑
+├── style.css          # 样式文件
+├── lib/
+│   └── cardReader.es.js  # 读卡器核心库
+└── package.json       # 项目配置
+```
+
+## 技术栈
+
+- Electron
+- JavaScript (ES6+)
+- HTML5
+- CSS3
+
+## 许可证
+
+MIT

index.html

@@ -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>

lib/cardReader.es.js

@@ -0,0 +1,120 @@
+var v = {
+  OBJ: function() {
+    var r = {}, e = null, t = null;
+    r.onResult = function(s) {
+      t.addEvent("Result", s);
+    };
+    var o = function() {
+    }, l = function(s) {
+      var i = "";
+      i = s.data;
+      var w = {
+        type: "Result",
+        strStatus: i.substr(4, 2),
+        strData: i.substr(6),
+        strCmdCode: i.substr(0, 4)
+      };
+      t != null && t.fireEvent(w);
+    }, d = function() {
+    }, h = function() {
+      alert("Server not running !");
+    };
+    return r.createSocket = function() {
+      try {
+        if ("WebSocket" in window)
+          e = new WebSocket("ws://localhost:39002/RFID Reader Service");
+        else if ("MozWebSocket" in window)
+          e = new MozWebSocket("ws://localhost:39002/RFID Reader Service");
+        else
+          return alert("None"), !1;
+        return e.onopen = o, e.onmessage = l, e.onclose = d, e.onerror = h, t = new u(), !0;
+      } catch {
+        return !1;
+      }
+    }, r.Disconnect = function() {
+      e != null && e.close();
+    }, r.send = function(s) {
+      e.send(s);
+    }, r;
+  }
+};
+function u() {
+  this.handlers = {};
+}
+u.prototype = {
+  constructor: u,
+  addEvent: function(r, e) {
+    typeof this.handlers[r] > "u" && (this.handlers[r] = []), this.handlers[r].push(e);
+  },
+  fireEvent: function(r) {
+    if (r.target || (r.target = this), this.handlers[r.type] instanceof Array)
+      for (var e = this.handlers[r.type], t = 0; t < e.length; t++)
+        e[t](r);
+  },
+  removeEvent: function(r, e) {
+    if (this.handlers[r] instanceof Array) {
+      for (var t = this.handlers[r], o = 0; o < t.length && t[o] != e; o++)
+        ;
+      t.splice(o, 1);
+    }
+  }
+};
+try {
+  var f = v.OBJ();
+} catch {
+}
+f.createSocket();
+let n = "00", c = !1;
+function a(r) {
+  return new Promise((e, t) => {
+    f.onResult(function(o) {
+      o.strStatus === "00" ? e(o) : t(o.strStatus);
+    }), f.send(r);
+  });
+}
+async function y() {
+  await a(n + "010702");
+}
+async function E() {
+  await a(n + "010701");
+}
+async function S() {
+  if (c)
+    try {
+      await a(n + "0009");
+    } catch (r) {
+      throw new Error(`关闭读卡器失败: EerorCode 0x${r}`);
+    }
+  try {
+    await a(n + "000700"), await a(n + "010941"), await a(n + "010801"), y(), await a(n + "010610"), c = !0;
+  } catch (r) {
+    throw new Error(`连接读卡器失败: EerorCode 0x${r}`);
+  }
+}
+async function R() {
+  if (!c)
+    throw new Error("读卡器未连接，请先连接读卡器！");
+  try {
+    await a(n + "100152");
+  } catch {
+    return null;
+  }
+  try {
+    return (await a(n + "1002")).strData;
+  } catch (r) {
+    throw new Error(`读取ID出错: EerorCode 0x${r}`);
+  }
+}
+async function g() {
+  if (c)
+    try {
+      await a(n + "0009"), E(), await a(n + "010610"), c = !1;
+    } catch (r) {
+      throw new Error(`关闭读卡器失败: EerorCode 0x${r}`);
+    }
+}
+export {
+  g as closeReader,
+  S as connectReader,
+  R as readId
+};

main.js

@@ -0,0 +1,59 @@
+const { app, BrowserWindow, ipcMain } = require('electron')
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 440,
+    height: 400,
+    frame: false,
+    transparent: false,
+    backgroundColor: '#f9f9f9',
+    roundedCorners: true,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  })
+
+  win.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  createWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow()
+    }
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+ipcMain.on('window-minimize', () => {
+  const focusedWindow = BrowserWindow.getFocusedWindow()
+  if (focusedWindow) {
+    focusedWindow.minimize()
+  }
+})
+
+ipcMain.on('window-maximize', () => {
+  const focusedWindow = BrowserWindow.getFocusedWindow()
+  if (focusedWindow) {
+    if (focusedWindow.isMaximized()) {
+      focusedWindow.unmaximize()
+    } else {
+      focusedWindow.maximize()
+    }
+  }
+})
+
+ipcMain.on('window-close', () => {
+  const focusedWindow = BrowserWindow.getFocusedWindow()
+  if (focusedWindow) {
+    focusedWindow.close()
+  }
+})

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "nfc-reader",
+  "version": "1.0.0",
+  "description": "NFC Card Reader Application",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron ."
+  },
+  "keywords": ["nfc", "reader", "electron"],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "electron": "^28.0.0"
+  }
+}

renderer.js

@@ -0,0 +1,106 @@
+import { connectReader, readId, closeReader } from './lib/cardReader.es.js';
+const { ipcRenderer } = require('electron');
+
+const connectBtn = document.getElementById('connectBtn');
+const disconnectBtn = document.getElementById('disconnectBtn');
+const readBtn = document.getElementById('readBtn');
+const statusDot = document.getElementById('statusDot');
+const statusText = document.getElementById('statusText');
+const resultBox = document.getElementById('resultBox');
+
+const minimizeBtn = document.getElementById('minimizeBtn');
+const maximizeBtn = document.getElementById('maximizeBtn');
+const closeBtn = document.getElementById('closeBtn');
+
+let isConnected = false;
+
+function updateStatus(status) {
+  statusDot.className = 'status-dot ' + status;
+  
+  switch(status) {
+    case 'connected':
+      statusText.textContent = '已连接';
+      isConnected = true;
+      connectBtn.disabled = true;
+      disconnectBtn.disabled = false;
+      readBtn.disabled = false;
+      break;
+    case 'disconnected':
+      statusText.textContent = '未连接';
+      isConnected = false;
+      connectBtn.disabled = false;
+      disconnectBtn.disabled = true;
+      readBtn.disabled = true;
+      break;
+    case 'connecting':
+      statusText.textContent = '连接中...';
+      connectBtn.disabled = true;
+      disconnectBtn.disabled = true;
+      readBtn.disabled = true;
+      break;
+  }
+}
+
+function showResult(content, isError = false) {
+  if (isError) {
+    resultBox.innerHTML = '<p class="error-message">' + content + '</p>';
+  } else {
+    resultBox.innerHTML = '<p class="result-content">卡片 ID: ' + content + '</p>';
+  }
+}
+
+connectBtn.addEventListener('click', async () => {
+  updateStatus('connecting');
+  resultBox.innerHTML = '<p class="placeholder-text">正在连接读卡器...</p>';
+  
+  try {
+    await connectReader();
+    updateStatus('connected');
+    showResult('读卡器连接成功！请将卡片放在读卡器上，然后点击"读取卡片"按钮');
+  } catch (error) {
+    updateStatus('disconnected');
+    showResult('连接失败: ' + error.message, true);
+  }
+});
+
+disconnectBtn.addEventListener('click', async () => {
+  try {
+    await closeReader();
+    updateStatus('disconnected');
+    showResult('读卡器已断开连接');
+  } catch (error) {
+    showResult('断开连接失败: ' + error.message, true);
+  }
+});
+
+readBtn.addEventListener('click', async () => {
+  if (!isConnected) {
+    showResult('请先连接读卡器', true);
+    return;
+  }
+  
+  resultBox.innerHTML = '<p class="placeholder-text">正在读取卡片...</p>';
+  
+  try {
+    const cardId = await readId();
+    if (cardId) {
+      showResult(cardId);
+    } else {
+      showResult('未检测到卡片，请确保卡片已放置在读卡器上', true);
+    }
+  } catch (error) {
+    showResult('读取失败: ' + error.message, true);
+  }
+});
+
+minimizeBtn.addEventListener('click', () => {
+  ipcRenderer.send('window-minimize');
+});
+
+maximizeBtn.addEventListener('click', () => {
+  ipcRenderer.send('window-maximize');
+});
+
+closeBtn.addEventListener('click', () => {
+  ipcRenderer.send('window-close');
+});

style.css

@@ -0,0 +1,294 @@
+@import url('https://fonts.googleapis.com/css2?family=Segoe+UI+Variable:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --window-bg: #f9f9f9;
+  --border-color: rgba(0, 0, 0, 0.08);
+  --border-hover: rgba(0, 0, 0, 0.12);
+  --text-primary: #1a1a1a;
+  --text-secondary: #5c5c5c;
+  --text-disabled: rgba(0, 0, 0, 0.4);
+  --accent-color: #0067C0;
+  --accent-hover: #005A9E;
+  --success-color: #107C10;
+  --danger-color: #E81123;
+  --surface-bg: rgba(255, 255, 255, 0.6);
+  --surface-hover: rgba(255, 255, 255, 0.9);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--window-bg);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+.titlebar {
+  height: 32px;
+  background: var(--window-bg);
+  display: flex;
+  align-items: center;
+  position: relative;
+  -webkit-app-region: drag;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.titlebar-drag-region {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 138px;
+  height: 32px;
+  -webkit-app-region: drag;
+}
+
+.titlebar-title {
+  flex: 1;
+  padding-left: 16px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-primary);
+  user-select: none;
+  pointer-events: none;
+  opacity: 0.9;
+}
+
+.window-controls {
+  display: flex;
+  height: 32px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.window-control {
+  width: 46px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-primary);
+  transition: background-color 0.1s ease;
+  -webkit-app-region: no-drag;
+  opacity: 0.9;
+}
+
+.window-control:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  opacity: 1;
+}
+
+.window-control:active {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.window-control.close:hover {
+  background-color: var(--danger-color);
+  color: white;
+}
+
+.window-control svg {
+  pointer-events: none;
+}
+
+.container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--border-color);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.04),
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+  max-width: 400px;
+}
+
+.card-body {
+  padding: 20px;
+}
+
+.status-section {
+  text-align: center;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  margin-bottom: 16px;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.connected {
+  background-color: var(--success-color);
+  box-shadow: 0 0 0 2px rgba(16, 124, 16, 0.2);
+}
+
+.status-dot.disconnected {
+  background-color: var(--danger-color);
+  box-shadow: 0 0 0 2px rgba(232, 17, 35, 0.2);
+}
+
+.status-dot.connecting {
+  background-color: #FF8C00;
+  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.2);
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+#statusText {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.control-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.control-buttons button {
+  flex: 1;
+  font-weight: 400;
+  font-size: 13px;
+  padding: 8px 14px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  transition: all 0.1s ease;
+  cursor: pointer;
+  font-family: inherit;
+  letter-spacing: 0.1px;
+  background: var(--surface-bg);
+  color: var(--text-primary);
+}
+
+.control-buttons button:hover:not(:disabled) {
+  background: var(--surface-hover);
+  border-color: var(--border-hover);
+}
+
+.control-buttons button:active:not(:disabled) {
+  background: rgba(0, 0, 0, 0.04);
+  transform: scale(0.98);
+}
+
+.control-buttons button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.btn-primary {
+  background: var(--accent-color);
+  color: white;
+  border-color: var(--accent-color);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.btn-secondary {
+  background: var(--surface-bg);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--surface-hover);
+  border-color: var(--border-hover);
+}
+
+.btn-success {
+  background: var(--success-color);
+  color: white;
+  border-color: var(--success-color);
+}
+
+.btn-success:hover:not(:disabled) {
+  background: #0B5A0B;
+  border-color: #0B5A0B;
+}
+
+.result-section {
+  margin-top: 16px;
+}
+
+.result-section h4 {
+  margin-bottom: 8px;
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.result-box {
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 6px;
+  min-height: 60px;
+  border: 1px solid var(--border-color);
+}
+
+.placeholder-text {
+  color: var(--text-secondary);
+  margin: 0;
+  text-align: center;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.result-content {
+  word-break: break-all;
+  font-family: 'Segoe UI Variable', 'Segoe UI', 'Consolas', monospace;
+  font-size: 14px;
+  color: var(--text-primary);
+  font-weight: 400;
+  text-align: center;
+  padding: 4px;
+}
+
+.error-message {
+  color: var(--danger-color);
+  font-weight: 500;
+  text-align: center;
+  font-size: 13px;
+}