docs(ui): add T-637 suite prompt settings dialog mockup
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
chengma
co-authored by
Claude Fable 5
Claude Fable 5
parent
86d1016e85
commit
ec2307b507
@@ -15,5 +15,6 @@
|
||||
| [tab6-image-studio-v2.svg](tab6-image-studio-v2.svg) | ⑥ 图片精修（提案·重排）：细图标轨、照片池放大、提示词中心整列、全宽出片盘 |
|
||||
| [tab6-ai-studio-v3.svg](tab6-ai-studio-v3.svg) | ⑥ AI工场（需求定稿·v3）：合并提示词、完整模板 CRUD、异步任务照片池、部分导出与终选排序 |
|
||||
| [tab6-suite-package-v1.svg](tab6-suite-package-v1.svg) | ⑥ 商品套图（T-622 已实现）：从「虾皮圈电商图生成器」商品套餐交互迁移并替换主界面 AI工场入口；单一套图类型，多任务标签，商品原图，平台/国家/语言/比例，AI 帮写，白底/场景/卖点及自定义分类，结果历史、重试、删除撤销与生成进度 |
|
||||
| [tab6-suite-prompt-dialog-T637.svg](tab6-suite-prompt-dialog-T637.svg) | ⑥ 商品套图（T-637 提案）：标题行「AI帮写/取消」紧随 label、最右新增「提示词设置」；提示词设置弹窗——左编辑基础模板（插入变量菜单、占位符校验）、右只读实时最终预览（预览分类下拉＋分类内序号步进器、强制保护规则块）、保存/恢复默认共用原子写盘 |
|
||||
|
||||
> 仅为线框效果图，最终样式以实现为准。带 `-T584`/`-v2` 等后缀的为**改版提案**，未定稿。界面职责与流程见 [../routes.md](../routes.md)。
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="940" height="620" viewBox="0 0 940 620" font-family="'Segoe UI','Microsoft YaHei',sans-serif">
|
||||
<!-- T-637 商品套图提示词设置弹窗与实时最终预览：标题行新增「提示词设置」入口；弹窗左编辑模板、右只读实时预览，共用同一 renderer -->
|
||||
<defs>
|
||||
<style>
|
||||
.win{fill:#f4f6f9;stroke:#d3d9e2}.hd{fill:#2b3a55}.title{fill:#fff;font-size:14px;font-weight:600}
|
||||
.tab{fill:#e8ebf0}.tabA{fill:#f4f6f9}.tabT{fill:#5c6573;font-size:13px}.tabTA{fill:#2f6fed;font-size:13px;font-weight:600}
|
||||
.sec{fill:#1f2733;font-size:13px;font-weight:600}.mut{fill:#8a92a0;font-size:11px}
|
||||
.cell{fill:#2a2f3a;font-size:12px}
|
||||
.btnP{fill:#2f6fed}.btnPT{fill:#fff;font-size:12px;font-weight:600}
|
||||
.btn{fill:#fff;stroke:#c5ccd6}.btnT{fill:#3a4150;font-size:11px}
|
||||
.panel{fill:#fff;stroke:#e2e6ec}.inp{fill:#fff;stroke:#c5ccd6}.ta{fill:#fbfcfe;stroke:#c5ccd6}
|
||||
.sel{fill:#fff;stroke:#c5ccd6}.selT{fill:#2a2f3a;font-size:11px}
|
||||
.tpl{fill:#2a2f3a;font-size:11px}.ph{fill:#2f6fed}
|
||||
.ok{fill:#20a464;font-size:11px}
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect class="win" x="0.5" y="0.5" width="939" height="619" rx="8"/>
|
||||
<rect class="hd" x="0.5" y="0.5" width="939" height="40" rx="8"/><rect class="hd" x="0.5" y="20" width="939" height="21"/>
|
||||
<text class="title" x="18" y="26">蝦皮圈優化助手 · 商品套图生成</text>
|
||||
<circle cx="888" cy="20" r="6" fill="#f5bf4f"/><circle cx="910" cy="20" r="6" fill="#5ac26a"/><circle cx="866" cy="20" r="6" fill="#e0e4ea"/>
|
||||
|
||||
<!-- tab bar (⑥ active) -->
|
||||
<rect class="tab" x="0.5" y="41" width="939" height="38"/>
|
||||
<rect class="tabA" x="590" y="45" width="150" height="38"/><rect x="590" y="45" width="150" height="3" fill="#2f6fed"/>
|
||||
<text class="tabT" x="24" y="68">① 导入采集</text>
|
||||
<text class="tabT" x="150" y="68">② AI生成</text>
|
||||
<text class="tabT" x="256" y="68">③ 更新蝦皮</text>
|
||||
<text class="tabT" x="386" y="68">④ 账号管理</text>
|
||||
<text class="tabT" x="516" y="68">⑤ 设置</text>
|
||||
<text class="tabTA" x="604" y="68">⑥ 商品套图</text>
|
||||
|
||||
<!-- section: 主界面标题行变更（T-637 第 1 节） -->
|
||||
<text class="mut" x="18" y="102">主界面变更 · 「商品卖点与要求」标题行：AI帮写紧随 label，「提示词设置」同行最右</text>
|
||||
<rect class="panel" x="18" y="108" width="644" height="32" rx="6"/>
|
||||
<text class="sec" x="30" y="129" font-size="12">商品卖点与要求</text>
|
||||
<rect class="btn" x="136" y="114" width="58" height="20" rx="5"/><text class="btnT" x="147" y="128">AI帮写</text>
|
||||
<rect class="btn" x="200" y="114" width="44" height="20" rx="5" stroke-dasharray="3,2"/><text class="btnT" x="211" y="128" fill="#8a92a0">取消</text>
|
||||
<rect class="btn" x="574" y="114" width="78" height="20" rx="5" stroke="#2f6fed"/><text class="btnT" x="585" y="128" fill="#2f6fed">提示词设置</text>
|
||||
<text class="mut" x="676" y="120">「取消」仅 AI 帮写运行时显示</text>
|
||||
<text class="mut" x="676" y="134">点「提示词设置」→ 打开弹窗</text>
|
||||
<line x1="613" y1="140" x2="613" y2="150" stroke="#2f6fed" stroke-dasharray="3,2"/>
|
||||
|
||||
<!-- section: ProductSuitePromptDialog 弹窗 -->
|
||||
<rect x="54" y="154" width="840" height="444" rx="8" fill="#1f2733" opacity="0.08"/>
|
||||
<rect x="50" y="150" width="840" height="444" rx="8" fill="#fff" stroke="#c5ccd6"/>
|
||||
<rect x="50" y="150" width="840" height="32" rx="8" fill="#eef1f6"/><rect x="50" y="166" width="840" height="16" fill="#eef1f6"/>
|
||||
<text class="sec" x="66" y="171" font-size="12">套图提示词设置</text>
|
||||
<text class="mut" x="866" y="171">✕</text>
|
||||
|
||||
<!-- toolbar: 保存 / 恢复默认 / 预览分类 / 预览序号步进器 -->
|
||||
<rect class="btnP" x="66" y="190" width="60" height="24" rx="5"/><text class="btnPT" x="82" y="206">保存</text>
|
||||
<rect class="btn" x="134" y="190" width="76" height="24" rx="5"/><text class="btnT" x="146" y="206">恢复默认</text>
|
||||
<text class="mut" x="222" y="206">恢复默认＝二次确认 → 校验内置模板 → 统一原子写盘</text>
|
||||
<rect class="sel" x="556" y="190" width="132" height="24" rx="5"/><text class="selT" x="566" y="206">预览分类：场景图 ▼</text>
|
||||
<text class="selT" x="700" y="206">预览第</text>
|
||||
<rect class="btn" x="740" y="190" width="22" height="24" rx="5"/><text class="btnT" x="747" y="206">◀</text>
|
||||
<text class="selT" x="770" y="206">2 / 2 张</text>
|
||||
<rect class="btn" x="824" y="190" width="22" height="24" rx="5"/><text class="btnT" x="831" y="206">▶</text>
|
||||
|
||||
<!-- left: 基础模板编辑区 -->
|
||||
<text class="sec" x="66" y="240" font-size="12">基础模板（可编辑）</text>
|
||||
<rect class="btn" x="372" y="224" width="90" height="22" rx="5"/><text class="btnT" x="382" y="239">插入变量 ▾</text>
|
||||
<rect class="ta" x="66" y="250" width="396" height="244" rx="6"/>
|
||||
<text class="tpl" x="76" y="270" fill="#2f6fed">{分类要求}</text>
|
||||
<text class="tpl" x="76" y="287">平台：<tspan class="ph">{平台}</tspan>；国家地区：<tspan class="ph">{国家地区}</tspan>；输出语言：<tspan class="ph">{输出语言}</tspan>。</text>
|
||||
<text class="tpl" x="76" y="304">图片比例：<tspan class="ph">{图片比例}</tspan>。</text>
|
||||
<text class="tpl" x="76" y="321">套图分类：<tspan class="ph">{套图分类}</tspan>；当前为本分类第 <tspan class="ph">{分类序号}</tspan>/<tspan class="ph">{分类总数}</tspan> 张。</text>
|
||||
<text class="tpl" x="76" y="338">当前主参考图序号：<tspan class="ph">{主参考图序号}</tspan>。</text>
|
||||
<text class="tpl" x="76" y="355" fill="#2f6fed">{参考图规则}</text>
|
||||
<text class="tpl" x="76" y="372" fill="#2f6fed">{差异化要求}</text>
|
||||
<text class="tpl" x="76" y="389">商品ID：<tspan class="ph">{商品ID}</tspan></text>
|
||||
<text class="tpl" x="76" y="406">商品卖点与要求：</text>
|
||||
<text class="tpl" x="76" y="423" fill="#2f6fed">{商品卖点与要求}</text>
|
||||
<text class="ok" x="66" y="512">✓ 校验通过：必需变量齐全 · 无未知变量 · 差异化要求独占一行</text>
|
||||
<text class="mut" x="66" y="528">校验失败（缺必需变量/未知变量/未闭合花括号）→ 中文错误，「保存」禁用</text>
|
||||
|
||||
<!-- insert variable menu popup -->
|
||||
<rect x="309" y="251" width="156" height="176" rx="6" fill="#1f2733" opacity="0.10"/>
|
||||
<rect x="306" y="248" width="156" height="176" rx="6" fill="#fff" stroke="#c5ccd6"/>
|
||||
<rect x="307" y="253" width="154" height="18" fill="#eef2fb"/>
|
||||
<text class="selT" x="316" y="266" fill="#2f6fed">{分类要求}</text><text class="mut" x="416" y="266">必需</text>
|
||||
<text class="selT" x="316" y="285" fill="#2f6fed">{套图分类}</text><text class="mut" x="416" y="285">必需</text>
|
||||
<text class="selT" x="316" y="304" fill="#2f6fed">{图片比例}</text><text class="mut" x="416" y="304">必需</text>
|
||||
<text class="selT" x="316" y="323" fill="#2f6fed">{分类序号}</text><text class="mut" x="416" y="323">必需</text>
|
||||
<text class="selT" x="316" y="342" fill="#2f6fed">{分类总数}</text><text class="mut" x="416" y="342">必需</text>
|
||||
<text class="selT" x="316" y="361" fill="#2f6fed">{差异化要求}</text><text class="mut" x="416" y="361">必需</text>
|
||||
<text class="selT" x="316" y="380" fill="#2f6fed">{参考图规则}</text><text class="mut" x="416" y="380">必需</text>
|
||||
<text class="selT" x="316" y="399" fill="#2f6fed">{商品卖点与要求}</text><text class="mut" x="416" y="399">必需</text>
|
||||
<text class="mut" x="316" y="418">… 共 13 个变量 · 插入到光标处</text>
|
||||
|
||||
<!-- splitter -->
|
||||
<circle cx="470" cy="362" r="1.5" fill="#c5ccd6"/><circle cx="470" cy="370" r="1.5" fill="#c5ccd6"/><circle cx="470" cy="378" r="1.5" fill="#c5ccd6"/>
|
||||
|
||||
<!-- right: 最终提示词实时预览 -->
|
||||
<text class="sec" x="478" y="240" font-size="12">最终提示词预览（只读）</text>
|
||||
<text class="mut" x="740" y="240">实时刷新 · 200ms 防抖</text>
|
||||
<rect class="ta" x="478" y="250" width="398" height="270" rx="6"/>
|
||||
<text class="tpl" x="488" y="270">场景图：在真实使用场景中展示商品效果</text>
|
||||
<text class="tpl" x="488" y="287">平台：Shopee；国家地区：中国台湾；输出语言：繁体中文。</text>
|
||||
<text class="tpl" x="488" y="304">图片比例：1:1。</text>
|
||||
<text class="tpl" x="488" y="321">套图分类：场景图；当前为本分类第 2/2 张。</text>
|
||||
<text class="tpl" x="488" y="338">当前主参考图序号：1。</text>
|
||||
<text class="tpl" x="488" y="355">当前图片为本任务唯一主参考图。</text>
|
||||
<text class="tpl" x="488" y="372">本分类第 2 张：与本分类其他图片采用不同构图、角度或场景。</text>
|
||||
<text class="tpl" x="488" y="389">商品ID：51100639510</text>
|
||||
<text class="tpl" x="488" y="406">商品卖点与要求：</text>
|
||||
<text class="tpl" x="488" y="423">韩版加绒卫衣，显瘦保暖，通勤日常皆宜。</text>
|
||||
<rect x="486" y="436" width="382" height="72" rx="4" fill="#fdf6e7" stroke="#e6cf9a"/>
|
||||
<text x="496" y="453" font-size="11" font-weight="600" fill="#8a6d1f">🔒 强制保护规则（代码追加 · 编辑器不可删除）</text>
|
||||
<text x="496" y="470" font-size="10" fill="#6d5a23">保持商品主体、款式、颜色和关键细节准确；</text>
|
||||
<text x="496" y="484" font-size="10" fill="#6d5a23">不添加无依据的功能、参数、认证、价格、折扣或尺码；</text>
|
||||
<text x="496" y="498" font-size="10" fill="#6d5a23">不编造用户与参考图均未提供的信息。</text>
|
||||
<text class="mut" x="478" y="536">与新建 job 落库的最终 prompt 完全一致 · 预览不产生 cmhub 请求/点数</text>
|
||||
|
||||
<!-- dialog footer -->
|
||||
<line x1="66" y1="550" x2="874" y2="550" stroke="#eef0f5"/>
|
||||
<text class="mut" x="66" y="572">关闭含未保存修改 → 「保存 / 不保存 / 取消」三选项 · 任何失败不损坏原模板</text>
|
||||
<text class="mut" x="586" y="572">默认预览白底图；本图已切至场景图第 2 张核对差异化</text>
|
||||
|
||||
<!-- footnote -->
|
||||
<text class="mut" x="50" y="612">预览序号：主参考图序号＝1，分类序号＝步进器值，分类总数＝max(1, 分类配置数量)；分类数量 0/1 时步进器禁用并显示 1/1</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
Reference in New Issue
Block a user