docs: 完善插件模块的文档。

zhangjinyang

2025-05-16 50b93249673b24e3b87d8c62821e46a10aa026f9

docs: 完善插件模块的文档。

 aiflowy-ui-react/src/pages/ai/plugin/Plugin.tsx

@@ -389,9 +389,6 @@
            />
            <Modal title="新增插件" open={addPluginIsOpen} onOk={handleaddPluginOk}
                   onCancel={handleaddPluginCancle}
                   styles={{
                       body: { maxHeight: '500px', overflowY: 'auto' }, // 使用 styles 替代 bodyStyle
                   }}
                   footer={null}
            >
                <Form
@@ -425,7 +422,7 @@
                        name="name"
                        rules={[{ required: true, message: '请输入插件名称!' }]}
                    >
                        <Input maxLength={30} showCount/>
                        <Input maxLength={30} showCount placeholder={'请输入插件名称'}/>
                    </Form.Item>
                    <Form.Item<FieldType>
                        label="插件描述"
@@ -435,17 +432,17 @@
                        <TextArea
                            showCount
                            maxLength={500}
                            placeholder="disable resize"
                            placeholder="请输入插件描述"
                            style={{ height: 80, resize: 'none' }}
                        />
                    </Form.Item>

                    <Form.Item<FieldType>
                        name="baseUrl"
                        label={'插件URL'}
                        label={'插件 URL'}
                          rules={[{ required: true, message: '请输入插件URL' }]}
                    >
                        <Input />
                        <Input placeholder="请输入插件 URL" />
                    </Form.Item>
                    <Form.Item<FieldType>
                        name="headers"

 aiflowy-ui-react/src/pages/ai/plugin/PluginToolEdit.tsx

@@ -8,7 +8,6 @@
    ArrowLeftOutlined,
    DeleteOutlined,
    EditOutlined,
    PlayCircleOutlined,
    PlusOutlined,
    QuestionCircleOutlined
} from "@ant-design/icons";
@@ -62,12 +61,6 @@
                <Button onClick={() => navigate(-1)}  icon={<ArrowLeftOutlined />}>返回</Button>
                {/* 其他内容 */}
            </div>
            <Button
                type="primary"
                icon={<PlayCircleOutlined />}
            >
                试运行
            </Button>
        </div>
    )
    const [editStates, setEditStates] = useState({

 docs/.vitepress/config.mts

@@ -179,9 +179,9 @@
            text: '插件',
            collapsed: false,
            items: [
                {text: '什么是 插件？', link: '/plugin/what_is_plugin'},
                {text: '什么是插件', link: '/plugin/what_is_plugin'},
                {text: '快速开始', link: '/plugin/quick-start'},
                {text: '自定义插件', link: '/plugin/custom-plugin'},
                {text: '计划中', link: '/plugin/other'},
            ]
        },
        {

 docs/zh/product/plugin/custom-plugin.md

File was deleted

 docs/zh/product/plugin/other.md

New file
@@ -0,0 +1,9 @@
# 计划任务

## 本地插件

> 规划中...

## 插件市场

> 规划中...

 docs/zh/product/plugin/quick-start.md

@@ -1,9 +1,63 @@
# 快速开始

## Bot 中如何使用插件
## 添加 HTTP 插件

![bot-use-plugin.png](resource/bot-use-plugin.png)
我们以添加 `高德地图` 插件为例，演示一下如何添加插件。

选择插件之后就开始对话
点击添加插件按钮：

![bot-use-plugin-sec.png](resource/bot-use-plugin-sec.png)
![add.png](resource/add.png)

会弹出新增弹框：
![add-modal.png](resource/add-modal.png)
- 插件名称：插件的名称。
- 插件描述：插件可以实现一些什么样的功能。
- 插件 URL：插件的请求地址，当前插件下的所有工具都是基于这个请求地址。
- Headers： 请求头，该插件所需的请求头参数。
- 认证方式：
  选择插件使用的授权或验证方式。目前支持如下两种类型：
  - 无需认证
不需要认证，直接访问插件即可。
  - Service token / API key
  Token（令牌）是一种身份验证方式，用户或系统需提供唯一的密钥（Token）来访问受保护的资源。插件校验 Token 合法后，允许操作。

添加完毕后，点击工具列表按钮：

![tools-btn.png](resource/tools-btn.png)

来到工具列表页面后，点击创建工具按钮：

![add-tool-btn.png](resource/add-tool-btn.png)

填写相关信息后点击确定按钮保存：

![fill-tool-info.png](resource/fill-tool-info.png)

之后工具列表里就会出现刚才添加的工具，我们点击修改，进一步完善工具信息：

![edit-tool-btn.png](resource/edit-tool-btn.png)

来到工具详情页，我们需要完善三个地方的信息：

![tool-detail.png](resource/tool-detail.png)

修改基本信息，主要是修改工具路径和请求方法：

![edit-basic-info.png](resource/edit-basic-info.png)
> 记得点击保存

配置输入参数信息：

![edit-input-data.png](resource/edit-input-data.png)
> 记得点击保存

配置输出参数（这里仅配置了部分参数，方便演示）：

![edit-output-data.png](resource/edit-output-data.png)
> 记得点击保存

全部配置保存之后，工具就添加成功了。

## 添加本地插件

> 规划中...

 docs/zh/product/plugin/resource/add-modal.png

 docs/zh/product/plugin/resource/add-tool-btn.png

 docs/zh/product/plugin/resource/add.png

 docs/zh/product/plugin/resource/edit-basic-info.png

 docs/zh/product/plugin/resource/edit-input-data.png

 docs/zh/product/plugin/resource/edit-output-data.png

 docs/zh/product/plugin/resource/edit-tool-btn.png

 docs/zh/product/plugin/resource/fill-tool-info.png

 docs/zh/product/plugin/resource/tool-detail.png

 docs/zh/product/plugin/resource/tools-btn.png

 docs/zh/product/plugin/what_is_plugin.md

@@ -1,20 +1,20 @@
# 什么是插件

## 1. 插件定义
插件是 AIFlowy 平台的**功能扩展模块**，允许Bot通过API连接外部系统和服务，突破大语言模型的固有能力限制。
## 插件介绍
插件是一个工具集，可以类比做一个工具箱，一个插件内可以包含一个或多个工具。

## 2. 核心价值
🔌 **无缝集成** - 快速对接企业现有系统  
⚡ **实时交互** - 毫秒级API响应能力  
🛡️ **安全可控** - 权限隔离+请求审计  
🧩 **模块化设计** - 即插即用，灵活组合
通过插件，可以扩展 AIFlowy 的功能，使其具备除默认功能外的额外能力。

## 3. 架构设计
```mermaid
graph LR
    A[用户请求] --> B{Bot判断}
    B -->|需要外部数据| C[插件调度]
    C --> D[[API调用]]
    D --> E{数据处理}
    E -->|成功| F[结构化响应]
    E -->|失败| G[错误处理]
比如：`Bot` 部分可以通过挂载插件使得 `Bot` 具备插件的相关功能。

同理还有 `工作流` 部分，工作流中的插件节点同样可以扩展该工作流的能力。

## 插件分类

### HTTP 插件

顾名思义，`HTTP` 插件就是通过调用外部 API 来实现系统不具备的能力，使得 `AIFlowy` 能够获取外部信息。

### 本地插件

> 规划中...