docs: add toggle formkit component (#552)

* docs: add toggle formkit component

* docs: add toggle component to form schema and update changelogs

- Introduced the `toggle` component for selecting images, colors, or text with options for single or multiple selections.
- Updated API changelogs for both plugin and theme to reflect the addition of the `toggle` component in version 2.22.8.

* Enhance image display in form schema docs

---------

Co-authored-by: Ryan Wang <i@ryanc.cc>

Author: LIlGG

docs/developer-guide/form-schema.md

@@ -792,6 +792,51 @@ UI 效果：
   offValue: "inactive"
 ```
 
+### toggle
+
+切换组件，用于对一组图片、颜色或文字等选择切换，支持单选与多选。它的功能与 `select` 组件类似，但相较于 `select` 组件，`toggle` 组件可以更直观的展示选项。
+
+参数：
+
+- `renderType`：当前组件的渲染类型，可选参数为 `image`、`color`、`text`，默认为 `text`。
+- `options`：一组同类型的数据源，数据类型为 `{ label?: string; value: string; render?: string }[]`，其中 `label` 为选项的文本，`value` 为选项的值。`render` 为选项的渲染展示内容，与 `renderType` 参数配合使用。
+  - 当 `renderType` 为 `image` 时，`render` 参数为图片的 URL。
+  - 当 `renderType` 为 `color` 时，`render` 参数为颜色的十六进制代码。例如 `#000000`。
+  - 当 `renderType` 为 `text` 时，`render` 参数为文字内容。
+- `multiple`：可选，是否支持多选，默认为 `false`。
+- `size`：可选，渲染内容的尺寸，`number` 类型，单位为 `px`。
+- `gap`：可选，渲染内容之间的间距，`number` 类型，单位为 `px`。
+- `value`: 可选初始值，数据类型为 `string | number | boolean | (string | number | boolean)[]`。
+
+#### 示例
+
+```yaml
+- $formkit: toggle
+  label: 选择图片
+  name: toggle
+  render-type: image
+  size: 100
+  gap: 10
+  help: 选择图片作为背景
+  options:
+    - label: 图文1
+      value: 1
+      render: https://placehold.co/600x400
+    - label: 图文2
+      value: 2
+      render: https://placehold.co/600x400
+    - label: 图文3
+      value: 3
+      render: https://placehold.co/600x400
+
+```
+
+#### UI 效果
+
+<p>
+<img src="/img/formkit/formkit-toggle.png" width="50%" class="medium-zoom-image" />
+</p>
+
 ### secret
 
 密钥输入组件，用于选择一个密钥资源。

docs/developer-guide/plugin/api-changelog.md

@@ -3,6 +3,12 @@ title: API 变更日志
 description: 记录每一个版本的插件 API 变更记录，方便开发者适配
 ---
 
+## 2.22.8
+
+### 表单定义 > 新增 `toggle` 组件
+
+在 2.22.8 中，我们为 FormKit 表单新增了 `toggle` 组件，这是一个可以对一组图片、颜色或文字等进行选择切换的组件，详细文档可查阅：[表单定义#toggle](../../developer-guide/form-schema.md#toggle)
+
 ## 2.22.5
 
 ### SpringDoc 依赖更新可能导致插件无法启动

docs/developer-guide/theme/api-changelog.md

@@ -3,6 +3,12 @@ title: API 变更日志
 description: 记录每一个版本的主题 API 变更记录，方便开发者适配
 ---
 
+## 2.22.8
+
+### 表单定义 > 新增 `toggle` 表单类型
+
+在 2.22.8 中，我们为 FormKit 表单新增了 `toggle` 组件，这是一个可以对一组图片、颜色或文字等进行选择切换的组件，详细文档可查阅：[表单定义#toggle](../../developer-guide/form-schema.md#toggle)
+
 ## 2.22.2
 
 ### 表单定义 > 新增 `switch` 表单类型

static/img/formkit/formkit-toggle.png

@@ -792,6 +792,51 @@ UI 效果：
   offValue: "inactive"
 ```
 
+### toggle
+
+切换组件，用于对一组图片、颜色或文字等选择切换，支持单选与多选。它的功能与 `select` 组件类似，但相较于 `select` 组件，`toggle` 组件可以更直观的展示选项。
+
+参数：
+
+- `renderType`：当前组件的渲染类型，可选参数为 `image`、`color`、`text`，默认为 `text`。
+- `options`：一组同类型的数据源，数据类型为 `{ label?: string; value: string; render?: string }[]`，其中 `label` 为选项的文本，`value` 为选项的值。`render` 为选项的渲染展示内容，与 `renderType` 参数配合使用。
+  - 当 `renderType` 为 `image` 时，`render` 参数为图片的 URL。
+  - 当 `renderType` 为 `color` 时，`render` 参数为颜色的十六进制代码。例如 `#000000`。
+  - 当 `renderType` 为 `text` 时，`render` 参数为文字内容。
+- `multiple`：可选，是否支持多选，默认为 `false`。
+- `size`：可选，渲染内容的尺寸，`number` 类型，单位为 `px`。
+- `gap`：可选，渲染内容之间的间距，`number` 类型，单位为 `px`。
+- `value`: 可选初始值，数据类型为 `string | number | boolean | (string | number | boolean)[]`。
+
+#### 示例
+
+```yaml
+- $formkit: toggle
+  label: 选择图片
+  name: toggle
+  render-type: image
+  size: 100
+  gap: 10
+  help: 选择图片作为背景
+  options:
+    - label: 图文1
+      value: 1
+      render: https://placehold.co/600x400
+    - label: 图文2
+      value: 2
+      render: https://placehold.co/600x400
+    - label: 图文3
+      value: 3
+      render: https://placehold.co/600x400
+
+```
+
+#### UI 效果
+
+<p>
+<img src="/img/formkit/formkit-toggle.png" width="50%" class="medium-zoom-image" />
+</p>
+
 ### secret
 
 密钥输入组件，用于选择一个密钥资源。

versioned_docs/version-2.22/developer-guide/form-schema.md

@@ -3,6 +3,12 @@ title: API 变更日志
 description: 记录每一个版本的插件 API 变更记录，方便开发者适配
 ---
 
+## 2.22.8
+
+### 表单定义 > 新增 `toggle` 组件
+
+在 2.22.8 中，我们为 FormKit 表单新增了 `toggle` 组件，这是一个可以对一组图片、颜色或文字等进行选择切换的组件，详细文档可查阅：[表单定义#toggle](../../developer-guide/form-schema.md#toggle)
+
 ## 2.22.5
 
 ### SpringDoc 依赖更新可能导致插件无法启动

versioned_docs/version-2.22/developer-guide/plugin/api-changelog.md

@@ -3,6 +3,12 @@ title: API 变更日志
 description: 记录每一个版本的主题 API 变更记录，方便开发者适配
 ---
 
+## 2.22.8
+
+### 表单定义 > 新增 `toggle` 表单类型
+
+在 2.22.8 中，我们为 FormKit 表单新增了 `toggle` 组件，这是一个可以对一组图片、颜色或文字等进行选择切换的组件，详细文档可查阅：[表单定义#toggle](../../developer-guide/form-schema.md#toggle)
+
 ## 2.22.2
 
 ### 表单定义 > 新增 `switch` 表单类型