Interface.ts 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import type { XYPosition } from '@repo/workflow'
  2. import type { FormItemRule } from 'element-plus'
  3. import type { VNode } from 'vue'
  4. /**
  5. * 渲染回调参数
  6. */
  7. export interface RenderCallbackParams {
  8. [key: string]: any
  9. }
  10. /**
  11. * 表单项配置模型
  12. */
  13. export interface ConfigSchema {
  14. // 其他未明确指定的属性
  15. [fieldName: string]: any
  16. /**
  17. * 子节点列表,可选
  18. */
  19. children?: ConfigSchema[]
  20. /**
  21. * 表单控件属性,可选
  22. * @example { type: 'input', options: [{ label: '用户名', value: 'username' }] }
  23. */
  24. componentProps?: any
  25. /**
  26. * 节点字段path,可选 获取参考lodash get方法
  27. * @example 'data.username'
  28. */
  29. field?: string
  30. // 是否为表单输入组件,可选
  31. input?: boolean
  32. // 节点标签,可选
  33. label?: string
  34. /**
  35. * 标签配置
  36. */
  37. labelConfig?: {
  38. /**
  39. * 宽度,可选
  40. */
  41. width?: number
  42. /**
  43. * 是否显示,可选
  44. */
  45. show?: boolean
  46. /**
  47. * 位置,可选
  48. */
  49. position?: 'top' | 'left'
  50. /**
  51. * 配置提示
  52. */
  53. tooltip?: string
  54. }
  55. // 是否无需表单项,可选
  56. noFormItem?: boolean
  57. // 事件绑定
  58. // 表单验证规则,可选
  59. rules?: FormItemRule[]
  60. // 是否显示(属性编辑组件可以添加函数动态显示隐藏),可选
  61. show?: ((renderCallbackParams: RenderCallbackParams) => boolean) | boolean
  62. // 插槽名称(组件为插槽类型时,需要设置插槽name),可选
  63. slotName?: string
  64. // 插槽列表,可选
  65. slots?: { [slotName: string]: ConfigSchema[] }
  66. /**
  67. * 节点类型,必选
  68. * @example 'text' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'time' | 'datetime' | 'color' | 'file' | 'image' | 'video' | 'audio' | 'range' | 'number' | 'password' | 'hidden' | 'button' | 'reset' | 'submit' | 'html' | 'custom'
  69. */
  70. valueType: string
  71. // 渲染表单项
  72. render?: (renderCallbackParams: RenderCallbackParams) => Element
  73. // 渲染组件
  74. renderItem?: (renderCallbackParams: RenderCallbackParams) => Element
  75. }
  76. type EndpointType = string | { type: string; label: string }
  77. export interface INodeType {
  78. /**
  79. * 版本信息
  80. */
  81. version: string[]
  82. /**
  83. * 展示名称
  84. */
  85. displayName: string
  86. /**
  87. * 名称
  88. */
  89. name: string
  90. /**
  91. * 副标题 带格式化信息
  92. */
  93. subtitle?: string
  94. /**
  95. * 描述
  96. */
  97. description?: string
  98. /**
  99. * 节点图标 默认使用iconify图标名称
  100. * @example 'mdi:home'
  101. * 参考 https://icon-sets.iconify.design/
  102. */
  103. icon?: string
  104. /**
  105. * 图标颜色
  106. */
  107. iconColor?: string
  108. /**
  109. * 输入端口列表
  110. */
  111. inputs: EndpointType[] | ((params: any) => EndpointType[])
  112. /**
  113. * 输出端口列表
  114. */
  115. outputs: EndpointType[] | ((params: any) => EndpointType[])
  116. /**
  117. * 输出端口名称
  118. */
  119. schema: {
  120. // 流程id
  121. appAgentId?: string
  122. // 父级节点Id
  123. parentId?: string
  124. // 节点位置
  125. position: XYPosition
  126. // 节点宽度
  127. width: number
  128. // 节点高度
  129. height: number
  130. // 当前是否选中
  131. selected: boolean
  132. // 节点类型
  133. nodeType: string
  134. // 节点层级
  135. zIndex: number
  136. // 节点业务数据 存储配置等
  137. data: Record<string, any>
  138. }
  139. /**
  140. * 表单配置
  141. */
  142. formConfig?: ConfigSchema[]
  143. /**
  144. * 节点自定义渲染
  145. */
  146. render?: (renderCallbackParams: RenderCallbackParams) => Element | VNode
  147. // 其他配置
  148. [key: string]: any
  149. }
  150. /**
  151. * 节点连接类型
  152. */
  153. export const NodeConnectionTypes = {
  154. main: 'main'
  155. }