对齐旅拍相册详情页 Android UI，并修复网格预览与布局问题。

重构相册详情为信息卡片、Tab 筛选、排序、批量删除与底部上传栏；修复网格重叠、禁用按钮蒙层，并支持点击预览大图。同步扩展素材列表 API 与 ViewModel 分页逻辑，并优化有线传图缩略图与传输性能。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-30 13:53:59 +08:00
parent c71b45bdfd
commit 5e620623eb
23 changed files with 2000 additions and 288 deletions
--- a/suixinkan/Features/TravelAlbum/Views/TravelAlbumDetail/TravelAlbumDetailMaterialGridItem.swift
+++ b/suixinkan/Features/TravelAlbum/Views/TravelAlbumDetail/TravelAlbumDetailMaterialGridItem.swift
@ -0,0 +1,80 @@
+//
+//  TravelAlbumDetailMaterialGridItem.swift
+//  suixinkan
+//
+//  旅拍相册详情素材网格项，对齐 Android MaterialGridItem。
+//
+
+import SwiftUI
+
+/// 旅拍相册详情素材网格单元。
+struct TravelAlbumDetailMaterialGridItem: View {
+    let material: TravelAlbumMaterial
+    let isSelectionMode: Bool
+    let isSelected: Bool
+    let onSelect: () -> Void
+    let onPreview: () -> Void
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            thumbnailSection
+
+            MiddleTruncatedText(
+                text: material.fileName,
+                font: .systemFont(ofSize: 11),
+                textColor: UIColor(TravelAlbumDetailDesign.text333)
+            )
+            .frame(maxWidth: .infinity, minHeight: 14, maxHeight: 14, alignment: .leading)
+
+            Text(WiredTransferPhotoRecord.formatFileSize(Int64(material.fileSize)))
+                .font(.system(size: 10))
+                .foregroundStyle(TravelAlbumDetailDesign.text999)
+                .lineLimit(1)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .contentShape(Rectangle())
+        .onTapGesture {
+            if isSelectionMode {
+                onSelect()
+            } else {
+                onPreview()
+            }
+        }
+    }
+
+    /// 1:1 缩略图区域，限制在网格单元宽度内避免重叠溢出。
+    private var thumbnailSection: some View {
+        Color.clear
+            .aspectRatio(1, contentMode: .fit)
+            .overlay {
+                RemoteImage(
+                    urlString: material.thumbnailURLString,
+                    contentMode: .fill
+                ) {
+                    Color(hex: 0xE5E7EB)
+                }
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+            }
+            .clipShape(RoundedRectangle(cornerRadius: TravelAlbumDetailDesign.thumbnailCornerRadius))
+            .overlay(alignment: .topLeading) {
+                Text("已上传")
+                    .font(.system(size: 10))
+                    .foregroundStyle(.white)
+                    .padding(.horizontal, 4)
+                    .padding(.vertical, 2)
+                    .background(TravelAlbumDetailDesign.uploadedGreen)
+                    .clipShape(RoundedRectangle(cornerRadius: TravelAlbumDetailDesign.uploadedBadgeCornerRadius))
+                    .padding(4)
+            }
+            .overlay(alignment: .topTrailing) {
+                if isSelectionMode {
+                    Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
+                        .font(.system(size: TravelAlbumDetailDesign.selectionCheckSize))
+                        .foregroundStyle(isSelected ? AppDesign.primary : .white)
+                        .padding(4)
+                        .background(Color.black.opacity(0.4), in: Circle())
+                        .padding(4)
+                }
+            }
+    }
+}