70 lines
5.6 KiB
HTML
70 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { width: 1080px; height: 1440px; font-family: 'PingFang SC', 'Noto Sans SC', sans-serif; background: #0a0e17; overflow: hidden; position: relative; }
|
||
.bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(56,189,248,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(56,189,248,0.03) 1px, transparent 1px); background-size: 40px 40px; }
|
||
.glow { position: absolute; width: 500px; height: 500px; top: -80px; right: -80px; background: radial-gradient(circle, rgba(56,189,248,0.12), transparent 70%); border-radius: 50%; }
|
||
.glow2 { position: absolute; width: 350px; height: 350px; bottom: 100px; left: -50px; background: radial-gradient(circle, rgba(6,182,212,0.08), transparent 70%); border-radius: 50%; }
|
||
.content { position: relative; z-index: 10; padding: 70px 65px; height: 100%; display: flex; flex-direction: column; }
|
||
.page-num { font-size: 20px; color: rgba(255,255,255,0.25); letter-spacing: 2px; margin-bottom: 20px; }
|
||
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px; border-radius: 30px; font-size: 22px; font-weight: 700; margin-bottom: 30px; width: fit-content; background: rgba(56,189,248,0.12); border: 1.5px solid rgba(56,189,248,0.4); color: #38bdf8; }
|
||
.title { font-size: 64px; font-weight: 900; color: white; line-height: 1.2; margin-bottom: 12px; }
|
||
.accent { background: linear-gradient(135deg, #38bdf8, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.desc { font-size: 28px; color: rgba(255,255,255,0.45); margin-bottom: 40px; line-height: 1.5; }
|
||
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px 36px; margin-bottom: 18px; }
|
||
.card-title { font-size: 23px; font-weight: 700; color: #38bdf8; margin-bottom: 14px; letter-spacing: 1px; }
|
||
.card-body { font-size: 25px; color: rgba(255,255,255,0.75); line-height: 1.7; }
|
||
.card-body strong { color: white; }
|
||
.hl { display: inline; padding: 2px 10px; border-radius: 6px; background: rgba(56,189,248,0.12); color: #38bdf8; font-family: 'SF Mono', monospace; font-size: 22px; }
|
||
.flow-diagram { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
|
||
.flow-line { display: flex; align-items: center; gap: 14px; }
|
||
.flow-box { padding: 14px 22px; border-radius: 14px; font-size: 22px; font-weight: 700; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.2); color: #7dd3fc; white-space: nowrap; }
|
||
.flow-box.active { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.5); color: #38bdf8; }
|
||
.flow-desc { font-size: 22px; color: rgba(255,255,255,0.45); }
|
||
.flow-connector { width: 2px; height: 16px; background: rgba(56,189,248,0.2); margin-left: 40px; }
|
||
.two-path { display: flex; gap: 18px; margin-top: 14px; }
|
||
.path-box { flex: 1; padding: 20px 24px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
|
||
.path-label { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
|
||
.path-desc { font-size: 22px; color: rgba(255,255,255,0.5); line-height: 1.6; }
|
||
.footer-note { position: absolute; bottom: 50px; left: 65px; right: 65px; font-size: 20px; color: rgba(255,255,255,0.2); text-align: center; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-grid"></div><div class="glow"></div><div class="glow2"></div>
|
||
<div class="content">
|
||
<div class="page-num">03 / 07</div>
|
||
<div class="badge">INTERNAL ONLY · feature('ULTRAPLAN')</div>
|
||
<div class="title">ULTRAPLAN</div>
|
||
<div class="title" style="margin-bottom:0"><span class="accent">30 分钟云端规划</span></div>
|
||
<div class="desc">把复杂探索扔给远程 Opus 4.6，本地终端不阻塞</div>
|
||
<div class="card">
|
||
<div class="card-title">WORKFLOW</div>
|
||
<div class="flow-diagram">
|
||
<div class="flow-line"><div class="flow-box active">本地 CLI</div><div class="flow-desc">发送任务 + 上下文到 CCR（Claude Code Remote）</div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-line"><div class="flow-box">远程 Opus 4.6</div><div class="flow-desc">独立探索、研究、生成方案</div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-line"><div class="flow-box">每 3s 轮询</div><div class="flow-desc">最长 <strong style="color:white">30 分钟</strong>，5次 5xx 容错</div></div>
|
||
<div class="flow-connector"></div>
|
||
<div class="flow-line"><div class="flow-box active">浏览器审批</div><div class="flow-desc">用户在 claude.ai 查看/编辑/拒绝/批准</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">TWO EXECUTION PATHS</div>
|
||
<div class="two-path">
|
||
<div class="path-box"><div class="path-label" style="color:#38bdf8">Remote</div><div class="path-desc">批准后在云端继续执行<br>结果通过 PR 落地</div></div>
|
||
<div class="path-box"><div class="path-label" style="color:#34d399">Teleport</div><div class="path-desc">"传送"回本地终端执行<br>暗号：<span class="hl" style="font-size:18px">__ULTRAPLAN_TELEPORT_LOCAL__</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">TRIGGER</div>
|
||
<div class="card-body"><span class="hl">/ultraplan <prompt></span> 或在消息中输入 "ultraplan"<br><span style="font-size:22px;color:rgba(255,255,255,0.4)">自动跳过引号、路径、标识符中的匹配</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-note">source: restored-src/src/commands/ultraplan.tsx · src/utils/ultraplan/</div>
|
||
</body>
|
||
</html>
|