admin-ui: sync English localization

cmd/telesrv-admin/web/src/components/ActionButton.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { api, errorMessage } from "../api";
+import { useI18n } from "../i18n";
 import type { CommandResult } from "../types";
 import { Alert, JsonBlock } from "./ui";
 
@@ -25,6 +26,7 @@ export function ActionButton({
   tone?: ActionTone;
   onDone?: () => void;
 }) {
+  const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const [reason, setReason] = useState("");
   const [result, setResult] = useState<CommandResult | null>(null);
@@ -39,7 +41,7 @@ export function ActionButton({
 
   async function run(confirm: boolean) {
     if (!reason.trim()) {
-      setError("请填写操作原因");
+      setError(t("action.reasonRequired"));
       return;
     }
     setBusy(true);
@@ -86,55 +88,55 @@ export function ActionButton({
           <section className="modal command-modal" role="dialog" aria-modal="true" aria-label={label}>
             <div className="modal-head">
               <div>
-                <div className="eyebrow">操作流程</div>
+                <div className="eyebrow">{t("action.flow")}</div>
                 <h2>{label}</h2>
               </div>
-              <button className="icon-btn" type="button" onClick={() => setOpen(false)} aria-label="关闭"><X size={15} /></button>
+              <button className="icon-btn" type="button" onClick={() => setOpen(false)} aria-label={t("action.close")}><X size={15} /></button>
             </div>
             <div className="command-body">
               <div className="command-steps">
                 <div className={`command-step ${reason.trim() ? "done" : "active"}`}>
-                  <span>1</span><strong>填写原因</strong>
+                  <span>1</span><strong>{t("action.stepReason")}</strong>
                 </div>
                 <div className={`command-step ${result?.dry_run ? "done" : reason.trim() ? "active" : ""}`}>
-                  <span>2</span><strong>预演检查</strong>
+                  <span>2</span><strong>{t("action.stepDryRun")}</strong>
                 </div>
                 <div className={`command-step ${result && !result.dry_run && !result.error ? "done" : canConfirm ? "active" : ""}`}>
-                  <span>3</span><strong>确认执行</strong>
+                  <span>3</span><strong>{t("action.stepConfirm")}</strong>
                 </div>
               </div>
               <label className="form-field">
-                <span>操作原因</span>
-                <textarea value={reason} onChange={(event) => setReason(event.target.value)} rows={3} placeholder="说明本次操作原因" />
+                <span>{t("action.reason")}</span>
+                <textarea value={reason} onChange={(event) => setReason(event.target.value)} rows={3} placeholder={t("action.reasonPlaceholder")} />
               </label>
               <div className="command-preview">
-                <div className="preview-head"><FileJson size={14} /> 请求预览</div>
+                <div className="preview-head"><FileJson size={14} /> {t("action.requestPreview")}</div>
                 <JsonBlock value={JSON.stringify(previewPayload, null, 2)} />
               </div>
               {error && <Alert>{error}</Alert>}
               {result && (
                 <div className="result-box">
-                  <div className="result-title">
+                <div className="result-title">
                     {result.error ? <CircleAlert size={16} /> : <CheckCircle2 size={16} />}
-                  <strong>{result.message || result.error || "操作结果"}</strong>
+                  <strong>{result.message || result.error || t("action.result")}</strong>
                 </div>
-                <div className="result-line"><span>命令 ID</span><strong>{result.command_id}</strong></div>
-                <div className="result-line"><span>状态</span><strong>{result.status}</strong></div>
-                <div className="result-line"><span>预演</span><strong>{result.dry_run ? "是" : "否"}</strong></div>
+                <div className="result-line"><span>{t("action.commandID")}</span><strong>{result.command_id}</strong></div>
+                <div className="result-line"><span>{t("action.status")}</span><strong>{result.status}</strong></div>
+                <div className="result-line"><span>{t("action.dryRun")}</span><strong>{result.dry_run ? t("common.yes") : t("common.no")}</strong></div>
                   <div className="result-message">{result.message || result.error}</div>
                   {result.details && <JsonBlock value={JSON.stringify(result.details, null, 2)} />}
                 </div>
               )}
             </div>
             <div className="modal-actions">
-              <button className="btn" type="button" onClick={() => setOpen(false)}>关闭</button>
+              <button className="btn" type="button" onClick={() => setOpen(false)}>{t("common.close")}</button>
               <button className="btn icon-text" type="button" onClick={() => run(false)} disabled={busy}>
                 {busy ? <Loader2 size={15} className="spin" /> : <Play size={15} />}
-                {result ? "重新预演" : "先预演"}
+                {result ? t("action.runAgain") : t("action.runDry")}
               </button>
               <button className="btn danger icon-text" type="button" onClick={() => run(true)} disabled={busy || !canConfirm}>
                 <CheckCircle2 size={15} />
-                确认执行
+                {t("action.confirm")}
               </button>
             </div>
           </section>

cmd/telesrv-admin/web/src/components/AuthorizationTable.tsx

@@ -1,11 +1,13 @@
 import { Cable, LogOut, ShieldCheck } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { formatDate } from "../lib/format";
+import { useI18n } from "../i18n";
 import type { AuthorizationRow } from "../types";
 import { ActionButton } from "./ActionButton";
 import { EmptyRow } from "./ui";
 
 export function AuthorizationTable({ rows, userID, onDone }: { rows: AuthorizationRow[]; userID: number; onDone: () => void }) {
+  const { t } = useI18n();
   const [removedHashes, setRemovedHashes] = useState<Set<number>>(() => new Set());
 
   useEffect(() => {
@@ -28,11 +30,11 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
         <table className="data-table authorization-table">
           <thead>
             <tr>
-              <th>设备</th>
-              <th>平台</th>
-              <th>IP</th>
-              <th>最近活跃</th>
-              <th className="device-actions-head">操作</th>
+              <th>{t("auth.device")}</th>
+              <th>{t("auth.platform")}</th>
+              <th>{t("auth.ip")}</th>
+              <th>{t("auth.lastActive")}</th>
+              <th className="device-actions-head">{t("common.actions")}</th>
             </tr>
           </thead>
           <tbody>
@@ -45,7 +47,7 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
                 <td className="device-actions-cell">
                   <div className="device-actions">
                     <ActionButton
-                      label="撤销当前"
+                      label={t("auth.revokeCurrent")}
                       icon={<LogOut size={13} />}
                       compact
                       path="/api/actions/revoke-sessions"
@@ -53,7 +55,7 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
                       onDone={() => afterRevoke((previous) => new Set([...previous, row.Hash]))}
                     />
                     <ActionButton
-                      label="保留当前"
+                      label={t("auth.keepCurrent")}
                       icon={<ShieldCheck size={13} />}
                       compact
                       path="/api/actions/revoke-sessions"
@@ -70,7 +72,7 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
       </div>
       <div className="danger-zone">
         <ActionButton
-          label="撤销全部设备"
+          label={t("auth.revokeAll")}
           icon={<Cable size={15} />}
           path="/api/actions/revoke-sessions"
           payload={() => ({ user_id: userID, revoke_all: true })}

cmd/telesrv-admin/web/src/components/EntityPicker.tsx

@@ -1,6 +1,7 @@
 import { Check, Loader2, Search, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { api, errorMessage } from "../api";
+import { useI18n } from "../i18n";
 import { channelKind, displayName, displayPhone, displayUsername } from "../lib/format";
 import type { AccountRow, ChannelRow } from "../types";
 import { Badge } from "./ui";
@@ -14,6 +15,7 @@ export function UserPicker({
   value: AccountRow | null;
   onChange: (row: AccountRow | null) => void;
 }) {
+  const { t } = useI18n();
   const [query, setQuery] = useState("");
   const [rows, setRows] = useState<AccountRow[]>([]);
   const [busy, setBusy] = useState(false);
@@ -46,7 +48,7 @@ export function UserPicker({
         <span>{label}</span>
         {value ? (
           <button className="link-button" type="button" onClick={() => onChange(null)}>
-            <X size={13} /> 清除
+            <X size={13} /> {t("common.clear")}
           </button>
         ) : null}
       </div>
@@ -71,10 +73,10 @@ export function UserPicker({
               void search();
             }
           }}
-          placeholder="搜索 user_id / phone / username"
+          placeholder={t("picker.userPlaceholder")}
         />
         <button className="btn compact-btn" type="button" onClick={search} disabled={busy}>
-          {busy ? <Loader2 size={14} className="spin" /> : "搜索"}
+          {busy ? <Loader2 size={14} className="spin" /> : t("common.search")}
         </button>
       </div>
       {error && <div className="picker-error">{error}</div>}
@@ -89,10 +91,10 @@ export function UserPicker({
             <span className="mono">{row.ID}</span>
             <strong>{displayName(row)}</strong>
             <span>{displayUsername(row.Username) || displayPhone(row.Phone) || "-"}</span>
-            {row.Verified ? <Badge tone="good">认证</Badge> : <Badge>普通</Badge>}
+            {row.Verified ? <Badge tone="good">{t("picker.verified")}</Badge> : <Badge>{t("picker.regular")}</Badge>}
           </button>
         ))}
-        {rows.length === 0 && !busy ? <div className="picker-empty">无结果</div> : null}
+        {rows.length === 0 && !busy ? <div className="picker-empty">{t("common.noResults")}</div> : null}
       </div>
     </div>
   );
@@ -107,6 +109,7 @@ export function ChannelPicker({
   value: ChannelRow | null;
   onChange: (row: ChannelRow | null) => void;
 }) {
+  const { t } = useI18n();
   const [query, setQuery] = useState("");
   const [rows, setRows] = useState<ChannelRow[]>([]);
   const [busy, setBusy] = useState(false);
@@ -139,7 +142,7 @@ export function ChannelPicker({
         <span>{label}</span>
         {value ? (
           <button className="link-button" type="button" onClick={() => onChange(null)}>
-            <X size={13} /> 清除
+            <X size={13} /> {t("common.clear")}
           </button>
         ) : null}
       </div>
@@ -150,7 +153,7 @@ export function ChannelPicker({
             <strong>{value.Title || "-"}</strong>
             <span className="mono">{value.ID}</span>
           </div>
-          <span>{displayUsername(value.Username) || channelKind(value)}</span>
+          <span>{displayUsername(value.Username) || channelKind(value, t)}</span>
         </div>
       ) : null}
       <div className="picker-search">
@@ -164,10 +167,10 @@ export function ChannelPicker({
               void search();
             }
           }}
-          placeholder="搜索 channel_id / username / title"
+          placeholder={t("picker.channelPlaceholder")}
         />
         <button className="btn compact-btn" type="button" onClick={search} disabled={busy}>
-          {busy ? <Loader2 size={14} className="spin" /> : "搜索"}
+          {busy ? <Loader2 size={14} className="spin" /> : t("common.search")}
         </button>
       </div>
       {error && <div className="picker-error">{error}</div>}
@@ -181,11 +184,11 @@ export function ChannelPicker({
           >
             <span className="mono">{row.ID}</span>
             <strong>{row.Title || "-"}</strong>
-            <span>{displayUsername(row.Username) || channelKind(row)}</span>
-            {row.Verified ? <Badge tone="good">认证</Badge> : <Badge>{channelKind(row)}</Badge>}
+            <span>{displayUsername(row.Username) || channelKind(row, t)}</span>
+            {row.Verified ? <Badge tone="good">{t("picker.verified")}</Badge> : <Badge>{channelKind(row, t)}</Badge>}
           </button>
         ))}
-        {rows.length === 0 && !busy ? <div className="picker-empty">无结果</div> : null}
+        {rows.length === 0 && !busy ? <div className="picker-empty">{t("common.noResults")}</div> : null}
       </div>
     </div>
   );

cmd/telesrv-admin/web/src/components/Layout.tsx

@@ -11,17 +11,19 @@ import {
 } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
 import { api } from "../api";
+import { LanguageSwitch, useI18n } from "../i18n";
 import { type Navigate, type RouteState, routeSubtitle, routeTitle } from "../routing";
 import { AppLink } from "./AppLink";
 
 export function BootScreen() {
+  const { t } = useI18n();
   return (
     <div className="boot-screen">
       <div className="brand compact brand-elevated">
         <span className="brand-mark">T</span>
         <span>
           <strong>telesrv</strong>
-          <small>管理控制台</small>
+          <small>{t("app.adminConsole")}</small>
         </span>
       </div>
       <div className="loader-bar" />
@@ -42,6 +44,7 @@ export function Shell({
   onLogout: () => void;
   children: ReactNode;
 }) {
+  const { t } = useI18n();
   const messagesActive = route.path.startsWith("/messages");
   const [messagesOpen, setMessagesOpen] = useState(messagesActive);
 
@@ -63,14 +66,14 @@ export function Shell({
           <span className="brand-mark">T</span>
           <span>
             <strong>telesrv</strong>
-            <small>管理控制台</small>
+            <small>{t("app.adminConsole")}</small>
           </span>
         </AppLink>
-        <div className="sidebar-label">导航</div>
-        <nav className="nav-list" aria-label="主导航">
-          <NavLink icon={<LayoutDashboard size={16} />} href="/" route={route} navigate={navigate}>总览</NavLink>
-          <NavLink icon={<Users size={16} />} href="/accounts" route={route} navigate={navigate}>账号</NavLink>
-          <NavLink icon={<ShieldCheck size={16} />} href="/channels" route={route} navigate={navigate}>超级群/频道</NavLink>
+        <div className="sidebar-label">{t("layout.navigation")}</div>
+        <nav className="nav-list" aria-label={t("layout.primaryNav")}>
+          <NavLink icon={<LayoutDashboard size={16} />} href="/" route={route} navigate={navigate}>{t("layout.dashboard")}</NavLink>
+          <NavLink icon={<Users size={16} />} href="/accounts" route={route} navigate={navigate}>{t("layout.accounts")}</NavLink>
+          <NavLink icon={<ShieldCheck size={16} />} href="/channels" route={route} navigate={navigate}>{t("layout.channels")}</NavLink>
           <div className={`nav-section ${messagesActive ? "active" : ""} ${messagesOpen ? "open" : ""}`}>
             <button
               className="nav-section-toggle"
@@ -79,7 +82,7 @@ export function Shell({
               onClick={() => setMessagesOpen((open) => !open)}
             >
               <MessageSquareText size={16} />
-              <span>消息</span>
+              <span>{t("layout.messages")}</span>
               <ChevronDown className="nav-section-chevron" size={15} />
             </button>
             {messagesOpen && (
@@ -90,7 +93,7 @@ export function Shell({
                   navigate={navigate}
                   activeWhen={(path) => path === "/messages" || path === "/messages/detail" || path.startsWith("/messages/private")}
                 >
-                  私聊
+                  {t("layout.privateMessages")}
                 </NavLink>
                 <NavLink
                   href="/messages/groups"
@@ -98,29 +101,30 @@ export function Shell({
                   navigate={navigate}
                   activeWhen={(path) => path.startsWith("/messages/groups")}
                 >
-                  群聊
+                  {t("layout.groupMessages")}
                 </NavLink>
               </div>
             )}
           </div>
         </nav>
         <div className="sidebar-status">
-          <div className="sidebar-label">运行状态</div>
-          <div className="runtime-row"><Server size={14} /><span>管理后台</span><strong>就绪</strong></div>
-          <div className="runtime-row"><Database size={14} /><span>PG 读取</span><strong>只读</strong></div>
-          <div className="runtime-row"><Shield size={14} /><span>写操作</span><strong>预演</strong></div>
+          <div className="sidebar-label">{t("layout.runtime")}</div>
+          <div className="runtime-row"><Server size={14} /><span>{t("layout.adminBackend")}</span><strong>{t("layout.ready")}</strong></div>
+          <div className="runtime-row"><Database size={14} /><span>{t("layout.pgRead")}</span><strong>{t("layout.readOnly")}</strong></div>
+          <div className="runtime-row"><Shield size={14} /><span>{t("layout.writeOps")}</span><strong>{t("layout.dryRun")}</strong></div>
         </div>
       </aside>
       <div className="workspace">
         <header className="topbar">
           <div>
-            <div className="eyebrow">{routeSubtitle(route.path)}</div>
-            <h1>{routeTitle(route.path)}</h1>
+            <div className="eyebrow">{routeSubtitle(route.path, t)}</div>
+            <h1>{routeTitle(route.path, t)}</h1>
           </div>
           <div className="topbar-actions">
-            <span className="actor-pill">操作者：{actor}</span>
-            <button className="btn ghost icon-text" type="button" onClick={logout} title="退出">
-              <LogOut size={16} /> 退出
+            <LanguageSwitch />
+            <span className="actor-pill">{t("layout.actor", { actor })}</span>
+            <button className="btn ghost icon-text" type="button" onClick={logout} title={t("layout.logout")}>
+              <LogOut size={16} /> {t("layout.logout")}
             </button>
           </div>
         </header>

cmd/telesrv-admin/web/src/components/ui.tsx

@@ -1,5 +1,6 @@
 import { CircleAlert } from "lucide-react";
 import type { ReactNode } from "react";
+import { useI18n } from "../i18n";
 import { formatDate } from "../lib/format";
 import type { AuditLogRow } from "../types";
 
@@ -91,10 +92,11 @@ export function Summary({ label, value, mono = false }: { label: string; value:
 }
 
 export function AuditTable({ rows }: { rows: AuditLogRow[] }) {
+  const { t } = useI18n();
   return (
     <div className="table-wrap">
       <table className="data-table">
-        <thead><tr><th>ID</th><th>命令 ID</th><th>动作</th><th>操作者</th><th>状态</th><th>预演</th><th>原因</th><th>时间</th></tr></thead>
+        <thead><tr><th>{t("audit.id")}</th><th>{t("audit.commandID")}</th><th>{t("audit.action")}</th><th>{t("audit.actor")}</th><th>{t("audit.status")}</th><th>{t("audit.dryRun")}</th><th>{t("audit.reason")}</th><th>{t("audit.time")}</th></tr></thead>
         <tbody>
           {rows.map((row) => (
             <tr key={row.ID}>
@@ -103,7 +105,7 @@ export function AuditTable({ rows }: { rows: AuditLogRow[] }) {
               <td>{row.Action}</td>
               <td>{row.Actor}</td>
               <td>{row.Status}</td>
-              <td>{row.DryRun ? "是" : "否"}</td>
+              <td>{row.DryRun ? t("common.yes") : t("common.no")}</td>
               <td className="truncate">{row.Reason}</td>
               <td>{formatDate(row.CreatedAt)}</td>
             </tr>
@@ -116,7 +118,8 @@ export function AuditTable({ rows }: { rows: AuditLogRow[] }) {
 }
 
 export function EmptyRow({ colSpan }: { colSpan: number }) {
-  return <tr><td colSpan={colSpan} className="empty-cell">无结果</td></tr>;
+  const { t } = useI18n();
+  return <tr><td colSpan={colSpan} className="empty-cell">{t("common.noResults")}</td></tr>;
 }
 
 export function LoadingSurface({ label }: { label: string }) {