feat: improve agent management and speed up tests

web/admin/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>线路质量 · 管理</title>
+    <title>MyMonitor · 管理</title>
   </head>
   <body>
     <div id="root"></div>

web/admin/src/App.tsx

@@ -38,7 +38,7 @@ function Login() {
     <div className="login">
       <form className="card stack" onSubmit={submit}>
         <div>
-          <h1>线路质量</h1>
+          <h1>MyMonitor</h1>
           <p className="muted">管理端</p>
         </div>
         {remote ? (
@@ -88,7 +88,7 @@ export function App() {
     <div className="shell">
       <aside className="side">
         <a className="brand" href="/">
-          线路质量
+          MyMonitor
         </a>
         {NAV.map((group) => (
           <div key={group.section} style={{ display: 'contents' }}>

web/admin/src/admin.css

@@ -69,6 +69,27 @@
   background: var(--app-card);
 }
 
+/* 用户名太长时省略，不要和右边的按钮叠在一起 */
+.me {
+  flex-wrap: wrap;
+}
+
+.me .grow {
+  flex: 1 1 100px;
+  min-width: 0;
+}
+
+.me .grow > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.me .btn,
+.me .avatar {
+  flex: none;
+}
+
 .avatar {
   width: 32px;
   height: 32px;

web/admin/src/main.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter } from 'react-router-dom'
 import '@shared/theme/base.css'
 import { configureSource } from '@shared/api/source'
 import { applyStoredTheme } from '@shared/hooks'
-import { ToastProvider } from '@shared/ui'
+import { ErrorBoundary, ToastProvider } from '@shared/ui'
 import { App } from './App'
 import { AuthProvider } from './auth'
 import './admin.css'
@@ -15,11 +15,13 @@ applyStoredTheme()
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter basename={import.meta.env.BASE_URL}>
-      <ToastProvider>
-        <AuthProvider>
-          <App />
-        </AuthProvider>
-      </ToastProvider>
+      <ErrorBoundary>
+        <ToastProvider>
+          <AuthProvider>
+            <App />
+          </AuthProvider>
+        </ToastProvider>
+      </ErrorBoundary>
     </BrowserRouter>
   </StrictMode>,
 )

web/admin/src/pages/Agents.tsx

@@ -1,11 +1,11 @@
-import { Plus, Trash2 } from 'lucide-react'
+import { Ban, Plus, Trash2 } from 'lucide-react'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { api } from '@shared/api/client'
 import type { AgentDto, CreatedJoinTokenDto, JoinTokenDto, Page } from '@shared/api/types'
 import { fmtAgo, fmtTime } from '@shared/format'
 import { useQuery } from '@shared/hooks'
-import { Chip, Confirm, CopyButton, Dialog, Dot, Empty, ErrorNotice, Field, Segmented, Spinner, useAction } from '@shared/ui'
+import { Chip, CommandTabs, Confirm, CopyButton, Dialog, Dot, Empty, ErrorNotice, Field, guessPlatform, Segmented, Spinner, useAction } from '@shared/ui'
 
 export const STATUS: Record<string, { label: string; tone: 'ok' | 'warn' | 'bad' }> = {
   active: { label: '已启用', tone: 'ok' },
@@ -45,11 +45,16 @@ function AddAgentDialog({ onClose, onCreated }: { onClose: () => void; onCreated
       >
         <div className="stack">
           <div className="notice warn">令牌明文只显示这一次，请现在就复制。</div>
-          <Field label="在要加入的 VPS 上运行">
-            <pre className="code">{created.install_command}</pre>
-            <div>
-              <CopyButton text={created.install_command} label="复制安装命令" />
-            </div>
+          <Field label="在要加入的机器上运行">
+            <CommandTabs
+              storageKey="monitor.install_tab"
+              initial={guessPlatform()}
+              tabs={[
+                { id: 'linux', label: 'Linux', command: created.install_commands.linux },
+                { id: 'macos', label: 'macOS', command: created.install_commands.macos },
+                { id: 'windows', label: 'Windows', command: created.install_commands.windows },
+              ]}
+            />
           </Field>
           <Field label="令牌">
             <pre className="code">{created.plaintext}</pre>
@@ -135,6 +140,7 @@ export function Agents() {
   const [filter, setFilter] = useState<'all' | 'pending' | 'disabled'>('all')
   const [adding, setAdding] = useState(false)
   const [revoking, setRevoking] = useState<JoinTokenDto>()
+  const [deleting, setDeleting] = useState<JoinTokenDto>()
   const { run } = useAction()
 
   const list = (agents.data?.items ?? []).filter((a) => filter === 'all' || a.status === filter)
@@ -240,12 +246,18 @@ export function Agents() {
                         <Chip tone={state === '可用' ? 'ok' : ''}>{state}</Chip>
                       </td>
                       <td className="r">
-                        {state === '可用' ? (
-                          <button type="button" className="btn small danger" onClick={() => setRevoking(t)}>
+                        <span className="row" style={{ gap: 8, justifyContent: 'flex-end' }}>
+                          {state === '可用' ? (
+                            <button type="button" className="btn small danger" onClick={() => setRevoking(t)}>
+                              <Ban size={14} />
+                              吊销
+                            </button>
+                          ) : null}
+                          <button type="button" className="btn small danger" onClick={() => setDeleting(t)}>
                             <Trash2 size={14} />
-                            吊销
+                            删除
                           </button>
-                        ) : null}
+                        </span>
                       </td>
                     </tr>
                   )
@@ -271,6 +283,20 @@ export function Agents() {
           吊销之后，这个令牌不能再用来注册 Agent。已经注册的 Agent 不受影响。
         </Confirm>
       ) : null}
+      {deleting ? (
+        <Confirm
+          title="删除加入令牌"
+          danger
+          confirmText="删除"
+          onClose={() => setDeleting(undefined)}
+          onConfirm={async () => {
+            await run(() => api.del(`/api/admin/join-tokens/${deleting.id}?purge=true`), '已删除')
+            tokens.reload()
+          }}
+        >
+          从列表里彻底删除这条记录。{deleting.revoked_at || deleting.uses >= deleting.max_uses || Date.parse(deleting.expires_at) < Date.now() ? '它已经不能再用了。' : '它现在还能用，删除之后会立刻失效。'}已经注册的 Agent 不受影响。
+        </Confirm>
+      ) : null}
     </>
   )
 }

web/admin/vite.config.ts

@@ -12,7 +12,9 @@ export default defineConfig(({ mode }) => {
     plugins: [react()],
     resolve: { alias: { '@shared': fileURLToPath(new URL('../shared', import.meta.url)) } },
     server: {
-      port: 5174,
+      // 5174 常被 Docker Desktop 占用，管理端用 5175；端口被占时直接报错，不悄悄换到别的端口
+      port: 5175,
+      strictPort: true,
       fs: { allow: ['..'] },
       proxy: {
         '/api': { target: backend, changeOrigin: true, secure: true, cookieDomainRewrite: '' },