制作与使用 HTML 扩展

应用指南 · 把页面嵌入 QPro

完成本页后，你可以将一个本地 HTML 页面加入 QPro 菜单或交易布局。服务启用与 Skills 安装见 快速开始；数据源按 接口参考 选择。

QPro Skills 可以帮助本地 AI Agent 把行情、账户和交易数据需求制作成一个可直接运行的 .html 网页。将网页放入 QPro 的扩展目录后，既可以从 系统 菜单快速打开，也可以把它作为“扩展板块”嵌入交易页面，与报价表、行情图、下单板等板块自由组合。

从 QPro Skills 生成 HTML 并嵌入 QPro 扩展板块的四步流程

一个扩展的完整流程：AI 生成单 HTML 文件、放入扩展目录、选择网页模板、嵌入 QPro 页面。

扩展如何工作

扩展页面本身负责展示和交互，数据仍来自 QPro 的本地 API。QPro Skills 已整理好服务地址、接口、字段含义和订阅方式，Agent 可以据此生成适合嵌入的页面。

三种打开方式

打开方式

操作入口

适用场景

快速打开

系统 -> 打开扩展 -> 选择 HTML 文件

使用系统默认浏览器打开，适合快速预览和单独查看

嵌入现有页面

添加“扩展板块”，再在板块配置中选择 HTML 模板

页面直接显示在 QPro 布局中，可与其他板块一起移动、缩放和保存

独占一个页面

新建空白页，再为整个页面选择 HTML 模板

适合内容较多、需要较大显示空间或需要长时间独立查看的扩展

使用前准备

  1. 按 先用 QPro Skills，让 AI 快速实现需求 复制并安装 QPro Skills。

  2. 按 快速开始 启用 本地 Api 接口，重启并重新登录 QPro。扩展页面需要从当前登录的 QPro 读取本地数据。

  3. 在 Codex 等支持 Skills 的本地 AI 工具中描述页面目标，并明确要求交付一个适合 QPro 扩展板块的单 HTML 文件。

例如，可以直接向 Agent 提出以下需求：

请使用 QPro Skills，制作一个可以放进 QPro 的横向盘口力量看板，
并生成一个 HTML 文件。
在 Codex 中使用 QPro Skills 生成单 HTML 扩展页面

Agent 按 QPro Skills 调用本地数据服务，并把页面交付为一个 .html 文件。

推荐使用单文件 HTML，把 CSS 和 JavaScript 内嵌在页面中，便于复制、更新和分享。如果页面确实需要图片等本地资源，应保留原有相对目录结构，并将这些资源一同复制到扩展目录。

将 HTML 加入扩展目录

  1. 在 QPro 菜单栏选择 系统 -> 打开扩展 -> 管理扩展目录。

  2. 将 Agent 生成的 .html 文件复制到打开的目录根层级。QPro 会识别该层级中的 HTML 文件；请确认文件扩展名确实为 .html，而不是被 Windows 隐藏扩展名后的 .html.txt。

  3. 再次打开 系统 -> 打开扩展，即可在菜单中看到文件名。点击文件名会使用系统默认浏览器快速打开页面。

QPro 系统菜单中的打开扩展入口、扩展目录和 HTML 文件列表

打开扩展 会列出扩展目录中的 HTML 文件；管理扩展目录 用于打开文件所在位置。

新增或替换 HTML 文件后，无需重启 QPro；重新打开 打开扩展 菜单或板块配置即可刷新文件列表。

嵌入现有 QPro 页面

  1. 在任意板块内右键，选择 板块管理 -> 添加板块 -> 扩展板块。

    在 QPro 板块管理菜单中添加扩展板块

    从现有页面中添加一个用于承载 HTML 的“扩展板块”。

  2. 在新添加的扩展板块内右键并选择 配置。在 网页模板 区域点击 打开模板 右侧的下拉框，选择已经放入扩展目录的 HTML 文件，然后点击 确定。

    在扩展板块配置中选择 HTML 网页模板

    配置列表会显示扩展目录根层级中的 HTML 文件。

  3. 页面加载后，可以像其他板块一样调整位置和大小，也可以放到其他页面或独立窗口中。有关布局操作，参见 窗口布局。

    横向盘口力量 HTML 看板嵌入 QPro 交易页面

    示例：AI 生成的“横向盘口力量”页面嵌入下单板下方，并随板块宽度自适应显示。

在空白页中整页显示

如果扩展内容较多，也可以让它独占一个 QPro 页面。多账户风险总览、品种或板块行情大屏、期权波动率分析、多周期图表、交易复盘，以及带有较多筛选条件的研究工具，都更适合使用这种方式。页面拥有更大的显示空间，也便于单独切换或拖到其他屏幕查看。

  1. 点击页面标签右侧的 +，在 空白页 中选择 新建空白页，然后点击 添加该页面。

    在 QPro 中新建空白页

    新建一个专门用于显示扩展的空白页。

  2. 在新建页面的空白区域点击鼠标右键，依次选择 板块添加 -> 扩展板块。添加完成后，板块中央会显示“右键配置打开模板”的提示。

    在 QPro 空白页中右键添加扩展板块并选择整页放置

    从板块列表底部选择“扩展板块”，将它添加到当前空白页。

  3. 在刚添加的扩展板块空白区域再次点击鼠标右键，选择 配置，打开“板块配置”窗口。在右侧的 网页模板 区域，点击 打开模板 这一行右侧的下拉框，从列表中选择已经放入扩展目录的 HTML 文件，然后点击窗口右下角的 确定。

    右键配置 QPro 扩展板块并选择 HTML 网页模板

    示例：期货期权平值隐含波动率观察扩展独占一个 QPro 页面。

更新、切换与排查

  • 更新页面：用新版本覆盖同名 HTML 文件后，在扩展板块内右键选择 重新加载。

  • 切换页面：在扩展板块内右键选择 配置，从 打开模板 下拉列表中选择另一个 HTML。

  • 列表中没有文件：确认 HTML 位于 管理扩展目录 打开的目录根层级，且文件名以 .html 结尾，然后重新打开菜单或配置窗口。

  • 页面无数据：确认已经启用 本地 Api 接口、重启并登录 QPro；如果修改过本地 API 端口，应让 Agent 按当前配置重新检查页面。

  • 页面尺寸不合适：让 Agent 使用响应式布局，避免固定宽度和固定高度，再重新加载页面。

备注

QPro 本地 API 和官方 Skills 提供数据访问能力，不提供下单、撤单或改单能力。扩展能够执行 HTML 中包含的前端代码，因此只应加载来源可信、用途明确的文件；账户、持仓、委托和成交数据也不应暴露到不可信网络。