289 lines
11 KiB
Markdown
289 lines
11 KiB
Markdown
# 完成页迭代 — 完整代码（仅交付，禁止自动应用）
|
||
|
||
以下为审查修正后的完整代码。**关键修正**：底部「回到我的内容」改为 `navStore.switchToGrowthTab()`，不再使用 `navigationPath = NavigationPath()`，以保证从任意 Tab 进入都能回到技能页 Tab。
|
||
|
||
---
|
||
|
||
## 1. CompletionView.swift（整文件替换）
|
||
|
||
```swift
|
||
import SwiftUI
|
||
|
||
// MARK: - 🏆 课程完结页 (Gesture Flow Edition)
|
||
// 交互：左滑进入(上级控制)，右滑返回(系统原生)，底部点击回技能页 Tab
|
||
struct CompletionView: View {
|
||
let courseId: String
|
||
let courseTitle: String?
|
||
let completedLessonCount: Int
|
||
|
||
@EnvironmentObject private var navStore: NavigationStore
|
||
@Environment(\.dismiss) private var dismiss
|
||
|
||
@State private var isSealed = false
|
||
@State private var breathingOpacity: Double = 0.3
|
||
@State private var contentOpacity: Double = 0
|
||
|
||
var body: some View {
|
||
ZStack {
|
||
Color.bgPaper.ignoresSafeArea()
|
||
|
||
VStack(spacing: 0) {
|
||
Spacer().frame(height: 60)
|
||
|
||
Spacer()
|
||
|
||
ZStack {
|
||
Circle()
|
||
.strokeBorder(
|
||
isSealed ?
|
||
AnyShapeStyle(
|
||
LinearGradient(
|
||
colors: [Color.brandVital, Color.cyberIris],
|
||
startPoint: .topLeading,
|
||
endPoint: .bottomTrailing
|
||
)
|
||
) :
|
||
AnyShapeStyle(Color.inkSecondary.opacity(0.3)),
|
||
style: StrokeStyle(lineWidth: isSealed ? 4 : 1, dash: isSealed ? [] : [5, 5])
|
||
)
|
||
.frame(width: 220, height: 220)
|
||
.shadow(
|
||
color: isSealed ? Color.brandVital.opacity(0.4) : .clear,
|
||
radius: 20, x: 0, y: 0
|
||
)
|
||
.scaleEffect(isSealed ? 1.0 : 0.95)
|
||
.opacity(isSealed ? 1.0 : breathingOpacity)
|
||
.animation(.easeInOut(duration: 0.5), value: isSealed)
|
||
|
||
if isSealed {
|
||
VStack(spacing: 8) {
|
||
Text("已完成的")
|
||
.font(.system(size: 16, weight: .medium))
|
||
.foregroundColor(.inkSecondary)
|
||
|
||
Text("第 \(completedLessonCount) 节")
|
||
.font(.system(size: 36, weight: .bold, design: .serif))
|
||
.foregroundStyle(
|
||
LinearGradient(
|
||
colors: [Color.brandVital, Color.cyberIris],
|
||
startPoint: .topLeading,
|
||
endPoint: .bottomTrailing
|
||
)
|
||
)
|
||
}
|
||
.transition(.scale(scale: 0.5).combined(with: .opacity))
|
||
} else {
|
||
Text("完")
|
||
.font(.system(size: 80, weight: .light, design: .serif))
|
||
.foregroundColor(.inkPrimary.opacity(0.2))
|
||
.opacity(breathingOpacity)
|
||
}
|
||
}
|
||
.contentShape(Circle())
|
||
.onTapGesture {
|
||
triggerInteraction()
|
||
}
|
||
|
||
Spacer()
|
||
|
||
Button {
|
||
handleReturnToRoot()
|
||
} label: {
|
||
HStack(spacing: 4) {
|
||
Text("回到我的内容")
|
||
.font(.system(size: 15, weight: .medium))
|
||
Image(systemName: "arrow.right")
|
||
.font(.system(size: 12))
|
||
}
|
||
.foregroundColor(.brandVital)
|
||
.padding(.vertical, 12)
|
||
.padding(.horizontal, 32)
|
||
.background(Capsule().fill(Color.brandVital.opacity(0.05)))
|
||
}
|
||
.opacity(contentOpacity)
|
||
.padding(.bottom, 80)
|
||
}
|
||
}
|
||
.toolbar(.hidden, for: .navigationBar)
|
||
.modifier(SwipeBackEnablerModifier())
|
||
.onAppear {
|
||
startBreathing()
|
||
}
|
||
}
|
||
|
||
private func startBreathing() {
|
||
withAnimation(.easeInOut(duration: 1.5).repeatForever(autoreverses: true)) {
|
||
breathingOpacity = 0.8
|
||
}
|
||
}
|
||
|
||
private func triggerInteraction() {
|
||
guard !isSealed else { return }
|
||
let generator = UIImpactFeedbackGenerator(style: .heavy)
|
||
generator.impactOccurred()
|
||
withAnimation(.spring(response: 0.5, dampingFraction: 0.7)) {
|
||
isSealed = true
|
||
}
|
||
withAnimation(.easeOut.delay(0.5)) {
|
||
contentOpacity = 1.0
|
||
}
|
||
}
|
||
|
||
/// 回到技能页 Tab 根目录（与当前「继续学习」一致）
|
||
private func handleReturnToRoot() {
|
||
navStore.switchToGrowthTab()
|
||
}
|
||
}
|
||
|
||
// MARK: - 侧滑返回：隐藏导航栏时仍可右滑 pop
|
||
struct SwipeBackEnablerModifier: ViewModifier {
|
||
func body(content: Content) -> some View {
|
||
content.background(SwipeBackEnabler())
|
||
}
|
||
}
|
||
|
||
private struct SwipeBackEnabler: UIViewControllerRepresentable {
|
||
func makeUIViewController(context: Context) -> UIViewController { UIViewController() }
|
||
|
||
func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
|
||
DispatchQueue.main.async {
|
||
if let nc = uiViewController.navigationController {
|
||
nc.interactivePopGestureRecognizer?.delegate = nil
|
||
nc.interactivePopGestureRecognizer?.isEnabled = true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 2. VerticalScreenPlayerView.swift（仅改动部分）
|
||
|
||
### 2.1 保持现有 init 与属性
|
||
|
||
- `navigationPath: Binding<NavigationPath>?` 保持可选，NoteTreeView / NoteListView 不传时仍不 push 完成页。
|
||
- `isLastNode`, `courseTitle` 等保持不变。
|
||
|
||
### 2.2 替换「加载成功」分支：去掉占位页，仅用左滑手势 push
|
||
|
||
**原逻辑**（约 146–186 行）：
|
||
`TabView` 内 `ForEach(allCourseNodes)` + `CompletionPlaceholderPage().tag("wg://completion")`，外加 `.onChange(of: currentNodeId)` 在 `newId == "wg://completion"` 时 append completion。
|
||
|
||
**新逻辑**：
|
||
- `TabView` 内**仅** `ForEach(allCourseNodes)`，每页在最后一节上挂 `LastPageSwipeModifier`，左滑时调用 `triggerCompletionNavigation`。
|
||
- **删除** `CompletionPlaceholderPage` 及其 tag、**删除** `.onChange(of: currentNodeId)` 中与 `"wg://completion"` 相关的逻辑。
|
||
- 新增 `@State private var isNavigatingToCompletion = false`（防抖），以及 `triggerCompletionNavigation()`、`LastPageSwipeModifier`。
|
||
|
||
**替换后的内容区代码**（直接替换原 `else if !allCourseNodes.isEmpty { ... }` 整块）：
|
||
|
||
```swift
|
||
} else if !allCourseNodes.isEmpty {
|
||
TabView(selection: $currentNodeId) {
|
||
ForEach(allCourseNodes, id: \.id) { node in
|
||
let isFirst = isFirstNodeInChapter(nodeId: node.id)
|
||
let chapterTitle = getChapterTitle(for: node.id)
|
||
|
||
LessonPageView(
|
||
courseId: courseId,
|
||
nodeId: node.id,
|
||
currentGlobalNodeId: $currentNodeId,
|
||
initialScrollIndex: node.id == initialNodeId ? initialScrollIndex : nil,
|
||
headerConfig: HeaderConfig(
|
||
showChapterTitle: isFirst,
|
||
chapterTitle: chapterTitle
|
||
),
|
||
courseTitle: courseTitle,
|
||
navigationPath: navigationPath
|
||
)
|
||
.tag(node.id)
|
||
.modifier(LastPageSwipeModifier(
|
||
isLastPage: node.id == allCourseNodes.last?.id,
|
||
onSwipeLeft: triggerCompletionNavigation
|
||
))
|
||
}
|
||
}
|
||
.tabViewStyle(.page(indexDisplayMode: .never))
|
||
.ignoresSafeArea(.container, edges: .bottom)
|
||
}
|
||
```
|
||
|
||
### 2.3 新增状态与函数（放在 Logic Helpers 区域）
|
||
|
||
```swift
|
||
@State private var isNavigatingToCompletion = false
|
||
|
||
private func triggerCompletionNavigation() {
|
||
guard !isNavigatingToCompletion, let path = navigationPath else { return }
|
||
isNavigatingToCompletion = true
|
||
|
||
let generator = UIImpactFeedbackGenerator(style: .medium)
|
||
generator.impactOccurred()
|
||
|
||
let count = UserManager.shared.studyStats.lessons
|
||
path.wrappedValue.append(CourseNavigation.completion(
|
||
courseId: courseId,
|
||
courseTitle: courseTitle,
|
||
completedLessonCount: count
|
||
))
|
||
|
||
DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
|
||
isNavigatingToCompletion = false
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2.4 删除 onAppear 中「从完成页返回切回最后一节」逻辑
|
||
|
||
**删除**：
|
||
|
||
```swift
|
||
if currentNodeId == "wg://completion", let lastId = allCourseNodes.last?.id {
|
||
currentNodeId = lastId
|
||
}
|
||
```
|
||
|
||
（去掉占位页后不再存在 `"wg://completion"` 选中的情况。）
|
||
|
||
### 2.5 删除 CompletionPlaceholderPage，新增 LastPageSwipeModifier
|
||
|
||
**删除** `CompletionPlaceholderPage` 结构体。
|
||
|
||
**在** `// MARK: - 📄 单页课程视图` **之前** 新增：
|
||
|
||
```swift
|
||
// MARK: - 最后一页左滑：仅在最后一节挂载，左滑 push 完成页
|
||
private struct LastPageSwipeModifier: ViewModifier {
|
||
let isLastPage: Bool
|
||
let onSwipeLeft: () -> Void
|
||
|
||
func body(content: Content) -> some View {
|
||
content
|
||
.simultaneousGesture(
|
||
DragGesture(minimumDistance: 20, coordinateSpace: .local)
|
||
.onEnded { value in
|
||
guard isLastPage else { return }
|
||
if value.translation.width < -60,
|
||
abs(value.translation.width) > abs(value.translation.height) {
|
||
onSwipeLeft()
|
||
}
|
||
}
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 调用方（GrowthView / ProfileView / DiscoveryView）
|
||
|
||
**无需改动**。CompletionView 仍为三参：`courseId`, `courseTitle`, `completedLessonCount`，依赖 `@EnvironmentObject navStore`，底部用 `switchToGrowthTab()` 回到技能页 Tab。
|
||
|
||
---
|
||
|
||
## 4. 小结
|
||
|
||
- **CompletionView**：无顶部返回、无打字机；赛博印章交互；右滑依赖 `SwipeBackEnablerModifier`；底部「回到我的内容」= `navStore.switchToGrowthTab()`。
|
||
- **VerticalScreenPlayerView**：去掉占位页与 `onChange` 完成页逻辑；最后一节左滑用 `LastPageSwipeModifier` + `triggerCompletionNavigation` push 完成页；保留可选 `navigationPath`，笔记流不变。
|
||
- **不修改** GrowthView / ProfileView / DiscoveryView 的 `CompletionView(...)` 调用。
|