Web 使用指南

歡迎使用 AppFuse Web 元件庫！本指南採用 Diátaxis 框架組織，協助你快速找到需要的資訊。

指南結構

教學 (Tutorials)

學習導向：從零開始，跟著步驟完成具體目標

• 建立新專案 - 從參考實作建立新專案
• 建立第一個 Applet - 建立你的第一個業務模組

操作指南 (How-to)

任務導向：解決特定問題的實用指南

• 如何實作表單驗證 - 使用框架內建驗證器實作驗證
• 如何切換 Mock 到真實 API - 從開發到生產
• 如何新增語言支援 - 多語言設定
• 如何自訂主題 - 客製化視覺風格

概念解釋 (Concepts)

理解導向：了解設計理念與架構決策

• Applet 設計模式 - 核心架構模式
• Mock API 整合策略 - 開發與整合策略

參考手冊 (Reference)

資訊導向：API 規格、配置選項與技術參考

• 表單元件 - 表單元件 API
• 狀態管理 - Redux 與 RTK Query
• Mock API - MSW Mock API 整合
• 路由系統 - React Router 路由配置
• 國際化 - 多語言支援
• 訊息系統 - Toast 與通知訊息
• 主題系統 - 主題與樣式
• 設計指南 - 色彩、密度、排版、間距等設計規範
• 工具函數 - 常用工具函數
• 測試 - 前端測試策略
• 專案結構 - 目錄結構說明

---

學習路徑

我是新手

1. 建立新專案 - 建立第一個專案
2. 建立第一個 Applet - 實作第一個功能模組
3. 表單元件 - 學習表單開發
4. 狀態管理 - 了解狀態管理

我想建立 Prototype

1. 使用 app-web-mockup 作為起點
2. 閱讀 Mock API 指南
3. 參考 建立第一個 Applet
4. 查看 Storybook 了解可用元件

我想建立生產環境應用

1. 使用 app-web 作為起點
2. 了解 Mock API 的 Mock → 真實 API 切換
3. 閱讀 狀態管理
4. 參考 測試指南

我想自訂元件與樣式

1. 閱讀 設計指南 — 了解色彩、密度、排版等設計規範
2. 閱讀 主題系統 — 切換與自訂主題
3. 查看 元件庫
4. 參考 Storybook
5. 了解 專案結構

---

相關資源

• 元件庫 - 所有可用元件
• Storybook - 互動式元件文檔
• app-web - 生產環境參考實作
• app-web-mockup - Prototype 參考實作
• 開發方法論 - 開發流程指南

設計理念

AppFuse Web 的核心設計理念：

• Applet 模式：以業務功能為單位組織程式碼
• Type Safety：完整的 TypeScript 類型支援
• 開發體驗：優秀的開發者體驗與工具鏈
• 彈性整合：支援 Mock API 與真實 API 的漸進式切換
• 可客製化：基於 Tailwind CSS，易於客製化樣式

文檔架構決策

本指南採用 Diátaxis 框架組織，詳見 ADR-001: docs-web/guides 文檔架構。

---

提示：建議先完成「教學」章節，然後根據你的需求查閱「參考手冊」。