From 97a798f122cbd6c5f55542c4bd446e999d91dddb Mon Sep 17 00:00:00 2001 From: m1ngsama Date: Fri, 26 Dec 2025 15:04:04 +0800 Subject: [PATCH] docs: Update NEXT_STEPS.md with detailed progress tracking --- NEXT_STEPS.md | 184 ++++++++++++++++++++++++++------------------------ 1 file changed, 94 insertions(+), 90 deletions(-) diff --git a/NEXT_STEPS.md b/NEXT_STEPS.md index 6b2efe6..f2582e0 100644 --- a/NEXT_STEPS.md +++ b/NEXT_STEPS.md @@ -1,118 +1,115 @@ # TUT 2.0 - 下次继续从这里开始 ## 当前位置 -- **阶段**: Phase 4 - 图片支持 -- **进度**: 基础功能完成 (占位符显示) -- **最后完成**: 图片占位符渲染 + 二进制数据下载支持 +- **阶段**: Phase 4 - 图片支持 (基础完成) +- **进度**: 占位符显示已完成，ASCII Art 渲染框架就绪 +- **最后提交**: `d80d0a1 feat: Implement TUT 2.0 with new rendering architecture` +- **待推送**: 本地有 3 个提交未推送到 origin/main -## Phase 4 已完成功能 - -### 图片占位符 (已完成) -- `` 标签解析和渲染 -- 显示 alt 文本或文件名 -- 格式: `[Example Photo]` 或 `[Image: filename.jpg]` - -### 二进制下载支持 (已完成) -- `HttpClient::fetch_binary()` 方法 -- `BinaryResponse` 结构体 - -### ASCII Art 渲染器框架 (已完成) -- `ImageRenderer` 类 -- 支持 ASCII、块字符、盲文三种模式 -- PPM 格式解码（内置，无需外部库） - -## 启用完整图片支持 - -要支持 PNG、JPEG 等常见格式，需要下载 stb_image.h: +## 立即可做的事 +### 1. 推送代码到远程 ```bash -# 下载 stb_image.h 到 src/utils/ 目录 +git push origin main +``` + +### 2. 启用完整图片支持 (PNG/JPEG) +```bash +# 下载 stb_image.h curl -L https://raw.githubusercontent.com/nothings/stb/master/stb_image.h \ -o src/utils/stb_image.h # 重新编译 cmake --build build_v2 + +# 编译后 ImageRenderer::load_from_memory() 将自动支持 PNG/JPEG/GIF/BMP ``` -## Phase 3 已完成功能 +### 3. 在浏览器中集成图片渲染 +需要在 `browser_v2.cpp` 中: +1. 收集页面中的所有 `` 标签 +2. 使用 `HttpClient::fetch_binary()` 下载图片 +3. 调用 `ImageRenderer::load_from_memory()` 解码 +4. 调用 `ImageRenderer::render()` 生成 ASCII Art +5. 将结果插入到布局中 -### 页面缓存 -- LRU缓存，最多20个页面 -- 5分钟缓存过期 -- 刷新时跳过缓存 (`r` 键) -- 缓存页面状态栏显示图标 +## 已完成的功能清单 -### 差分渲染优化 -- 批量输出连续相同样式的字符 -- 减少光标移动次数 -- 只更新变化的单元格 +### Phase 4 - 图片支持 +- [x] `` 标签解析 (src, alt, width, height) +- [x] 图片占位符显示 `[alt text]` 或 `[Image: filename]` +- [x] `BinaryResponse` 结构体 +- [x] `HttpClient::fetch_binary()` 方法 +- [x] `ImageRenderer` 类框架 +- [x] PPM 格式内置解码 +- [ ] stb_image.h 集成 (需手动下载) +- [ ] 浏览器中的图片下载和渲染 -### 加载状态指示 -- 连接状态、解析状态 -- 缓存加载、错误状态 +### Phase 3 - 性能优化 +- [x] LRU 页面缓存 (20页, 5分钟过期) +- [x] 差分渲染 (只更新变化的单元格) +- [x] 批量输出优化 +- [x] 加载状态指示 -## Phase 2 已完成功能 +### Phase 2 - 交互增强 +- [x] 搜索功能 (/, n/N) +- [x] 搜索高亮 +- [x] Tab 切换链接时自动滚动 +- [x] 窗口大小动态调整 +- [x] 表单渲染 (input, button, checkbox, radio, select) +- [x] POST 表单提交 -### 搜索功能 -- `/` 触发搜索模式 -- `n`/`N` 跳转匹配 -- 搜索高亮 +### Phase 1 - 核心架构 +- [x] Terminal 抽象层 (raw mode, True Color) +- [x] FrameBuffer 双缓冲 +- [x] Renderer 差分渲染 +- [x] LayoutEngine 布局引擎 +- [x] DocumentRenderer 文档渲染 +- [x] Unicode 宽度计算 (CJK 支持) +- [x] 温暖护眼配色方案 -### 链接导航完善 -- Tab切换时自动滚动到链接位置 +## 代码结构 -### 窗口大小调整 -- 动态获取尺寸 -- 自动重新布局 +``` +src/ +├── browser_v2.cpp/h # 新架构浏览器 (pImpl模式) +├── main_v2.cpp # tut2 入口点 +├── http_client.cpp/h # HTTP 客户端 (支持二进制) +├── dom_tree.cpp/h # DOM 树 +├── html_parser.cpp/h # HTML 解析 +├── input_handler.cpp/h # 输入处理 +├── render/ +│ ├── terminal.cpp/h # 终端抽象 (ncurses) +│ ├── renderer.cpp/h # FrameBuffer + 差分渲染 +│ ├── layout.cpp/h # 布局引擎 + 文档渲染 +│ ├── image.cpp/h # 图片渲染器 (ASCII Art) +│ ├── colors.h # 配色方案定义 +│ └── decorations.h # Unicode 装饰字符 +└── utils/ + ├── unicode.cpp/h # Unicode 处理 + └── stb_image.h # [需下载] 图片解码库 -### 表单渲染 -- 输入框、按钮、复选框等 +tests/ +├── test_terminal.cpp # Terminal 测试 +├── test_renderer.cpp # Renderer 测试 +└── test_layout.cpp # Layout + 图片占位符测试 +``` -## 文件变更 (Phase 4) - -### 新增文件 -- `src/render/image.h` - 图片渲染器头文件 -- `src/render/image.cpp` - 图片渲染器实现 - -### 修改的文件 -- `src/dom_tree.h` - 添加 img_src, img_width, img_height 属性 -- `src/dom_tree.cpp` - 解析 img 标签的 src, width, height 属性 -- `src/render/layout.h` - 添加 layout_image_element 方法 -- `src/render/layout.cpp` - 实现图片布局 -- `src/http_client.h` - 添加 BinaryResponse, fetch_binary -- `src/http_client.cpp` - 实现 fetch_binary -- `CMakeLists.txt` - 添加 image.cpp - -## 下一步要做 - -### 实现真正的 ASCII Art 图片渲染 -1. 下载 stb_image.h -2. 在 browser_v2.cpp 中添加图片下载逻辑 -3. 调用 ImageRenderer 渲染图片 -4. 将 ASCII art 结果插入布局 - -### 其他可选功能 -- 异步HTTP请求 -- 书签管理 -- 更多表单交互 - -## 构建命令 +## 构建与运行 ```bash -# 配置 +# 构建 cmake -B build_v2 -S . -DCMAKE_BUILD_TYPE=Debug - -# 编译全部 cmake --build build_v2 -# 运行TUT 2.0 -./build_v2/tut2 # 显示帮助 -./build_v2/tut2 https://example.com # 打开网页 +# 运行 +./build_v2/tut2 # 显示帮助 +./build_v2/tut2 https://example.com # 打开网页 -# 测试程序 -./build_v2/test_terminal -./build_v2/test_renderer -./build_v2/test_layout +# 测试 +./build_v2/test_terminal # 终端测试 +./build_v2/test_renderer # 渲染测试 +./build_v2/test_layout # 布局+图片测试 (按回车进入交互模式) ``` ## 快捷键 @@ -122,19 +119,26 @@ cmake --build build_v2 | j/k | 上下滚动 | | Ctrl+d/u | 翻页 | | gg/G | 顶部/底部 | -| Tab | 下一个链接 | +| Tab/Shift+Tab | 切换链接 | | Enter | 跟随链接 | | h/l | 后退/前进 | | / | 搜索 | | n/N | 下一个/上一个匹配 | -| r | 刷新（跳过缓存）| +| r | 刷新 (跳过缓存) | | :o URL | 打开URL | | :q | 退出 | | ? | 帮助 | +## 下一步功能优先级 + +1. **完成图片 ASCII Art 渲染** - 下载 stb_image.h 并集成到浏览器 +2. **书签管理** - 添加/删除书签，书签列表页面，持久化存储 +3. **异步 HTTP 请求** - 非阻塞加载，加载动画，可取消请求 +4. **更多表单交互** - 文本输入编辑，下拉选择 + ## 恢复对话时说 > "继续TUT 2.0开发" --- -更新时间: 2025-12-26 +更新时间: 2025-12-26 15:00