docs(ai-outfit): relayout AI panel mockup (3-col settings, model on right)
- 生成设置 -> 3 cols x 2 rows; AI 模型 dropdown moved under it on the right. - 数据源/输出 become inline label+path rows; bigger 通用话术 + 最终提示词预览 (preview now shows the appended output requirements). Right column widened to ~400 (left ~360). Update §10 and re-render ui-ai-outfit.png. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
+29
-24
@@ -42,7 +42,7 @@
|
||||
.tab:not(.on):hover{background:#ececec}
|
||||
|
||||
/* ---- BODY GRID ---- */
|
||||
.body{display:grid;grid-template-columns:426px 1fr 344px;min-height:0}
|
||||
.body{display:grid;grid-template-columns:360px 1fr 400px;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}
|
||||
@@ -73,7 +73,7 @@
|
||||
.chipmeta.err{background:#fbe4e2;color:#a3271c}
|
||||
|
||||
/* prompt editor */
|
||||
.ta{width:100%;height:128px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:8px 9px;font:12px/1.7 var(--font);color:var(--txt)}
|
||||
.ta{width:100%;height:230px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:8px 9px;font:12px/1.7 var(--font);color:var(--txt)}
|
||||
.ph{color:var(--info);font-weight:600}
|
||||
.promptbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
|
||||
.pchip{display:flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--txt-2);font-size:11px}
|
||||
@@ -81,15 +81,19 @@
|
||||
.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 (now in the right run column) */
|
||||
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
|
||||
/* compact settings grid (right run column, 3 per row) */
|
||||
.sgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 10px}
|
||||
.sgrid .fl{margin:0}
|
||||
|
||||
/* inline labelled rows (数据源 / 输出): label + path on one line */
|
||||
.frow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
|
||||
.frow .flbl{flex:none;width:40px;color:var(--txt-2);font-size:12px}
|
||||
|
||||
/* 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}
|
||||
padding:8px 9px;font:12px/1.7 var(--font);color:var(--txt);min-height:300px}
|
||||
.preview b{color:var(--accent);font-weight:600;background:#eaf3fc;border-radius:2px;padding:0 2px}
|
||||
|
||||
/* ---- CENTER : the transformation thesis + batch table ---- */
|
||||
@@ -214,25 +218,17 @@
|
||||
<!-- LEFT : data source + settings -->
|
||||
<div class="left">
|
||||
<div class="lscroll">
|
||||
<div class="grp"><div class="grp-t">数据源（Excel）</div>
|
||||
<div class="fl" style="margin-bottom:8px"><label>Excel 文件</label>
|
||||
<div class="path"><span class="p">D:\\电商\\2026春\\商品表.xlsx</span><span class="br">…</span></div>
|
||||
</div>
|
||||
<div class="xlmeta">
|
||||
<span class="chipmeta">共 60 行</span>
|
||||
<span class="chipmeta done">已完成 12</span>
|
||||
<span class="chipmeta wait">待处理 45</span>
|
||||
<span class="chipmeta err">失败 3</span>
|
||||
</div>
|
||||
<div class="frow"><span class="flbl">Excel</span>
|
||||
<div class="path"><span class="p">D:\\电商\\2026春\\商品表.xlsx</span><span class="br">…</span></div>
|
||||
</div>
|
||||
|
||||
<div class="grp"><div class="grp-t">输出</div>
|
||||
<div class="fl" style="margin-bottom:8px"><label>输出目录</label>
|
||||
<div class="path"><span class="p">D:\\CMBot\\合并后的图片</span><span class="br">…</span></div>
|
||||
</div>
|
||||
<div class="fl"><label>AI 模型</label>
|
||||
<div class="sel"><span>Nano Banana 2 · 中转</span><span class="car">▼</span></div>
|
||||
</div>
|
||||
<div class="xlmeta" style="margin:-2px 0 10px">
|
||||
<span class="chipmeta">共 60 行</span>
|
||||
<span class="chipmeta done">已完成 12</span>
|
||||
<span class="chipmeta wait">待处理 45</span>
|
||||
<span class="chipmeta err">失败 3</span>
|
||||
</div>
|
||||
<div class="frow"><span class="flbl">输出</span>
|
||||
<div class="path"><span class="p">D:\\CMBot\\合并后的图片</span><span class="br">…</span></div>
|
||||
</div>
|
||||
|
||||
<div class="grp"><div class="grp-t">通用话术</div>
|
||||
@@ -248,7 +244,13 @@
|
||||
<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 class="preview">为商品「<b>碎花连衣裙夏季新款</b>」生成人物上身实穿效果图：真人模特正面穿着这件衣服，完整保留款式、版型、颜色与印花图案，自然光、纯色棚拍背景，电商主图风格，不加文字与促销标签。
|
||||
|
||||
批量生成输出要求：
|
||||
- 参考解析度：1K
|
||||
- 固定 1:1 正方形主图
|
||||
- 必须结合商品标题与参考商品图片
|
||||
- 服装本身、版型、颜色与图案不可跑版</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -345,6 +347,9 @@
|
||||
<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 class="fl" style="margin-top:10px"><label>AI 模型</label>
|
||||
<div class="sel"><span>Nano Banana 2 · 中转</span><span class="car">▼</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="runtop">
|
||||
<div class="rt">本次进度</div>
|
||||
|
||||
Reference in New Issue
Block a user