feat: add useSchemaSync, PropertyPanel, useStencil, ComponentPanel
This commit is contained in:
向宁
parent
f91bc84911
commit
69ab0a547d
@ -0,0 +1,44 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { Input, Spin } from 'ant-design-vue';
|
||||
|
||||
import { useStencil } from '../composables/useStencil';
|
||||
|
||||
interface Props {
|
||||
stencilContainer: Ref<HTMLElement | null>;
|
||||
graph: Ref<any>;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const searchText = ref('');
|
||||
const stencilDiv = ref<HTMLElement | null>(null);
|
||||
|
||||
const { loading, initStencil } = useStencil(stencilDiv, props.graph);
|
||||
|
||||
watch(
|
||||
() => props.graph,
|
||||
(g) => {
|
||||
if (g) initStencil();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full w-60 flex-col border-r bg-gray-50">
|
||||
<div class="border-b p-3">
|
||||
<Input
|
||||
v-model:value="searchText"
|
||||
placeholder="搜索组件..."
|
||||
size="small"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
<Spin :spinning="loading">
|
||||
<div ref="stencilDiv" class="flex-1 overflow-auto"></div>
|
||||
</Spin>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,286 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
message,
|
||||
Row,
|
||||
Select,
|
||||
Switch,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
nodeId: null | string;
|
||||
nodeData: null | Record<string, any>;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update', nodeId: string, data: Record<string, any>): void;
|
||||
(e: 'delete', nodeId: string): void;
|
||||
}>();
|
||||
|
||||
const formState = reactive({
|
||||
fieldKey: '',
|
||||
title: '',
|
||||
placeholder: '',
|
||||
required: false,
|
||||
});
|
||||
|
||||
const validationState = reactive({
|
||||
minLength: undefined as number | undefined,
|
||||
maxLength: undefined as number | undefined,
|
||||
pattern: '',
|
||||
customMessage: '',
|
||||
});
|
||||
|
||||
const dataSourceType = ref<'remote' | 'static'>('static');
|
||||
const staticOptions = reactive<{ label: string; value: string }[]>([]);
|
||||
const remoteConfig = reactive({
|
||||
url: '',
|
||||
method: 'GET',
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
});
|
||||
|
||||
const supportedProps = computed(() => {
|
||||
if (!props.nodeData?.supportedProps) return null;
|
||||
try {
|
||||
return JSON.parse(props.nodeData.supportedProps);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
const hasDataSource = computed(
|
||||
() => supportedProps.value?.dataSource?.supported === true,
|
||||
);
|
||||
const hasValidation = computed(
|
||||
() =>
|
||||
Array.isArray(supportedProps.value?.validation) &&
|
||||
supportedProps.value.validation.length > 0,
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.nodeData,
|
||||
(data) => {
|
||||
if (!data) return;
|
||||
formState.fieldKey = data.fieldKey ?? '';
|
||||
formState.title = data.title ?? '';
|
||||
formState.required = data.required ?? false;
|
||||
const schemaNode = data.schemaNode ?? {};
|
||||
const compProps = schemaNode['x-component-props'] ?? {};
|
||||
formState.placeholder = compProps.placeholder ?? '';
|
||||
const ds = schemaNode['x-data-source'];
|
||||
if (ds) {
|
||||
dataSourceType.value = ds.type ?? 'static';
|
||||
if (ds.type === 'static' && Array.isArray(ds.options)) {
|
||||
staticOptions.splice(0, staticOptions.length, ...ds.options);
|
||||
} else if (ds.type === 'remote') {
|
||||
Object.assign(remoteConfig, {
|
||||
url: ds.url ?? '',
|
||||
method: ds.method ?? 'GET',
|
||||
labelField: ds.labelField ?? 'name',
|
||||
valueField: ds.valueField ?? 'id',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
staticOptions.splice(0);
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
function handleSave() {
|
||||
if (!props.nodeId || !props.nodeData) return;
|
||||
const schemaNode = {
|
||||
...props.nodeData.schemaNode,
|
||||
title: formState.title,
|
||||
required: formState.required,
|
||||
};
|
||||
if (formState.placeholder) {
|
||||
schemaNode['x-component-props'] = {
|
||||
...schemaNode['x-component-props'],
|
||||
placeholder: formState.placeholder,
|
||||
};
|
||||
}
|
||||
if (hasDataSource.value) {
|
||||
schemaNode['x-data-source'] =
|
||||
dataSourceType.value === 'static'
|
||||
? {
|
||||
type: 'static',
|
||||
options: [...staticOptions],
|
||||
}
|
||||
: { type: 'remote', ...remoteConfig };
|
||||
}
|
||||
const newData = {
|
||||
...props.nodeData,
|
||||
fieldKey: formState.fieldKey,
|
||||
title: formState.title,
|
||||
required: formState.required,
|
||||
schemaNode,
|
||||
};
|
||||
emit('update', props.nodeId, newData);
|
||||
message.success('属性已更新');
|
||||
}
|
||||
|
||||
function addOption() {
|
||||
staticOptions.push({ label: '', value: '' });
|
||||
}
|
||||
function removeOption(index: number) {
|
||||
staticOptions.splice(index, 1);
|
||||
}
|
||||
function handleDelete() {
|
||||
if (props.nodeId) emit('delete', props.nodeId);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="nodeId && nodeData"
|
||||
class="flex h-full w-80 flex-col border-l bg-white"
|
||||
>
|
||||
<div class="flex items-center justify-between border-b px-4 py-3">
|
||||
<span class="text-sm font-semibold">属性配置</span>
|
||||
<Button size="small" danger @click="handleDelete">删除</Button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<div class="mb-2 text-xs font-medium text-gray-500">基础属性</div>
|
||||
<Form layout="vertical" size="small">
|
||||
<Form.Item label="组件ID (字段名)" required>
|
||||
<Input
|
||||
v-model:value="formState.fieldKey"
|
||||
placeholder="如: leaveType"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="标题" required>
|
||||
<Input v-model:value="formState.title" placeholder="如: 请假类型" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
v-if="
|
||||
supportedProps?.basic?.some((p: any) => p.key === 'placeholder')
|
||||
"
|
||||
label="提示文字"
|
||||
>
|
||||
<Input v-model:value="formState.placeholder" />
|
||||
</Form.Item>
|
||||
<Form.Item label="必填">
|
||||
<Switch v-model:checked="formState.required" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<template v-if="hasValidation">
|
||||
<Divider style="margin: 12px 0" />
|
||||
<div class="mb-2 text-xs font-medium text-gray-500">校验规则</div>
|
||||
<Form layout="vertical" size="small">
|
||||
<Row :gutter="8">
|
||||
<Col
|
||||
v-if="
|
||||
supportedProps?.validation?.some(
|
||||
(p: any) => p.key === 'minLength',
|
||||
)
|
||||
"
|
||||
:span="12"
|
||||
>
|
||||
<Form.Item label="最小长度">
|
||||
<InputNumber
|
||||
v-model:value="validationState.minLength"
|
||||
class="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col
|
||||
v-if="
|
||||
supportedProps?.validation?.some(
|
||||
(p: any) => p.key === 'maxLength',
|
||||
)
|
||||
"
|
||||
:span="12"
|
||||
>
|
||||
<Form.Item label="最大长度">
|
||||
<InputNumber
|
||||
v-model:value="validationState.maxLength"
|
||||
class="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item
|
||||
v-if="
|
||||
supportedProps?.validation?.some((p: any) => p.key === 'pattern')
|
||||
"
|
||||
label="正则"
|
||||
>
|
||||
<Input v-model:value="validationState.pattern" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<template v-if="hasDataSource">
|
||||
<Divider style="margin: 12px 0" />
|
||||
<div class="mb-2 text-xs font-medium text-gray-500">数据源</div>
|
||||
<Form layout="vertical" size="small">
|
||||
<Form.Item label="来源类型">
|
||||
<Select v-model:value="dataSourceType">
|
||||
<Select.Option value="static">静态选项</Select.Option>
|
||||
<Select.Option value="remote">远程API</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<template v-if="dataSourceType === 'static'">
|
||||
<div
|
||||
v-for="(opt, i) in staticOptions"
|
||||
:key="i"
|
||||
class="mb-2 flex gap-1"
|
||||
>
|
||||
<Input
|
||||
v-model:value="opt.label"
|
||||
placeholder="Label"
|
||||
class="flex-1"
|
||||
/>
|
||||
<Input
|
||||
v-model:value="opt.value"
|
||||
placeholder="Value"
|
||||
class="flex-1"
|
||||
/>
|
||||
<Button size="small" danger @click="removeOption(i)">×</Button>
|
||||
</div>
|
||||
<Button size="small" type="dashed" block @click="addOption">
|
||||
+ 添加选项
|
||||
</Button>
|
||||
</template>
|
||||
<template v-if="dataSourceType === 'remote'">
|
||||
<Form.Item label="API URL">
|
||||
<Input v-model:value="remoteConfig.url" placeholder="/api/xxx" />
|
||||
</Form.Item>
|
||||
<Row :gutter="8">
|
||||
<Col :span="12">
|
||||
<Form.Item label="Label字段">
|
||||
<Input v-model:value="remoteConfig.labelField" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col :span="12">
|
||||
<Form.Item label="Value字段">
|
||||
<Input v-model:value="remoteConfig.valueField" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<Divider style="margin: 12px 0" />
|
||||
<Button type="primary" block @click="handleSave">保存属性</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-full w-80 items-center justify-center border-l bg-gray-50 text-sm text-gray-400"
|
||||
>
|
||||
点击节点查看属性
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,168 @@
|
||||
import type { Graph } from '@antv/x6';
|
||||
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { portConfig } from '../config/port-config';
|
||||
|
||||
export function useSchemaSync(
|
||||
graph: Ref<Graph | null>,
|
||||
initialSchema?: string,
|
||||
) {
|
||||
const schemaJson = ref(initialSchema ?? '{"type":"object","properties":{}}');
|
||||
const nodeCount = ref(0);
|
||||
const edgeCount = ref(0);
|
||||
|
||||
function schemaToCanvas() {
|
||||
const g = graph.value;
|
||||
if (!g) return;
|
||||
|
||||
g.clearCells();
|
||||
|
||||
let schema: { properties: Record<string, any>; type: string; };
|
||||
try {
|
||||
schema = JSON.parse(schemaJson.value);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!schema.properties) return;
|
||||
|
||||
let yOffset = 40;
|
||||
const xOffset = 80;
|
||||
|
||||
for (const [key, value] of Object.entries(schema.properties)) {
|
||||
const nodeData: Record<string, any> = {
|
||||
fieldKey: key,
|
||||
title: value.title ?? key,
|
||||
componentType: value['x-component'] ?? 'Input',
|
||||
required: value.required ?? false,
|
||||
schemaNode: value,
|
||||
};
|
||||
|
||||
g.addNode({
|
||||
shape: 'form-field-node',
|
||||
id: key,
|
||||
x: xOffset,
|
||||
y: yOffset,
|
||||
data: nodeData,
|
||||
ports: portConfig,
|
||||
});
|
||||
|
||||
yOffset += 90;
|
||||
}
|
||||
|
||||
// Recreate edges from x-reactions
|
||||
for (const [sourceKey, value] of Object.entries(schema.properties)) {
|
||||
const reactions = value['x-reactions'] as any[] | undefined;
|
||||
if (!reactions) continue;
|
||||
for (const reaction of reactions) {
|
||||
const targetKey = reaction.target;
|
||||
if (!targetKey) continue;
|
||||
const type = reaction.type === 'data' ? 'data' : 'condition';
|
||||
const color = type === 'data' ? '#52c41a' : '#1677ff';
|
||||
const dasharray = type === 'data' ? '' : '5,5';
|
||||
const label = type === 'data' ? '数据' : '条件';
|
||||
try {
|
||||
g.addEdge({
|
||||
source: sourceKey,
|
||||
target: targetKey,
|
||||
attrs: {
|
||||
line: {
|
||||
stroke: color,
|
||||
strokeWidth: 2,
|
||||
strokeDasharray: dasharray,
|
||||
targetMarker: { name: 'block', width: 12, height: 8 },
|
||||
},
|
||||
},
|
||||
labels: [
|
||||
{
|
||||
position: 0.5,
|
||||
attrs: {
|
||||
label: { text: label, fill: color, fontSize: 12 },
|
||||
rect: {
|
||||
fill: '#fff',
|
||||
stroke: color,
|
||||
strokeWidth: 1,
|
||||
rx: 4,
|
||||
ry: 4,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
data: {
|
||||
linkageType: type,
|
||||
when: reaction.when,
|
||||
expression: reaction.expression,
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
// edge target may not exist
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateCounts();
|
||||
}
|
||||
|
||||
function canvasToSchema(): string {
|
||||
const g = graph.value;
|
||||
if (!g) return '{}';
|
||||
|
||||
const properties: Record<string, any> = {};
|
||||
|
||||
g.getNodes().forEach((node) => {
|
||||
const data = node.getData() ?? {};
|
||||
const key = data.fieldKey || node.id;
|
||||
const schemaNode = data.schemaNode ? { ...data.schemaNode } : {};
|
||||
schemaNode.title = data.title;
|
||||
schemaNode.required = data.required;
|
||||
if (data.componentType) schemaNode['x-component'] = data.componentType;
|
||||
properties[key] = schemaNode;
|
||||
});
|
||||
|
||||
// Build x-reactions from edges
|
||||
const reactionMap = new Map<string, any[]>();
|
||||
for (const edge of g.getEdges()) {
|
||||
const sourceCell = edge.getSourceCell();
|
||||
const targetCell = edge.getTargetCell();
|
||||
if (!sourceCell || !targetCell) continue;
|
||||
const data = edge.getData() ?? {};
|
||||
const sourceKey = sourceCell.id;
|
||||
if (!reactionMap.has(sourceKey)) reactionMap.set(sourceKey, []);
|
||||
const reaction: any = {
|
||||
type: data.linkageType ?? 'condition',
|
||||
target: targetCell.id,
|
||||
};
|
||||
if (data.when) reaction.when = data.when;
|
||||
if (data.expression) reaction.expression = data.expression;
|
||||
if (data.action) reaction.action = data.action;
|
||||
reactionMap.get(sourceKey)?.push(reaction);
|
||||
}
|
||||
|
||||
for (const [sourceKey, reactions] of reactionMap) {
|
||||
if (properties[sourceKey]) {
|
||||
properties[sourceKey]['x-reactions'] = reactions;
|
||||
}
|
||||
}
|
||||
|
||||
return JSON.stringify({ type: 'object', properties }, null, 2);
|
||||
}
|
||||
|
||||
function updateCounts() {
|
||||
const g = graph.value;
|
||||
if (!g) return;
|
||||
nodeCount.value = g.getNodes().length;
|
||||
edgeCount.value = g.getEdges().length;
|
||||
}
|
||||
|
||||
return {
|
||||
schemaJson,
|
||||
nodeCount,
|
||||
edgeCount,
|
||||
schemaToCanvas,
|
||||
canvasToSchema,
|
||||
updateCounts,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
import type { Graph } from '@antv/x6';
|
||||
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { FormComponentDto } from '#/api/core';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { Stencil } from '@antv/x6-plugin-stencil';
|
||||
|
||||
import { getFormComponentsApi } from '#/api/core';
|
||||
|
||||
import { NODE_HEIGHT, NODE_WIDTH } from '../config/graph-config';
|
||||
import { portConfig } from '../config/port-config';
|
||||
|
||||
export function useStencil(
|
||||
stencilContainerRef: Ref<HTMLElement | null>,
|
||||
graph: Ref<Graph | null>,
|
||||
) {
|
||||
const components = ref<FormComponentDto[]>([]);
|
||||
const categories = ref<string[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
async function loadComponents() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getFormComponentsApi({ isActive: true });
|
||||
components.value = res ?? [];
|
||||
categories.value = [...new Set(res.map((c) => c.category))];
|
||||
} catch {
|
||||
components.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function initStencil() {
|
||||
if (!stencilContainerRef.value || !graph.value) return;
|
||||
|
||||
const g = graph.value;
|
||||
const groups = categories.value.map((cat) => ({
|
||||
name: cat,
|
||||
title: cat,
|
||||
collapsable: true,
|
||||
}));
|
||||
|
||||
const stencil = new Stencil({
|
||||
title: '表单组件',
|
||||
target: g,
|
||||
groups,
|
||||
search: (cell: any, keyword: string) => {
|
||||
if (!keyword) return true;
|
||||
const data = cell.getData?.();
|
||||
return data?.displayName?.includes(keyword) ?? false;
|
||||
},
|
||||
stencilGraphWidth: 220,
|
||||
});
|
||||
|
||||
for (const category of categories.value) {
|
||||
const catComponents = components.value.filter(
|
||||
(c) => c.category === category,
|
||||
);
|
||||
const nodes = catComponents.map((comp) => {
|
||||
let schema: Record<string, any> = {};
|
||||
try {
|
||||
schema = JSON.parse(comp.defaultSchema);
|
||||
} catch {
|
||||
/* empty */
|
||||
}
|
||||
return g.createNode({
|
||||
shape: 'form-field-node',
|
||||
width: NODE_WIDTH,
|
||||
height: NODE_HEIGHT,
|
||||
data: {
|
||||
componentId: comp.id,
|
||||
componentType: comp.name,
|
||||
displayName: comp.displayName,
|
||||
icon: comp.icon,
|
||||
fieldKey: '',
|
||||
title: schema.title ?? '未命名',
|
||||
required: schema.required ?? false,
|
||||
schemaNode: schema,
|
||||
supportedProps: comp.supportedProps,
|
||||
},
|
||||
ports: portConfig,
|
||||
});
|
||||
});
|
||||
stencil.load(nodes, category);
|
||||
}
|
||||
|
||||
stencilContainerRef.value.append(stencil.container);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadComponents();
|
||||
});
|
||||
|
||||
return { components, categories, loading, initStencil, loadComponents };
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user