feat: 初始化 NFC 读卡器项目
- 添加 Electron 主进程和渲染进程 - 实现读卡器连接、断开和读取卡片 ID 功能 - 添加自定义窗口标题栏和窗口控制 - 实现简洁美观的用户界面 - 添加项目文档 README.md
This commit is contained in:
193
.gitignore
vendored
Normal file
193
.gitignore
vendored
Normal file
@@ -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)
|
||||
|
||||
54
README.md
Normal file
54
README.md
Normal file
@@ -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
|
||||
60
index.html
Normal file
60
index.html
Normal 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>
|
||||
120
lib/cardReader.es.js
Normal file
120
lib/cardReader.es.js
Normal file
@@ -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
|
||||
};
|
||||
59
main.js
Normal file
59
main.js
Normal file
@@ -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()
|
||||
}
|
||||
})
|
||||
15
package.json
Normal file
15
package.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
106
renderer.js
Normal file
106
renderer.js
Normal file
@@ -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');
|
||||
});
|
||||
294
style.css
Normal file
294
style.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user