48 lines
3.4 KiB
XML
48 lines
3.4 KiB
XML
<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>
|