github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
115 lines
3.5 KiB
Plaintext
115 lines
3.5 KiB
Plaintext
---
|
|
title: 資料夾架構
|
|
info: 深入了解我們的資料夾架構
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
|
|
|
|
通過遵循這種資料夾架構慣例，更容易找到與特定功能相關的文件，確保應用程序具有可擴展性和可維護性。
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Pages
|
|
|
|
包含應用程序路由所定義的頂層組件。 它們從模組資料夾中導入更多低級別的組件（詳情如下）。
|
|
|
|
## 模組
|
|
|
|
每個模組代表一個功能或一組功能，包括其專屬的組件、狀態和運行邏輯。
|
|
它們應遵循以下結構。 您可以在模組內嵌套模組（稱為子模組），同樣的規則適用。
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### 上下文
|
|
|
|
上下文是一種通過組件樹傳遞數據的方法，不必在每個層次手動向下傳遞 props。
|
|
|
|
詳情請參閱 [React 上下文](https://react.dev/reference/react#context-hooks)。
|
|
|
|
### GraphQL
|
|
|
|
包括片段、查詢和變更。
|
|
|
|
更多詳情參閱 [GraphQL](https://graphql.org/learn/)。
|
|
|
|
- 片段
|
|
|
|
片段是可重用的查詢部分，您可以在不同的地方使用。 通過使用片段，可以更容易避免重複代碼。
|
|
|
|
更多詳情請參閱 [GraphQL 片段](https://graphql.org/learn/queries/#fragments)。
|
|
|
|
- 查詢
|
|
|
|
更多詳情請參閱 [GraphQL 查詢](https://graphql.org/learn/queries/)。
|
|
|
|
- Mutations
|
|
|
|
更多詳情請參閱 [GraphQL 變更](https://graphql.org/learn/queries/#mutations)。
|
|
|
|
### 鉤子
|
|
|
|
詳情請參閱 [鉤子](https://react.dev/learn/reusing-logic-with-custom-hooks)。
|
|
|
|
### 狀態
|
|
|
|
包含狀態管理邏輯。 [RecoilJS](https://recoiljs.org) 負責。
|
|
|
|
- 選擇器: 更多詳情請參閱 [RecoilJS 選擇器](https://recoiljs.org/docs/basic-tutorial/selectors)。
|
|
|
|
React 的內建狀態管理仍然在組件內部處理狀態。
|
|
|
|
### 實用工具
|
|
|
|
應只包含可重用的純函數。 否則，請在 `hooks` 資料夾中創建自定義鉤子。
|
|
|
|
## UI
|
|
|
|
包含應用程序中使用的所有可重用用戶介面組件。
|
|
|
|
此資料夾可以包含子資料夾，例如 `data`、`display`、`feedback` 和 `input` 針對特定組件類型。 每個組件應該是自成一體且可重用的，以便在應用程序的不同部分重複使用。
|
|
|
|
透過將用戶介面組件與模組資料夾中的其他組件分開，可以更容易維持一致的設計，且在不影響代碼庫其他部分（業務邏輯）的情況下進行用戶介面變更。
|
|
|
|
## 介面和相依
|
|
|
|
您可以從任何模組導入其他模組代碼，但 `ui` 資料夾除外。 這將使其代碼易於測試。
|
|
|
|
### 內部
|
|
|
|
每個部分（鉤子、狀態等） 模組可以有一個 `internal` 資料夾，其中包含僅在模組內使用的部分。
|