tags: 学习工作
title: 【学习工作赛道】+ DraftPeek（撰码轻览）— Android 移动端全能代码查看与编辑器
先和大家打个招呼吧
大家好，这个 Demo 是我和 TRAE 一起配合完成的——说来挺有意思的，最开始我只是想做个「能在手机上看代码的小工具」，没想到在 TRAE 的帮助下 越做越大，最后成了一个涵盖代码编辑、Markdown 预览、Office 文档查看、PDF 阅读的「移动端全能工作站」。
作为一个没有开发经验的初学者，我最大的感受是：TRAE 帮我省掉了 大量「机械劳动」。以往我要自己写模板代码、调 Gradle 配置、排查依赖冲突……这些事 TRAE 几乎一键就帮我搞定了。我只需要把脑子里的想法一句句讲给它听——
「我想支持 30 种语言的语法高亮」
「我想在手机上也实现分屏浏览」
「我想让 Markdown 能渲染数学公式」
——它就能帮我规划路径、写代码、甚至帮我避坑。
最让我惊喜的一步是 Markdown 预览引擎的搭建。 原本我以为要在 Android 端做 KaTeX 数学公式渲染 + Mermaid 图表 + 代码高亮是一件很复杂的事，结果 TRAE 帮我从 marked.js 的配置到 KaTeX 字体资源打包，一步到位全部搞定。那一刻我真实感受到 —— 「原来这么简单」！
1. Demo 简介
是什么
DraftPeek（撰码轻览） 是一款 Android 原生 代码查看与编辑器 App，采用 Kotlin + Jetpack Compose 开发，兼具轻量级代码编辑、多格式文档预览和使用统计功能。
面向谁
需要在手机上快速浏览 / 编辑代码的 开发者
喜欢在移动端阅读 Markdown 文档（含数学公式和技术图表）的 技术创作者
需要临时查看 Office（Word / Excel / PPT）和 PDF 文件的 移动办公用户
主要功能
功能一：多语言代码编辑器
内置 30+ 种编程语言 的语
法高亮（Kotlin、Python、JavaScript、Rust、Go、Java、C/C++……），支持撤销 / 重做、搜索替换、多标签页、自动保存、编码检测与切换。编辑器基于 sora-editor 引擎，使用 TextMate 语法文件实现精准高亮
功能二：全能 Markdown 预览引擎
内置 marked.js + KaTeX（数学公式，含 mhchem 化学方程式）+ Mermaid（流程图、时序图、饼图、甘特图）+ highlight.js（代码块语法高亮），全部离线打包，无需网络。
功能三：一站式多格式文档查看
| 文档类型 | 技术方案 | 特点 |
|---|---|---|
| Office 文档（Word / Excel / PPT） | Apache POI 解析 → 转 HTML → WebView 渲染 | 无需额外 App |
| PDF 文档 | Android 系统 PdfRenderer API |
零外部依赖 |
| 自动识别 | 文件类型自动检测 | 一键切换渲染模式 |
功能四：文件浏览器 + Git 集成
- 文件系统浏览、新建 / 删除 / 重命名
- 集成 JGit 支持 GitHub 仓库导入
- 文件差异对比（Diff 视图）
- 浏览历史追踪 + 代码片段管理
- 内置 30+ 种语言的 Hello World 示例文件
2. Demo 创作思路
灵感来源
作为一名需要在 Android 手机上阅读代码的技术写作者，我长期面临一个尴尬：手机上没有一个能让我舒服地查看各种代码文件的工具。系统自带的文本查看器功能极其有限，而市面上的「代码编辑器」App 要么功能残缺、要么广告泛滥、要么年久失修。
于是我想：为什么不自己做一个呢？
想解决的问题
| 痛点 | 现状 |
|---|---|
 移动端代码查看体验差 |
现有 App 要么只支持纯文本，要么语法高亮种类少 |
| Markdown 预览功能缺失 |
很多 App 不支持数学公式、技术图表渲染 |
| 缺少开发工具 |
开发者缺少在移动端记录编辑活动的工具 |
为什么做这个方向
我经过调研发现，Android 平台上的代码编辑 App 市场存在一个明显的 「中空地带」——要么是功能极其简单的文本编辑器（只支持纯文本），要么是试图做成「手机 IDE」的复杂工具。
DraftPeek 选了一条中间路线： 专注 「代码查看 + 轻量编辑」，不强求在手机上写大型工程，但确保 「打开任何代码或文档文件都能获得接近桌面 IDE 的阅读体验」。
同时，我在设计中加入了「朱砂与琥珀功能主义」设计哲学。（I have incorporated the design philosophy of “Cinnabar and Amber Functionalism” into my work.）——精确、克制、有工艺感，希望让使用者在工具本身感受到设计之美。
3. Demo 体验地址
本项目是一个 Android App（APK 安装包），目前提供以下体验方式：
方式一：APK 安装包
4. TRAE 实践过程
以下是用 TRAE 完成 DraftPeek 开发的完整流程记录，按开发阶段逐一展开。
阶段一：项目初始化与架构搭建
- 用 TRAE 创建多模块 Android 项目结构（
app / core/common / core/ui / core/data / feature/*） - 配置 Gradle 版本目录
libs.versions.toml - 集成 Hilt 依赖注入 + Room 数据库
- 配置 R8 混淆规则（ProGuard 保留规则）
阶段二：代码编辑器核心功能
- 集成 sora-editor 原生编辑引擎
- 配置 20+ 种语言的 TextMate
.tmLanguage.json语法文件 - 实现 多标签页管理器（TabManager）、搜索替换、编码自动检测
阶段三：Markdown 预览引擎（核心亮点 
）
- 搭建 WebView 离线渲染方案
- 打包 marked.js + KaTeX（含 mhchem 化学方程式扩展）+ Mermaid + highlight.js
- 攻克 KaTeX 字体资源打包难题（19 种 woff2 字体离线加载）
阶段四：Office 文档与 PDF 解析
- 集成 Apache POI 解析 Word / Excel / PPT → 转 HTML → WebView 渲染
- 实现 PdfRenderer API 渲染 PDF（零外部依赖）
- 文件类型自动识别 + 渲染模式自动切换
阶段五：文件浏览器与 Git 集成
- 实现文件系统浏览、新建 / 删除 / 重命名、搜索排序
- 集成 JGit 支持 GitHub 仓库导入
- Diff 视图：两个版本之间的代码差异对比
- 浏览历史追踪 + 代码片段管理
阶段六：统计页面与安全加固
- 活动热力图（类 GitHub 贡献图，记录每日编辑活动）
- 编辑次数、文件打开数、活跃天数等使用统计
- 安全防护（Release 构建生效）：
- 反调试检测（
AntiDebug） - APK 签名校验（
ApkIntegrityChecker） - DEX 完整性校验（
DexIntegrityChecker） - 运行时安全定时检测（3-15 秒随机间隔）
- 反调试检测（
Session ID 汇总
Session ID 是 TRAE 每段对话任务的唯一标识，双击 TRAE 对话头像即可复制。以下是开发过程中的关键会话记录：
| 开发阶段 | Session ID | 说明 |
|---|---|---|
| 阶段一：项目初始化与架构搭建 | 多模块项目创建、Gradle 配置 | |
| 阶段二：代码编辑器核心功能 | sora-editor 集成、语法高亮 | |
| 阶段四：Office 文档与 PDF 解析 | Apache POI 集成、PDF 渲染 | |
| 阶段三：Markdown 预览引擎 | 离线渲染方案、KaTeX 打包 |
由于开发周期较长，中间部分对话记录已被覆盖。以上列出的是可追溯的关键会话 ID。为满足比赛要求，我从中挑选了 不少于 3 个 代表性 ID 附上，覆盖了项目编辑器开发和多格式文档解析等核心阶段，足以证明本作品由 TRAE 完成。
2297312459887596:73426d53f4bc9b5ba66b5ca03a2d9033_6a4f239b54d7eb0cc96eadf6.6a4f239b54d7eb0cc96eadf9.6a4f239b54d7eb0cc96eadf7:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/9 12:29:15)================================================================
2297312459887596:22c1302fdc4641a18888eb440b0a19f0_6a4fa14c7d936714cbffa25f.6a4fa14c7d936714cbffa262.6a4fa14c7d936714cbffa260:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/9 21:25:32)
================================================================
2297312459887596:6acd4e5434abc297c8d877a9d4f3e2ad_6a524b46a4adfbbbba9d2992.6a524b46a4adfbbbba9d2995.6a524b46a4adfbbbba9d2993:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/11 21:55:18)
================================================================
2297312459887596:3bf107593b7268efe3a15f65a611187f_6a52ecde3719ea869a323632.6a52ef703719ea869a3236a4.6a52ef703719ea869a3236a2:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/12 09:35:44)
5. 对应的报名审核通过的帖子链接
【学习工作】DraftPeek 撰码轻览 一款轻量级代码查看与编辑器应用。 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
