import SwiftUI import AVFoundation extension Notification.Name { static let didAddFirstMedia = Notification.Name("didAddFirstMedia") } /// 主上传视图 /// 提供媒体选择、预览和上传功能 @MainActor struct MediaUploadView: View { // MARK: - 属性 /// 上传管理器,负责处理上传逻辑 @StateObject private var uploadManager = MediaUploadManager() /// 控制媒体选择器的显示/隐藏 @State private var showMediaPicker = false /// 当前选中的媒体项 @State private var selectedMedia: MediaType? = nil /// 当前选中的媒体索引集合 @State private var selectedIndices: Set = [] @State private var mediaPickerSelection: [MediaType] = [] // 添加这个状态变量 // MARK: - 视图主体 var body: some View { VStack(spacing: 0) { // 顶部导航栏 topNavigationBar // 上传提示信息 uploadHintView Spacer() .frame(height: uploadManager.selectedMedia.isEmpty ? 80 : 40) // 主上传区域 MainUploadArea( uploadManager: uploadManager, showMediaPicker: $showMediaPicker, selectedMedia: $selectedMedia ) .id("mainUploadArea\(uploadManager.selectedMedia.count)") Spacer() // 继续按钮 continueButton .padding(.bottom, 24) } .background(Color.themeTextWhiteSecondary) .navigationBarTitleDisplayMode(.inline) .navigationBarBackButtonHidden(true) .sheet(isPresented: $showMediaPicker) { // 媒体选择器 mediaPickerView } } // MARK: - 子视图 /// 顶部导航栏 private var topNavigationBar: some View { HStack { // 返回按钮 Button(action: { Router.shared.pop() }) { Image(systemName: "chevron.left") .font(.system(size: 17, weight: .semibold)) .foregroundColor(.themeTextMessageMain) } .padding(.leading, 16) Spacer() // 标题 Text("Complete Your Profile") .font(Typography.font(for: .title2, family: .quicksandBold)) .foregroundColor(.themeTextMessageMain) Spacer() // 右侧占位视图(保持布局平衡) Color.clear .frame(width: 24, height: 24) .padding(.trailing, 16) } .background(Color.themeTextWhiteSecondary) .padding(.horizontal) .zIndex(1) // 确保导航栏显示在最上层 } /// 上传提示视图 private var uploadHintView: some View { HStack { Text("The upload process will take approximately 2 minutes. Thank you for your patience.") .font(.caption) .foregroundColor(.black) .frame(maxWidth: .infinity, alignment: .leading) .padding(3) .background( LinearGradient( gradient: Gradient(colors: [ Color(red: 1.0, green: 0.97, blue: 0.87), .white, Color(red: 1.0, green: 0.97, blue: 0.84) ]), startPoint: .topLeading, endPoint: .bottomTrailing ) .cornerRadius(8) ) .padding(.horizontal) } .padding(.vertical, 8) } /// 继续按钮 private var continueButton: some View { Button(action: { // 处理继续操作 Router.shared.navigate(to: .blindBox(mediaType: .video)) }) { Text("Continue") .font(.headline) .foregroundColor(uploadManager.selectedMedia.isEmpty ? Color.themeTextMessage : Color.themeTextMessageMain) .frame(maxWidth: .infinity) .frame(height: 56) .background(uploadManager.selectedMedia.isEmpty ? Color.white : Color.themePrimary) .cornerRadius(28) .padding(.horizontal, 24) } .buttonStyle(PlainButtonStyle()) .disabled(uploadManager.selectedMedia.isEmpty) } /// 媒体选择器视图 private var mediaPickerView: some View { MediaPicker( selectedMedia: Binding( get: { mediaPickerSelection }, set: { newSelections in print("🔄 开始处理用户选择的媒体文件") print("📌 新选择的媒体数量: \(newSelections.count)") // 记录当前已选择的媒体ID let existingMediaIDs = uploadManager.selectedMedia.map { $0.id } print("📋 当前已选择的媒体ID: \(existingMediaIDs)") // 只处理尚未选择的媒体项 let newItems = newSelections.filter { newItem in let isNew = !uploadManager.selectedMedia.contains { $0.id == newItem.id } print("🔍 检查媒体项 \(newItem.id) - \(isNew ? "新添加" : "已存在")") return isNew } print("✅ 过滤后的新添加媒体数量: \(newItems.count)") if !newItems.isEmpty { print("🔄 开始处理 \(newItems.count) 个新添加的媒体项...") // 记录新添加的媒体类型 newItems.forEach { item in switch item { case .image(let uiImage): print("🖼️ 添加图片 - 尺寸: \(uiImage.size.width)x\(uiImage.size.height)") case .video(let url, _): print("🎥 添加视频 - URL: \(url.lastPathComponent)") } } // 将新项添加到现有选择的开头 let newMedia = newItems + uploadManager.selectedMedia print("📊 更新媒体列表 - 总数: \(newMedia.count) (新增: \(newItems.count), 原有: \(uploadManager.selectedMedia.count))") uploadManager.clearAllMedia() print("🧹 已清空现有媒体列表") uploadManager.addMedia(newMedia) print("✅ 已添加新媒体到上传管理器") // 如果没有选中的媒体,则选中第一个新增的 if selectedIndices.isEmpty { selectedIndices = [0] selectedMedia = newItems.first print("👆 自动选择第一个新增的媒体项: \(selectedMedia?.id ?? "nil")") } else { print("ℹ️ 保持当前选中的媒体项") } // 开始上传新添加的媒体 print("🚀 开始上传新添加的媒体...") uploadManager.startUpload() } else { print("ℹ️ 没有新的媒体项需要添加") } // 重置选择 mediaPickerSelection = [] print("🔄 已重置媒体选择器状态") } ), imageSelectionLimit: max(0, 20 - uploadManager.selectedMedia.filter { if case .image = $0 { return true } return false }.count), videoSelectionLimit: max(0, 5 - uploadManager.selectedMedia.filter { if case .video = $0 { return true } return false }.count), selectionMode: .multiple, onDismiss: handleMediaPickerDismiss, onUploadProgress: { index, progress in print("文件 \(index) 上传进度: \(progress * 100)%") } ) .onAppear { // 重置选择状态当选择器出现时 mediaPickerSelection = [] } } // MARK: - 私有方法 /// 处理媒体选择器关闭事件 private func handleMediaPickerDismiss() { showMediaPicker = false print("媒体选择器关闭 - 开始处理") // 如果有选中的媒体,开始上传 if !uploadManager.selectedMedia.isEmpty { // 不需要在这里开始上传,因为handleMediaChange会处理 } } /// 处理媒体变化 /// - Parameters: /// - newMedia: 新的媒体数组 /// - oldMedia: 旧的媒体数组 private func handleMediaChange(_ newMedia: [MediaType], oldMedia: [MediaType]) { print("开始处理媒体变化,新数量: \(newMedia.count), 原数量: \(oldMedia.count)") // 如果没有变化,直接返回 guard newMedia != oldMedia else { print("媒体未发生变化,跳过处理") return } // 在后台线程处理媒体变化 DispatchQueue.global(qos: .userInitiated).async { [self] in // 找出新增的媒体(在newMedia中但不在oldMedia中的项) let newItems = newMedia.filter { newItem in !oldMedia.contains { $0.id == newItem.id } } print("检测到\(newItems.count)个新增媒体项") // 如果有新增媒体 if !newItems.isEmpty { print("准备添加\(newItems.count)个新项...") // 在主线程更新UI DispatchQueue.main.async { [self] in // 创建新的数组,包含原有媒体和新媒体 var updatedMedia = uploadManager.selectedMedia updatedMedia.append(contentsOf: newItems) // 更新选中的媒体 uploadManager.clearAllMedia() uploadManager.addMedia(updatedMedia) // 如果当前没有选中的媒体,则选中第一个新增的媒体 if selectedIndices.isEmpty && !newItems.isEmpty { selectedIndices = [oldMedia.count] // 选择第一个新增项的索引 selectedMedia = newItems.first } // 开始上传新添加的媒体 uploadManager.startUpload() print("媒体添加完成,总数量: \(uploadManager.selectedMedia.count)") } } } } /// 检查是否有正在上传的文件 /// - Returns: 是否正在上传 private func isUploading() -> Bool { return uploadManager.uploadStatus.values.contains { status in if case .uploading = status { return true } return false } } } // MARK: - 主上传区域 /// 主上传区域视图 /// 显示上传提示、媒体预览和添加更多按钮 struct MainUploadArea: View { // MARK: - 属性 /// 上传管理器 @ObservedObject var uploadManager: MediaUploadManager /// 控制媒体选择器的显示/隐藏 @Binding var showMediaPicker: Bool /// 当前选中的媒体 @Binding var selectedMedia: MediaType? // MARK: - 视图主体 var body: some View { VStack() { Spacer() .frame(height: 30) // 标题 Text("Click to upload 20 images and 5 videos to generate your next blind box.") .font(Typography.font(for: .title2, family: .quicksandBold)) .fontWeight(.bold) .foregroundColor(.black) .multilineTextAlignment(.center) .padding(.horizontal) Spacer() .frame(height: 50) // 主显示区域 if let mediaToDisplay = selectedMedia ?? uploadManager.selectedMedia.first { MediaPreview(media: mediaToDisplay, uploadManager: uploadManager) .id(mediaToDisplay.id) .frame(width: 225, height: 225) .overlay( RoundedRectangle(cornerRadius: 16) .stroke(Color.themePrimary, lineWidth: 5) ) .cornerRadius(16) .shadow(radius: 4) .padding(.horizontal) .transition(.opacity) } else { UploadPromptView(showMediaPicker: $showMediaPicker) } // 媒体预览区域 mediaPreviewSection Spacer() .frame(height: 10) } .onAppear { print("MainUploadArea appeared") print("Selected media count: \(uploadManager.selectedMedia.count)") if selectedMedia == nil, let firstMedia = uploadManager.selectedMedia.first { print("Selecting first media: \(firstMedia.id)") selectedMedia = firstMedia } } .onReceive(NotificationCenter.default.publisher(for: .didAddFirstMedia)) { notification in if let media = notification.userInfo?["media"] as? MediaType, selectedMedia == nil { selectedMedia = media } } .background(Color.white) .cornerRadius(18) .animation(.default, value: selectedMedia?.id) } // MARK: - 子视图 /// 媒体预览区域 private var mediaPreviewSection: some View { Group { if !uploadManager.selectedMedia.isEmpty { VStack(spacing: 4) { // 横向滚动的缩略图列表 ScrollView(.horizontal, showsIndicators: false) { LazyHStack(spacing: 10) { ForEach(Array(uploadManager.selectedMedia.enumerated()), id: \.element.id) { index, media in mediaItemView(for: media, at: index) } // 当没有选择媒体时显示添加更多按钮 if !uploadManager.selectedMedia.isEmpty { addMoreButton } } .padding(.horizontal) } .frame(height: 70) } .padding(.top, 10) } } } /// 单个媒体项视图 /// - Parameters: /// - media: 媒体项 /// - index: 索引 /// - Returns: 媒体项视图 private func mediaItemView(for media: MediaType, at index: Int) -> some View { ZStack(alignment: .topTrailing) { VStack(spacing: 4) { // 媒体预览 MediaPreview(media: media, uploadManager: uploadManager) .frame(width: 58, height: 58) .cornerRadius(8) .shadow(radius: 1) .overlay( // 左上角序号 ZStack(alignment: .topLeading) { // 左上角序号 ZStack(alignment: .topLeading) { Path { path in let radius: CGFloat = 4 let width: CGFloat = 14 let height: CGFloat = 10 // 从左上角开始(带圆角) path.move(to: CGPoint(x: 0, y: radius)) path.addQuadCurve(to: CGPoint(x: radius, y: 0), control: CGPoint(x: 0, y: 0)) // 上边缘(右上角保持直角) path.addLine(to: CGPoint(x: width, y: 0)) // 右边缘(右下角保持直角) path.addLine(to: CGPoint(x: width, y: height - radius)) // 右下角圆角 path.addQuadCurve(to: CGPoint(x: width - radius, y: height), control: CGPoint(x: width, y: height)) // 下边缘(左下角保持直角) path.addLine(to: CGPoint(x: 0, y: height)) // 闭合路径 path.closeSubpath() } .fill(Color(hex: "BEBEBE").opacity(0.6)) Text("\(index + 1)") .font(.system(size: 8, weight: .bold)) .foregroundColor(.black) .frame(width: 14, height: 10) .offset(y: -1) } .frame(width: 14, height: 10, alignment: .topLeading) .padding([.top, .leading], 2) // 右下角视频时长 if case .video(let url, _) = media, let videoURL = url as? URL { VStack { Spacer() HStack { Spacer() Text(getVideoDuration(url: videoURL)) .font(.system(size: 8, weight: .bold)) .foregroundColor(.black) .padding(.horizontal, 4) .frame(height: 10) .background(Color(hex: "BEBEBE").opacity(0.6)) .cornerRadius(2) } .padding([.trailing, .bottom], 0) } } else { VStack { Spacer() HStack { Spacer() Text("") .font(.system(size: 8, weight: .bold)) .foregroundColor(.black) .padding(.horizontal, 4) .frame(height: 10) .background(Color(hex: "BEBEBE").opacity(0.6)) .cornerRadius(2) } .padding([.trailing, .bottom], 0) } .opacity(0) } } ) // 在 mediaItemView 函数中,更新 onTapGesture: // .onTapGesture { // print("Tapped media at index: \(index)") // 添加日志 // withAnimation { // selectedIndices = [index] // selectedMedia = media // } // } // .contentShape(Rectangle()) // 确保整个区域都可点击 // 在 mediaItemView 中,更新 onTapGesture: .onTapGesture { print("点击了媒体项,索引: \(index)") withAnimation { selectedMedia = media // 直接更新选中的媒体 } } .contentShape(Rectangle()) // 确保整个区域都可点击 } // 右上角关闭按钮 Button(action: { // 使用公共API移除媒体 uploadManager.removeMedia(id: media.id) // 重置选中的媒体 if selectedMedia == media { selectedMedia = nil } }) { Image(systemName: "xmark") .font(.system(size: 10, weight: .bold)) .foregroundColor(.black) .frame(width: 12, height: 12) .background( Circle() .fill(Color(hex: "BEBEBE").opacity(0.6)) .frame(width: 12, height: 12) ) } .offset(x: 6, y: -6) // 调整位置,确保完全可见 } .padding(.horizontal,4) .contentShape(Rectangle()) } /// 上传状态视图 /// - Parameter index: 媒体索引 /// - Returns: 状态视图 @ViewBuilder private func uploadStatusView(for index: Int) -> some View { if let status = uploadManager.uploadStatus["\(index)"] { switch status { case .uploading(let progress): // 上传中,显示进度条 VStack(alignment: .center, spacing: 2) { Text("\(Int(progress * 100))%") .font(.caption2) .foregroundColor(.gray) ProgressView(value: progress, total: 1.0) .progressViewStyle(LinearProgressViewStyle()) .frame(height: 3) .padding(.horizontal, 4) .padding(.bottom, 2) } .frame(width: 60) case .completed: // 上传完成,显示完成图标 Image(systemName: "checkmark.circle.fill") .font(.caption) .foregroundColor(.green) case .failed: // 上传失败,显示错误图标 Image(systemName: "exclamationmark.triangle.fill") .font(.caption) .foregroundColor(.red) default: EmptyView() } } } /// 添加更多按钮 private var addMoreButton: some View { Button(action: { showMediaPicker = true }) { Image(systemName: "plus") .font(.system(size: 8, weight: .bold)) .foregroundColor(.black) .frame(width: 58, height: 58) .background(Color.white) .cornerRadius(8) .overlay( RoundedRectangle(cornerRadius: 8) .strokeBorder(style: StrokeStyle( lineWidth: 2, dash: [4, 4] )) .foregroundColor(Color.themePrimary) ) } } } // MARK: - 上传提示视图 /// 上传提示视图 /// 显示上传区域的占位图和提示 struct UploadPromptView: View { /// 控制媒体选择器的显示/隐藏 @Binding var showMediaPicker: Bool var body: some View { Button(action: { showMediaPicker = true }) { // 上传图标 SVGImage(svgName: "IP") .frame(width: 225, height: 225) .contentShape(Rectangle()) .overlay( ZStack { RoundedRectangle(cornerRadius: 20) .stroke(style: StrokeStyle( lineWidth: 5, lineCap: .round, dash: [12, 8] )) .foregroundColor(Color.themePrimary) // Add plus icon in the center Image(systemName: "plus") .font(.system(size: 32, weight: .bold)) .foregroundColor(.black) } ) } } } // MARK: - 媒体预览视图 /// 媒体预览视图 /// 显示图片或视频的预览图 struct MediaPreview: View { // MARK: - 属性 /// 图片处理队列 private let imageProcessingQueue = DispatchQueue( label: "com.yourapp.imageprocessing", qos: .userInitiated, attributes: .concurrent ) /// 媒体类型 let media: MediaType /// 上传管理器 @ObservedObject var uploadManager: MediaUploadManager // MARK: - 状态 /// 加载的图片 @State private var image: UIImage? /// 加载状态 enum LoadState { /// 加载成功 case success(UIImage) /// 加载失败 case failure(Error) } /// 当前加载状态 @State private var loadState: LoadState? // MARK: - 图片缓存 /// 图片缓存 private struct ImageCache { static let shared = NSCache() private static var cacheKeys = Set() static func setImage(_ image: UIImage, forKey key: String) { shared.setObject(image, forKey: key as NSString) cacheKeys.insert(key) } static func getImage(forKey key: String) -> UIImage? { return shared.object(forKey: key as NSString) } static func clearCache() { cacheKeys.forEach { key in shared.removeObject(forKey: key as NSString) } cacheKeys.removeAll() } } // MARK: - 初始化 init(media: MediaType, uploadManager: MediaUploadManager) { self.media = media self.uploadManager = uploadManager // 尝试从缓存加载图片 let cacheKey = "\(media.id)" as NSString if let cachedImage = ImageCache.shared.object(forKey: cacheKey) { self._image = State(initialValue: cachedImage) self._loadState = State(initialValue: .success(cachedImage)) } } // MARK: - 计算属性 /// 上传进度 private var uploadProgress: Double { guard let index = uploadManager.selectedMedia.firstIndex(where: { $0.id == media.id }) else { return 0 } if case .uploading(let progress) = uploadManager.uploadStatus["\(index)"] { return progress } else if case .completed = uploadManager.uploadStatus["\(index)"] { return 1.0 } return 0 } /// 是否正在上传 private var isUploading: Bool { guard let index = uploadManager.selectedMedia.firstIndex(where: { $0.id == media.id }) else { return false } if case .uploading = uploadManager.uploadStatus["\(index)"] { return true } return false } // MARK: - 视图主体 var body: some View { ZStack { // 1. 显示图片或视频缩略图 if let image = image { ZStack(alignment: .bottomTrailing) { loadedImageView(image) } // 上传进度条(仅当正在上传且进度小于100%时显示) if isUploading && uploadProgress < 1.0 { VStack { Spacer() ProgressView(value: uploadProgress, total: 1.0) .progressViewStyle(LinearProgressViewStyle(tint: .white)) .frame(height: 2) .padding(.horizontal, 4) .padding(.bottom, 2) } } } else { // 2. 加载中的占位图 placeholderView .onAppear { loadImage() } } // 3. 显示错误状态(如果有) if case .failure(let error) = loadState, image == nil { errorView(error: error) } } .aspectRatio(1, contentMode: .fill) .clipped() .cornerRadius(8) .overlay( RoundedRectangle(cornerRadius: 8) .stroke(Color.themePrimary.opacity(0.3), lineWidth: 1) ) } // 加载中的占位图 private var placeholderView: some View { Color.gray.opacity(0.1) } // 加载完成的图片视图 private func loadedImageView(_ image: UIImage) -> some View { Image(uiImage: image) .resizable() .scaledToFill() .transition(.opacity.animation(.easeInOut(duration: 0.2))) } /// 错误视图 private func errorView(error: Error) -> some View { VStack(spacing: 8) { Image(systemName: "exclamationmark.triangle") .font(.system(size: 20)) .foregroundColor(.orange) Text("加载失败") .font(.caption2) .foregroundColor(.secondary) Button(action: { loadState = nil loadImage() }) { Image(systemName: "arrow.clockwise") .font(.caption) .padding(4) .background(Color.gray.opacity(0.2)) .clipShape(Circle()) } .padding(.top, 4) } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.gray.opacity(0.1)) .cornerRadius(8) } // MARK: - 私有方法 /// 加载图片 private func loadImage() { let cacheKey = "\(media.id)" as NSString // 检查缓存 if let cachedImage = ImageCache.getImage(forKey: cacheKey as String) { image = cachedImage loadState = .success(cachedImage) return } // 使用专用的图片处理队列 imageProcessingQueue.async { do { let imageToCache: UIImage switch media { case .image(let uiImage): imageToCache = uiImage case .video(_, let thumbnail): guard let thumbnail = thumbnail else { throw NSError( domain: "com.yourapp.media", code: -1, userInfo: [NSLocalizedDescriptionKey: "视频缩略图加载失败"] ) } imageToCache = thumbnail } // 缓存图片 ImageCache.setImage(imageToCache, forKey: cacheKey as String) // 更新UI DispatchQueue.main.async { withAnimation(.easeInOut(duration: 0.2)) { image = imageToCache loadState = .success(imageToCache) } } } catch { print("图片加载失败: \(error.localizedDescription)") DispatchQueue.main.async { loadState = .failure(error) } } } } } private func getVideoDuration(url: URL) -> String { let asset = AVURLAsset(url: url) let durationInSeconds = CMTimeGetSeconds(asset.duration) guard durationInSeconds.isFinite else { return "0:00" } let minutes = Int(durationInSeconds) / 60 let seconds = Int(durationInSeconds) % 60 return String(format: "%d:%02d", minutes, seconds) } // MARK: - 扩展 /// 扩展 MediaType 以支持 Identifiable 协议 extension MediaType: Identifiable { /// 唯一标识符 public var id: String { switch self { case .image(let uiImage): return "image_\(uiImage.hashValue)" case .video(let url, _): return "video_\(url.absoluteString.hashValue)" } } } extension TimeInterval { var formattedDuration: String { let minutes = Int(self) / 60 let seconds = Int(self) % 60 return String(format: "%d:%02d", minutes, seconds) } } // MARK: - 预览 struct MediaUploadView_Previews: PreviewProvider { static var previews: some View { NavigationView { MediaUploadView() } } }