Skip to content

Commit 1c8eac0

Browse files
graycreateclaude
andcommitted
docs: emphasize dual implementation replacement (HtmlView + RichText)
Update all planning documents to clearly specify that RichView replaces TWO different existing implementations: 1. HtmlView (WKWebView) - for topic content in NewsContentView 2. RichText (NSAttributedString) - for reply content in ReplyItemView Updates to richtext_plan.md: - Expanded background section detailing both current implementations - Added specific problems for each implementation - Updated goals to emphasize unification benefits - Restructured Phase 4 with separate sections for: - 4.1 Topic content migration (HtmlView → RichView) - 4.2 Reply content migration (RichText → RichView) - 4.3 UI adaptation, 4.4 Interaction testing, 4.5 Degradation Updates to richview_api.md: - Completely rewritten migration guide with two sections - Added side-by-side comparison table (HtmlView vs RichText vs RichView) - Provided complete before/after code examples for both use cases - Added migration checklists for both implementations - Documented configuration differences (.default vs .compact) These changes clarify the full scope: unifying two inconsistent implementations into a single, high-performance module with consistent features (code highlighting, @mentions, image preview) across both topic and reply content. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 230a7f7 commit 1c8eac0

File tree

2 files changed

+313
-38
lines changed

2 files changed

+313
-38
lines changed

.plan/richtext_plan.md

Lines changed: 125 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,58 @@
33
## 📌 项目概述
44

55
### 背景
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、代码高亮等)
1130

1231
### 目标
13-
使用 HTML → Markdown → swift-markdown + Highlightr 方案,实现高性能、原生的富文本渲染。
32+
33+
使用统一的 **RichView** 模块替换现有的两套实现:
34+
- ✅ 统一渲染引擎: HTML → Markdown → swift-markdown + Highlightr
35+
- ✅ 统一交互体验: @mention、图片预览、代码高亮
36+
- ✅ 统一配置管理: 支持不同场景的样式配置(帖子 vs 回复)
37+
- ✅ 统一缓存策略: 自动缓存,提升列表滚动性能
1438

1539
### 预期收益
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+
- **可扩展**: 模块化设计,易于添加新功能
2058

2159
---
2260

@@ -504,33 +542,88 @@ Models/ + Extensions/
504542
- 内存占用减少 70%+
505543
- 流畅滚动 (60fps)
506544

507-
### Phase 4: 集成与测试 (2天)
545+
### Phase 4: 集成与测试 (2-3天)
508546

509-
**目标**: 集成到现有项目,A/B 测试
547+
**目标**: 集成到现有项目的两个使用场景,实现统一渲染
510548

511549
**任务**:
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+
- [ ] 验证降级后功能正常
528618

529619
**验收标准**:
530-
- 所有现有功能正常工作
531-
- UI 与现有设计一致
532-
- 无明显 Bug
533-
- 降级方案可用
620+
- ✅ 帖子内容和回复内容均使用 RichView
621+
- ✅ 所有交互功能正常工作
622+
- ✅ UI 与现有设计一致
623+
- ✅ 回复列表滚动流畅(60fps)
624+
- ✅ 缓存命中率 > 80%
625+
- ✅ 降级方案可用且功能完整
626+
- ✅ 无明显性能或内存问题
534627

535628
### Phase 5: 发布与监控 (1天)
536629

0 commit comments

Comments
 (0)