新增ai修图
This commit is contained in:
XHYourName
47
docs/assets/travel-album-ai/01-photo-preview-flow.svg
Normal file
47
docs/assets/travel-album-ai/01-photo-preview-flow.svg
Normal file
@ -0,0 +1,47 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="430" viewBox="0 0 1200 430">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#4D7CFE"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 700 24px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.label { font: 600 17px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.small { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #5D6B7C; }
|
||||
.box { fill: #FFFFFF; stroke: #B9C8DA; stroke-width: 2; }
|
||||
.active { fill: #EEF4FF; stroke: #4D7CFE; stroke-width: 2.5; }
|
||||
.action { fill: #F6F8FB; stroke: #D5DEE9; stroke-width: 2; }
|
||||
.line { fill: none; stroke: #4D7CFE; stroke-width: 2.5; marker-end: url(#arrow); }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1200" height="430" rx="24" fill="#F7F9FC"/>
|
||||
<text x="42" y="52" class="title">照片预览与左右切换</text>
|
||||
<rect x="42" y="92" width="205" height="104" rx="16" class="box"/>
|
||||
<text x="144" y="126" text-anchor="middle" class="label">相册管理缩略图</text>
|
||||
<text x="144" y="158" text-anchor="middle" class="small">点击任意照片</text>
|
||||
<path d="M247 144 H326" class="line"/>
|
||||
<rect x="326" y="78" width="300" height="132" rx="18" class="active"/>
|
||||
<text x="476" y="115" text-anchor="middle" class="label">单一返回按钮 + 文件信息</text>
|
||||
<text x="476" y="146" text-anchor="middle" class="small">文件名 / 文件大小 / 当前照片</text>
|
||||
<text x="476" y="176" text-anchor="middle" class="small">底部：AI修图、删除、刷新</text>
|
||||
<path d="M626 144 H706" class="line"/>
|
||||
<rect x="706" y="78" width="205" height="132" rx="18" class="box"/>
|
||||
<text x="808" y="115" text-anchor="middle" class="label">左右滑动</text>
|
||||
<text x="808" y="146" text-anchor="middle" class="small">切换上一张 / 下一张</text>
|
||||
<text x="808" y="176" text-anchor="middle" class="small">首尾不循环</text>
|
||||
<path d="M911 144 H990" class="line"/>
|
||||
<rect x="990" y="92" width="168" height="104" rx="16" class="box"/>
|
||||
<text x="1074" y="126" text-anchor="middle" class="label">同步刷新信息</text>
|
||||
<text x="1074" y="158" text-anchor="middle" class="small">名称、大小、结果状态</text>
|
||||
<rect x="42" y="258" width="344" height="112" rx="16" class="action"/>
|
||||
<text x="214" y="292" text-anchor="middle" class="label">删除当前照片</text>
|
||||
<text x="214" y="323" text-anchor="middle" class="small">删除后定位到相邻照片</text>
|
||||
<text x="214" y="349" text-anchor="middle" class="small">最后一张删除后返回相册管理</text>
|
||||
<rect x="428" y="258" width="344" height="112" rx="16" class="action"/>
|
||||
<text x="600" y="292" text-anchor="middle" class="label">刷新当前照片</text>
|
||||
<text x="600" y="323" text-anchor="middle" class="small">重新加载原图或最新修图结果</text>
|
||||
<text x="600" y="349" text-anchor="middle" class="small">加载失败保留当前可见内容</text>
|
||||
<rect x="814" y="258" width="344" height="112" rx="16" class="action"/>
|
||||
<text x="986" y="292" text-anchor="middle" class="label">预览底部操作</text>
|
||||
<text x="986" y="323" text-anchor="middle" class="small">保留 AI修图、删除、刷新</text>
|
||||
<text x="986" y="349" text-anchor="middle" class="small">不展示打印按钮</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
44
docs/assets/travel-album-ai/02-multi-select-flow.svg
Normal file
44
docs/assets/travel-album-ai/02-multi-select-flow.svg
Normal file
@ -0,0 +1,44 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="430" viewBox="0 0 1200 430">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#4D7CFE"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 700 24px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.label { font: 600 17px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.small { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #5D6B7C; }
|
||||
.box { fill: #FFFFFF; stroke: #B9C8DA; stroke-width: 2; }
|
||||
.active { fill: #EEF4FF; stroke: #4D7CFE; stroke-width: 2.5; }
|
||||
.danger { fill: #FFF1F1; stroke: #E35D6A; stroke-width: 2; }
|
||||
.line { fill: none; stroke: #4D7CFE; stroke-width: 2.5; marker-end: url(#arrow); }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1200" height="430" rx="24" fill="#F7F9FC"/>
|
||||
<text x="42" y="52" class="title">相册管理多选操作栏</text>
|
||||
<rect x="42" y="92" width="215" height="110" rx="16" class="box"/>
|
||||
<text x="149" y="127" text-anchor="middle" class="label">普通浏览状态</text>
|
||||
<text x="149" y="160" text-anchor="middle" class="small">底部显示“上传照片”</text>
|
||||
<path d="M257 147 H337" class="line"/>
|
||||
<rect x="337" y="92" width="215" height="110" rx="16" class="active"/>
|
||||
<text x="444" y="127" text-anchor="middle" class="label">点击右上角选择</text>
|
||||
<text x="444" y="160" text-anchor="middle" class="small">缩略图出现单选圆圈</text>
|
||||
<path d="M552 147 H632" class="line"/>
|
||||
<rect x="632" y="92" width="225" height="110" rx="16" class="active"/>
|
||||
<text x="744" y="127" text-anchor="middle" class="label">进入多选状态</text>
|
||||
<text x="744" y="160" text-anchor="middle" class="small">上传按钮隐藏</text>
|
||||
<text x="744" y="184" text-anchor="middle" class="small">显示 AI修图、删除</text>
|
||||
<path d="M857 147 H937" class="line"/>
|
||||
<rect x="937" y="92" width="221" height="110" rx="16" class="box"/>
|
||||
<text x="1048" y="127" text-anchor="middle" class="label">选择至少 1 张</text>
|
||||
<text x="1048" y="160" text-anchor="middle" class="small">两个操作按钮恢复可用</text>
|
||||
<rect x="140" y="268" width="310" height="110" rx="16" class="active"/>
|
||||
<text x="295" y="304" text-anchor="middle" class="label">点击 AI修图</text>
|
||||
<text x="295" y="336" text-anchor="middle" class="small">进入批量 AI 修图弹窗</text>
|
||||
<text x="295" y="360" text-anchor="middle" class="small">包含处理中照片时按钮置灰</text>
|
||||
<rect x="750" y="268" width="310" height="110" rx="16" class="danger"/>
|
||||
<text x="905" y="304" text-anchor="middle" class="label">点击删除</text>
|
||||
<text x="905" y="336" text-anchor="middle" class="small">二次确认后删除选中素材</text>
|
||||
<text x="905" y="360" text-anchor="middle" class="small">取消确认则保持原选择</text>
|
||||
<path d="M744 202 V235 H295 V268" class="line"/>
|
||||
<path d="M744 202 V235 H905 V268" class="line"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
31
docs/assets/travel-album-ai/02-upload-transfer-mode-flow.svg
Normal file
31
docs/assets/travel-album-ai/02-upload-transfer-mode-flow.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="300" viewBox="0 0 1080 300">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#7A8699"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 600 18px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #1F2937; }
|
||||
.detail { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #667085; }
|
||||
.box { fill: #FFFFFF; stroke: #D9E2EF; stroke-width: 2; rx: 16; }
|
||||
.active { fill: #EEF5FF; stroke: #1677FF; stroke-width: 2; rx: 16; }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1080" height="300" fill="#F7F9FC"/>
|
||||
<rect class="box" x="40" y="104" width="180" height="92"/>
|
||||
<text class="title" x="130" y="142" text-anchor="middle">相册管理</text>
|
||||
<text class="detail" x="130" y="170" text-anchor="middle">点击上传照片</text>
|
||||
<line x1="220" y1="150" x2="292" y2="150" stroke="#7A8699" stroke-width="2" marker-end="url(#arrow)"/>
|
||||
<rect class="active" x="305" y="70" width="230" height="160"/>
|
||||
<text class="title" x="420" y="108" text-anchor="middle">选择传输模式</text>
|
||||
<text class="detail" x="420" y="142" text-anchor="middle">边拍边传</text>
|
||||
<text class="detail" x="420" y="174" text-anchor="middle">拍后传输</text>
|
||||
<text class="detail" x="420" y="206" text-anchor="middle">取消：留在当前页</text>
|
||||
<line x1="535" y1="118" x2="622" y2="78" stroke="#7A8699" stroke-width="2" marker-end="url(#arrow)"/>
|
||||
<line x1="535" y1="182" x2="622" y2="222" stroke="#7A8699" stroke-width="2" marker-end="url(#arrow)"/>
|
||||
<rect class="box" x="635" y="28" width="400" height="100"/>
|
||||
<text class="title" x="835" y="68" text-anchor="middle">有线传输 · 边拍边传</text>
|
||||
<text class="detail" x="835" y="96" text-anchor="middle">新照片传入后自动上传当前相册</text>
|
||||
<rect class="box" x="635" y="172" width="400" height="100"/>
|
||||
<text class="title" x="835" y="212" text-anchor="middle">有线传输 · 拍后传输</text>
|
||||
<text class="detail" x="835" y="240" text-anchor="middle">拍摄完成后选择照片批量上传</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
56
docs/assets/travel-album-ai/03-ai-edit-sheet-flow.svg
Normal file
56
docs/assets/travel-album-ai/03-ai-edit-sheet-flow.svg
Normal file
@ -0,0 +1,56 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="470" viewBox="0 0 1200 470">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#4D7CFE"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 700 24px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.label { font: 600 17px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.small { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #5D6B7C; }
|
||||
.box { fill: #FFFFFF; stroke: #B9C8DA; stroke-width: 2; }
|
||||
.active { fill: #EEF4FF; stroke: #4D7CFE; stroke-width: 2.5; }
|
||||
.optional { fill: #FFF8E8; stroke: #F2A93B; stroke-width: 2; }
|
||||
.line { fill: none; stroke: #4D7CFE; stroke-width: 2.5; marker-end: url(#arrow); }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1200" height="470" rx="24" fill="#F7F9FC"/>
|
||||
<text x="42" y="52" class="title">AI 修图弹窗：原图精修、氛围感与结果组合</text>
|
||||
<rect x="42" y="92" width="190" height="116" rx="16" class="box"/>
|
||||
<text x="137" y="127" text-anchor="middle" class="label">打开 AI修图</text>
|
||||
<text x="137" y="158" text-anchor="middle" class="small">显示已选照片数量</text>
|
||||
<text x="137" y="183" text-anchor="middle" class="small">内容区域可纵向滚动</text>
|
||||
<path d="M232 150 H272" class="line"/>
|
||||
<rect x="272" y="78" width="230" height="144" rx="18" class="active"/>
|
||||
<text x="387" y="116" text-anchor="middle" class="label">原图精修</text>
|
||||
<text x="387" y="148" text-anchor="middle" class="small">预设文字 + 对应效果图</text>
|
||||
<text x="387" y="174" text-anchor="middle" class="small">横向滚动，始终单选</text>
|
||||
<text x="387" y="200" text-anchor="middle" class="small">生成基础“精修后”结果</text>
|
||||
<path d="M502 150 H542" class="line"/>
|
||||
<rect x="542" y="78" width="230" height="144" rx="18" class="optional"/>
|
||||
<text x="657" y="116" text-anchor="middle" class="label">氛围感修图（选填）</text>
|
||||
<text x="657" y="148" text-anchor="middle" class="small">横向滚动，多样式单选</text>
|
||||
<text x="657" y="174" text-anchor="middle" class="small">默认不选，重复点击可取消</text>
|
||||
<text x="657" y="200" text-anchor="middle" class="small">额外生成独立氛围感结果</text>
|
||||
<path d="M772 150 H812" class="line"/>
|
||||
<rect x="812" y="92" width="170" height="116" rx="16" class="box"/>
|
||||
<text x="897" y="127" text-anchor="middle" class="label">只读额度</text>
|
||||
<text x="897" y="158" text-anchor="middle" class="small">显示剩余 9 张</text>
|
||||
<text x="897" y="183" text-anchor="middle" class="small">不提供勾选操作</text>
|
||||
<path d="M982 150 H1014" class="line"/>
|
||||
<rect x="1014" y="92" width="144" height="116" rx="16" class="active"/>
|
||||
<text x="1086" y="127" text-anchor="middle" class="label">点击确定</text>
|
||||
<text x="1086" y="158" text-anchor="middle" class="small">提交样式组合</text>
|
||||
<text x="1086" y="183" text-anchor="middle" class="small">开始处理</text>
|
||||
<rect x="42" y="286" width="344" height="120" rx="16" class="box"/>
|
||||
<text x="214" y="322" text-anchor="middle" class="label">点击取消 / 下拉关闭</text>
|
||||
<text x="214" y="354" text-anchor="middle" class="small">不启动任务</text>
|
||||
<text x="214" y="380" text-anchor="middle" class="small">不改变原图、旧结果或额度状态</text>
|
||||
<rect x="428" y="286" width="344" height="120" rx="16" class="box"/>
|
||||
<text x="600" y="322" text-anchor="middle" class="label">效果图预览</text>
|
||||
<text x="600" y="354" text-anchor="middle" class="small">各样式卡片显示“预览”按钮</text>
|
||||
<text x="600" y="380" text-anchor="middle" class="small">全屏查看，不改变当前选中项</text>
|
||||
<rect x="814" y="286" width="344" height="120" rx="16" class="box"/>
|
||||
<text x="986" y="322" text-anchor="middle" class="label">结果独立保存</text>
|
||||
<text x="986" y="354" text-anchor="middle" class="small">原图 / 精修后 / 氛围感分别查看</text>
|
||||
<text x="986" y="380" text-anchor="middle" class="small">再次确认后以新组合覆盖旧结果</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
@ -0,0 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="300" viewBox="0 0 1080 300">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#7A8699"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 600 18px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #1F2937; }
|
||||
.detail { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #667085; }
|
||||
.box { fill: #FFFFFF; stroke: #D9E2EF; stroke-width: 2; rx: 16; }
|
||||
.active { fill: #EEF5FF; stroke: #1677FF; stroke-width: 2; rx: 16; }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1080" height="300" fill="#F7F9FC"/>
|
||||
<rect class="box" x="40" y="104" width="210" height="92"/>
|
||||
<text class="title" x="145" y="142" text-anchor="middle">有线传输照片列表</text>
|
||||
<text class="detail" x="145" y="170" text-anchor="middle">点击任意缩略图</text>
|
||||
<line x1="250" y1="150" x2="320" y2="150" stroke="#7A8699" stroke-width="2" marker-end="url(#arrow)"/>
|
||||
<rect class="active" x="333" y="70" width="260" height="160"/>
|
||||
<text class="title" x="463" y="108" text-anchor="middle">多图全屏预览</text>
|
||||
<text class="detail" x="463" y="142" text-anchor="middle">从被点击照片开始</text>
|
||||
<text class="detail" x="463" y="174" text-anchor="middle">页码显示 当前张 / 总张数</text>
|
||||
<text class="detail" x="463" y="206" text-anchor="middle">不可预览照片自动跳过</text>
|
||||
<line x1="593" y1="112" x2="668" y2="74" stroke="#7A8699" stroke-width="2" marker-end="url(#arrow)"/>
|
||||
<line x1="593" y1="188" x2="668" y2="226" stroke="#7A8699" stroke-width="2" marker-end="url(#arrow)"/>
|
||||
<rect class="box" x="681" y="28" width="354" height="100"/>
|
||||
<text class="title" x="858" y="68" text-anchor="middle">向右滑动</text>
|
||||
<text class="detail" x="858" y="96" text-anchor="middle">查看上一张，第一张处停止</text>
|
||||
<rect class="box" x="681" y="172" width="354" height="100"/>
|
||||
<text class="title" x="858" y="212" text-anchor="middle">向左滑动</text>
|
||||
<text class="detail" x="858" y="240" text-anchor="middle">查看下一张，最后一张处停止</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
49
docs/assets/travel-album-ai/04-ai-task-state-flow.svg
Normal file
49
docs/assets/travel-album-ai/04-ai-task-state-flow.svg
Normal file
@ -0,0 +1,49 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#4D7CFE"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 700 24px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.label { font: 600 17px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.small { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #5D6B7C; }
|
||||
.box { fill: #FFFFFF; stroke: #B9C8DA; stroke-width: 2; }
|
||||
.processing { fill: #EEF4FF; stroke: #4D7CFE; stroke-width: 2.5; }
|
||||
.success { fill: #EEFAF3; stroke: #37A86B; stroke-width: 2.5; }
|
||||
.failed { fill: #FFF1F1; stroke: #E35D6A; stroke-width: 2.5; }
|
||||
.line { fill: none; stroke: #4D7CFE; stroke-width: 2.5; marker-end: url(#arrow); }
|
||||
.retry { fill: none; stroke: #E35D6A; stroke-width: 2.5; marker-end: url(#arrow); }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1200" height="500" rx="24" fill="#F7F9FC"/>
|
||||
<text x="42" y="52" class="title">AI 修图任务生命周期与覆盖规则</text>
|
||||
<rect x="42" y="104" width="205" height="116" rx="16" class="box"/>
|
||||
<text x="144" y="140" text-anchor="middle" class="label">可发起</text>
|
||||
<text x="144" y="172" text-anchor="middle" class="small">未修图或已有旧结果</text>
|
||||
<text x="144" y="198" text-anchor="middle" class="small">AI修图按钮可点击</text>
|
||||
<path d="M247 162 H337" class="line"/>
|
||||
<rect x="337" y="104" width="230" height="116" rx="16" class="processing"/>
|
||||
<text x="452" y="140" text-anchor="middle" class="label">修图中</text>
|
||||
<text x="452" y="172" text-anchor="middle" class="small">按钮置灰，禁止重复提交</text>
|
||||
<text x="452" y="198" text-anchor="middle" class="small">离开页面后任务继续完成</text>
|
||||
<path d="M567 142 H692" class="line"/>
|
||||
<path d="M567 182 H692" class="retry"/>
|
||||
<rect x="692" y="76" width="230" height="116" rx="16" class="success"/>
|
||||
<text x="807" y="112" text-anchor="middle" class="label">成功</text>
|
||||
<text x="807" y="144" text-anchor="middle" class="small">分别保存精修与氛围感结果</text>
|
||||
<text x="807" y="170" text-anchor="middle" class="small">默认展示“精修后”</text>
|
||||
<rect x="692" y="228" width="230" height="116" rx="16" class="failed"/>
|
||||
<text x="807" y="264" text-anchor="middle" class="label">失败</text>
|
||||
<text x="807" y="296" text-anchor="middle" class="small">显示“修图失败”</text>
|
||||
<text x="807" y="322" text-anchor="middle" class="small">恢复 AI修图按钮，可重试</text>
|
||||
<path d="M922 134 H1012" class="line"/>
|
||||
<rect x="1012" y="76" width="146" height="116" rx="16" class="box"/>
|
||||
<text x="1085" y="112" text-anchor="middle" class="label">再次修图</text>
|
||||
<text x="1085" y="144" text-anchor="middle" class="small">新组合完成后</text>
|
||||
<text x="1085" y="170" text-anchor="middle" class="small">整组覆盖旧结果</text>
|
||||
<path d="M1085 192 V405 H144 V220" class="line"/>
|
||||
<path d="M807 344 V405 H452 V220" class="retry"/>
|
||||
<rect x="337" y="380" width="230" height="82" rx="16" class="box"/>
|
||||
<text x="452" y="414" text-anchor="middle" class="label">还原为原图</text>
|
||||
<text x="452" y="440" text-anchor="middle" class="small">清除精修、氛围感、封面及失败状态</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
52
docs/assets/travel-album-ai/05-cover-template-flow.svg
Normal file
52
docs/assets/travel-album-ai/05-cover-template-flow.svg
Normal file
@ -0,0 +1,52 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#4D7CFE"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 700 24px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.label { font: 600 17px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.small { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #5D6B7C; }
|
||||
.box { fill: #FFFFFF; stroke: #B9C8DA; stroke-width: 2; }
|
||||
.active { fill: #EEF4FF; stroke: #4D7CFE; stroke-width: 2.5; }
|
||||
.free { fill: #FFF8E8; stroke: #F2A93B; stroke-width: 2.5; }
|
||||
.cover { fill: #FFF4E8; stroke: #F59E0B; stroke-width: 2.5; }
|
||||
.line { fill: none; stroke: #4D7CFE; stroke-width: 2.5; marker-end: url(#arrow); }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1200" height="500" rx="24" fill="#F7F9FC"/>
|
||||
<text x="42" y="52" class="title">多图三类风格选择与封面生成</text>
|
||||
<rect x="42" y="92" width="220" height="116" rx="16" class="box"/>
|
||||
<text x="152" y="128" text-anchor="middle" class="label">统计选中照片数</text>
|
||||
<text x="152" y="160" text-anchor="middle" class="small">进入批量 AI 修图前判断</text>
|
||||
<text x="152" y="186" text-anchor="middle" class="small">阈值以当前需求为准</text>
|
||||
<path d="M262 150 H342" class="line"/>
|
||||
<rect x="342" y="76" width="230" height="148" rx="18" class="active"/>
|
||||
<text x="457" y="112" text-anchor="middle" class="label">数量是否 ≥ 4 张？</text>
|
||||
<text x="457" y="147" text-anchor="middle" class="small">否：显示精修 + 氛围感</text>
|
||||
<text x="457" y="175" text-anchor="middle" class="small">是：再显示封面模板</text>
|
||||
<text x="457" y="201" text-anchor="middle" class="small">弹窗自动使用更高高度</text>
|
||||
<path d="M572 150 H652" class="line"/>
|
||||
<rect x="652" y="76" width="250" height="148" rx="18" class="free"/>
|
||||
<text x="777" y="112" text-anchor="middle" class="label">显示三个风格模块</text>
|
||||
<text x="777" y="147" text-anchor="middle" class="small">原图精修：单选基础预设</text>
|
||||
<text x="777" y="175" text-anchor="middle" class="small">氛围感：横向单选，可取消</text>
|
||||
<text x="777" y="201" text-anchor="middle" class="small">封面：横向单选，可全屏预览</text>
|
||||
<path d="M902 150 H982" class="line"/>
|
||||
<rect x="982" y="92" width="176" height="116" rx="16" class="cover"/>
|
||||
<text x="1070" y="128" text-anchor="middle" class="label">确认并生成</text>
|
||||
<text x="1070" y="160" text-anchor="middle" class="small">每张保存独立结果</text>
|
||||
<text x="1070" y="186" text-anchor="middle" class="small">第一张另作封面</text>
|
||||
<rect x="42" y="300" width="344" height="126" rx="16" class="box"/>
|
||||
<text x="214" y="336" text-anchor="middle" class="label">当前免费阶段</text>
|
||||
<text x="214" y="368" text-anchor="middle" class="small">封面 quotaCost = 0，不减少额度</text>
|
||||
<text x="214" y="394" text-anchor="middle" class="small">弹窗显示“赠送 · 不占精修张数”</text>
|
||||
<rect x="428" y="300" width="344" height="126" rx="16" class="box"/>
|
||||
<text x="600" y="336" text-anchor="middle" class="label">未来收费阶段</text>
|
||||
<text x="600" y="368" text-anchor="middle" class="small">服务端将 quotaCost 配置为正数</text>
|
||||
<text x="600" y="394" text-anchor="middle" class="small">确认前展示实际消耗，成功后再扣减</text>
|
||||
<rect x="814" y="300" width="344" height="126" rx="16" class="box"/>
|
||||
<text x="986" y="336" text-anchor="middle" class="label">重复选择封面模板</text>
|
||||
<text x="986" y="368" text-anchor="middle" class="small">新封面效果覆盖旧封面效果</text>
|
||||
<text x="986" y="394" text-anchor="middle" class="small">失败时不把结果标记为已生成</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
51
docs/assets/travel-album-ai/06-thumbnail-state-flow.svg
Normal file
51
docs/assets/travel-album-ai/06-thumbnail-state-flow.svg
Normal file
@ -0,0 +1,51 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520">
|
||||
<defs>
|
||||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
||||
<path d="M0,0 L0,6 L9,3 z" fill="#7A8CA5"/>
|
||||
</marker>
|
||||
<style>
|
||||
.title { font: 700 24px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.label { font: 700 17px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #182230; }
|
||||
.small { font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #5D6B7C; }
|
||||
.card { fill: #FFFFFF; stroke: #D5DEE9; stroke-width: 2; }
|
||||
.line { fill: none; stroke: #7A8CA5; stroke-width: 2.3; marker-end: url(#arrow); }
|
||||
.badge { font: 700 15px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; fill: #FFFFFF; }
|
||||
</style>
|
||||
</defs>
|
||||
<rect width="1200" height="520" rx="24" fill="#F7F9FC"/>
|
||||
<text x="42" y="52" class="title">相册缩略图结果类型与状态优先级</text>
|
||||
<rect x="42" y="98" width="190" height="148" rx="18" class="card"/>
|
||||
<rect x="58" y="114" width="70" height="28" rx="8" fill="#34C759"/>
|
||||
<text x="93" y="134" text-anchor="middle" class="badge">已上传</text>
|
||||
<text x="137" y="178" text-anchor="middle" class="label">普通原图</text>
|
||||
<text x="137" y="210" text-anchor="middle" class="small">显示服务端缩略图</text>
|
||||
<path d="M232 172 H282" class="line"/>
|
||||
<rect x="282" y="98" width="190" height="148" rx="18" class="card"/>
|
||||
<rect x="298" y="114" width="70" height="28" rx="8" fill="#4D7CFE"/>
|
||||
<text x="333" y="134" text-anchor="middle" class="badge">修图中</text>
|
||||
<text x="377" y="178" text-anchor="middle" class="label">处理中</text>
|
||||
<text x="377" y="210" text-anchor="middle" class="small">AI入口同步置灰</text>
|
||||
<path d="M472 172 H522" class="line"/>
|
||||
<rect x="522" y="98" width="190" height="148" rx="18" class="card"/>
|
||||
<rect x="538" y="114" width="70" height="28" rx="8" fill="#6750A4"/>
|
||||
<text x="573" y="134" text-anchor="middle" class="badge">AI已修</text>
|
||||
<text x="617" y="178" text-anchor="middle" class="label">普通修图结果</text>
|
||||
<text x="617" y="210" text-anchor="middle" class="small">缩略图展示最新结果</text>
|
||||
<path d="M712 172 H762" class="line"/>
|
||||
<rect x="762" y="98" width="190" height="148" rx="18" class="card"/>
|
||||
<rect x="778" y="114" width="78" height="28" rx="8" fill="#F59E0B"/>
|
||||
<text x="817" y="134" text-anchor="middle" class="badge">AI封面</text>
|
||||
<text x="857" y="178" text-anchor="middle" class="label">封面结果</text>
|
||||
<text x="857" y="210" text-anchor="middle" class="small">显示封面模板排版图</text>
|
||||
<path d="M952 172 H1002" class="line"/>
|
||||
<rect x="1002" y="98" width="156" height="148" rx="18" class="card"/>
|
||||
<rect x="1018" y="114" width="88" height="28" rx="8" fill="#E53935"/>
|
||||
<text x="1062" y="134" text-anchor="middle" class="badge">修图失败</text>
|
||||
<text x="1080" y="178" text-anchor="middle" class="label">失败结果</text>
|
||||
<text x="1080" y="210" text-anchor="middle" class="small">可再次修图</text>
|
||||
<rect x="42" y="310" width="1116" height="150" rx="18" fill="#FFFFFF" stroke="#D5DEE9" stroke-width="2"/>
|
||||
<text x="70" y="346" class="label">状态显示优先级</text>
|
||||
<text x="70" y="382" class="small">修图中 ＞ 修图失败 ＞ AI封面 ＞ AI已修 ＞ 已上传。高优先级状态先展示，避免处理中或失败被旧成功结果遮盖。</text>
|
||||
<text x="70" y="416" class="small">成功：缩略图切换为最新修图图或封面图；再次成功：覆盖旧结果；还原原图：回到“已上传”；删除素材：同步清除本地结果。</text>
|
||||
<text x="70" y="446" class="small">当前 AI 修图、封面结果及角标为本地演示数据，App 进程重启后会清空；服务端接入后应返回结果类型、状态、结果图地址和模板 ID。</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
261
docs/相册管理与AI修图功能说明.md
Normal file
261
docs/相册管理与AI修图功能说明.md
Normal file
@ -0,0 +1,261 @@
|
||||
# 相册管理与 AI 修图功能说明
|
||||
|
||||
> 文档日期：2026-07-29
|
||||
> 适用范围：新增相册 → 相册任务 → 相册管理 → 照片上传与传输 → 照片预览与 AI 修图
|
||||
> 数据说明：相册和照片列表、有线相机连接及照片传输继续使用项目已有真实数据能力；传输模式选择保存在本地。原图精修结果、氛围感结果、封面模板、剩余 9 张额度及状态角标目前为本地可演示数据，尚未接入服务端持久化，App 进程重启后会清空。
|
||||
|
||||
## 1. 照片预览、左右滑动与底部操作
|
||||
|
||||
### 功能说明
|
||||
|
||||
用户在“相册管理”照片网格中点击任意缩略图，进入单张照片预览页。页面只保留一个返回按钮，导航区域展示当前照片文件名和文件大小；照片区域支持左右滑动查看同一相册内的上一张或下一张照片。
|
||||
|
||||
预览页统一使用黑色沉浸式自定义头部，不再混用系统导航栏：左侧为圆形返回按钮，中间展示文件名和文件大小，右侧展示“当前张数/总张数”。切换照片时三处信息同步更新。照片预览与原图精修、氛围感、封面模板预览都直接使用同一个全屏模态容器，不进入项目导航栈，因此不会叠加系统白色导航栏或出现两个返回按钮；关闭后回到进入前的相册管理页或修图弹窗。
|
||||
|
||||
底部固定展示以下三个操作，不展示打印按钮：
|
||||
|
||||
| 操作 | 点击结果 | 操作期间或异常处理 |
|
||||
| --- | --- | --- |
|
||||
| AI修图 | 打开当前照片的 AI 修图弹窗 | 当前照片处于“修图中”时按钮置灰，避免重复提交 |
|
||||
| 删除 | 二次确认后删除当前照片 | 删除成功后自动定位到相邻照片；删除最后一张后返回相册管理 |
|
||||
| 刷新 | 重新加载当前照片及最新修图结果 | 刷新失败时不清空当前已显示内容，可再次点击 |
|
||||
|
||||
左右滑动时同步刷新文件名、文件大小、原图/修图后状态和底部按钮状态。第一张继续向右滑、最后一张继续向左滑时保持当前照片，不循环跳转。
|
||||
|
||||
页面底部图标使用项目内 `TravelAlbumPreviewIcons` SVG 资源，确保 AI 修图、删除、刷新三个入口视觉一致。
|
||||
|
||||
### 状态流转图
|
||||
|
||||
|
||||
|
||||
### 本功能验收
|
||||
|
||||
- [ ] 从任意缩略图进入时只显示一个返回入口。
|
||||
- [ ] 文件名和文件大小与当前照片一致。
|
||||
- [ ] 导航头部保持黑色沉浸样式，右侧张数随照片切换同步变化。
|
||||
- [ ] 左右滑动后照片和文件信息同步变化。
|
||||
- [ ] 首尾照片不会越界或循环。
|
||||
- [ ] 底部仅显示 AI修图、删除、刷新，不显示打印。
|
||||
- [ ] 删除当前照片后能正确定位或退出预览。
|
||||
|
||||
## 2. 上传照片与传输模式选择
|
||||
|
||||
### 功能说明
|
||||
|
||||
相册管理处于普通状态时，用户点击底部“上传照片”，先从底部弹出“选择传输模式”，展示“边拍边传”和“拍后传输”两个选项。点击任一选项后弹窗关闭，并进入当前相册的有线传输页面；点击“取消”或向下关闭弹窗时停留在相册管理，不改变现有照片和选择状态。
|
||||
|
||||
| 传输模式 | 弹窗说明 | 下一页初始状态 | 后续行为 |
|
||||
| --- | --- | --- | --- |
|
||||
| 边拍边传 | 相机拍摄后，照片自动传输并上传到当前相册 | 传输模式显示“边拍边传” | 新传入 App 的照片自动上传 |
|
||||
| 拍后传输 | 拍摄完成后，再选择相机照片批量传输 | 传输模式显示“拍后传输” | 新照片先保留，用户后续选择并上传 |
|
||||
|
||||
本次弹窗选择优先于本机上一次保存的传输模式，并同步成为新的最近使用模式，确保下一页展示和实际传输行为一致。相册 ID、相册名称、联系电话及照片数据继续沿用相册管理页面的真实数据，不创建新的相册或假照片。
|
||||
|
||||
进入有线传输页面后，非批量选择状态下点击任意照片缩略图，预览页会使用当前 Tab 筛选后的照片顺序，并从被点击照片开始展示。用户可左右滑动查看上一张或下一张，顶部页码随照片同步变化；没有可用预览地址的照片不进入预览序列，也不占用页码。第一张继续向右滑、最后一张继续向左滑时均停留在边界，不循环跳转。处于批量上传选择状态时，点击照片仍执行选择或取消选择，不打开预览。
|
||||
|
||||
### 状态流转图
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 本功能验收
|
||||
|
||||
- [ ] 点击“上传照片”后先显示底部传输模式弹窗，不直接进入下一页。
|
||||
- [ ] 弹窗同时显示“边拍边传”和“拍后传输”及对应说明。
|
||||
- [ ] 选择“边拍边传”后，下一页模式显示为“边拍边传”。
|
||||
- [ ] 选择“拍后传输”后，下一页模式显示为“拍后传输”。
|
||||
- [ ] 本次选择不会被上一次保存的模式覆盖。
|
||||
- [ ] 取消或关闭弹窗后仍停留在相册管理。
|
||||
- [ ] 非批量选择状态点击缩略图后，从被点击照片进入全屏预览。
|
||||
- [ ] 预览可左右滑动查看当前 Tab 中的上一张和下一张，页码同步变化且首尾不循环。
|
||||
- [ ] 批量选择状态点击照片只改变选择状态，不打开预览。
|
||||
|
||||
## 3. 相册管理多选与底部操作栏切换
|
||||
|
||||
### 功能说明
|
||||
|
||||
相册管理页普通状态下，底部显示“上传照片”。用户点击右上角选择按钮后进入多选状态，每张缩略图右上角显示选择圆圈，底部“上传照片”隐藏，替换为“AI修图”和“删除”。
|
||||
|
||||
| 多选状态 | 页面表现 | 可用操作 | 下一状态 |
|
||||
| --- | --- | --- | --- |
|
||||
| 未进入多选 | 不显示选择圆圈，底部显示上传照片 | 点击照片进入预览；点击右上角选择 | 进入多选 |
|
||||
| 已进入但未选照片 | 显示未选圆圈，AI修图和删除置灰 | 选择照片；再次点击右上角选择退出 | 已选择或退出 |
|
||||
| 已选择照片 | 选中照片显示勾选，AI修图和删除可用 | 发起批量修图或批量删除 | 弹窗、处理中或删除结果 |
|
||||
| 选中项含修图中的照片 | 保留当前选择，AI修图置灰 | 等待任务完成；删除仍按现有删除规则处理 | 任务结束后恢复 |
|
||||
| 退出多选 | 清空本次选择，恢复上传照片 | 上传或进入照片预览 | 普通状态 |
|
||||
|
||||
批量删除必须二次确认；用户取消时不删除任何照片并保留当前选择。批量 AI 修图复用与单张预览相同的预设、任务状态和结果覆盖逻辑。
|
||||
|
||||
### 状态流转图
|
||||
|
||||
|
||||
|
||||
### 本功能验收
|
||||
|
||||
- [ ] 进入多选后上传按钮消失，AI修图和删除出现。
|
||||
- [ ] 未选择照片时两个批量按钮不可点击。
|
||||
- [ ] 选择至少一张后两个批量按钮恢复可用。
|
||||
- [ ] 包含修图中照片时不能再次发起 AI 修图。
|
||||
- [ ] 退出多选后选择状态清空并恢复上传按钮。
|
||||
|
||||
## 4. AI 修图弹窗、原图精修、氛围感与按张收费模式
|
||||
|
||||
### 功能说明
|
||||
|
||||
用户从单张预览或相册多选操作栏点击“AI修图”后，以同一个底部弹窗展示 AI 修图配置。标题与弹窗顶部保留足够间距，标题下方展示“已选择 N 张照片”。弹窗内容可纵向滚动，取消和确定按钮固定在底部，照片较多并出现封面模块时也不会遮挡选择项。
|
||||
|
||||
“原图精修”是基础修图模块，使用横向滚动单选列表，每个预设同时展示名称和对应效果图：
|
||||
|
||||
| 预设 | 当前效果用途 |
|
||||
| --- | --- |
|
||||
| 还原为原图 | 清除该照片已有修图结果和封面类型 |
|
||||
| 写真-简约肖像 | 低饱和、提亮的人像效果 |
|
||||
| 写真-清冷古风 | 清冷复古效果 |
|
||||
| 旅拍-锦绣 | 提升饱和度和对比度 |
|
||||
| 旅拍-远山 | 低饱和、柔和远景效果 |
|
||||
| 旅拍-薄雾 | 提亮并降低对比度 |
|
||||
| 油画-夏日 | 偏暖夏日效果 |
|
||||
| 油画-浓郁 | 高饱和、高对比效果 |
|
||||
|
||||
原图精修默认选中“还原为原图”，用户点击其他预设后仅保留一个选中项。没有可用原图时，效果图位置显示稳定占位图，不影响弹窗选择。每张样式效果图右下角都有“预览”按钮，点击后全屏查看当前照片应用该样式的效果，不改变当前选中项。
|
||||
|
||||
“氛围感修图”位于原图精修下方，并明确标记为“选填”。该模块与原图精修保持一致，使用横向滚动效果图单选，当前本地演示包含日落暖阳、复古胶片、清透蓝调、森系薄雾、浓郁故事五种样式。默认不选中；点击一种样式后仅保留该项，再次点击当前样式即可取消。每个样式同样提供“预览”按钮。选中后不是把氛围效果叠加并合并到精修图中，而是为每张照片额外生成一张可独立查看的“氛围感”结果。
|
||||
|
||||
原图精修、氛围感、封面模板和“查看高清图”统一进入同一个沉浸式大图预览页。大图页不再套用系统导航栏，只显示一个返回按钮、当前样式名称和“双指缩放查看细节”提示；关闭后回到原弹窗或照片页，并保留关闭前的选择状态。
|
||||
|
||||
弹窗内的 Tips 会随当前组合实时变化：
|
||||
|
||||
| 当前选择 | 确认后的结果 |
|
||||
| --- | --- |
|
||||
| 仅原图精修 | 每张照片生成 1 个“精修后”结果 |
|
||||
| 原图精修 + 氛围感修图 | 每张照片生成“精修后 + 氛围感”2 个独立结果 |
|
||||
| 有封面、未选氛围感 | 每张照片生成精修结果，第一张选中照片额外生成封面 |
|
||||
| 有封面、已选氛围感 | 每张照片生成精修和氛围感 2 个结果，第一张选中照片再额外生成封面 |
|
||||
|
||||
“修图模式”区域只读展示“AI精修 · 按张收费”和“剩余 9 张”，不再显示勾选圆圈，也不能点击选择。当前剩余数量为本地演示数据，不会真实扣减额度；未来接入服务端时由接口返回剩余额度，并以任务创建成功或服务端明确返回的扣减结果为准。
|
||||
|
||||
点击“确定”提交当前原图精修、氛围感和封面组合并关闭弹窗；点击“取消”或关闭弹窗时不创建任务、不改变旧修图结果，也不改变额度。
|
||||
|
||||
### 状态流转图
|
||||
|
||||
|
||||
|
||||
### 本功能验收
|
||||
|
||||
- [ ] 标题与弹窗顶部间距自然，不贴近顶部。
|
||||
- [ ] 已选照片数量准确。
|
||||
- [ ] 原图精修预设同时展示文字和效果图，并可横向滚动、保持单选。
|
||||
- [ ] 原图精修、氛围感和封面模板效果图均可通过小按钮全屏预览，预览不改变选择。
|
||||
- [ ] 所有大图预览使用同一黑色头部、单一返回入口，并支持双指缩放。
|
||||
- [ ] 氛围感修图横向展示多个效果图，默认不选中、保持单选，可再次点击当前样式取消。
|
||||
- [ ] 同时选择原图精修和氛围感时，每张照片生成两个独立结果。
|
||||
- [ ] Tips 能根据氛围感和封面选择动态说明实际输出结果。
|
||||
- [ ] 修图模式只展示按张收费与剩余张数，不提供选择操作。
|
||||
- [ ] 取消弹窗不会创建任务或覆盖旧结果。
|
||||
|
||||
## 5. AI 修图任务状态、失败重试与结果覆盖
|
||||
|
||||
### 功能说明
|
||||
|
||||
用户确认修图后，所选照片立即进入“修图中”。任务未结束前，相关 AI 修图入口置灰；即使用户离开照片预览页，本地演示任务仍会继续完成，并通过共享结果状态刷新相册缩略图。
|
||||
|
||||
| 任务状态 | 进入条件 | 页面表现 | 可用操作 | 后续状态 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 可发起 | 未修图、已有成功结果或上次任务已结束 | AI修图按钮可用 | 选择预设并确认 | 修图中 |
|
||||
| 修图中 | 已提交预设，等待结果 | 按钮置灰；缩略图显示“修图中” | 查看其他照片、离开页面 | 成功或失败 |
|
||||
| 成功 | 获取原图并完成本地效果处理 | 分别保存精修、氛围感和封面结果；默认展示“精修后”；按钮恢复 | 在已有结果间切换、再次修图、还原原图 | 新任务或已上传 |
|
||||
| 失败 | 原图无法获取或处理失败 | 缩略图显示“修图失败”；按钮恢复 | 再次修图 | 修图中 |
|
||||
|
||||
成功后，照片预览页至少出现“原图 / 精修后”切换；本次选择了氛围感时增加“氛围感”，存在封面结果时增加“封面”。各结果互相独立，不把两个效果合成同一张图；有修图结果时还可以点击“查看高清图”。再次修图时，旧结果在新任务处理期间继续保留，新任务成功后整组替换为本次最新组合：本次未选择氛围感时会清除旧氛围感结果；新任务失败时保留旧成功图片，但状态优先显示“修图失败”，提醒用户本次任务未成功。
|
||||
|
||||
选择“还原为原图”会同时清除修图结果、失败状态和封面类型，缩略图恢复为“已上传”。删除照片时同步清理该照片的本地修图记录，避免已删除照片的结果残留。
|
||||
|
||||
### 状态流转图
|
||||
|
||||
|
||||
|
||||
### 本功能验收
|
||||
|
||||
- [ ] 修图中不能重复点击 AI修图。
|
||||
- [ ] 离开预览页后任务仍能结束并刷新缩略图。
|
||||
- [ ] 成功后可切换查看原图、精修后以及本次实际生成的氛围感或封面。
|
||||
- [ ] 同选原图精修和氛围感时两个结果均可独立查看。
|
||||
- [ ] 再次修图成功后以本次结果组合覆盖旧结果。
|
||||
- [ ] 失败后按钮恢复并允许重试。
|
||||
- [ ] 还原原图后所有本地修图类型和结果被清除。
|
||||
|
||||
## 6. 选中 4 张及以上时的封面模板选择
|
||||
|
||||
### 功能说明
|
||||
|
||||
从相册管理多选照片并点击“AI修图”时，系统根据选中照片数量决定是否展示“封面风格模板”：
|
||||
|
||||
| 选中数量 | 弹窗表现 |
|
||||
| --- | --- |
|
||||
| 1～3 张 | 展示“原图精修 + 氛围感修图（选填）”两个模块，不展示封面模板 |
|
||||
| ≥ 4 张 | 展示“原图精修 + 氛围感修图（选填）+ 封面模板”三个模块，并提高弹窗高度 |
|
||||
|
||||
封面模板为横向滚动单选，默认选中“旅行纪念册”。每个模板效果图右下角提供“预览”按钮，点击后全屏查看完整排版，不改变当前模板选择。当前提供：
|
||||
|
||||
- 旅行纪念册
|
||||
- 简约留白
|
||||
- 景区故事
|
||||
- 电影胶片
|
||||
|
||||
每个模板展示名称和以第一张选中照片生成的排版效果图。用户确认后，所有选中照片先生成原图精修结果；选择了氛围感时，所有照片再各自生成一个氛围感结果；第一张选中照片另外生成独立封面并作为封面承载图。封面不会替代精修或氛围感结果，用户进入预览后可分别切换查看。
|
||||
|
||||
当前所有封面模板 `quotaCost = 0`，弹窗显示“赠送 · 不占精修张数”，不会减少剩余修图额度。后续收费时保留同一选择流程，由服务端为模板返回大于 0 的 `quotaCost`，客户端在确认前显示实际消耗，并以服务端成功结果为准扣减；收费能力目前尚未实现。
|
||||
|
||||
再次对不少于 4 张照片选择新封面模板并修图时，新封面效果覆盖旧封面效果。封面承载图处理失败时不标记为封面成功，缩略图显示“修图失败”并允许重试。选择“还原为原图”时清除封面效果和封面类型。
|
||||
|
||||
### 状态流转图
|
||||
|
||||
|
||||
|
||||
### 本功能验收
|
||||
|
||||
- [ ] 选中 3 张时不显示封面模板。
|
||||
- [ ] 选中 4 张或更多时显示封面模板。
|
||||
- [ ] 有封面模块时，弹窗同时完整显示原图精修、氛围感和封面三个风格模块。
|
||||
- [ ] 封面模板可横向滚动且始终单选。
|
||||
- [ ] 每个封面模板均可独立预览，关闭预览后保留原选择。
|
||||
- [ ] 默认选中旅行纪念册。
|
||||
- [ ] 当前显示赠送并且不消耗精修额度。
|
||||
- [ ] 成功后第一张选中照片成为封面承载图。
|
||||
- [ ] 再次生成封面时以新结果覆盖旧结果。
|
||||
|
||||
## 7. 相册缩略图结果类型与显示优先级
|
||||
|
||||
### 功能说明
|
||||
|
||||
相册管理缩略图左上角复用同一状态位，根据照片当前结果显示不同类型，让用户无需进入预览即可区分未修、处理中、已修、封面和失败照片。
|
||||
|
||||
| 缩略图状态 | 角标文案与颜色 | 缩略图内容 | 进入条件 | 可用操作 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 普通原图 | 绿色“已上传” | 服务端原图或缩略图 | 没有本地修图结果 | 预览、选择、AI修图、删除 |
|
||||
| 处理中 | 蓝色“修图中” | 有旧成功结果时继续显示旧结果，否则显示原图 | AI 任务未结束 | 预览、删除；不能再次修图 |
|
||||
| 普通修图结果 | 紫色“AI已修” | 最新精修图片 | 原图精修成功，可同时存在氛围感结果 | 预览原图/精修后/氛围感、再次修图、还原 |
|
||||
| 封面结果 | 橙色“AI封面” | 所选封面模板排版图 | 封面承载图生成成功 | 预览、再次修图、重新生成封面、还原 |
|
||||
| 修图失败 | 红色“修图失败” | 有旧成功结果时保留旧图，否则显示原图 | 最近一次任务失败 | 再次修图、删除 |
|
||||
|
||||
状态显示优先级为：
|
||||
|
||||
`修图中 > 修图失败 > AI封面 > AI已修 > 已上传`
|
||||
|
||||
该优先级保证处理中或失败状态不会被历史成功结果遮盖。普通修图成功后显示“AI已修”；封面模板成功后，第一张选中照片显示封面排版图和“AI封面”，其他照片继续显示“AI已修”。再次修图成功后缩略图切换为最新结果；还原原图后回到“已上传”；删除照片后对应本地状态一起删除。
|
||||
|
||||
当前状态和结果由内存数据源在相册管理与照片预览之间共享，尚不支持 App 重启后的恢复。服务端接入时至少需要返回素材 ID、任务状态、结果类型、结果图地址、原图精修预设 ID、是否生成氛围感、封面模板 ID、失败原因和额度消耗，客户端才能恢复完全一致的缩略图状态。
|
||||
|
||||
### 状态流转图
|
||||
|
||||
|
||||
|
||||
### 本功能验收
|
||||
|
||||
- [ ] 未修图照片显示“已上传”。
|
||||
- [ ] 修图中照片显示“修图中”且不能重复提交。
|
||||
- [ ] 普通成功结果显示“AI已修”和最新效果图。
|
||||
- [ ] 封面成功结果显示“AI封面”和封面排版图。
|
||||
- [ ] 最近一次任务失败时优先显示“修图失败”。
|
||||
- [ ] 还原、覆盖和删除后缩略图状态同步更新。
|
||||
Reference in New Issue
Block a user