i18n - docs translations (#22912)
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
a28c3a905a
commit
e31e6c7794
@@ -120,7 +120,7 @@ export default defineFrontComponent({
|
||||
* **`Command`** — يشغّل رد نداء غير متزامن عبر الخاصية `execute`.
|
||||
* **`CommandLink`** — ينتقل إلى مسار في التطبيق. الخصائص: `to`، `params`، `queryParams`، `options`.
|
||||
* **`CommandModal`** — يفتح نافذة تأكيد منبثقة. إذا أكّد المستخدم، ينفّذ رد النداء `execute`. الخصائص: `title`، `subtitle`، `execute`، `confirmButtonText`، `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — يفتح صفحة في اللوحة الجانبية. الـ props تعتمد على `page` — على سبيل المثال، `ViewRecord` يأخذ `recordId` + `objectNameSingular`، بينما الصفحات الأخرى تأخذ `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — يفتح صفحة في اللوحة الجانبية. الـ props تعتمد على `page` — على سبيل المثال، `ViewRecord` يأخذ `recordId` + `objectNameSingular` (بالإضافة إلى معرّف `tab` اختياري لفتح السجل في تبويب معيّن)، بينما الصفحات الأخرى تأخذ `pageTitle` + `pageIcon`.
|
||||
|
||||
فيما يلي مثال كامل لمكوّن واجهة أمامية عديم الرأس يستخدم `Command` لتشغيل إجراء من قائمة الأوامر:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
ومثال يستخدم `CommandOpenSidePanelPage` لفتح السجل الحالي في اللوحة الجانبية على تبويب معيّن. `tab` هو معرّف تبويب تخطيط الصفحة (تستخدم التخطيطات الافتراضية معرّفات مثل `company-tab-emails` أو `company-tab-timeline`؛ وتستخدم التخطيطات المخصّصة معرّف التبويب نفسه). إذا لم يكن المعرّف موجودًا في تخطيط السجل، فسيتم فتح التبويب الافتراضي بدلًا منه:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## استدعاء دالة منطقية
|
||||
|
||||
تعمل مكونات الواجهة الأمامية على جانب المتصفح داخل Web Worker مُعزَل داخل iframe ذو origin غير شفاف، بينما تعمل [الدوال المنطقية](/l/ar/developers/extend/apps/logic/logic-functions) على جانب الخادم. لا توجد استدعاءات مباشرة ضمن العملية بين الاثنين — بدلاً من ذلك، يصل مكون الواجهة الأمامية إلى الدالة المنطقية عبر HTTP.
|
||||
|
||||
@@ -120,7 +120,7 @@ Importujte je z `twenty-sdk/front-component`:
|
||||
* **`Command`** — Spustí asynchronní callback přes prop `execute`.
|
||||
* **`CommandLink`** — Naviguje na cestu v aplikaci. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Otevře potvrzovací modální okno. Pokud uživatel potvrdí, provede callback `execute`. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Otevře stránku postranního panelu. Props závisí na `page` — např. `ViewRecord` bere `recordId` + `objectNameSingular`, ostatní stránky berou `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — Otevře stránku postranního panelu. Props závisí na `page` — např. `ViewRecord` bere `recordId` + `objectNameSingular` (plus volitelné id `tab` pro otevření záznamu na konkrétní záložce), ostatní stránky berou `pageTitle` + `pageIcon`.
|
||||
|
||||
Zde je kompletní příklad headless front-endové komponenty, která pomocí `Command` spouští akci z menu příkazů:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
A zde je příklad použití `CommandOpenSidePanelPage` k otevření aktuálního záznamu v postranním panelu na konkrétní záložce. `tab` je ID záložky rozvržení stránky (výchozí rozvržení používají ID jako `company-tab-emails` nebo `company-tab-timeline`; vlastní rozvržení používají vlastní ID záložky). Pokud ID v rozvržení záznamu neexistuje, místo toho se otevře výchozí záložka:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Volání logické funkce
|
||||
|
||||
Front komponenty běží v prohlížeči v sandboxovaném Web Workeru uvnitř iframe s nejasným původem (opaque-origin), zatímco [logické funkce](/l/cs/developers/extend/apps/logic/logic-functions) běží na serveru. Neexistuje mezi nimi žádné přímé volání v rámci jednoho procesu — místo toho se front komponenta k logické funkci připojuje přes HTTP.
|
||||
|
||||
@@ -120,7 +120,7 @@ Importieren Sie sie aus `twenty-sdk/front-component`:
|
||||
* **`Command`** — Führt einen asynchronen Callback über das Prop `execute` aus.
|
||||
* **`CommandLink`** — Navigiert zu einem App-Pfad. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Öffnet einen Bestätigungsdialog. Bestätigt der Benutzer, wird der Callback `execute` ausgeführt. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Öffnet eine Seite im Seitenpanel. Props hängen von `page` ab — z. B. verwendet `ViewRecord` `recordId` + `objectNameSingular`, andere Seiten verwenden `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — Öffnet eine Seite im Seitenpanel. Props hängen von `page` ab — z. B. verwendet `ViewRecord` `recordId` + `objectNameSingular` (plus eine optionale `tab`-ID, um den Datensatz auf einem bestimmten Tab zu öffnen), andere Seiten verwenden `pageTitle` + `pageIcon`.
|
||||
|
||||
Hier ist ein vollständiges Beispiel einer Headless-Front-Komponente, die `Command` verwendet, um eine Aktion aus dem Befehlsmenü auszuführen:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
Und ein Beispiel mit `CommandOpenSidePanelPage`, um den aktuellen Datensatz im Seitenbereich auf einem bestimmten Tab zu öffnen. `tab` ist eine Seitenlayout-Tab-ID (Standardlayouts verwenden IDs wie `company-tab-emails` oder `company-tab-timeline`; benutzerdefinierte Layouts verwenden die eigene ID des Tabs). Wenn die ID im Layout des Datensatzes nicht vorhanden ist, wird stattdessen der Standard-Tab geöffnet:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Aufrufen einer Logikfunktion
|
||||
|
||||
Front-Komponenten laufen browserseitig in einem Web-Worker, der in einem sandboxed iframe mit opaker Origin ausgeführt wird, während [Logikfunktionen](/l/de/developers/extend/apps/logic/logic-functions) serverseitig laufen. Es gibt keinen direkten In-Process-Aufruf zwischen beiden – stattdessen ruft eine Front-Komponente eine Logikfunktion über HTTP auf.
|
||||
|
||||
@@ -120,7 +120,7 @@ Impórtalos desde `twenty-sdk/front-component`:
|
||||
* **`Command`** — Ejecuta un callback asíncrono mediante la prop `execute`.
|
||||
* **`CommandLink`** — Navega a una ruta de la aplicación. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Abre un modal de confirmación. Si el usuario confirma, ejecuta el callback `execute`. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Abre una página del panel lateral. Las props dependen de `page` — por ejemplo, `ViewRecord` recibe `recordId` + `objectNameSingular`, otras páginas reciben `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — Abre una página del panel lateral. Las props dependen de `page` — por ejemplo, `ViewRecord` recibe `recordId` + `objectNameSingular` (además de un id opcional de `tab` para abrir el registro en una pestaña específica), otras páginas reciben `pageTitle` + `pageIcon`.
|
||||
|
||||
Aquí tienes un ejemplo completo de un componente de front headless que usa `Command` para ejecutar una acción desde el menú de comandos:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
Y un ejemplo que usa `CommandOpenSidePanelPage` para abrir el registro actual en el panel lateral en una pestaña específica. `tab` es un id de pestaña de diseño de página (los diseños predeterminados usan ids como `company-tab-emails` o `company-tab-timeline`; los diseños personalizados usan el id propio de la pestaña). Si el id no existe en el diseño del registro, en su lugar se abre la pestaña predeterminada:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Llamar a una función de lógica
|
||||
|
||||
Los componentes de front se ejecutan en el navegador dentro de un Web Worker aislado (sandboxed) dentro de un iframe de origen opaco, mientras que las [funciones de lógica](/l/es/developers/extend/apps/logic/logic-functions) se ejecutan en el servidor. No hay una llamada directa en el mismo proceso entre ambos; en su lugar, un componente de front accede a una función de lógica a través de HTTP.
|
||||
|
||||
@@ -120,7 +120,7 @@ Importez-les depuis `twenty-sdk/front-component` :
|
||||
* **`Command`** — Exécute un callback asynchrone via la prop `execute`.
|
||||
* **`CommandLink`** — Navigue vers un chemin d'application. Props : `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Ouvre une fenêtre modale de confirmation. Si l'utilisateur confirme, exécute le callback `execute`. Props : `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Ouvre une page du panneau latéral. Les propriétés dépendent de `page` — par exemple, `ViewRecord` accepte `recordId` + `objectNameSingular`, les autres pages acceptent `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — Ouvre une page du panneau latéral. Les propriétés dépendent de `page` — par exemple, `ViewRecord` accepte `recordId` + `objectNameSingular` (plus un identifiant `tab` facultatif pour ouvrir l’enregistrement dans un onglet spécifique), les autres pages acceptent `pageTitle` + `pageIcon`.
|
||||
|
||||
Voici un exemple complet d'un composant frontal headless utilisant `Command` pour exécuter une action depuis le menu de commande :
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
Et un exemple utilisant `CommandOpenSidePanelPage` pour ouvrir l’enregistrement actuel dans le panneau latéral sur un onglet spécifique. `tab` est un identifiant d’onglet de mise en page (les mises en page par défaut utilisent des identifiants comme `company-tab-emails` ou `company-tab-timeline` ; les mises en page personnalisées utilisent l’identifiant propre de l’onglet). Si l’identifiant n’existe pas dans la mise en page de l’enregistrement, l’onglet par défaut s’ouvre à la place :
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Appel d’une fonction logique
|
||||
|
||||
Les composants front s'exécutent côté navigateur dans un Web Worker isolé (sandboxé) à l'intérieur d'un iframe à origine opaque, tandis que les [fonctions logiques](/l/fr/developers/extend/apps/logic/logic-functions) s'exécutent côté serveur. Il n’y a aucun appel intra-processus direct entre les deux — à la place, un composant front appelle une fonction logique via HTTP.
|
||||
|
||||
@@ -120,7 +120,7 @@ Importali da `twenty-sdk/front-component`:
|
||||
* **`Command`** — Esegue una callback asincrona tramite la prop `execute`.
|
||||
* **`CommandLink`** — Naviga verso un percorso dell'app. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Apre una finestra modale di conferma. Se l'utente conferma, esegue la callback `execute`. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Apre una pagina del pannello laterale. Le props dipendono da `page` — ad esempio `ViewRecord` accetta `recordId` + `objectNameSingular`, altre pagine accettano `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — Apre una pagina del pannello laterale. Le props dipendono da `page` — ad esempio `ViewRecord` accetta `recordId` + `objectNameSingular` (più un id `tab` opzionale per aprire il record in una scheda specifica), altre pagine accettano `pageTitle` + `pageIcon`.
|
||||
|
||||
Ecco un esempio completo di componente front-end headless che usa `Command` per eseguire un'azione dal menu comandi:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
Ed ecco un esempio che usa `CommandOpenSidePanelPage` per aprire il record corrente nel pannello laterale in una scheda specifica. `tab` è un id di scheda di layout della pagina (i layout predefiniti usano id come `company-tab-emails` o `company-tab-timeline`; i layout personalizzati usano l'id della scheda stessa). Se l'id non esiste nel layout del record, viene invece aperta la scheda predefinita:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Chiamare una funzione logica
|
||||
|
||||
I componenti front vengono eseguiti lato browser in un Web Worker in sandbox all'interno di un iframe con origine opaca, mentre le [funzioni logiche](/l/it/developers/extend/apps/logic/logic-functions) vengono eseguite lato server. Non esiste una chiamata diretta in-process tra i due; invece, un front component chiama una funzione logica tramite HTTP.
|
||||
|
||||
@@ -120,7 +120,7 @@ export default defineFrontComponent({
|
||||
* **`Command`** — `execute` プロップ経由で非同期コールバックを実行します。
|
||||
* **`CommandLink`** — アプリのパスにナビゲートします。 Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — 確認モーダルを開きます。 ユーザーが確認すると、`execute` コールバックを実行します。 Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — サイドパネルページを開きます。 Props は `page` に依存します — 例: `ViewRecord` は `recordId` と `objectNameSingular` を受け取り、他のページは `pageTitle` と `pageIcon` を受け取ります。
|
||||
* **`CommandOpenSidePanelPage`** — サイドパネルページを開きます。 Props は `page` に依存します。たとえば、`ViewRecord` は `recordId` と `objectNameSingular`（さらに任意で、特定のタブでレコードを開くための `tab` id）を受け取り、他のページは `pageTitle` と `pageIcon` を受け取ります。
|
||||
|
||||
`Command` を使用してコマンドメニューからアクションを実行するヘッドレスのフロントコンポーネントの完全な例です:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
そして、`CommandOpenSidePanelPage` を使用して、現在のレコードを特定のタブのサイドパネルで開く例です。 `tab` はページレイアウトのタブ id です（デフォルトのレイアウトでは `company-tab-emails` や `company-tab-timeline` のような id を使用し、カスタムレイアウトではタブ自身の id を使用します）。 その id がレコードのレイアウト内に存在しない場合は、代わりにデフォルトのタブが開きます。
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## ロジック関数の呼び出し
|
||||
|
||||
フロントコンポーネントは不透明なオリジンの iframe 内にサンドボックス化された Web Worker 内でブラウザーサイドで実行され、一方で[ロジック関数](/l/ja/developers/extend/apps/logic/logic-functions)はサーバーサイドで実行されます。 両者の間にプロセス内での直接呼び出しはありません。その代わり、フロントコンポーネントは HTTP 経由でロジック関数にアクセスします。
|
||||
|
||||
@@ -120,7 +120,7 @@ export default defineFrontComponent({
|
||||
* **`Command`** — `execute` prop을 통해 비동기 콜백을 실행합니다.
|
||||
* **`CommandLink`** — 앱 경로로 이동합니다. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — 확인 모달을 엽니다. 사용자가 확인하면 `execute` 콜백을 실행합니다. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — 사이드 패널 페이지를 엽니다. Props는 `page`에 따라 달라집니다. 예를 들어 `ViewRecord`는 `recordId` + `objectNameSingular`를 받고, 다른 페이지는 `pageTitle` + `pageIcon`을 받습니다.
|
||||
* **`CommandOpenSidePanelPage`** — 사이드 패널 페이지를 엽니다. Props는 `page`에 따라 달라집니다. 예를 들어 `ViewRecord`는 `recordId`와 `objectNameSingular`를 받고, 선택적으로 특정 탭에서 레코드를 열기 위한 `tab` id도 받을 수 있습니다. 다른 페이지는 `pageTitle`과 `pageIcon`을 받습니다.
|
||||
|
||||
`Command`를 사용해 명령 메뉴에서 동작을 실행하는 헤드리스 프런트 컴포넌트의 전체 예시는 다음과 같습니다:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
그리고 `CommandOpenSidePanelPage`를 사용하여 현재 레코드를 사이드 패널의 특정 탭에서 여는 예시는 다음과 같습니다. `tab`은 페이지 레이아웃 탭 id입니다(기본 레이아웃은 `company-tab-emails` 또는 `company-tab-timeline`과 같은 id를 사용하고, 사용자 지정 레이아웃은 탭 고유의 id를 사용합니다). 해당 id가 레코드의 레이아웃에 존재하지 않으면, 대신 기본 탭이 열립니다:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## 로직 함수 호출하기
|
||||
|
||||
Front 컴포넌트는 opaque-origin iframe 내부에 샌드박스된 Web Worker 안에서 브라우저 측에서 실행되고, [logic functions](/l/ko/developers/extend/apps/logic/logic-functions)는 서버 측에서 실행됩니다. 두 요소 사이에는 프로세스 내에서의 직접 호출이 없습니다. 대신, Front 컴포넌트는 HTTP를 통해 로직 함수에 접근합니다.
|
||||
|
||||
@@ -120,7 +120,7 @@ Importe-os de `twenty-sdk/front-component`:
|
||||
* **`Command`** — Executa um callback assíncrono via a prop `execute`.
|
||||
* **`CommandLink`** — Navega para um caminho do app. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Abre um modal de confirmação. Se o usuário confirmar, executa o callback `execute`. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Abre uma página do painel lateral. As props dependem de `page` — por exemplo, `ViewRecord` recebe `recordId` + `objectNameSingular`, outras páginas recebem `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — Abre uma página do painel lateral. As props dependem de `page` — por exemplo, `ViewRecord` recebe `recordId` + `objectNameSingular` (além de um id de `tab` opcional para abrir o registro em uma guia específica), outras páginas recebem `pageTitle` + `pageIcon`.
|
||||
|
||||
Aqui está um exemplo completo de um componente de front-end headless usando `Command` para executar uma ação a partir do menu de comandos:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
E um exemplo usando `CommandOpenSidePanelPage` para abrir o registro atual no painel lateral em uma guia específica. `tab` é um id de guia de layout de página (layouts padrão usam ids como `company-tab-emails` ou `company-tab-timeline`; layouts personalizados usam o próprio id da guia). Se o id não existir no layout do registro, a guia padrão será aberta em seu lugar:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Chamando uma função lógica
|
||||
|
||||
Os componentes de front são executados no navegador em um Web Worker em sandbox dentro de um iframe de origem opaca, enquanto as [funções lógicas](/l/pt/developers/extend/apps/logic/logic-functions) são executadas no servidor. Não há chamada direta no mesmo processo entre os dois — em vez disso, um componente de front acessa uma função lógica via HTTP.
|
||||
|
||||
@@ -120,7 +120,7 @@ Importați-le din `twenty-sdk/front-component`:
|
||||
* **`Command`** — Rulează un callback asincron prin prop-ul `execute`.
|
||||
* **`CommandLink`** — Navighează către o rută a aplicației. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Deschide un modal de confirmare. Dacă utilizatorul confirmă, execută callback-ul `execute`. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Deschide o pagină din panoul lateral. Props depind de `page` — de ex. `ViewRecord` primește `recordId` + `objectNameSingular`, alte pagini primesc `pageTitle` + `pageIcon`.
|
||||
* **`CommandOpenSidePanelPage`** — Deschide o pagină din panoul lateral. Props depind de `page` — de ex. `ViewRecord` primește `recordId` + `objectNameSingular` (plus un id `tab` opțional pentru a deschide înregistrarea într-un anumit tab), alte pagini primesc `pageTitle` + `pageIcon`.
|
||||
|
||||
Iată un exemplu complet de componentă front-end headless care folosește `Command` pentru a rula o acțiune din meniul de comenzi:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
Și un exemplu care folosește `CommandOpenSidePanelPage` pentru a deschide înregistrarea curentă în panoul lateral, pe un tab specific. `tab` este un id de tab al layout-ului paginii (layout-urile implicite folosesc id-uri precum `company-tab-emails` sau `company-tab-timeline`; layout-urile personalizate folosesc propriul id al tab-ului). Dacă id-ul nu există în layout-ul înregistrării, se deschide în schimb tab-ul implicit:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Apelarea unei funcții logice
|
||||
|
||||
Componentele de front rulează în browser, într-un Web Worker sandboxat în interiorul unui iframe cu origine opacă, în timp ce [funcțiile logice](/l/ro/developers/extend/apps/logic/logic-functions) rulează pe server. Nu există un apel direct în același proces între cele două — în schimb, o componentă de front apelează o funcție logică prin HTTP.
|
||||
|
||||
@@ -120,7 +120,7 @@ Bunları `twenty-sdk/front-component` içinden içe aktarın:
|
||||
* **`Command`** — `execute` prop'u aracılığıyla async bir geri çağrıyı çalıştırır.
|
||||
* **`CommandLink`** — Bir uygulama yoluna gider. Props: `to`, `params`, `queryParams`, `options`.
|
||||
* **`CommandModal`** — Bir onay modalı açar. Kullanıcı onaylarsa `execute` geri çağrısını yürütür. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
|
||||
* **`CommandOpenSidePanelPage`** — Bir yan panel sayfasını açar. Props, `page`'e bağlıdır — örneğin `ViewRecord`, `recordId` + `objectNameSingular` alır, diğer sayfalar `pageTitle` + `pageIcon` alır.
|
||||
* **`CommandOpenSidePanelPage`** — Bir yan panel sayfasını açar. Props, `page`'e bağlıdır — örneğin `ViewRecord`, `recordId` + `objectNameSingular` alır (ayrıca kaydı belirli bir sekmede açmak için isteğe bağlı bir `tab` kimliği alır), diğer sayfalar `pageTitle` + `pageIcon` alır.
|
||||
|
||||
`Command` kullanarak komut menüsünden bir eylem çalıştıran headless bir ön uç bileşenin tam örneği:
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
Ve geçerli kaydı belirli bir sekmede yan panelde açmak için `CommandOpenSidePanelPage` kullanan bir örnek. `tab`, bir sayfa düzeni sekme kimliğidir (varsayılan düzenler `company-tab-emails` veya `company-tab-timeline` gibi kimlikler kullanır; özel düzenler sekmenin kendi kimliğini kullanır). Kimlik kaydın düzeninde mevcut değilse, bunun yerine varsayılan sekme açılır:
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## Bir mantık işlevini çağırma
|
||||
|
||||
Ön bileşenler, tarayıcı tarafında, opak kaynaklı bir iframe içinde yer alan korumalı (sandbox) bir Web Worker içinde çalışırken, [mantık işlevleri](/l/tr/developers/extend/apps/logic/logic-functions) sunucu tarafında çalışır. İkisi arasında doğrudan, işlem içi bir çağrı yoktur — bunun yerine, bir ön bileşen bir mantık işlevine HTTP üzerinden erişir.
|
||||
|
||||
@@ -120,7 +120,7 @@ export default defineFrontComponent({
|
||||
* **`Command`** — 通过 `execute` 属性运行异步回调。
|
||||
* **`CommandLink`** — 导航到某个应用路径。 属性：`to`、`params`、`queryParams`、`options`。
|
||||
* **`CommandModal`** — 打开一个确认模态框。 如果用户确认，则执行 `execute` 回调。 属性：`title`、`subtitle`、`execute`、`confirmButtonText`、`confirmButtonAccent`。
|
||||
* **`CommandOpenSidePanelPage`** — 打开一个侧边栏页面。 Props 取决于 `page` —— 例如，`ViewRecord` 需要 `recordId` + `objectNameSingular`，其他页面需要 `pageTitle` + `pageIcon`。
|
||||
* **`CommandOpenSidePanelPage`** — 打开一个侧边栏页面。 Props 取决于 `page` —— 例如，`ViewRecord` 需要 `recordId` + `objectNameSingular`（以及一个可选的 `tab` id，用于在特定标签页中打开该记录），其他页面需要 `pageTitle` + `pageIcon`。
|
||||
|
||||
下面是一个完整示例：无头前端组件使用 `Command` 从命令菜单运行一个操作：
|
||||
|
||||
@@ -194,6 +194,44 @@ export default defineFrontComponent({
|
||||
});
|
||||
```
|
||||
|
||||
以及一个使用 `CommandOpenSidePanelPage` 的示例，用于在特定标签页的侧边栏中打开当前记录。 `tab` 是页面布局的标签页 id（默认布局使用类似 `company-tab-emails` 或 `company-tab-timeline` 这样的 id；自定义布局使用标签页自身的 id）。 如果该 id 在记录的布局中不存在，则会改为打开默认标签页：
|
||||
|
||||
```tsx src/front-components/open-company-emails.tsx
|
||||
import { defineFrontComponent } from 'twenty-sdk/define';
|
||||
import {
|
||||
CommandOpenSidePanelPage,
|
||||
SidePanelPages,
|
||||
useSelectedRecordIds,
|
||||
} from 'twenty-sdk/front-component';
|
||||
|
||||
const OpenCompanyEmails = () => {
|
||||
const selectedRecordIds = useSelectedRecordIds();
|
||||
const recordId = selectedRecordIds.length === 1 ? selectedRecordIds[0] : null;
|
||||
|
||||
if (!recordId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CommandOpenSidePanelPage
|
||||
page={SidePanelPages.ViewRecord}
|
||||
recordId={recordId}
|
||||
objectNameSingular="company"
|
||||
tab="company-tab-emails"
|
||||
resetNavigationStack={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineFrontComponent({
|
||||
universalIdentifier: 'b8c9d0e1-f2a3-4567-bcde-678901234567',
|
||||
name: 'open-company-emails',
|
||||
description: 'Opens the current company on its Emails tab',
|
||||
component: OpenCompanyEmails,
|
||||
isHeadless: true,
|
||||
});
|
||||
```
|
||||
|
||||
## 调用逻辑函数
|
||||
|
||||
前端组件在浏览器端的 Web Worker 中运行，该 Web Worker 被沙盒化在不透明来源的 iframe 中，而[逻辑函数](/l/zh/developers/extend/apps/logic/logic-functions)在服务器端运行。 二者之间没有直接的进程内调用——前端组件通过 HTTP 访问逻辑函数。
|
||||
|
||||
Reference in New Issue
Block a user