186 lines
4.7 KiB
Markdown
186 lines
4.7 KiB
Markdown
# 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
|