gavin/remoteconn-gitea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
douboer
2026-03-21 18:57:10 +08:00
commit c49aa1a5e9
570 changed files with 107167 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
prototype/README.md Normal file
View File

@@ -0,0 +1,54 @@
# RemoteConn 全功能原型（PLAN 落地版）
## 已实现能力
- 会话状态机：`idle / connecting / auth_pending / connected / reconnecting / disconnected / error`。
- 多服务器管理：新增、编辑、删除、全选、搜索、排序、连接测试。
- 认证管理：密码 / 私钥 / 证书三种认证动态表单，凭据以 `credentialRef` 方式管理。
- 主机指纹策略：严格校验、首次信任、每次手动确认（known_hosts）。
- 终端交互：模拟 SSH 传输层、命令发送、清屏、延迟展示、断线重连。
- Codex 模式编排：`cd <目录> -> command -v codex -> codex --sandbox ...`。
- 日志体系：
- 会话日志 `SessionLog`（状态、耗时、命令标记、错误、延迟采样）。
- 日志筛选（服务器/状态/日期）与脱敏导出。
- 主题引擎：字体/字号/行高、液态透明度、背景模糊、动效速度、WCAG 对比度提示与自动优化。
- 插件系统 MVP：
- 插件包导入/导出（JSON）。
- manifest 校验（id/semver/权限白名单）。
- 生命周期 `onload/onunload`。
- 插件 API（commands/session/storage/ui/logger）。
- 插件命令渲染到终端页命令条。
- 单插件错误隔离与熔断计数。
## 文件说明
- `liquid-console.html`：四个主窗口（连接、设置、终端、日志）与三个 dialog（Codex、快照、主机指纹）。
- `liquid-console.css`：液态视觉、弹性布局、会话状态样式、插件与日志界面样式。
- `liquid-console.js`：完整业务逻辑（状态机、主题、日志、插件运行时、传输抽象）。
## 使用方式
1. 打开页面：`/prototype/liquid-console.html`。
2. 默认首页为连接页，选择服务器后点击“连接”。
3. 连接后可在终端页执行命令或启动 Codex。
4. 设置页支持主题、安全策略和插件管理。
5. 日志页支持筛选并导出脱敏文本。
## 插件包格式
```json
{
"manifest": {
"id": "codex-shortcuts",
"name": "Codex Shortcuts",
"version": "0.1.0",
"minAppVersion": "0.1.0",
"description": "提供常用 Codex 快捷命令",
"entry": "main.js",
"style": "styles.css",
"permissions": ["commands.register", "session.read", "session.write", "ui.notice"]
},
"mainJs": "module.exports = { onload(ctx) { ... } }",
"stylesCss": ".command-chip { ... }"
}
```
## 说明
- 当前仓库是可交互原型，传输层使用 MockTransport。
- 已保留 `TerminalTransport` 抽象接口形态，后续可替换为 iOS Native SSH / WSS Gateway。

868
prototype/liquid-console.css Normal file
View File

@@ -0,0 +1,868 @@
:root {
--bg: #192b4d;
--surface: rgba(20, 32, 56, 0.78);
--surface-border: rgba(118, 156, 213, 0.2);
--bottom-bar: #1b335d;
--text: #e6f0ff;
--muted: #9cb1cf;
--accent: #67d1ff;
--danger: #ff7f92;
--success: #79f3bd;
--warn: #ffcf88;
--console: #000;
--blur-radius: 22px;
--motion-duration: 14s;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
color: var(--text);
font-family: "Outfit", "PingFang SC", "Helvetica Neue", "SF Pro Text", "Noto Sans SC", sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: radial-gradient(circle at 18% 8%, rgba(70, 126, 218, 0.8) 0%, #142542 52%, #0b182e 100%);
overflow: hidden;
}
body::before,
body::after {
content: "";
position: fixed;
inset: -20% auto auto -20%;
width: 60vmax;
height: 60vmax;
border-radius: 50%;
background: radial-gradient(circle, rgba(94, 190, 255, 0.18) 0%, rgba(94, 190, 255, 0.02) 65%);
filter: blur(20px);
animation: liquidShift var(--motion-duration) ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
body::after {
inset: auto -20% -24% auto;
animation-delay: -5s;
background: radial-gradient(circle, rgba(87, 255, 200, 0.14) 0%, rgba(87, 255, 200, 0.02) 65%);
}
@keyframes liquidShift {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(12px, -18px, 0) scale(1.08);
}
}
.phone-shell {
position: relative;
z-index: 1;
width: min(100%, 430px);
min-width: 320px;
height: min(100dvh - 20px, 960px);
max-height: 100dvh;
background: rgba(21, 38, 69, 0.92);
border: 1px solid rgba(0, 0, 0, 0.42);
border-radius: 36px;
overflow: hidden;
box-shadow: 0 36px 84px -48px rgba(0, 0, 0, 0.78);
backdrop-filter: blur(var(--blur-radius));
}
.screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
}
.screen.is-active {
opacity: 1;
pointer-events: auto;
}
.title-row {
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
.title-row h1,
.title-btn {
margin: 0;
font-size: 30px;
line-height: 1;
transform: scale(0.53);
transform-origin: right center;
color: var(--text);
}
.title-btn {
border: 0;
background: transparent;
cursor: pointer;
font-weight: 600;
padding: 0;
}
.title-actions {
display: flex;
align-items: center;
}
.manager-actions {
width: 86px;
justify-content: space-between;
}
.config-actions,
.log-actions {
width: 24px;
justify-content: flex-start;
}
.console-actions {
width: 96px;
justify-content: space-between;
}
.inline-actions {
display: flex;
align-items: center;
}
.console-inline-actions {
width: 56px;
justify-content: space-between;
}
.icon-btn {
width: 24px;
height: 24px;
border: 0;
border-radius: 999px;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.95;
}
.icon-btn:hover {
background: rgba(110, 154, 216, 0.2);
}
.icon-btn img {
width: 22px;
height: 22px;
}
.screen-content {
flex: 1;
min-height: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.surface {
background: var(--surface);
border-top: 1px solid var(--surface-border);
border-bottom: 1px solid var(--surface-border);
min-height: 0;
display: flex;
flex-direction: column;
padding: 10px 12px;
}
.surface-split {
flex: 1;
}
.single-surface .surface {
flex: 1;
}
.surface-head {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.surface-head-stack {
flex-direction: column;
}
.inline-form {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.field-grid {
display: grid;
gap: 8px;
}
.two-col {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.three-col {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
input,
select,
textarea {
width: 100%;
min-height: 32px;
border: 1px solid rgba(126, 170, 229, 0.28);
border-radius: 8px;
background: rgba(13, 25, 43, 0.72);
color: var(--text);
font-size: 13px;
padding: 0 10px;
}
textarea {
min-height: 120px;
resize: vertical;
padding: 8px 10px;
font-family: "JetBrains Mono", "Fira Code", monospace;
line-height: 1.4;
}
input[type="checkbox"] {
width: 16px;
height: 16px;
min-height: 16px;
}
input[type="color"] {
padding: 2px;
min-height: 32px;
}
.field {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
}
.field > span {
color: var(--muted);
font-size: 12px;
}
.checkbox-field {
flex-direction: row;
align-items: center;
}
.hint-text {
margin: 4px 0 0;
color: var(--muted);
font-size: 12px;
}
.tabs {
display: flex;
gap: 8px;
margin-bottom: 8px;
overflow-x: auto;
}
.tab-btn {
border: 1px solid rgba(125, 171, 233, 0.34);
border-radius: 999px;
background: rgba(13, 25, 43, 0.65);
color: var(--muted);
font-size: 12px;
padding: 6px 12px;
cursor: pointer;
white-space: nowrap;
}
.tab-btn.is-active {
color: #04253d;
background: linear-gradient(135deg, #71e8ff, #84ffd6);
border-color: rgba(132, 255, 214, 0.7);
}
.tab-pane {
display: none;
}
.tab-pane.is-active {
display: block;
}
.server-list {
flex: 1;
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 2px;
}
.server-item {
border: 1px solid rgba(119, 165, 228, 0.35);
border-radius: 12px;
background: rgba(15, 29, 49, 0.8);
padding: 10px;
cursor: pointer;
}
.server-item.is-active {
border-color: rgba(115, 234, 255, 0.76);
}
.server-item-top {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 6px;
}
.server-item-meta {
color: var(--muted);
font-size: 12px;
}
.server-item-check {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--muted);
font-size: 11px;
margin-top: 8px;
}
.form-scroll {
flex: 1;
min-height: 0;
overflow: auto;
padding-right: 2px;
}
.auth-fields {
margin-top: 10px;
}
.primary-btn,
.text-btn,
.ghost-btn {
border: 0;
border-radius: 9px;
min-height: 32px;
height: 32px;
padding: 0 12px;
cursor: pointer;
font-size: 12px;
}
.primary-btn {
background: linear-gradient(135deg, #70e8ff, #56c7ff);
color: #03213a;
flex: 1;
}
.text-btn {
background: rgba(108, 164, 238, 0.24);
color: var(--text);
}
.ghost-btn {
background: rgba(108, 164, 238, 0.14);
color: var(--text);
}
.session-bar {
padding: 0 12px 8px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.state-pill,
.latency-chip {
height: 24px;
border-radius: 999px;
padding: 0 10px;
display: inline-flex;
align-items: center;
font-size: 11px;
border: 1px solid rgba(146, 189, 247, 0.3);
background: rgba(11, 21, 36, 0.7);
}
.state-idle {
color: var(--muted);
}
.state-connecting,
.state-auth_pending,
.state-reconnecting {
color: var(--warn);
}
.state-connected {
color: var(--success);
}
.state-disconnected,
.state-error {
color: var(--danger);
}
.plugin-command-bar {
min-height: 0;
max-height: 72px;
overflow: auto;
display: flex;
gap: 8px;
padding: 0 12px 8px;
align-items: center;
}
.command-chip {
border: 1px solid rgba(122, 177, 240, 0.35);
border-radius: 999px;
background: rgba(13, 25, 43, 0.75);
color: var(--text);
font-size: 11px;
padding: 4px 10px;
cursor: pointer;
white-space: nowrap;
}
.console-surface {
padding: 0;
background: #000;
}
.log-surface {
padding: 0;
}
.terminal-output {
margin: 0;
flex: 1;
min-height: 0;
overflow: auto;
color: #d9f2ff;
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 13px;
line-height: 1.55;
padding: 12px;
white-space: pre-wrap;
}
.terminal-composer {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
padding: 8px;
border-top: 1px solid rgba(95, 143, 207, 0.3);
background: rgba(6, 12, 22, 0.94);
}
.log-filter-row {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
padding: 10px;
border-bottom: 1px solid rgba(124, 170, 233, 0.25);
}
.session-log-list {
flex: 1;
min-height: 0;
overflow: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.session-log-item {
border: 1px solid rgba(124, 170, 233, 0.25);
border-radius: 10px;
padding: 8px;
background: rgba(10, 19, 34, 0.72);
cursor: pointer;
}
.session-log-item.is-active {
border-color: rgba(116, 228, 255, 0.76);
}
.session-log-title {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-bottom: 4px;
}
.session-log-meta {
color: var(--muted);
font-size: 11px;
}
.session-log-detail {
min-height: 150px;
max-height: 34%;
margin: 0;
border-top: 1px solid rgba(124, 170, 233, 0.22);
padding: 10px;
overflow: auto;
font-size: 12px;
line-height: 1.45;
background: rgba(8, 16, 30, 0.84);
}
.plugin-toolbar {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.plugin-list {
max-height: 240px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
.plugin-item {
border: 1px solid rgba(124, 170, 233, 0.28);
border-radius: 10px;
background: rgba(10, 19, 34, 0.72);
padding: 8px;
}
.plugin-item-top {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.plugin-item-title {
font-size: 12px;
font-weight: 600;
}
.plugin-item-meta {
font-size: 11px;
color: var(--muted);
}
.plugin-item-actions {
margin-top: 8px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.plugin-runtime h4 {
margin: 0 0 8px;
font-size: 12px;
color: var(--muted);
}
.bottom-bar {
min-height: 54px;
height: 54px;
background: var(--bottom-bar);
border-top: 1px solid rgba(120, 162, 222, 0.22);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px 0 16px;
}
.bottom-actions {
display: flex;
}
.manager-bottom-actions {
width: 60px;
justify-content: space-between;
}
.config-bottom-actions {
width: 58px;
justify-content: space-between;
}
.console-bottom-actions {
width: 98px;
justify-content: space-between;
}
.modal {
width: min(90vw, 380px);
border: 1px solid rgba(120, 162, 222, 0.35);
border-radius: 14px;
padding: 14px;
background: #132441;
color: var(--text);
}
.modal::backdrop {
background: rgba(3, 8, 16, 0.62);
}
.modal h3 {
margin: 0 0 10px;
font-size: 16px;
}
.modal p {
margin: 0 0 10px;
color: var(--muted);
font-size: 13px;
}
.modal-actions {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.modal-snapshot,
.log-box {
max-height: 280px;
overflow: auto;
padding: 10px;
margin: 0 0 10px;
border-radius: 10px;
border: 1px solid rgba(124, 170, 233, 0.28);
background: rgba(8, 16, 30, 0.8);
color: #d3e9ff;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
}
.log-box {
margin: 0;
}
.log-box p {
margin: 0 0 8px;
}
.log-box p:last-child {
margin-bottom: 0;
}
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(8px);
background: rgba(10, 19, 34, 0.92);
border: 1px solid rgba(122, 168, 230, 0.3);
color: var(--text);
padding: 8px 12px;
border-radius: 10px;
font-size: 12px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 9999;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* 默认隐藏滚动条，悬浮或聚焦滚动容器时显示。 */
.hover-scroll {
scrollbar-width: none;
-ms-overflow-style: none;
}
.hover-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
.hover-scroll:hover,
.hover-scroll:focus,
.hover-scroll:focus-within {
scrollbar-width: thin;
scrollbar-color: rgba(137, 198, 255, 0.52) transparent;
}
.hover-scroll:hover::-webkit-scrollbar,
.hover-scroll:focus::-webkit-scrollbar,
.hover-scroll:focus-within::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.hover-scroll:hover::-webkit-scrollbar-thumb,
.hover-scroll:focus::-webkit-scrollbar-thumb,
.hover-scroll:focus-within::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(137, 198, 255, 0.52);
}
@media (min-width: 768px) and (max-width: 1279px) {
body {
padding: 24px;
}
.phone-shell {
width: min(100%, 980px);
height: min(100dvh - 48px, 920px);
border-radius: 28px;
}
.screen[data-screen="servermanager"] .screen-content {
display: grid;
grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
gap: 16px;
padding: 0 16px 12px;
}
.screen[data-screen="servermanager"] .surface-split {
min-height: 0;
border: 1px solid var(--surface-border);
border-radius: 14px;
}
.screen[data-screen="config"] .screen-content,
.screen[data-screen="console"] .screen-content,
.screen[data-screen="log"] .screen-content {
padding: 0 16px 12px;
}
.screen[data-screen="config"] .surface,
.screen[data-screen="console"] .surface,
.screen[data-screen="log"] .surface {
border: 1px solid var(--surface-border);
border-radius: 14px;
}
.log-filter-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) {
body {
padding: 28px;
}
.phone-shell {
width: min(96vw, 1320px);
height: min(100dvh - 56px, 940px);
border-radius: 24px;
}
.title-row {
padding-inline: 24px;
}
.screen[data-screen="servermanager"] .screen-content {
display: grid;
grid-template-columns: minmax(400px, 0.9fr) minmax(520px, 1.1fr);
gap: 20px;
padding: 0 24px 14px;
}
.screen[data-screen="servermanager"] .surface-split {
min-height: 0;
border: 1px solid var(--surface-border);
border-radius: 16px;
}
.screen[data-screen="config"] .screen-content,
.screen[data-screen="console"] .screen-content,
.screen[data-screen="log"] .screen-content {
padding: 0 24px 14px;
}
.screen[data-screen="config"] .surface,
.screen[data-screen="console"] .surface,
.screen[data-screen="log"] .surface {
border: 1px solid var(--surface-border);
border-radius: 16px;
}
.bottom-bar {
padding: 0 40px 0 24px;
}
.session-log-detail {
max-height: 36%;
}
}
@media (max-width: 767px) {
.two-col,
.three-col {
grid-template-columns: 1fr;
}
.log-filter-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.plugin-toolbar .text-btn,
.inline-form .text-btn,
.inline-form .ghost-btn,
.inline-form .primary-btn {
flex: 1;
}
}
@media (max-width: 480px) {
body {
padding: 0;
align-items: stretch;
}
.phone-shell {
width: 100%;
height: 100dvh;
border-radius: 0;
}
.session-log-detail {
max-height: 40%;
}
}

466
prototype/liquid-console.html Normal file
View File

@@ -0,0 +1,466 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RemoteConn 全功能原型</title>
<link rel="stylesheet" href="/prototype/liquid-console.css?v=20260219-5" />
</head>
<body>
<div class="phone-shell" data-plugin-root>
<section class="screen is-active" data-screen="servermanager">
<div class="title-row">
<div class="title-actions manager-actions">
<button class="icon-btn" type="button" data-action="server-create" title="增加服务器">
<img src="/assets/icons/create.svg?v=20260219-2" alt="增加服务器" />
</button>
<button class="icon-btn" type="button" data-action="server-delete" title="删除服务器">
<img src="/assets/icons/delete.svg?v=20260219-2" alt="删除服务器" />
</button>
<button class="icon-btn" type="button" data-action="server-select-all" title="全选服务器">
<img src="/assets/icons/selectall.svg?v=20260219-2" alt="全选服务器" />
</button>
</div>
<h1>连接</h1>
</div>
<main class="screen-content">
<section class="surface surface-split">
<div class="surface-head surface-head-stack">
<div class="inline-form">
<input id="serverSearch" type="text" placeholder="搜索服务器 / 标签 / 主机" />
<select id="serverSort">
<option value="recent">最近连接优先</option>
<option value="name">按名称排序</option>
<option value="host">按主机排序</option>
</select>
</div>
<div class="inline-form">
<button class="text-btn" type="button" data-action="server-test">测试连接</button>
<button class="text-btn" type="button" data-action="open-console">连接</button>
</div>
</div>
<div id="serverList" class="server-list hover-scroll"></div>
</section>
<section class="surface surface-split">
<div class="tabs" data-tabs-root="server">
<button class="tab-btn is-active" type="button" data-tab-target="server-base">基础</button>
<button class="tab-btn" type="button" data-tab-target="server-auth">认证</button>
<button class="tab-btn" type="button" data-tab-target="server-codex">Codex</button>
</div>
<form id="serverForm" class="form-scroll hover-scroll">
<div class="tab-pane is-active" data-pane="server-base">
<label class="field">
<span>服务器名称</span>
<input name="name" type="text" required />
</label>
<label class="field">
<span>用户名</span>
<input name="username" type="text" required />
</label>
<label class="field">
<span>主机地址</span>
<input name="host" type="text" required />
</label>
<div class="field-grid two-col">
<label class="field">
<span>端口</span>
<input name="port" type="number" min="1" max="65535" required />
</label>
<label class="field">
<span>传输模式</span>
<select name="transportMode">
<option value="web">Web 网关</option>
<option value="ios">iOS Native</option>
<option value="miniapp">小程序网关</option>
</select>
</label>
</div>
<label class="field">
<span>标签（逗号分隔）</span>
<input name="tags" type="text" placeholder="prod,beijing" />
</label>
</div>
<div class="tab-pane" data-pane="server-auth">
<label class="field">
<span>认证类型</span>
<select name="authType" id="authTypeSelect">
<option value="password">密码</option>
<option value="privateKey">私钥</option>
<option value="certificate">证书</option>
</select>
</label>
<div class="field-grid two-col">
<label class="field">
<span>连接超时（秒）</span>
<input name="timeout" type="number" min="5" max="120" />
</label>
<label class="field">
<span>心跳间隔（秒）</span>
<input name="heartbeat" type="number" min="5" max="120" />
</label>
</div>
<div id="authFields" class="auth-fields"></div>
</div>
<div class="tab-pane" data-pane="server-codex">
<label class="field">
<span>项目目录（Codex 启动目录）</span>
<input name="projectPath" type="text" placeholder="~/workspace/remoteconn" />
</label>
<label class="field checkbox-field">
<input name="autoStartCodex" type="checkbox" />
<span>连接成功后自动进入 Codex 模式</span>
</label>
<label class="field">
<span>目录候选（从 ~ 下选择，逗号分隔）</span>
<input name="projectCandidates" type="text" placeholder="~/workspace/remoteconn,~/workspace/staging" />
</label>
</div>
<div class="inline-form">
<button class="ghost-btn" type="button" data-action="server-test">测试连接</button>
<button class="primary-btn" id="saveServerBtn" type="button">保存当前服务器</button>
</div>
</form>
</section>
</main>
<footer class="bottom-bar">
<button class="icon-btn" type="button" data-action="go-back" title="返回上一页">
<img src="/assets/icons/back.svg?v=20260219-2" alt="返回上一页" />
</button>
<div class="bottom-actions manager-bottom-actions">
<button class="icon-btn" type="button" data-action="navigate-config" title="全局配置">
<img src="/assets/icons/config.svg?v=20260219-2" alt="全局配置" />
</button>
<button class="icon-btn" type="button" data-action="open-log" title="日志">
<img src="/assets/icons/log.svg?v=20260219-2" alt="日志" />
</button>
</div>
</footer>
</section>
<section class="screen" data-screen="config">
<div class="title-row">
<div class="title-actions config-actions">
<button class="icon-btn" type="button" data-action="go-back" title="返回上一页">
<img src="/assets/icons/back.svg?v=20260219-2" alt="返回上一页" />
</button>
</div>
<button class="title-btn" type="button" data-action="open-global-dialog">设置</button>
</div>
<main class="screen-content single-surface">
<section class="surface">
<div class="tabs" data-tabs-root="global">
<button class="tab-btn is-active" type="button" data-tab-target="terminal">终端</button>
<button class="tab-btn" type="button" data-tab-target="theme">液态主题</button>
<button class="tab-btn" type="button" data-tab-target="safety">安全</button>
<button class="tab-btn" type="button" data-tab-target="plugins">插件</button>
</div>
<form id="globalForm" class="form-scroll hover-scroll">
<div class="tab-pane is-active" data-pane="terminal">
<div class="field-grid two-col">
<label class="field">
<span>终端字体</span>
<select name="fontFamily">
<option value="JetBrains Mono">JetBrains Mono</option>
<option value="Fira Code">Fira Code</option>
<option value="Source Code Pro">Source Code Pro</option>
</select>
</label>
<label class="field">
<span>光标样式</span>
<select name="cursorStyle">
<option value="block">块状</option>
<option value="underline">下划线</option>
<option value="bar">竖线</option>
</select>
</label>
</div>
<div class="field-grid three-col">
<label class="field">
<span>字体大小</span>
<input name="fontSize" type="number" min="12" max="22" />
</label>
<label class="field">
<span>行高</span>
<input name="lineHeight" type="number" min="1" max="2" step="0.1" />
</label>
<label class="field">
<span>重连次数</span>
<input name="reconnectLimit" type="number" min="0" max="10" />
</label>
</div>
<label class="field checkbox-field">
<input name="unicode11" type="checkbox" />
<span>启用 Unicode11（中文宽字符）</span>
</label>
<label class="field checkbox-field">
<input name="autoReconnect" type="checkbox" />
<span>断线自动重连</span>
</label>
</div>
<div class="tab-pane" data-pane="theme">
<label class="field">
<span>主题预设</span>
<select name="themePreset" id="themePresetSelect">
<option value="tide">潮汐蓝</option>
<option value="mint">薄荷流</option>
<option value="sunrise">晨曦橙</option>
</select>
</label>
<div class="field-grid three-col">
<label class="field">
<span>主色</span>
<input name="accentColor" type="color" />
</label>
<label class="field">
<span>背景色</span>
<input name="bgColor" type="color" />
</label>
<label class="field">
<span>文字色</span>
<input name="textColor" type="color" />
</label>
</div>
<div class="field-grid three-col">
<label class="field">
<span>液态透明度</span>
<input name="liquidAlpha" type="number" min="0.35" max="0.95" step="0.05" />
</label>
<label class="field">
<span>背景模糊(px)</span>
<input name="blurRadius" type="number" min="0" max="40" />
</label>
<label class="field">
<span>动效速度(秒)</span>
<input name="motionDuration" type="number" min="6" max="30" />
</label>
</div>
<div class="inline-form">
<button class="text-btn" type="button" data-action="theme-auto-contrast">自动对比背景</button>
<button class="ghost-btn" type="button" data-action="theme-reset">恢复默认主题</button>
</div>
<p id="contrastHint" class="hint-text"></p>
</div>
<div class="tab-pane" data-pane="safety">
<label class="field">
<span>主机指纹策略</span>
<select name="hostKeyPolicy">
<option value="strict">严格校验</option>
<option value="trustFirstUse">首次信任</option>
<option value="manual">每次手动确认</option>
</select>
</label>
<div class="field-grid two-col">
<label class="field">
<span>日志保留天数</span>
<input name="logRetentionDays" type="number" min="1" max="365" />
</label>
<label class="field">
<span>凭据记忆策略</span>
<select name="credentialMemoryPolicy">
<option value="remember">记住凭据引用</option>
<option value="session">仅会话内保留</option>
</select>
</label>
</div>
<label class="field checkbox-field">
<input name="maskSecrets" type="checkbox" />
<span>导出日志自动脱敏</span>
</label>
<div class="inline-form">
<button class="ghost-btn" type="button" data-action="clear-known-hosts">清除主机指纹</button>
<button class="ghost-btn" type="button" data-action="clear-credentials">清除本地凭据</button>
</div>
</div>
<div class="tab-pane" data-pane="plugins">
<div class="plugin-toolbar">
<button class="text-btn" type="button" data-action="plugins-refresh">刷新列表</button>
<button class="text-btn" type="button" data-action="plugins-install-sample">安装示例插件</button>
<button class="text-btn" type="button" data-action="plugins-export">导出插件包</button>
</div>
<label class="field">
<span>导入插件包（JSON）</span>
<textarea id="pluginPackageInput" rows="7" placeholder='{"manifest": {...}, "mainJs": "...", "stylesCss": "..."}'></textarea>
</label>
<div class="inline-form">
<button class="primary-btn" type="button" data-action="plugins-import-json">导入插件包</button>
</div>
<div id="pluginList" class="plugin-list hover-scroll"></div>
<div class="plugin-runtime">
<h4>插件运行日志</h4>
<div id="pluginRuntimeLog" class="log-box hover-scroll"></div>
</div>
</div>
<div class="inline-form">
<button class="ghost-btn" type="button" data-action="restore-global-defaults">恢复默认设置</button>
<button class="primary-btn" id="saveGlobalBtn" type="button">保存全局配置</button>
</div>
</form>
</section>
</main>
<footer class="bottom-bar">
<button class="icon-btn" type="button" data-action="go-back" title="返回上一页">
<img src="/assets/icons/back.svg?v=20260219-2" alt="返回上一页" />
</button>
<div class="bottom-actions config-bottom-actions">
<button class="icon-btn" type="button" data-action="navigate-manager" title="服务器管理">
<img src="/assets/icons/serverlist.svg?v=20260219-2" alt="服务器管理" />
</button>
<button class="icon-btn" type="button" data-action="open-log" title="日志">
<img src="/assets/icons/log.svg?v=20260219-2" alt="日志" />
</button>
</div>
</footer>
</section>
<section class="screen" data-screen="console">
<div class="title-row">
<div class="title-actions console-actions">
<button class="icon-btn" type="button" data-action="go-back" title="返回上一页">
<img src="/assets/icons/back.svg?v=20260219-2" alt="返回上一页" />
</button>
<div class="inline-actions console-inline-actions">
<button class="icon-btn" type="button" data-action="open-codex-dialog" title="启动 codex">
<img src="/assets/icons/codex.svg?v=20260219-2" alt="启动 codex" />
</button>
<button class="icon-btn" type="button" data-action="clear-console" title="清屏">
<img src="/assets/icons/clear.svg?v=20260219-2" alt="清屏" />
</button>
</div>
</div>
<h1 id="consoleServerName">remoteconn</h1>
</div>
<div class="session-bar">
<span id="sessionStateBadge" class="state-pill state-idle">idle</span>
<span id="latencyValue" class="latency-chip">-- ms</span>
<button class="text-btn" type="button" data-action="session-reconnect">重连</button>
<button class="ghost-btn" type="button" data-action="session-disconnect">断开</button>
</div>
<div id="pluginCommandBar" class="plugin-command-bar hover-scroll"></div>
<main class="screen-content single-surface">
<section class="surface console-surface">
<pre id="terminalOutput" class="terminal-output hover-scroll"></pre>
<div class="terminal-composer">
<input id="terminalInput" type="text" placeholder="输入命令后回车，例如：ls -la" />
<button class="text-btn" type="button" data-action="terminal-send">发送</button>
</div>
</section>
</main>
<footer class="bottom-bar">
<button class="icon-btn" type="button" data-action="go-back" title="返回上一页">
<img src="/assets/icons/back.svg?v=20260219-2" alt="返回上一页" />
</button>
<div class="bottom-actions console-bottom-actions">
<button class="icon-btn" type="button" data-action="navigate-manager" title="服务器管理">
<img src="/assets/icons/serverlist.svg?v=20260219-2" alt="服务器管理" />
</button>
<button class="icon-btn" type="button" data-action="navigate-config" title="全局配置">
<img src="/assets/icons/config.svg?v=20260219-2" alt="全局配置" />
</button>
<button class="icon-btn" type="button" data-action="open-log" title="日志">
<img src="/assets/icons/log.svg?v=20260219-2" alt="日志" />
</button>
</div>
</footer>
</section>
<section class="screen" data-screen="log">
<div class="title-row">
<div class="title-actions log-actions">
<button class="icon-btn" type="button" data-action="go-back" title="返回上一页">
<img src="/assets/icons/back.svg?v=20260219-2" alt="返回上一页" />
</button>
</div>
<h1>日志</h1>
</div>
<main class="screen-content single-surface">
<section class="surface log-surface">
<div class="log-filter-row">
<select id="logServerFilter"></select>
<select id="logStatusFilter">
<option value="all">全部状态</option>
<option value="connected">连接成功</option>
<option value="disconnected">正常断开</option>
<option value="error">连接失败</option>
</select>
<input id="logDateFrom" type="date" />
<input id="logDateTo" type="date" />
<button class="text-btn" type="button" data-action="logs-apply-filter">筛选</button>
<button class="text-btn" type="button" data-action="logs-export">导出</button>
</div>
<div id="sessionLogList" class="session-log-list hover-scroll"></div>
<pre id="sessionLogDetail" class="session-log-detail hover-scroll"></pre>
</section>
</main>
<footer class="bottom-bar">
<button class="icon-btn" type="button" data-action="go-back" title="返回上一页">
<img src="/assets/icons/back.svg?v=20260219-2" alt="返回上一页" />
</button>
<div class="bottom-actions config-bottom-actions">
<button class="icon-btn" type="button" data-action="navigate-manager" title="服务器管理">
<img src="/assets/icons/serverlist.svg?v=20260219-2" alt="服务器管理" />
</button>
<button class="icon-btn" type="button" data-action="navigate-config" title="全局配置">
<img src="/assets/icons/config.svg?v=20260219-2" alt="全局配置" />
</button>
</div>
</footer>
</section>
</div>
<dialog id="codexDialog" class="modal">
<h3>启动 Codex 模式</h3>
<p>将执行：`cd 项目目录` -> `command -v codex` -> `codex`。</p>
<div class="modal-actions">
<button class="text-btn" type="button" data-action="run-codex" data-sandbox="read-only">read-only</button>
<button class="text-btn" type="button" data-action="run-codex" data-sandbox="workspace-write">workspace-write</button>
<button class="text-btn" type="button" data-action="run-codex" data-sandbox="danger-full-access">danger-full-access</button>
</div>
<button class="ghost-btn" type="button" data-action="close-modal">取消</button>
</dialog>
<dialog id="globalDialog" class="modal">
<h3>全局配置快照</h3>
<pre id="globalSnapshot" class="modal-snapshot"></pre>
<button class="ghost-btn" type="button" data-action="close-modal">关闭</button>
</dialog>
<dialog id="hostKeyDialog" class="modal">
<h3>主机指纹确认</h3>
<p id="hostKeySummary"></p>
<pre id="hostKeyFingerprint" class="modal-snapshot"></pre>
<label class="field checkbox-field">
<input id="hostKeyRemember" type="checkbox" checked />
<span>记住此主机（known_hosts）</span>
</label>
<div class="modal-actions">
<button class="text-btn" type="button" data-action="hostkey-trust">信任并继续</button>
<button class="ghost-btn" type="button" data-action="hostkey-cancel">取消连接</button>
</div>
</dialog>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="/prototype/liquid-console.js?v=20260219-4" defer></script>
</body>
</html>

2805
prototype/liquid-console.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

35
prototype/tests/plan-coverage.test.mjs Normal file
View File

@@ -0,0 +1,35 @@
import test from "node:test";
import assert from "node:assert/strict";
import { readFileSync } from "node:fs";
const html = readFileSync("prototype/liquid-console.html", "utf8");
const js = readFileSync("prototype/liquid-console.js", "utf8");
test("页面包含四个主 screen", () => {
const screens = [...html.matchAll(/data-screen="([^"]+)"/g)].map((m) => m[1]);
assert.deepEqual(screens.sort(), ["config", "console", "log", "servermanager"].sort());
});
test("会话状态机定义完整", () => {
assert.match(js, /SESSION_STATES\s*=\s*\[/);
["idle", "connecting", "auth_pending", "connected", "reconnecting", "disconnected", "error"].forEach((state) => {
assert.ok(js.includes(`"${state}"`));
});
});
test("Codex 编排关键命令存在", () => {
assert.ok(js.includes("command -v codex"));
assert.ok(js.includes("codex --sandbox"));
});
test("插件系统关键结构存在", () => {
assert.ok(js.includes("class PluginManager"));
assert.ok(js.includes("PERMISSION_WHITELIST"));
assert.ok(js.includes("installPackage"));
assert.ok(js.includes("runPluginCommand"));
});
test("日志导出能力存在", () => {
assert.ok(js.includes("exportSessionLogs"));
assert.ok(js.includes("maskSensitive"));
});