chore: initial project import

web/admin/src/App.tsx

@@ -0,0 +1,134 @@
+import { FlaskConical, ListChecks, LogOut, Radar, Server, Settings } from 'lucide-react'
+import { useState, type FormEvent } from 'react'
+import { NavLink, Navigate, Route, Routes } from 'react-router-dom'
+import { isRemote } from '@shared/api/source'
+import { describeError, Field, SourceButton, Spinner, ThemeToggle } from '@shared/ui'
+import { useAuth } from './auth'
+import { AgentDetail } from './pages/AgentDetail'
+import { Agents } from './pages/Agents'
+import { Probes } from './pages/Probes'
+import { System } from './pages/System'
+import { Tasks } from './pages/Tasks'
+import { Tests } from './pages/Tests'
+
+function Login() {
+  const { login, loginWithToken } = useAuth()
+  const remote = isRemote()
+  const [token, setTokenText] = useState('')
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault()
+    setBusy(true)
+    setError('')
+    try {
+      if (remote) await loginWithToken(token)
+      else await login(username, password)
+    } catch (err) {
+      setError(describeError(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="login">
+      <form className="card stack" onSubmit={submit}>
+        <div>
+          <h1>线路质量</h1>
+          <p className="muted">管理端</p>
+        </div>
+        {remote ? (
+          <Field label="管理令牌" hint="在管理端「系统 → API 令牌」里创建，范围选 admin">
+            <input className="input" type="password" value={token} onChange={(e) => setTokenText(e.target.value)} autoComplete="off" autoFocus required />
+          </Field>
+        ) : (
+          <>
+            <Field label="用户名">
+              <input className="input" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" autoFocus required />
+            </Field>
+            <Field label="密码">
+              <input className="input" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" required />
+            </Field>
+          </>
+        )}
+        {error ? <div className="notice bad">{error}</div> : null}
+        <button className="btn primary" type="submit" disabled={busy}>
+          登录
+        </button>
+      </form>
+      <div style={{ position: 'fixed', right: 16, bottom: 16 }}>
+        <SourceButton tokenLabel="管理令牌" />
+      </div>
+    </div>
+  )
+}
+
+const NAV = [
+  { section: '运维', items: [{ to: '/agents', label: 'Agent', icon: Server }, { to: '/probes', label: 'Probe', icon: Radar }] },
+  { section: '测试', items: [{ to: '/tasks', label: '任务', icon: ListChecks }, { to: '/tests', label: '按需测试', icon: FlaskConical }] },
+  { section: '系统', items: [{ to: '/system', label: '系统', icon: Settings }] },
+]
+
+export function App() {
+  const { me, ready, logout } = useAuth()
+  if (!ready) {
+    return (
+      <div className="login">
+        <Spinner />
+      </div>
+    )
+  }
+  if (!me) return <Login />
+
+  return (
+    <div className="shell">
+      <aside className="side">
+        <a className="brand" href="/">
+          线路质量
+        </a>
+        {NAV.map((group) => (
+          <div key={group.section} style={{ display: 'contents' }}>
+            <div className="section">{group.section}</div>
+            {group.items.map(({ to, label, icon: Icon }) => (
+              <NavLink key={to} to={to} className={({ isActive }) => `nav ${isActive ? 'active' : ''}`}>
+                <Icon size={20} />
+                {label}
+              </NavLink>
+            ))}
+          </div>
+        ))}
+        <div className="spacer" />
+        <div className="me">
+          <span className="avatar">{(me.username ?? 'A').slice(0, 1).toUpperCase()}</span>
+          <span className="grow">
+            <div style={{ fontWeight: 600 }}>{me.username ?? 'API 令牌'}</div>
+            <div className="faint" style={{ fontSize: 12 }}>
+              {me.scope}
+            </div>
+          </span>
+          <SourceButton tokenLabel="管理令牌" />
+          <ThemeToggle />
+          <button type="button" className="btn icon" onClick={() => void logout()} aria-label="退出登录" title="退出登录">
+            <LogOut size={18} />
+          </button>
+        </div>
+      </aside>
+      <div className="main">
+        <Routes>
+          <Route path="/" element={<Navigate to="/agents" replace />} />
+          <Route path="/agents" element={<Agents />} />
+          <Route path="/agents/:id" element={<AgentDetail />} />
+          <Route path="/probes" element={<Probes />} />
+          <Route path="/tasks" element={<Tasks />} />
+          <Route path="/tests" element={<Tests />} />
+          <Route path="/system" element={<System />} />
+          <Route path="*" element={<Navigate to="/agents" replace />} />
+        </Routes>
+      </div>
+    </div>
+  )
+}