77 lines
3.9 KiB
HTML
77 lines
3.9 KiB
HTML
{{define "asset_template_graph"}}
|
|
{{template "asset_tabs" .}}
|
|
<div class="card graph-editor-card">
|
|
<div class="section-title">
|
|
<div>
|
|
<div class="crumb">模板 / 可视化编辑</div>
|
|
<h2 class="title-with-icon">{{icon "template"}}<span>模板可视化编辑</span></h2>
|
|
</div>
|
|
<div class="actions compact">
|
|
{{if not .AssetTemplate.ReadOnly}}
|
|
<form class="graph-save-form" method="post" action="/ui/assets/templates/{{.AssetTemplate.Name}}/graph">
|
|
<input type="hidden" name="json" />
|
|
<button type="submit" class="primary">{{icon "apply"}}<span>保存模板</span></button>
|
|
</form>
|
|
{{end}}
|
|
{{if .AssetTemplate.ReadOnly}}
|
|
<a class="btn secondary" href="/ui/assets/templates?clone={{.AssetTemplate.Name}}">{{icon "add"}}<span>复制后编辑</span></a>
|
|
{{end}}
|
|
<a class="btn ghost" href="/ui/assets/templates?name={{.AssetTemplate.Name}}">返回模板</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{if .AssetTemplate.ReadOnly}}
|
|
<div class="form-hint">当前是标准模板预览页，画布内容可查看但不会直接保存。请先复制为用户模板再编辑。</div>
|
|
{{end}}
|
|
|
|
<div class="graph-editor" data-template-name="{{.AssetTemplate.Name}}">
|
|
<aside class="graph-sidebar">
|
|
<h3>节点库</h3>
|
|
<div class="graph-node-palette-list" data-catalog-url="/ui/api/graph-node-types"></div>
|
|
</aside>
|
|
|
|
<section class="graph-canvas-wrap">
|
|
<div class="graph-canvas-toolbar">
|
|
<button type="button" class="btn ghost graph-auto-layout">自动布局</button>
|
|
</div>
|
|
<svg class="graph-canvas" role="img" aria-label="模板流程图"></svg>
|
|
</section>
|
|
|
|
<aside class="graph-inspector">
|
|
<h3>属性面板</h3>
|
|
<div class="graph-empty-inspector">选择节点或连线后编辑参数</div>
|
|
<form class="graph-node-form" hidden>
|
|
<div class="graph-inspector-title">节点参数</div>
|
|
<label><span>节点 ID</span><input name="id" /></label>
|
|
<label><span>类型</span><input name="type" readonly /></label>
|
|
<label><span>角色</span><select name="role"><option>source</option><option>filter</option><option>sink</option></select></label>
|
|
<label><span>启用</span><select name="enable"><option value="true">启用</option><option value="false">停用</option></select></label>
|
|
<div class="graph-inspector-title">常用参数</div>
|
|
<div class="graph-typed-param-fields"></div>
|
|
<details class="graph-advanced-json" open>
|
|
<summary>高级 JSON</summary>
|
|
<label><span>未结构化参数</span><textarea class="graph-param-editor" name="params_json" rows="7"></textarea></label>
|
|
<div class="graph-form-hint">复杂对象和暂未建模字段保留在这里，会随模板一起保存。</div>
|
|
</details>
|
|
<div class="graph-inspector-title">连接</div>
|
|
<label><span>目标节点</span><select class="graph-connect-target" name="connect_target"></select></label>
|
|
<button type="button" class="secondary graph-connect-node">连接到目标节点</button>
|
|
<button type="button" class="danger graph-delete-node">删除节点</button>
|
|
</form>
|
|
<form class="graph-edge-form" hidden>
|
|
<div class="graph-inspector-title">连线参数</div>
|
|
<label><span>起点</span><select name="from"></select></label>
|
|
<label><span>终点</span><select name="to"></select></label>
|
|
<label><span>扩展参数 JSON</span><textarea class="graph-edge-param-editor" name="params_json" rows="7"></textarea></label>
|
|
<div class="graph-form-hint">连线用于表达数据流向，扩展参数可记录 stream、topic、条件等。</div>
|
|
<button type="button" class="danger graph-delete-edge">删除连线</button>
|
|
</form>
|
|
</aside>
|
|
</div>
|
|
|
|
<template id="graph-template-json">{{rawHTML .RawJSON}}</template>
|
|
<script src="/ui/assets/graph_editor.js"></script>
|
|
</div>
|
|
{{template "asset_tabs_end" .}}
|
|
{{end}}
|