mirror of
https://github.com/aiclientproxy/proxycast.git
synced 2026-09-24 23:10:56 +08:00
421 lines
12 KiB
HTML
421 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Lime Browser Connector</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f7fafc;
|
|
--surface: #ffffff;
|
|
--surface-muted: #f8fafc;
|
|
--border: #dbe4f0;
|
|
--text: #0f172a;
|
|
--text-secondary: #475569;
|
|
--text-muted: #64748b;
|
|
--primary: #0f172a;
|
|
--primary-hover: #1e293b;
|
|
--primary-text: #ffffff;
|
|
--success-bg: #dcfce7;
|
|
--success-text: #166534;
|
|
--warning-bg: #fef3c7;
|
|
--warning-text: #92400e;
|
|
--neutral-bg: #e2e8f0;
|
|
--neutral-text: #475569;
|
|
--shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.35);
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
width: 380px;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 42%),
|
|
linear-gradient(180deg, #f8fbff 0%, var(--bg) 56%, #f4f8fb 100%);
|
|
padding: 14px;
|
|
}
|
|
.shell {
|
|
overflow: hidden;
|
|
border: 1px solid rgba(219, 228, 240, 0.92);
|
|
border-radius: 22px;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.hero {
|
|
padding: 16px 16px 12px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(240, 249, 255, 0.95) 0%,
|
|
rgba(255, 255, 255, 0.98) 52%,
|
|
rgba(236, 253, 245, 0.92) 100%
|
|
);
|
|
}
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(125, 211, 252, 0.5);
|
|
background: rgba(255, 255, 255, 0.92);
|
|
padding: 4px 10px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
color: #0369a1;
|
|
}
|
|
.hero h1 {
|
|
margin-top: 10px;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.hero p {
|
|
margin-top: 6px;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
}
|
|
.content {
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.card {
|
|
border: 1px solid rgba(219, 228, 240, 0.95);
|
|
border-radius: 18px;
|
|
background: var(--surface);
|
|
padding: 14px;
|
|
}
|
|
.card-muted {
|
|
background: var(--surface-muted);
|
|
}
|
|
.card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.card-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.card-desc {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--text-muted);
|
|
}
|
|
.status-grid {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
margin-top: 12px;
|
|
}
|
|
.status-tile {
|
|
border: 1px solid rgba(219, 228, 240, 0.95);
|
|
border-radius: 16px;
|
|
background: #ffffff;
|
|
padding: 12px;
|
|
}
|
|
.status-tile-label {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
.status-tile-value {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 58px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.badge-on {
|
|
background: var(--success-bg);
|
|
color: var(--success-text);
|
|
}
|
|
.badge-off {
|
|
background: var(--neutral-bg);
|
|
color: var(--neutral-text);
|
|
}
|
|
.badge-warn {
|
|
background: var(--warning-bg);
|
|
color: var(--warning-text);
|
|
}
|
|
.hint {
|
|
margin-top: 10px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(191, 219, 254, 0.92);
|
|
background: rgba(239, 246, 255, 0.92);
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: #1d4ed8;
|
|
}
|
|
.form-group {
|
|
margin-top: 12px;
|
|
}
|
|
.form-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 6px;
|
|
}
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 9px 11px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
font-size: 13px;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
color: var(--text);
|
|
background: #ffffff;
|
|
}
|
|
.form-input:focus {
|
|
border-color: #94a3b8;
|
|
}
|
|
.endpoint-preview {
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
color: var(--text-muted);
|
|
word-break: break-all;
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(226, 232, 240, 0.92);
|
|
}
|
|
.button-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
background: #ffffff;
|
|
color: var(--text-secondary);
|
|
}
|
|
.btn:hover:not(:disabled) {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
}
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: var(--primary-text);
|
|
border-color: var(--primary);
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
}
|
|
.btn-inline {
|
|
flex: 0 0 auto;
|
|
}
|
|
.page-info {
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(219, 228, 240, 0.95);
|
|
background: #ffffff;
|
|
padding: 14px;
|
|
}
|
|
.page-info-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 6px;
|
|
}
|
|
.page-info-url {
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
color: var(--text-muted);
|
|
word-break: break-all;
|
|
}
|
|
details {
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(219, 228, 240, 0.95);
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
summary {
|
|
list-style: none;
|
|
padding: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
}
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.summary-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.summary-desc {
|
|
margin-top: 4px;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
color: var(--text-muted);
|
|
}
|
|
.summary-indicator {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
color: var(--text-muted);
|
|
}
|
|
details[open] .summary-indicator {
|
|
transform: rotate(180deg);
|
|
}
|
|
.advanced-body {
|
|
padding: 0 14px 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<div class="hero">
|
|
<span class="eyebrow">BROWSER CONNECTOR</span>
|
|
<h1>Lime 浏览器连接器</h1>
|
|
<p>扩展安装、连接器开关与高级配置统一在 Lime 的“连接器”页里管理。</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<section class="card">
|
|
<div class="card-header">
|
|
<div>
|
|
<div class="card-title">当前状态</div>
|
|
<p class="card-desc">先看连接状态；未连通时优先打开 Lime 连接器页完成启用或重新同步。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-grid">
|
|
<div class="status-tile">
|
|
<div class="status-tile-label">Observer 连接</div>
|
|
<div class="status-tile-value">
|
|
<span id="bridgeStatus" class="badge badge-off">未连接</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-tile">
|
|
<div class="status-tile-label">页面监控</div>
|
|
<div class="status-tile-value">
|
|
<span id="monitorStatus" class="badge badge-off">关闭</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="statusHint" class="hint">
|
|
首次安装时，请先在 Lime 的“连接器”页里选择目录导出扩展，然后到 Chrome 扩展页加载已解压目录。
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="openConnectorPageBtn" class="btn btn-primary">
|
|
打开 Lime 连接器页
|
|
</button>
|
|
<button id="refreshStatusBtn" class="btn btn-inline">刷新状态</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="page-info">
|
|
<div class="page-info-title" id="pageTitle">无页面信息</div>
|
|
<div class="page-info-url" id="pageUrl">当前还没有收到最近页面快照。</div>
|
|
</section>
|
|
|
|
<details>
|
|
<summary>
|
|
<div>
|
|
<div class="summary-title">高级配置</div>
|
|
<div class="summary-desc">保留手动配置、手动重连、页面抓取和监控切换。只在自动配置失效或排查链路时使用。</div>
|
|
</div>
|
|
<span class="summary-indicator">⌄</span>
|
|
</summary>
|
|
|
|
<div class="advanced-body">
|
|
<section class="card card-muted">
|
|
<div class="card-title">快速处理</div>
|
|
<p class="card-desc">如果你刚从 Lime 复制了配置，可以直接粘贴到这里完成覆盖。</p>
|
|
<div class="button-group">
|
|
<button id="pasteConfigBtn" class="btn">粘贴配置</button>
|
|
<button id="clearConfigBtn" class="btn">清除配置</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="serverUrl">Server URL</label>
|
|
<input
|
|
type="text"
|
|
id="serverUrl"
|
|
class="form-input"
|
|
placeholder="ws://127.0.0.1:8999"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="bridgeKey">Bridge Key</label>
|
|
<input
|
|
type="text"
|
|
id="bridgeKey"
|
|
class="form-input"
|
|
placeholder="输入 Lime API Key"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="profileKey">Profile Key</label>
|
|
<input
|
|
type="text"
|
|
id="profileKey"
|
|
class="form-input"
|
|
placeholder="default"
|
|
/>
|
|
</div>
|
|
|
|
<div class="endpoint-preview" id="endpointPreview">
|
|
Observer URL: 未配置
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="saveBtn" class="btn btn-primary">保存并重连</button>
|
|
<button id="toggleConnBtn" class="btn">立即连接</button>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="toggleMonitorBtn" class="btn">关闭页面监控</button>
|
|
<button id="captureBtn" class="btn">立即抓取</button>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|