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