docs: improve docs (#102)

Author: pengzhanbo

docs/en/examples/websocket.md

@@ -4,7 +4,7 @@
 
 <<< @/../example/mock/ws.mock.ts
 
-## Simulated Real-time Push
+## Real-time Push
 
 ::: code-group
 
@@ -32,7 +32,7 @@ export default defineMock({
 
 :::
 
-## Simulated Chat Room
+## Chat Room
 
 ::: code-group
 

docs/en/guide/define-mock.md

@@ -4,7 +4,9 @@ Mock configuration type helper function
 
 ## Usage
 
-```ts
+::: code-group
+
+```ts [*.mock.ts]
 import { defineMock } from 'vite-plugin-mock-dev-server'
 
 export default defineMock({
@@ -13,6 +15,8 @@ export default defineMock({
 })
 ```
 
+:::
+
 Pass in an array:
 
 ```ts

docs/en/guide/introduce.md

@@ -6,9 +6,11 @@ It uses the built-in `http` and `http-proxy` services of Vite to intercept the p
 
 You can use any third-party module in the mock configuration file with `node`. This means that you can use libraries like `mockjs` / `faker-js` to help generate mock data.
 
-The plugin supports responding with multiple data types including `text` / `json` / `Buffer` / `ReadStream`, and also supports setting headers and cookies.
+The plugin supports responding to various data types including `text/json/Buffer/ReadStream`, and also supports setting headers, cookies, etc.
 
-The plugin also supports simulating `WebSocket`, making it easy to debug `WebSocket` services in local development environment.
+The plugin supports simulating `WebSocket`, making it easy to debug `WebSocket` services in a local development environment.
+
+The plugin also supports simulating `Server-Sent Events`, making it easy to debug `EventSource` in a local development environment.
 
 ## Features
 
@@ -29,5 +31,5 @@ The plugin also supports simulating `WebSocket`, making it easy to debug `WebSoc
 - 🌈 Support `vite preview` mode.
 - 📤 Support `multipart` content-type, mock upload file.
 - 📥 Support mock download file.
-- ⚜️ Support `WebSocket Mock`
+- ⚜️ Support `WebSocket Mock`、`Server-Sent Events`
 - 🗂 Support building small independent deployable mock services.

docs/en/guide/mock-config.md

@@ -2,7 +2,9 @@
 
 `type: MockOptionsItem | MockOptionsItem[]`
 
-```ts
+::: code-group
+
+```ts [*.mock.ts]
 import { defineMock } from 'vite-plugin-mock-dev-server'
 
 export default defineMock({
@@ -11,6 +13,8 @@ export default defineMock({
 })
 ```
 
+:::
+
 **Type Definition:**
 
 ```ts
@@ -124,6 +128,7 @@ The actual `content-type` is determined internally by the plugin using `mime-typ
 - **Default**：
 
   The default value is determined based on the value of [type](#type):
+
   | Type     | Default                                                  |
   | -------- | -------------------------------------------------------- |
   | `text`   | `{ 'Content-Type': 'text/plain' }`                       |

docs/en/guide/mock-plugin.md

@@ -4,7 +4,9 @@ Vite Plugin Function
 
 ## Usage
 
-``` ts
+::: code-group
+
+``` ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 
@@ -15,6 +17,8 @@ export default defineConfig({
 })
 ```
 
+:::
+
 ## `options`
 
 `type: MockServerPluginOptions`

docs/guide/define-mock.md

@@ -4,7 +4,9 @@ mock配置 类型帮助函数
 
 ## 使用
 
-```ts
+::: code-group
+
+```ts [*.mock.ts]
 import { defineMock } from 'vite-plugin-mock-dev-server'
 
 export default defineMock({
@@ -13,6 +15,8 @@ export default defineMock({
 })
 ```
 
+:::
+
 传入数组：
 
 ```ts

docs/guide/introduce.md

@@ -6,9 +6,11 @@
 
 你可以在 mock配置文件中使用`node` 任意第三方模块。 这表示，你可以使用如 `mockjs` / `faker-js` 等库帮助生成 `mock data`。
 
-插件支持响应多种数据类型包括 `text/json/Buffer/ReadStream`等，还支持设置 headers、cookies。
+插件支持响应多种数据类型包括 `text/json/Buffer/ReadStream`等，还支持设置 headers、cookies 等。
 
-插件还支持模拟 `WebSocket`，可以轻松的实现在本地开发环境调试 `WebSocket` 服务。
+插件支持模拟 `WebSocket`，可以轻松的实现在本地开发环境调试 `WebSocket` 服务。
+
+插件还支持 模拟 `Server-Sent Events`，可以轻松的实现在本地开发环境调试 `EventSource` 。
 
 ## 特性
 
@@ -29,5 +31,5 @@
 - 🌈 支持 `vite preview` 模式
 - 📤 支持 multipart 类型，模拟文件上传
 - 📥 支持模拟文件下载
-- ⚜️ 支持模拟 `WebSocket`
+- ⚜️ 支持模拟 `WebSocket`、 `Server-Sent Events`
 - 🗂 支持构建可独立部署的小型mock服务

docs/guide/mock-config.md

@@ -2,7 +2,9 @@
 
 `type: MockOptionsItem | MockOptionsItem[]`
 
-```ts
+::: code-group
+
+```ts [*.mock.ts]
 import { defineMock } from 'vite-plugin-mock-dev-server'
 
 export default defineMock({
@@ -11,6 +13,8 @@ export default defineMock({
 })
 ```
 
+:::
+
 **类型定义:**
 
 ```ts
@@ -125,6 +129,7 @@ export default defineMock({
 - **默认值**：
 
   默认值根据 [type](#type) 的值确定：
+
   | type     | 默认值                                            |
   | -------- | ------------------------------------------------- |
   | `text`   | `{ 'Content-Type': 'text/plain' }`                |

docs/guide/mock-plugin.md

@@ -4,7 +4,9 @@ Vite Plugin Function
 
 ## 使用
 
-``` ts
+::: code-group
+
+``` ts [vite.config.ts]
 import { defineConfig } from 'vite'
 import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 
@@ -15,6 +17,8 @@ export default defineConfig({
 })
 ```
 
+:::
+
 ## `options`
 
 `type: MockServerPluginOptions`