101 lines
4.5 KiB
Markdown
101 lines
4.5 KiB
Markdown
|
# CompletionView「新中式赛博」版设计方案 — 审查报告（不应用）
|
|||
|
|
|
|||
|
|
## 一、结论摘要
|
|||
|
|
|
|||
|
|
- **接口**：与现有调用方完全兼容，无需修改 `VerticalScreenPlayerView` 等。
|
|||
|
|
- **逻辑**：导航与“回到我的内容”行为与现有一致；仅交互由「点击勋章激活」改为「点击卡片 3D 翻转」。
|
|||
|
|
- **建议**：设计说明中的「微小的上箭头」与代码中的 `sparkles` 不一致，若需严格按文案可改为 `arrow.up`；其余可合并。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 二、接口与调用方
|
|||
|
|
|
|||
|
|
| 项目 | 当前 CompletionView | 提案代码 | 结论 |
|
|||
|
|
|------|---------------------|----------|------|
|
|||
|
|
| 入参 | `courseId`, `courseTitle?`, `completedLessonCount`, `navigationPath?` | 同左 | ✅ 一致 |
|
|||
|
|
| 调用处 | `VerticalScreenPlayerView` 传入上述 4 项 | 无需改动 | ✅ 兼容 |
|
|||
|
|
|
|||
|
|
调用处代码保持不变即可：
|
|||
|
|
|
|||
|
|
```swift
|
|||
|
|
CompletionView(
|
|||
|
|
courseId: courseId,
|
|||
|
|
courseTitle: self.courseTitle ?? mapData?.courseTitle,
|
|||
|
|
completedLessonCount: UserManager.shared.studyStats.lessons,
|
|||
|
|
navigationPath: navigationPath
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 三、行为与逻辑
|
|||
|
|
|
|||
|
|
| 能力 | 当前实现 | 提案实现 | 结论 |
|
|||
|
|
|------|----------|----------|------|
|
|||
|
|
| 清空栈 / 返回 | `handlePopToRoot()`：有 `navigationPath` 则 `path.wrappedValue = NavigationPath()`，否则 `dismiss()` | 相同 | ✅ 一致 |
|
|||
|
|
| 触觉反馈 | 点击时 heavy，按钮时 light | 翻转时 medium，按钮时 light | ✅ 可接受 |
|
|||
|
|
| 隐藏导航栏 | `.toolbar(.hidden, for: .navigationBar)` | 同左 | ✅ 一致 |
|
|||
|
|
|
|||
|
|
交互变化仅为表现形式：
|
|||
|
|
|
|||
|
|
- **当前**：点击圆形勋章 → 激活态 → 显示「共完成 X 小节」+ 底部「回到我的内容」。
|
|||
|
|
- **提案**：点击卡片 → 3D 翻转 → 背面「共完成 X 小节」+ 底部「回到我的内容」（翻转后按钮由 0.6 到 1 透明度）。
|
|||
|
|
|
|||
|
|
语义一致，无逻辑冲突。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 四、视觉与实现细节
|
|||
|
|
|
|||
|
|
1. **背景**
|
|||
|
|
提案使用 `Color.bgPaper`，当前为 `Color.white`。与 app 内其他页面统一，更一致，✅ 合理。
|
|||
|
|
|
|||
|
|
2. **正面 (CardFrontView)**
|
|||
|
|
- 竖排「完」「成」、180pt、serif、渐变 + 0.8 透明度、微旋转、裁切与 `drawingGroup` 均合理。
|
|||
|
|
- 底部提示：「点击开启」+ 图标。设计说明为「微小的上箭头」，代码为 `Image(systemName: "sparkles")`。若需与说明严格一致，建议改为 `arrow.up` 或同时保留「点击开启」文案。
|
|||
|
|
|
|||
|
|
3. **背面 (CardBackView)**
|
|||
|
|
- 「共完成」+ 数字 +「小节」、渐变底、装饰圆环，与当前信息一致，✅。
|
|||
|
|
|
|||
|
|
4. **底部按钮**
|
|||
|
|
- 文案「回到我的内容」+ 箭头不变。
|
|||
|
|
- 提案为白底胶囊 + 淡描边，未翻转时 `opacity(0.6)`，翻转后 1；当前为渐变按钮始终可见。属设计取舍，✅ 可接受。
|
|||
|
|
|
|||
|
|
5. **渐变色**
|
|||
|
|
- 提案背面紫为 `Color(red: 0.58, green: 0.28, blue: 0.95)`，当前为 `0.62, 0.35, 1.0`，差异较小，✅ 无问题。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 五、潜在风险与注意点
|
|||
|
|
|
|||
|
|
| 项 | 说明 | 风险 |
|
|||
|
|
|----|------|------|
|
|||
|
|
| `.foregroundStyle(gradient.opacity(0.8))` | `LinearGradient` 的 `.opacity(0.8)` 在 iOS 15+ 作为 `ShapeStyle` 使用无问题 | 低 |
|
|||
|
|
| `rotation3DEffect` + `perspective: 0.8` | 常规用法 | 无 |
|
|||
|
|
| CardFrontView 呼吸动画 | `hintOpacity` 0.3 ↔ 0.8，`repeatForever(autoreverses: true)` | 无 |
|
|||
|
|
| 卡片尺寸 280×400 | 与当前 200×200 圆不同，仅布局变化 | 无 |
|
|||
|
|
|
|||
|
|
未发现编译或运行时错误；替换为提案代码后，仅需在真机/模拟器上确认一次翻转与返回流程即可。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 六、与设计说明的对照
|
|||
|
|
|
|||
|
|
| 设计说明 | 代码实现 | 一致性 |
|
|||
|
|
|----------|----------|--------|
|
|||
|
|
| 竖排超大字「完」「成」 | VStack + 180pt serif | ✅ |
|
|||
|
|
| 出血/裁切感 | offset + clipShape + 圆角 | ✅ |
|
|||
|
|
| 赛博粉紫渐变、降饱和度 | gradient.opacity(0.8) | ✅ |
|
|||
|
|
| 底部「点击开启」 | Text("点击开启") | ✅ |
|
|||
|
|
| 「微小的上箭头」 | 使用 `sparkles` 图标 | ⚠️ 不一致，可改为 `arrow.up` |
|
|||
|
|
| 去掉圆圈 | 无圆圈，改为矩形卡片 | ✅ |
|
|||
|
|
| 宋体 (Serif) | `.design(.serif)` | ✅ |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 七、审查结论
|
|||
|
|
|
|||
|
|
- **可合并**：接口、导航与核心逻辑与现有一致，无破坏性变更。
|
|||
|
|
- **可选修改**：将底部提示图标由 `sparkles` 改为 `arrow.up`，与「微小的上箭头」说明统一。
|
|||
|
|
- **不应用**：按你要求本次仅审查，不替换 `CompletionView.swift`；若后续决定采用，可直接用提案代码替换整个文件，并视需要做上述图标小改。
|