view插件

约 516 字大约 2 分钟

...

2026-09-28

分类介绍

view插件（plugin-view-*）往设计器挂 UI（编辑器弹窗 / 数据源面板 / 元素工具条 / AI 面板）。

主要使用 onDesigned hook：设计器创建完成后动态挂载 UI，并把 API 挂到 designerUtils。

插件	UI	API 挂载点
plugin-view-code-edit	CodeMirror 全屏代码编辑弹窗	`designerUtils.setEditor(editor)`（供内核 edit* 方法调用）
plugin-view-data-source	可拖拽数据源面板 + 字段 Picker	`designerUtils.dataSource.*`、模板实例 `printFromDataSource` 等
plugin-view-ele-tools	元素选中悬浮工具条	无（监听内核选中事件）
plugin-view-ai	AI 面板（DragBox）+ 悬浮球	`designerUtils.ai.*`

示例代码

import pluginViewEleTools from '@sv-print/plugin-view-ele-tools';
import pluginViewDataSource from '@sv-print/plugin-view-data-source';

const plugins = [
  pluginViewEleTools(), // 元素选中悬浮工具条
  pluginViewDataSource({
    sources: [
      {
        name: 'user',
        title: '用户数据',
        defaultExpand: true, // 默认展开 (默认 true, 可省略)
        request: { url: '/api/user/fields', dataPath: 'data.list' },
      },
      {
        name: 'order',
        title: '订单数据',
        defaultExpand: false, // 默认折叠, 点击后懒加载
        fetcher: async () => {
          const res = await fetch('/api/order/schema');
          return (await res.json()).fields;
        },
      },
    ],
  }),
];
await hiprint.register({ plugins }); // ele-tools 的"数据源"按钮依赖 data-source

以 view-ai（AI 助手）为例：

import pluginViewAi from '@sv-print/plugin-view-ai';

const plugins = [
  pluginViewAi({
    // OpenAI 兼容直连（也支持 apiFormat: 'anthropic' | 'openai-responses'）
    provider: {
      provider: 'openai',
      baseUrl: 'https://api.openai.com/v1',
      apiKey: 'sk-...',
      model: 'gpt-4o',
    },
    enableTools: true,
    maxToolRounds: 3,
    onApply: (result) => {
      // 应用 AI 返回的模板/数据
    },
  }),
];

各插件文档

版权所有

版权归属：sv-print

许可证：署名 4.0 国际 (CC-BY-4.0)