@intlayer/docs 9.3.3 → 9.4.0

package/docs/zh/dictionary/plurial.md

@@ -35,10 +35,72 @@ author: aymericzip
 
 ## 何时使用 `plural` vs `enu`
 
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+## 设置复数内容
+
+要在 Intlayer 项目中设置复数内容，请创建一个使用 `plural` 辅助函数的内容模块。`other` 类别是必需的，并在语言区域未定义更具体类别时作为回退方案。
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      zh: plural({
+        other: "{{count}} 个职位",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "zh": {
+          "nodeType": "plural",
+          "plural": {
+            "other": "{{count}} 个职位"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> 支持的类别包括 `zero`、`one`、`two`、`few`、`many`、`other`。您只需要声明目标语言使用的类别, 当没有特定类别匹配时，Intlayer 会回退到 `other`。
+>
+> `{{count}}` 占位符会自动替换为您在运行时传入的计数。您也可以包含其他占位符（参见下面的[自定义占位符](#custom-placeholders)）。
+
+## 在 React Intlayer 中使用复数内容
+
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+要在 React 组件中使用复数内容，请通过 `useIntlayer` 钩子获取它，并传入计数进行调用。激活的语言区域和计数将结合在一起以匹配 CLDR 类别。
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -60,7 +122,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+要在 Next.js 客户端组件中使用复数内容，通过 `useIntlayer` hook 检索它，并使用计数调用它。以下是一个示例：
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -84,7 +146,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+要在 Vue 组件中使用复数内容，请通过 `useIntlayer` hook 检索它，并使用计数调用它。以下是一个示例：
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -105,7 +167,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+要在 Svelte 组件中使用复数内容，需要通过 `useIntlayer` hook 检索它，并使用计数调用它。通过 `$` 访问 store。以下是一个示例：
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -124,17 +186,22 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+要在 Preact 组件中使用复数内容，通过 `useIntlayer` hook 检索它，并使用计数调用它。以下是一个示例：
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
 
 const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
   const { totalOpenings } = useIntlayer("total_openings");
 
   return (
     <div>
+      {/* 英语中：                                     */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -146,7 +213,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+要在 SolidJS 组件中使用复数内容，请通过 `useIntlayer` hook 检索它，并使用计数调用它。以下是一个示例：
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -168,7 +235,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+要在 Angular 组件中使用复数内容，通过 `useIntlayer` hook 检索它，并使用计数调用它。以下是一个示例：
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -192,107 +259,6 @@ export class OpeningsComponent {
   </Tab>
   <Tab label="Vanilla JS" value="vanilla">
 
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## 设置复数内容
-
-要在 Intlayer 项目中设置复数内容，请创建一个使用 `plural` 辅助函数的内容模块。`other` 类别是必需的，并在语言区域未定义更具体类别时作为回退方案。
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      zh: plural({
-        other: "{{count}} 个职位",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "zh": {
-          "nodeType": "plural",
-          "plural": {
-            "other": "{{count}} 个职位"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> 支持的类别包括 `zero`、`one`、`two`、`few`、`many`、`other`。您只需要声明目标语言使用的类别, 当没有特定类别匹配时，Intlayer 会回退到 `other`。
->
-> `{{count}}` 占位符会自动替换为您在运行时传入的计数。您也可以包含其他占位符（参见下面的[自定义占位符](#custom-placeholders)）。
-
-## 在 React Intlayer 中使用复数内容
-
-要在 React 组件中使用复数内容，请通过 `useIntlayer` 钩子获取它，并传入计数进行调用。激活的语言区域和计数将结合在一起以匹配 CLDR 类别。
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* 英语中：                                     */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
 您可以通过两种等效的方式调用返回的函数：
 
 ```tsx
@@ -300,6 +266,9 @@ totalOpenings(21); // 简写：仅传入计数
 totalOpenings({ count: 21 }); // 显式形式
 ```
 
+  </Tab>
+</Tabs>
+
 ## 自定义占位符
 
 复数文本可以包含除 `{{count}}` 之外的占位符。请在对象形式中与 `count` 一起传入：

package/docs/zh/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ const content = useIntlayer("product", { variant: { id: "prod_abc" } });
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}

package/docs/zh/formatters.md

@@ -48,46 +48,16 @@ Intlayer 提供了一组基于原生 `Intl` API 构建的轻量级辅助工具
 
 ## 缓存的 Intl
 
-导出的 `Intl` 是对全局 `Intl` 的一个轻量级缓存包装器。它会缓存 `NumberFormat`、`DateTimeFormat`、`RelativeTimeFormat`、`ListFormat`、`DisplayNames`、`Collator` 和 `PluralRules` 的实例，从而避免重复构建相同的格式化器。
-
 由于格式化器的构建相对昂贵，这种缓存机制在不改变行为的情况下提升了性能。该包装器暴露了与原生 `Intl` 相同的 API，因此用法完全一致。
 
-- 缓存是按进程进行的，对调用者透明。
-
 > 如果环境中不支持 `Intl.DisplayNames`，则只会打印一次仅限开发者的警告（建议使用 polyfill）。
 
 示例：
 
-```ts
-import { Intl } from "intlayer";
-
-// 数字格式化
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// 语言、地区等的显示名称
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// 用于排序的比较器
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0（相等）
-
-// 复数规则
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## 区域设置工具
 
 ### `getLocaleLang(locale?)`
 
-从语言环境字符串中提取语言代码：
-
 ```ts
 import { getLocaleLang } from "intlayer";
 
@@ -96,28 +66,15 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: 要提取语言代码的语言环境（默认为当前语言环境）
-
 ### `getLocaleFromPath(inputUrl)`
 
 从 URL 或路径名中提取语言环境段：
 
-```ts
-import { getLocaleFromPath } from "intlayer";
-
-getLocaleFromPath("/en/dashboard"); // "en"
-getLocaleFromPath("/fr/dashboard"); // "fr"
-getLocaleFromPath("/dashboard"); // "en"（默认语言环境）
-getLocaleFromPath("https://example.com/es/about"); // "es"
-```
-
 - **inputUrl**：要处理的完整 URL 字符串或路径名
 - **returns**：检测到的语言环境，如果未找到语言环境则返回默认语言环境
 
 ### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
 
-为当前语言生成本地化 URL：
-
 ```ts
 import { getLocalizedUrl } from "intlayer";
 
@@ -126,12 +83,6 @@ getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
 getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
 ```
 
-- **url**：要本地化的原始 URL
-- **currentLocale**：当前语言
-- **locales**：可选的支持语言数组（默认为配置的语言）
-- **defaultLocale**：可选的默认语言环境（默认为配置的默认语言环境）
-- **prefixDefault**：是否为默认语言环境添加前缀（默认为配置值）
-
 ### `getHTMLTextDir(locale?)`
 
 返回指定语言环境的文本方向：
@@ -144,15 +95,10 @@ getHTMLTextDir("ar"); // "rtl"
 getHTMLTextDir("he"); // "rtl"
 ```
 
-- **locale**：要获取文本方向的语言环境（默认为当前语言环境）
-- **returns**：返回 `"ltr"`、`"rtl"` 或 `"auto"`
-
 ## 内容处理工具
 
 ### `getContent(node, nodeProps, locale?)`
 
-使用所有可用插件（翻译、枚举、插入等）转换内容节点：
-
 ```ts
 import { getContent } from "intlayer";
 
@@ -163,36 +109,16 @@ const content = getContent(
 );
 ```
 
-- **node**：要转换的内容节点
-- **nodeProps**：转换上下文的属性
-- **locale**：可选的语言环境（默认为配置的默认语言环境）
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 从语言内容对象中提取特定语言环境的内容：
 
-```ts
-import { getTranslation } from "intlayer";
-
-const content = getTranslation(
-  {
-    en: "Hello",
-    fr: "Bonjour",
-    de: "Hallo",
-  },
-  "fr",
-  true
-); // "Bonjour"
-```
-
 - **languageContent**：映射语言环境到内容的对象
 - **locale**：目标语言环境（默认为配置的默认语言环境）
 - **fallback**：是否回退到默认语言环境（默认为 true）
 
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
-通过键检索并转换字典中的内容：
-
 ```ts
 import { getIntlayer } from "intlayer";
 
@@ -200,10 +126,6 @@ const content = getIntlayer("common", "fr");
 const nestedContent = getIntlayer("common", "fr", customPlugins);
 ```
 
-- **dictionaryKey**：要检索的字典键
-- **locale**：可选的语言环境（默认为配置的默认语言环境）
-- **plugins**：可选的自定义转换插件数组
-
 ### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
 
 异步从远程字典中检索内容：
@@ -214,25 +136,12 @@ import { getIntlayerAsync } from "intlayer";
 const content = await getIntlayerAsync("common", "fr");
 ```
 
-- **dictionaryKey**：要检索的字典键
-- **locale**：可选的语言环境（默认为配置的默认语言环境）
-- **plugins**：可选的自定义转换插件数组
-
 ## 格式化工具
 
 以下所有辅助函数均从 `intlayer` 导出。
 
 ### `percentage(value, options?)`
 
-将数字格式化为百分比字符串。
-
-行为：大于 1 的值被解释为完整的百分比并进行归一化（例如，`25` → `25%`，`0.25` → `25%`）。
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
-示例：
-
 ```ts
 import { percentage } from "intlayer";
 
@@ -430,12 +339,6 @@ pluralRules.select(11); // "many"
 
 使用 `Intl.DateTimeFormat` 格式化日期/时间值。
 
-- **date**: `Date | string | number`
-- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` 或者以下预设之一：
-  - 预设值: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
-示例：
-
 ```ts
 import { date } from "intlayer";
 
@@ -447,13 +350,6 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
 
 使用 `Intl.NumberFormat` 的 `style: 'unit'` 将数值格式化为本地化的单位字符串。
 
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - 常用字段：`unit`（例如 `"kilometer"`，`"byte"`），`unitDisplay`（`"short" | "narrow" | "long"`）
-  - 默认值：`unit: 'day'`，`unitDisplay: 'short'`，`useGrouping: false`
-
-示例：
-
 ```ts
 import { units } from "intlayer";
 
@@ -463,11 +359,6 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B"（依赖于区
 
 ### `compact(value, options?)`
 
-使用紧凑表示法格式化数字（例如，`1.2K`，`1M`）。
-
-- **value**：`number | string`
-- **options**：`Intl.NumberFormatOptions & { locale?: LocalesValues }`（内部使用 `notation: 'compact'`）
-
 示例：
 
 ```ts
@@ -481,13 +372,6 @@ compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 
 使用 `Intl.ListFormat` 将值数组格式化为本地化的列表字符串。
 
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - 常用字段：`type`（`"conjunction" | "disjunction" | "unit"`），`style`（`"long" | "short" | "narrow"`）
-  - 默认值：`type: 'conjunction'`，`style: 'long'`
-
-示例：
-
 ```ts
 import { list } from "intlayer";
 
@@ -573,34 +457,6 @@ const MyComponent = () => {
 };
 ```
 
-服务器组件（或 React 服务器运行时）：
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/server/format";
-// 或在 Next.js 应用中
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/server/format";
-```
-
-> 这些钩子将会从 `IntlayerProvider` 或 `IntlayerServerProvider` 中获取语言环境
-
 ### `getTranslation(languageContent, locale?, fallback?)`
 
 为特定语言环境提取内容：
@@ -632,8 +488,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> 这些组合式函数将会使用注入的 `IntlayerProvider` 中的语言环境
-
 ## 注意事项
 
 - 所有辅助函数接受 `string` 输入；它们在内部被强制转换为数字或日期。

package/docs/zh/how_works_intlayer.md

@@ -104,11 +104,16 @@ Intlayer 还提供了一个可视化编辑器，允许您以可视化的方式
   当您使用 `useIntlayer` 调用内容且编辑器已启用时，它会自动使用名为 `IntlayerNode` 的 Proxy 对象包装您的字符串。该节点使用 `window.postMessage` 与包含可视化编辑器界面的嵌套 iframe 通信。  
   在编辑器端，编辑器监听这些消息并模拟与您的内容的真实交互，允许您直接在应用程序的上下文中编辑文本。
 
+当你使用 `useIntlayer` 调用内容且编辑器已启用时，它会自动用一个名为 `IntlayerNode` 的 Proxy 对象包装你的字符串。这个节点使用 `window.postMessage` 与包含可视化编辑器界面的 iframe 进行通信。
+在编辑器端，编辑器监听这些消息并模拟与你的内容的真实交互，允许你在应用程序的上下文中直接编辑文本。
+
 ## 应用构建优化
 
 为了优化应用的Bundle 大小，Intlayer 提供了两个插件来优化应用的构建：`@intlayer/babel` 和 `@intlayer/swc` 插件。
 Babel 和 SWC 插件通过分析应用程序的抽象语法树（AST）来替换 Intlayer 函数的调用为优化后的代码。此过程确保只导入实际使用的字典，优化分块，从而减小生产环境中的最终包体积。
 
+Babel 和 SWC 插件通过分析你的应用程序的抽象语法树 (AST) 来工作，用优化的代码替换 Intlayer 函数的调用。这个过程通过确保只导入实际使用的字典，优化分块并减少 bundle 大小，使你的最终 bundle 在生产环境中更轻。
+
 在开发模式下，Intlayer 使用集中式静态导入字典以简化开发体验。
 
 通过在[配置](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)中激活选项 `importMode = "dynamic"`，Intlayer 将使用动态导入来加载字典。此选项默认禁用，以避免在渲染应用时进行异步处理。

package/docs/zh/interest_of_intlayer.md

@@ -38,10 +38,16 @@ author: aymericzip
 
 与 `next-intl` 或 `i18next` 等主要解决方案相比，Intlayer 是一个自带集成优化的解决方案，例如：
 
+<AccordionGroup>
+
 **打包体积 (Bundle size)**
 
 无需在页面中加载庞大的 JSON 文件，只需加载必要的特定内容。Intlayer 可以帮助你**将打包体积和页面大小减少多达 50%**。
 
+</Accordion>
+
+<Accordion header="可维护性">
+
 **可维护性 (Maintainability)**
 
 对应用程序的内容进行组件级的范围限制，**大大简化了大型应用程序的维护工作**。你可以复制或删除单个功能文件夹，而无需承担审查整个内容代码库的精神负担。此外，Intlayer 是**完全类型化**的，以确保你内容的准确性。
@@ -50,14 +56,22 @@ author: aymericzip
 
 将内容与组件共同放置（Co-location）**减少了大型语言模型（LLMs）所需的上下文**。Intlayer 还提供了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/mcp_server.md)** 以及 **[Agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/agent_skills.md)**，使 AI 智能体的开发体验（DX）更加流畅。
 
+</Accordion>
+
 **功能丰富 (Feature)**
 
 Intlayer 提供了其他 i18n 解决方案所没有的一系列附加功能，例如 [Markdown 支持](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/markdown.md)、[外部内容获取](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/function_fetching.md)、[文件内容加载](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/file.md)、[实时内容更新](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/live.md)、[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)等。
 
+</Accordion>
+
 **自动化 (Automation)**
 
 使用自动化在你的 CI/CD 流程中翻译，可以使用你选择的任何 LLM，成本完全取决于你的 AI 提供商。Intlayer 还提供了一个**编译器**来自动提取内容，以及一个 [网页平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md) 来帮助你**在后台进行翻译工作**。
 
+</Accordion>
+
+<Accordion header="性能">
+
 **性能表现 (Performance)**
 
 将庞大的 JSON 文件连接到组件上可能会导致性能和响应性问题。Intlayer 在构建时优化了你的内容加载方式。
@@ -66,10 +80,15 @@ Intlayer 提供了其他 i18n 解决方案所没有的一系列附加功能，
 
 不仅仅是一个 i18n 解决方案，Intlayer 还提供了一个**自主托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)**和一个**[功能完备的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)**，帮助你**实时**管理多语言内容，使与翻译人员、文案人员和其他团队成员的协作变得无缝衔接。内容可以存储在本地和/或远程。
 
+</Accordion>
+
 **跨框架设计 (Cross framework design)**
 
 如果你在应用程序的不同部分使用不同的框架（例如 React、React-native、Vue、Angular、Svelte 等），Intlayer 提供了一种**在所有主流前端框架中使用通用语法和实现**的方法。你还可以跨设计系统、应用、后端等共享你的内容声明。
 
+</Accordion>
+</AccordionGroup>
+
 ## 为什么要创建 Intlayer？
 
 创建 Intlayer 是为了解决一个普遍影响所有常见 i18n 库（如 `next-intl`、`react-i18next`、`react-intl`、`next-i18next`、`react-intl` 和 `vue-i18n`）的痛点。

package/docs/zh/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+使用 `--with` 标志，您可以与另一个命令并行启动编辑器：
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## 配置
 
 在您的 Intlayer 配置文件中，您可以自定义编辑器设置：
@@ -146,6 +156,8 @@ export default config;
 
    > **请注意，您应该并行运行您的应用程序。** 应用程序 URL 应与您在编辑器配置中设置的 URL (`applicationURL`) 匹配。
 
+> **注意该命令由 `intlayer` 包重新导出。你可以改用 `npx intlayer editor start`。**
+
 2. 然后，打开提供的 URL。默认值为 `http://localhost:8000`。
 
    您可以通过将光标悬停在内容上查看每个由 Intlayer 索引的字段。