# Tool_OCR 前端文檔索引

歡迎查閱 Tool_OCR 前端項目的完整文檔。本頁面將幫助您快速找到所需的信息。

## 文檔列表

### 1. FRONTEND_ANALYSIS.md
**完整的技術棧和項目結構分析**

包含內容:
- 項目概況和技術棧詳解
- 完整的目錄結構說明
- 核心頁面和功能概述
- 組件架構設計
- 狀態管理方案 (Zustand)
- API 服務層設計
- 類型定義系統
- 國際化配置
- 路由結構
- 依賴概覽
- 代碼質量檢查
- 樣式實現要點

**適合閱讀場景:**
- 全新成員了解項目整體架構
- 深入理解技術選擇和設計決策
- 查看完整的模塊組織結構
- 了解樣式系統的設計方式

### 2. FRONTEND_CODE_EXAMPLES.md
**實際代碼示例和最佳實踐**

包含內容:
- Tailwind CSS 使用示例 (佈局、按鈕、卡片等)
- React Query 數據獲取示例
- Zustand 狀態管理示例
- API 客戶端使用示例
- 國際化集成示例
- 路由和路由保護示例
- TypeScript 類型定義示例
- 最佳實踐指南 (組件結構、錯誤處理等)
- 環境變數配置
- 常見開發流程

**適合閱讀場景:**
- 開發新功能時參考代碼模式
- 尋找特定技術的使用示例
- 學習項目內的最佳實踐
- 複製粘貼代碼片段快速開發

### 3. FRONTEND_QUICK_REFERENCE.md
**快速查閱和常見問題**

包含內容:
- 文件位置速查表
- 技術棧版本速查
- 常用開發命令
- 路由結構速查
- 常用代碼片段
- 調試技巧
- 常見問題解答 (FAQ)
- 依賴更新指南
- 性能優化建議
- 構建和部署指南
- 有用資源鏈接

**適合閱讀場景:**
- 快速查找文件位置
- 尋找常用命令
- 解決常見問題
- 快速參考語法
- 了解開發工作流

## 快速開始路線圖

### 如果您是新開發者：
1. 先讀 **FRONTEND_QUICK_REFERENCE.md** 的「快速開始」部分
2. 再讀 **FRONTEND_ANALYSIS.md** 了解整體架構
3. 需要時查閱 **FRONTEND_CODE_EXAMPLES.md** 的相關示例

### 如果您需要開發新功能：
1. 查閱 **FRONTEND_QUICK_REFERENCE.md** 的「常用代碼片段」
2. 參考 **FRONTEND_CODE_EXAMPLES.md** 的相關示例
3. 根據功能類型選擇合適的設計模式

### 如果您遇到問題：
1. 查閱 **FRONTEND_QUICK_REFERENCE.md** 的「常見問題」
2. 查閱 **FRONTEND_QUICK_REFERENCE.md** 的「調試技巧」
3. 參考 **FRONTEND_CODE_EXAMPLES.md** 的「最佳實踐」

## 項目核心信息速記

### 技術棧
- **UI 框架**: React 19.2.0 + TypeScript
- **構建工具**: Vite 7.2.2
- **樣式**: Tailwind CSS 4.1.17
- **狀態管理**: Zustand 5.0.8 + React Query 5.90.7
- **路由**: React Router v7.9.5
- **HTTP**: Axios
- **國際化**: i18next (繁體中文)

### 開發環境
- **開發端口**: 12011
- **後端 API**: localhost:12010
- **命令**: `npm run dev` | `npm run build` | `npm run lint`

### 主要頁面
- `/login` - 登錄頁面
- `/upload` - 文件上傳
- `/processing` - OCR 處理
- `/results` - 結果查看
- `/export` - 結果導出
- `/settings` - 系統設置

### 核心目錄
- `/components` - React 組件
- `/pages` - 應用頁面
- `/store` - 狀態管理 (Zustand)
- `/services` - API 客戶端
- `/types` - TypeScript 類型
- `/i18n` - 國際化配置

## 文檔使用建議

### 打開文檔
所有文檔都保存在項目根目錄:
```
/Users/egg/Projects/Tool_OCR/FRONTEND_*.md
```

推薦使用 VS Code 或任何 Markdown 編輯器打開。

### 導航技巧
- 使用 Markdown 編輯器的大綱功能快速導航
- 使用 Ctrl+F (或 Cmd+F) 搜索關鍵詞
- 點擊標題鏈接快速跳轉

### 保持同步
文檔基於以下源代碼分析:
- React 19.2.0
- Vite 7.2.2
- Tailwind CSS 4.1.17
- 其他依賴均按 package.json 記錄

如果依賴升級或架構調整，請相應更新文檔。

## 常用快速鏈接

### 官方文檔
- [React 官方文檔](https://react.dev)
- [Tailwind CSS](https://tailwindcss.com)
- [Vite 文檔](https://vitejs.dev)
- [React Router](https://reactrouter.com)
- [Zustand](https://github.com/pmndrs/zustand)
- [React Query](https://tanstack.com/query)
- [i18next](https://www.i18next.com)

### IDE 推薦擴展 (VS Code)
- Tailwind CSS IntelliSense
- ES7+ React/Redux/React-Native snippets
- Thunder Client (API 測試)
- TypeScript Vue Plugin
- ESLint

## 文檔維護

這些文檔是對項目當前狀態的快照。當進行以下操作時應考慮更新:

- 升級主要依賴版本
- 更改項目結構
- 添加新的關鍵功能
- 改變設計模式或最佳實踐
- 優化或重構大型模塊

## 反饋和建議

如果發現文檔中有錯誤或遺漏，歡迎:
1. 直接編輯文檔並提交 PR
2. 創建 Issue 報告問題
3. 聯繫專案維護者

---

最後更新: 2024年11月12日
文檔覆蓋版本: React 19.2.0, Vite 7.2.2, Tailwind CSS 4.1.17