egg/OCR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
57cf91271cd171f738825102d0cb7fb59bca9cf0
OCR/FRONTEND_README.md
beabigegg fed112656f update FRONTEND documentation
2025-11-12 23:55:21 +08:00

4.7 KiB
Raw Blame History

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 記錄

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

常用快速鏈接

官方文檔

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