@ttmg/cli 0.4.6-vibe-beta.19 → 0.4.6-vibe-beta.20

package/README.md

@@ -1,8 +1,8 @@
 ### @ttmg/cli
 
-`0.4.6-vibe-beta.19`：扫码授权后自动上传，并持续查询同一任务。预览就绪后优先显示「扫码预览」，旁边保留「查看进度」；两个二维码图案尺寸和白边一致。兼容状态 9（等待提交代码审核），无需先提审即可展示后端返回的预览码。
+`0.4.6-vibe-beta.20`：扫码授权后自动上传，并持续查询同一任务。左侧保留原码用于「查看进度」，右侧从加载态切换为「扫码预览」；两个二维码图案尺寸和白边一致。头像与整块应用信息垂直居中，标题、说明和进度条间距已调整。兼容状态 9（等待提交代码审核），无需先提审即可展示后端返回的预览码。
 
-Version `0.4.6-vibe-beta.19`: authorize in TikTok, upload, and keep polling the same task. When ready, the preview QR appears first and the original QR remains for checking progress. Both codes have equal visible sizes and quiet zones. Status 9 (waiting for review submission) supports preview without requiring review submission first.
+Version `0.4.6-vibe-beta.20`: authorize in TikTok, upload, and keep polling the same task. The original QR stays on the left for checking progress; the loader on the right becomes the preview QR when ready. Both codes have equal visible sizes and quiet zones. The icon is vertically centered beside the app details, with adjusted spacing between the heading, description and progress bar. Status 9 (waiting for review submission) supports preview without requiring review submission first.
 
 默认总等待时间为 30 分钟，`--timeout <seconds>` 最长可设 60 分钟。页面在任务进行中保持可用，CLI 结束后再保留 30 分钟；失败仍保留上传回执，勿直接重传。页面随浏览器语言显示中英文。
 
@@ -26,7 +26,7 @@ Vibe 版本支持手机扫码授权上传、可选 `--description`、分类查
 固定版本安装（发布标签为 `vibe-beta`）：
 
 ```bash
-npm install -g @ttmg/cli@0.4.6-vibe-beta.19
+npm install -g @ttmg/cli@0.4.6-vibe-beta.20
 ttmg --version
 ttmg capabilities --format json
 ttmg upload --help

package/dist/index.js

@@ -7265,7 +7265,7 @@ Vibe QR upload (real PPE trial):
   pageUrl is the local QR/progress page on the CLI computer. Reopen it with authorizationOpenCommand.
   The CLI polls and uploads avatar, app_info and package automatically after authorization. Do not start a second upload.
   After upload, waiting_preview keeps polling the same task until previewUrl is available, including status 9 (waiting for review submission).
-  When previewReady=true, pageUrl shows the preview QR first and retains the original QR for checking progress. qrPurpose is game_preview or tool_preview. A preview timeout preserves uploaded=true; do not reupload.
+  When previewReady=true, pageUrl keeps the original QR on the left for checking progress and shows the preview QR on the right. qrPurpose is game_preview or tool_preview. A preview timeout preserves uploaded=true; do not reupload.
   The operation timeout defaults to 1800 seconds (maximum 3600). The page stays available during the operation and for 30 minutes after the CLI finishes.
   Real success: terminal=true, status=uploaded, uploaded=true, simulation=false. On failure, read errorCode and nextAction.
   The local QR page opens for every output format; --no-open disables automatic opening.
@@ -7717,7 +7717,7 @@ Vibe 扫码上传（真实 PPE 试用）：
   pageUrl 是 CLI 所在电脑的二维码／进度页；重新打开时，执行返回的 authorizationOpenCommand。
   CLI 负责轮询，授权后自动上传 avatar、app_info、package，不再启动第二次上传。
   上传成功后 waiting_preview 继续查询同一任务直到取得 previewUrl，包括状态 9（等待提交代码审核）。
-  previewReady=true 时，pageUrl 优先显示预览码，保留原码用于查看进度；qrPurpose 为 game_preview 或 tool_preview。等待超时仍保留 uploaded=true，请核对任务，不要重传。
+  previewReady=true 时，pageUrl 左侧保留原码用于查看进度，右侧显示预览码；qrPurpose 为 game_preview 或 tool_preview。等待超时仍保留 uploaded=true，请核对任务，不要重传。
   整体超时默认 1800 秒，最大 3600 秒；页面在任务进行中保持可用，CLI 结束后再保留 30 分钟。
   真实成功：terminal=true、status=uploaded、uploaded=true、simulation=false。失败时读取 errorCode 和 nextAction。
   所有输出格式都会打开本地二维码页；--no-open 可关闭自动打开。
@@ -16386,7 +16386,7 @@ async function authStatus(options = {}) {
     return result;
 }
 
-var version = "0.4.6-vibe-beta.19";
+var version = "0.4.6-vibe-beta.20";
 var engines = {
 	node: ">=20.19.1 <21 || >=22"
 };
@@ -19378,9 +19378,8 @@ body{margin:0;min-height:100vh;min-height:100svh;display:flex;align-items:center
 .step.done{color:#7a818c}.step.done .step-number{background:#a3e635;color:#24282f;border-color:#a3e635}
 .swirl{display:block;width:18px;height:18px;border-radius:50%;background:conic-gradient(transparent 0 .1turn,currentColor 1turn);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 0);mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 0);animation:swirl-spin .9s linear infinite}
 @keyframes swirl-spin{to{transform:rotate(1turn)}}
-.heading{text-align:center}h1{font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.3px;margin:0 0 8px}
-.subtitle{color:#7a818c;font-size:12px;line-height:1.7;margin:0;min-height:41px;overflow-wrap:anywhere}
-.loading-space{height:22px}
+.heading{text-align:center}h1{font-size:20px;font-weight:600;line-height:1.6;letter-spacing:-.3px;margin:0 0 12px}
+.subtitle{color:#7a818c;font-size:14px;line-height:1.6;margin:0;min-height:22px;overflow-wrap:anywhere}
 .preview-loading{width:min(240px,100%);height:4px;margin:18px auto 0;border-radius:4px;overflow:hidden;background:#eceef1}
 .preview-loading span{display:block;width:40%;height:100%;border-radius:inherit;background:#858c96;animation:preview-loading-slide 1.8s ease-in-out infinite}
 @keyframes preview-loading-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@@ -19388,7 +19387,7 @@ body{margin:0;min-height:100vh;min-height:100svh;display:flex;align-items:center
 .game{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;margin:24px 22px 0;padding:16px 18px;border-radius:16px;background:#f7f8fa;text-align:left}
 .game-summary{display:contents}.game-title{grid-column:2;max-width:100%;margin:0;font-size:15px;font-weight:600;overflow-wrap:anywhere;min-width:0}
 .game-icon,.game-avatar{width:44px;height:44px;border-radius:10px;flex-shrink:0;background:#f0f2f5}.game-avatar{object-fit:cover}.game-icon{display:grid;place-items:center;color:#707b8b}
-.game-icon,.game-avatar{grid-column:1;grid-row:1 / 3}
+.game-icon,.game-avatar{grid-column:1;grid-row:1 / 3;align-self:center}
 .game-details{grid-column:2;margin:4px 0 0;font-size:12px;color:#7a818c}.game-details>div:first-child,.game-categories>div{display:flex;align-items:baseline;gap:6px}.game-details dt{flex-shrink:0;font-size:11px;color:#9298a2;margin:0}.game-details dd{min-width:0;margin:0;text-align:left;overflow-wrap:anywhere}
 .game-description{white-space:pre-wrap;line-height:1.65}.game-categories{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
 /* 32px preserves at least four quiet modules even for a 21-module QR at 160px. */
@@ -19402,8 +19401,8 @@ body{margin:0;min-height:100vh;min-height:100svh;display:flex;align-items:center
 .upload-area{display:flex;align-items:center;flex-direction:column;gap:16px;padding-top:26px}.percentage{font-size:34px;line-height:1;font-variant-numeric:tabular-nums;font-weight:550}.percentage span{font-size:16px;color:#858e9d;padding-left:3px}
 .progress-wrap{width:100%}progress{display:block;width:100%;height:4px;border:none;border-radius:20px;overflow:hidden;background:#edf0f4;accent-color:#4c6378}progress::-webkit-progress-bar{background:#edf0f4;border-radius:20px}progress::-webkit-progress-value{background:#4c6378;border-radius:20px}progress::-moz-progress-bar{background:#4c6378;border-radius:20px}.transfer-label{text-align:center;font-size:11px;color:#8b939f;margin:8px 0 0}
 .footer{text-align:center;font-size:10px;line-height:1.7;color:#a0a5ae;margin:24px 0 0}.footer .dot{display:inline-block;height:5px;width:5px;border-radius:50%;background:#c1995e;vertical-align:middle;margin-right:5px}.mock-badge{width:fit-content;margin:0 0 10px auto;font-size:10px;padding:2px 7px;border:1px solid #dfe2e7;border-radius:5px;color:#707783}
-@media(max-width:380px){body{padding-left:20px;padding-right:20px}.steps{gap:7px}.step:after{width:16px;margin-left:1px}h1{font-size:24px}}
-@media(max-width:520px){.game{margin-left:0;margin-right:0}.subtitle{min-height:61px}.scan-hint{min-height:38px}}
+@media(max-width:380px){body{padding-left:20px;padding-right:20px}.steps{gap:7px}.step:after{width:16px;margin-left:1px}}
+@media(max-width:520px){.game{margin-left:0;margin-right:0}.scan-hint{min-height:38px}}
 `;
 
 // Adapted from tiktok-minis-skills publish_tool.js at 132cd91.
@@ -19820,14 +19819,16 @@ async function renderVibePage(input) {
         Number.isFinite(input.progressPercent)
         ? Math.max(0, Math.min(100, Math.round(input.progressPercent)))
         : undefined;
+    const progressQr = bindingQr ? `<figure class="qr-code"><div class="qr-frame"><img width="160" height="160" alt="${progressCode}" src="${bindingQr}"></div><figcaption>${zh ? '查看进度' : 'Check progress'}<span>${zh ? '查看应用信息并提交审核' : 'View app details and submit for review'}</span></figcaption></figure>` : '';
+    // Keep the original scan entry on the left while the right side becomes a preview.
     const content = qr
-        ? `<div class="qr-area">${pendingQr}<figure class="qr-code"><div class="qr-frame"><img width="160" height="160" alt="${purpose}" src="${qr}"></div>${preview ? `<figcaption>${zh ? '扫码预览' : 'Preview'}<span>${zh ? '打开本次上传的预览版本' : 'Open the preview of this upload'}</span></figcaption>` : phase === 'binding' ? `<figcaption>${zh ? '扫码授权' : 'Authorize upload'}</figcaption>` : `<figcaption>${zh ? '查看进度' : 'Check progress'}<span>${zh ? '扫码查看应用信息' : 'Scan to view app details'}</span></figcaption>`}</figure>${bindingQr ? `<figure class="qr-code"><div class="qr-frame"><img width="160" height="160" alt="${progressCode}" src="${bindingQr}"></div><figcaption>${zh ? '查看进度' : 'Check progress'}<span>${zh ? '查看应用信息并提交审核' : 'View app details and submit for review'}</span></figcaption></figure>` : ''}</div>`
+        ? `<div class="qr-area">${progressQr}<figure class="qr-code"><div class="qr-frame"><img width="160" height="160" alt="${purpose}" src="${qr}"></div>${preview ? `<figcaption>${zh ? '扫码预览' : 'Preview'}<span>${zh ? '打开本次上传的预览版本' : 'Open the preview of this upload'}</span></figcaption>` : phase === 'binding' ? `<figcaption>${zh ? '扫码授权' : 'Authorize upload'}</figcaption>` : `<figcaption>${zh ? '查看进度' : 'Check progress'}<span>${zh ? '扫码查看应用信息' : 'Scan to view app details'}</span></figcaption>`}</figure>${pendingQr}</div>`
         : phase === 'uploading' && progress !== undefined
             ? `<div class="upload-area"><div class="percentage">${progress}<span>%</span></div><div class="progress-wrap"><progress aria-label="${copy.uploadLabel}" max="100" value="${progress}"></progress><p class="transfer-label">${copy.uploadLabel}</p></div></div>`
             : '';
     const previewLoading = phase === 'waiting_preview'
         ? `<div class="preview-loading" role="progressbar" aria-label="${zh ? '正在生成预览' : 'Preparing preview'}"><span aria-hidden="true"></span></div>`
-        : '<div class="loading-space" aria-hidden="true"></div>';
+        : '';
     const revision = crypto.createHash('sha256').update(JSON.stringify(input)).digest('hex');
     const steps = phase === 'failed' ? '' : `<ol class="steps" aria-label="${zh ? '上传步骤' : 'Upload steps'}">${copy.steps.map((label, i) => `<li class="step ${done || i < step ? 'done' : active && i === step ? 'active' : ''}"${!done && active && i === step ? ' aria-current="step"' : ''}><span class="step-number">${done || i < step ? checkIcon : active && i === step ? '<span class="swirl" aria-hidden="true"></span>' : i + 1}</span>${label}</li>`).join('')}</ol>`;
     return `<!doctype html><html lang="${zh ? 'zh-CN' : 'en'}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${escape(title)} · ${escape(input.title)}</title><style>${vibePageStyles}</style><script src="?updates" defer></script></head>