shiyue/OpenRouter_Image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增强图像查看器功能并添加“全部下载”按钮在imageViewerModal中添加了全屏查看、左右翻页和删除图像功能。在index.html中新增了downloadAllImagesBtn按钮，用于一键下载所有生成的图像。script.js中相应实现了这些新功能的逻辑。

Browse Source
This commit is contained in:
shiyue
2025-08-29 13:51:49 +08:00
parent 8cfa2a8ac9
commit db6d9efd95
3 changed files with 384 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@@ -137,7 +137,12 @@
<!-- 生成的图像画廊 -->
<div class="mb-4">
<h5><i class="fas fa-images me-2"></i>生成的图像</h5>
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0"><i class="fas fa-images me-2"></i>生成的图像</h5>
<button class="btn btn-success" id="downloadAllImagesBtn" style="display: none;">
<i class="fas fa-download me-2"></i>全部下载
</button>
</div>
<div class="image-gallery" id="imageGallery"></div>
</div>
</div>
@@ -149,20 +154,34 @@
<!-- 新的图像查看模态框 -->
<div class="modal fade" id="imageViewerModal" tabindex="-1" aria-labelledby="imageViewerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-dialog modal-dialog-centered modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageViewerModalLabel">图像查看</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<div class="modal-body text-center position-relative">
<!-- 左翻页按钮 -->
<button type="button" class="btn btn-light position-absolute top-50 start-0 translate-middle-y" id="prevImageBtn">
<i class="fas fa-chevron-left"></i>
</button>
<!-- 图像显示区域 -->
<img id="viewerModalImage" src="" alt="查看图像" class="img-fluid">
<!-- 右翻页按钮 -->
<button type="button" class="btn btn-light position-absolute top-50 end-0 translate-middle-y" id="nextImageBtn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-danger" id="viewerDeleteImage">
<i class="fas fa-trash me-2"></i>删除图像
</button>
<button type="button" class="btn btn-primary" id="viewerDownloadImage">
<i class="fas fa-download me-2"></i>下载图像
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>