CodeWF Toolbox：一個用 Avalonia + Prism 做出來的開發者工具箱

今天這篇文章，站長來聊聊我自己開發的 CodeWF Toolbox，CodeWF 工具箱。

熟悉我的朋友通常叫我「站長」，因為我還有一個網站：CodeWF。這個工具箱也是圍繞我平時寫程式碼、維護網站、整理資料、排查問題時反覆遇到的需求做出來的。它不是一個只擺幾個按鈕的 Avalonia Demo，而是一個已經有 100 多個工具入口的本地桌面工具箱。

專案使用 C# + Avalonia + Prism + Semi.Avalonia + Ursa，目標很直接：把開發者日常會反覆打開的轉換、編碼、格式化、校驗、產生、查詢類工具集中到一個本地桌面應用裡。

這次我重點不講空泛的「跨平台 UI 能力」，而是按 CodeWF Toolbox 現在實際能做什麼來拆。介面截圖也重新做了一版，主視窗尺寸調小了一些，首頁加入了常用與推薦工具入口；整體用我個人更喜歡的 沙漠主題 展示。

先看一段功能巡覽 GIF。

首頁：不再只是空白歡迎頁

新版首頁是我這次重點調整的地方之一。以前它更像一個普通歡迎頁，現在則更適合作為工具箱入口。

首頁上方展示三個核心資訊：

• 目前可用工具數量：117。
• 目前功能模組數量：12。
• 目前執行平台：Windows x64。

下面增加了「常用與推薦工具」。如果使用者已經使用過工具，就優先顯示常用工具；不足 8 個時用推薦工具補齊。第一次打開時也不會顯得太空，使用者能直接看到時間戳、Base64、GUID、QR Code、Hash、日誌閱讀器這類高頻入口。

這個調整雖然不大，但對工具箱體驗很關鍵。我做桌面工具箱時有一個很明確的想法：首頁不應該只是宣傳頁，它應該讓使用者打開以後馬上能開始工作。

轉換工具：開發者每天都會用到的小功能

轉換工具是 CodeWF Toolbox 裡最基本、也最常用的一類能力。

目前轉換模組裡包含這些獨立頁面和資料驅動工具：

• 時間戳轉換：Unix 時間戳與當地時間互轉，支援秒和毫秒。
• Base64 編解碼：對 UTF-8 文字進行編碼、解碼、交換和複製。
• GUID 產生器：批次產生 GUID，並控制大小寫、格式。
• YAML 轉 JSON、JSON 轉 YAML。
• 圖片轉 ICO 圖示。
• 挪車 QR Code 產生器。
• Base64 檔案轉換器。
• Base64 字串編碼/解碼。
• 大小寫轉換。
• Color 選擇器。
• 日期時間轉換器。
• 整數進位制轉換器。
• JSON/TOML/XML/YAML 互轉。
• List 轉換器、Markdown to HTML、羅馬數字轉換等。

例如 Base64 編解碼頁面，輸入文字後直接得到編碼結果。

這類功能很小，但它們正是開發者一天裡最容易反覆打開網頁搜尋的東西。我把它們做成本地工具箱以後，優點很明顯：回應快、離線可用、沒有廣告，也不需要把暫存文字貼到外部站點。

開發工具：格式化、解析、差異比對和命令輔助

開發模組更偏「寫程式碼過程中的輔助工具」。這些工具很多都是我自己日常會用到的，所以放進工具箱時優先級比較高。

現有開發類工具覆蓋面很寬：

• JSON 格式化、JSON 壓縮、JSON 路徑提取、JSON 轉 CSV。
• YAML 格式化。
• XML 格式化、XML XPath 測試。
• SQL 美化與格式化。
• CSV 轉 JSON、CSV 轉 Markdown 表格。
• INI 轉 JSON、.env 轉 JSON。
• HTTP Header 解析。
• Data URL 解析。
• Docker 映像標籤解析。
• Docker Run 轉 docker-compose。
• Chmod 計算器。
• Crontab 表達式產生。
• Regex Tester、Regex cheatsheet、正規取代。
• Git 備忘錄。
• Hex dump 檢視器。
• SemVer 檢查與比較。
• Markdown 表格產生器。
• NanoID、UUID v5、隨機連接埠等產生類工具。

上圖裡的 JSON 格式化頁面比較典型：左側輸入原始 JSON，右側輸出格式化結果，還能控制鍵名排序和縮排空格。

這類工具很適合被抽象成資料驅動表單：輸入欄位、輸出欄位、執行函式、自動執行配置都可以由 ToolSpec 描述，而不是每個工具都寫一套重複 XAML。對我來說，這一點很重要，因為工具數量一多，後期維護成本才是真正的問題。

安全工具：Hash、HMAC、金鑰和密碼相關能力

安全模組裡放的是開發中經常需要臨時計算或產生的安全相關內容。

目前已有功能包括：

• Bcrypt 雜湊與比較。
• BIP39 助記詞/種子產生。
• AES、TripleDES 文字加密解密。
• Hash 文字：MD5、SHA1、SHA2、SHA3、RIPEMD160。
• HMAC 產生器。
• 密碼強度分析。
• PDF 簽章檢查。
• RSA 金鑰對產生。
• Token 產生器。
• ULID 產生器。
• UUID v4 產生器。

截圖裡是 Hash 文字工具。輸入 CodeWF Toolbox 後，工具直接產生摘要值。類似功能雖然可以在命令列裡做，但桌面工具更適合臨時驗證、複製和比對。

Web 工具：HTTP、JWT、URL、MIME、UA 都能處理

Web 模組主要面向前後端聯調、介面排查和 Web 元資料處理。站長平時維護網站和寫介面時，這類小工具開啟頻率很高。

現有工具包括：

• Basic Auth Header 產生。
• 目前裝置資訊檢視。
• HTML 實體跳脫/反跳脫。
• HTML WYSIWYG 內容產生。
• HTTP 狀態碼查詢。
• JWT 解析。
• Keycode 資訊檢視。
• Open Graph / Twitter Meta 標籤產生。
• MIME 類型查詢。
• OTP 一次性密碼產生與驗證。
• Outlook SafeLink 解碼。
• Slugify 字串。
• URL 編碼/解碼。
• URL 解析。
• User-Agent 解析。
• JSON Diff。

這些工具的共同特點是輸入輸出結構都比較標準，非常適合放進統一的 ToolFramework 裡維護。

媒體工具：QR Code、WiFi QR Code 和 SVG 佔位圖

媒體模組目前不是剪輯軟體那類「大媒體工具」，而是偏開發者日常需要的小型產生工具。

現在已有：

• QR Code 產生器。
• WiFi QR Code 產生器。
• SVG 佔位符產生器。

QR Code 產生器支援輸入 URL 或文字，並產生 QR Code。這個功能放在本地工具箱裡很方便，尤其是臨時把本機位址、文件位址、倉庫位址給手機掃的時候。

網路工具：IP、CIDR、MAC 位址

網路模組目前涵蓋的是 IP 和 MAC 位址這類基礎工具：

• IPv4 位址轉換器：十進位、二進位、十六進位、IPv6 mapped 等格式。
• IPv4 範圍擴展：起止 IP 轉 CIDR 範圍。
• IPv4 子網計算器。
• IPv6 ULA 產生器。
• MAC 位址產生器。
• MAC 位址廠商查詢。

這些工具對後端、維運、網路排查和本地開發環境配置都很實用。我把它們放進 CodeWF Toolbox，是希望一些零散但常用的查詢和換算不再依賴臨時搜尋。

數學、計量、文字與資料工具

CodeWF Toolbox 不是只做編碼轉換，它還把一些小計算和文字處理工具也放進來了。

數學類：

• ETA 計算器。
• 數學表達式計算器。
• 百分比計算器。

計量類：

• Benchmark builder。
• Chronometer 計時器。
• 溫度轉換器。

文字類：

• ASCII Art 文字產生器。
• Emoji 選擇器。
• Lorem ipsum 產生器。
• Numeronym 產生器。
• 字串混淆器。
• 文字 Diff。
• 文字統計。

資料類：

• IBAN 校驗與解析。
• 電話號碼解析與格式化。

這些功能不一定每天都用，但它們都屬於「用時臨時找工具」的場景。既然我已經在做一個工具箱，就希望它能把這些低頻但實用的小能力也收進去。

日誌閱讀器：不是把大檔案一次性讀進記憶體

日誌閱讀器是我比較喜歡的一個模組方向。

它不是簡單地把日誌檔案 ReadAllText() 後塞進文字框，而是按可見視窗渲染，面向大日誌檔案和即時 tail 場景設計。介面上能看到：

• 開啟日誌。
• 重新載入。
• 跳到結尾。
• 跟隨尾部。
• 目前檔案路徑。
• 可見內容區域。

這類功能對桌面工具來說很有價值。很多時候我只是想快速看一個幾百 MB 的日誌，不想打開 IDE，也不想讓普通文字編輯器卡住。

國際化資源管理：XML 翻譯檔案的合併與管理

專案裡還有一個 CodeWF.Modules.XmlTranslatorManager 模組，用來處理 XML 語言資源管理。

它包含：

• 合併 XML 檔案。
• 管理 XML 檔案。
• 多語言屬性和語言類模型。

這個模組算是 CodeWF Toolbox 自己反過來服務自己的一個例子。工具多了以後，多語言資源、模組選單、資源合併都需要被工具化；如果這些事情全靠手動維護，時間長了很容易出錯。

**註：**目前版本使用 Json 做為多語言檔案，XML 格式請見分支 i18n-xml。

主題與語言：沙漠主題確實更耐看

這次截圖我主要用了沙漠主題。整體觀感比純淺色更有辨識度，又不像深色主題那樣壓暗內容。

主題切換效果可以看這個 GIF：

目前主題列表包括：

• 跟隨系統。
• 淺色模式。
• 深色模式。
• 水生。
• 沙漠。
• 黃昏。
• 夜空。

語言資源包括：

• 簡體中文。
• 繁體中文。
• English。
• 日語。

這裡值得注意的是，主題和語言不是簡單地換幾個字串。桌面應用要長期可用，主題、控制項庫、字型、視窗尺寸、列表寬度、下拉式寬度都要一起看。比如這次主視窗就從偏大的啟動尺寸收到了更適合日常桌面的比例，同時首頁卡片也做了更緊湊的 4 列布局。

它是怎麼組織這麼多工具的

如果每個小工具都寫一個完整頁面，後期維護會很痛苦。CodeWF Toolbox 現在大致有兩種工具組織方式。

第一類是獨立頁面工具。

例如：

• 時間戳轉換。
• Base64 編解碼。
• GUID 產生器。
• 圖片轉 ICO。
• 日誌閱讀器。
• XML 翻譯資源管理。

這類工具有更具體的互動和狀態，所以單獨寫 View 和 ViewModel 更合適。

第二類是資料驅動工具。

例如：

• JSON 格式化。
• JWT 解析。
• Hash 文字。
• URL 編碼。
• MIME 查詢。
• MAC 位址查詢。
• QR Code 產生。
• 數學計算。
• 文字統計。

這些工具的輸入輸出模式更標準，可以用 ToolSpec 描述：

public class ToolSpec
{
    public string Id { get; set; }
    public string Category { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public List<ToolField> Fields { get; } = [];
    public List<ToolOutput> Outputs { get; } = [];
    public Func<ToolRunContext, CancellationToken, Task> RunAsync { get; set; }
    public bool AutoRun { get; set; }
}

這樣新增工具時，很多情況下只需要補：

• 工具 ID。
• 分類。
• 輸入欄位。
• 輸出欄位。
• 演算法函式。
• 多語言資源。
• 圖示。

UI 表單可以複用，工具邏輯也不會污染主視窗。這也是我希望 CodeWF Toolbox 能繼續擴展下去的基礎。

Prism 模組化讓功能持續增加

專案入口裡透過 Prism 註冊模組：

moduleCatalog.AddModule<MainModule>();
moduleCatalog.AddModule<ToolFrameworkModule>();
moduleCatalog.AddModule<ConverterModule>();
moduleCatalog.AddModule<DevelopmentModule>();
moduleCatalog.AddModule<SecurityModule>();
moduleCatalog.AddModule<WebModule>();
moduleCatalog.AddModule<MediaModule>();
moduleCatalog.AddModule<NetworkModule>();
moduleCatalog.AddModule<MathModule>();
moduleCatalog.AddModule<MeasurementModule>();
moduleCatalog.AddModule<TextModule>();
moduleCatalog.AddModule<DataModule>();
moduleCatalog.AddModule<LogViewerModule>();
moduleCatalog.AddModule<XmlTranslatorManagerModule>();

每個模組負責註冊自己的選單項和 View。主程式不需要知道每個工具頁面內部怎麼實現，它只負責：

• 應用啟動。
• 登入視窗。
• 主視窗。
• 主題和語言。
• 公共服務。
• Prism Region。
• 模組目錄。
• 系統托盤和退出行為。

這個邊界很重要。工具箱這種專案很容易越寫越散，最後主視窗裡全是功能細節。Prism 模組化至少給它提供了一個比較清晰的擴展方向，也讓我後面繼續加工具時不至於把主程式寫亂。

**問：**為什麼要在主工程強參考工具模組？

答：Windows AOT 發布後，託管的模組動態庫就不能正常動態載入了（依賴於.NET 執行時期），發布成非託管動態庫也不支援模組化動態載入（未研究過），非 AOT 發布，Win7 就無法相容執行。

適合學習的重點

如果你正在學 Avalonia，我覺得 CodeWF Toolbox 比單視窗 Demo 更值得看，因為它處理了很多真實桌面應用會遇到的問題：

• 主視窗和登入視窗。
• 系統托盤。
• 主題切換。
• 多語言資源。
• 模組化導航。
• ToolFramework 資料驅動工具。
• 檔案選擇。
• 剪貼簿複製。
• 大日誌檔案檢視。
• 使用者設定與使用記錄。
• Windows/Linux/macOS 平台差異預留。
• 發布設定。

這類工程點往往不是「能不能畫出按鈕」的問題，而是「工具多了以後還能不能維護」的問題。這個專案也是我自己在邊做邊整理這些工程問題。

目前還可以繼續打磨的地方

CodeWF Toolbox 已經有比較完整的方向，但我自己也很清楚，它仍有繼續打磨空間：

• 部分工具頁面的控制項樣式還可以繼續統一，例如輸入框邊框、按鈕層級、間距。
• 部分中文資源仍帶有機器翻譯痕跡，可以逐步潤色。
• 工具數量已經很多，後續可以給首頁推薦工具做更明確的分類策略。
• 搜尋結果可以進一步突出工具分類和最近使用情況。
• 日誌閱讀器可以加入範例檔案或拖放開啟入口。
• 建置仍有預覽 SDK 提示、過時 API 和 Avalonia XAML 可達性警告，後續可以逐步清理。

我這次已經把主視窗預設尺寸調小，並把首頁補成 8 個快捷入口，沙漠主題下整體更像一個日常可用的工具箱，而不是一個被拉得過大的桌面殼。

最後

CodeWF Toolbox 是我自己開發和維護的工具箱。它的價值不在於某一個單獨工具有多複雜，而在於把很多開發者高頻小工具組織成一個可擴展的桌面應用。

它現在已經涵蓋：

• 轉換工具。
• 開發工具。
• 安全工具。
• Web 工具。
• 媒體工具。
• 網路工具。
• 數學工具。
• 計量工具。
• 文字工具。
• 資料工具。
• 日誌閱讀器。
• 國際化 XML 資源管理。

用 C# 寫桌面工具並不過時。對檔案、本地剪貼簿、日誌、離線轉換、臨時產生、格式化和系統整合這些場景來說，本地桌面應用依然很有價值。

而 Avalonia + Prism 給這個方向提供了一條比較現代的路線：既能跨平台，又能用模組化方式維護大量功能。

後面站長還會繼續把 CodeWF Toolbox 往「真正日常可用」的方向打磨。比起只做一個示範視窗，我更想練的是這種能力：如何把不斷增加的小工具，組織成一個還能長期維護的產品。