# 在线工具规划（草案） 面向本站「纯前端优先、尽量少依赖后端」的约束，下列工具按**常用度**与**实现难度**做了粗分，便于后续迭代。 --- ## 你已提到的方向 | 方向 | 说明 | 实现要点 | |------|------|----------| | **PDF → Markdown** | 论文/说明书转可编辑文本 | 浏览器内可用 pdf.js 抽文本，版式复杂时质量一般；高质量需服务端 OCR 或商用 API | | **语音识别** | 口述转文字 | Chrome 等可用 **Web Speech API**（免费、离线能力因浏览器而异）；高精度/长音频通常要云端 ASR | | **翻译** | 中英互译等 | 纯前端可接浏览器自带能力有限；常见做法是第三方翻译 API（需密钥与合规）或链到 DeepL/Google 等 | --- ## A. 文本 / 数据类（最适合先做，与现有 JSON 工具一致） - **JSON ↔ YAML / TOML 互转**：接口调试、配置对照。 - **JWT 解码**（仅 Base64 展示 payload，**不**声称验证签名）：调试 OAuth。 - **Base64 / URL 编解码**：小片段快速处理。 - **哈希与 HMAC**：SHA-256、MD5（注明用途与风险），便于对接接口文档。 - **Unix 时间戳 ↔ 本地时间**：含时区说明。 - **UUID / ULID 生成**：一键复制。 - **正则在线测试**：带常用 flag 说明（与博客「编程教程」受众契合）。 - **文本 Diff**：两段文本或两段 JSON 的结构化对比（可先做纯文本行 diff）。 --- ## B. 编码与网络调试 - **curl 命令解析**：把 curl 拆成 method、header、body（只读展示，不执行）。 - **User-Agent / Accept-Language 解析**：可读字段展示。 - **IPv4 子网计算器**：CIDR、起止地址。 - **二维码生成**（文本/URL → 图）：纯前端库即可。 --- ## C. 前端 / 设计辅助 - **颜色格式互转**：HEX / RGB / HSL，带对比度提示（可引用 WCAG）。 - **CSS 渐变生成器**：输出 `linear-gradient` 片段。 - **简易 SVG 预览**：粘贴 XML 即渲染（注意 XSS，需严格隔离或仅允许白名单标签）。 --- ## D. 文档与学术向（与站点「笔记 / 论文」气质接近） - **Markdown 实时预览**（或 MathJax 可选）：写博客的人常用。 - **BibTeX 格式化 / 去重键检查**：轻量校验。 - **LaTeX 片段预览**：可仅支持数学公式子集，降低复杂度。 - **PDF 纯文本抽取**（不接 OCR）：与「PDF → Markdown」的第一步相同，单独做「抽文本」更简单、预期更清晰。 --- ## E. 媒体与文件（通常更重） - **图片压缩 / 转 WebP**：Canvas 或 wasm 库，注意大文件内存。 - **音频波形或裁剪**：Web Audio，交互复杂。 - **视频封面截取某一帧**：可行但体积与兼容性要考虑。 --- ## F. 语音与翻译（单独说明取舍） - **语音识别**：MVP 用 **Web Speech API** 做「点击说话 → 文本框」，明确支持浏览器列表与权限说明。 - **翻译**：若不做后端，可（1）只做「格式化待翻译文本 + 外链到常用翻译站带参」；（2）或文档写清后续接 API 的方案与成本。 --- ## 建议落地顺序（参考） 1. **JWT 解码、Base64、时间戳、UUID、正则** — 实现快、无大文件、隐私友好。 2. **JSON ↔ YAML** — 与现有 JSON 页形成工具簇。 3. **二维码、颜色转换** — 体验直观，易分享。 4. **Markdown 预览** — 与内容站属性强相关。 5. **PDF 文本抽取（弱版式）** — 再视反馈考虑是否上 OCR / 服务端。 6. **语音识别 / 翻译** — 明确产品形态后再做（浏览器能力 vs API）。 --- ## 统一产品原则（工具页共用） - **隐私**：默认本地处理；若必须上传服务器，在页面显著说明。 - **性能**：大文件给出大小提示与「可能卡顿」说明。 - **无障碍**：主要操作可键盘完成；对比度与焦点样式与首页风格一致。 - **入口**：首页导航「工具」可后续改为 `/tool/` 索引页，列出各子工具与一句话说明。 --- *文档版本：随实现情况可增删条目。*