-
- );
-};
-
-export default App;
-```
-
-### 选项页面
-
-```html
-
-
-
-
-
-
- 代理切换器
-
-
- );
-};
-
-export default App;
-```
-
-### 内容脚本
-
-```typescript
-// entrypoints/content.ts
-import { defineContentScript } from 'wxt/content-script';
-
-export default defineContentScript({
- matches: ['代理管理器设置
- -
- {proxies.map(proxy => (
-
-
-
- {proxy.name} ({proxy.protocol}://{proxy.host}:{proxy.port})
-
-
- ))}
-
-
- 添加新代理
- setNewProxy({...newProxy, name: e.target.value})} - /> - - setNewProxy({...newProxy, host: e.target.value})} - /> - setNewProxy({...newProxy, port: e.target.value})} - /> - -
- {proxies.map(proxy => (
-
- );
- };
-
- export default ProxySelector;
- ```
-
-3. **类型安全**: 为所有对象定义TypeScript接口。
-
- ```typescript
- // types/index.ts
- export interface Proxy {
- id: string;
- name: string;
- protocol: 'http' | 'https' | 'socks4' | 'socks5';
- host: string;
- port: string;
- username?: string;
- password?: string;
- }
-
- export interface ProxyRule {
- id: string;
- name: string;
- pattern: string;
- proxyId: string;
- }
- ```
-
-4. **使用环境变量**: 为不同环境配置不同的设置。
-
- ```typescript
- // wxt.config.ts
- import { defineConfig } from 'wxt';
-
- export default defineConfig({
- manifest: {
- name: process.env.NODE_ENV === 'development' ? '[DEV] 代理切换器' : '代理切换器',
- version: '1.0.0',
- description: '一个强大的浏览器代理管理扩展',
- },
- // 其他配置...
- });
- ```
-
-5. **消息通信**: 使用结构化消息系统。
-
- ```typescript
- // utils/messaging.ts
- export type MessageType =
- | { type: 'SWITCH_PROXY'; proxyId: string }
- | { type: 'GET_CURRENT_PROXY' }
- | { type: 'PROXY_CHANGED'; proxyId: string };
-
- export function sendMessage onChange(proxy.id)}
- >
- {proxy.name}
-
- ))}
- Strict CSP Page
Authenticated Security Console
Local page for extension UI and main-world execution verification.
加载中...
;
- }
-
- return (
-
-
- );
-};
diff --git a/src/components/brand/Brand.tsx b/src/components/brand/Brand.tsx
new file mode 100644
index 0000000..370a8ec
--- /dev/null
+++ b/src/components/brand/Brand.tsx
@@ -0,0 +1,21 @@
+import { cn } from '@/lib/cn';
+
+export function YakMark({ className, alt = 'Yak' }: { className?: string; alt?: string }) {
+ return 
;
+}
+
+export function YakitMark({ className }: { className?: string }) {
+ return 
;
+}
+
+export function ProductBrand({ compact = false, className }: { compact?: boolean; className?: string }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..0d2c1a5
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export function Badge({ className, ...props }: HTMLAttributes{error}
;
+ if (!initial) return 正在加载
;
+ return (
+ -
-
- 
-
-
- 还没有添加任何代理
- - ), - }} - renderItem={(proxy) => ( -
+
+
+ {runtime.actions.length === 0 ?
+
+ {loading ? 还没有操作记录。 :
;
}
+
+function Overview({ state, bridge, tab, navigate, run, busy }: { state: ExtensionState; bridge: BridgeStatus; tab?: ActiveTabInfo; navigate: (value: Section) => void; run: (task: () => PromiseAgent 操作时间线
实时动作保存在浏览器 session；长期审计只保存脱敏摘要，不记录参数、页面内容、Cookie 或执行结果。
当前任务{runtime.taskId || '未共享'}{runtime.grantId ? `Grant ${runtime.grantId.slice(0, 8)}` : '没有活动授权'}
最近更新{new Date(runtime.updatedAt).toLocaleTimeString()}{runtime.actions.length} 条 session 动作
{runtime.state === 'running' || runtime.state === 'waiting_for_human' ? : runtime.state === 'paused' ? : null}{runtime.grantId && !['revoked', 'expired'].includes(runtime.state) && }
当前 session 尚无 Agent 能力调用。
: {[...runtime.actions].reverse().slice(0, 50).map((action) => )}
}
+ {action.method}{action.targetTabId ? `Tab ${action.targetTabId}` : '扩展本机'}{action.state}{action.durationMs === undefined ? '进行中' : `${action.durationMs} ms`}持久化脱敏审计
最近 500 条授权、Bridge、接管与能力结果。
+
}
+ 时间类型动作目标 / 摘要结果耗时
+ {events.map((event) =>
+
+ {AUDIT_CATEGORY_LABELS[event.category]}
+
)}
+ {event.action}
+ {event.summary || (event.targetTabId ? `标签页 ${event.targetTabId}` : event.taskId ? `任务 ${event.taskId}` : '扩展本机')}
+ {AUDIT_OUTCOME_LABELS[event.outcome]}
+ {event.durationMs === undefined ? '—' : `${event.durationMs} ms`}
+
+
;
+}
+
+function ProxyProfiles({ state, setState, run, busy }: { state: ExtensionState; setState: (state: ExtensionState) => void; run: (task: () => Promise运行概览
{tab?.title || '选择一个 HTTP(S) 标签页，建立浏览器现场。'}
+
+
+ 浏览器现场{loginContext ? `${loginContext.document?.forms.length || 0} 表单 / ${loginContext.document?.interactive.length || 0} 节点` : '尚未采集'}{loginContext?.authentication.evidence[0] || 'Cookie、Storage 与认证信号仅在用户点击后读取'}
+ 代理与流量{activeProxy}{network?.active ? `${network.count} 条请求，${network.droppedCount} 条丢弃` : `${state.proxyRules.filter((rule) => rule.enabled).length} 条分流规则 · 捕获未启动`}
+ Agent 会话{state.activeGrant ? `${isControlScopeSet(state.activeGrant.scopes) ? '控制' : '只读'} · ${runtime.state}` : '未共享'}{state.activeGrant ? `${state.activeGrant.targets.length} 个 frame · ${new Date(state.activeGrant.expiresAt).toLocaleTimeString()} 到期` : '创建 task-bound grant 后才允许远程读取'}
+ 需要用户处理{state.handoff?.state === 'waiting_for_user' ? HANDOFF_REASON_LABELS[state.handoff.reason] : runtime.state === 'paused' ? 'Agent 已暂停' : '没有待办步骤'}{state.handoff?.state === 'waiting_for_user' ? state.handoff.message : latestAction ? `最近 ${latestAction.method} · ${latestAction.state}` : '二维码、MFA 与 CAPTCHA 会在这里出现'}
+
+
+
+
+
+
+
+
+
+
+ 代理配置
固定代理、SOCKS、PAC 与会话级认证出口。
{state.proxyProfiles.map((profile) => )}
+ {draft ? <>
+
+
{draft.builtin ? '内置代理' : '编辑代理'}
{draft.id}
+ setDraft({ ...draft, name: event.target.value })} />
+ setDraft({ ...draft, host: event.target.value })} /> setDraft({ ...draft, port: Number(event.target.value) })} />