大海
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
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>
|
|
);
|
|
}
|