🛠️ 工具箱交接總覽 v1.0
4 個工具 · html-editor 3 個雅寶專屬功能 · 5 個坑
2026-10-31 · 給下一個 AI 的完整交接
一、4 個工具
| # | 路徑 | 名稱 | 功能 | 依賴 |
|---|
| 1 | html-editor/ | 視覺化 HTML 編輯器 | 即時預覽、雙向同步、代碼追蹤、螢光筆（⌘+H）、手機模擬、下載截圖、套用文章模板、匯出螢光重點、複製乾淨版 | CodeMirror + html2canvas（逆向工程，已改雅寶風格） |
| 2 | json-formatter/ | JSON 格式化器 | 格式化、驗證、壓縮 JSON | 零依賴（純 JS） |
| 3 | base64/ | Base64 編碼解碼器 | UTF-8 編碼、解碼 | 零依賴（TextEncoder + atob/btoa） |
| 4 | markdown/ | Markdown 預覽器 | 即時渲染 Markdown | marked.js（vendor） |
🔗 線上入口：https://tools.ahpal.com/
二、html-editor 架構
| 項目 | 內容 |
|---|
| 位置 | C:\Users\User\ahpal-tools\html-editor\ |
| 主程式 | index.html（約 20,000 字元） |
| vendor | CodeMirror + html2canvas（9 個檔，約 424 KB） |
| 部署 | git push（Cloudflare Pages 自動） |
| 線上 | https://tools.ahpal.com/html-editor/ |
| 原始來源 | 逆向工程（goodcompany.tw），已改雅寶風格 |
三、雅寶專屬 3 功能（2026-10-31 新增）
| # | 按鈕 | 做什麼 | 產出 |
|---|
| 1 | 🦞 套用文章模板 | 注入 ahpal-article-template CSS（金標題 #D4AF37、黑背景 #0D1117、藍 h2 #58A6FF、金邊引用） | 只套樣式，不動內容 |
| 2 | 📋 匯出螢光重點 | 掃 span[background:#D4AF37]，輸出 markdown 清單 | 剪貼簿拿到 ## 螢光重點 + 編號清單 |
| 3 | 🧹 複製乾淨版 | 移除 contenteditable、螢光 span、編輯器 style | 剪貼簿拿到乾淨 HTML |
為什麼只有你有：別人的編輯器不知道雅寶文章長什麼樣；別人的螢光筆是視覺標註，雅寶的螢光筆是「內容萃取」。
四、黑底金字樣式
| 項目 | 值 |
|---|
| 主色（金） | #D4AF37 |
| 背景（黑） | #0D1117 |
| 卡片 | #161B22 |
| 次色（藍） | #58A6FF |
| 邊框 | #2D303A |
| 預覽區背景 | #e9ecef（淺灰，區分編輯區與預覽區） |
五、底部品牌列（7 個連結）
因為 html-editor 是「全螢幕工具」，不用頂部導航列，改成底部品牌列：
六、5 個坑（給下一個 AI）
| # | 坑 | 正確做法 |
|---|
| 1 | here-string 在互動模式被 >> 干擾 | 改用 Python .py，零 here-string |
| 2 | 字元數 ≠ 位元組數 | 中文 1 字元 = 3 bytes，比對時要用同一單位 |
| 3 | git add 後 LF→CRLF 警告 | 正常，不影響功能 |
| 4 | Cloudflare CDN 快取 | push 後等 30~60 秒再驗證 |
| 5 | 預覽區背景黑色跟頂部融合 | 改淺灰 #e9ecef 區分編輯區與預覽區 |
七、怎麼用（下一個 AI 第一天）
- 讀本檔（HTML 索引）
- 讀
scripts\sop\sop-30-39.txt 第四十二章（完整 SOP） - 改 html-editor 前，先讀
ahpal-tools\docs\tools-handover-v1.0.txt - 先診斷，再動手；改完 push 後等 30 秒線上驗證
「先診斷，再動手。」
「永遠先備份。」
「不要讓董事長當搬運工。」
「逆向工程不可恥，可恥的是不改。」