https://dylanchiang-dev.github.io/tags/%E5%B7%A5%E7%A8%8B%E5%AF%A6%E4%BD%9C/工程實作Hugo Blox Builder (https://hugoblox.com)zh-TWSat, 03 Oct 2026 00:00:00 +0000https://dylanchiang-dev.github.io/media/icon_hu_982c5d63a71b2961.pnghttps://dylanchiang-dev.github.io/tags/%E5%B7%A5%E7%A8%8B%E5%AF%A6%E4%BD%9C/https://dylanchiang-dev.github.io/project/quotabase/Sat, 03 Oct 2026 00:00:00 +0000https://dylanchiang-dev.github.io/project/quotabase/<p>Quotabase-Lite 是面向中小企業報價工作的開源網頁系統。我將客戶、商品／服務、報價單、狀態及收據整理成連貫流程，使用原生前端、PHP 與 MySQL／MariaDB 保持架構精簡。</p> <h2 id="我做了哪些工作">我做了哪些工作</h2> <ul> <li><strong>業務資料與操作流程</strong>：整合客戶管理、產品／服務目錄、報價建立與狀態追蹤，讓資料可以在相關操作之間接續使用。</li> <li><strong>金額與交易處理</strong>：以整數分儲存金額，避免直接以浮點數表示金額；結合資料庫交易處理相關寫入。</li> <li><strong>前後端實作</strong>：以 PHP、少量 Composer 依賴及原生 HTML／CSS／JavaScript 實作，整理 Tab 導覽及深色模式。</li> <li><strong>輸入與存取防護</strong>：使用 PDO 預處理、CSRF 驗證及輸出轉義等基礎機制；本頁不將這些機制當成完整安全稽核的結論。</li> <li><strong>列印與收據</strong>：實作 A4 列印頁、個人收據及 QR／hash 核對入口，讓保存、列印及資料檢視接上業務流程。</li> <li><strong>匯出與部署</strong>：提供 CSV／JSON 匯出與安裝部署說明，保留零框架架構的易理解性及可維護範圍。</li> </ul> <h2 id="業務流程示意">業務流程示意</h2> <figure><img src="https://dylanchiang-dev.github.io/project/quotabase/workflow.png" alt="Quotabase-Lite 的客戶、商品、報價、狀態、列印與收據流程。"><figcaption> <p>依公開功能繪製的示意，不含客戶姓名、金額、交易編號或真實文件；不是產品介面截圖。</p> </figcaption> </figure> <h2 id="展示邊界">展示邊界</h2> <p>本頁展示業務建模、資料處理與產品實作，不沿用尚未重新核驗的效能數字，也不將收據核對功能延伸為法規符合性或法律效力的保證。</p> <p> </p>https://dylanchiang-dev.github.io/project/shellmate/Sat, 03 Oct 2026 00:00:00 +0000https://dylanchiang-dev.github.io/project/shellmate/<p>ShellMate 是我面向多主機維運情境開發的 Web SSH 工作台。它把主機設定、互動式終端與常用命令從分散的工具整理到同一個瀏覽器入口，是一套可部署的單機工程原型。</p> <h2 id="我做了哪些工作">我做了哪些工作</h2> <ul> <li><strong>即時終端整合</strong>：以 React、TypeScript 與 xterm.js 建立瀏覽器終端，透過 WebSocket 與 Node.js／ssh2 串接 SSH shell 的雙向輸入輸出。</li> <li><strong>多分頁與主機管理</strong>：實作主機設定新增、編輯、刪除、分組及終端分頁，處理不同連線的介面切換。</li> <li><strong>命令片段工作流</strong>：將常用指令整理為可分組、維護並送入目前終端的片段，減少重複輸入及切換筆記的負擔。</li> <li><strong>基本登入與資料保護</strong>：整合 JWT API 驗證、登入介面及密碼雜湊；主機密碼加密後儲存，而不是在展示頁公開連線資料。</li> <li><strong>後端模組與錯誤處理</strong>：拆分驗證、主機資料、命令、SSH session 與 WebSocket handler，將連線失敗轉成較易理解的錯誤訊息。</li> <li><strong>部署與儲存取捨</strong>：提供 Docker／Compose 單機部署，以 JSON 儲存保持原型簡單；不把這項選擇描述成已具備大規模多人或高併發能力。</li> </ul> <h2 id="連線與介面架構">連線與介面架構</h2> <figure><img src="https://dylanchiang-dev.github.io/project/shellmate/architecture.png" alt="ShellMate 的主機管理、終端、WebSocket 後端與 SSH 連線架構。"><figcaption> <p>依公開功能繪製的原型架構圖，不含真實主機、帳號、IP 位址或憑證，也不代表已公開 SSH 服務。</p> </figcaption> </figure> <h2 id="工程定位">工程定位</h2> <p>本專案展示介面、即時通訊、後端與部署的整合。既有基本安全機制不等於企業級安全認證或獨立稽核；更細的權限、多使用者資料管理與規模化部署仍屬後續擴充方向。</p> <p> </p>