docs: 改造文档「插件 - 内置插件 - Fullscreen 全屏显示」

packages/site/common/api/plugins/fullscreen.md

@@ -0,0 +1,72 @@
+```js | ob { pin: false }
+createGraph(
+  {
+    data: { nodes: [{ id: 'node-1' }, { id: 'node-2' }], edges: [{ source: 'node-1', target: 'node-2' }] },
+    node: { style: { fill: '#7e3feb', width: 30, height: 30 } },
+    edge: { style: { stroke: '#8b9baf', strokeWidth: 2 } },
+    layout: { type: 'force', center: [300, 150] },
+    behaviors: ['drag-canvas', 'drag-node'],
+    plugins: [
+      {
+        type: 'fullscreen',
+        key: 'fullscreen',
+        enabled: false,
+      },
+      function () {
+        const graph = this;
+        return {
+          type: 'toolbar',
+          key: 'toolbar',
+          position: 'top-left',
+          onClick: (item) => {
+            const fullscreenPlugin = graph.getPluginInstance('fullscreen');
+            if (item === 'request-fullscreen') {
+              fullscreenPlugin.request();
+            }
+            if (item === 'exit-fullscreen') {
+              fullscreenPlugin.exit();
+            }
+          },
+          getItems: () => {
+            return [
+              { id: 'request-fullscreen', value: 'request-fullscreen' },
+              { id: 'exit-fullscreen', value: 'exit-fullscreen' },
+            ];
+          },
+        };
+      },
+    ],
+  },
+  { width: 600, height: 300 },
+  (gui, graph) => {
+    const KEY_OPTIONS = ['f11', 'ctrl+f', 'meta+f']; // 常见全屏快捷键
+    const options = {
+      type: 'fullscreen',
+      enabled: true,
+      triggerKey: 'f11', // 触发全屏的快捷键
+      closeOnEscape: true, // 按ESC键退出全屏
+    };
+
+    const optionFolder = gui.addFolder('Fullscreen Options');
+    optionFolder.add(options, 'type').disable(true); // 固定插件类型
+    optionFolder.add(options, 'enabled').name('启用全屏'); // 开关选项
+    optionFolder.add(options, 'triggerKey', KEY_OPTIONS).name('触发快捷键'); // 快捷键选择
+    optionFolder.add(options, 'closeOnEscape').name('ESC键退出'); // 退出全屏方式
+
+    optionFolder.onChange(({ property, value }) => {
+      // 更新插件配置
+      graph.updatePlugin({
+        key: 'fullscreen', // 对应插件的key
+        [property]: property === 'triggerKey' ? value : value, // 直接赋值对应属性
+      });
+
+      // 特殊处理：如果启用状态变化，直接触发全屏切换
+      if (property === 'enabled') {
+        value ? graph.plugins['fullscreen'].enter() : graph.plugins['fullscreen'].exit();
+      }
+
+      graph.render();
+    });
+  },
+);
+```

packages/site/docs/manual/plugin/build-in/Fullscreen.zh.md

@@ -2,65 +2,154 @@
 title: Fullscreen 全屏展示
 ---
 
-**参考示例**
-
-- [结合 Toolbar 插件实现全屏效果](/examples/plugin/fullscreen/#basic)
+## 概述
+
+全屏展示插件允许用户将图可视化内容扩展到整个屏幕，提供更广阔的视图和更好的沉浸式体验。
+
+## 使用场景
+
+全屏展示插件主要适用于以下场景：
+
+- 提供更广阔的视图，便于查看复杂图数据
+- 增强沉浸式体验，专注于图可视化内容
+- 在演示或报告中展示图数据
+
+## 基本用法
+
+```js
+const graph = new Graph({
+  plugins: [
+    {
+      type: 'fullscreen',
+      key: 'my-fullscreen', // 指定唯一标识符，便于后续动态更新
+      autoFit: true,
+      trigger: {
+        request: 'F', // 使用快捷键 F 进入全屏
+        exit: 'Esc', // 使用快捷键 Esc 退出全屏
+      },
+      onEnter: () => {
+        console.log('进入全屏模式');
+      },
+      onExit: () => {
+        console.log('退出全屏模式');
+      },
+    },
+  ],
+});
+```
 
 ## 配置项
 
-### <Badge type="success">Required</Badge> type
+| 属性    | 描述                                                 | 类型                                 | 默认值       | 必选 |
+| ------- | ---------------------------------------------------- | ------------------------------------ | ------------ | ---- |
+| type    | 插件类型                                             | string                               | `fullscreen` | ✓    |
+| key     | 插件唯一标识符，用于后续更新                         | string                               | -            |      |
+| autoFit | 是否自适应画布尺寸，全屏后画布尺寸会自动适应屏幕尺寸 | boolean                              | true         |      |
+| trigger | 触发全屏的方式                                       | { request?: string; exit?: string; } | -            |      |
+| onEnter | 进入全屏后的回调                                     | () => void                           | -            |      |
+| onExit  | 退出全屏后的回调                                     | () => void                           | -            |      |
 
-> _`fullscreen` \| string_
+### trigger
 
-此插件已内置，你可以通过 `type: 'fullscreen'` 来使用它。
+trigger 属性用于控制触发全屏的方式。它支持两种配置方式：
 
-### autoFit
+#### 快捷键配置
 
-> _boolean_ **Default:** `true`
+使用键盘快捷键来触发全屏和退出全屏。
 
-是否自适应画布尺寸，全屏后画布尺寸会自动适应屏幕尺寸
+```js
+const graph = new Graph({
+  plugins: [
+    {
+      type: 'fullscreen',
+      trigger: {
+        request: 'F', // 使用快捷键 F 进入全屏
+        exit: 'Esc', // 使用快捷键 Esc 退出全屏
+      },
+    },
+  ],
+});
+```
 
-### onEnter
+#### 自定义触发
 
-> _() => void_
+通过API方式调用 request 和 exit 方法来控制全屏。
 
-进入全屏后的回调
+```js
+const graph = new Graph({
+  plugins: [
+    {
+      type: 'fullscreen',
+      key: 'my-fullscreen',
+    },
+  ],
+});
 
-### onExit
+// 进入全屏
+graph.getPluginInstance('my-fullscreen').request();
 
-> _() => void_
+// 退出全屏
+graph.getPluginInstance('my-fullscreen').exit();
+```
 
-退出全屏后的回调
+### autoFit
 
-### trigger
+> _boolean_ **Default:** true
 
-> _{ request?: string[]; exit?: string[]; }_
+是否自适应画布尺寸，全屏后画布尺寸会自动适应屏幕尺寸。
 
-触发全屏的方式
+- 设置为 true 时，画布会自动调整大小以适应整个屏幕。
+- 设置为 false 时，画布大小保持不变。
 
-- `request` : 请求全屏
-- `exit` : 退出全屏
+```js
+const graph = new Graph({
+  plugins: [
+    {
+      type: 'fullscreen',
+      autoFit: true,
+    },
+  ],
+});
+```
 
-## API
+### onEnter
 
-### Fullscreen.destroy()
+> _() => void_
 
-```typescript
-destroy(): void;
+进入全屏后的回调函数。
+
+```js
+const graph = new Graph({
+  plugins: [
+    {
+      type: 'fullscreen',
+      onEnter: () => {
+        console.log('进入全屏模式');
+      },
+    },
+  ],
+});
 ```
 
-### Fullscreen.exit()
+### onExit
 
-退出全屏
+> _() => void_
 
-```typescript
-exit(): void;
+退出全屏后的回调函数。
+
+```js
+const graph = new Graph({
+  plugins: [
+    {
+      type: 'fullscreen',
+      onExit: () => {
+        console.log('退出全屏模式');
+      },
+    },
+  ],
+});
 ```
 
-### Fullscreen.request()
+## 实际案例
 
-请求全屏
-
-```typescript
-request(): void;
-```
+<Playground path="plugin/fullscreen/demo/basic.js" rid="fullscreen-basic-rid"></Playground>

packages/site/examples/plugin/fullscreen/demo/basic.js

@@ -1,9 +1,7 @@
 import { Graph } from '@antv/g6';
 
 const graph = new Graph({
-  data: {
-    nodes: [{ id: 'node1' }],
-  },
+  data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) },
   autoFit: 'center',
   background: '#fff',
   plugins: [