feat(web): add backend switcher and connection status

Split the login page into backend list and credentials, show connection status in the sidebar and top bar, and render dialogs in a portal.

web/shared/api/client.ts

@@ -57,6 +57,28 @@ async function request<T>(method: string, path: string, body?: unknown, init?: R
   return data as T
 }
 
+/**
+ * 在另一个后端上用用户名和密码登录：不设 Cookie（跨域用不了），把会话令牌放在响应里返回（`return_session`），
+ * 调用方存进浏览器，之后每个请求带上。
+ */
+export async function loginTo(base: string, username: string, password: string): Promise<string> {
+  const response = await fetch(`${base}/api/admin/auth/login`, {
+    method: 'POST',
+    headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+    credentials: 'omit',
+    body: JSON.stringify({ username, password, return_session: true }),
+  })
+  const text = await response.text()
+  const data = text ? (JSON.parse(text) as unknown) : undefined
+  if (!response.ok) {
+    const problem = (data ?? {}) as { code?: string; detail?: string; title?: string }
+    throw new ApiError(response.status, problem.code ?? 'error', problem.detail ?? problem.title ?? response.statusText)
+  }
+  const token = (data as { session_token?: string | null } | undefined)?.session_token
+  if (!token) throw new ApiError(502, 'no_session', '这个后端的版本还不支持跨域登录，请先升级后端')
+  return token
+}
+
 export const api = {
   get: <T>(path: string, query?: Query, init?: RequestInit) => request<T>('GET', withQuery(path, query), undefined, init),
   post: <T>(path: string, body?: unknown) => request<T>('POST', path, body ?? {}),

web/shared/api/schema.ts

@@ -1169,6 +1169,7 @@ export interface components {
         LoginRequest: {
             username: string;
             password: string;
+            return_session: null | boolean;
         };
         LoginResponse: {
             user_id: string;
@@ -1176,6 +1177,7 @@ export interface components {
             csrf_token: string;
             /** Format: date-time */
             expires_at: unknown;
+            session_token: null | string;
         };
         MeDto: {
             kind: string;

web/shared/api/source.ts

@@ -41,17 +41,65 @@ export function getBase(): string {
   return normalizeBase(read(BASE_KEY) || (import.meta.env.VITE_API_BASE as string | undefined) || '')
 }
 
+export interface SavedSource {
+  base: string
+  /** 在这个后端登录之后拿到的会话（只存在浏览器里）；空 = 还没登录。 */
+  token: string
+}
+
+// v2：以前保存的是手填的管理 Token，现在是登录后拿到的会话，旧的不再使用
+const listKey = () => `monitor.sources.v2.${app}`
+
+function readList(): SavedSource[] {
+  try {
+    const parsed = JSON.parse(read(listKey()) || '[]') as unknown
+    return Array.isArray(parsed) ? (parsed as SavedSource[]).filter((x) => typeof x?.base === 'string' && x.base !== '') : []
+  } catch {
+    return []
+  }
+}
+
+/** 保存过的后端（每个前端各存各的登录会话）；当前连接的那个一定在里面。不含这个页面自己所在的后端。 */
+export function listSources(): SavedSource[] {
+  const list = readList()
+  const active = getBase()
+  if (active && !list.some((x) => x.base === active)) list.push({ base: active, token: '' })
+  return list
+}
+
+function writeList(list: SavedSource[]) {
+  write(listKey(), JSON.stringify(list))
+}
+
+/** 当前连接的后端的登录会话；这个页面自己所在的后端用 Cookie，没有。 */
 export function getToken(): string {
-  return read(`monitor.api_token.${app}`)
+  const active = getBase()
+  return active ? (readList().find((x) => x.base === active)?.token ?? '') : ''
 }
 
+/** 保存（或更新）一个后端和它的登录会话，并连过去。地址留空 = 这个页面自己所在的后端。 */
 export function setSource(base: string, token: string) {
-  write(BASE_KEY, normalizeBase(base))
-  write(`monitor.api_token.${app}`, token.trim())
+  const next = normalizeBase(base)
+  if (next) writeList([...readList().filter((x) => x.base !== next), { base: next, token }])
+  write(BASE_KEY, next)
 }
 
+/** 切换到已经保存过的后端（空串 = 这个页面自己所在的后端）。 */
+export function activateSource(base: string) {
+  write(BASE_KEY, normalizeBase(base))
+}
+
+/** 忘掉一个保存过的后端；正连着的话回到这个页面自己所在的后端。 */
+export function removeSource(base: string) {
+  writeList(readList().filter((x) => x.base !== base))
+  if (getBase() === base) write(BASE_KEY, '')
+}
+
+/** 只改当前连接的后端的登录会话（过期、退出时清掉）。 */
 export function setToken(token: string) {
-  write(`monitor.api_token.${app}`, token.trim())
+  const active = getBase()
+  if (!active) return
+  writeList([...readList().filter((x) => x.base !== active), { base: active, token }])
 }
 
 export const isRemote = () => getBase() !== ''
@@ -66,6 +114,18 @@ export function authHeaders(): Record<string, string> {
   return isRemote() && token ? { Authorization: `Bearer ${token}` } : {}
 }
 
+/**
+ * 当前后端连不连得上：只看有没有响应（跨域时拿不到内容也没关系，所以用 no-cors）；网络不通、域名解析失败、连接被拒才算失败。
+ */
+export async function pingBackend(): Promise<boolean> {
+  try {
+    await fetch(resolveUrl('/healthz'), { mode: 'no-cors', cache: 'no-store' })
+    return true
+  } catch {
+    return false
+  }
+}
+
 export interface LiveSource {
   onopen: (() => void) | null
   onerror: (() => void) | null

web/shared/theme/base.css

@@ -451,7 +451,8 @@ textarea {
 .scrim {
   position: fixed;
   inset: 0;
-  background: color-mix(in srgb, var(--app-scrim), transparent 60%);
+  background: color-mix(in srgb, var(--app-scrim), transparent 55%);
+  backdrop-filter: blur(3px);
   display: grid;
   place-items: center;
   z-index: 50;
@@ -465,7 +466,11 @@ textarea {
   width: min(560px, 100%);
   max-height: calc(100vh - 32px);
   overflow: auto;
-  box-shadow: 0 8px 32px color-mix(in srgb, var(--app-shadow), transparent 80%);
+  border: 1px solid var(--app-outline-soft);
+  /* 近处一圈细的、远处一大片柔的：边缘清楚，又不会糊成一团 */
+  box-shadow:
+    0 1px 2px color-mix(in srgb, var(--app-shadow), transparent 80%),
+    0 12px 40px color-mix(in srgb, var(--app-shadow), transparent 72%);
 }
 
 .dialog h2 {
@@ -780,3 +785,133 @@ pre.code {
   background: var(--app-card-hover);
   color: var(--app-ink);
 }
+
+/* ── 数据源列表：连接中的高亮，点一行就切换 ── */
+.src-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.src-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.src-pick {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--app-outline-soft);
+  border-radius: var(--r-control);
+  background: var(--app-card-inset);
+  color: var(--app-ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.src-pick:hover {
+  background: var(--app-card-hover);
+}
+
+.src-row.on .src-pick,
+.src-pick.on {
+  border-color: var(--app-accent);
+  background: var(--app-accent-container);
+  color: var(--app-on-accent-container);
+}
+
+.src-dot {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  border: 2px solid var(--app-ink-faint);
+}
+
+.src-row.on .src-dot,
+.src-pick.on .src-dot {
+  border-color: var(--app-accent);
+  background: var(--app-accent);
+}
+
+.src-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.src-text b {
+  font-weight: 600;
+}
+
+.src-text small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--app-ink-muted);
+  font-size: 12px;
+}
+
+/* ── 数据源状态条：放在用户信息上方，一眼看到连的是哪个后端、连得上没有 ── */
+.src-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--app-outline-soft);
+  border-radius: var(--r-control);
+  background: var(--app-card);
+  color: var(--app-ink);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.src-status:hover {
+  background: var(--app-card-hover);
+}
+
+.src-status .st-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--app-idle);
+}
+
+.src-status.ok .st-dot {
+  background: var(--app-ok);
+}
+
+.src-status.bad .st-dot {
+  background: var(--app-bad);
+}
+
+.src-status .st-host {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.src-status .st {
+  flex: none;
+  color: var(--app-ink-muted);
+}
+
+.src-status.bad .st {
+  color: var(--app-bad);
+}

web/shared/theme/tokens.css

@@ -59,6 +59,10 @@
 :root[data-theme="dark"] {
   color-scheme: dark;
 
+  /* 暗色下的阴影和遮罩要用纯黑，不然和深色背景差不多，看不出层次 */
+  --app-shadow: #000000;
+  --app-scrim: #000000;
+
   --app-bg: #181714;
   --app-card: #211f1b;
   --app-card-inset: #2b2924;

web/shared/ui/index.tsx

@@ -1,8 +1,9 @@
-import { Check, Copy, Moon, Plug, Sun } from 'lucide-react'
+import { Check, Copy, Moon, Plug, Plus, Sun, X } from 'lucide-react'
+import { createPortal } from 'react-dom'
 import { Component, createContext, useCallback, useContext, useEffect, useRef, useState, type ErrorInfo, type ReactNode } from 'react'
-import { ApiError } from '../api/client'
-import { getBase, getToken, normalizeBase, setSource } from '../api/source'
-import { useTheme } from '../hooks'
+import { ApiError, loginTo } from '../api/client'
+import { activateSource, getBase, listSources, normalizeBase, pingBackend, removeSource, setSource } from '../api/source'
+import { useQuery, useTheme } from '../hooks'
 import { translateCode, translateField, translateMessage } from '../i18n'
 
 /** 连接式分组（单选）：组内小圆角、外角大圆角，选中段变胶囊。 */
@@ -64,14 +65,17 @@ export function Dialog({ title, onClose, children, actions }: { title: string; o
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
   }, [onClose])
-  return (
+  // 渲染到 body 上：对话框是 position: fixed 的，如果放在带 backdrop-filter / transform 的祖先里（比如展示端的顶栏），
+  // 它会以那个祖先为定位基准，被挤到顶栏里、一半在屏幕外
+  return createPortal(
     <div className="scrim" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
       <div className="dialog" role="dialog" aria-modal="true" aria-label={title}>
         <h2>{title}</h2>
         {children}
         {actions ? <div className="actions">{actions}</div> : null}
       </div>
-    </div>
+    </div>,
+    document.body,
   )
 }
 
@@ -340,49 +344,154 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, { error: E
   }
 }
 
-/** 数据源设置：默认连同源的后端；填了地址就连别的后端（跨域用 API 令牌，后端要放行这个前端的来源）。 */
-export function SourceButton({ tokenLabel = '只读令牌（站点私有时才需要）' }: { tokenLabel?: string }) {
+/** 地址的简短写法：去掉协议，留 host（和端口）。 */
+const shortHost = (base: string) => base.replace(/^https?:\/\//i, '')
+
+/**
+ * 数据源：默认连这个页面所在的后端（同源）；也可以保存几个别的后端（比如本机跑前端、连线上的），在列表里点一下就切换。
+ * 跨域时不用 Cookie，改用 API 令牌，所以每个后端各存一个令牌（只在浏览器里），后端需要放行这个页面的来源（`Monitor__CorsOrigins`）。
+ */
+export function SourceButton({ variant = 'icon' }: { variant?: 'icon' | 'status' }) {
   const [open, setOpen] = useState(false)
+  const [adding, setAdding] = useState(listSources().length === 0)
   const [base, setBase] = useState('')
-  const [token, setToken] = useState('')
-  const remote = getBase() !== ''
-  const show = () => {
-    setBase(getBase())
-    setToken(getToken())
-    setOpen(true)
-  }
-  const apply = (nextBase: string, nextToken: string) => {
-    setSource(nextBase, nextToken)
-    location.reload()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [, refresh] = useState(0)
+  const active = getBase()
+  const saved = listSources()
+  const switchTo = (next: string) => {
+    if (next !== active) {
+      activateSource(next)
+      location.reload()
+    }
   }
+  // 状态条用：每 15 秒问一下当前后端还连不连得上
+  const health = useQuery(() => (variant === 'status' ? pingBackend() : Promise.resolve(undefined)), [variant, active], variant === 'status' ? 15_000 : undefined)
+  const state = health.data === false ? 'bad' : health.data === undefined ? 'wait' : 'ok'
+  const rows = saved.map((x) => ({ base: x.base, label: shortHost(x.base), detail: x.token ? '已登录' : '未登录' }))
+  // 连接中的排在最前面
+  rows.sort((a, b) => Number(b.base === active) - Number(a.base === active))
   return (
     <>
-      <button type="button" className={`btn icon${remote ? ' primary' : ''}`} onClick={show} aria-label="数据源" title={remote ? `数据源：${getBase()}` : '数据源：同源'}>
-        <Plug size={18} />
-      </button>
+      {variant === 'status' ? (
+        <button type="button" className={`src-status ${state}`} onClick={() => setOpen(true)} aria-label="数据源" title={`后端：${active || location.origin}（点击切换）`}>
+          <span className="st-dot" />
+          <span className="st-host">{shortHost(active || location.origin)}</span>
+          <span className="st">{state === 'ok' ? '已连接' : state === 'bad' ? '无法连接' : '连接中…'}</span>
+        </button>
+      ) : (
+        <button type="button" className={`btn icon${active ? ' primary' : ''}`} onClick={() => setOpen(true)} aria-label="数据源" title={active ? `后端：${active}` : `后端：${location.origin}`}>
+          <Plug size={18} />
+        </button>
+      )}
       {open ? (
         <Dialog
           title="数据源"
           onClose={() => setOpen(false)}
           actions={
-            <>
-              <button type="button" className="btn" onClick={() => apply('', '')}>
-                恢复同源
-              </button>
-              <button type="button" className="btn primary" onClick={() => apply(base, token)}>
-                保存并刷新
-              </button>
-            </>
+            <button type="button" className="btn" onClick={() => setOpen(false)}>
+              关闭
+            </button>
           }
         >
           <div className="stack">
-            <p className="muted">默认连这个页面所在的后端。填了地址就连另一个后端（比如本机跑前端、连线上的）；此时不用 Cookie，改用 API 令牌，后端需要放行这个页面的来源（<code>Monitor__CorsOrigins</code>）。</p>
-            <Field label="后端地址" hint={base && normalizeBase(base) !== base.trim() ? `将使用 ${normalizeBase(base)}` : '例如 https://mo.oeo.one；留空 = 同源'}>
-              <input className="input" value={base} onChange={(e) => setBase(e.target.value)} placeholder="https://mo.oeo.one" autoFocus />
-            </Field>
-            <Field label={tokenLabel}>
-              <input className="input" type="password" value={token} onChange={(e) => setToken(e.target.value)} autoComplete="off" />
-            </Field>
+            {rows.length > 0 ? (
+            <div className="src-list" role="listbox" aria-label="已保存的后端">
+              {rows.map((row) => {
+                const on = row.base === active
+                return (
+                  <div key={row.base || 'same-origin'} className={`src-row${on ? ' on' : ''}`}>
+                    <button type="button" role="option" aria-selected={on} className="src-pick" onClick={() => switchTo(row.base)} title={on ? '正在连接' : '点击切换到这个后端'}>
+                      <span className="src-dot" />
+                      <span className="src-text">
+                        <b>{row.label}</b>
+                        <small>{row.detail}</small>
+                      </span>
+                      {on ? <span className="chip accent">连接中</span> : null}
+                    </button>
+                    {row.base ? (
+                      <button
+                        type="button"
+                        className="btn icon small"
+                        aria-label="忘掉这个后端"
+                        title={on ? '断开并忘掉这个后端' : '忘掉这个后端'}
+                        onClick={() => {
+                          removeSource(row.base)
+                          if (on) location.reload()
+                          else refresh((n) => n + 1)
+                        }}
+                      >
+                        <X size={14} />
+                      </button>
+                    ) : null}
+                  </div>
+                )
+              })}
+            </div>
+            ) : (
+              <p className="muted">还没有保存后端。填上后端地址和用户名、密码，就可以连上去；不填则使用 {location.origin} 的 API。</p>
+            )}
+            {adding ? (
+              <div className="stack">
+                <Field label="后端地址" hint={base && normalizeBase(base) !== base.trim() ? `将使用 ${normalizeBase(base)}` : '例如 https://mo.oeo.one'}>
+                  <input className="input" name="backend-url" type="url" autoComplete="url" value={base} onChange={(e) => setBase(e.target.value)} placeholder="https://mo.oeo.one" autoFocus />
+                </Field>
+                <Field label="用户名" hint="站点公开、只想看数据的话可以留空">
+                  <input className="input" name="backend-username" autoComplete="off" value={username} onChange={(e) => setUsername(e.target.value)} />
+                </Field>
+                <Field label="密码">
+                  <input className="input" name="backend-password" type="password" autoComplete="new-password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                </Field>
+                {error ? <div className="notice bad">{error}</div> : null}
+                <div className="row" style={{ gap: 8 }}>
+                  <button
+                    type="button"
+                    className="btn primary"
+                    disabled={!normalizeBase(base) || busy}
+                    onClick={async () => {
+                      setBusy(true)
+                      setError('')
+                      try {
+                        // 填了用户名就先登录（拿回会话存起来），登录成功才保存这个后端
+                        setSource(base, username ? await loginTo(normalizeBase(base), username, password) : '')
+                        location.reload()
+                      } catch (err) {
+                        setError(describeError(err))
+                      } finally {
+                        setBusy(false)
+                      }
+                    }}
+                  >
+                    保存并连接
+                  </button>
+                  {rows.length > 0 ? (
+                    <button type="button" className="btn" onClick={() => setAdding(false)}>
+                      取消
+                    </button>
+                  ) : null}
+                </div>
+              </div>
+            ) : (
+              <div>
+                <button
+                  type="button"
+                  className="btn small"
+                  onClick={() => {
+                    setBase('')
+                    setUsername('')
+                    setPassword('')
+                    setError('')
+                    setAdding(true)
+                  }}
+                >
+                  <Plus size={14} />
+                  添加后端
+                </button>
+              </div>
+            )}
           </div>
         </Dialog>
       ) : null}