lujiuyin/suixinkan_uikit
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化任务详情与图片预览布局

Browse Source
This commit is contained in:
lujiuyin
2026-08-18 16:41:55 +08:00
parent c34c4e1923
commit 1757ba5e36
3 changed files with 237 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
suixinkan/UI/TravelAlbum/TravelAlbumAIJobDetailViewController.swift
+86 -70
View File
@@ -533,7 +533,7 @@ private final class AIJobDetailAlbumCard: UIView {
}
}
/// 任务内容卡，以浅蓝标签展示各输出目标数量并补充额度结算。
/// 任务内容卡，以三色紧凑标签展示各输出目标数量并补充额度结算。
private final class AIJobDetailContentCard: UIView {
private let outputStack = UIStackView()
private let quotaLabel = UILabel()
@@ -548,7 +548,8 @@ private final class AIJobDetailContentCard: UIView {
titleLabel.textColor = AIJobDetailStyle.textPrimary
outputStack.axis = .horizontal
outputStack.spacing = 10
outputStack.distribution = .fillEqually
outputStack.distribution = .fill
outputStack.alignment = .center
quotaLabel.font = .systemFont(ofSize: 12)
quotaLabel.textColor = AIJobDetailStyle.textSecondary
quotaLabel.numberOfLines = 0
@@ -565,6 +566,12 @@ private final class AIJobDetailContentCard: UIView {
func apply(_ detail: TravelAlbumAIJobDetail) {
outputStack.arrangedSubviews.forEach { $0.removeFromSuperview() }
detail.outputs.forEach { outputStack.addArrangedSubview(makeChip($0)) }
if let lastChip = outputStack.arrangedSubviews.last {
let spacer = UIView()
spacer.setContentHuggingPriority(.defaultLow, for: .horizontal)
outputStack.setCustomSpacing(0, after: lastChip)
outputStack.addArrangedSubview(spacer)
}
outputStack.isHidden = detail.outputs.isEmpty
let quota = detail.quotaSettlement
quotaLabel.text = "额度：预占 \(quota.reservedUnits) · 消耗 \(quota.consumedUnits) · 释放 \(quota.releasedUnits)"
@@ -573,32 +580,42 @@ private final class AIJobDetailContentCard: UIView {
}
private func makeChip(_ output: TravelAlbumAIJobOutput) -> UIView {
let container = UIView()
container.backgroundColor = AppColor.primaryLight
container.layer.cornerRadius = 9
let iconView = UIImageView(image: UIImage(systemName: output.type.symbolName))
iconView.tintColor = AppColor.primary
iconView.contentMode = .scaleAspectFit
let label = UILabel()
label.text = "\(output.type.shortTitle) \(output.count) 张"
AIJobDetailOutputChip(
text: "\(output.type.shortTitle) \(output.count)张",
backgroundColor: output.type.chipBackgroundColor,
accessibilityIdentifier: "aiRetouchJob.contentChip.\(output.type.chipIdentifier)"
)
}
}
/// 依据文字固有宽度展示的任务输出类型标签。
private final class AIJobDetailOutputChip: UIView {
private let label = UILabel()
init(text: String, backgroundColor: UIColor, accessibilityIdentifier: String) {
super.init(frame: .zero)
self.backgroundColor = backgroundColor
self.accessibilityIdentifier = accessibilityIdentifier
layer.cornerRadius = 9
setContentHuggingPriority(.required, for: .horizontal)
setContentCompressionResistancePriority(.required, for: .horizontal)
label.text = text
label.font = .systemFont(ofSize: 14, weight: .medium)
label.textColor = AIJobDetailStyle.textPrimary
label.adjustsFontSizeToFitWidth = true
label.minimumScaleFactor = 0.75
container.addSubview(iconView)
container.addSubview(label)
iconView.snp.makeConstraints { make in
make.leading.equalToSuperview().offset(10)
make.centerY.equalToSuperview()
make.size.equalTo(18)
}
label.setContentCompressionResistancePriority(.required, for: .horizontal)
addSubview(label)
label.snp.makeConstraints { make in
make.leading.equalTo(iconView.snp.trailing).offset(6)
make.trailing.equalToSuperview().inset(8)
make.leading.trailing.equalToSuperview().inset(12)
make.centerY.equalToSuperview()
}
container.snp.makeConstraints { $0.height.equalTo(44) }
return container
snp.makeConstraints { $0.height.equalTo(44) }
}
@available(*, unavailable)
required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
override var intrinsicContentSize: CGSize {
CGSize(width: ceil(label.intrinsicContentSize.width) + 24, height: 44)
}
}
@@ -663,6 +680,9 @@ private final class AIJobDetailTargetRow: UIView {
private let templateLabel = UILabel()
private let statusIconView = UIImageView()
private let statusLabel = UILabel()
private let statusStack = UIStackView()
private let statusRow = UIStackView()
private let contentStack = UIStackView()
private let resultButton = UIButton(type: .system)
private let errorContainer = UIView()
private let errorIconView = UIImageView(image: UIImage(systemName: "exclamationmark.circle.fill"))
@@ -679,8 +699,11 @@ private final class AIJobDetailTargetRow: UIView {
titleLabel.font = .systemFont(ofSize: 15, weight: .medium)
titleLabel.textColor = AIJobDetailStyle.textPrimary
titleLabel.lineBreakMode = .byTruncatingMiddle
titleLabel.numberOfLines = 1
templateLabel.font = .systemFont(ofSize: 13)
templateLabel.textColor = AIJobDetailStyle.textSecondary
templateLabel.lineBreakMode = .byTruncatingTail
templateLabel.numberOfLines = 1
statusIconView.contentMode = .scaleAspectFit
statusLabel.font = .systemFont(ofSize: 14, weight: .medium)
resultButton.setTitle("查看结果", for: .normal)
@@ -693,49 +716,45 @@ private final class AIJobDetailTargetRow: UIView {
errorLabel.textColor = AppColor.danger
errorLabel.numberOfLines = 0
let statusStack = UIStackView(arrangedSubviews: [statusIconView, statusLabel])
statusStack.addArrangedSubview(statusIconView)
statusStack.addArrangedSubview(statusLabel)
statusStack.axis = .horizontal
statusStack.spacing = 6
statusStack.alignment = .center
statusStack.setContentCompressionResistancePriority(.required, for: .horizontal)
statusLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
let statusSpacer = UIView()
statusRow.addArrangedSubview(statusStack)
statusRow.addArrangedSubview(statusSpacer)
statusRow.addArrangedSubview(resultButton)
statusRow.axis = .horizontal
statusRow.spacing = 8
statusRow.alignment = .center
contentStack.addArrangedSubview(titleLabel)
contentStack.addArrangedSubview(templateLabel)
contentStack.addArrangedSubview(statusRow)
contentStack.addArrangedSubview(errorContainer)
contentStack.axis = .vertical
contentStack.spacing = 0
contentStack.setCustomSpacing(7, after: titleLabel)
contentStack.setCustomSpacing(8, after: templateLabel)
contentStack.setCustomSpacing(12, after: statusRow)
statusIconView.snp.makeConstraints { $0.size.equalTo(18) }
addSubview(thumbnailView)
addSubview(titleLabel)
addSubview(templateLabel)
addSubview(statusStack)
addSubview(resultButton)
addSubview(errorContainer)
addSubview(contentStack)
errorContainer.addSubview(errorIconView)
errorContainer.addSubview(errorLabel)
thumbnailView.snp.makeConstraints { make in
make.leading.top.equalToSuperview().offset(4)
make.size.equalTo(80)
make.bottom.lessThanOrEqualToSuperview().inset(12)
}
titleLabel.snp.makeConstraints { make in
contentStack.snp.makeConstraints { make in
make.leading.equalTo(thumbnailView.snp.trailing).offset(14)
make.top.equalTo(thumbnailView).offset(18)
make.trailing.lessThanOrEqualTo(statusStack.snp.leading).offset(-8)
}
templateLabel.snp.makeConstraints { make in
make.leading.equalTo(titleLabel)
make.top.equalTo(titleLabel.snp.bottom).offset(7)
make.trailing.lessThanOrEqualTo(statusStack.snp.leading).offset(-8)
}
statusStack.snp.makeConstraints { make in
make.trailing.equalToSuperview().inset(4)
make.centerY.equalTo(thumbnailView).offset(-7)
}
resultButton.snp.makeConstraints { make in
make.trailing.equalToSuperview().inset(4)
make.top.equalTo(statusStack.snp.bottom).offset(4)
make.height.equalTo(28)
}
errorContainer.snp.makeConstraints { make in
make.top.equalTo(templateLabel.snp.bottom).offset(12)
make.leading.equalTo(titleLabel)
make.trailing.equalToSuperview().inset(4)
make.bottom.equalToSuperview().inset(12)
make.height.greaterThanOrEqualTo(38)
}
errorIconView.snp.makeConstraints { make in
make.leading.equalToSuperview().offset(10)
@@ -780,21 +799,9 @@ private final class AIJobDetailTargetRow: UIView {
errorLabel.text = target.displayFailureMessage.map { "失败原因：\($0)" }
let showsError = target.displayFailureMessage != nil
errorContainer.isHidden = !showsError
errorContainer.snp.remakeConstraints { make in
if showsError {
make.top.equalTo(templateLabel.snp.bottom).offset(12)
} else {
make.top.equalTo(thumbnailView.snp.bottom)
}
make.leading.equalTo(titleLabel)
make.trailing.equalToSuperview().inset(4)
make.bottom.equalToSuperview().inset(12)
if showsError {
make.height.greaterThanOrEqualTo(38)
} else {
make.height.equalTo(0)
}
}
titleLabel.accessibilityIdentifier = "aiRetouchJob.target.\(target.targetId).title"
templateLabel.accessibilityIdentifier = "aiRetouchJob.target.\(target.targetId).template"
statusStack.accessibilityIdentifier = "aiRetouchJob.target.\(target.targetId).status"
accessibilityLabel = [titleLabel.text, templateLabel.text, statusLabel.text, errorLabel.text]
.compactMap { $0 }.joined(separator: "，")
}
@@ -896,12 +903,21 @@ private extension TravelAlbumAIJobOutputType {
}
}
var symbolName: String {
var chipBackgroundColor: UIColor {
switch self {
case .refined: "wand.and.stars"
case .atmosphere: "sun.max"
case .cover: "bookmark"
case .unknown: "sparkles"
case .refined: UIColor(hex: 0xEAF3FF)
case .atmosphere: UIColor(hex: 0xFFF2DC)
case .cover: UIColor(hex: 0xF2ECFF)
case .unknown: UIColor(hex: 0xF1F5F9)
}
}
var chipIdentifier: String {
switch self {
case .refined: "refined"
case .atmosphere: "atmosphere"
case .cover: "cover"
case .unknown: "unknown"
}
}
}
suixinkan/UI/TravelAlbum/TravelAlbumPhotoPreviewViewController.swift
+64 -3
View File
@@ -91,7 +91,15 @@ final class TravelAlbumPhotoPreviewViewController: UIViewController {
self.allowsActions = allowsActions
super.init(nibName: nil, bundle: nil)
modalPresentationStyle = .fullScreen
rebuildNodes(keepingProjectIndex: max(0, min(startProjectIndex, projects.count - 1)), kind: startKind)
let resolvedProjectIndex = max(0, min(startProjectIndex, self.projects.count - 1))
let initialProject = self.projects.indices.contains(resolvedProjectIndex)
? self.projects[resolvedProjectIndex]
: nil
let resolvedStartKind = initialProject?.asset(for: startKind) == nil
? initialProject?.orderedAssets.first?.kind ?? .original
: startKind
selectedKind = resolvedStartKind
rebuildNodes(keepingProjectIndex: resolvedProjectIndex, kind: resolvedStartKind)
}
@available(*, unavailable)
@@ -165,6 +173,7 @@ final class TravelAlbumPhotoPreviewViewController: UIViewController {
sizeLabel.textColor = UIColor.white.withAlphaComponent(0.52)
sizeLabel.font = .systemFont(ofSize: 13, weight: .regular)
sizeLabel.textAlignment = .center
sizeLabel.accessibilityIdentifier = "travelAlbum.previewFileSizeLabel"
counterLabel.textColor = UIColor.white.withAlphaComponent(0.82)
counterLabel.font = .monospacedDigitSystemFont(ofSize: 15, weight: .medium)
@@ -423,7 +432,9 @@ final class TravelAlbumPhotoPreviewViewController: UIViewController {
guard let node = currentNode else { return }
let asset = currentAsset
titleLabel.text = asset?.fileName.isEmpty == false ? asset?.fileName : "未命名照片"
sizeLabel.text = TravelAlbumDisplayFormatter.fileSizeText(asset?.fileSize ?? 0)
let fileSize = asset?.fileSize ?? 0
sizeLabel.text = fileSize > 0 ? TravelAlbumDisplayFormatter.fileSizeText(fileSize) : nil
sizeLabel.isHidden = fileSize <= 0
counterLabel.text = "\(node.projectIndex + 1)/\(max(totalCount, projects.count))"
counterLabel.accessibilityLabel = "第 \(node.projectIndex + 1) 张，共 \(max(totalCount, projects.count)) 张"
highResolutionButton.isEnabled = asset != nil
@@ -982,6 +993,56 @@ extension TravelAlbumPhotoPreviewViewController: UICollectionViewDataSource, UIC
}
}
/// 深色图片预览中使用的高对比度延迟加载指示器。
@MainActor
private final class TravelAlbumPreviewLoadingIndicator: Indicator {
private let containerView = UIView()
private let activityIndicator = UIActivityIndicatorView(style: .medium)
private var revealTask: Task<Void, Never>?
var view: IndicatorView { containerView }
init() {
containerView.backgroundColor = UIColor(red: 39 / 255, green: 39 / 255, blue: 42 / 255, alpha: 0.94)
containerView.layer.cornerRadius = 22
containerView.isAccessibilityElement = true
containerView.accessibilityIdentifier = "travelAlbum.previewLoadingIndicator"
containerView.accessibilityLabel = "图片加载中"
activityIndicator.color = UIColor.white.withAlphaComponent(0.92)
activityIndicator.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
containerView.addSubview(activityIndicator)
activityIndicator.snp.makeConstraints { $0.center.equalToSuperview() }
}
func startAnimatingView() {
revealTask?.cancel()
containerView.alpha = 0
containerView.isHidden = true
revealTask = Task { @MainActor [weak self] in
try? await Task.sleep(for: .milliseconds(150))
guard !Task.isCancelled, let self else { return }
activityIndicator.startAnimating()
containerView.isHidden = false
UIView.animate(
withDuration: UIAccessibility.isReduceMotionEnabled ? 0 : 0.12,
animations: { self.containerView.alpha = 1 }
)
}
}
func stopAnimatingView() {
revealTask?.cancel()
revealTask = nil
activityIndicator.stopAnimating()
containerView.alpha = 0
containerView.isHidden = true
}
func sizeStrategy(in imageView: KFCrossPlatformImageView) -> IndicatorSizeStrategy {
.size(CGSize(width: 44, height: 44))
}
}
/// 预览图片 Cell，使用 UIScrollView 提供远程加载、双击和双指缩放。
private final class TravelAlbumPreviewImageCell: UICollectionViewCell, UIScrollViewDelegate {
static let reuseIdentifier = "TravelAlbumPreviewImageCell"
@@ -1054,7 +1115,7 @@ private final class TravelAlbumPreviewImageCell: UICollectionViewCell, UIScrollV
imageView.contentMode = .scaleAspectFit
imageView.backgroundColor = .black
imageView.kf.indicatorType = .activity
imageView.kf.indicatorType = .custom(indicator: TravelAlbumPreviewLoadingIndicator())
imageView.accessibilityIdentifier = "travelAlbum.previewImageView"
retryButton.setTitle("图片加载失败，点击重试", for: .normal)