i18n - docs translations (#19970)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
a486ead39d
commit
f018f17133
@@ -1,14 +1,14 @@
|
||||
---
|
||||
title: Guida di stile
|
||||
icon: paintbrush
|
||||
description: Code conventions and best practices for contributing to Twenty.
|
||||
icon: pennello
|
||||
description: Convenzioni di codice e buone pratiche per contribuire a Twenty.
|
||||
---
|
||||
|
||||
## React
|
||||
|
||||
### Functional components only
|
||||
### Solo componenti funzionali
|
||||
|
||||
Always use TSX functional components with named exports.
|
||||
Usa sempre componenti funzionali TSX con export nominati.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -25,7 +25,7 @@ export function MyComponent() {
|
||||
|
||||
### Props
|
||||
|
||||
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
|
||||
Crea un tipo denominato `{ComponentName}Props`. Usa la destrutturazione. Non usare `React.FC`.
|
||||
|
||||
```tsx
|
||||
type MyComponentProps = {
|
||||
@@ -35,7 +35,7 @@ type MyComponentProps = {
|
||||
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
|
||||
```
|
||||
|
||||
### No single-variable prop spreading
|
||||
### Niente spread di una singola variabile nelle props
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -47,7 +47,7 @@ const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1,
|
||||
|
||||
## Gestione dello stato
|
||||
|
||||
### Jotai atoms for global state
|
||||
### Atomi Jotai per lo stato globale
|
||||
|
||||
```tsx
|
||||
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
|
||||
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
|
||||
});
|
||||
```
|
||||
|
||||
* Prefer atoms over prop drilling
|
||||
* Don't use `useRef` for state — use `useState` or atoms
|
||||
* Use atom families and selectors for lists
|
||||
* Preferisci gli atomi al prop drilling
|
||||
* Non usare `useRef` per lo stato — usa `useState` o gli atomi
|
||||
* Usa famiglie di atomi e selettori per le liste
|
||||
|
||||
### Avoid unnecessary re-renders
|
||||
### Evita i re-render inutili
|
||||
|
||||
* Extract `useEffect` and data fetching into sibling sidecar components
|
||||
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
|
||||
* Don't use `React.memo()` — fix the root cause instead
|
||||
* Limit `useCallback` / `useMemo` usage
|
||||
* Estrai `useEffect` e il recupero dei dati in componenti sidecar fratelli
|
||||
* Preferisci i gestori di eventi (`handleClick`, `handleChange`) a `useEffect`
|
||||
* Non usare `React.memo()` — risolvi invece la causa principale
|
||||
* Limita l'uso di `useCallback` o `useMemo`
|
||||
|
||||
```tsx
|
||||
// ❌ Bad — useEffect in the same component causes re-renders
|
||||
@@ -94,11 +94,11 @@ export const Page = () => {
|
||||
|
||||
## TypeScript
|
||||
|
||||
* **`type` over `interface`** — more flexible, easier to compose
|
||||
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
|
||||
* **No `any`** — strict TypeScript enforced
|
||||
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
|
||||
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
|
||||
* **`type` invece di `interface`** — più flessibile, più facile da comporre
|
||||
* **Letterali di stringa invece degli enum** — tranne per gli enum generati da GraphQL codegen e le API interne della libreria
|
||||
* **Niente `any`** — TypeScript rigoroso applicato
|
||||
* **Niente import di tipo** — usa import normali (applicato da Oxlint `typescript/consistent-type-imports`)
|
||||
* **Usa [Zod](https://github.com/colinhacks/zod)** per la validazione a runtime di oggetti non tipizzati
|
||||
|
||||
## JavaScript
|
||||
|
||||
@@ -112,17 +112,17 @@ onClick?.();
|
||||
|
||||
## Denominazione
|
||||
|
||||
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
|
||||
* **Constants**: SCREAMING_SNAKE_CASE
|
||||
* **Types/Classes**: PascalCase
|
||||
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
|
||||
* **Component props**: prefix with component name (`ButtonProps`)
|
||||
* **Styled components**: prefix with `Styled` (`StyledTitle`)
|
||||
* **Variabili**: camelCase, descrittive (`email` non `value`, `fieldMetadata` non `fm`)
|
||||
* **Costanti**: SCREAMING_SNAKE_CASE
|
||||
* **Tipi/Classi**: PascalCase
|
||||
* **File/directory**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Gestori di eventi**: `handleClick` (non `onClick` per la funzione gestore)
|
||||
* **Props dei componenti**: metti come prefisso il nome del componente (`ButtonProps`)
|
||||
* **Componenti styled**: metti come prefisso `Styled` (`StyledTitle`)
|
||||
|
||||
## Stile
|
||||
|
||||
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
|
||||
Usa i componenti styled di [Linaria](https://github.com/callstack/linaria). Usa i valori del tema — evita `px`, `rem` o colori hardcoded.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
|
||||
|
||||
## Importazioni
|
||||
|
||||
Use aliases instead of relative paths:
|
||||
Usa gli alias invece dei percorsi relativi:
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
|
||||
import { Bar } from '@/modules/bar/components/Bar';
|
||||
```
|
||||
|
||||
## Folder Structure
|
||||
## Struttura delle cartelle
|
||||
|
||||
```
|
||||
front
|
||||
@@ -171,6 +171,6 @@ front
|
||||
└── ui/ # Reusable UI components (display, input, feedback, ...)
|
||||
```
|
||||
|
||||
* Modules can import from other modules, but `ui/` should stay dependency-free
|
||||
* Use `internal/` subfolders for module-private code
|
||||
* Components under 300 lines, services under 500 lines
|
||||
* I moduli possono importare da altri moduli, ma `ui/` dovrebbe restare privo di dipendenze
|
||||
* Usa le sottocartelle `internal/` per il codice privato del modulo
|
||||
* Componenti sotto le 300 righe, servizi sotto le 500 righe
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
---
|
||||
title: Navigazione
|
||||
description: Customize the left sidebar to match how your team works.
|
||||
description: Personalizza la barra laterale sinistra per adattarla al modo in cui lavora il tuo team.
|
||||
---
|
||||
|
||||
The left sidebar is your primary way to move around Twenty. It's fully customizable — you can reorganize it to match your workflow without touching any settings page.
|
||||
La barra laterale sinistra è il modo principale per navigare in Twenty. È completamente personalizzabile — puoi riorganizzarla per adattarla al tuo flusso di lavoro senza toccare alcuna pagina delle impostazioni.
|
||||
|
||||
## Reordering items
|
||||
## Riordinare gli elementi
|
||||
|
||||
Drag and drop any item in the sidebar to change its position. The order is saved per user, so each team member can arrange their own sidebar.
|
||||
Trascina e rilascia qualsiasi elemento nella barra laterale per cambiarne la posizione. L'ordine viene salvato per utente, così ogni membro del team può organizzare la propria barra laterale.
|
||||
|
||||
## Cartelle
|
||||
|
||||
Group related items into folders. For example, you might create a "Sales" folder containing your pipeline views, a "Support" folder for tickets, or an "Operations" folder for internal objects.
|
||||
Raggruppa gli elementi correlati in cartelle. Ad esempio, puoi creare una cartella "Vendite" contenente le tue viste della pipeline, una cartella "Assistenza" per i ticket o una cartella "Operazioni" per gli oggetti interni.
|
||||
|
||||
To create a folder, right-click in the sidebar or use the `+` button.
|
||||
Per creare una cartella, fai clic con il tasto destro nella barra laterale oppure usa il pulsante `+`.
|
||||
|
||||
## Hiding objects
|
||||
## Nascondere gli oggetti
|
||||
|
||||
Objects you don't use can be hidden from the sidebar. They're not deleted — they're just out of the way. You can show them again anytime from Settings > Data Model.
|
||||
Gli oggetti che non utilizzi possono essere nascosti dalla barra laterale. Non vengono eliminati — sono solo fuori dalla vista. Puoi mostrarli di nuovo in qualsiasi momento da Impostazioni > Modello di Dati.
|
||||
|
||||
## Preferiti
|
||||
|
||||
Pin views, records, or searches to the Favorites section at the top of the sidebar for one-click access. Favorites are personal — each user manages their own.
|
||||
Aggiungi viste, record o ricerche alla sezione Preferiti in cima alla barra laterale per un accesso con un clic. I Preferiti sono personali — ogni utente gestisce i propri.
|
||||
|
||||
## Custom links
|
||||
## Collegamenti personalizzati
|
||||
|
||||
Add links to external tools directly in the sidebar. Useful for linking to your wiki, dashboards in other tools, or any URL your team uses regularly.
|
||||
Aggiungi collegamenti a strumenti esterni direttamente nella barra laterale. Utile per collegare il tuo wiki, le dashboard in altri strumenti o qualsiasi URL che il tuo team utilizza regolarmente.
|
||||
|
||||
## Command menu
|
||||
## Menu Comandi
|
||||
|
||||
Press `Cmd+K` (or `Ctrl+K`) to open the command menu — a quick-access search bar for jumping to any record, view, or action without navigating the sidebar.
|
||||
Premi `Cmd+K` (o `Ctrl+K`) per aprire il menu comandi — una barra di ricerca ad accesso rapido per passare a qualsiasi record, vista o azione senza usare la barra laterale.
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
---
|
||||
title: Guia de Estilo
|
||||
icon: paintbrush
|
||||
description: Code conventions and best practices for contributing to Twenty.
|
||||
icon: pincel
|
||||
description: Convenções de código e práticas recomendadas para contribuir para o Twenty.
|
||||
---
|
||||
|
||||
## React
|
||||
|
||||
### Functional components only
|
||||
### Apenas componentes funcionais
|
||||
|
||||
Always use TSX functional components with named exports.
|
||||
Use sempre componentes funcionais TSX com exportações nomeadas.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -25,7 +25,7 @@ export function MyComponent() {
|
||||
|
||||
### Propriedades
|
||||
|
||||
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
|
||||
Crie um tipo chamado `{ComponentName}Props`. Use desestruturação. Não use `React.FC`.
|
||||
|
||||
```tsx
|
||||
type MyComponentProps = {
|
||||
@@ -35,7 +35,7 @@ type MyComponentProps = {
|
||||
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
|
||||
```
|
||||
|
||||
### No single-variable prop spreading
|
||||
### Sem spread de props de uma única variável
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -47,7 +47,7 @@ const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1,
|
||||
|
||||
## Gerenciamento de Estado
|
||||
|
||||
### Jotai atoms for global state
|
||||
### Átomos do Jotai para estado global
|
||||
|
||||
```tsx
|
||||
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
|
||||
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
|
||||
});
|
||||
```
|
||||
|
||||
* Prefer atoms over prop drilling
|
||||
* Don't use `useRef` for state — use `useState` or atoms
|
||||
* Use atom families and selectors for lists
|
||||
* Prefira átomos em vez de prop drilling
|
||||
* Não use `useRef` para estado — use `useState` ou átomos
|
||||
* Use famílias de átomos e seletores para listas
|
||||
|
||||
### Avoid unnecessary re-renders
|
||||
### Evite re-renderizações desnecessárias
|
||||
|
||||
* Extract `useEffect` and data fetching into sibling sidecar components
|
||||
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
|
||||
* Don't use `React.memo()` — fix the root cause instead
|
||||
* Limit `useCallback` / `useMemo` usage
|
||||
* Extraia `useEffect` e busca de dados em componentes sidecar irmãos
|
||||
* Prefira manipuladores de eventos (`handleClick`, `handleChange`) em vez de `useEffect`
|
||||
* Não use `React.memo()` — corrija a causa raiz em vez disso
|
||||
* Limite o uso de `useCallback` / `useMemo`
|
||||
|
||||
```tsx
|
||||
// ❌ Bad — useEffect in the same component causes re-renders
|
||||
@@ -94,11 +94,11 @@ export const Page = () => {
|
||||
|
||||
## TypeScript
|
||||
|
||||
* **`type` over `interface`** — more flexible, easier to compose
|
||||
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
|
||||
* **No `any`** — strict TypeScript enforced
|
||||
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
|
||||
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
|
||||
* **`type` em vez de `interface`** — mais flexível, mais fácil de compor
|
||||
* **Literais de string em vez de enums** — exceto para enums do codegen do GraphQL e APIs internas da biblioteca
|
||||
* **Sem `any`** — TypeScript estrito aplicado
|
||||
* **Sem imports de tipos** — use imports normais (aplicado pelo Oxlint `typescript/consistent-type-imports`)
|
||||
* **Use [Zod](https://github.com/colinhacks/zod)** para validação em tempo de execução de objetos não tipados
|
||||
|
||||
## JavaScript
|
||||
|
||||
@@ -112,17 +112,17 @@ onClick?.();
|
||||
|
||||
## Nomenclatura
|
||||
|
||||
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
|
||||
* **Constants**: SCREAMING_SNAKE_CASE
|
||||
* **Types/Classes**: PascalCase
|
||||
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
|
||||
* **Component props**: prefix with component name (`ButtonProps`)
|
||||
* **Styled components**: prefix with `Styled` (`StyledTitle`)
|
||||
* **Variáveis**: camelCase, descritivas (`email` não `value`, `fieldMetadata` não `fm`)
|
||||
* **Constantes**: SCREAMING_SNAKE_CASE
|
||||
* **Tipos/Classes**: PascalCase
|
||||
* **Arquivos/diretórios**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Manipuladores de eventos**: `handleClick` (não `onClick` para a função manipuladora)
|
||||
* **Props do componente**: prefixe com o nome do componente (`ButtonProps`)
|
||||
* **Componentes estilizados**: prefixe com `Styled` (`StyledTitle`)
|
||||
|
||||
## Estilização
|
||||
|
||||
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
|
||||
Use componentes estilizados do [Linaria](https://github.com/callstack/linaria). Use valores do tema — evite `px`, `rem` ou cores hardcoded.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
|
||||
|
||||
## Importações
|
||||
|
||||
Use aliases instead of relative paths:
|
||||
Use aliases em vez de caminhos relativos:
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
|
||||
import { Bar } from '@/modules/bar/components/Bar';
|
||||
```
|
||||
|
||||
## Folder Structure
|
||||
## Estrutura de pastas
|
||||
|
||||
```
|
||||
front
|
||||
@@ -171,6 +171,6 @@ front
|
||||
└── ui/ # Reusable UI components (display, input, feedback, ...)
|
||||
```
|
||||
|
||||
* Modules can import from other modules, but `ui/` should stay dependency-free
|
||||
* Use `internal/` subfolders for module-private code
|
||||
* Components under 300 lines, services under 500 lines
|
||||
* Módulos podem importar de outros módulos, mas `ui/` deve permanecer sem dependências
|
||||
* Use subpastas `internal/` para código privado do módulo
|
||||
* Componentes com menos de 300 linhas, serviços com menos de 500 linhas
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
---
|
||||
title: Navegação
|
||||
description: Customize the left sidebar to match how your team works.
|
||||
description: Personalize a barra lateral esquerda para corresponder à forma como sua equipe trabalha.
|
||||
---
|
||||
|
||||
The left sidebar is your primary way to move around Twenty. It's fully customizable — you can reorganize it to match your workflow without touching any settings page.
|
||||
A barra lateral esquerda é sua principal forma de navegar pelo Twenty. Ela é totalmente personalizável — você pode reorganizá-la para corresponder ao seu fluxo de trabalho sem acessar nenhuma página de configurações.
|
||||
|
||||
## Reordering items
|
||||
## Reordenar itens
|
||||
|
||||
Drag and drop any item in the sidebar to change its position. The order is saved per user, so each team member can arrange their own sidebar.
|
||||
Arraste e solte qualquer item na barra lateral para alterar sua posição. A ordem é salva por usuário, para que cada membro da equipe possa organizar sua própria barra lateral.
|
||||
|
||||
## Pastas
|
||||
|
||||
Group related items into folders. For example, you might create a "Sales" folder containing your pipeline views, a "Support" folder for tickets, or an "Operations" folder for internal objects.
|
||||
Agrupe itens relacionados em pastas. Por exemplo, você pode criar uma pasta "Vendas" contendo suas visualizações de pipeline, uma pasta "Suporte" para tickets ou uma pasta "Operações" para objetos internos.
|
||||
|
||||
To create a folder, right-click in the sidebar or use the `+` button.
|
||||
Para criar uma pasta, clique com o botão direito na barra lateral ou use o botão `+`.
|
||||
|
||||
## Hiding objects
|
||||
## Ocultar objetos
|
||||
|
||||
Objects you don't use can be hidden from the sidebar. They're not deleted — they're just out of the way. You can show them again anytime from Settings > Data Model.
|
||||
Objetos que você não usa podem ser ocultos da barra lateral. Eles não são excluídos — apenas ficam fora de vista. Você pode mostrá-los novamente a qualquer momento em Configurações > Modelo de Dados.
|
||||
|
||||
## Favoritos
|
||||
|
||||
Pin views, records, or searches to the Favorites section at the top of the sidebar for one-click access. Favorites are personal — each user manages their own.
|
||||
Fixe visualizações, registros ou pesquisas na seção Favoritos no topo da barra lateral para acesso com um clique. Os Favoritos são pessoais — cada usuário gerencia os seus.
|
||||
|
||||
## Custom links
|
||||
## Links personalizados
|
||||
|
||||
Add links to external tools directly in the sidebar. Useful for linking to your wiki, dashboards in other tools, or any URL your team uses regularly.
|
||||
Adicione links para ferramentas externas diretamente na barra lateral. Útil para vincular ao seu wiki, a painéis em outras ferramentas ou a qualquer URL que sua equipe use regularmente.
|
||||
|
||||
## Command menu
|
||||
## Menu de Comandos
|
||||
|
||||
Press `Cmd+K` (or `Ctrl+K`) to open the command menu — a quick-access search bar for jumping to any record, view, or action without navigating the sidebar.
|
||||
Pressione `Cmd+K` (ou `Ctrl+K`) para abrir o menu de comandos — uma barra de pesquisa de acesso rápido para ir a qualquer registro, visualização ou ação sem navegar pela barra lateral.
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
---
|
||||
title: Руководство по стилю
|
||||
icon: paintbrush
|
||||
description: Code conventions and best practices for contributing to Twenty.
|
||||
icon: кисть
|
||||
description: Соглашения по коду и лучшие практики для внесения вклада в Twenty.
|
||||
---
|
||||
|
||||
## React
|
||||
|
||||
### Functional components only
|
||||
### Только функциональные компоненты
|
||||
|
||||
Always use TSX functional components with named exports.
|
||||
Всегда используйте функциональные компоненты TSX с именованными экспортами.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -25,7 +25,7 @@ export function MyComponent() {
|
||||
|
||||
### Свойства
|
||||
|
||||
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
|
||||
Создайте тип с именем `{ComponentName}Props`. Используйте деструктуризацию. Не используйте `React.FC`.
|
||||
|
||||
```tsx
|
||||
type MyComponentProps = {
|
||||
@@ -35,7 +35,7 @@ type MyComponentProps = {
|
||||
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
|
||||
```
|
||||
|
||||
### No single-variable prop spreading
|
||||
### Не используйте спред одного объекта пропсов
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -47,7 +47,7 @@ const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1,
|
||||
|
||||
## Управление состоянием
|
||||
|
||||
### Jotai atoms for global state
|
||||
### Атомы Jotai для глобального состояния
|
||||
|
||||
```tsx
|
||||
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
|
||||
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
|
||||
});
|
||||
```
|
||||
|
||||
* Prefer atoms over prop drilling
|
||||
* Don't use `useRef` for state — use `useState` or atoms
|
||||
* Use atom families and selectors for lists
|
||||
* Предпочитайте атомы вместо проброса пропсов
|
||||
* Не используйте `useRef` для состояния — используйте `useState` или атомы
|
||||
* Используйте семейства атомов и селекторы для списков
|
||||
|
||||
### Avoid unnecessary re-renders
|
||||
### Избегайте лишних повторных рендеров
|
||||
|
||||
* Extract `useEffect` and data fetching into sibling sidecar components
|
||||
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
|
||||
* Don't use `React.memo()` — fix the root cause instead
|
||||
* Limit `useCallback` / `useMemo` usage
|
||||
* Выносите `useEffect` и загрузку данных в соседние сайдкар-компоненты
|
||||
* Предпочитайте обработчики событий (`handleClick`, `handleChange`) вместо `useEffect`
|
||||
* Не используйте `React.memo()` — вместо этого исправьте первопричину
|
||||
* Ограничьте использование `useCallback` или `useMemo`
|
||||
|
||||
```tsx
|
||||
// ❌ Bad — useEffect in the same component causes re-renders
|
||||
@@ -94,11 +94,11 @@ export const Page = () => {
|
||||
|
||||
## TypeScript
|
||||
|
||||
* **`type` over `interface`** — more flexible, easier to compose
|
||||
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
|
||||
* **No `any`** — strict TypeScript enforced
|
||||
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
|
||||
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
|
||||
* **`type` вместо `interface`** — более гибкий, проще компоновать
|
||||
* **Строковые литералы вместо перечислений** — за исключением перечислений из GraphQL codegen и внутренних API библиотеки
|
||||
* **Без `any`** — строгий режим TypeScript обязателен
|
||||
* **Без type-импортов** — используйте обычные импорты (принудительно через Oxlint `typescript/consistent-type-imports`)
|
||||
* **Используйте [Zod](https://github.com/colinhacks/zod)** для проверки во время выполнения нетипизированных объектов
|
||||
|
||||
## JavaScript
|
||||
|
||||
@@ -112,17 +112,17 @@ onClick?.();
|
||||
|
||||
## Именование
|
||||
|
||||
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
|
||||
* **Constants**: SCREAMING_SNAKE_CASE
|
||||
* **Types/Classes**: PascalCase
|
||||
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
|
||||
* **Component props**: prefix with component name (`ButtonProps`)
|
||||
* **Styled components**: prefix with `Styled` (`StyledTitle`)
|
||||
* **Переменные**: camelCase, информативные (`email`, а не `value`, `fieldMetadata`, а не `fm`)
|
||||
* **Константы**: SCREAMING_SNAKE_CASE
|
||||
* **Типы/Классы**: PascalCase
|
||||
* **Файлы/директории**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Обработчики событий**: `handleClick` (не `onClick` для функции-обработчика)
|
||||
* **Пропсы компонента**: используйте префикс имени компонента (`ButtonProps`)
|
||||
* **Стилизованные компоненты**: префикс `Styled` (`StyledTitle`)
|
||||
|
||||
## Стилизация
|
||||
|
||||
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
|
||||
Используйте стилизованные компоненты [Linaria](https://github.com/callstack/linaria). Используйте значения темы — избегайте жестко заданных `px`, `rem` или цветов.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
|
||||
|
||||
## Импорт
|
||||
|
||||
Use aliases instead of relative paths:
|
||||
Используйте алиасы вместо относительных путей:
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
|
||||
import { Bar } from '@/modules/bar/components/Bar';
|
||||
```
|
||||
|
||||
## Folder Structure
|
||||
## Структура папок
|
||||
|
||||
```
|
||||
front
|
||||
@@ -171,6 +171,6 @@ front
|
||||
└── ui/ # Reusable UI components (display, input, feedback, ...)
|
||||
```
|
||||
|
||||
* Modules can import from other modules, but `ui/` should stay dependency-free
|
||||
* Use `internal/` subfolders for module-private code
|
||||
* Components under 300 lines, services under 500 lines
|
||||
* Модули могут импортировать из других модулей, но `ui/` должен оставаться без зависимостей
|
||||
* Используйте подпапки `internal/` для приватного кода модуля
|
||||
* Компоненты — до 300 строк, сервисы — до 500 строк
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
---
|
||||
title: Навигация
|
||||
description: Customize the left sidebar to match how your team works.
|
||||
description: Настройте левую боковую панель под то, как работает ваша команда.
|
||||
---
|
||||
|
||||
The left sidebar is your primary way to move around Twenty. It's fully customizable — you can reorganize it to match your workflow without touching any settings page.
|
||||
Левая боковая панель — основной способ навигации в Twenty. Она полностью настраивается — вы можете переупорядочить её под свой рабочий процесс, не открывая никаких страниц настроек.
|
||||
|
||||
## Reordering items
|
||||
## Изменение порядка элементов
|
||||
|
||||
Drag and drop any item in the sidebar to change its position. The order is saved per user, so each team member can arrange their own sidebar.
|
||||
Перетащите любой элемент в боковой панели, чтобы изменить его положение. Порядок сохраняется для каждого пользователя, поэтому каждый участник команды может настроить свою боковую панель.
|
||||
|
||||
## Папки
|
||||
|
||||
Group related items into folders. For example, you might create a "Sales" folder containing your pipeline views, a "Support" folder for tickets, or an "Operations" folder for internal objects.
|
||||
Группируйте связанные элементы в папки. Например, вы можете создать папку "Продажи" с представлениями вашей воронки, папку "Поддержка" для заявок или папку "Операции" для внутренних объектов.
|
||||
|
||||
To create a folder, right-click in the sidebar or use the `+` button.
|
||||
Чтобы создать папку, щёлкните правой кнопкой мыши в боковой панели или используйте кнопку `+`.
|
||||
|
||||
## Hiding objects
|
||||
## Скрытие объектов
|
||||
|
||||
Objects you don't use can be hidden from the sidebar. They're not deleted — they're just out of the way. You can show them again anytime from Settings > Data Model.
|
||||
Объекты, которые вы не используете, можно скрыть из боковой панели. Они не удаляются — просто скрыты из виду. Вы можете снова показать их в любое время в разделе Настройки > Модель данных.
|
||||
|
||||
## Избранное
|
||||
|
||||
Pin views, records, or searches to the Favorites section at the top of the sidebar for one-click access. Favorites are personal — each user manages their own.
|
||||
Закрепляйте представления, записи или поисковые запросы в разделе "Избранное" в верхней части боковой панели для быстрого доступа в один клик. Раздел "Избранное" персональный — каждый пользователь управляет своим.
|
||||
|
||||
## Custom links
|
||||
## Пользовательские ссылки
|
||||
|
||||
Add links to external tools directly in the sidebar. Useful for linking to your wiki, dashboards in other tools, or any URL your team uses regularly.
|
||||
Добавляйте ссылки на внешние инструменты прямо в боковую панель. Полезно для ссылок на вашу вики, панели мониторинга в других инструментах или любые URL-адреса, которые ваша команда использует регулярно.
|
||||
|
||||
## Command menu
|
||||
## Меню команд
|
||||
|
||||
Press `Cmd+K` (or `Ctrl+K`) to open the command menu — a quick-access search bar for jumping to any record, view, or action without navigating the sidebar.
|
||||
Нажмите `Cmd+K` (или `Ctrl+K`), чтобы открыть меню команд — строку быстрого поиска для перехода к любой записи, представлению или действию, не используя боковую панель.
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
---
|
||||
title: Stil Rehberi
|
||||
icon: paintbrush
|
||||
description: Code conventions and best practices for contributing to Twenty.
|
||||
icon: Boya fırçası
|
||||
description: Twenty'ye katkıda bulunmak için kod kuralları ve en iyi uygulamalar.
|
||||
---
|
||||
|
||||
## React
|
||||
|
||||
### Functional components only
|
||||
### Yalnızca fonksiyonel bileşenler
|
||||
|
||||
Always use TSX functional components with named exports.
|
||||
Her zaman named export'larla TSX fonksiyonel bileşenlerini kullanın.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -25,7 +25,7 @@ export function MyComponent() {
|
||||
|
||||
### Özellikler
|
||||
|
||||
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
|
||||
`{ComponentName}Props` adında bir type oluşturun. Destructuring kullanın. `React.FC` kullanmayın.
|
||||
|
||||
```tsx
|
||||
type MyComponentProps = {
|
||||
@@ -35,7 +35,7 @@ type MyComponentProps = {
|
||||
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
|
||||
```
|
||||
|
||||
### No single-variable prop spreading
|
||||
### Tek değişken için prop spread kullanmayın
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -47,7 +47,7 @@ const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1,
|
||||
|
||||
## Durum Yönetimi
|
||||
|
||||
### Jotai atoms for global state
|
||||
### Global durum için Jotai atomları
|
||||
|
||||
```tsx
|
||||
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
|
||||
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
|
||||
});
|
||||
```
|
||||
|
||||
* Prefer atoms over prop drilling
|
||||
* Don't use `useRef` for state — use `useState` or atoms
|
||||
* Use atom families and selectors for lists
|
||||
* Prop drilling yerine atomları tercih edin
|
||||
* Durum için `useRef` kullanmayın — `useState` veya atomları kullanın
|
||||
* Listeler için atom ailelerini ve seçicileri kullanın
|
||||
|
||||
### Avoid unnecessary re-renders
|
||||
### Gereksiz yeniden render'ları önleyin
|
||||
|
||||
* Extract `useEffect` and data fetching into sibling sidecar components
|
||||
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
|
||||
* Don't use `React.memo()` — fix the root cause instead
|
||||
* Limit `useCallback` / `useMemo` usage
|
||||
* `useEffect` ve veri çekmeyi kardeş sidecar bileşenlere ayırın
|
||||
* `useEffect` yerine olay işleyicilerini (`handleClick`, `handleChange`) tercih edin
|
||||
* `React.memo()` kullanmayın — bunun yerine kök nedeni düzeltin
|
||||
* `useCallback` / `useMemo` kullanımını sınırlayın
|
||||
|
||||
```tsx
|
||||
// ❌ Bad — useEffect in the same component causes re-renders
|
||||
@@ -94,11 +94,11 @@ export const Page = () => {
|
||||
|
||||
## TypeScript
|
||||
|
||||
* **`type` over `interface`** — more flexible, easier to compose
|
||||
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
|
||||
* **No `any`** — strict TypeScript enforced
|
||||
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
|
||||
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
|
||||
* **`interface` yerine `type`** — daha esnek, birleştirmesi daha kolay
|
||||
* **enum yerine string literal'lar** — GraphQL codegen enum'ları ve dahili kütüphane API'leri hariç
|
||||
* **`any` yok** — katı TypeScript zorunludur
|
||||
* **Type import'ları yok** — normal import'lar kullanın (Oxlint `typescript/consistent-type-imports` tarafından uygulanır)
|
||||
* **[Zod](https://github.com/colinhacks/zod) kullanın** tiplenmemiş nesnelerin çalışma zamanı doğrulaması için
|
||||
|
||||
## JavaScript
|
||||
|
||||
@@ -112,17 +112,17 @@ onClick?.();
|
||||
|
||||
## İsimlendirme
|
||||
|
||||
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
|
||||
* **Constants**: SCREAMING_SNAKE_CASE
|
||||
* **Types/Classes**: PascalCase
|
||||
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
|
||||
* **Component props**: prefix with component name (`ButtonProps`)
|
||||
* **Styled components**: prefix with `Styled` (`StyledTitle`)
|
||||
* **Değişkenler**: camelCase, açıklayıcı (`email` değil `value`, `fieldMetadata` değil `fm`)
|
||||
* **Sabitler**: SCREAMING_SNAKE_CASE
|
||||
* **Tipler/Sınıflar**: PascalCase
|
||||
* **Dosyalar/dizinler**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Olay işleyicileri**: `handleClick` (işleyici fonksiyon için `onClick` değil)
|
||||
* **Bileşen prop'ları**: önek olarak bileşen adını kullanın (`ButtonProps`)
|
||||
* **Styled bileşenler**: `Styled` öneğini kullanın (`StyledTitle`)
|
||||
|
||||
## Stil
|
||||
|
||||
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
|
||||
[Linaria](https://github.com/callstack/linaria) ile stillendirilmiş bileşenleri kullanın. Tema değerlerini kullanın — kodda sabit tanımlanmış `px`, `rem` veya renklerden kaçının.
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
|
||||
|
||||
## İçe Aktarımlar
|
||||
|
||||
Use aliases instead of relative paths:
|
||||
Göreli yollar yerine alias kullanın:
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
|
||||
import { Bar } from '@/modules/bar/components/Bar';
|
||||
```
|
||||
|
||||
## Folder Structure
|
||||
## Klasör Yapısı
|
||||
|
||||
```
|
||||
front
|
||||
@@ -171,6 +171,6 @@ front
|
||||
└── ui/ # Reusable UI components (display, input, feedback, ...)
|
||||
```
|
||||
|
||||
* Modules can import from other modules, but `ui/` should stay dependency-free
|
||||
* Use `internal/` subfolders for module-private code
|
||||
* Components under 300 lines, services under 500 lines
|
||||
* Modüller diğer modüllerden import edebilir, ancak `ui/` bağımlılıksız kalmalıdır
|
||||
* `internal/` alt klasörlerini modüle özel kod için kullanın
|
||||
* Bileşenler 300 satırın altında, servisler 500 satırın altında
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
---
|
||||
title: Gezinme
|
||||
description: Customize the left sidebar to match how your team works.
|
||||
description: Sol kenar çubuğunu ekibinizin çalışma biçimine uyacak şekilde özelleştirin.
|
||||
---
|
||||
|
||||
The left sidebar is your primary way to move around Twenty. It's fully customizable — you can reorganize it to match your workflow without touching any settings page.
|
||||
Sol kenar çubuğu, Twenty içinde gezinmenin başlıca yoludur. Tamamen özelleştirilebilir — herhangi bir ayar sayfasına dokunmadan iş akışınıza uyacak şekilde yeniden düzenleyebilirsiniz.
|
||||
|
||||
## Reordering items
|
||||
## Öğeleri yeniden sıralama
|
||||
|
||||
Drag and drop any item in the sidebar to change its position. The order is saved per user, so each team member can arrange their own sidebar.
|
||||
Konumunu değiştirmek için kenar çubuğundaki herhangi bir öğeyi sürükleyip bırakın. Sıralama kullanıcı bazında kaydedilir; böylece her ekip üyesi kendi kenar çubuğunu düzenleyebilir.
|
||||
|
||||
## Klasörler
|
||||
|
||||
Group related items into folders. For example, you might create a "Sales" folder containing your pipeline views, a "Support" folder for tickets, or an "Operations" folder for internal objects.
|
||||
İlgili öğeleri klasörler halinde gruplayın. Örneğin, pipeline görünümlerinizi içeren bir "Satış" klasörü, biletler için bir "Destek" klasörü ya da dahili nesneler için bir "Operasyonlar" klasörü oluşturabilirsiniz.
|
||||
|
||||
To create a folder, right-click in the sidebar or use the `+` button.
|
||||
Bir klasör oluşturmak için kenar çubuğunda sağ tıklayın veya `+` düğmesini kullanın.
|
||||
|
||||
## Hiding objects
|
||||
## Nesneleri gizleme
|
||||
|
||||
Objects you don't use can be hidden from the sidebar. They're not deleted — they're just out of the way. You can show them again anytime from Settings > Data Model.
|
||||
Kullanmadığınız nesneler kenar çubuğundan gizlenebilir. Silinmezler — sadece göz önünden uzak tutulurlar. Bunları istediğiniz zaman Ayarlar > Veri Modeli'nden yeniden gösterebilirsiniz.
|
||||
|
||||
## Favoriler
|
||||
|
||||
Pin views, records, or searches to the Favorites section at the top of the sidebar for one-click access. Favorites are personal — each user manages their own.
|
||||
Görünümleri, kayıtları veya aramaları tek tıklamayla erişim için kenar çubuğunun üst kısmındaki Sık Kullanılanlar bölümüne sabitleyin. Sık Kullanılanlar kişiseldir — her kullanıcı kendi listesini yönetir.
|
||||
|
||||
## Custom links
|
||||
## Özel bağlantılar
|
||||
|
||||
Add links to external tools directly in the sidebar. Useful for linking to your wiki, dashboards in other tools, or any URL your team uses regularly.
|
||||
Harici araçlara yönelik bağlantıları doğrudan kenar çubuğuna ekleyin. Wiki'nize, diğer araçlardaki panolara veya ekibinizin düzenli olarak kullandığı herhangi bir URL'ye bağlantı vermek için kullanışlıdır.
|
||||
|
||||
## Command menu
|
||||
## Komut Menüsü
|
||||
|
||||
Press `Cmd+K` (or `Ctrl+K`) to open the command menu — a quick-access search bar for jumping to any record, view, or action without navigating the sidebar.
|
||||
Komut menüsünü açmak için `Cmd+K` (veya `Ctrl+K`) tuşlarına basın — kenar çubuğunda gezinmeden herhangi bir kayda, görünüme veya eyleme atlamak için hızlı erişim sunan bir arama çubuğu.
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
---
|
||||
title: 样式指南
|
||||
icon: paintbrush
|
||||
description: Code conventions and best practices for contributing to Twenty.
|
||||
icon: 画笔
|
||||
description: 为 Twenty 做出贡献的代码约定和最佳实践。
|
||||
---
|
||||
|
||||
## React
|
||||
|
||||
### Functional components only
|
||||
### 仅使用函数组件
|
||||
|
||||
Always use TSX functional components with named exports.
|
||||
始终使用带命名导出的 TSX 函数组件。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -25,7 +25,7 @@ export function MyComponent() {
|
||||
|
||||
### 属性
|
||||
|
||||
Create a type named `{ComponentName}Props`. Use destructuring. Don't use `React.FC`.
|
||||
创建一个名为 `{ComponentName}Props` 的类型。 使用解构。 不要使用 `React.FC`。
|
||||
|
||||
```tsx
|
||||
type MyComponentProps = {
|
||||
@@ -35,7 +35,7 @@ type MyComponentProps = {
|
||||
export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
|
||||
```
|
||||
|
||||
### No single-variable prop spreading
|
||||
### 禁止仅为单个 prop 使用展开
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -47,7 +47,7 @@ const MyComponent = ({ prop1, prop2 }: MyComponentProps) => <Other {...{ prop1,
|
||||
|
||||
## 状态管理
|
||||
|
||||
### Jotai atoms for global state
|
||||
### 使用 Jotai 原子管理全局状态
|
||||
|
||||
```tsx
|
||||
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
|
||||
@@ -59,16 +59,16 @@ export const myAtomState = createAtomState<string>({
|
||||
});
|
||||
```
|
||||
|
||||
* Prefer atoms over prop drilling
|
||||
* Don't use `useRef` for state — use `useState` or atoms
|
||||
* Use atom families and selectors for lists
|
||||
* 优先使用原子，而非 props 逐层传递
|
||||
* 不要将 `useRef` 用于状态 — 使用 `useState` 或原子。
|
||||
* 对列表使用原子族和选择器。
|
||||
|
||||
### Avoid unnecessary re-renders
|
||||
### 避免不必要的重新渲染
|
||||
|
||||
* Extract `useEffect` and data fetching into sibling sidecar components
|
||||
* Prefer event handlers (`handleClick`, `handleChange`) over `useEffect`
|
||||
* Don't use `React.memo()` — fix the root cause instead
|
||||
* Limit `useCallback` / `useMemo` usage
|
||||
* 将 `useEffect` 和数据获取提取到同级的 sidecar 组件中。
|
||||
* 优先使用事件处理器（`handleClick`、`handleChange`）而不是 `useEffect`。
|
||||
* 不要使用 `React.memo()` — 请改为修复根本原因。
|
||||
* 限制 `useCallback` / `useMemo` 的使用。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad — useEffect in the same component causes re-renders
|
||||
@@ -94,11 +94,11 @@ export const Page = () => {
|
||||
|
||||
## TypeScript
|
||||
|
||||
* **`type` over `interface`** — more flexible, easier to compose
|
||||
* **String literals over enums** — except for GraphQL codegen enums and internal library APIs
|
||||
* **No `any`** — strict TypeScript enforced
|
||||
* **No type imports** — use regular imports (enforced by Oxlint `typescript/consistent-type-imports`)
|
||||
* **Use [Zod](https://github.com/colinhacks/zod)** for runtime validation of untyped objects
|
||||
* **优先用 `type` 而非 `interface`** — 更灵活、更易组合。
|
||||
* **优先用字符串字面量而非枚举** — 但 GraphQL 代码生成的枚举和内部库 API 除外。
|
||||
* **禁止 `any`** — 强制启用严格的 TypeScript。
|
||||
* **不使用类型导入** — 使用常规导入（由 Oxlint `typescript/consistent-type-imports` 强制执行）。
|
||||
* **使用 [Zod](https://github.com/colinhacks/zod)** 对无类型对象进行运行时校验。
|
||||
|
||||
## JavaScript
|
||||
|
||||
@@ -112,17 +112,17 @@ onClick?.();
|
||||
|
||||
## 命名
|
||||
|
||||
* **Variables**: camelCase, descriptive (`email` not `value`, `fieldMetadata` not `fm`)
|
||||
* **Constants**: SCREAMING_SNAKE_CASE
|
||||
* **Types/Classes**: PascalCase
|
||||
* **Files/directories**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
|
||||
* **Event handlers**: `handleClick` (not `onClick` for the handler function)
|
||||
* **Component props**: prefix with component name (`ButtonProps`)
|
||||
* **Styled components**: prefix with `Styled` (`StyledTitle`)
|
||||
* **变量**：使用 camelCase，具描述性（`email` 而非 `value`，`fieldMetadata` 而非 `fm`）。
|
||||
* **常量**：SCREAMING_SNAKE_CASE
|
||||
* **类型/类**：PascalCase
|
||||
* **文件/目录**：kebab-case（`.component.tsx`、`.service.ts`、`.entity.ts`）
|
||||
* **事件处理器**：`handleClick`（处理函数不要使用 `onClick` 作为名称）
|
||||
* **组件 props**：以组件名作为前缀（`ButtonProps`）。
|
||||
* **样式化组件**：以 `Styled` 作为前缀（`StyledTitle`）。
|
||||
|
||||
## 样式
|
||||
|
||||
Use [Linaria](https://github.com/callstack/linaria) styled components. Use theme values — avoid hardcoded `px`, `rem`, or colors.
|
||||
使用 [Linaria](https://github.com/callstack/linaria) 的样式化组件。 使用主题值 — 避免硬编码 `px`、`rem` 或颜色。
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -142,7 +142,7 @@ const StyledButton = styled.button`
|
||||
|
||||
## 导入
|
||||
|
||||
Use aliases instead of relative paths:
|
||||
使用别名而不是相对路径：
|
||||
|
||||
```tsx
|
||||
// ❌ Bad
|
||||
@@ -153,7 +153,7 @@ import { Foo } from '~/testing/decorators/Foo';
|
||||
import { Bar } from '@/modules/bar/components/Bar';
|
||||
```
|
||||
|
||||
## Folder Structure
|
||||
## 文件夹架构
|
||||
|
||||
```
|
||||
front
|
||||
@@ -171,6 +171,6 @@ front
|
||||
└── ui/ # Reusable UI components (display, input, feedback, ...)
|
||||
```
|
||||
|
||||
* Modules can import from other modules, but `ui/` should stay dependency-free
|
||||
* Use `internal/` subfolders for module-private code
|
||||
* Components under 300 lines, services under 500 lines
|
||||
* 模块可以相互导入，但 `ui/` 应保持无依赖
|
||||
* 将模块私有代码放在 `internal/` 子文件夹中
|
||||
* 组件不超过 300 行，服务不超过 500 行。
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
---
|
||||
title: 导航
|
||||
description: Customize the left sidebar to match how your team works.
|
||||
description: 自定义左侧边栏，使其符合您团队的工作方式。
|
||||
---
|
||||
|
||||
The left sidebar is your primary way to move around Twenty. It's fully customizable — you can reorganize it to match your workflow without touching any settings page.
|
||||
左侧边栏是您在 Twenty 中进行导航的主要方式。 它完全可自定义——无需进入任何设置页面，您就可以重新组织它以匹配您的工作流。
|
||||
|
||||
## Reordering items
|
||||
## 重新排序项目
|
||||
|
||||
Drag and drop any item in the sidebar to change its position. The order is saved per user, so each team member can arrange their own sidebar.
|
||||
在侧边栏中拖放任意项目以更改其位置。 顺序会按用户单独保存，因此每位团队成员都可以自行安排各自的侧边栏。
|
||||
|
||||
## 文件夹
|
||||
|
||||
Group related items into folders. For example, you might create a "Sales" folder containing your pipeline views, a "Support" folder for tickets, or an "Operations" folder for internal objects.
|
||||
将相关项目分组到文件夹中。 例如，您可以创建“销售”文件夹来包含您的管道视图，创建“支持”文件夹用于工单，或创建“运营”文件夹用于内部对象。
|
||||
|
||||
To create a folder, right-click in the sidebar or use the `+` button.
|
||||
要创建文件夹，请在侧边栏中右键单击，或使用`+`按钮。
|
||||
|
||||
## Hiding objects
|
||||
## 隐藏对象
|
||||
|
||||
Objects you don't use can be hidden from the sidebar. They're not deleted — they're just out of the way. You can show them again anytime from Settings > Data Model.
|
||||
未使用的对象可以从侧边栏中隐藏。 它们不会被删除——只是被隐藏起来。 您可以随时在 设置 > 数据模型 中再次显示它们。
|
||||
|
||||
## 收藏夹
|
||||
|
||||
Pin views, records, or searches to the Favorites section at the top of the sidebar for one-click access. Favorites are personal — each user manages their own.
|
||||
将视图、记录或搜索固定到侧边栏顶部的“收藏”部分，以便一键访问。 收藏是个人的——每位用户自行管理各自的收藏。
|
||||
|
||||
## Custom links
|
||||
## 自定义链接
|
||||
|
||||
Add links to external tools directly in the sidebar. Useful for linking to your wiki, dashboards in other tools, or any URL your team uses regularly.
|
||||
在侧边栏中直接添加指向外部工具的链接。 适用于链接到您的 wiki、其他工具中的仪表板，或团队经常使用的任何 URL。
|
||||
|
||||
## Command menu
|
||||
## 命令菜单
|
||||
|
||||
Press `Cmd+K` (or `Ctrl+K`) to open the command menu — a quick-access search bar for jumping to any record, view, or action without navigating the sidebar.
|
||||
按下`Cmd+K`（或`Ctrl+K`）打开命令菜单——一个快速访问的搜索栏，无需通过侧边栏即可跳转到任何记录、视图或操作。
|
||||
|
||||
Reference in New Issue
Block a user