opc/cdp_hub
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add settings page visual boundaries

Browse Source
This commit is contained in:
QiuSW
2026-07-26 17:42:40 +08:00
parent eeaf4c7826
commit 45ea8f3194
5 changed files with 197 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/ui/browser-manager.html
+13 -7
View File
@@ -174,16 +174,22 @@
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 30; max-width: min(420px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); color: var(--text); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.page-hidden { display: none !important; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 18px; }
.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 22px; display: grid; gap: 20px; }
.settings-workspace { padding: 16px; border: 1px solid var(--line); border-radius: calc(var(--radius-card) + 2px); background: var(--surface-2); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 16px; }
.settings-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 20px; display: grid; gap: 16px; }
.settings-card h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.settings-card > p { margin: -12px 0 0; color: var(--muted); line-height: 1.5; }
.settings-card > p { margin: -10px 0 0; color: var(--muted); line-height: 1.5; }
.settings-card .form-section, .settings-card .setting-list { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.settings-card .form-section { gap: 12px; }
.settings-card .field { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.settings-card .field:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.settings-card .check-line { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.path-field { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; min-height: 38px; }
.radio-row label { font-weight: 500; display: inline-flex; gap: 7px; align-items: center; }
.settings-status { min-height: 42px; padding: 11px 12px; border-radius: 9px; background: var(--success-soft); color: var(--success); font-size: 12px; line-height: 1.45; }
.settings-status { min-height: 42px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--line)); border-radius: 9px; background: var(--success-soft); color: var(--success); font-size: 12px; line-height: 1.45; }
.settings-status.warning { background: var(--warning-soft); color: var(--warning); }
.settings-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 18px; }
.settings-actions { display: flex; justify-content: flex-end; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 12px; }
.setting-list { display: grid; gap: 12px; }
.setting-list .detail-line { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.setting-list .detail-line:last-child { border-bottom: 0; padding-bottom: 0; }
@@ -253,7 +259,7 @@
</section>
</section>
<section class="content page-hidden" id="settingsPage" aria-label="应用设置">
<div class="settings-grid">
<div class="settings-workspace"><div class="settings-grid">
<form class="settings-card" id="settingsForm">
<div><h2>浏览器与目录</h2><p>这些设置用于新建实例的默认值；已有实例的配置不会被静默修改。</p></div>
<div class="form-section"><h3>浏览器路径</h3>
@@ -268,7 +274,7 @@
<div class="settings-actions"><button type="button" class="secondary" id="discardSettings">取消</button><button type="submit" class="primary">保存设置</button></div>
</form>
<aside class="settings-card"><div><h2>运行行为</h2><p>影响后续启动和应用关闭时的默认行为。</p></div><div class="setting-list"><label class="check-line"><input type="checkbox" id="closeOnExit"><span><b>退出 Chub 时关闭本工具启动的实例</b><br><small class="help">默认关闭。不会影响外部浏览器。</small></span></label><div class="field"><label for="remoteDebugPort">远程调试起始端口</label><input id="remoteDebugPort" type="number" min="1024" max="65535" value="9666" inputmode="numeric"><small>留空时使用 9666。启动实例仅绑定 127.0.0.1；端口被占用时顺序尝试下一个可用端口。</small></div><div class="settings-status" id="settingsStatus">设置已保存 · 最后更新：刚刚</div></div></aside>
</div>
</div></div>
</section>
</main>
</div>