Das Baerchen Tool Box

一套給中文寫作者用的網頁工具箱，用 Next.js App Router + TypeScript 寫成。

線上版：https://tool-box.dasbaerchen.site

起因是自己在寫長篇時反覆卡住的那些地方：貼到社群平台前要把半形標點換成全形、 一篇兩萬字要按平台字數上限切成好幾段、要把長截圖切開或把某幾段遮掉再發出去。 與其每次手動處理，不如一個個做成工具。

功能

功能	路徑	說明
通用編輯器	/editor	多文件、本機自動儲存、復原/重做、尋找取代、字數統計、Markdown / HTML 預覽、本機文件匯入匯出與完整備份還原、「編輯｜出圖」同一頁切換的文轉圖（切頁可選自動、手動或 1:1／4:5／3:4／9:16 固定比例，字級一條滑桿，配色預設（跟著網站主題）或自選，可輸入人名等指定文字用主題色遮起來；可選霞鶩文楷、芫荽、仙人掌明體等中文字體；斜體可改成淡色正體、對白加粗；手機可直接存到相簿）
聊天室產生器	/tools/chat	貼一段、按「左邊說／右邊說／置中小字」送出，一則一則排成聊天畫面（貼上時自動拿掉 >，可選空一行換一顆、每行一顆或整段一顆，手機複製來的特殊換行也認得）；點預覽裡的泡泡就能改字、換邊、移動、刪除；聊天室名稱與副標、頭像、名字、「正在輸入…」、底部輸入列都能開關，紙感／淺色／深色與右邊泡泡顏色可選；直接用畫布畫成 PNG（一張長圖或照手機畫面分張），全程本機
標點置換所	/tools/fullwidth	全形／半形與標點轉換，可自訂規則、保護區段（程式碼、網址、引用）不被轉換
文字切割刀	/tools/knife	依字數上限切段，逐段預覽與命名，適合貼上有長度限制的平台
影像工作檯	/tools/image	貼上／拖放圖片，分成影像切割、圖片拼接、尺寸邊框、文字標記、效果沖印五站，下載固定在右上角：切割（等分／自由下刀／框選裁切，可鎖定比例）、拼接（瀑布式、河道式、棋盤式；1 欄或 1 排就是往下或往右接成長條，比例可自訂）、描邊與補長寬比、像限時動態那樣隨意放字（可拖曳、旋轉縮放，每行色塊或半透明底、描邊與陰影，中英文共 18 套字體，英文字母還能套社群轉換區的花體）、文字或圖片浮水印與雜訊覆蓋；效果沖印把照片印成網點、孔版、影印機質感，或做成拍立得、古早數位相機、郵票、明信片、票券、底片條、單色高反差海報（四階分色讓人像更清楚，主題色可平塗、網點或斜線，標語字有方格剪貼、彩帶、圓點、圓章、標籤條），或放進通用的介面版型（音樂播放器、影片播放器、照片為主／文字為主的社群貼文、限時動態；介面文字可選 English／日本語／中文，預設米白紙感配色與襯線標題，文字、時間與數字都能改）；會裁到照片的框都能在預覽上拖曳、滾輪縮放調構圖，頭像也能另外調，可再疊顆粒，全程在瀏覽器內完成不上傳，手機可直接存到相簿
拼豆工坊	/tools/beads	照片轉成拼豆圖（寬 29／58／87／116 格，高度照照片比例或正方形，也能用圓形、六角形、愛心形板子），取色可選插畫用的「主色」（線條乾淨）或照片用的「平均」，每格以 OKLab 從和色 76 色裡找最接近的豆子色，可限制色數、把用量太少的顏色併進相近色；列出每色顆數並可整色清掉；也能開空板自由拼（畫筆、橡皮擦、油漆桶、滴管、左右／上下／四向對稱、復原重做），照片轉出來的圖可直接修；空板也能選圓形、六角形、愛心形；可以每格顯示色號照著拼，或只亮一色；看豆子一顆顆落進板子、熨斗推過去燙成一片（輕燙／中燙／全燙，帶蒸氣與隨機焦痕），豆子可選圓豆或方形磁磚，每顆可用材質筆指定霧面、珍珠光、亮粉、半透明、夜光（暗色主題會發光）；5×5／7×7 迷你板與內建色位模板，每個顏色都是色位、換一色整張跟著變；輸出透明背景或連板子的 PNG、可印貼紙的 SVG、附色號與每色顆數的圖紙；作品與素材分頁收進只存在本機的收藏冊，並匯出／匯入 JSON 備份；「周邊」分頁把作品、素材與照片做成小卡套（馬賽克／純色／照片底、蕾絲或拼豆框、雷射膜跟著滑鼠或手機傾斜流動、亮面）、御守（布料花紋、直書繡字、繩結輕晃、可掛拼豆小鈴鐺、點一下翻面）、透卡／打卡棒（疊在照片前、拖四個角做透視傾斜、可開關壓克力邊）；上傳的圖可用魔術棒去背（容許值、橡皮擦修邊、羽化），每種周邊都有預設樣子，沒照片也能做，設計、照片與去背圖自動存在本機（IndexedDB），輸出 PNG
社群轉換區	/tools	一個編輯區，字體（Unicode 變體，作用在選取範圍）、特殊符號、分隔線、顏文字直接作用在上面；社群排版（保護空行與縮排的隱形字元）在複製時才套用，可切換「標記查看」看它插在哪

全站有七款可切換主題與一組自訂／隨機配色引擎，配色會經過對比度檢查再套用。

技術

Next.js 16（App Router）、React 19、TypeScript、Tailwind CSS v4、Jest。

所有工具都在瀏覽器裡完成：沒有 API route、沒有資料庫、沒有伺服器端取資料。 因此整站以 output: "export" 匯出成純靜態檔案（見下方「部署」）。

編輯器與各工具的核心邏輯都抽在 lib/ 與 app/tools/*/_lib/ 底下， 與 React 元件分離，方便單獨測試——目前 28 個測試檔、523 個測試。

開始開發

1. 安裝

git clone https://github.com/dasbaerchen42/ToolBox.git
cd ToolBox
npm install

2. 執行

npm run dev     # 開發伺服器 http://localhost:3000
npm run lint    # ESLint
npm test        # Jest
npm run build   # 建置並匯出靜態檔案到 out/

部署

next.config.ts 設了 output: "export"，npm run build 會把整站輸出到 out/， 丟給任何靜態主機都能跑，不需要 Node runtime 也不需要任何 adapter。

同時設了 trailingSlash: true，匯出的是 editor/index.html 而不是 editor.html。 少了這行，不會自動補 .html 的靜態主機會對每個子頁面回 404。

目前的部署：Cloudflare Workers

wrangler.jsonc 就是部署設定，assets.directory 指向 out/。這是 assets-only 的 Worker——沒有 main（沒有任何 Worker 程式碼），也沒有 binding（那個欄位 只有在有 Worker 腳本時才有意義，這裡加了會出錯）。

專案在 Cloudflare 儀表板上要設的：

欄位	值
組建命令	npm run build
部署命令	npx wrangler deploy
根目錄	/
分支控制	main

Cloudflare 偵測到 Next.js 專案時會自動把組建命令設成 npx opennextjs-cloudflare build（SSR 轉接器那條路）。這個專案是純靜態匯出、 沒有裝那個套件，維持自動設定的話建置會直接失敗。要手動改回 npm run build。

換網域之後

app/layout.tsx 裡的 SITE_URL 也要一起改。

安全性

• Markdown / HTML 預覽的產物一律經過 DOMPurify，且關閉 SVG 與 MathML profile。
• 所有工具都在本機完成，貼進去的文字與圖片不會送到任何伺服器。
• .env.local、憑證 JSON、私鑰都在 .gitignore 內，不要提交。

發現安全問題請開 issue（若涉及可利用的漏洞，請先私下聯絡而非公開細節）。

授權

MIT，見 LICENSE。