会剥离 X-Frame-Options / CSP 等嵌套限制头并
+// 注入 ，让相对资源解析回原站。详见 pkg/console/handlers_browser.go。
+//
+// 已知限制（iframe 固有，非 bug）：
+// - 父页面读不到 iframe 的 document.title，tab 标题只能用 host 占位；
+// - 强反点击劫持的外部大站（Google/GitHub 等 frame-ancestors 'none'）仍可能空白；
+// - 被嵌页面的 cookie/login 域与 console 不同源，需在 iframe 内自行登录。
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { T } from '../tokens';
+import { Icon } from '../icons';
+import { useBookmarks, useHistory, addBookmark, removeBookmark, addHistory, clearHistory, getAuthToken, probeDirectEmbed } from '../hooks/useApi';
+
+const MONO = { fontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace' };
+
+// ─── helpers ────────────────────────────────────────────────────
+
+function randId() {
+ return (crypto.randomUUID && crypto.randomUUID()) || String(Math.random()).slice(2);
+}
+
+function titleForUrl(url) {
+ if (!url) return '新标签页';
+ try { return new URL(url).host || url; } catch { return url; }
+}
+
+// 地址栏输入 → 可导航 URL：已带 scheme 原样；localhost/IP/含点号补 http://；其余补 https://。
+function normalizeUrl(input) {
+ const v = (input || '').trim();
+ if (!v) return '';
+ if (/^https?:\/\//i.test(v)) return v;
+ const looksLikeHost = /^(localhost|\[?[0-9a-fA-F:]+\]?|(\d{1,3}\.){3}\d{1,3})/.test(v) || v.includes('.');
+ return (looksLikeHost ? 'http://' : 'https://') + v;
+}
+
+// iframe 无法注入 Authorization header，所以通过 query token 鉴权
+// （auth.Middleware 支持 r.URL.Query().Get("token")，见 pkg/auth/auth.go）。
+function proxySrc(url) {
+ const t = getAuthToken();
+ return '/api/v1/browser/proxy?url=' + encodeURIComponent(url) + (t ? '&token=' + encodeURIComponent(t) : '');
+}
+
+function newTab(url = '') {
+ return {
+ id: randId(),
+ entries: url ? [url] : [],
+ index: url ? 0 : -1,
+ title: titleForUrl(url),
+ loading: !!url,
+ mode: 'direct', // 'direct'（iframe 直连原始 URL）| 'proxy'（走后端代理剥离嵌套限制头）
+ _nonce: randId(),
+ };
+}
+
+// ─── atoms ──────────────────────────────────────────────────────
+
+function IconBtn({ name, size = 16, stroke = 1.8, disabled, active, title, onClick, style }) {
+ return (
+
+ );
+}
+
+// ─── 主组件 ─────────────────────────────────────────────────────
+
+export default function BrowserFace() {
+ const { data: bookmarks, refresh: refreshBookmarks } = useBookmarks();
+ const { data: history, refresh: refreshHistory } = useHistory();
+
+ const [tabs, setTabs] = useState(() => [newTab()]);
+ const [activeId, setActiveId] = useState(() => tabs[0].id);
+ const [address, setAddress] = useState('');
+ const [panel, setPanel] = useState(null); // null | 'bookmarks' | 'history'
+ const [compact, setCompact] = useState(true); // true=标签条与地址栏合并成一行；false=两行（Chrome 标准）
+
+ const active = useMemo(() => tabs.find(t => t.id === activeId) || tabs[0], [tabs, activeId]);
+ const currentUrl = active && active.index >= 0 ? active.entries[active.index] : '';
+
+ // 切换 tab 或导航后，地址栏同步到当前 URL
+ useEffect(() => { setAddress(currentUrl); }, [activeId, currentUrl]);
+
+ // ─── tab 状态更新（index 游标，避免后退分叉） ───────────────
+ const patchTab = useCallback((id, fn) => {
+ setTabs(ts => ts.map(t => (t.id === id ? fn(t) : t)));
+ }, []);
+
+ const navigate = useCallback((url) => {
+ if (!url) return;
+ patchTab(active.id, t => {
+ const next = t.entries.slice(0, t.index + 1); // 截断分叉
+ next.push(url);
+ return { ...t, entries: next, index: next.length - 1, title: titleForUrl(url), loading: true, mode: 'direct', _nonce: randId() };
+ });
+ addHistory(url, titleForUrl(url)).then(refreshHistory);
+ setPanel(null);
+ }, [active.id, patchTab, refreshHistory]);
+
+ const commitAddress = useCallback(() => {
+ const u = normalizeUrl(address);
+ if (u) { setAddress(u); navigate(u); }
+ }, [address, navigate]);
+
+ const goBack = useCallback(() => {
+ patchTab(active.id, t => t.index > 0 ? { ...t, index: t.index - 1, loading: true, mode: 'direct', _nonce: randId() } : t);
+ }, [active.id, patchTab]);
+ const goFwd = useCallback(() => {
+ patchTab(active.id, t => t.index < t.entries.length - 1 ? { ...t, index: t.index + 1, loading: true, mode: 'direct', _nonce: randId() } : t);
+ }, [active.id, patchTab]);
+ const reload = useCallback(() => {
+ patchTab(active.id, t => ({ ...t, loading: true, _nonce: randId() }));
+ }, [active.id, patchTab]);
+ const goHome = useCallback(() => {
+ patchTab(active.id, t => ({ ...t, entries: [], index: -1, title: '新标签页', loading: false }));
+ setAddress('');
+ }, [active.id, patchTab]);
+
+ // 智能混合：导航乐观直连（mode='direct'），后台 probe 检测目标是否禁止 iframe 嵌套，
+ // 设了 X-Frame-Options / frame-ancestors 才切到代理（mode='proxy'）。
+ // 前端无法自行检测 iframe 是否被拒（同源策略），所以这步放后端 HEAD 探。
+ useEffect(() => {
+ if (!active || !currentUrl) return;
+ const tabId = active.id;
+ const url = currentUrl;
+ probeDirectEmbed(url).then(res => {
+ if (res && !res.direct) {
+ // 防竞态：仅当该 tab 当前仍指向同一 url 时才切代理
+ patchTab(tabId, t => (t.entries[t.index] === url ? { ...t, mode: 'proxy' } : t));
+ }
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [active?.id, currentUrl]);
+
+ const closeTab = useCallback((id, e) => {
+ if (e) e.stopPropagation();
+ setTabs(ts => {
+ const filtered = ts.filter(t => t.id !== id);
+ const next = filtered.length ? filtered : [newTab()];
+ if (id === activeId) setActiveId(next[next.length - 1].id);
+ return next;
+ });
+ }, [activeId]);
+
+ const openNewTab = useCallback((url = '') => {
+ const t = newTab(url);
+ setTabs(ts => [...ts, t]);
+ setActiveId(t.id);
+ }, []);
+
+ const canBack = active && active.index > 0;
+ const canFwd = active && active.index < active.entries.length - 1;
+
+ // ─── 书签 ─────────────────────────────────────────────────────
+ const isBookmarked = useMemo(
+ () => !!currentUrl && (bookmarks || []).some(b => b.url === currentUrl),
+ [bookmarks, currentUrl]
+ );
+ const toggleBookmark = useCallback(async () => {
+ if (!currentUrl) return;
+ const existing = (bookmarks || []).find(b => b.url === currentUrl);
+ if (existing) {
+ await removeBookmark(existing.id);
+ } else {
+ await addBookmark(titleForUrl(currentUrl), currentUrl);
+ }
+ refreshBookmarks();
+ }, [currentUrl, bookmarks, refreshBookmarks]);
+
+ const onClearHistory = useCallback(async () => {
+ await clearHistory();
+ refreshHistory();
+ }, [refreshHistory]);
+
+ // 标签条内容（compact 与两行布局共用）
+ const tabsStrip = (
+ <>
+ {tabs.map(t => {
+ const isActive = t.id === activeId;
+ return (
+ setActiveId(t.id)} className="edge-press"
+ style={{
+ display: 'flex', alignItems: 'center', gap: 6, height: 30,
+ padding: '0 6px 0 10px', borderRadius: T.radius.md,
+ // 合并态整行是 surface，active tab 用 surfaceAlt 凸显；两行态反过来
+ background: isActive ? (compact ? T.surfaceAlt : T.surface) : 'transparent',
+ border: `1px solid ${isActive ? T.border : 'transparent'}`,
+ fontSize: 12, color: T.ink, whiteSpace: 'nowrap', cursor: 'pointer',
+ flexShrink: 0, maxWidth: 220,
+ }}>
+
+ {t.title}
+
+
+ );
+ })}
+
+
+ );
+
+ // 工具条内容：导航 + 地址栏 + 书签/历史 + 布局开关
+ const toolbarControls = (
+ <>
+
+
+
+
+
+
+ setAddress(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter') commitAddress(); }}
+ placeholder="输入网址（如 192.168.1.10:3000 或 example.com）"
+ spellCheck={false}
+ style={{ flex: 1, border: 'none', background: 'transparent', outline: 'none', fontSize: 12.5, color: T.ink, ...MONO }}
+ />
+ {active && active.loading && (
+
+ )}
+
+
+ setPanel(p => p === 'history' ? null : 'history')} />
+ setCompact(c => !c)} />
+
+ );
+
+ return (
+
+ {/* ─── 标签条 + 工具条（compact 合并为一行 / 两行 Chrome 标准）─── */}
+ {compact ? (
+
+ {/* tabs 区：限宽 + 横向滚动，多 tab 不挤掉地址栏 */}
+
+ {tabsStrip}
+
+ {/* 工具条区：地址栏 flex:1 占余 */}
+
+ {toolbarControls}
+
+
+ ) : (
+ <>
+
+ {tabsStrip}
+
+
+ {toolbarControls}
+
+
+ )}
+
+ {/* ─── 内容区 ─── */}
+ {currentUrl ? (
+