@questflow/canvas v0.2.0

interface CanvasProps {
  idToken: string; // 通过"获取用户的id_token"获取
  theme?: 'light' | 'dark'; // 主题，默认为light
  template?: { [key: string]: any }; // 模板对象，默认没有模板对象
  flowName?: string; // 新建流程的名称，默认为New Flow
  flowDescription?: string; // 新建流程的描述，默认为New Flow description
  onPublish?: (publishedFlow: PublishedFlow) => void; // 发布后回调
  onPre?: () => void; // 当点击返回时候的回调
  showPublishAsTemplate?: boolean; // 是否展示 publish as template按钮，默认不展示
  showPublish?: boolean; // 是否展示 publish 按钮，默认不展示
  showSave?: boolean; // 是否展示 save 按钮，默认不展示
  questflowURL?: string; // questflow地址，用于组件与questflow服务器通信
}

onPublish回调参数

interface PublishedFlow {
  createdAt: Date; // 创建时间
  name: string; // 流程名称
  isPublished: boolean; // 是否已经发布
  publishedAt: Date; // 发布时间
  flowId: string; // 流程id
  webhook?: string; // 执行流程的webhook
}

###一个使用的示例，可以使用create-react-app，然后替换App.tsx文件内容

import React from 'react';
import ReactDOM from 'react-dom';
import Canvas, { PublishedFlow } from '@questflow/canvas';

function App() {
  const idToken = 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImRQRmFnYnhObW1KM21zdHk2RXpuTmV1WGhpTE5LMGpmSlZhdlZDWXZtRWMifQ.eyJzdWIiOiI2NDVjYWFhMGVhM2UwZDk3YjcyNWNmY2UiLCJhdF9oYXNoIjoiUWljOEtpV0pBenRuUEliQnNSamdEdyIsInNpZCI6Ik9qeFhHQXVJa2lNWU1iaGpVVEtGTSIsImF1ZCI6ImZvb3RwcmludCIsImV4cCI6MTY4MzgyNjg5MCwiaWF0IjoxNjgzODIzMjkwLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAvYXBpL29pZGMifQ.S8Rrrn-r2mOwUpclVkWd2P6Rv3oNhOWvHwnDIjRTVjFMkeujBMWgH3aTWhvtoGBKPy3si7E2EmV5O572UTaaEr_mBljSjIiCabzvdYhbwnSw6MSpwNdt-io-G9Rxb8Zm9VFHsvnxNif2ueHc50eo9vPtAI6m47e1MU6irVBOOOmEz_6xHMCv397PXxVfpTF4peHsMNueceK-BYgjAbiXP52JJ4AeIvgwOEo5vR4ZdLMzS5KdSvELa08j_ag8KumKuK2njlaontIo2-56j_f2SvUSs7hWJfHC7F1k0VYMWcLjdmxcbucHIaViIyWszS-hmZXjQvkjUaM8blvjSd_Zfg'

  const onPublish = (flow: PublishedFlow) => {
    console.log(flow)
  }

  return (
    <div className="App">
      <Canvas flowId="644a36d563b13a9b5199b672" idToken={idToken} questflowURL={'https://staging.questflow.ai'} onPublish={onPublish}
        showSave={true} showPublish={true} />
    </div >
  );
}

export default App;