docs(ai-outfit): inline prompt preview + settings on right (layout A)
- Replace the prompt-preview dialog with an inline, live preview pinned at the bottom of the left column (sample-row dropdown, title substituted). - Move 生成设置 from the left into the right run column (2-col), so left becomes a focused 数据源 + 话术 + 预览 authoring column. - Update §7 (inline preview) and §10 (left/right column contents) + re-render the mockup. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
+28
-16
@@ -42,7 +42,7 @@
|
||||
.tab:not(.on):hover{background:#ececec}
|
||||
|
||||
/* ---- BODY GRID ---- */
|
||||
.body{display:grid;grid-template-columns:558px 1fr 300px;min-height:0}
|
||||
.body{display:grid;grid-template-columns:426px 1fr 344px;min-height:0}
|
||||
|
||||
/* ---- LEFT : data source + settings ---- */
|
||||
.left{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
|
||||
@@ -81,10 +81,17 @@
|
||||
.pchip:hover{background:#f3f8fd;border-color:var(--accent-soft)}
|
||||
.pchip.act{margin-left:auto;border-color:var(--accent-soft);color:var(--accent)}
|
||||
|
||||
/* compact settings grid */
|
||||
.sgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 10px}
|
||||
/* compact settings grid (now in the right run column) */
|
||||
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
|
||||
.sgrid .fl{margin:0}
|
||||
|
||||
/* inline final-prompt preview (replaces the dialog) */
|
||||
.prevrow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
|
||||
.prevrow .prevlbl{font-size:11px;color:var(--txt-2);flex:none}
|
||||
.preview{border:1px solid var(--line);border-radius:var(--r);background:#f7f9fc;
|
||||
padding:8px 9px;font:12px/1.7 var(--font);color:var(--txt);min-height:150px}
|
||||
.preview b{color:var(--accent);font-weight:600;background:#eaf3fc;border-radius:2px;padding:0 2px}
|
||||
|
||||
/* ---- CENTER : the transformation thesis + batch table ---- */
|
||||
.center{background:var(--panel-2);display:grid;grid-template-rows:auto 1fr;min-height:0}
|
||||
|
||||
@@ -232,23 +239,16 @@
|
||||
<div class="ta">为商品「<span class="ph">{title}</span>」生成人物上身实穿效果图：真人模特正面穿着这件衣服，完整保留款式、版型、颜色与印花图案，自然光、纯色棚拍背景，电商主图风格，不加文字与促销标签。</div>
|
||||
<div class="promptbar">
|
||||
<span class="pchip">插入<span class="pp">{title}</span></span>
|
||||
<span class="pchip act">⤢ 预览最终提示词</span>
|
||||
</div>
|
||||
<div class="promptbar" style="margin-top:8px">
|
||||
<span class="pchip" style="flex:1;justify-content:center;color:var(--accent);border-color:var(--accent-soft)">💾 保存话术</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grp"><div class="grp-t">生成设置</div>
|
||||
<div class="ckline" style="margin-bottom:12px"><span class="cbox on"></span>重试上次失败的行（失败 3）</div>
|
||||
<div class="sgrid">
|
||||
<div class="fl"><label>并发数</label><div class="inp"><input value="1"></div></div>
|
||||
<div class="fl"><label>新请求间隔</label><div class="inp"><input value="2"><span class="u">秒</span></div></div>
|
||||
<div class="fl"><label>单任务冷却</label><div class="inp"><input value="1"><span class="u">秒</span></div></div>
|
||||
<div class="fl"><label>失败重试</label><div class="inp"><input value="2"><span class="u">次</span></div></div>
|
||||
<div class="fl"><label>分辨率</label><div class="sel"><span>1K</span><span class="car">▼</span></div></div>
|
||||
<div class="fl"><label>JPG 质量</label><div class="sel"><span>均衡 85</span><span class="car">▼</span></div></div>
|
||||
<div class="grp"><div class="grp-t">最终提示词预览</div>
|
||||
<div class="prevrow">
|
||||
<span class="prevlbl">样本行</span>
|
||||
<div class="sel" style="flex:1"><span>第 13 行 · TY030 · 碎花连衣裙夏季新款</span><span class="car">▼</span></div>
|
||||
</div>
|
||||
<div class="preview">为商品「<b>碎花连衣裙夏季新款</b>」生成人物上身实穿效果图：真人模特正面穿着这件衣服，完整保留款式、版型、颜色与印花图案，自然光、纯色棚拍背景，电商主图风格，不加文字与促销标签。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -332,8 +332,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT : run + log -->
|
||||
<!-- RIGHT : settings + run + log -->
|
||||
<div class="right">
|
||||
<div class="runtop">
|
||||
<div class="rt">生成设置</div>
|
||||
<div class="ckline" style="margin-bottom:10px"><span class="cbox on"></span>重试上次失败的行（失败 3）</div>
|
||||
<div class="sgrid">
|
||||
<div class="fl"><label>并发数</label><div class="inp"><input value="1"></div></div>
|
||||
<div class="fl"><label>新请求间隔</label><div class="inp"><input value="2"><span class="u">秒</span></div></div>
|
||||
<div class="fl"><label>单任务冷却</label><div class="inp"><input value="1"><span class="u">秒</span></div></div>
|
||||
<div class="fl"><label>失败重试</label><div class="inp"><input value="2"><span class="u">次</span></div></div>
|
||||
<div class="fl"><label>分辨率</label><div class="sel"><span>1K</span><span class="car">▼</span></div></div>
|
||||
<div class="fl"><label>JPG 质量</label><div class="sel"><span>均衡 85</span><span class="car">▼</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="runtop">
|
||||
<div class="rt">本次进度</div>
|
||||
<div class="progwrap">
|
||||
|
||||
Reference in New Issue
Block a user