|
3 | 3 | ## 📌 项目概述 |
4 | 4 |
|
5 | 5 | ### 背景 |
6 | | -当前 V2er-iOS 使用 WKWebView 渲染帖子详情页的 HTML 内容,存在以下问题: |
7 | | -- 性能开销大,每个回复一个 WebView |
8 | | -- 内存占用高,容易出现内存问题 |
9 | | -- 滚动性能差,多个 WebView 导致卡顿 |
10 | | -- 高度计算延迟,导致界面跳动 |
| 6 | + |
| 7 | +当前 V2er-iOS 在两个地方使用不同的方式渲染 V2EX HTML 内容,都存在性能和功能问题: |
| 8 | + |
| 9 | +#### 1. 帖子内容(NewsContentView) |
| 10 | +- **实现**: `HtmlView` - 基于 WKWebView |
| 11 | +- **问题**: |
| 12 | + - 性能开销大,WebView 初始化慢 |
| 13 | + - 内存占用高(每个 WebView ~20MB) |
| 14 | + - 高度计算延迟,导致界面跳动 |
| 15 | + - JavaScript 桥接复杂,维护困难 |
| 16 | + |
| 17 | +#### 2. 回复列表(ReplyItemView) |
| 18 | +- **实现**: `RichText` - 基于 NSAttributedString HTML 解析 |
| 19 | +- **问题**: |
| 20 | + - 不支持代码语法高亮 |
| 21 | + - 不支持 @mention 识别和跳转 |
| 22 | + - 不支持图片预览交互 |
| 23 | + - 渲染效果与帖子内容不一致 |
| 24 | + |
| 25 | +#### 统一问题 |
| 26 | +- 两套实现维护成本高 |
| 27 | +- 功能不一致,用户体验割裂 |
| 28 | +- 都缺少缓存机制 |
| 29 | +- 都不支持完整的 V2EX 特性(@mention、代码高亮等) |
11 | 30 |
|
12 | 31 | ### 目标 |
13 | | -使用 HTML → Markdown → swift-markdown + Highlightr 方案,实现高性能、原生的富文本渲染。 |
| 32 | + |
| 33 | +使用统一的 **RichView** 模块替换现有的两套实现: |
| 34 | +- ✅ 统一渲染引擎: HTML → Markdown → swift-markdown + Highlightr |
| 35 | +- ✅ 统一交互体验: @mention、图片预览、代码高亮 |
| 36 | +- ✅ 统一配置管理: 支持不同场景的样式配置(帖子 vs 回复) |
| 37 | +- ✅ 统一缓存策略: 自动缓存,提升列表滚动性能 |
14 | 38 |
|
15 | 39 | ### 预期收益 |
16 | | -- **性能提升**: 10x+ 渲染速度,流畅滚动 |
17 | | -- **内存优化**: 减少 70%+ 内存占用 |
18 | | -- **用户体验**: 消除界面跳动,即时显示 |
19 | | -- **可维护性**: 标准化代码,易于扩展 |
| 40 | + |
| 41 | +#### 性能提升 |
| 42 | +- **帖子内容**: 10x+ 渲染速度(WKWebView → Native) |
| 43 | +- **回复列表**: 3-5x 渲染速度(支持缓存 + 优化) |
| 44 | +- **内存优化**: 减少 70%+ 内存占用(移除 WebView) |
| 45 | +- **滚动流畅**: 60fps 稳定帧率,无卡顿 |
| 46 | + |
| 47 | +#### 功能增强 |
| 48 | +- **代码高亮**: 支持 185+ 编程语言语法高亮 |
| 49 | +- **@mention**: 自动识别并支持点击跳转 |
| 50 | +- **图片预览**: 内置图片查看器,支持手势缩放 |
| 51 | +- **一致体验**: 帖子和回复使用相同渲染效果 |
| 52 | + |
| 53 | +#### 开发体验 |
| 54 | +- **统一 API**: 一套代码适用于所有场景 |
| 55 | +- **易于维护**: 移除 WebView 和 JavaScript 桥接 |
| 56 | +- **类型安全**: Swift 原生实现,编译时检查 |
| 57 | +- **可扩展**: 模块化设计,易于添加新功能 |
20 | 58 |
|
21 | 59 | --- |
22 | 60 |
|
@@ -504,33 +542,88 @@ Models/ + Extensions/ |
504 | 542 | - 内存占用减少 70%+ |
505 | 543 | - 流畅滚动 (60fps) |
506 | 544 |
|
507 | | -### Phase 4: 集成与测试 (2天) |
| 545 | +### Phase 4: 集成与测试 (2-3天) |
508 | 546 |
|
509 | | -**目标**: 集成到现有项目,A/B 测试 |
| 547 | +**目标**: 集成到现有项目的两个使用场景,实现统一渲染 |
510 | 548 |
|
511 | 549 | **任务**: |
512 | | -- [ ] 替换 FeedDetail 页面的 HtmlView |
513 | | - - [ ] 保留 WebView 作为降级方案 |
514 | | - - [ ] Feature Flag 控制切换 |
515 | | -- [ ] 集成到回复列表 |
516 | | -- [ ] UI 适配 |
517 | | - - [ ] 字体大小适配 |
518 | | - - [ ] Dark Mode 适配 |
519 | | - - [ ] 行距和段距调整 |
520 | | -- [ ] 完整测试 |
521 | | - - [ ] 各类帖子内容测试 |
522 | | - - [ ] 交互功能测试 |
523 | | - - [ ] 降级场景测试 |
524 | | -- [ ] 文档编写 |
525 | | - - [ ] 代码注释 |
526 | | - - [ ] README 更新 |
527 | | - - [ ] 架构文档 |
| 550 | + |
| 551 | +#### 4.1 替换帖子内容渲染(NewsContentView) |
| 552 | +- [ ] 将 `HtmlView` 替换为 `RichView` |
| 553 | + - [ ] 移除 `imgs` 参数(自动从 HTML 提取) |
| 554 | + - [ ] 使用 `.default` 配置 |
| 555 | + - [ ] 实现事件处理(链接、图片、@mention) |
| 556 | + - [ ] 保留 `rendered` 状态绑定 |
| 557 | +- [ ] Feature Flag 控制 |
| 558 | + - [ ] 添加 `useRichViewForTopic` 开关 |
| 559 | + - [ ] 降级逻辑:失败时回退到 HtmlView |
| 560 | +- [ ] 测试 |
| 561 | + - [ ] 纯文本帖子 |
| 562 | + - [ ] 包含图片的帖子 |
| 563 | + - [ ] 包含代码的帖子 |
| 564 | + - [ ] 包含 @mention 的帖子 |
| 565 | + - [ ] 混合内容帖子 |
| 566 | + |
| 567 | +#### 4.2 替换回复内容渲染(ReplyItemView) |
| 568 | +- [ ] 将 `RichText` (Atributika) 替换为 `RichView` |
| 569 | + - [ ] 使用 `.compact` 配置(更小字体、更紧凑间距) |
| 570 | + - [ ] 实现事件处理 |
| 571 | + - [ ] 适配回复列表布局 |
| 572 | +- [ ] Feature Flag 控制 |
| 573 | + - [ ] 添加 `useRichViewForReply` 开关 |
| 574 | + - [ ] 降级逻辑:失败时回退到 RichText |
| 575 | +- [ ] 性能测试 |
| 576 | + - [ ] 回复列表滚动流畅度(60fps) |
| 577 | + - [ ] 缓存命中率监控 |
| 578 | + - [ ] 内存占用对比测试 |
| 579 | +- [ ] 测试 |
| 580 | + - [ ] 短回复(< 100 字符) |
| 581 | + - [ ] 长回复(> 1000 字符) |
| 582 | + - [ ] 包含代码的回复 |
| 583 | + - [ ] 包含 @mention 的回复 |
| 584 | + - [ ] 列表滚动性能(100+ 回复) |
| 585 | + |
| 586 | +#### 4.3 UI 适配 |
| 587 | +- [ ] 字体大小适配 |
| 588 | + - [ ] 帖子内容: fontSize = 16 |
| 589 | + - [ ] 回复内容: fontSize = 14(compact 配置) |
| 590 | +- [ ] Dark Mode 适配 |
| 591 | + - [ ] 文本颜色自动适配 |
| 592 | + - [ ] 代码高亮主题切换 |
| 593 | + - [ ] 链接颜色适配 |
| 594 | +- [ ] 行距和段距调整 |
| 595 | + - [ ] 与现有 UI 保持一致 |
| 596 | + - [ ] 适配不同屏幕尺寸 |
| 597 | + |
| 598 | +#### 4.4 交互功能测试 |
| 599 | +- [ ] 链接点击 |
| 600 | + - [ ] 外部链接在浏览器打开 |
| 601 | + - [ ] 内部链接应用内导航 |
| 602 | +- [ ] 图片预览 |
| 603 | + - [ ] 单击显示图片查看器 |
| 604 | + - [ ] 支持手势缩放 |
| 605 | + - [ ] 支持关闭 |
| 606 | +- [ ] @mention 跳转 |
| 607 | + - [ ] 点击跳转到用户主页 |
| 608 | + - [ ] 正确解析用户名 |
| 609 | +- [ ] 文本选择 |
| 610 | + - [ ] 支持长按选择 |
| 611 | + - [ ] 支持复制 |
| 612 | + |
| 613 | +#### 4.5 降级测试 |
| 614 | +- [ ] 超大内容降级(>100KB) |
| 615 | +- [ ] 包含不支持标签的内容降级 |
| 616 | +- [ ] 渲染错误时降级 |
| 617 | +- [ ] 验证降级后功能正常 |
528 | 618 |
|
529 | 619 | **验收标准**: |
530 | | -- 所有现有功能正常工作 |
531 | | -- UI 与现有设计一致 |
532 | | -- 无明显 Bug |
533 | | -- 降级方案可用 |
| 620 | +- ✅ 帖子内容和回复内容均使用 RichView |
| 621 | +- ✅ 所有交互功能正常工作 |
| 622 | +- ✅ UI 与现有设计一致 |
| 623 | +- ✅ 回复列表滚动流畅(60fps) |
| 624 | +- ✅ 缓存命中率 > 80% |
| 625 | +- ✅ 降级方案可用且功能完整 |
| 626 | +- ✅ 无明显性能或内存问题 |
534 | 627 |
|
535 | 628 | ### Phase 5: 发布与监控 (1天) |
536 | 629 |
|
|
0 commit comments