教學

OpenCode 生態系完整教學手冊 版本：基於 OpenCode v1.14.50（2026 年 5 月） 適用對象：資深工程師、架構師、DevOps 工程師、技術主管 文件等級：企業標準技術白皮書 維護單位：軟體架構組 最後更新：2026-05-14 涵蓋範圍：OpenCode 核心、Oh My OpenAgent（OmO）外掛、OpenWork 桌面協作平台 文件修訂紀錄 版本 日期 修訂者 修訂說明 1.0 2026-03-04 軟體架構組 初版建立 2.0 2026-03-08 軟體架構組 全面更新至 v1.2.21；新增 OmO、OpenWork 章節；擴充至企業白皮書等級 3.0 2026-03-25 軟體架構組 更新至 v1.3.2；OmO v3.13.1 新增 Multimodal Looker / Metis 代理與 Agent Orchestration；OpenWork v0.11.191 新增 Dev Mode、Templates、Cloud Worker 3.0 2026-03-25 軟體架構組 全面更新至 OpenCode v1.3.2、OmO v3.13.1、OpenWork v0.11.191；新增 Multimodal Looker、Metis、Agent Orchestration 分類路由、雲端 Worker 架構等新功能 4.0 2026-04-12 軟體架構組 全面更新至 OpenCode v1.4.3、OmO v3.17.0、OpenWork v0.11.206；OpenCode 新增 OpenCode Go 訂閱、40+ 提供商支援、Docker 安裝、Ollama Cloud；OmO 更名 oh-my-openagent、OpenCode v1.4.0 最低版本檢查、Doctor 診斷命令、Session Recovery、File Prompts；OpenWork 授權變更為 FSL-1.1-MIT、Ollama 支援、React Session Composer、i18n 五語系 5.0 2026-04-16 軟體架構組 更新至 OpenCode v1.4.6（762 releases、oxlint 整合、provider auth API）、OmO v3.17.3（164 releases、replace_plan 支援、CLA 與 Telemetry 機制）、OpenWork v0.11.207（1,057 releases、Catalan 語系、microsandbox 沙箱流程、Roadmap 分頁、Node 24 CI 準備）；新增 multiedit 工具、Sisyphus Labs 等待名單、提供商新增 40+ 項 6.0 2026-04-30 軟體架構組 全面更新至 OpenCode v1.14.30（781 releases、152k Stars、875 貢獻者、question 工具、agent create CLI、Desktop App BETA 正式化）、OmO v3.17.10（168 releases、55.1k Stars、199 貢獻者、GPT-5.5 native prompt drafts、npm OIDC CI 改進）、OpenWork v0.13.0（1,087 releases、14.5k Stars、Tauri→Electron 遷移、Cloud MCP OAuth Server、Welcome/Onboarding 畫面、microsandbox 功能旗標、pnpm workspace 重構）；新增 ACP 支援文件、SDK 文件、Server 文件、外掛文件、生態系統文件 7.0 2026-05-14 軟體架構組 全面更新至 OpenCode v1.14.50（800 releases、160k Stars、896 貢獻者、Scout SubAgent 新增、native LLM core foundation、TUI notifications、Electron Desktop CI 改進）、OmO v4.1.2（177 releases、57.7k Stars、219 貢獻者、Team Mode v4.0 多代理並行、hyperplan/security-research 技能、Kimi K2.6/GPT-5.5/GLM-5.1 模型支援、configurable agent ordering、CDP browser tools）、OpenWork v0.13.8（1,202 releases、15.2k Stars、61 貢獻者、shadcn/ui skills、Electron browser automation、Daytona/devcontainer、native main menu、10 語系支援、AI Providers 重構） 目錄 第一章：OpenCode 生態系總覽 1.1 OpenCode 核心理念 1.2 生態系全景圖 1.3 與傳統 AI Coding Tool 差異 1.4 與 GitHub Copilot / Claude Code 等工具比較 1.5 適用場景分析 1.6 真實案例研究 1.7 版本演進與藍圖 第二章：系統架構設計 2.1 總體架構 2.2 Client/Server 架構 2.3 代理系統（Agent System） 2.3.1 主要代理（Primary Agents） 2.3.2 子代理（SubAgents） 2.3.3 隱藏系統代理 2.3.4 自訂代理 2.3.5 代理進階選項 2.3.6 Plan / Build 運作流程 2.4 工具系統（Tools） 2.5 MCP 伺服器整合架構 2.6 外掛系統（Plugins） 2.7 技能系統（Skills） 2.8 與前端框架整合方式 2.9 與後端框架整合方式 2.10 與 Git / CI/CD 整合架構 2.11 與本地模型 / 雲端模型整合架構 第三章：安裝與環境建置 3.1 系統需求 3.2 Windows 安裝步驟 3.3 macOS 安裝步驟 3.4 Linux 安裝步驟 3.5 Desktop App 安裝 3.6 終端機模式設定 3.7 IDE 擴充設定 3.8 模型設定（雲端 API / 本地模型） 3.9 環境變數與 Proxy 設定 3.10 企業網路限制處理方式 第四章：專案導入標準流程（SOP） 4.1 新專案導入流程 4.2 舊專案導入流程 4.3 Branch 管理策略 4.4 PR 與 Code Review 搭配方式 4.5 團隊協作模式 4.6 安全開發流程（SSDLC 整合方式） 第五章：實戰操作教學 5.1 使用 Plan 模式設計系統架構 5.2 使用 Build 模式產生程式碼 5.3 自動產生測試 5.4 重構（Refactor） 5.5 Debug 5.6 批次修改專案 5.7 生成文件（README / API 文件） 5.8 使用 Explore / Scout SubAgent 探索程式碼庫與外部文件 5.9 使用自訂指令加速工作流程 5.10 網路搜尋與網頁擷取 5.11 LSP 整合操作 5.12 實戰範例：完整的 CRUD API 開發流程 第六章：最佳實踐（Best Practices） 6.1 Prompt 撰寫策略 6.2 Token 控制策略 6.3 避免幻覺（Hallucination） 6.4 如何做 Code Validation 6.5 與 SonarQube / 測試工具整合 6.6 大型專案使用策略 6.7 多模組專案管理建議 6.8 格式化器整合 6.9 多語言專案管理策略 6.10 程式碼審查最佳實踐 6.11 TDD/BDD 與 OpenCode 整合 6.12 安全編碼規範指南 6.13 效能優化策略 第七章：系統維護與治理 7.1 模型版本管理策略 7.2 OpenCode 版本管理 7.3 日誌管理 7.4 成本控制 7.5 權限管理 7.5.1 完整權限列表 7.5.2 細粒度權限控制 7.5.3 「ask」選項的三個選擇 7.5.4 代理專屬權限 7.6 技能系統（Skills） 7.6.1 SKILL.md 檔案格式 7.6.2 技能發現路徑 7.6.3 技能權限控制 7.7 自訂工具（Custom Tools） 7.7.1 工具定義 7.7.2 多工具匯出 7.7.3 覆蓋內建工具 7.8 規則系統（Rules） 7.9 風險控管 第八章：系統升級策略 8.1 升級前檢查清單 8.2 版本相容性測試 8.3 回滾策略 8.4 CI/CD 驗證流程 第九章：企業導入建議 9.1 導入階段規劃 9.2 教育訓練策略 9.3 試點專案規劃 9.4 成本效益分析 9.5 KPI 設計 9.6 企業版功能 9.7 企業級安全治理架構 9.8 企業導入常見挑戰與解決方案 9.9 多團隊統一管理方案 9.10 成本分析與 ROI 模型 第十章：Oh My OpenAgent（OmO）生態系 10.1 OmO 總覽與定位 10.2 核心概念：Discipline Agents 10.3 ultrawork / ulw 一鍵啟動 10.4 IntentGate 意圖閘道 10.5 Hash-Anchored Edit Tool 10.6 /init-deep 深度初始化 10.7 Prometheus 規劃器 10.8 背景代理（Background Agents） 10.9 Skill-Embedded MCPs 10.10 Ralph Loop 自我迴圈 10.11 Todo Enforcer 與 Comment Checker 10.12 內建 MCP 伺服器 10.13 LSP 與 AST-Grep 整合 10.14 Tmux 整合 10.15 Claude Code 完整相容性 10.16 Agent Orchestration 模型路由 10.17 安裝與設定 10.18 設定檔詳解 10.19 企業導入 OmO 建議 10.20 OmO 實戰教學：微服務拆分 10.21 OmO 與 OpenCode 功能對照表 10.22 OmO 效能調優指南 10.23 Multimodal Looker 代理（v3.12+ 新增） 10.24 Metis 代理——規劃顧問（v3.12+ 新增） 10.25 GPT-5.4 xhigh 路由與 ultrabrain 模式（v3.13+ 新增） 10.26 Session Tools——歷程分析（v3.13+ 新增） 10.27 Think Mode（v3.13+ 新增） 10.28 OmO v3.13 其他更新 10.29 OmO v3.14-v3.17.10 更新摘要 10.30 OmO v4.0-v4.1.2 更新摘要（Team Mode 重大版本） 第十一章：OpenWork 桌面應用與協作平台 11.1 OpenWork 總覽與定位 11.2 核心理念 11.3 功能架構 11.4 Host 模式與 Client 模式 11.5 技能管理器（Skill Manager） 11.6 OpenWork Orchestrator CLI 11.7 OpenCode Router（WhatsApp / Slack / Telegram） 11.8 OpenPackage 套件管理 11.9 安裝與設定 11.10 架構詳解 11.11 安全性設計 11.12 Dev Mode 隔離（v0.11.160+ 新增） 11.13 Templates 儲存與重播（v0.11.170+ 新增） 11.14 Execution Plan Timeline（v0.11.180+ 新增） 11.15 Cloud Worker 架構（v0.11.185+ 新增） 11.16 Workspace Switch 與 Starter Sessions（v0.11.190+ 新增） 11.17 OpenCode Plugins 管理（Skills Tab） 11.18 OpenWork v0.11.192-v0.13.0 更新摘要 11.19 企業導入 OpenWork 建議 第十二章：生態系整合與進階工作流程 12.1 OpenCode + OmO + OpenWork 三層整合 12.2 多代理協作工作流程 12.3 企業級 AI 開發平台架構 12.4 跨團隊協作模式 12.5 從 Claude Code 遷移指南 12.6 GitHub / GitLab 深度整合 12.7 ACP（Agent Communication Protocol）支援 12.8 CI/CD 管線深度整合 12.9 多倉庫聯合開發模式 12.10 資料庫遷移自動化 12.11 監控與可觀察性整合 12.12 基礎架構即程式碼（IaC）整合 12.13 企業級日誌與稽核系統 12.14 企業災難復原與高可用方案 第十三章：常見問題與故障排除 13.1 安裝問題 13.2 API 連線失敗 13.3 模型回應不穩 13.4 權限問題 13.5 IDE 無法連線 13.6 效能問題 13.7 OmO 特定問題 13.8 OpenWork 特定問題 附錄 A：快速上手檢查清單（Checklist） 附錄 B：常見 OpenCode 指令速查表 附錄 C：OmO 指令速查表 附錄 D：設定檔完整範例 附錄 E：MCP 伺服器推薦清單 附錄 F：模型推薦與比較 附錄 G：重要參考資源 附錄 H：術語表 第一章：OpenCode 生態系總覽 1.1 OpenCode 核心理念 OpenCode 是一個 100% 開源 的 AI 編碼代理（AI Coding Agent），由 Anomaly 團隊開發維護。截至 2026 年 5 月，OpenCode 已達到以下里程碑： ...

JavaScript 程式語言教學手冊 文件資訊 版本: 2.0 更新日期: 2026年2月20日 適用對象: 新進前端開發同仁 專案架構: 前後端分離 (Vue 3.x / React / Angular) 涵蓋標準: 至 ECMAScript 2025（ES16） 目錄 JavaScript 基本概念 1.1 語言特性 1.2 基礎資料型別與運算子 1.3 變數與作用域 1.4 函式與閉包 1.5 物件與原型鏈 1.6 ES6+ 常用語法 1.7 實務注意事項 1.8 ES2023-ES2025 新特性 1.8.1 ES2023 新特性 1.8.2 ES2024 新特性 1.8.3 ES2025 新特性 1.8.4 ES2025 瀏覽器支援狀態 程式開發規範 2.1 程式碼風格指南 2.2 ESLint 和 Prettier 設定 2.3 專案中常用的 Utility Functions 專案中常見應用範例 3.1 DOM 操作與事件處理 3.2 非同步處理 3.3 與後端 API 溝通 3.4 錯誤處理與例外狀況處理 3.5 Web APIs 應用 3.6 專案最佳實務 3.7 測試與除錯 現代開發工具與 TypeScript 4.1 TypeScript 基礎 4.2 建置工具 學習資源與進階閱讀 ...

TypeScript 程式語言教學手冊 適用對象：新進前端開發同仁 目標：快速掌握 TypeScript 在專案中的使用方法與最佳實踐 更新日期：2026年2月20日 📋 目錄 TypeScript 基礎 1.1 TypeScript 與 JavaScript 的差異 1.2 型別系統 1.3 介面與型別別名 專案規範 2.1 TypeScript 版本與設定 2.2 檔案命名規則與專案目錄結構 2.3 型別宣告的最佳實踐 2.4 使用 any 的限制與替代方法 程式開發指引 3.1 撰寫可讀性與可維護性的程式碼 3.2 常見錯誤與最佳解法 3.3 與第三方套件整合 範例程式碼 4.1 Class 類別實作範例 4.2 Interface 介面範例 4.3 泛型實作範例 4.4 模組化範例 實務建議 5.1 善用 TypeScript 的型別檢查 5.2 除錯與測試 5.3 團隊協作與程式風格統一 檢查清單 6.1 專案建立檢查清單 6.2 開發期間檢查清單 6.3 程式碼審查檢查清單 6.4 部署前檢查清單 6.5 常見問題快速檢查 進階主題 7.1 條件型別 (Conditional Types) 7.2 映射型別 (Mapped Types) 7.3 模板字面型別 (Template Literal Types) 7.4 裝飾器 (Decorators) 效能優化與最佳實踐 8.1 編譯效能優化 8.2 型別檢查效能 8.3 打包優化 8.4 記憶體使用優化 TypeScript 生態系統 9.1 開發工具 9.2 建置工具 9.3 測試框架 9.4 型別定義管理 常見問題與解決方案 10.1 編譯錯誤 10.2 型別推斷問題 10.3 執行時期問題 10.4 最佳實踐檢查清單 TypeScript 6.0 與 7.0 新特性與遷移 11.1 TypeScript 6.0 新特性 11.2 TypeScript 6.0 重大變更與棄用 11.3 TypeScript 7.0 原生編譯器 (Go 版本) 11.4 從 5.x 遷移至 6.0/7.0 指南 1. TypeScript 基礎 1.1 TypeScript 與 JavaScript 的差異 什麼是 TypeScript？ TypeScript 是 Microsoft 開發的 JavaScript 超集（superset），為 JavaScript 添加了靜態型別檢查功能。 ...

TypeScript 程式語言教學手冊 適用對象：新進前端開發同仁 目標：快速掌握 TypeScript 在專案中的使用方法與最佳實踐 更新日期：2026年2月20日 📋 目錄 TypeScript 基礎 1.1 TypeScript 與 JavaScript 的差異 1.2 型別系統 1.3 介面與型別別名 專案規範 2.1 TypeScript 版本與設定 2.2 檔案命名規則與專案目錄結構 2.3 型別宣告的最佳實踐 2.4 使用 any 的限制與替代方法 程式開發指引 3.1 撰寫可讀性與可維護性的程式碼 3.2 常見錯誤與最佳解法 3.3 與第三方套件整合 範例程式碼 4.1 Class 類別實作範例 4.2 Interface 介面範例 4.3 泛型實作範例 4.4 模組化範例 實務建議 5.1 善用 TypeScript 的型別檢查 5.2 除錯與測試 5.3 團隊協作與程式風格統一 檢查清單 6.1 專案建立檢查清單 6.2 開發期間檢查清單 6.3 程式碼審查檢查清單 6.4 部署前檢查清單 6.5 常見問題快速檢查 進階主題 7.1 條件型別 (Conditional Types) 7.2 映射型別 (Mapped Types) 7.3 模板字面型別 (Template Literal Types) 7.4 裝飾器 (Decorators) 效能優化與最佳實踐 8.1 編譯效能優化 8.2 型別檢查效能 8.3 打包優化 8.4 記憶體使用優化 TypeScript 生態系統 9.1 開發工具 9.2 建置工具 9.3 測試框架 9.4 型別定義管理 常見問題與解決方案 10.1 編譯錯誤 10.2 型別推斷問題 10.3 執行時期問題 10.4 最佳實踐檢查清單 TypeScript 6.0 與 7.0 新特性與遷移 11.1 TypeScript 6.0 新特性 11.2 TypeScript 6.0 重大變更與棄用 11.3 TypeScript 7.0 原生編譯器 (Go 版本) 11.4 從 5.x 遷移至 6.0/7.0 指南 1. TypeScript 基礎 1.1 TypeScript 與 JavaScript 的差異 什麼是 TypeScript？ TypeScript 是 Microsoft 開發的 JavaScript 超集（superset），為 JavaScript 添加了靜態型別檢查功能。 ...

Chrome DevTools MCP（Model Context Protocol）教學手冊 版本：v2.0 最後更新：2026-02-14 適用對象：前端工程師、全端工程師、AI 工具整合工程師、DevOps 工程師、架構師 適用環境：Windows / macOS / Linux Chrome DevTools MCP 版本：v0.17.0+（套件名稱：chrome-devtools-mcp） 官方 GitHub：https://github.com/ChromeDevTools/chrome-devtools-mcp npm 套件：https://www.npmjs.com/package/chrome-devtools-mcp 目錄 第一章：總覽與架構設計 1.1 MCP 是什麼？ 1.2 Chrome DevTools MCP 架構說明 1.3 系統元件圖 1.4 互動流程圖 1.5 適用場景說明 1.6 與傳統 AI 靜態分析比較 第二章：系統架構設計 2.1 單機開發架構 2.2 團隊共享架構 2.3 CI/CD 整合架構 2.4 雲端整合架構 2.5 安全隔離建議 2.6 權限控制建議 2.7 沙箱執行模式建議 第三章：安裝與環境建置 3.1 系統需求 3.2 Chrome 版本需求 3.3 Node.js 版本需求 3.4 安裝步驟 3.5 啟動參數完整說明 3.6 連接模式說明 3.7 User Data Directory 說明 3.8 Docker 安裝方式 3.9 工具類別控制 3.10 常見錯誤排除 第四章：設定與整合 ...

Chrome DevTools 教學手冊 版本：Chrome 131+（2026 年最新版） 適用對象：前端工程師、後端工程師、架構師、DevOps 工程師 定位：企業級實戰與維運教學手冊 最後更新：2026-02-14 目錄 第一章：Chrome DevTools 架構與核心原理 第二章：安裝與環境設定 2.8 Device Mode（裝置模擬模式） 2.9 Command Menu（命令選單） 第三章：Elements 面板完整教學 第四章：Console 深入教學 第五章：Sources 面板（JS 除錯核心） 第六章：Network 面板（API 與效能分析） 第七章：Performance 面板（效能優化核心） 7.8 Rendering 面板 7.9 Performance 進階功能 第八章：Memory 面板 第九章：Application 面板 第十章：Security 面板 第十一章：Recorder 面板、AI 輔助與其他進階功能 11.1 Recorder 面板（使用者流程錄製） 11.2 AI 輔助功能（Gemini 整合） 11.3 其他實用面板 11.4 遠端除錯 第十二章：企業級 Web Application Debug 標準流程 第十三章：最佳實踐與團隊規範 附錄 A：常見問題 FAQ 附錄 B：面試常考 DevTools 問題 附錄 C：團隊培訓建議 附錄 D：延伸學習資源 附錄 E：檢查清單（Checklist） 第一章：Chrome DevTools 架構與核心原理 1.1 DevTools 整體架構說明 Chrome DevTools 是內建於 Chromium 核心的開發者除錯工具組，透過 Chrome DevTools Protocol（CDP） 與瀏覽器核心通訊。 ...

GitHub Copilot CLI 教學手冊 版本：v3.0（2026 年 2 月） 適用對象：資深工程師、DevOps 工程師、技術主管 適用平台：Windows / macOS / Linux 前置條件：具備 Git、Terminal 基礎操作能力；擁有 GitHub Copilot 授權 狀態：GitHub Copilot CLI 目前為 Public Preview（含資料保護），功能可能變更 目錄 1. GitHub Copilot CLI 架構說明 1.1 Copilot CLI 架構概念 1.2 與 GitHub Copilot IDE 版本的差異 1.3 三種使用模式 1.4 認證流程 1.5 CLI 與 GitHub 雲端服務關係 1.6 CLI 在企業環境中的位置 2. 安裝與環境建置 2.1 系統需求 2.2 Windows 安裝方式 2.3 macOS 安裝方式 2.4 Linux 安裝方式 2.5 使用 npm 安裝（跨平台） 2.6 驗證安裝成功 2.7 代理伺服器（Proxy）環境設定 2.8 防火牆與網路限制處理 3. 基本設定與認證 3.1 首次登入流程 3.2 使用 Personal Access Token 認證 3.3 企業 GitHub 組織授權 3.4 CLI 設定檔說明 3.5 信任目錄管理 3.6 安全設定建議 4. 開發應用方式 4.1 互動模式基本操作 4.2 計畫模式（Plan Mode） 4.3 程式化模式（Programmatic Mode） 4.4 檔案引用與上下文控制 4.5 程式碼產生與重構 4.6 測試程式產生 4.7 Dockerfile 與 CI/CD 產生 4.8 Git 操作與 PR 管理 4.9 工具權限管理 4.10 團隊開發最佳實踐 5. 自訂與擴充功能 5.1 自訂指令（Custom Instructions） 5.2 自訂代理（Custom Agents） 5.3 技能（Skills） 5.4 Hooks 5.5 AI 模型選擇 5.6 Copilot Memory 6. 與 MCP（Model Context Protocol）串接方式 6.1 MCP 架構概念 6.2 內建 GitHub MCP Server 6.3 新增 MCP Server 6.4 自訂 MCP Server 開發 6.5 與企業內部 API 整合 6.6 MCP 安全與權限控管 7. DevOps 整合模式 7.1 與 GitHub Actions 整合 7.2 與 CI/CD Pipeline 整合 7.3 容器化開發流程 7.4 AI 輔助 Code Review 7.5 委派工作至 Copilot Coding Agent 7.6 Commit Message 與 PR 最佳實務 8. 系統維護與治理 8.1 CLI 版本管理策略 8.2 企業升版流程 8.3 AI 使用紀錄稽核建議 8.4 使用權限控管 8.5 Session 管理 8.6 效能監控與成本控管 9. 企業導入最佳實踐 9.1 開發團隊使用規範 9.2 AI 輔助開發風險 9.3 原始碼洩漏風險管理 9.4 Prompt 設計標準化 9.5 AI 產出程式碼審核流程 9.6 內部教育訓練建議 10. 風險與限制說明 10.1 Copilot CLI 功能限制 10.2 Premium Request 配額 10.3 安全性考量 10.4 網路依賴風險 10.5 法規與合規性建議 附錄 A：新進成員檢查清單 附錄 B：常用指令速查表 附錄 C：故障排除指南 附錄 D：ACP（Agent Client Protocol） 附錄 E：參考資源 1. GitHub Copilot CLI 架構說明 1.1 Copilot CLI 架構概念 GitHub Copilot CLI 是一個獨立的命令列 AI 程式，讓開發者直接在終端機中與 Copilot 互動。它具備代理（Agent）能力，可以讀取、修改、執行檔案，並與 GitHub.com 互動。 ...

Tailwind CSS 教學手冊（企業級 Web Application 版本） 版本：Tailwind CSS v4.x（2025 最新穩定版） 適用對象：具備前端基礎的開發工程師、架構師 最後更新：2025-07-14 目錄 1. 為什麼選擇 Tailwind CSS 1.1 Utility-First 理念 1.2 與傳統 CSS / SCSS 比較 1.3 與 Bootstrap 比較 1.4 優缺點分析 1.5 適合的專案類型 2. 安裝與專案初始化 2.1 使用 Vite + Vue 3 安裝流程 2.2 使用 Vite + Angular 19 安裝流程 2.3 Tailwind CSS v4 設定方式 2.4 Content 掃描最佳實踐 2.5 專案目錄結構建議 3. Tailwind 核心概念 3.1 Utility Classes 3.2 Responsive Design 3.3 State Variants 3.4 Breakpoints 3.5 Dark Mode 3.6 Arbitrary Values 3.7 Tailwind CSS v4 引擎原理 3.8 Container Queries（容器查詢） 4. 設計系統（Design System）整合 4.1 建立自訂 Theme 4.2 Colors 設計策略 4.3 Spacing 規範 4.4 Typography 設計 4.5 設計 Token 管理 4.6 企業品牌色整合 5. 元件開發最佳實踐 5.1 Button 設計範例 5.2 Card 設計範例 5.3 Form 設計範例 5.4 Layout 設計範例 5.5 可維護性設計 5.6 如何避免 Class 爆炸 6. 大型專案架構設計建議 6.1 與微前端整合方式 6.2 Tailwind 與組件庫策略 6.3 可擴充性設計 6.4 團隊協作規範 6.5 命名規範建議 7. 效能優化 7.1 Tailwind v4 自動 Tree-Shaking 7.2 CSS 體積優化 7.3 CDN vs 本地建置比較 7.4 Production Build 注意事項 7.5 效能監控與量測 8. 與 Vue 3 + TypeScript 整合實戰 8.1 動態 Class 綁定 8.2 Computed Class 管理 8.3 條件式樣式設計 8.4 組件抽象化技巧 8.5 Transition 與 Animation 實戰 8.6 表單驗證樣式整合 9. 常見錯誤與踩雷整理 9.1 Class 過多問題 9.2 重複樣式問題 9.3 無法維護的問題 9.4 與第三方 UI Library 衝突 9.5 Dark Mode 設計錯誤 10. 企業級最佳實踐總結 10.1 開發規範 10.2 Code Review 建議 10.3 專案模板設計建議 10.4 可長期維護策略 附錄 A：Tailwind CSS 企業開發檢查清單（Checklist） 1. 為什麼選擇 Tailwind CSS 1.1 Utility-First 理念 什麼是 Utility-First？ Utility-First 是一種 CSS 設計方法論，核心理念是 「用原子化的 CSS 類別直接在 HTML 中組合樣式，而非撰寫自訂 CSS」。 ...

RWD（Responsive Web Design）企業級教學手冊 版本：v1.0（2026 年 2 月） 適用對象：資深前端工程師、全端工程師、UI/UX 設計師、技術主管 技術標準：HTML5 · CSS3（2024+）· JavaScript ES2025 · Vue 3.5+ · React 19+ · Angular 19+ · Tailwind CSS 4.x · Bootstrap 5.3+ 目錄 第 1 章 RWD 核心概念 1.1 為什麼需要 RWD？ 1.2 RWD vs Adaptive Design 差異 1.3 Mobile First 設計哲學 1.4 UX 與效能考量 1.5 SEO 對 RWD 的影響 第 2 章 RWD 技術基礎 2.1 Viewport 設定 2.2 Flexible Layout 2.3 CSS Media Queries 2.4 Flexbox 詳解 2.5 CSS Grid 詳解 第 3 章 現代 RWD 架構設計（企業級） 3.1 Layout 分層設計 3.2 Header / Sidebar / Content 響應式設計 3.3 Dashboard 響應式實務 3.4 表單 RWD 設計策略 3.5 表格（Data Table）在手機的處理方式 3.6 Modal / Drawer 在不同裝置設計 第 4 章 與現代框架整合 4.1 Vue 3 + RWD 4.2 Tailwind CSS 響應式設計 4.3 Bootstrap 5 Grid System 4.4 React 19 + RWD 整合 4.5 CSS 新特性整合（2025+） 4.6 Angular 19 + RWD 整合 第 5 章 圖片與媒體最佳化 5.1 Responsive Image（srcset / sizes） 5.2 Picture 元素 5.3 WebP / AVIF 現代圖片格式 5.4 Lazy Loading 5.5 效能優化策略總整理 5.6 響應式影片與嵌入媒體 第 6 章 RWD 效能優化 6.1 減少重排（Reflow） 6.2 減少重繪（Repaint） 6.3 Critical CSS 6.4 避免不必要的 Media Query 6.5 Lighthouse 指標優化 第 7 章 常見錯誤與反模式 7.1 固定寬度設計 7.2 使用 px 當作主要單位 7.3 忽略觸控可點擊範圍 7.4 忽略觸控裝置特性 7.5 表格未優化 7.6 字體過小 7.7 反模式總結 第 8 章 企業級 RWD 開發標準規範 8.1 Breakpoint 標準 8.2 命名規範 8.3 Layout 架構規範 8.4 元件設計原則 8.5 Code Review 檢查清單 8.6 UI/UX 檢核表 第 9 章 測試與驗證 9.1 Chrome DevTools 模擬 9.2 真機測試 9.3 自動化測試建議 9.4 視覺回歸測試（Visual Regression） 第 10 章 範例專案（完整實戰範例） 10.1 完整 Dashboard Layout 範例 10.2 關鍵響應式行為說明 10.3 範例操作說明 附錄 A 企業級 RWD 開發檢查清單（Checklist） A.1 專案設定 A.2 佈局（Layout） A.3 文字與字體 A.4 互動與觸控 A.5 圖片與媒體 A.6 表格 A.7 效能 A.8 無障礙（A11y） A.9 跨瀏覽器 A.10 測試 第 1 章 RWD 核心概念 1.1 為什麼需要 RWD？ 背景 在 2026 年的今天，全球行動裝置（手機 + 平板）流量佔比已超過 65%，企業面對的使用者橫跨多種裝置： ...

Node.js 生態系教學手冊 版本：2026.06 適用對象：具備基礎程式能力，準備參與 Web Application 或 Backend API 專案開發的工程師 定位：實務導向、架構導向、企業導向的內部技術文件 Node.js 版本基準：v26.1.0 LTS 最後更新：2026 年 6 月 目錄 第 1 章：Node.js 簡介 1.1 Node.js 是什麼 1.2 Runtime 架構與 V8 Engine 1.3 Event Loop 運作機制 1.4 Non-blocking I/O 模型 1.5 Node.js 適用場景與不適用場景 1.6 Node.js LTS 與 Current 版本策略 第 2 章：Node.js 生態系 2.1 npm 2.2 yarn 2.3 pnpm 2.4 npx 與 corepack 2.5 package.json 完整解析 2.6 package-lock.json 與依賴鎖定 2.7 Semantic Versioning（語意化版本） 第 3 章：Node.js 安裝與環境建立 3.1 Windows 環境安裝 3.2 Linux 環境安裝 3.3 macOS 環境安裝 3.4 nvm — Node Version Manager 3.5 fnm — Fast Node Manager 3.6 Volta — 可靠的 JavaScript 工具管理器 3.7 企業環境設定與內部 Registry 第 4 章：TypeScript 開發平台 4.1 為什麼企業專案必須使用 TypeScript 4.2 tsconfig.json 設計原則 4.3 ESM 與 CommonJS 互操作性 4.4 ts-node 與 tsx 開發工具 4.5 SWC 與 esbuild 高速編譯器 4.6 Node.js v26 原生 TypeScript 支援 4.7 型別設計與 Domain Model 最佳實務 第 5 章：Node.js 核心 API 5.1 fs（檔案系統） 5.2 path（路徑處理） 5.3 os（作業系統資訊） 5.4 process（程序管理） 5.5 buffer（二進位資料處理） 5.6 stream（串流處理） 5.7 crypto（加密與雜湊） 5.8 http / https（HTTP 伺服器與客戶端） 5.9 events（事件發射器） 5.10 timers（計時器） 5.11 worker_threads（工作執行緒） 5.12 cluster（叢集） 5.13 child_process（子程序） 5.14 diagnostics_channel（診斷通道） 5.15 新興 API：SQLite、FFI、Permissions 第 6 章：非同步程式設計 6.1 Callback 模式 6.2 Promise 與 Promise 組合器 6.3 async / await 最佳實務 6.4 Event Loop 深入解析 6.5 Microtask Queue 與 Macrotask Queue 6.6 並行控制與流量管控 第 7 章：Express 教學 7.1 建立 REST API 7.2 Middleware 機制 7.3 Routing 設計 7.4 Error Handling 7.5 JWT 身分驗證 7.6 Request Validation 7.7 File Upload 7.8 Express 效能最佳化 7.9 Express 安全強化 7.10 Express 與 Graceful Shutdown 第 8 章：Fastify 教學 8.1 高效能 API 建構 8.2 Plugin 架構 8.3 Schema Validation 與序列化 8.4 效能比較與調校 8.5 TypeBox Schema 驗證 8.6 Fastify Hooks 生命週期 8.7 Fastify 封裝性與裝飾器 8.8 Fastify Rate Limiting 與安全 8.9 Fastify 錯誤處理 第 9 章：NestJS 教學 9.1 Module 模組設計 9.2 Controller 控制器 9.3 Provider 與 Service 9.4 Dependency Injection 依賴注入 9.5 Guard 守衛 9.6 Interceptor 攔截器 9.7 Pipe 管道 9.8 CQRS 模式 9.9 NestJS 微服務模式 9.10 NestJS 排程任務 第 10 章：API 設計最佳實務 10.1 RESTful API 設計原則 10.2 OpenAPI / Swagger 文件化 10.3 API Versioning 策略 10.4 統一錯誤碼設計 10.5 Idempotency 冪等性設計 10.6 Pagination 分頁設計 10.7 GraphQL 簡介與對比 10.8 WebSocket 即時通訊 API 10.9 API 錯誤碼體系設計 10.10 API 限流與配額設計 第 11 章：資料庫整合 11.1 PostgreSQL 整合 11.2 MySQL 整合 11.3 MongoDB 整合 11.4 Redis 快取整合 11.5 Prisma ORM 11.6 TypeORM 11.7 Transaction、Migration 與連線池 11.8 Prisma 進階查詢模式 11.9 Redis 進階模式 第 12 章：測試 12.1 Node.js 內建 Test Runner（node:test） 12.2 Jest 測試框架 12.3 Vitest 測試框架 12.4 Supertest 整合測試 12.5 Playwright E2E 測試 12.6 Test Pyramid 與測試策略 12.7 Mock / Stub / Spy 使用時機 12.8 Coverage 工具（c8 / istanbul） 12.9 Contract Testing（契約測試） 12.10 測試資料管理 12.11 Snapshot Testing 第 13 章：專案架構設計 13.1 Clean Architecture 應用 13.2 Hexagonal Architecture 應用 13.3 Domain-Driven Design（DDD）實作 13.4 Monorepo 策略（Turborepo / Nx / pnpm workspace） 13.5 微服務架構設計 13.6 Error Handling 架構 13.7 Configuration Management 第 14 章：前端整合 14.1 Vue 整合模式 14.2 React 整合模式 14.3 Next.js 全端框架 14.4 Nuxt.js 全端框架 14.5 Server-Side Rendering（SSR）架構 14.6 BFF（Backend for Frontend）設計模式 14.7 Server-Sent Events（SSE）即時推送 14.8 Micro-Frontend 整合模式 14.9 API 狀態管理（TanStack Query） 第 15 章：Docker 化 15.1 Node.js Dockerfile 撰寫 15.2 Multi-stage Build 15.3 Docker Compose 開發環境 15.4 容器安全最佳實務 15.5 Docker Compose 完整開發環境 15.6 生產環境 Docker 最佳實務 第 16 章：Kubernetes 部署 16.1 Deployment 設定 16.2 Service 與 Ingress 16.3 ConfigMap 與 Secret 16.4 HPA 自動擴縮 16.5 Health Check 與 Readiness Probe 16.6 Helm Chart 管理 16.7 Namespace 與資源隔離策略 第 17 章：CI/CD 17.1 GitHub Actions 完整範例 17.2 GitLab CI 配置 17.3 Jenkins Pipeline 17.4 Build → Test → Security Scan → Docker Build → Deploy 流程 17.5 Semantic Versioning 自動化 17.6 Commit 規範與自動化 第 18 章：Logging 與 Monitoring 18.1 Winston 日誌框架 18.2 Pino 高效能日誌 18.3 OpenTelemetry 可觀測性 18.4 Prometheus 指標收集 18.5 Grafana 視覺化監控 18.6 分散式追蹤（OpenTelemetry） 18.7 ELK Stack 日誌架構 18.8 告警策略設計 第 19 章：Node.js 效能調校 19.1 Event Loop Lag 監控 19.2 Memory Leak 偵測 19.3 Heap Snapshot 分析 19.4 CPU Profile 分析 19.5 Benchmark 工具 19.6 效能最佳化清單 19.7 V8 引擎最佳化技巧 19.8 Worker Threads 平行運算 19.9 Stream 效能最佳化 19.10 JSON 序列化加速 第 20 章：安全性（SSDLC） 20.1 OWASP Top 10 for Node.js 20.2 npm 供應鏈攻擊防護 20.3 依賴掃描與 SAST/DAST 20.4 Secret 管理 20.5 JWT 安全最佳實務 20.6 Helmet、CORS 與 Rate Limiting 20.7 輸入驗證與 Injection 防護 20.8 SSRF 防護 20.9 密碼安全與雜湊 20.10 Content Security Policy（CSP） 20.11 安全 HTTP Headers 完整清單 第 21 章：AI 協作開發 21.1 GitHub Copilot 21.2 Claude Code 21.3 其他 AI 工具整合 21.4 Prompt Engineering for Coding 21.5 AI 輔助 Code Review 21.6 AI 輔助測試產生 21.7 AI 輔助文件產生 21.8 CLAUDE.md 專案規範範例 第 22 章：Node.js 維運 22.1 PM2 程序管理 22.2 Cluster 模式 22.3 部署策略 22.4 Graceful Shutdown 22.5 維運監控 Checklist 22.6 Node.js 生產環境設定 22.7 日誌輪替與管理 22.8 健康檢查與自我修復 第 23 章：企業級最佳實務 23.1 Coding Standard 與 Lint 23.2 Conventional Commits 23.3 Git Flow 與分支策略 23.4 Release 與版本策略 23.5 Code Review 流程 23.6 API 版本管理策略 23.7 Feature Flag 管理 23.8 國際化（i18n） 第 24 章：完整企業級範例專案 24.1 專案概覽 24.2 NestJS API 核心 24.3 認證模組 24.4 Prisma Schema 24.5 Redis 快取與 BullMQ 工作佇列 24.6 Docker Compose（完整開發環境） 24.7 GitHub Actions CI/CD 24.8 監控與 Logging 整合 24.9 Order Module 完整實作 24.10 完整測試範例 第 25 章：Appendix 25.1 CLI 常用指令速查表 25.2 Debug 技巧 25.3 VS Code 推薦設定 25.4 推薦套件與學習資源 附錄：檢查清單（Checklist） A. 新專案啟動檢查清單 B. Code Review 檢查清單 C. 上線前檢查清單 D. 日常維運檢查清單 E. 安全性檢查清單 第 1 章：Node.js 簡介 1.1 Node.js 是什麼 定義 Node.js 是一個基於 Chrome V8 引擎 的 JavaScript 執行環境（Runtime），讓 JavaScript 能夠脫離瀏覽器在伺服器端執行。它採用 事件驅動（Event-driven） 與 非阻塞 I/O（Non-blocking I/O） 模型，特別適合建構高併發、I/O 密集型的網路應用程式。 ...