🎉 init: 小龙的工作空间
This commit is contained in:
大海
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "@network-tool/client-electron",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "dist/main/index.js",
|
||||
"scripts": {
|
||||
"dev": "concurrently \"npm run dev:main\" \"npm run dev:renderer\"",
|
||||
"dev:main": "tsc -p tsconfig.main.json && electron dist/main/index.js",
|
||||
"dev:renderer": "vite",
|
||||
"build:main": "tsc -p tsconfig.main.json",
|
||||
"build:renderer": "vite build",
|
||||
"build": "npm run build:main && npm run build:renderer",
|
||||
"start": "electron dist/main/index.js",
|
||||
"package": "electron-builder"
|
||||
},
|
||||
"dependencies": {
|
||||
"@network-tool/shared-types": "*",
|
||||
"@network-tool/shared-crypto": "*",
|
||||
"@network-tool/shared-protocol": "*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.22.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.55",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"concurrently": "^8.2.2",
|
||||
"electron": "^33.0.0",
|
||||
"electron-builder": "^24.13.3",
|
||||
"typescript": "^5.4.0",
|
||||
"vite": "^5.1.0"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.network-tool.client",
|
||||
"productName": "Network Tool",
|
||||
"directories": {
|
||||
"output": "release"
|
||||
},
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"package.json"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
import { app, BrowserWindow, ipcMain } from 'electron';
|
||||
import * as path from 'path';
|
||||
import { NetworkClient } from './network-client';
|
||||
|
||||
let mainWindow: BrowserWindow | null = null;
|
||||
let networkClient: NetworkClient | null = null;
|
||||
|
||||
function createWindow(): void {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 1024,
|
||||
height: 720,
|
||||
minWidth: 800,
|
||||
minHeight: 600,
|
||||
title: 'Network Tool - 异地组网客户端',
|
||||
webPreferences: {
|
||||
nodeIntegration: false,
|
||||
contextIsolation: true,
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
},
|
||||
});
|
||||
|
||||
// 开发模式加载 Vite dev server
|
||||
const isDev = !app.isPackaged;
|
||||
if (isDev) {
|
||||
mainWindow.loadURL('http://localhost:5173');
|
||||
mainWindow.webContents.openDevTools({ mode: 'detach' });
|
||||
} else {
|
||||
mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
|
||||
}
|
||||
|
||||
mainWindow.on('closed', () => {
|
||||
mainWindow = null;
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化网络客户端
|
||||
function initNetworkClient(): void {
|
||||
networkClient = new NetworkClient();
|
||||
}
|
||||
|
||||
// IPC 处理器
|
||||
function setupIPC(): void {
|
||||
// 用户相关
|
||||
ipcMain.handle('auth:register', async (_event, email: string, password: string) => {
|
||||
try {
|
||||
const result = await networkClient!.apiRequest('/api/auth/register', 'POST', { email, password });
|
||||
return result;
|
||||
} catch (err: any) {
|
||||
return { success: false, error: 'NETWORK_ERROR', message: err.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('auth:login', async (_event, email: string, password: string) => {
|
||||
try {
|
||||
const result = await networkClient!.apiRequest('/api/auth/login', 'POST', { email, password });
|
||||
if (result.success) {
|
||||
networkClient!.setToken(result.data.token);
|
||||
}
|
||||
return result;
|
||||
} catch (err: any) {
|
||||
return { success: false, error: 'NETWORK_ERROR', message: err.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('auth:me', async () => {
|
||||
return networkClient!.authenticatedRequest('/api/auth/me');
|
||||
});
|
||||
|
||||
// 设备相关
|
||||
ipcMain.handle('device:register', async (_event, data: any) => {
|
||||
return networkClient!.authenticatedRequest('/api/devices/register', 'POST', data);
|
||||
});
|
||||
|
||||
ipcMain.handle('device:list', async () => {
|
||||
return networkClient!.authenticatedRequest('/api/devices');
|
||||
});
|
||||
|
||||
ipcMain.handle('device:updateStatus', async (_event, id: number, status: string) => {
|
||||
return networkClient!.authenticatedRequest(`/api/devices/${id}/status`, 'PATCH', { status });
|
||||
});
|
||||
|
||||
ipcMain.handle('device:delete', async (_event, id: number) => {
|
||||
return networkClient!.authenticatedRequest(`/api/devices/${id}`, 'DELETE');
|
||||
});
|
||||
|
||||
// 节点相关
|
||||
ipcMain.handle('node:list', async () => {
|
||||
return networkClient!.authenticatedRequest('/api/nodes');
|
||||
});
|
||||
|
||||
ipcMain.handle('node:available', async () => {
|
||||
return networkClient!.authenticatedRequest('/api/nodes/available');
|
||||
});
|
||||
|
||||
// 连接相关
|
||||
ipcMain.handle('connection:request', async (_event, data: any) => {
|
||||
return networkClient!.authenticatedRequest('/api/connections/request', 'POST', data);
|
||||
});
|
||||
|
||||
ipcMain.handle('connection:disconnect', async (_event, deviceId: number) => {
|
||||
return networkClient!.authenticatedRequest('/api/connections/disconnect', 'POST', { device_id: deviceId });
|
||||
});
|
||||
|
||||
ipcMain.handle('connection:logs', async () => {
|
||||
return networkClient!.authenticatedRequest('/api/connections/logs');
|
||||
});
|
||||
|
||||
// Relay Node TCP 连接
|
||||
ipcMain.handle('relay:connect', async (_event, host: string, port: number, token: string, deviceId: number) => {
|
||||
try {
|
||||
await networkClient!.connectToRelay(host, port, token, deviceId);
|
||||
return { success: true };
|
||||
} catch (err: any) {
|
||||
return { success: false, error: 'RELAY_CONNECT_FAILED', message: err.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('relay:send', async (_event, targetDeviceId: number, payload: string) => {
|
||||
try {
|
||||
networkClient!.sendMessage(targetDeviceId, payload);
|
||||
return { success: true };
|
||||
} catch (err: any) {
|
||||
return { success: false, error: 'SEND_FAILED', message: err.message };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('relay:disconnect', async () => {
|
||||
networkClient!.disconnectFromRelay();
|
||||
return { success: true };
|
||||
});
|
||||
|
||||
// Relay 事件 → 渲染进程
|
||||
networkClient?.on('message', (msg: any) => {
|
||||
mainWindow?.webContents.send('relay:message', msg);
|
||||
});
|
||||
|
||||
networkClient?.on('status', (status: string) => {
|
||||
mainWindow?.webContents.send('relay:status', status);
|
||||
});
|
||||
}
|
||||
|
||||
// 应用生命周期
|
||||
app.whenReady().then(() => {
|
||||
initNetworkClient();
|
||||
setupIPC();
|
||||
createWindow();
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
networkClient?.disconnectFromRelay();
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,173 @@
|
||||
import http from 'http';
|
||||
import net from 'net';
|
||||
import { EventEmitter } from 'events';
|
||||
import { FrameParser, encodeMessage } from '@network-tool/shared-protocol';
|
||||
import type { NetworkMessage } from '@network-tool/shared-types';
|
||||
|
||||
const SERVER_URL = process.env.SERVER_URL || 'http://localhost:3001';
|
||||
|
||||
export class NetworkClient extends EventEmitter {
|
||||
private token: string | null = null;
|
||||
private relaySocket: net.Socket | null = null;
|
||||
private relayParser = new FrameParser();
|
||||
|
||||
setToken(token: string): void {
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
/**
|
||||
* 向 Control Server 发送 HTTP 请求
|
||||
*/
|
||||
apiRequest(path: string, method = 'GET', body?: any): Promise<any> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = new URL(path, SERVER_URL);
|
||||
const data = body ? JSON.stringify(body) : undefined;
|
||||
|
||||
const options: http.RequestOptions = {
|
||||
hostname: url.hostname,
|
||||
port: url.port,
|
||||
path: url.pathname,
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(this.token ? { Authorization: `Bearer ${this.token}` } : {}),
|
||||
...(data ? { 'Content-Length': Buffer.byteLength(data).toString() } : {}),
|
||||
},
|
||||
};
|
||||
|
||||
const req = http.request(options, (res) => {
|
||||
let body = '';
|
||||
res.on('data', (chunk) => (body += chunk));
|
||||
res.on('end', () => {
|
||||
try {
|
||||
resolve(JSON.parse(body));
|
||||
} catch {
|
||||
resolve({ success: false, error: 'PARSE_ERROR', message: body });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
req.on('error', (err) => {
|
||||
resolve({ success: false, error: 'NETWORK_ERROR', message: err.message });
|
||||
});
|
||||
|
||||
if (data) req.write(data);
|
||||
req.end();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 带认证的请求
|
||||
*/
|
||||
async authenticatedRequest(path: string, method = 'GET', body?: any): Promise<any> {
|
||||
if (!this.token) {
|
||||
return { success: false, error: 'NOT_AUTHENTICATED', message: 'Please login first' };
|
||||
}
|
||||
return this.apiRequest(path, method, body);
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接到 Relay Node
|
||||
*/
|
||||
connectToRelay(host: string, port: number, token: string, deviceId: number): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.disconnectFromRelay();
|
||||
|
||||
this.relaySocket = new net.Socket();
|
||||
this.relayParser.reset();
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
reject(new Error('Connection timeout'));
|
||||
this.relaySocket?.destroy();
|
||||
}, 10000);
|
||||
|
||||
this.relaySocket.connect(port, host, () => {
|
||||
clearTimeout(timeout);
|
||||
this.emit('status', 'connected');
|
||||
console.log(`[Client] 已连接到 Relay Node: ${host}:${port}`);
|
||||
|
||||
// 发送认证消息
|
||||
const authMsg: NetworkMessage = {
|
||||
type: 'auth',
|
||||
from_device_id: deviceId,
|
||||
to_device_id: 0,
|
||||
payload: JSON.stringify({
|
||||
action: 'connect',
|
||||
device_id: deviceId,
|
||||
token,
|
||||
}),
|
||||
timestamp: Date.now(),
|
||||
message_id: this.generateId(),
|
||||
};
|
||||
|
||||
this.relaySocket!.write(encodeMessage(authMsg));
|
||||
this.emit('status', 'authenticating');
|
||||
});
|
||||
|
||||
this.relaySocket.on('data', (chunk: Buffer) => {
|
||||
const messages = this.relayParser.push(chunk);
|
||||
for (const msg of messages) {
|
||||
if (msg.type === 'control') {
|
||||
try {
|
||||
const ctrl = JSON.parse(msg.payload);
|
||||
if (ctrl.action === 'connect_ok') {
|
||||
this.emit('status', 'authenticated');
|
||||
resolve();
|
||||
continue;
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
// 转发所有消息给渲染进程
|
||||
this.emit('message', msg);
|
||||
}
|
||||
});
|
||||
|
||||
this.relaySocket.on('error', (err) => {
|
||||
clearTimeout(timeout);
|
||||
this.emit('status', 'error');
|
||||
reject(err);
|
||||
});
|
||||
|
||||
this.relaySocket.on('close', () => {
|
||||
this.emit('status', 'disconnected');
|
||||
this.relaySocket = null;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过 Relay 发送消息
|
||||
*/
|
||||
sendMessage(targetDeviceId: number, payload: string): void {
|
||||
if (!this.relaySocket || this.relaySocket.destroyed) {
|
||||
throw new Error('Not connected to relay');
|
||||
}
|
||||
|
||||
const msg: NetworkMessage = {
|
||||
type: 'data',
|
||||
from_device_id: 0, // 不暴露真实 device id 给对端 (relay 会处理)
|
||||
to_device_id: targetDeviceId,
|
||||
payload,
|
||||
timestamp: Date.now(),
|
||||
message_id: this.generateId(),
|
||||
};
|
||||
|
||||
this.relaySocket.write(encodeMessage(msg));
|
||||
}
|
||||
|
||||
/**
|
||||
* 断开 Relay 连接
|
||||
*/
|
||||
disconnectFromRelay(): void {
|
||||
if (this.relaySocket) {
|
||||
this.relaySocket.destroy();
|
||||
this.relaySocket = null;
|
||||
}
|
||||
this.emit('status', 'disconnected');
|
||||
}
|
||||
|
||||
private generateId(): string {
|
||||
return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { contextBridge, ipcRenderer } from 'electron';
|
||||
|
||||
const api = {
|
||||
// Auth
|
||||
register: (email: string, password: string) =>
|
||||
ipcRenderer.invoke('auth:register', email, password),
|
||||
login: (email: string, password: string) =>
|
||||
ipcRenderer.invoke('auth:login', email, password),
|
||||
getMe: () => ipcRenderer.invoke('auth:me'),
|
||||
|
||||
// Devices
|
||||
registerDevice: (data: { device_name: string; device_fingerprint: string; public_key: string }) =>
|
||||
ipcRenderer.invoke('device:register', data),
|
||||
listDevices: () => ipcRenderer.invoke('device:list'),
|
||||
updateDeviceStatus: (id: number, status: string) =>
|
||||
ipcRenderer.invoke('device:updateStatus', id, status),
|
||||
deleteDevice: (id: number) => ipcRenderer.invoke('device:delete', id),
|
||||
|
||||
// Nodes
|
||||
listNodes: () => ipcRenderer.invoke('node:list'),
|
||||
getAvailableNodes: () => ipcRenderer.invoke('node:available'),
|
||||
|
||||
// Connections
|
||||
requestConnection: (data: { device_id: number; node_id: number }) =>
|
||||
ipcRenderer.invoke('connection:request', data),
|
||||
disconnect: (deviceId: number) =>
|
||||
ipcRenderer.invoke('connection:disconnect', deviceId),
|
||||
getConnectionLogs: () => ipcRenderer.invoke('connection:logs'),
|
||||
|
||||
// Relay
|
||||
connectToRelay: (host: string, port: number, token: string, deviceId: number) =>
|
||||
ipcRenderer.invoke('relay:connect', host, port, token, deviceId),
|
||||
sendRelayMessage: (targetDeviceId: number, payload: string) =>
|
||||
ipcRenderer.invoke('relay:send', targetDeviceId, payload),
|
||||
disconnectFromRelay: () => ipcRenderer.invoke('relay:disconnect'),
|
||||
|
||||
// Events from main → renderer
|
||||
onRelayMessage: (callback: (msg: any) => void) => {
|
||||
ipcRenderer.on('relay:message', (_event, msg) => callback(msg));
|
||||
},
|
||||
onRelayStatus: (callback: (status: string) => void) => {
|
||||
ipcRenderer.on('relay:status', (_event, status) => callback(status));
|
||||
},
|
||||
removeRelayListeners: () => {
|
||||
ipcRenderer.removeAllListeners('relay:message');
|
||||
ipcRenderer.removeAllListeners('relay:status');
|
||||
},
|
||||
};
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', api);
|
||||
@@ -0,0 +1,100 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { LoginPage } from './pages/LoginPage';
|
||||
import { RegisterPage } from './pages/RegisterPage';
|
||||
import { DevicesPage } from './pages/DevicesPage';
|
||||
import { ConnectionsPage } from './pages/ConnectionsPage';
|
||||
import { NodesPage } from './pages/NodesPage';
|
||||
import { LogsPage } from './pages/LogsPage';
|
||||
import { SettingsPage } from './pages/SettingsPage';
|
||||
|
||||
type Page =
|
||||
| 'login'
|
||||
| 'register'
|
||||
| 'devices'
|
||||
| 'connections'
|
||||
| 'nodes'
|
||||
| 'logs'
|
||||
| 'settings';
|
||||
|
||||
export function App() {
|
||||
const [currentPage, setCurrentPage] = useState<Page>('login');
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [user, setUser] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// 检查是否已登录
|
||||
window.electronAPI.getMe().then((res) => {
|
||||
if (res.success) {
|
||||
setIsLoggedIn(true);
|
||||
setUser(res.data);
|
||||
setCurrentPage('connections');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!isLoggedIn) {
|
||||
if (currentPage === 'register') {
|
||||
return <RegisterPage onSwitchToLogin={() => setCurrentPage('login')} />;
|
||||
}
|
||||
return (
|
||||
<LoginPage
|
||||
onLoginSuccess={(userData) => {
|
||||
setIsLoggedIn(true);
|
||||
setUser(userData);
|
||||
setCurrentPage('connections');
|
||||
}}
|
||||
onSwitchToRegister={() => setCurrentPage('register')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const navItems: { page: Page; label: string }[] = [
|
||||
{ page: 'connections', label: '连接' },
|
||||
{ page: 'devices', label: '设备' },
|
||||
{ page: 'nodes', label: '节点' },
|
||||
{ page: 'logs', label: '日志' },
|
||||
{ page: 'settings', label: '设置' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="app-layout">
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-header">
|
||||
<h2>🌐 组网工具</h2>
|
||||
<span className="user-email">{user?.email}</span>
|
||||
</div>
|
||||
<nav className="sidebar-nav">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
key={item.page}
|
||||
className={`nav-btn ${currentPage === item.page ? 'active' : ''}`}
|
||||
onClick={() => setCurrentPage(item.page)}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
<div className="sidebar-footer">
|
||||
<button
|
||||
className="nav-btn logout-btn"
|
||||
onClick={() => {
|
||||
setIsLoggedIn(false);
|
||||
setUser(null);
|
||||
setCurrentPage('login');
|
||||
window.electronAPI.disconnectFromRelay();
|
||||
}}
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<main className="main-content">
|
||||
{currentPage === 'connections' && <ConnectionsPage />}
|
||||
{currentPage === 'devices' && <DevicesPage />}
|
||||
{currentPage === 'nodes' && <NodesPage />}
|
||||
{currentPage === 'logs' && <LogsPage />}
|
||||
{currentPage === 'settings' && <SettingsPage />}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ElectronAPI {
|
||||
// Auth
|
||||
register: (email: string, password: string) => Promise<any>;
|
||||
login: (email: string, password: string) => Promise<any>;
|
||||
getMe: () => Promise<any>;
|
||||
|
||||
// Devices
|
||||
registerDevice: (data: { device_name: string; device_fingerprint: string; public_key: string }) => Promise<any>;
|
||||
listDevices: () => Promise<any>;
|
||||
updateDeviceStatus: (id: number, status: string) => Promise<any>;
|
||||
deleteDevice: (id: number) => Promise<any>;
|
||||
|
||||
// Nodes
|
||||
listNodes: () => Promise<any>;
|
||||
getAvailableNodes: () => Promise<any>;
|
||||
|
||||
// Connections
|
||||
requestConnection: (data: { device_id: number; node_id: number }) => Promise<any>;
|
||||
disconnect: (deviceId: number) => Promise<any>;
|
||||
getConnectionLogs: () => Promise<any>;
|
||||
|
||||
// Relay
|
||||
connectToRelay: (host: string, port: number, token: string, deviceId: number) => Promise<any>;
|
||||
sendRelayMessage: (targetDeviceId: number, payload: string) => Promise<any>;
|
||||
disconnectFromRelay: () => Promise<any>;
|
||||
|
||||
// Events
|
||||
onRelayMessage: (callback: (msg: any) => void) => void;
|
||||
onRelayStatus: (callback: (status: string) => void) => void;
|
||||
removeRelayListeners: () => void;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
electronAPI: ElectronAPI;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; connect-src *" />
|
||||
<title>Network Tool - 异地组网客户端</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { App } from './App';
|
||||
import './styles/global.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,228 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
export function ConnectionsPage() {
|
||||
const [devices, setDevices] = useState<any[]>([]);
|
||||
const [nodes, setNodes] = useState<any[]>([]);
|
||||
const [selectedDevice, setSelectedDevice] = useState<number | null>(null);
|
||||
const [selectedNode, setSelectedNode] = useState<number | null>(null);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [relayStatus, setRelayStatus] = useState('disconnected');
|
||||
const [messages, setMessages] = useState<{ text: string; incoming: boolean; time: string }[]>([]);
|
||||
const [draftMessage, setDraftMessage] = useState('');
|
||||
const [targetDeviceId, setTargetDeviceId] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadDevices();
|
||||
loadNodes();
|
||||
|
||||
window.electronAPI.onRelayMessage((msg) => {
|
||||
if (msg.type === 'data') {
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
text: msg.payload,
|
||||
incoming: true,
|
||||
time: new Date(msg.timestamp).toLocaleTimeString(),
|
||||
},
|
||||
]);
|
||||
} else if (msg.type === 'error') {
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
text: `[错误] ${msg.payload}`,
|
||||
incoming: true,
|
||||
time: new Date(msg.timestamp).toLocaleTimeString(),
|
||||
},
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
window.electronAPI.onRelayStatus((status) => {
|
||||
setRelayStatus(status);
|
||||
if (status === 'authenticated') {
|
||||
setConnected(true);
|
||||
setError('');
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{ text: '✅ 已连接到转发节点', incoming: true, time: new Date().toLocaleTimeString() },
|
||||
]);
|
||||
} else if (status === 'disconnected') {
|
||||
setConnected(false);
|
||||
} else if (status === 'error') {
|
||||
setError('连接失败');
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
window.electronAPI.removeRelayListeners();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
const loadDevices = async () => {
|
||||
const res = await window.electronAPI.listDevices();
|
||||
if (res.success) setDevices(res.data);
|
||||
};
|
||||
|
||||
const loadNodes = async () => {
|
||||
const res = await window.electronAPI.getAvailableNodes();
|
||||
if (res.success) setNodes(res.data);
|
||||
};
|
||||
|
||||
const handleConnect = async () => {
|
||||
if (!selectedDevice || !selectedNode) {
|
||||
setError('请选择设备和节点');
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
setMessages([]);
|
||||
|
||||
const res = await window.electronAPI.requestConnection({
|
||||
device_id: selectedDevice,
|
||||
node_id: selectedNode,
|
||||
});
|
||||
|
||||
if (!res.success) {
|
||||
setError(res.message || '请求连接失败');
|
||||
return;
|
||||
}
|
||||
|
||||
const { token, node } = res.data;
|
||||
const relayRes = await window.electronAPI.connectToRelay(
|
||||
node.host,
|
||||
node.port,
|
||||
token,
|
||||
selectedDevice
|
||||
);
|
||||
|
||||
if (!relayRes.success) {
|
||||
setError(relayRes.message || '连接节点失败');
|
||||
await window.electronAPI.updateDeviceStatus(selectedDevice, 'offline');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnect = async () => {
|
||||
await window.electronAPI.disconnectFromRelay();
|
||||
if (selectedDevice) {
|
||||
await window.electronAPI.updateDeviceStatus(selectedDevice, 'offline');
|
||||
await window.electronAPI.disconnect(selectedDevice);
|
||||
}
|
||||
setConnected(false);
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{ text: '🔌 已断开连接', incoming: true, time: new Date().toLocaleTimeString() },
|
||||
]);
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
if (!draftMessage.trim() || !targetDeviceId) return;
|
||||
|
||||
await window.electronAPI.sendRelayMessage(parseInt(targetDeviceId), draftMessage.trim());
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{ text: draftMessage.trim(), incoming: false, time: new Date().toLocaleTimeString() },
|
||||
]);
|
||||
setDraftMessage('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>网络连接</h1>
|
||||
|
||||
{!connected ? (
|
||||
<div className="card">
|
||||
<h3>建立连接</h3>
|
||||
<div className="form-group">
|
||||
<label>选择设备</label>
|
||||
<select
|
||||
value={selectedDevice || ''}
|
||||
onChange={(e) => setSelectedDevice(parseInt(e.target.value))}
|
||||
>
|
||||
<option value="">-- 选择设备 --</option>
|
||||
{devices.map((d) => (
|
||||
<option key={d.id} value={d.id}>
|
||||
{d.device_name} (ID: {d.id}, {d.status})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>选择节点</label>
|
||||
<select
|
||||
value={selectedNode || ''}
|
||||
onChange={(e) => setSelectedNode(parseInt(e.target.value))}
|
||||
>
|
||||
<option value="">-- 选择节点 --</option>
|
||||
{nodes.map((n) => (
|
||||
<option key={n.id} value={n.id}>
|
||||
{n.name} ({n.host}:{n.port}, 负载: {n.load})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{error && <div className="error-msg">{error}</div>}
|
||||
<button className="btn-primary" onClick={handleConnect}>
|
||||
连接
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="connection-active">
|
||||
<div className="card connection-header">
|
||||
<span>状态: {relayStatus === 'authenticated' ? '🟢 已连接' : '🟡 连接中...'}</span>
|
||||
<button className="btn-danger" onClick={handleDisconnect}>
|
||||
断开连接
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>消息发送</h3>
|
||||
<div className="inline-form">
|
||||
<input
|
||||
type="number"
|
||||
value={targetDeviceId}
|
||||
onChange={(e) => setTargetDeviceId(e.target.value)}
|
||||
placeholder="目标设备 ID"
|
||||
className="small-input"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={draftMessage}
|
||||
onChange={(e) => setDraftMessage(e.target.value)}
|
||||
placeholder="输入消息..."
|
||||
className="flex-input"
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
|
||||
/>
|
||||
<button className="btn-primary" onClick={handleSendMessage}>
|
||||
发送
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>消息记录</h3>
|
||||
<div className="message-log">
|
||||
{messages.length === 0 ? (
|
||||
<p className="empty-text">暂无消息</p>
|
||||
) : (
|
||||
messages.map((msg, i) => (
|
||||
<div key={i} className={`message ${msg.incoming ? 'incoming' : 'outgoing'}`}>
|
||||
<span className="msg-time">{msg.time}</span>
|
||||
<span className="msg-arrow">{msg.incoming ? '←' : '→'}</span>
|
||||
<span className="msg-text">{msg.text}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
function generateSimpleFingerprint(): string {
|
||||
// 浏览器兼容的简单指纹生成
|
||||
const arr = new Uint8Array(32);
|
||||
crypto.getRandomValues(arr);
|
||||
return Array.from(arr, (b) => b.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
export function DevicesPage() {
|
||||
const [devices, setDevices] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [deviceName, setDeviceName] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
|
||||
const loadDevices = async () => {
|
||||
const res = await window.electronAPI.listDevices();
|
||||
if (res.success) {
|
||||
setDevices(res.data);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDevices();
|
||||
}, []);
|
||||
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setSuccess('');
|
||||
|
||||
if (!deviceName.trim()) {
|
||||
setError('设备名称不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
const fingerprint = generateSimpleFingerprint();
|
||||
const res = await window.electronAPI.registerDevice({
|
||||
device_name: deviceName.trim(),
|
||||
device_fingerprint: fingerprint,
|
||||
public_key: '',
|
||||
});
|
||||
|
||||
if (res.success) {
|
||||
setSuccess(`设备 "${deviceName}" 注册成功！`);
|
||||
setDeviceName('');
|
||||
loadDevices();
|
||||
} else {
|
||||
setError(res.message || '注册失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
const res = await window.electronAPI.deleteDevice(id);
|
||||
if (res.success) {
|
||||
loadDevices();
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleStatus = async (id: number, current: string) => {
|
||||
const newStatus = current === 'online' ? 'offline' : 'online';
|
||||
await window.electronAPI.updateDeviceStatus(id, newStatus);
|
||||
loadDevices();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>设备管理</h1>
|
||||
|
||||
<div className="card">
|
||||
<h3>注册新设备</h3>
|
||||
<form onSubmit={handleRegister} className="inline-form">
|
||||
<input
|
||||
type="text"
|
||||
value={deviceName}
|
||||
onChange={(e) => setDeviceName(e.target.value)}
|
||||
placeholder="设备名称，如：MacBook Pro"
|
||||
className="flex-input"
|
||||
/>
|
||||
<button type="submit" className="btn-primary">注册设备</button>
|
||||
</form>
|
||||
{error && <div className="error-msg">{error}</div>}
|
||||
{success && <div className="success-msg">{success}</div>}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>我的设备 ({devices.length})</h3>
|
||||
{loading ? (
|
||||
<p>加载中...</p>
|
||||
) : devices.length === 0 ? (
|
||||
<p className="empty-text">暂无设备，请注册一个设备</p>
|
||||
) : (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>名称</th>
|
||||
<th>指纹</th>
|
||||
<th>状态</th>
|
||||
<th>最后在线</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{devices.map((d) => (
|
||||
<tr key={d.id}>
|
||||
<td>{d.id}</td>
|
||||
<td>{d.device_name}</td>
|
||||
<td className="mono">{d.device_fingerprint?.substring(0, 16)}...</td>
|
||||
<td>
|
||||
<span className={`status-badge ${d.status}`}>
|
||||
{d.status === 'online' ? '🟢 在线' : '⚫ 离线'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{d.last_seen_at}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-sm"
|
||||
onClick={() => handleToggleStatus(d.id, d.status)}
|
||||
>
|
||||
{d.status === 'online' ? '离线' : '上线'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-sm btn-danger"
|
||||
onClick={() => handleDelete(d.id)}
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
onLoginSuccess: (user: any) => void;
|
||||
onSwitchToRegister: () => void;
|
||||
}
|
||||
|
||||
export function LoginPage({ onLoginSuccess, onSwitchToRegister }: Props) {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
const res = await window.electronAPI.login(email, password);
|
||||
|
||||
if (res.success) {
|
||||
onLoginSuccess(res.data.user);
|
||||
} else {
|
||||
setError(res.message || '登录失败');
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="auth-card">
|
||||
<h1>🌐 异地组网工具</h1>
|
||||
<h2>登录</h2>
|
||||
<form onSubmit={handleLogin}>
|
||||
<div className="form-group">
|
||||
<label>邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-msg">{error}</div>}
|
||||
<button type="submit" className="btn-primary" disabled={loading}>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</button>
|
||||
</form>
|
||||
<p className="auth-switch">
|
||||
还没有账号？{' '}
|
||||
<button onClick={onSwitchToRegister} className="link-btn">
|
||||
注册
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
export function LogsPage() {
|
||||
const [logs, setLogs] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const loadLogs = async () => {
|
||||
const res = await window.electronAPI.getConnectionLogs();
|
||||
if (res.success) setLogs(res.data);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadLogs();
|
||||
const interval = setInterval(loadLogs, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>连接日志</h1>
|
||||
|
||||
<div className="card">
|
||||
<h3>最近日志 ({logs.length})</h3>
|
||||
{loading ? (
|
||||
<p>加载中...</p>
|
||||
) : logs.length === 0 ? (
|
||||
<p className="empty-text">暂无日志</p>
|
||||
) : (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>用户ID</th>
|
||||
<th>设备ID</th>
|
||||
<th>节点ID</th>
|
||||
<th>操作</th>
|
||||
<th>状态</th>
|
||||
<th>消息</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((l) => (
|
||||
<tr key={l.id}>
|
||||
<td>{l.created_at}</td>
|
||||
<td>{l.user_id || '-'}</td>
|
||||
<td>{l.device_id || '-'}</td>
|
||||
<td>{l.node_id || '-'}</td>
|
||||
<td>{l.action}</td>
|
||||
<td>
|
||||
<span className={`status-badge ${l.status}`}>
|
||||
{l.status === 'success' ? '✅' : '❌'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{l.message}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
export function NodesPage() {
|
||||
const [nodes, setNodes] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const loadNodes = async () => {
|
||||
const res = await window.electronAPI.listNodes();
|
||||
if (res.success) setNodes(res.data);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadNodes();
|
||||
const interval = setInterval(loadNodes, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>转发节点状态</h1>
|
||||
|
||||
<div className="card">
|
||||
<h3>节点列表 ({nodes.length})</h3>
|
||||
{loading ? (
|
||||
<p>加载中...</p>
|
||||
) : nodes.length === 0 ? (
|
||||
<p className="empty-text">暂无注册节点，请启动 Relay Node 程序</p>
|
||||
) : (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>名称</th>
|
||||
<th>地址</th>
|
||||
<th>状态</th>
|
||||
<th>负载</th>
|
||||
<th>最后心跳</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{nodes.map((n) => (
|
||||
<tr key={n.id}>
|
||||
<td>{n.id}</td>
|
||||
<td>{n.name}</td>
|
||||
<td>{n.host}:{n.port}</td>
|
||||
<td>
|
||||
<span className={`status-badge ${n.status}`}>
|
||||
{n.status === 'online' ? '🟢 在线' : n.status === 'busy' ? '🟡 繁忙' : '⚫ 离线'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="load-bar">
|
||||
<div className="load-fill" style={{ width: `${Math.min(n.load, 100)}%` }} />
|
||||
<span>{n.load}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{n.last_heartbeat_at}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
onSwitchToLogin: () => void;
|
||||
}
|
||||
|
||||
export function RegisterPage({ onSwitchToLogin }: Props) {
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleRegister = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setSuccess('');
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError('两次密码不一致');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
setError('密码至少 6 位');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
const res = await window.electronAPI.register(email, password);
|
||||
|
||||
if (res.success) {
|
||||
setSuccess('注册成功！请登录');
|
||||
setTimeout(onSwitchToLogin, 1500);
|
||||
} else {
|
||||
setError(res.message || '注册失败');
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="auth-card">
|
||||
<h1>🌐 异地组网工具</h1>
|
||||
<h2>注册</h2>
|
||||
<form onSubmit={handleRegister}>
|
||||
<div className="form-group">
|
||||
<label>邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="至少 6 位"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>确认密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="再次输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-msg">{error}</div>}
|
||||
{success && <div className="success-msg">{success}</div>}
|
||||
<button type="submit" className="btn-primary" disabled={loading}>
|
||||
{loading ? '注册中...' : '注册'}
|
||||
</button>
|
||||
</form>
|
||||
<p className="auth-switch">
|
||||
已有账号？{' '}
|
||||
<button onClick={onSwitchToLogin} className="link-btn">
|
||||
登录
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
export function SettingsPage() {
|
||||
const [user, setUser] = useState<any>(null);
|
||||
const [serverUrl, setServerUrl] = useState('http://localhost:3001');
|
||||
|
||||
useEffect(() => {
|
||||
window.electronAPI.getMe().then((res) => {
|
||||
if (res.success) setUser(res.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>设置</h1>
|
||||
|
||||
<div className="card">
|
||||
<h3>账户信息</h3>
|
||||
{user && (
|
||||
<div className="settings-info">
|
||||
<div className="info-row">
|
||||
<span className="info-label">邮箱</span>
|
||||
<span>{user.email}</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">角色</span>
|
||||
<span>{user.role === 'admin' ? '管理员' : '普通用户'}</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">注册时间</span>
|
||||
<span>{user.created_at}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>服务器配置</h3>
|
||||
<div className="form-group">
|
||||
<label>Control Server 地址</label>
|
||||
<input
|
||||
type="text"
|
||||
value={serverUrl}
|
||||
onChange={(e) => setServerUrl(e.target.value)}
|
||||
placeholder="http://localhost:3001"
|
||||
/>
|
||||
</div>
|
||||
<p className="hint-text">服务器地址在启动时通过环境变量 SERVER_URL 配置</p>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<h3>关于</h3>
|
||||
<div className="settings-info">
|
||||
<div className="info-row">
|
||||
<span className="info-label">应用名称</span>
|
||||
<span>Network Tool - 异地组网工具</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">版本</span>
|
||||
<span>0.1.0 MVP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,494 @@
|
||||
/* ============================================================
|
||||
Global Styles - Network Tool Client
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-card: #1e293b;
|
||||
--bg-input: #334155;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--danger: #ef4444;
|
||||
--danger-hover: #dc2626;
|
||||
--success: #22c55e;
|
||||
--warning: #f59e0b;
|
||||
--border: #334155;
|
||||
--radius: 8px;
|
||||
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
App Layout
|
||||
============================================================ */
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
background: var(--bg-secondary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Auth Pages
|
||||
============================================================ */
|
||||
|
||||
.auth-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: var(--bg-card);
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
width: 400px;
|
||||
max-width: 90vw;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.auth-card h2 {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.auth-switch {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Page
|
||||
============================================================ */
|
||||
|
||||
.page h1 {
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Card
|
||||
============================================================ */
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 15px;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Forms
|
||||
============================================================ */
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.inline-form {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.small-input {
|
||||
width: 120px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Buttons
|
||||
============================================================ */
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--danger-hover);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.btn-sm:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-sm.btn-danger:hover {
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Status & Alerts
|
||||
============================================================ */
|
||||
|
||||
.status-badge {
|
||||
font-size: 13px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.status-badge.online {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-badge.offline {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-badge.busy {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.status-badge.success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-badge.failed {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--danger);
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.success-msg {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--success);
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Tables
|
||||
============================================================ */
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 10px 8px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid rgba(51, 65, 85, 0.5);
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Load Bar
|
||||
============================================================ */
|
||||
|
||||
.load-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.load-fill {
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 3px;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
|
||||
.load-bar span {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Connection
|
||||
============================================================ */
|
||||
|
||||
.connection-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.connection-header span {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.connection-header .btn-danger {
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Message Log
|
||||
============================================================ */
|
||||
|
||||
.message-log {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.msg-arrow {
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.message.incoming .msg-arrow {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.msg-text {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Settings
|
||||
============================================================ */
|
||||
|
||||
.settings-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(51, 65, 85, 0.3);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"outDir": "dist/renderer",
|
||||
"rootDir": "src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/renderer"]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "commonjs",
|
||||
"outDir": "dist/main",
|
||||
"rootDir": "src/main",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"include": ["src/main"]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
root: 'src/renderer',
|
||||
base: './',
|
||||
build: {
|
||||
outDir: '../../dist/renderer',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
strictPort: true,
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src/renderer'),
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user