i18n(zh-cn): Update svelte.mdx

src/content/docs/zh-cn/guides/integrations-guide/svelte.mdx

@@ -6,59 +6,88 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int
 category: renderer
 i18nReady: true
 ---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import Since from '~/components/Since.astro';
 
 此 **[Astro 集成][astro-integration]** 为你的 [Svelte](https://svelte.dev/) 组件启用服务器端渲染和客户端注入。它支持 Svelte 3、Svelte 4 以及 Svelte 5 版本（实验性）。
 
 ## 安装
 
-有两种方式可以将集成添加到你的项目当中，先让我们从最方便的方式来入手！
-
-### `astro add` 命令
-
-Astro 包含来一个 CLI 工具来提供一等集成支持，`astro add` 这个命令将会：
-
-1. 安装所有必须的依赖和对等依赖（可选）
-2. 更新你的 `astro.config.*` 文件，以应用当前的集成（同样可选）
+Astro 包含了一个 `astro add` 命令，用于自动设置官方集成。如果你愿意，可以改为[手动安装集成](#手动安装)。
 
 安装 `@astrojs/svelte`，需要在你的项目工程中依次运行以下命令：
 
-```sh
-# 使用 NPM
-npx astro add svelte
-# 使用 Yarn
-yarn astro add svelte
-# 使用 PNPM
-pnpm astro add svelte
-```
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npx astro add svelte
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm astro add svelte
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn astro add svelte
+  ```
+  </Fragment>
+</PackageManagerTabs>
 
 如果你有任何问题，[欢迎随时在 GitHub 上开个 issue 来向我们报告](https://github.com/withastro/astro/issues) 然后尝试执行以下的手动安装步骤。
 
-### 手动安装依赖项
-
-首先像下面这样安装 `@astrojs/svelte` 集成：
-
-```sh
-npm install @astrojs/svelte
-```
-
-大多数包管理器将会安装关联的对等依赖，如果你在启动 Astro 的时候仍然遇到 "Cannot find package 'svelte'" 或者相似的警告，你将需要手动安装 Svelte：
-
-```sh
-npm install svelte
-```
-
-现在，使用 `integrations` 属性来应用你的集成到 `astro.config.*` 文件：
-
-```diff lang="js" "svelte()"
-  // astro.config.mjs
-  import { defineConfig } from 'astro/config';
-+ import svelte from '@astrojs/svelte';
-
-  export default defineConfig({
-    // ...
-    integrations: [svelte()],
-    //             ^^^^^^^^
-  });
+### 手动安装
+
+首先，安装 `@astrojs/svelte` 包:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install @astrojs/svelte
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add @astrojs/svelte
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add @astrojs/svelte
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+大多数包管理器也会安装相关的对等依赖项。如果在启动 Astro 时看到 "Cannot find package 'svelte'" (或类似的)警告，则需要安装 Svelte：
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install svelte
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add svelte
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add svelte
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+然后，使用 `integrations` 属性将集成应用到你的 `astro.config.*` 文件中：
+
+```js title="astro.config.mjs" ins={2} ins="svelte()"
+import { defineConfig } from 'astro/config';
+import svelte from '@astrojs/svelte';
+export default defineConfig({
+  // ...
+  integrations: [svelte()],
+});
 ```
 
 ## 入门
@@ -69,20 +98,6 @@ npm install svelte
 * 💧 客户端合成注水选项
 * 🤝 将框架混合和嵌套在一起的时机
 
-## 疑难解答
-
-如需帮助，请查看我们在 [Discord](https://astro.build/chat) 上的  `#support` 频道。我们友好的支持小队成员随时为你提供帮助！
-
-你也可以查看我们的 [Astro 集成文档][astro-integration] 以获取集成的更多信息。
-
-## 贡献
-
-该 Astro 包是由核心团队维护的，欢迎提交 issue 和 PR！
-
-[astro-integration]: /zh-cn/guides/integrations-guide/
-
-[astro-ui-frameworks]: /zh-cn/core-concepts/framework-components/#使用框架组件
-
 ## 选项
 
 
@@ -106,8 +121,7 @@ const defaultOptions = {
 
 你可以通过在 `astro.config.mjs` 或者 `svelte.config.js` 文件中传递这个选项配置给 `svelte` 集成，这两种方式都将覆盖默认的 `preprocess` 设置：
 
-```js
-// astro.config.mjs
+```js title="astro.config.mjs" "preprocess: []"
 import { defineConfig } from 'astro/config';
 import svelte from '@astrojs/svelte';
 
@@ -116,7 +130,7 @@ export default defineConfig({
 });
 ```
 
-```js
+```js title="svelte.config.js"
 // svelte.config.js
 export default {
   preprocess: [],
@@ -125,12 +139,11 @@ export default {
 
 ## TypeScript 智能提示
 
-**添加于：** `@astrojs/svelte@2.0.0`
+<Since v="2.0.0" pkg="@astrojs/svelte" />
 
 如果你的文件中使用了像 TypeScript 或 SCSS 预处理器，你可以创建一个 `svelte.config.js` 文件，确保 Svelte IDE 拓展能够正确解析 Svelte 文件。
 
-```js
-// svelte.config.js
+```js title="svelte.config.js"
 import { vitePreprocess } from '@astrojs/svelte';
 
 export default {
@@ -139,3 +152,7 @@ export default {
 ```
 
 当你运行 `astro add svelte` 指令的时候，将自动为你添加配置文件。
+
+[astro-integration]: /zh-cn/guides/integrations-guide/
+
+[astro-ui-frameworks]: /zh-cn/core-concepts/framework-components/#使用框架组件