@formily-djd/designer 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +56 -60
- package/dist/index.mjs +1 -1
- package/package.json +3 -3
package/dist/index.css
CHANGED
|
@@ -40,18 +40,18 @@
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
/* 可拖拽的组件样式 */
|
|
43
|
-
.is-draggable[data-v-
|
|
43
|
+
.is-draggable[data-v-18008a74] {
|
|
44
44
|
cursor: move;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
/* 拖拽时的样式 */
|
|
49
|
-
.is-draggable[data-v-
|
|
49
|
+
.is-draggable[data-v-18008a74]:active {
|
|
50
50
|
opacity: 0.5;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
/* 空容器占位符 */
|
|
54
|
-
.empty-container-placeholder[data-v-
|
|
54
|
+
.empty-container-placeholder[data-v-18008a74] {
|
|
55
55
|
min-height: 60px;
|
|
56
56
|
display: flex;
|
|
57
57
|
flex-direction: column;
|
|
@@ -64,26 +64,26 @@
|
|
|
64
64
|
pointer-events: none;
|
|
65
65
|
padding: 8px;
|
|
66
66
|
}
|
|
67
|
-
.placeholder-icon[data-v-
|
|
67
|
+
.placeholder-icon[data-v-18008a74] {
|
|
68
68
|
color: #d9d9d9;
|
|
69
69
|
}
|
|
70
|
-
.placeholder-text[data-v-
|
|
70
|
+
.placeholder-text[data-v-18008a74] {
|
|
71
71
|
font-size: 12px;
|
|
72
72
|
user-select: none;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
|
|
76
|
-
.canvas[data-v-
|
|
76
|
+
.canvas[data-v-b174a160] {
|
|
77
77
|
height: 100%;
|
|
78
78
|
display: flex;
|
|
79
79
|
flex-direction: column;
|
|
80
80
|
}
|
|
81
|
-
.canvas h3[data-v-
|
|
81
|
+
.canvas h3[data-v-b174a160] {
|
|
82
82
|
margin: 0 0 16px 0;
|
|
83
83
|
padding: 0;
|
|
84
84
|
flex-shrink: 0;
|
|
85
85
|
}
|
|
86
|
-
.canvas-content[data-v-
|
|
86
|
+
.canvas-content[data-v-b174a160] {
|
|
87
87
|
position: relative;
|
|
88
88
|
/* 为辅助工具层提供定位上下文 */
|
|
89
89
|
flex: 1;
|
|
@@ -95,18 +95,18 @@
|
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
/* 拖拽时的样式 */
|
|
98
|
-
.canvas-content.drag-over[data-v-
|
|
98
|
+
.canvas-content.drag-over[data-v-b174a160] {
|
|
99
99
|
background-color: rgba(59, 130, 246, 0.05);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
/* 空画布样式 */
|
|
103
|
-
.canvas-content.empty[data-v-
|
|
103
|
+
.canvas-content.empty[data-v-b174a160] {
|
|
104
104
|
display: flex;
|
|
105
105
|
align-items: center;
|
|
106
106
|
justify-content: center;
|
|
107
107
|
min-height: 500px;
|
|
108
108
|
}
|
|
109
|
-
.empty-canvas[data-v-
|
|
109
|
+
.empty-canvas[data-v-b174a160] {
|
|
110
110
|
position: absolute;
|
|
111
111
|
inset: 0;
|
|
112
112
|
display: flex;
|
|
@@ -114,21 +114,21 @@
|
|
|
114
114
|
justify-content: center;
|
|
115
115
|
pointer-events: none;
|
|
116
116
|
}
|
|
117
|
-
.empty-hint[data-v-
|
|
117
|
+
.empty-hint[data-v-b174a160] {
|
|
118
118
|
text-align: center;
|
|
119
119
|
color: #9ca3af;
|
|
120
120
|
}
|
|
121
|
-
.empty-icon[data-v-
|
|
121
|
+
.empty-icon[data-v-b174a160] {
|
|
122
122
|
color: #d1d5db;
|
|
123
123
|
margin: 0 auto 16px;
|
|
124
124
|
}
|
|
125
|
-
.empty-hint p[data-v-
|
|
125
|
+
.empty-hint p[data-v-b174a160] {
|
|
126
126
|
font-size: 14px;
|
|
127
127
|
margin: 0;
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
/* 拖拽时隐藏空画布提示 */
|
|
131
|
-
.canvas-content.drag-over .empty-canvas[data-v-
|
|
131
|
+
.canvas-content.drag-over .empty-canvas[data-v-b174a160] {
|
|
132
132
|
opacity: 0;
|
|
133
133
|
}
|
|
134
134
|
|
|
@@ -198,23 +198,23 @@
|
|
|
198
198
|
}
|
|
199
199
|
|
|
200
200
|
|
|
201
|
-
.config-panel[data-v-
|
|
201
|
+
.config-panel[data-v-3a22b8d5] {
|
|
202
202
|
height: 100%;
|
|
203
203
|
display: flex;
|
|
204
204
|
flex-direction: column;
|
|
205
205
|
}
|
|
206
|
-
.config-empty[data-v-
|
|
206
|
+
.config-empty[data-v-3a22b8d5] {
|
|
207
207
|
padding: 20px;
|
|
208
208
|
text-align: center;
|
|
209
209
|
color: #909399;
|
|
210
210
|
}
|
|
211
|
-
.config-content[data-v-
|
|
211
|
+
.config-content[data-v-3a22b8d5] {
|
|
212
212
|
height: 100%;
|
|
213
213
|
display: flex;
|
|
214
214
|
flex-direction: column;
|
|
215
215
|
overflow: hidden;
|
|
216
216
|
}
|
|
217
|
-
.config-title[data-v-
|
|
217
|
+
.config-title[data-v-3a22b8d5] {
|
|
218
218
|
margin: 0;
|
|
219
219
|
padding: 16px;
|
|
220
220
|
font-size: 16px;
|
|
@@ -223,21 +223,17 @@
|
|
|
223
223
|
background-color: #fff;
|
|
224
224
|
flex-shrink: 0;
|
|
225
225
|
}
|
|
226
|
-
.config-section[data-v-
|
|
226
|
+
.config-section[data-v-3a22b8d5] {
|
|
227
|
+
background-color: #fff;
|
|
227
228
|
flex: 1;
|
|
228
229
|
overflow-y: auto;
|
|
229
230
|
border: none;
|
|
230
231
|
padding: 0 16px;
|
|
231
232
|
}
|
|
232
|
-
.config-section[data-v-
|
|
233
|
+
.config-section[data-v-3a22b8d5] .el-collapse-item__header {
|
|
233
234
|
font-weight: 600;
|
|
234
|
-
background-color: #f5f7fa;
|
|
235
|
-
padding: 0 16px;
|
|
236
|
-
}
|
|
237
|
-
.config-section[data-v-9074df2b] .el-collapse-item__content {
|
|
238
|
-
padding: 16px;
|
|
239
235
|
}
|
|
240
|
-
.config-section[data-v-
|
|
236
|
+
.config-section[data-v-3a22b8d5] .el-form-item {
|
|
241
237
|
margin-bottom: 18px;
|
|
242
238
|
}
|
|
243
239
|
|
|
@@ -325,68 +321,68 @@
|
|
|
325
321
|
}
|
|
326
322
|
|
|
327
323
|
|
|
328
|
-
.schema-tree[data-v-
|
|
324
|
+
.schema-tree[data-v-b2185ca2] {
|
|
329
325
|
height: 100%;
|
|
330
326
|
display: flex;
|
|
331
327
|
flex-direction: column;
|
|
332
328
|
background: var(--el-bg-color);
|
|
333
329
|
}
|
|
334
|
-
.tree-toolbar[data-v-
|
|
330
|
+
.tree-toolbar[data-v-b2185ca2] {
|
|
335
331
|
padding: 16px;
|
|
336
332
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
337
333
|
}
|
|
338
|
-
.toolbar-buttons[data-v-
|
|
334
|
+
.toolbar-buttons[data-v-b2185ca2] {
|
|
339
335
|
display: flex;
|
|
340
336
|
gap: 8px;
|
|
341
337
|
margin-top: 8px;
|
|
342
338
|
}
|
|
343
|
-
.tree-content[data-v-
|
|
339
|
+
.tree-content[data-v-b2185ca2] {
|
|
344
340
|
flex: 1;
|
|
345
341
|
overflow-y: auto;
|
|
346
342
|
padding: 16px;
|
|
347
343
|
}
|
|
348
|
-
.tree-node[data-v-
|
|
344
|
+
.tree-node[data-v-b2185ca2] {
|
|
349
345
|
display: flex;
|
|
350
346
|
align-items: center;
|
|
351
347
|
gap: 8px;
|
|
352
348
|
flex: 1;
|
|
353
349
|
padding: 4px 0;
|
|
354
350
|
}
|
|
355
|
-
.tree-node.is-container[data-v-
|
|
351
|
+
.tree-node.is-container[data-v-b2185ca2] {
|
|
356
352
|
font-weight: 600;
|
|
357
353
|
color: var(--el-color-primary);
|
|
358
354
|
}
|
|
359
|
-
.node-icon[data-v-
|
|
355
|
+
.node-icon[data-v-b2185ca2] {
|
|
360
356
|
font-size: 16px;
|
|
361
357
|
flex-shrink: 0;
|
|
362
358
|
}
|
|
363
|
-
.node-label[data-v-
|
|
359
|
+
.node-label[data-v-b2185ca2] {
|
|
364
360
|
flex: 1;
|
|
365
361
|
font-size: 14px;
|
|
366
362
|
}
|
|
367
|
-
.node-component[data-v-
|
|
363
|
+
.node-component[data-v-b2185ca2] {
|
|
368
364
|
font-size: 12px;
|
|
369
365
|
color: var(--el-text-color-secondary);
|
|
370
366
|
}
|
|
371
367
|
|
|
372
368
|
/* 拖拽时高亮 */
|
|
373
|
-
[data-v-
|
|
369
|
+
[data-v-b2185ca2] .el-tree-node.is-drop-inner > .el-tree-node__content {
|
|
374
370
|
background-color: var(--el-color-primary-light-9) !important;
|
|
375
371
|
border: 2px dashed var(--el-color-primary);
|
|
376
372
|
}
|
|
377
373
|
|
|
378
374
|
/* 选中状态 */
|
|
379
|
-
[data-v-
|
|
375
|
+
[data-v-b2185ca2] .el-tree-node.is-current > .el-tree-node__content {
|
|
380
376
|
background-color: var(--el-color-primary-light-9);
|
|
381
377
|
}
|
|
382
378
|
|
|
383
379
|
/* 悬浮状态 */
|
|
384
|
-
[data-v-
|
|
380
|
+
[data-v-b2185ca2] .el-tree-node__content:hover {
|
|
385
381
|
background-color: var(--el-fill-color-light);
|
|
386
382
|
}
|
|
387
383
|
|
|
388
384
|
/* 右键菜单 */
|
|
389
|
-
.context-menu[data-v-
|
|
385
|
+
.context-menu[data-v-b2185ca2] {
|
|
390
386
|
position: fixed;
|
|
391
387
|
background: var(--el-bg-color);
|
|
392
388
|
border: 1px solid var(--el-border-color-light);
|
|
@@ -396,7 +392,7 @@
|
|
|
396
392
|
min-width: 140px;
|
|
397
393
|
z-index: 9999;
|
|
398
394
|
}
|
|
399
|
-
.menu-item[data-v-
|
|
395
|
+
.menu-item[data-v-b2185ca2] {
|
|
400
396
|
display: flex;
|
|
401
397
|
align-items: center;
|
|
402
398
|
gap: 8px;
|
|
@@ -407,34 +403,34 @@
|
|
|
407
403
|
border-radius: 4px;
|
|
408
404
|
transition: all 0.2s;
|
|
409
405
|
}
|
|
410
|
-
.menu-item[data-v-
|
|
406
|
+
.menu-item[data-v-b2185ca2]:hover {
|
|
411
407
|
background-color: var(--el-fill-color-light);
|
|
412
408
|
color: var(--el-color-primary);
|
|
413
409
|
}
|
|
414
|
-
.menu-divider[data-v-
|
|
410
|
+
.menu-divider[data-v-b2185ca2] {
|
|
415
411
|
height: 1px;
|
|
416
412
|
background-color: var(--el-border-color-light);
|
|
417
413
|
margin: 4px 0;
|
|
418
414
|
}
|
|
419
415
|
|
|
420
416
|
/* Element Plus 图标大小调整 */
|
|
421
|
-
.menu-item .el-icon[data-v-
|
|
417
|
+
.menu-item .el-icon[data-v-b2185ca2] {
|
|
422
418
|
font-size: 16px;
|
|
423
419
|
}
|
|
424
420
|
|
|
425
421
|
/* 组件选择器弹窗 */
|
|
426
|
-
.component-picker-content[data-v-
|
|
422
|
+
.component-picker-content[data-v-b2185ca2] {
|
|
427
423
|
max-height: 70vh;
|
|
428
424
|
overflow-y: auto;
|
|
429
425
|
padding: 16px;
|
|
430
426
|
}
|
|
431
|
-
.picker-category-group[data-v-
|
|
427
|
+
.picker-category-group[data-v-b2185ca2] {
|
|
432
428
|
margin-bottom: 24px;
|
|
433
429
|
}
|
|
434
|
-
.picker-category-group[data-v-
|
|
430
|
+
.picker-category-group[data-v-b2185ca2]:last-child {
|
|
435
431
|
margin-bottom: 0;
|
|
436
432
|
}
|
|
437
|
-
.picker-category-title[data-v-
|
|
433
|
+
.picker-category-title[data-v-b2185ca2] {
|
|
438
434
|
font-size: 14px;
|
|
439
435
|
font-weight: 600;
|
|
440
436
|
color: var(--el-text-color-primary);
|
|
@@ -442,12 +438,12 @@
|
|
|
442
438
|
padding-bottom: 8px;
|
|
443
439
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
444
440
|
}
|
|
445
|
-
.picker-component-grid[data-v-
|
|
441
|
+
.picker-component-grid[data-v-b2185ca2] {
|
|
446
442
|
display: grid;
|
|
447
443
|
grid-template-columns: repeat(3, 1fr);
|
|
448
444
|
gap: 12px;
|
|
449
445
|
}
|
|
450
|
-
.picker-component-item[data-v-
|
|
446
|
+
.picker-component-item[data-v-b2185ca2] {
|
|
451
447
|
display: flex;
|
|
452
448
|
flex-direction: column;
|
|
453
449
|
align-items: center;
|
|
@@ -459,12 +455,12 @@
|
|
|
459
455
|
transition: all 0.2s;
|
|
460
456
|
background-color: var(--el-bg-color);
|
|
461
457
|
}
|
|
462
|
-
.picker-component-item[data-v-
|
|
458
|
+
.picker-component-item[data-v-b2185ca2]:hover {
|
|
463
459
|
border-color: var(--el-color-primary);
|
|
464
460
|
box-shadow: var(--el-box-shadow-light);
|
|
465
461
|
transform: translateY(-2px);
|
|
466
462
|
}
|
|
467
|
-
.picker-component-icon[data-v-
|
|
463
|
+
.picker-component-icon[data-v-b2185ca2] {
|
|
468
464
|
width: 48px;
|
|
469
465
|
height: 48px;
|
|
470
466
|
display: flex;
|
|
@@ -477,7 +473,7 @@
|
|
|
477
473
|
font-weight: 600;
|
|
478
474
|
margin-bottom: 8px;
|
|
479
475
|
}
|
|
480
|
-
.picker-component-name[data-v-
|
|
476
|
+
.picker-component-name[data-v-b2185ca2] {
|
|
481
477
|
font-size: 12px;
|
|
482
478
|
color: var(--el-text-color-regular);
|
|
483
479
|
text-align: center;
|
|
@@ -515,36 +511,36 @@
|
|
|
515
511
|
}
|
|
516
512
|
|
|
517
513
|
|
|
518
|
-
.designer[data-v-
|
|
514
|
+
.designer[data-v-aaa05eea] {
|
|
519
515
|
width: 100%;
|
|
520
516
|
/* height 通过 style 绑定设置 */
|
|
521
517
|
}
|
|
522
|
-
.designer-layout[data-v-
|
|
518
|
+
.designer-layout[data-v-aaa05eea] {
|
|
523
519
|
display: flex;
|
|
524
520
|
height: 100%;
|
|
525
521
|
overflow: hidden;
|
|
526
522
|
}
|
|
527
|
-
.designer-material[data-v-
|
|
523
|
+
.designer-material[data-v-aaa05eea] {
|
|
528
524
|
width: 280px;
|
|
529
525
|
height: 100%;
|
|
530
526
|
overflow-y: auto;
|
|
531
527
|
flex-shrink: 0;
|
|
532
528
|
}
|
|
533
|
-
.designer-canvas[data-v-
|
|
529
|
+
.designer-canvas[data-v-aaa05eea] {
|
|
534
530
|
flex: 1;
|
|
535
531
|
height: 100%;
|
|
536
532
|
border-left: 1px solid #dcdfe6;
|
|
537
533
|
border-right: 1px solid #dcdfe6;
|
|
538
534
|
overflow: hidden;
|
|
539
535
|
}
|
|
540
|
-
.designer-config[data-v-
|
|
541
|
-
width:
|
|
536
|
+
.designer-config[data-v-aaa05eea] {
|
|
537
|
+
width: 300px;
|
|
542
538
|
height: 100%;
|
|
543
539
|
background-color: #f5f7fa;
|
|
544
540
|
overflow: hidden;
|
|
545
541
|
flex-shrink: 0;
|
|
546
542
|
}
|
|
547
|
-
.designer-preview[data-v-
|
|
543
|
+
.designer-preview[data-v-aaa05eea] {
|
|
548
544
|
width: 100%;
|
|
549
545
|
height: 100%;
|
|
550
546
|
padding: 16px;
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Fragment as e,Teleport as t,computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createStaticVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,h as d,inject as f,mergeProps as p,nextTick as m,normalizeClass as h,normalizeProps as g,normalizeStyle as _,onBeforeUnmount as v,openBlock as y,provide as b,ref as x,renderList as S,renderSlot as C,resolveComponent as w,resolveDynamicComponent as T,shallowRef as E,toDisplayString as D,unref as O,vShow as k,watch as A,withCtx as j,withDirectives as ee,withModifiers as te}from"vue";import{uid as M}from"@formily/shared";import{deleteByPath as N,getByPath as P,getFieldNameFromPath as F,setByPath as I}from"@formily-djd/utils";import{ArrayItems as L,Checkbox as ne,FormItem as re,Input as ie,InputNumber as ae,Radio as R,Select as oe,Space as z,Switch as se}from"@formily/element-plus";import{FormProvider as B,RecursionField as ce,createSchemaField as V,useField as H,useFieldSchema as le}from"@formily/vue";import{createForm as U,isVoidField as W,onFormValuesChange as ue}from"@formily/core";import{Bottom as de,CirclePlus as G,CopyDocument as fe,Delete as pe,FolderAdd as me,Search as he,Top as ge}from"@element-plus/icons-vue";import{observer as _e}from"@formily/reactive-vue";const K=Symbol(`DesignStore`);function q(){let e=f(K);if(!e)throw Error(`[useDesignStore] 必须在 Designer 组件内使用`);return e}const J=Symbol(`ComponentSettings`),Y=Symbol(`ArrayField`),ve=Symbol(`ArrayItemKey`),ye=Symbol(`LeftPanel`);function be(e,t=`.canvas-content`){let r=x(null);function i(){if(!e.value){r.value=null;return}let n=document.querySelector(`[data-node-id="${e.value}"]`);if(!n){r.value=null;return}let i=document.querySelector(t);if(!i){r.value=null;return}let a=n.getBoundingClientRect(),o=i.getBoundingClientRect();r.value={x:a.x-o.x,y:a.y-o.y,width:a.width,height:a.height}}return A(e,()=>{i()},{immediate:!0}),n(()=>r.value)}function X(e,t,n=!0){let r=e=>{if(!n)return 0;let t=e*.1;return t>20?20:t<10?10:t},i=r(t.width),a=r(t.height);return e.x>=t.x+i&&e.x<=t.x+t.width-i&&e.y>=t.y+a&&e.y<=t.y+t.height-a}function xe(e,t){let n=Math.min(Math.abs(e.x-t.x),Math.abs(e.x-(t.x+t.width))),r=Math.min(Math.abs(e.y-t.y),Math.abs(e.y-(t.y+t.height)));return e.x>=t.x&&e.x<=t.x+t.width&&(n=0),e.y>=t.y&&e.y<=t.y+t.height&&(r=0),Math.sqrt(n**2+r**2)}function Se(e,t,n){return n?e.x>=t.x+t.width/2:e.y>=t.y+t.height/2}function Ce(e){return e.width>e.height}let Z=function(e){return e.Before=`BEFORE`,e.After=`AFTER`,e.Upper=`UPPER`,e.Under=`UNDER`,e.Inner=`INNER`,e.InnerBefore=`INNER_BEFORE`,e.InnerAfter=`INNER_AFTER`,e.ForbidBefore=`FORBID_BEFORE`,e.ForbidAfter=`FORBID_AFTER`,e.ForbidUpper=`FORBID_UPPER`,e.ForbidUnder=`FORBID_UNDER`,e.ForbidInner=`FORBID_INNER`,e.ForbidInnerBefore=`FORBID_INNER_BEFORE`,e.ForbidInnerAfter=`FORBID_INNER_AFTER`,e.Forbid=`FORBID`,e}({});var we=class{sensitive;forceBlock;dragNodes=x([]);touchNode=x(null);closestNode=x(null);closestPosition=x(Z.Before);closestRect=x(null);getNodeRect;getNodeSchema;getCanvasRect;findChildNodes;constructor(e,t){this.sensitive=t?.sensitive??!0,this.forceBlock=t?.forceBlock??!1,this.getNodeRect=e.getNodeRect,this.getNodeSchema=e.getNodeSchema,this.getCanvasRect=e.getCanvasRect,this.findChildNodes=e.findChildNodes}setDragNodes(e){this.dragNodes.value=e}calculate(e){let{point:t,touchNode:n,closestNode:r,closestPosition:i}=e;if(r!==void 0&&i!==void 0){this.closestNode.value=r,this.closestPosition.value=i,r&&(this.closestRect.value=this.getNodeRect(r));return}if(!t)return;n!==void 0&&(this.touchNode.value=n);let a=this.getClosestNode(t);if(this.closestNode.value=a,!a){this.closestPosition.value=Z.Before,this.closestRect.value=null;return}this.closestPosition.value=this.getClosestPosition(t,a),this.closestRect.value=this.getNodeRect(a)}getClosestNode(e){let t=this.touchNode.value;if(!t)return null;let n=this.getNodeRect(t);if(!n)return null;let r=this.findChildNodes(t);if(r.length===0)return t;let i=X(e,n,this.sensitive)?0:xe(e,n),a=t;for(let t of r){let n=this.getNodeRect(t);if(!n)continue;let r=X(e,n,this.sensitive)?0:xe(e,n);r<=i&&(i=r,a=t)}return a}getClosestPosition(e,t){console.log(`[Dragon] getClosestPosition`,t);let n=this.getNodeRect(t),r=this.getNodeSchema(t);if(!n||!r)return Z.Forbid;let i=this.getLayout(n)===`horizontal`,a=X(e,n,this.sensitive),o=this.isContainer(r),s=this.canInsertSibling(t),c=Se(e,n,i);return a?o&&this.canDropInside(t)?this.findChildNodes(t).length===0?Z.Inner:c?Z.InnerAfter:Z.InnerBefore:s?i?c?Z.After:Z.Before:c?Z.Under:Z.Upper:Z.Forbid:s?i?c?Z.ForbidAfter:Z.ForbidBefore:c?Z.ForbidUnder:Z.ForbidUpper:Z.Forbid}getLayout(e){return this.forceBlock?`vertical`:Ce(e)?`horizontal`:`vertical`}isContainer(e){return!e||e[`x-droppable`]===!1?!1:e.type===`object`||e.type===`void`||e.type===`array`}canInsertSibling(e){return!(e===``||e==null)}canDropInside(e){if(this.getNodeSchema(e)?.[`x-droppable`]===!1)return!1;let t=this.dragNodes.value;if(t.length===0)return!0;for(let n of t)if(n.nodePath===e||e.startsWith(`${n.nodePath}.`))return!1;return!0}clear(){this.dragNodes.value=[],this.touchNode.value=null,this.closestNode.value=null,this.closestPosition.value=Z.Before,this.closestRect.value=null}};function Te(e=!1){let t=x({type:`object`,properties:{}}),n=x(null),r=x(null),i=x(null),a=x(!1),o=x([]),s=x(null),c=x(null),l=x(Z.Before);function u(e){let t=document.querySelector(`[data-node-id="${e}"]`);if(!t)return null;let n=document.querySelector(`.canvas-content`);if(!n)return null;let r=t.getBoundingClientRect(),i=n.getBoundingClientRect();return{x:r.x-i.x,y:r.y-i.y,width:r.width,height:r.height}}function d(){let e=document.querySelector(`.canvas-content`);if(!e)return{x:0,y:0,width:0,height:0};let t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height}}let f=new we({getNodeRect:u,getNodeSchema:e=>P(t.value.properties,e),getCanvasRect:d,findChildNodes:e=>{let n=P(t.value.properties,e);if(!n)return[];let r=[];return n.properties&&Object.keys(n.properties).forEach(t=>{r.push(`${e}.properties.${t}`)}),n.items?.properties&&Object.keys(n.items.properties).forEach(t=>{r.push(`${e}.items.properties.${t}`)}),r}},{sensitive:!0,forceBlock:!1});function p(e,n){t.value.properties||(t.value.properties={}),t.value.properties[e]=n}function m(e,n){I(t.value.properties,e,n)}function h(e){n.value=e}function g(){return n.value&&P(t.value.properties,n.value)||null}function _(e){r.value=e,n.value=e}function v(e){i.value=e}function y(e){a.value=!0,o.value=e,f.setDragNodes(e)}function S(e,t){if(!a.value)return;t!==void 0&&(s.value=t);let n=d(),r={x:e.x-n.x,y:e.y-n.y};f.calculate({point:r,touchNode:s.value||void 0}),c.value=f.closestNode.value,l.value=f.closestPosition.value}function C(){if(console.log(`[DesignStore] drop`),!a.value)return;let e=c.value,t=l.value;if(!e){w();return}if(t.includes(`FORBID`)){w();return}let n=o.value;if(n.length===0){w();return}n.length===1&&T(n[0].nodePath,e,t),w()}function w(){a.value=!1,o.value=[],s.value=null,c.value=null,l.value=Z.Before,f.clear()}function T(e,n,r){let i=N(t.value.properties,e);if(!i)return;let a=F(e);if(r===Z.Inner||r===Z.InnerAfter||r===Z.InnerBefore){let e=P(t.value.properties,n);if(!e)return;let o,s;if(e.type===`array`?(e.items||={type:`object`,properties:{}},e.items.properties||(e.items.properties={}),o=e.items.properties,s=`${n}.items.properties`):(e.properties||={},o=e.properties,s=`${n}.properties`),r===Z.InnerBefore){let e={[a]:i,...o};I(t.value.properties,s,e)}else I(t.value.properties,`${s}.${a}`,i)}else{let e=r===Z.Before||r===Z.Upper?`before`:`after`,o=n.split(`.`),s=o[o.length-1],c,l=o.includes(`items`);if(o.length===1)c=``;else if(l){let e=o.lastIndexOf(`items`);c=`${o.slice(0,e).join(`.`)}.items.properties`}else{let e=o.lastIndexOf(`properties`);c=o.slice(0,e+1).join(`.`)}let u=c?P(t.value.properties,c):t.value.properties;if(!u){console.warn(`父节点的 properties 不存在:`,c);return}let d=Object.entries(u),f=d.findIndex(([e])=>e===s);if(f===-1){console.warn(`目标字段不存在:`,s);return}let p=e===`after`?f+1:f,m=[...d.slice(0,p),[a,i],...d.slice(p)],h={};m.forEach(([e,t])=>{h[e]=t}),c?I(t.value.properties,c,h):t.value.properties=h}}function E(e,n,r,i){if(!e){t.value.properties||(t.value.properties={}),t.value.properties[n]=r;return}if(i===Z.Inner||i===Z.InnerAfter||i===Z.InnerBefore){let a=P(t.value.properties,e);if(!a)return;let o,s;if(a.type===`array`?(a.items||={type:`object`,properties:{}},a.items.properties||(a.items.properties={}),o=a.items.properties,s=`${e}.items.properties`):(a.properties||={},o=a.properties,s=`${e}.properties`),i===Z.InnerBefore){let e={[n]:r,...o};I(t.value.properties,s,e)}else I(t.value.properties,`${s}.${n}`,r)}else{let a=i===Z.Before||i===Z.Upper?`before`:`after`,o=e.split(`.`),s=o[o.length-1],c,l=o.includes(`items`);if(o.length===1)c=``;else if(l){let e=o.lastIndexOf(`items`);c=`${o.slice(0,e).join(`.`)}.items.properties`}else{let e=o.lastIndexOf(`properties`);c=o.slice(0,e+1).join(`.`)}let u=c?P(t.value.properties,c):t.value.properties;if(!u){console.warn(`父节点的 properties 不存在:`,c);return}let d=Object.entries(u),f=d.findIndex(([e])=>e===s);if(f===-1){console.warn(`目标字段不存在:`,s);return}let p=a===`after`?f+1:f,m=[...d.slice(0,p),[n,r],...d.slice(p)],h={};m.forEach(([e,t])=>{h[e]=t}),c?I(t.value.properties,c,h):t.value.properties=h}}function D(e){return P(t.value.properties,e)}function O(e){let n=P(t.value.properties,e);if(!n)return[];let r=[];return n.properties&&Object.keys(n.properties).forEach(t=>{let n=e?`${e}.properties.${t}`:t;r.push(n)}),n.items?.properties&&Object.keys(n.items.properties).forEach(t=>{let n=`${e}.items.properties.${t}`;r.push(n)}),r}let k={formSchema:t,selectedFieldName:n,selectedNodeId:r,hoveredNodeId:i,draggable:e,dragon:f,isDragging:a,dragNodes:o,touchNode:s,closestNode:c,closestPosition:l,addField:p,updateFieldSchema:m,selectField:h,selectNode:_,getSelectedField:g,setHover:v,startDrag:y,updateDragPosition:S,drop:C,cancelDrag:w,moveField:T,insertField:E,getNodeSchema:D,findChildNodes:O};return b(K,k),k}function Ee(e,t){let n={};return Object.entries(t.properties||{}).forEach(([t,r])=>{let i=r[`x-path`];if(i){let r=P(e,i);r!==void 0&&(n[t]=r)}}),n}function De(e,t,n){let r=JSON.parse(JSON.stringify(n));return Object.entries(t.properties||{}).forEach(([t,n])=>{let i=n[`x-path`];i&&e[t]!==void 0&&I(r,i,e[t])}),r}var Q=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},Oe=Q(u({__name:`HoverBox`,setup(e){let t=q(),r=be(t.hoveredNodeId),o=n(()=>!t.hoveredNodeId.value||!t.selectedNodeId.value?!1:t.hoveredNodeId.value===t.selectedNodeId.value),s=n(()=>{let e={position:`absolute`,top:0,left:0,boxSizing:`border-box`,pointerEvents:`none`,zIndex:2,visibility:`hidden`};return r.value&&!o.value&&(e.transform=`perspective(1px) translate3d(${r.value.x}px, ${r.value.y}px, 0)`,e.width=`${r.value.width}px`,e.height=`${r.value.height}px`,e.visibility=`visible`),e}),c=n(()=>r.value&&!o.value);return(e,t)=>c.value?(y(),a(`div`,{key:0,class:`hover-box`,style:_(s.value)},null,4)):i(``,!0)}}),[[`__scopeId`,`data-v-2759debe`]]),ke=Q(u({__name:`Insertion`,setup(e){let t=q(),r=n(()=>{if(!t.isDragging.value||!t.closestNode.value)return{display:`none`};let e=t.closestPosition.value,n=t.dragon.closestRect.value;if(!n)return{display:`none`};let r=e.toString().includes(`FORBID`),i={position:`absolute`,backgroundColor:r?`#ef4444`:`#3b82f6`,pointerEvents:`none`,zIndex:10,transition:`all 0.15s cubic-bezier(0.4, 0, 0.2, 1)`,boxShadow:r?`0 0 8px rgba(239, 68, 68, 0.5)`:`0 0 8px rgba(59, 130, 246, 0.5)`};switch(e){case Z.Before:case Z.ForbidBefore:Object.assign(i,{width:`2px`,height:`${n.height}px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y}px, 0)`});break;case Z.After:case Z.ForbidAfter:Object.assign(i,{width:`2px`,height:`${n.height}px`,transform:`perspective(1px) translate3d(${n.x+n.width-2}px, ${n.y}px, 0)`});break;case Z.Upper:case Z.ForbidUpper:Object.assign(i,{width:`${n.width}px`,height:`2px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y}px, 0)`});break;case Z.Under:case Z.ForbidUnder:Object.assign(i,{width:`${n.width}px`,height:`2px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y+n.height-2}px, 0)`});break;case Z.Inner:case Z.InnerBefore:case Z.InnerAfter:case Z.ForbidInner:case Z.ForbidInnerBefore:case Z.ForbidInnerAfter:Object.assign(i,{width:`${n.width}px`,height:`${n.height}px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y}px, 0)`,backgroundColor:`transparent`,border:r?`2px dashed #ef4444`:`2px dashed #3b82f6`});break;case Z.Forbid:return{display:`none`};default:return{display:`none`}}return i});return(e,n)=>O(t).draggable?(y(),a(`div`,{key:0,class:`insertion-indicator`,style:_(r.value)},null,4)):i(``,!0)}}),[[`__scopeId`,`data-v-9dbef644`]]),Ae=Q(u({__name:`SelectionBox`,setup(e){let t=be(q().selectedNodeId),r=n(()=>{let e={position:`absolute`,top:0,left:0,boxSizing:`border-box`,pointerEvents:`none`,zIndex:4,visibility:`hidden`};return t.value&&(e.transform=`perspective(1px) translate3d(${t.value.x-2}px, ${t.value.y-2}px, 0)`,e.width=`${t.value.width+4}px`,e.height=`${t.value.height+4}px`,e.visibility=`visible`),e}),s=n(()=>t.value!==null);return(e,t)=>s.value?(y(),a(`div`,{key:0,class:`selection-box`,style:_(r.value)},[...t[0]||=[o(`div`,{class:`selection-box-inner`},null,-1)]],4)):i(``,!0)}}),[[`__scopeId`,`data-v-c58abee5`]]);const je={class:`aux-tool-widget`};var Me=Q(u({__name:`AuxToolWidget`,setup(e){return(e,t)=>(y(),a(`div`,je,[l(Oe),l(Ae),l(ke)]))}}),[[`__scopeId`,`data-v-d048dbcd`]]);const $={type:`object`,properties:{title:{type:`string`,title:`字段标题`,"x-component":`Input`,"x-decorator":`FormItem`,"x-path":`title`},description:{type:`string`,title:`字段描述`,"x-component":`Input`,"x-decorator":`FormItem`,"x-path":`description`},required:{type:`boolean`,title:`是否必填`,"x-component":`Switch`,"x-decorator":`FormItem`,"x-path":`required`},"x-display":{type:`string`,title:`显示状态`,"x-component":`Select`,"x-decorator":`FormItem`,"x-path":`x-display`,"x-component-props":{options:[{label:`显示`,value:`visible`},{label:`隐藏(占位)`,value:`hidden`},{label:`隐藏(不占位)`,value:`none`}]}},"x-pattern":{type:`string`,title:`交互模式`,"x-component":`Select`,"x-decorator":`FormItem`,"x-path":`x-pattern`,"x-component-props":{options:[{label:`可编辑`,value:`editable`},{label:`禁用`,value:`disabled`},{label:`只读`,value:`readOnly`}]}}}};function Ne(e,t){let n={...e?.[`x-component-props`]||{}};return $.properties&&Object.entries($.properties).forEach(([t,r])=>{let i=r[`x-path`];if(i){let r=P(e,i);r!==void 0&&(n[t]=r)}}),t.properties&&Object.entries(t.properties).forEach(([t,r])=>{let i=r[`x-path`];if(i){let r=P(e,i);r!==void 0&&(n[t]=r)}}),n}function Pe(e){if(e?.[`x-droppable`]===!1)return!1;let t=e.type;return(t===`object`||t===`void`||t===`array`)&&!!e.properties}function Fe(e){return e.type===`array`&&!!e.items}const Ie=[`data-node-id`,`draggable`],Le={key:0,class:`empty-container-placeholder`},Re={key:0,class:`empty-container-placeholder`};var ze=Q(u({name:`CanvasField`,__name:`index`,props:{schema:{},fieldName:{},nodePath:{}},setup(t){let s=t,c=f(J)??{},l=q(),u=n(()=>s.schema?.[`x-component`]),d=n(()=>s.nodePath?s.fieldName?s.nodePath?`${s.nodePath}.${s.fieldName}`:s.fieldName:s.nodePath:s.fieldName||``),m=n(()=>l.selectedNodeId.value===d.value),_=n(()=>!l.draggable||!s.fieldName?!1:m.value);function v(){return s.schema?.type===`array`?d.value?`${d.value}.items`:``:d.value?`${d.value}.properties`:``}let b=n(()=>{let e=s.schema;if(!e||e[`x-droppable`]===!1)return!1;let t=e.type===`object`||e.type===`void`,n=!e.properties||Object.keys(e.properties).length===0;return t&&n});function x(e){if(!_.value||!e.dataTransfer)return;let t={type:`move-component`,nodePath:d.value,fieldName:s.fieldName,schema:s.schema};e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`application/json`,JSON.stringify(t)),l.startDrag([{nodePath:d.value,fieldName:s.fieldName||``,schema:s.schema}])}function C(){l.cancelDrag()}return(t,n)=>{let l=w(`CanvasField`);return s.schema?(y(),a(`div`,{key:0,"data-node-id":d.value,class:h({"is-draggable":_.value,"is-selected":m.value}),draggable:_.value,onDragstart:x,onDragend:C},[u.value&&O(c)[u.value]?(y(),r(T(O(c)[u.value].component),g(p({key:0},O(Ne)(s.schema,O(c)[u.value].setterSchema))),{default:j(()=>[b.value?(y(),a(`div`,Le,[...n[0]||=[o(`svg`,{class:`placeholder-icon`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`},[o(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`,stroke:`currentColor`,"stroke-width":`2`}),o(`path`,{d:`M12 8v8M8 12h8`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`})],-1),o(`span`,{class:`placeholder-text`},`拖拽组件到这里`,-1)]])):i(``,!0),O(Fe)(s.schema)?(y(),r(l,{key:1,schema:s.schema.items,"node-path":`${v()}`},null,8,[`schema`,`node-path`])):i(``,!0),O(Pe)(s.schema)?(y(!0),a(e,{key:2},S(Object.keys(s.schema?.properties||{}),e=>(y(),r(l,{key:e,schema:s.schema?.properties?.[e],"field-name":e,"node-path":v()},null,8,[`schema`,`field-name`,`node-path`]))),128)):i(``,!0)]),_:1},16)):(y(),a(e,{key:1},[b.value?(y(),a(`div`,Re,[...n[1]||=[o(`svg`,{class:`placeholder-icon`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`},[o(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`,stroke:`currentColor`,"stroke-width":`2`}),o(`path`,{d:`M12 8v8M8 12h8`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`})],-1),o(`span`,{class:`placeholder-text`},`拖拽组件到这里`,-1)]])):i(``,!0),(y(!0),a(e,null,S(Object.keys(s.schema?.properties||{}),e=>(y(),r(l,{key:e,schema:s.schema?.properties?.[e],"field-name":e,"node-path":v()},null,8,[`schema`,`field-name`,`node-path`]))),128))],64))],42,Ie)):i(``,!0)}}}),[[`__scopeId`,`data-v-7c768391`]]);const Be={class:`canvas djd-design`},Ve={key:1,class:`empty-canvas`};var He=Q(u({__name:`canvas`,props:{components:{}},setup(e){b(J,e.components);let t=q(),c=x(!1),u=n(()=>{let e=t.formSchema.value?.properties;return!e||Object.keys(e).length===0});function d(e){let n=e.target.closest(`[data-node-id]`);if(n){let e=n.getAttribute(`data-node-id`);e&&(console.log(e),t.selectNode(e))}else t.selectNode(null)}function f(e){let n=e.target.closest(`[data-node-id]`)?.getAttribute(`data-node-id`);if(t.setHover(n||null),t.isDragging.value){let r={x:e.clientX,y:e.clientY};t.updateDragPosition(r,n||void 0)}}function p(){t.setHover(null)}function m(e){if(!t.draggable||(e.preventDefault(),e.stopPropagation(),!e.dataTransfer))return;let n=t.dragNodes.value.length>0;e.dataTransfer.dropEffect=n?`move`:`copy`,c.value=!0,t.isDragging.value||t.startDrag([]);let r=e.target.closest(`[data-node-id]`)?.getAttribute(`data-node-id`),i={x:e.clientX,y:e.clientY};t.updateDragPosition(i,r||void 0)}function g(e){e.target.classList.contains(`canvas-content`)&&(c.value=!1)}function _(e){if(t.draggable&&(console.log(`[Canvas] handleDrop`),e.preventDefault(),e.stopPropagation(),c.value=!1,e.dataTransfer))try{let t=e.dataTransfer.getData(`application/json`);if(!t)return;let n=JSON.parse(t);console.log(`dragData`,n),n.type===`new-component`?v(n):n.type===`move-component`&&S()}catch(e){console.error(`解析拖拽数据失败:`,e)}}function v(e){let{componentKey:n,defaultSchema:r}=e;if(!r){console.warn(`组件缺少 defaultSchema:`,n);return}let i=`f_${M()}`,a=t.closestNode.value,o=t.closestPosition.value;a?t.insertField(a,i,r,o):t.addField(i,r),t.selectNode(i),t.cancelDrag()}function S(){t.drop()}return(e,n)=>(y(),a(`div`,Be,[n[1]||=o(`h3`,null,`画布`,-1),o(`div`,{class:h([`canvas-content`,{"drag-over":c.value,empty:u.value}]),onClick:d,onMousemove:f,onMouseleave:p,onDragover:m,onDragleave:g,onDrop:_},[O(t).formSchema.value?(y(),r(ze,{key:0,schema:O(t).formSchema.value},null,8,[`schema`])):i(``,!0),u.value?(y(),a(`div`,Ve,[...n[0]||=[s(`<div class="empty-hint" data-v-d3817052><svg class="empty-icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-v-d3817052><rect x="3" y="3" width="18" height="18" rx="2" ry="2" data-v-d3817052></rect><line x1="9" y1="9" x2="15" y2="15" data-v-d3817052></line><line x1="15" y1="9" x2="9" y2="15" data-v-d3817052></line></svg><p data-v-d3817052>从左侧拖拽组件到这里开始设计</p></div>`,1)]])):i(``,!0),l(Me)],34)]))}}),[[`__scopeId`,`data-v-d3817052`]]);function Ue(e,t){let n=t.getSelectedField();return U({values:n?Ee(n,e):{},effects(){ue(n=>{let r=t.getSelectedField(),i=t.selectedFieldName.value;if(!r||!i)return;let a=De(n.values,e,r);t.updateFieldSchema(i,a)})}})}const We={class:`reactions-editor`},Ge={class:`section`},Ke={class:`section-header`},qe={key:0,class:`empty-tip`},Je={key:1,class:`dependency-list`},Ye={class:`dependency-header`},Xe={class:`dependency-index`},Ze={class:`section`},Qe={class:`section-header`},$e={key:0,class:`empty-tip`},et={key:1,class:`state-rule-list`},tt={class:`state-rule-header`},nt={class:`state-rule-index`};var rt=Q(u({__name:`ReactionsEditor`,props:{modelValue:{type:Boolean},schema:{},currentFieldName:{},initialReactions:{}},emits:[`update:modelValue`,`save`],setup(t,{emit:i}){let s=t,u=i,d=n({get:()=>s.modelValue,set:e=>u(`update:modelValue`,e)}),f=x([]),p=x([]),m=[{label:`显示/隐藏 (visible)`,value:`visible`},{label:`禁用 (disabled)`,value:`disabled`},{label:`只读 (readOnly)`,value:`readOnly`},{label:`值 (value)`,value:`value`},{label:`显示模式 (display)`,value:`display`},{label:`模式 (pattern)`,value:`pattern`},{label:`必填 (required)`,value:`required`},{label:`标题 (title)`,value:`title`},{label:`描述 (description)`,value:`description`}],h=[{label:`值 (value)`,value:`value`},{label:`显示模式 (display)`,value:`display`},{label:`模式 (pattern)`,value:`pattern`},{label:`初始值 (initialValue)`,value:`initialValue`},{label:`错误信息 (errors)`,value:`errors`},{label:`验证状态 (valid)`,value:`valid`}],g=[{label:`任意类型 (any)`,value:`any`},{label:`字符串 (string)`,value:`string`},{label:`数字 (number)`,value:`number`},{label:`布尔值 (boolean)`,value:`boolean`},{label:`数组 (array)`,value:`array`},{label:`对象 (object)`,value:`object`}],_=n(()=>{function e(t,n=``){if(!t)return[];let r=[];return Object.entries(t).forEach(([t,i])=>{let a=n?`${n}.${t}`:t,o=i.title||t;if(a===s.currentFieldName||a.startsWith(`${s.currentFieldName}.`))return;let c={value:a,label:`${o} (${t})`,children:void 0};if(i.properties){let t=e(i.properties,a);t.length>0&&(c.children=t)}r.push(c)}),r}return e(s.schema?.properties)});function v(){let e=s.initialReactions;if(!e){f.value=[],p.value=[];return}e.dependencies&&Array.isArray(e.dependencies)&&(f.value=e.dependencies.map(e=>({source:e.source||``,property:e.property||`value`,name:e.name||``,type:e.type||`any`}))),e.fulfill?.state&&(p.value=Object.entries(e.fulfill.state).map(([e,t])=>({state:e,expression:String(t).replace(/^\{\{|\}\}$/g,``).trim()})))}function b(){v()}function C(){f.value.push({source:``,property:`value`,name:``,type:`any`})}function T(e){f.value.splice(e,1)}function E(e){!e.name&&e.source&&(e.name=`${e.source.split(`.`).pop()||e.source}_${e.property}`)}function O(){p.value.push({state:`visible`,expression:``})}function k(e){p.value.splice(e,1)}function A(){let e={};f.value.length>0&&(e.dependencies=f.value.filter(e=>e.source).map(e=>({source:e.source,property:e.property,name:e.name,type:e.type}))),p.value.length>0&&(e.fulfill={state:{}},p.value.forEach(t=>{t.state&&t.expression&&(e.fulfill.state[t.state]=`{{${t.expression}}}`)})),u(`save`,e),d.value=!1}function ee(){d.value=!1}return(t,n)=>{let i=w(`ElButton`),s=w(`ElTreeSelect`),u=w(`ElFormItem`),v=w(`ElOption`),x=w(`ElSelect`),te=w(`ElInput`),M=w(`ElForm`),N=w(`ElDialog`);return y(),r(N,{modelValue:d.value,"onUpdate:modelValue":n[0]||=e=>d.value=e,title:`条件渲染配置`,width:`800px`,onOpen:b},{footer:j(()=>[l(i,{onClick:ee},{default:j(()=>[...n[8]||=[c(` 取消 `,-1)]]),_:1}),l(i,{type:`primary`,onClick:A},{default:j(()=>[...n[9]||=[c(` 保存 `,-1)]]),_:1})]),default:j(()=>[o(`div`,We,[o(`div`,Ge,[o(`div`,Ke,[n[2]||=o(`span`,{class:`section-title`},`依赖字段`,-1),l(i,{size:`small`,type:`primary`,onClick:C},{default:j(()=>[...n[1]||=[c(` 添加依赖 `,-1)]]),_:1})]),f.value.length===0?(y(),a(`div`,qe,` 暂无依赖字段,点击"添加依赖"按钮添加 `)):(y(),a(`div`,Je,[(y(!0),a(e,null,S(f.value,(t,r)=>(y(),a(`div`,{key:r,class:`dependency-item`},[o(`div`,Ye,[o(`span`,Xe,`依赖 `+D(r+1),1),l(i,{size:`small`,type:`danger`,text:``,onClick:e=>T(r)},{default:j(()=>[...n[3]||=[c(` 删除 `,-1)]]),_:1},8,[`onClick`])]),l(M,{"label-width":`80px`},{default:j(()=>[l(u,{label:`字段`},{default:j(()=>[l(s,{modelValue:t.source,"onUpdate:modelValue":e=>t.source=e,data:_.value,placeholder:`选择依赖的字段`,clearable:``,"check-strictly":``,"render-after-expand":!1,onChange:e=>E(t)},null,8,[`modelValue`,`onUpdate:modelValue`,`data`,`onChange`])]),_:2},1024),l(u,{label:`属性`},{default:j(()=>[l(x,{modelValue:t.property,"onUpdate:modelValue":e=>t.property=e,placeholder:`选择属性`,onChange:e=>E(t)},{default:j(()=>[(y(),a(e,null,S(h,e=>l(v,{key:e.value,label:e.label,value:e.value},null,8,[`label`,`value`])),64))]),_:1},8,[`modelValue`,`onUpdate:modelValue`,`onChange`])]),_:2},1024),l(u,{label:`变量名`},{default:j(()=>[l(te,{modelValue:t.name,"onUpdate:modelValue":e=>t.name=e,placeholder:`在表达式中使用的变量名`},null,8,[`modelValue`,`onUpdate:modelValue`])]),_:2},1024),l(u,{label:`类型`},{default:j(()=>[l(x,{modelValue:t.type,"onUpdate:modelValue":e=>t.type=e,placeholder:`选择类型`},{default:j(()=>[(y(),a(e,null,S(g,e=>l(v,{key:e.value,label:e.label,value:e.value},null,8,[`label`,`value`])),64))]),_:1},8,[`modelValue`,`onUpdate:modelValue`])]),_:2},1024)]),_:2},1024)]))),128))]))]),o(`div`,Ze,[o(`div`,Qe,[n[5]||=o(`span`,{class:`section-title`},`状态控制`,-1),l(i,{size:`small`,type:`primary`,onClick:O},{default:j(()=>[...n[4]||=[c(` 添加规则 `,-1)]]),_:1})]),p.value.length===0?(y(),a(`div`,$e,` 暂无状态规则,点击"添加规则"按钮添加 `)):(y(),a(`div`,et,[(y(!0),a(e,null,S(p.value,(t,r)=>(y(),a(`div`,{key:r,class:`state-rule-item`},[o(`div`,tt,[o(`span`,nt,`规则 `+D(r+1),1),l(i,{size:`small`,type:`danger`,text:``,onClick:e=>k(r)},{default:j(()=>[...n[6]||=[c(` 删除 `,-1)]]),_:1},8,[`onClick`])]),l(M,{"label-width":`80px`},{default:j(()=>[l(u,{label:`状态属性`},{default:j(()=>[l(x,{modelValue:t.state,"onUpdate:modelValue":e=>t.state=e,placeholder:`选择要控制的状态`},{default:j(()=>[(y(),a(e,null,S(m,e=>l(v,{key:e.value,label:e.label,value:e.value},null,8,[`label`,`value`])),64))]),_:1},8,[`modelValue`,`onUpdate:modelValue`])]),_:2},1024),l(u,{label:`表达式`},{default:j(()=>[l(te,{modelValue:t.expression,"onUpdate:modelValue":e=>t.expression=e,type:`textarea`,rows:2,placeholder:`输入 JS 表达式,如:$deps.username_value === '123'`},null,8,[`modelValue`,`onUpdate:modelValue`]),n[7]||=o(`div`,{class:`expression-tip`},` 使用 $deps.变量名 访问依赖字段的值 `,-1)]),_:2},1024)]),_:2},1024)]))),128))]))])])]),_:1},8,[`modelValue`])}}}),[[`__scopeId`,`data-v-0aa160aa`]]);const it={class:`config-panel`},at={key:0,class:`config-empty`},ot={key:1,class:`config-content`},st={class:`config-title`};var ct=Q(u({__name:`index`,props:{components:{}},setup(e){let t=e,s=q(),{SchemaField:u}=V({components:{FormItem:re,Input:ie,InputNumber:ae,Checkbox:ne,Radio:R,Switch:se,Select:oe,Space:z,ArrayItems:L}}),d=E(null),f=n(()=>s.getSelectedField()),p=n(()=>f.value?f.value[`x-component`]:null),m=n(()=>{let e=p.value;return e?t.components[e]?.setterSchema:null}),h=n(()=>m.value?{type:`object`,properties:{...$.properties,...m.value.properties||{}}}:null);A(()=>s.selectedFieldName.value,()=>{f.value&&h.value?d.value=Ue(h.value,s):d.value=null},{immediate:!0});let g=E([`base`,`operate`,`component`]),_=n(()=>s.selectedFieldName.value||`empty`),v=x(!1);function b(){v.value=!0}function S(e){let t=s.selectedFieldName.value;if(!t)return;let n=s.getSelectedField();if(!n)return;let r={...n,"x-reactions":Object.keys(e).length>0?e:void 0};s.updateFieldSchema(t,r)}return(e,t)=>{let n=w(`ElCollapseItem`),h=w(`ElButton`),x=w(`ElCollapse`);return y(),a(`div`,it,[f.value?(y(),a(`div`,ot,[o(`h3`,st,D(p.value)+` 配置 `,1),d.value?(y(),r(O(B),{key:_.value,form:d.value},{default:j(()=>[l(x,{modelValue:g.value,"onUpdate:modelValue":t[0]||=e=>g.value=e,class:`config-section`},{default:j(()=>[l(n,{name:`base`,title:`基础配置`},{default:j(()=>[l(O(u),{schema:O($)},null,8,[`schema`])]),_:1}),l(n,{name:`operate`,title:`操作配置`},{default:j(()=>[o(`div`,null,[l(h,{type:`primary`,onClick:b},{default:j(()=>[...t[3]||=[c(` 条件渲染 `,-1)]]),_:1})])]),_:1}),m.value?(y(),r(n,{key:0,name:`component`,title:`组件配置`},{default:j(()=>[l(O(u),{schema:m.value},null,8,[`schema`])]),_:1})):i(``,!0)]),_:1},8,[`modelValue`])]),_:1},8,[`form`])):i(``,!0),l(rt,{modelValue:v.value,"onUpdate:modelValue":t[1]||=e=>v.value=e,schema:O(s).formSchema.value,"current-field-name":O(s).selectedFieldName.value,"initial-reactions":f.value?.[`x-reactions`],onSave:S},null,8,[`modelValue`,`schema`,`current-field-name`,`initial-reactions`])])):(y(),a(`div`,at,[...t[2]||=[o(`p`,null,`请选择一个字段`,-1)]]))])}}}),[[`__scopeId`,`data-v-9074df2b`]]);const lt={class:`material-panel`},ut={class:`panel-content`},dt={class:`category-title`},ft={class:`component-grid`},pt=[`onClick`,`onDragstart`],mt={class:`component-icon`},ht={class:`component-name`},gt={key:0,class:`component-desc`};var _t=Q(u({__name:`materialPanel`,props:{components:{}},setup(t){let r=t,s=f(ye,null),c=n(()=>{let e={};return Object.entries(r.components).forEach(([t,n])=>{if(n.config?.hidden===!0)return;let r=n.config?.category||`其他`;e[r]||(e[r]=[]),e[r].push({key:t,component:n})}),e});function l(e,t,n){if(!e.dataTransfer)return;let r={type:`new-component`,componentKey:t,componentName:n.config.name,defaultSchema:n.defaultSchema};e.dataTransfer.effectAllowed=`copy`,e.dataTransfer.setData(`application/json`,JSON.stringify(r));let i=e.target;e.dataTransfer.setDragImage(i,10,10),setTimeout(()=>{s?.switchToTreeTab()},100)}function u(e){let t=e.target;t.style.opacity=`1`}function d(e){console.log(`点击组件:`,e)}return(t,n)=>(y(),a(`div`,lt,[n[0]||=o(`div`,{class:`panel-header`},[o(`h3`,null,`组件库`)],-1),o(`div`,ut,[(y(!0),a(e,null,S(c.value,(t,n)=>(y(),a(`div`,{key:n,class:`category-group`},[o(`div`,dt,D(n),1),o(`div`,ft,[(y(!0),a(e,null,S(t,({key:e,component:t})=>(y(),a(`div`,{key:e,class:`component-item`,draggable:`true`,onClick:t=>d(e),onDragstart:n=>l(n,e,t),onDragend:u},[o(`div`,mt,D(t.config?.icon?.slice(0,3)),1),o(`div`,ht,D(t.config?.name||e),1),t.config?.description?(y(),a(`div`,gt,D(t.config.description),1)):i(``,!0)],40,pt))),128))])]))),128))])]))}}),[[`__scopeId`,`data-v-93609a69`]]);const vt={class:`schema-tree`},yt={class:`tree-toolbar`},bt={class:`toolbar-buttons`},xt={class:`node-label`},St={class:`node-component`},Ct={key:0,class:`menu-divider`},wt=[`onClick`],Tt={class:`component-picker-content`},Et={class:`picker-category-title`},Dt={class:`picker-component-grid`},Ot=[`onClick`],kt={class:`picker-component-icon`},At={class:`picker-component-name`};var jt=Q(u({__name:`SchemaTree`,setup(i){let s=q(),u=f(`designerComponents`,{}),d=x(),p=x(``),g=x(!1),v=x({top:`0px`,left:`0px`}),b=x(null),C=x(`node`),E=x(!1),A=x(null);function P(e,t=``){let n=[];return!e||typeof e!=`object`?n:(e.properties&&typeof e.properties==`object`&&Object.entries(e.properties).forEach(([e,r])=>{let i=t?`${t}.properties.${e}`:e,a=r[`x-component`]||`Unknown`,o=r.title||e,s={path:i,label:o,title:o,component:a,isContainer:F(r),children:P(r,i)};n.push(s)}),e.items?.properties&&Object.entries(e.items.properties).forEach(([e,r])=>{let i=`${t}.items.properties.${e}`,a=r[`x-component`]||`Unknown`,o=r.title||e,s={path:i,label:o,title:o,component:a,isContainer:F(r),children:P(r,i)};n.push(s)}),n)}function F(e){return e[`x-droppable`]===!1?!1:!![`object`,`void`,`array`].includes(e.type)}let L=n(()=>P(s.formSchema.value)),ne=n(()=>{let e={};return Object.entries(u).forEach(([t,n])=>{if(n.config?.hidden===!0)return;let r=n.config?.category||`其他`;e[r]||(e[r]=[]),e[r].push({key:t,component:n})}),e}),re={children:`children`,label:`label`};function ie(e,t){return e?t.label.toLowerCase().includes(e.toLowerCase()):!0}function ae(e){d.value?.filter(e)}function R(){z(L.value).forEach(e=>{let t=d.value?.getNode(e);t&&(t.expanded=!0)})}function oe(){z(L.value).forEach(e=>{let t=d.value?.getNode(e);t&&(t.expanded=!1)})}function z(e){let t=[];return e.forEach(e=>{t.push(e.path),e.children&&e.children.length>0&&t.push(...z(e.children))}),t}function se(e){s.selectNode(e.path)}function B(e){return!0}function ce(e,t,n){let r=t.data;return n===`inner`?r.isContainer:!0}function V(e,t,n,r){let i=e.data,a=t.data,o;o=n===`inner`?`INNER`:n===`before`?`BEFORE`:`AFTER`,s.moveField(i.path,a.path,o)}let H=n(()=>{if(C.value===`empty`)return[{type:`insertRoot`,label:`插入组件`,icon:G}];let e=b.value;if(!e)return[];let t=[{type:`copy`,label:`复制`,icon:fe},{type:`delete`,label:`删除`,icon:pe},`divider`,{type:`moveUp`,label:`上移`,icon:ge},{type:`moveDown`,label:`下移`,icon:de},`divider`,{type:`insertBefore`,label:`上方插入`,icon:G},{type:`insertAfter`,label:`下方插入`,icon:G}];return e.isContainer&&t.push({type:`insertInner`,label:`插入内部组件`,icon:me}),t});function le(e){e.preventDefault(),e.stopPropagation(),C.value=`empty`,b.value=null,v.value={top:`${e.clientY}px`,left:`${e.clientX}px`},g.value=!0;let t=()=>{g.value=!1,document.removeEventListener(`click`,t)};setTimeout(()=>{document.addEventListener(`click`,t)},0)}function U(e,t,n,r){e.preventDefault(),e.stopPropagation(),C.value=`node`,b.value=t,v.value={top:`${e.clientY}px`,left:`${e.clientX}px`},g.value=!0;let i=()=>{g.value=!1,document.removeEventListener(`click`,i)};setTimeout(()=>{document.addEventListener(`click`,i)},0)}function W(e,t){A.value={targetNode:e,position:t},E.value=!0}function ue(e){switch(e){case`insertRoot`:W(null,`root`);break;case`insertBefore`:W(b.value,`before`);break;case`insertAfter`:W(b.value,`after`);break;case`insertInner`:W(b.value,`inner`);break;case`copy`:J();return;case`delete`:Y();return;case`moveUp`:ve();return;case`moveDown`:ye();return}g.value=!1}function _e(e,t){if(!A.value)return;let{targetNode:n,position:r}=A.value,i={componentKey:e,defaultSchema:t.defaultSchema};r===`root`?Ce(i):n&&Se(i,n,r),E.value=!1,A.value=null}function K(e){let t=e.split(`.`),n=t[t.length-1],r=t.includes(`items`)&&t.includes(`properties`),i=``;if(r){let e=t.lastIndexOf(`items`);i=t.slice(0,e).join(`.`)}else{let e=t.lastIndexOf(`properties`);e>0&&(i=t.slice(0,e).join(`.`))}let a,o;return i?(a=s.getNodeSchema(i),a&&(o=a.type===`array`?a.items?.properties:a.properties)):(a=s.formSchema.value,o=a.properties),{parentSchema:a,propertiesObj:o,fieldName:n}}function J(){if(!b.value)return;let e=b.value.path,t=s.getNodeSchema(e);if(!t)return;let n=`f_${M()}`,r=JSON.parse(JSON.stringify(t)),i=[...e.split(`.`).slice(0,-1),n].join(`.`);I(s.formSchema.value.properties,i,r),g.value=!1}function Y(){if(!b.value)return;let e=b.value.path;N(s.formSchema.value.properties,e),g.value=!1}function ve(){if(!b.value)return;let e=b.value.path,{parentSchema:t,propertiesObj:n,fieldName:r}=K(e);if(!n||!t)return;let i=Object.entries(n),a=i.findIndex(([e])=>e===r);if(a<=0)return;let o=i[a];i[a]=i[a-1],i[a-1]=o;let c={};i.forEach(([e,t])=>{c[e]=t});let l=e.split(`.`);if(l.length===1)s.formSchema.value.properties=c;else{let e=l.includes(`items`),t;if(e){let e=l.lastIndexOf(`items`);t=`${l.slice(0,e).join(`.`)}.items.properties`}else{let e=l.lastIndexOf(`properties`);t=l.slice(0,e+1).join(`.`)}I(s.formSchema.value.properties,t,c)}g.value=!1}function ye(){if(!b.value)return;let e=b.value.path,{parentSchema:t,propertiesObj:n,fieldName:r}=K(e);if(!n||!t)return;let i=Object.entries(n),a=i.findIndex(([e])=>e===r);if(a===-1||a>=i.length-1)return;let o=i[a];i[a]=i[a+1],i[a+1]=o;let c={};i.forEach(([e,t])=>{c[e]=t});let l=e.split(`.`);if(l.length===1)s.formSchema.value.properties=c;else{let e=l.includes(`items`),t;if(e){let e=l.lastIndexOf(`items`);t=`${l.slice(0,e).join(`.`)}.items.properties`}else{let e=l.lastIndexOf(`properties`);t=l.slice(0,e+1).join(`.`)}I(s.formSchema.value.properties,t,c)}g.value=!1}function be(e){if(e.preventDefault(),e.stopPropagation(),e.dataTransfer)try{let t=e.dataTransfer.getData(`application/json`);if(!t)return;let n=JSON.parse(t);if(n.type!==`new-component`)return;let{componentKey:r,defaultSchema:i}=n;if(!i){console.warn(`组件缺少 defaultSchema:`,r);return}let a=X(e.clientX,e.clientY);if(console.log(`targetNode`,a),a){let t=xe(e,a.element);Se(n,a.data,t)}else Ce(n)}catch(e){console.error(`解析拖拽数据失败:`,e)}}function X(e,t){let n=document.elementFromPoint(e,t)?.closest(`.el-tree-node`);if(n){let e=n.querySelector(`.el-tree-node__content`);if(e){n.__vnode?.props?.[`node-key`];let t=(e,n)=>{for(let r of e){if(r.path===n)return r;if(r.children){let e=t(r.children,n);if(e)return e}}return null},r=n.getAttribute(`data-path`)||e.getAttribute(`data-path`);if(r){let e=t(L.value,r);if(e)return{element:n,data:e}}let i=document.querySelectorAll(`.el-tree-node`),a=Array.from(i).indexOf(n);if(a>=0&&a<L.value.length)return{element:n,data:L.value[a]}}}return null}function xe(e,t){let n=t.getBoundingClientRect(),r=e.clientY-n.top,i=n.height*.2;return r<i?`before`:r>n.height-i?`after`:`inner`}function Se(e,t,n){let{componentKey:r,defaultSchema:i}=e,a=`f_${M()}`,o;o=n===`inner`?Z.Inner:n===`before`?Z.Before:Z.After,s.insertField(t.path,a,i,o),m(()=>{let e;if(n===`inner`)e=s.getNodeSchema(t.path)?.type===`array`?`${t.path}.items.properties.${a}`:`${t.path}.properties.${a}`;else{let n=t.path.split(`.`).slice(0,-1).join(`.`);e=n?`${n}.${a}`:a}s.selectNode(e),R()})}function Ce(e){let{componentKey:t,defaultSchema:n}=e,r=`f_${M()}`;s.addField(r,n),s.selectNode(r),m(()=>{R()})}return m(()=>{R()}),(n,i)=>{let s=w(`ElIcon`),u=w(`ElInput`),f=w(`ElButton`),m=w(`ElEmpty`),b=w(`ElTree`),x=w(`ElDialog`);return y(),a(`div`,vt,[o(`div`,yt,[l(u,{modelValue:p.value,"onUpdate:modelValue":i[0]||=e=>p.value=e,placeholder:`搜索组件`,clearable:``,size:`small`,onInput:ae},{prefix:j(()=>[l(s,null,{default:j(()=>[l(O(he))]),_:1})]),_:1},8,[`modelValue`]),o(`div`,bt,[l(f,{size:`small`,text:``,onClick:R},{default:j(()=>[...i[3]||=[c(` 全部展开 `,-1)]]),_:1}),l(f,{size:`small`,text:``,onClick:oe},{default:j(()=>[...i[4]||=[c(` 全部折叠 `,-1)]]),_:1})])]),o(`div`,{class:`tree-content`,onDrop:be,onDragover:i[1]||=te(()=>{},[`prevent`]),onContextmenu:le},[l(b,{ref_key:`treeRef`,ref:d,style:{height:`100%`},data:L.value,props:re,"node-key":`path`,draggable:``,"allow-drop":ce,"allow-drag":B,"filter-node-method":ie,"default-expand-all":``,"highlight-current":``,onNodeClick:se,onNodeDrop:V,onNodeContextmenu:U},{default:j(({node:e,data:t})=>[o(`div`,{class:h([`tree-node`,{"is-container":t.isContainer}])},[o(`span`,xt,D(t.label),1),o(`span`,St,`(`+D(t.component)+`)`,1)],2)]),empty:j(()=>[l(m,{description:`暂无组件,请从左侧拖入`})]),_:1},8,[`data`])],32),(y(),r(t,{to:`body`},[ee(o(`div`,{class:`context-menu`,style:_(v.value)},[(y(!0),a(e,null,S(H.value,(t,n)=>(y(),a(e,{key:n},[t===`divider`?(y(),a(`div`,Ct)):(y(),a(`div`,{key:1,class:`menu-item`,onClick:e=>ue(t.type)},[l(s,null,{default:j(()=>[(y(),r(T(t.icon)))]),_:2},1024),o(`span`,null,D(t.label),1)],8,wt))],64))),128))],4),[[k,g.value]])])),l(x,{modelValue:E.value,"onUpdate:modelValue":i[2]||=e=>E.value=e,title:`选择组件`,width:`600px`,"close-on-click-modal":!1},{default:j(()=>[o(`div`,Tt,[(y(!0),a(e,null,S(ne.value,(t,n)=>(y(),a(`div`,{key:n,class:`picker-category-group`},[o(`div`,Et,D(n),1),o(`div`,Dt,[(y(!0),a(e,null,S(t,({key:e,component:t})=>(y(),a(`div`,{key:e,class:`picker-component-item`,onClick:n=>_e(e,t)},[o(`div`,kt,D(t.config?.icon?.slice(0,3)),1),o(`div`,At,D(t.config?.name||e),1)],8,Ot))),128))])]))),128))])]),_:1},8,[`modelValue`])])}}}),[[`__scopeId`,`data-v-70a01a20`]]);const Mt={class:`left-panel`};var Nt=Q(u({__name:`index`,props:{components:{},draggable:{type:Boolean,default:!1}},setup(e){let t=e,n=x(`materials`);function i(){n.value!==`tree`&&(n.value=`tree`)}return b(ye,{switchToTreeTab:i}),(i,o)=>{let s=w(`ElTabPane`),c=w(`ElTabs`);return y(),a(`div`,Mt,[t.draggable?(y(),r(c,{key:0,modelValue:n.value,"onUpdate:modelValue":o[0]||=e=>n.value=e,class:`panel-tabs`},{default:j(()=>[l(s,{label:`组件库`,name:`materials`},{default:j(()=>[l(_t,{components:e.components},null,8,[`components`])]),_:1}),l(s,{label:`组件树`,name:`tree`},{default:j(()=>[l(jt)]),_:1})]),_:1},8,[`modelValue`])):(y(),r(jt,{key:1}))])}}}),[[`__scopeId`,`data-v-e47d1682`]]),Pt=u({name:`ArrayInner`,inheritAttrs:!1,__name:`arrayInner`,setup(e){return b(Y,H()),(e,t)=>C(e.$slots,`default`)}}),Ft=u({inheritAttrs:!1,__name:`arrayItemInner`,props:{index:{}},setup(e){return b(ve,e),(e,t)=>C(e.$slots,`default`)}});function It(e){return Array.isArray(e?.items)?It(e.items[0]):e?.items?.type===`array`||e?.items?.type===`object`}function Lt(e){let t=It(e),n=null;return n=t?new WeakMap:[],v(()=>{n=null}),{getKey:(e,t)=>n instanceof WeakMap?(n.has(e)||n.set(e,M()),`${n.get(e)}-${t}`):(n&&!n[t]&&(n[t]=M()),n?`${n[t]}-${t}`:void 0)}}function Rt(e){return _e(u({name:`SchemaWrapper`,props:{value:{type:[String,Number,Boolean,Array,Object],default:void 0},onChange:{type:Function,default:void 0}},setup(t,r){let{setterSchema:i}=e,a=H(),o=le(),s=f(Y,void 0),c=f(ve,void 0),{getKey:l}=Lt(o.value),u=n(()=>{let e=a.value,n={value:t.value,onChange:t.onChange};e&&!W(e)&&((e.pattern===`disabled`||e.pattern===`readPretty`)&&(n.disabled=!0),e.pattern===`readOnly`&&(n.readOnly=!0),e.disabled!==void 0&&(n.disabled=e.disabled),e.readOnly!==void 0&&(n.readOnly=e.readOnly));for(let[e,t]of Object.entries($.properties||{})){let r=t[`x-path`];r&&(n[e]=P(o.value,r))}for(let[e,t]of Object.entries(i.properties||{})){let r=t[`x-path`];r&&(n[e]=P(o.value,r))}let r=o.value?.type===`array`?a.value:s?.value;return r&&(n.onAdd=()=>r.push({}),n.onPush=()=>r.push({}),n.onUnshift=()=>r.unshift({}),n.onRemove=e=>r.remove(e),n.onMove=(e,t)=>r.move(e,t),n.onMoveUp=e=>{e>0&&r.move(e,e-1)},n.onMoveDown=e=>{e<r.value.length-1&&r.move(e,e+1)}),c?.index!==void 0&&(n.arrayIndex=c.index),n});return()=>{let t=a.value;if(!t||t.display!==`visible`)return d(`template`,{},{});let n=()=>{if(!t||W(t))return null;let e=t.errors||[];return e.length===0?null:d(`div`,{class:`formily-validation-errors`,style:{color:`#f56c6c`,fontSize:`12px`,marginTop:`4px`,lineHeight:`1.5`}},d(`div`,{class:`formily-validation-error-item`},e[0].messages))};if(o.value?.type===`array`){let r=t?.value||[],i=r.length>0?r.map((e,t)=>d(Ft,{index:t},{default:()=>d(ce,{key:l(e,t),schema:o.value.items,name:t})})):null;return d(`div`,{},[d(Pt,{},{default:()=>d(e.component,u.value,{default:()=>i})}),n()])}return d(`div`,{},[d(e.component,u.value,r.slots),n()])}}}))}var zt=u({__name:`index`,props:{schema:{},components:{}},setup(e,{expose:t}){let n=e,i=U(),{SchemaField:a}=V({components:Object.keys(n.components).reduce((e,t)=>(e[t]=Rt(n.components[t]),e),{})});return t({form:i}),(t,n)=>(y(),r(O(B),{form:O(i)},{default:j(()=>[l(O(a),{schema:e.schema},null,8,[`schema`])]),_:1},8,[`form`]))}});const Bt={key:0,class:`designer-layout`},Vt={class:`designer-material`},Ht={class:`designer-canvas`},Ut={class:`designer-config`},Wt={key:1,class:`designer-preview`};var Gt=Q(u({__name:`designer`,props:{components:{},mode:{default:`edit`},modelValue:{},draggable:{type:Boolean,default:!1},height:{default:`100vh`}},emits:[`update:modelValue`],setup(e,{expose:t,emit:r}){let i=e,s=r,c=Te(i.draggable);b(`designerComponents`,i.components);let u=x(null);A(()=>i.modelValue,e=>{e&&JSON.stringify(e)!==JSON.stringify(c.formSchema.value)&&(c.formSchema.value=e)},{immediate:!0,deep:!0}),A(()=>c.formSchema.value,e=>{s(`update:modelValue`,e)},{deep:!0});function d(){return u.value?.form?.values||{}}return t({getFormValues:d,schema:n(()=>c.formSchema.value),store:c}),(t,n)=>(y(),a(`div`,{class:`designer`,style:_({height:i.height})},[i.mode===`edit`?(y(),a(`div`,Bt,[o(`div`,Vt,[l(Nt,{components:e.components,draggable:e.draggable},null,8,[`components`,`draggable`])]),o(`div`,Ht,[l(He,{components:e.components},null,8,[`components`])]),o(`div`,Ut,[l(ct,{components:e.components},null,8,[`components`])])])):(y(),a(`div`,Wt,[l(zt,{ref_key:`renderRef`,ref:u,schema:O(c).formSchema.value,components:e.components},null,8,[`schema`,`components`])]))],4))}}),[[`__scopeId`,`data-v-202362c9`]]);const Kt=He,qt=ct,Jt=_t,Yt=Gt;export{Kt as Canvas,qt as ConfigPanel,K as DesignStoreKey,Yt as Designer,Jt as MaterialPanel,Ee as schemaToSetterValues,De as setterValuesToSchema,Te as useCreateDesignStore,q as useDesignStore};
|
|
1
|
+
import{Fragment as e,Teleport as t,computed as n,createBlock as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createTextVNode as s,createVNode as c,defineComponent as l,h as u,inject as d,mergeProps as f,nextTick as p,normalizeClass as m,normalizeProps as h,normalizeStyle as g,onBeforeUnmount as _,openBlock as v,provide as y,ref as b,renderList as x,renderSlot as S,resolveComponent as C,resolveDynamicComponent as w,shallowRef as T,toDisplayString as E,unref as D,vShow as O,watch as k,withCtx as A,withDirectives as ee,withModifiers as te}from"vue";import{uid as j}from"@formily/shared";import{deleteByPath as M,getByPath as N,getFieldNameFromPath as P,setByPath as F}from"@formily-djd/utils";import{ArrayItems as ne,Checkbox as I,FormItem as re,Input as ie,InputNumber as ae,Radio as oe,Select as L,Space as se,Switch as R}from"@formily/element-plus";import{FormProvider as z,RecursionField as ce,createSchemaField as le,useField as B,useFieldSchema as ue}from"@formily/vue";import{createForm as V,isVoidField as H,onFormValuesChange as U}from"@formily/core";import{Bottom as de,CirclePlus as W,CopyDocument as fe,Delete as pe,FolderAdd as me,Search as he,Top as ge}from"@element-plus/icons-vue";import{observer as _e}from"@formily/reactive-vue";const G=Symbol(`DesignStore`);function K(){let e=d(G);if(!e)throw Error(`[useDesignStore] 必须在 Designer 组件内使用`);return e}const q=Symbol(`ComponentSettings`),J=Symbol(`ArrayField`),Y=Symbol(`ArrayItemKey`),ve=Symbol(`LeftPanel`);function ye(e,t=`.canvas-content`){let r=b(null);function i(){if(!e.value){r.value=null;return}let n=document.querySelector(`[data-node-id="${e.value}"]`);if(!n){r.value=null;return}let i=document.querySelector(t);if(!i){r.value=null;return}let a=n.getBoundingClientRect(),o=i.getBoundingClientRect();r.value={x:a.x-o.x,y:a.y-o.y,width:a.width,height:a.height}}return k(e,()=>{i()},{immediate:!0}),n(()=>r.value)}function X(e,t,n=!0){let r=e=>{if(!n)return 0;let t=e*.1;return t>20?20:t<10?10:t},i=r(t.width),a=r(t.height);return e.x>=t.x+i&&e.x<=t.x+t.width-i&&e.y>=t.y+a&&e.y<=t.y+t.height-a}function be(e,t){let n=Math.min(Math.abs(e.x-t.x),Math.abs(e.x-(t.x+t.width))),r=Math.min(Math.abs(e.y-t.y),Math.abs(e.y-(t.y+t.height)));return e.x>=t.x&&e.x<=t.x+t.width&&(n=0),e.y>=t.y&&e.y<=t.y+t.height&&(r=0),Math.sqrt(n**2+r**2)}function xe(e,t,n){return n?e.x>=t.x+t.width/2:e.y>=t.y+t.height/2}function Se(e){return e.width>e.height}let Z=function(e){return e.Before=`BEFORE`,e.After=`AFTER`,e.Upper=`UPPER`,e.Under=`UNDER`,e.Inner=`INNER`,e.InnerBefore=`INNER_BEFORE`,e.InnerAfter=`INNER_AFTER`,e.ForbidBefore=`FORBID_BEFORE`,e.ForbidAfter=`FORBID_AFTER`,e.ForbidUpper=`FORBID_UPPER`,e.ForbidUnder=`FORBID_UNDER`,e.ForbidInner=`FORBID_INNER`,e.ForbidInnerBefore=`FORBID_INNER_BEFORE`,e.ForbidInnerAfter=`FORBID_INNER_AFTER`,e.Forbid=`FORBID`,e}({});var Q=class{sensitive;forceBlock;dragNodes=b([]);touchNode=b(null);closestNode=b(null);closestPosition=b(Z.Before);closestRect=b(null);getNodeRect;getNodeSchema;getCanvasRect;findChildNodes;constructor(e,t){this.sensitive=t?.sensitive??!0,this.forceBlock=t?.forceBlock??!1,this.getNodeRect=e.getNodeRect,this.getNodeSchema=e.getNodeSchema,this.getCanvasRect=e.getCanvasRect,this.findChildNodes=e.findChildNodes}setDragNodes(e){this.dragNodes.value=e}calculate(e){let{point:t,touchNode:n,closestNode:r,closestPosition:i}=e;if(r!==void 0&&i!==void 0){this.closestNode.value=r,this.closestPosition.value=i,r&&(this.closestRect.value=this.getNodeRect(r));return}if(!t)return;n!==void 0&&(this.touchNode.value=n);let a=this.getClosestNode(t);if(this.closestNode.value=a,!a){this.closestPosition.value=Z.Before,this.closestRect.value=null;return}this.closestPosition.value=this.getClosestPosition(t,a),this.closestRect.value=this.getNodeRect(a)}getClosestNode(e){let t=this.touchNode.value;if(!t)return null;let n=this.getNodeRect(t);if(!n)return null;let r=this.findChildNodes(t);if(r.length===0)return t;let i=X(e,n,this.sensitive)?0:be(e,n),a=t;for(let t of r){let n=this.getNodeRect(t);if(!n)continue;let r=X(e,n,this.sensitive)?0:be(e,n);r<=i&&(i=r,a=t)}return a}getClosestPosition(e,t){console.log(`[Dragon] getClosestPosition`,t);let n=this.getNodeRect(t),r=this.getNodeSchema(t);if(!n||!r)return Z.Forbid;let i=this.getLayout(n)===`horizontal`,a=X(e,n,this.sensitive),o=this.isContainer(r),s=this.canInsertSibling(t),c=xe(e,n,i);return a?o&&this.canDropInside(t)?this.findChildNodes(t).length===0?Z.Inner:c?Z.InnerAfter:Z.InnerBefore:s?i?c?Z.After:Z.Before:c?Z.Under:Z.Upper:Z.Forbid:s?i?c?Z.ForbidAfter:Z.ForbidBefore:c?Z.ForbidUnder:Z.ForbidUpper:Z.Forbid}getLayout(e){return this.forceBlock?`vertical`:Se(e)?`horizontal`:`vertical`}isContainer(e){return!e||e[`x-droppable`]===!1?!1:e.type===`object`||e.type===`void`||e.type===`array`}canInsertSibling(e){return!(e===``||e==null)}canDropInside(e){if(this.getNodeSchema(e)?.[`x-droppable`]===!1)return!1;let t=this.dragNodes.value;if(t.length===0)return!0;for(let n of t)if(n.nodePath===e||e.startsWith(`${n.nodePath}.`))return!1;return!0}clear(){this.dragNodes.value=[],this.touchNode.value=null,this.closestNode.value=null,this.closestPosition.value=Z.Before,this.closestRect.value=null}};function Ce(e=!1){let t=b({type:`object`,properties:{}}),n=b(null),r=b(null),i=b(null),a=b(!1),o=b([]),s=b(null),c=b(null),l=b(Z.Before);function u(e){let t=document.querySelector(`[data-node-id="${e}"]`);if(!t)return null;let n=document.querySelector(`.canvas-content`);if(!n)return null;let r=t.getBoundingClientRect(),i=n.getBoundingClientRect();return{x:r.x-i.x,y:r.y-i.y,width:r.width,height:r.height}}function d(){let e=document.querySelector(`.canvas-content`);if(!e)return{x:0,y:0,width:0,height:0};let t=e.getBoundingClientRect();return{x:t.x,y:t.y,width:t.width,height:t.height}}let f=new Q({getNodeRect:u,getNodeSchema:e=>N(t.value.properties,e),getCanvasRect:d,findChildNodes:e=>{let n=N(t.value.properties,e);if(!n)return[];let r=[];return n.properties&&Object.keys(n.properties).forEach(t=>{r.push(`${e}.properties.${t}`)}),n.items?.properties&&Object.keys(n.items.properties).forEach(t=>{r.push(`${e}.items.properties.${t}`)}),r}},{sensitive:!0,forceBlock:!1});function p(e,n){t.value.properties||(t.value.properties={}),t.value.properties[e]=n}function m(e,n){F(t.value.properties,e,n)}function h(e){n.value=e}function g(){return n.value&&N(t.value.properties,n.value)||null}function _(e){r.value=e,n.value=e}function v(e){i.value=e}function x(e){a.value=!0,o.value=e,f.setDragNodes(e)}function S(e,t){if(!a.value)return;t!==void 0&&(s.value=t);let n=d(),r={x:e.x-n.x,y:e.y-n.y};f.calculate({point:r,touchNode:s.value||void 0}),c.value=f.closestNode.value,l.value=f.closestPosition.value}function C(){if(console.log(`[DesignStore] drop`),!a.value)return;let e=c.value,t=l.value;if(!e){w();return}if(t.includes(`FORBID`)){w();return}let n=o.value;if(n.length===0){w();return}n.length===1&&T(n[0].nodePath,e,t),w()}function w(){a.value=!1,o.value=[],s.value=null,c.value=null,l.value=Z.Before,f.clear()}function T(e,n,r){let i=M(t.value.properties,e);if(!i)return;let a=P(e);if(r===Z.Inner||r===Z.InnerAfter||r===Z.InnerBefore){let e=N(t.value.properties,n);if(!e)return;let o,s;if(e.type===`array`?(e.items||={type:`object`,properties:{}},e.items.properties||(e.items.properties={}),o=e.items.properties,s=`${n}.items.properties`):(e.properties||={},o=e.properties,s=`${n}.properties`),r===Z.InnerBefore){let e={[a]:i,...o};F(t.value.properties,s,e)}else F(t.value.properties,`${s}.${a}`,i)}else{let e=r===Z.Before||r===Z.Upper?`before`:`after`,o=n.split(`.`),s=o[o.length-1],c,l=o.includes(`items`);if(o.length===1)c=``;else if(l){let e=o.lastIndexOf(`items`);c=`${o.slice(0,e).join(`.`)}.items.properties`}else{let e=o.lastIndexOf(`properties`);c=o.slice(0,e+1).join(`.`)}let u=c?N(t.value.properties,c):t.value.properties;if(!u){console.warn(`父节点的 properties 不存在:`,c);return}let d=Object.entries(u),f=d.findIndex(([e])=>e===s);if(f===-1){console.warn(`目标字段不存在:`,s);return}let p=e===`after`?f+1:f,m=[...d.slice(0,p),[a,i],...d.slice(p)],h={};m.forEach(([e,t])=>{h[e]=t}),c?F(t.value.properties,c,h):t.value.properties=h}}function E(e,n,r,i){if(!e){t.value.properties||(t.value.properties={}),t.value.properties[n]=r;return}if(i===Z.Inner||i===Z.InnerAfter||i===Z.InnerBefore){let a=N(t.value.properties,e);if(!a)return;let o,s;if(a.type===`array`?(a.items||={type:`object`,properties:{}},a.items.properties||(a.items.properties={}),o=a.items.properties,s=`${e}.items.properties`):(a.properties||={},o=a.properties,s=`${e}.properties`),i===Z.InnerBefore){let e={[n]:r,...o};F(t.value.properties,s,e)}else F(t.value.properties,`${s}.${n}`,r)}else{let a=i===Z.Before||i===Z.Upper?`before`:`after`,o=e.split(`.`),s=o[o.length-1],c,l=o.includes(`items`);if(o.length===1)c=``;else if(l){let e=o.lastIndexOf(`items`);c=`${o.slice(0,e).join(`.`)}.items.properties`}else{let e=o.lastIndexOf(`properties`);c=o.slice(0,e+1).join(`.`)}let u=c?N(t.value.properties,c):t.value.properties;if(!u){console.warn(`父节点的 properties 不存在:`,c);return}let d=Object.entries(u),f=d.findIndex(([e])=>e===s);if(f===-1){console.warn(`目标字段不存在:`,s);return}let p=a===`after`?f+1:f,m=[...d.slice(0,p),[n,r],...d.slice(p)],h={};m.forEach(([e,t])=>{h[e]=t}),c?F(t.value.properties,c,h):t.value.properties=h}}function D(e){return N(t.value.properties,e)}function O(e){let n=N(t.value.properties,e);if(!n)return[];let r=[];return n.properties&&Object.keys(n.properties).forEach(t=>{let n=e?`${e}.properties.${t}`:t;r.push(n)}),n.items?.properties&&Object.keys(n.items.properties).forEach(t=>{let n=`${e}.items.properties.${t}`;r.push(n)}),r}let k={formSchema:t,selectedFieldName:n,selectedNodeId:r,hoveredNodeId:i,draggable:e,dragon:f,isDragging:a,dragNodes:o,touchNode:s,closestNode:c,closestPosition:l,addField:p,updateFieldSchema:m,selectField:h,selectNode:_,getSelectedField:g,setHover:v,startDrag:x,updateDragPosition:S,drop:C,cancelDrag:w,moveField:T,insertField:E,getNodeSchema:D,findChildNodes:O};return y(G,k),k}function we(e,t){let n={};return Object.entries(t.properties||{}).forEach(([t,r])=>{let i=r[`x-path`];if(i){let r=N(e,i);r!==void 0&&(n[t]=r)}}),n}function Te(e,t,n){let r=JSON.parse(JSON.stringify(n));return Object.entries(t.properties||{}).forEach(([t,n])=>{let i=n[`x-path`];i&&e[t]!==void 0&&F(r,i,e[t])}),r}var $=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},Ee=$(l({__name:`HoverBox`,setup(e){let t=K(),r=ye(t.hoveredNodeId),o=n(()=>!t.hoveredNodeId.value||!t.selectedNodeId.value?!1:t.hoveredNodeId.value===t.selectedNodeId.value),s=n(()=>{let e={position:`absolute`,top:0,left:0,boxSizing:`border-box`,pointerEvents:`none`,zIndex:2,visibility:`hidden`};return r.value&&!o.value&&(e.transform=`perspective(1px) translate3d(${r.value.x}px, ${r.value.y}px, 0)`,e.width=`${r.value.width}px`,e.height=`${r.value.height}px`,e.visibility=`visible`),e}),c=n(()=>r.value&&!o.value);return(e,t)=>c.value?(v(),a(`div`,{key:0,class:`hover-box`,style:g(s.value)},null,4)):i(``,!0)}}),[[`__scopeId`,`data-v-2759debe`]]),De=$(l({__name:`Insertion`,setup(e){let t=K(),r=n(()=>{if(!t.isDragging.value||!t.closestNode.value)return{display:`none`};let e=t.closestPosition.value,n=t.dragon.closestRect.value;if(!n)return{display:`none`};let r=e.toString().includes(`FORBID`),i={position:`absolute`,backgroundColor:r?`#ef4444`:`#3b82f6`,pointerEvents:`none`,zIndex:10,transition:`all 0.15s cubic-bezier(0.4, 0, 0.2, 1)`,boxShadow:r?`0 0 8px rgba(239, 68, 68, 0.5)`:`0 0 8px rgba(59, 130, 246, 0.5)`};switch(e){case Z.Before:case Z.ForbidBefore:Object.assign(i,{width:`2px`,height:`${n.height}px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y}px, 0)`});break;case Z.After:case Z.ForbidAfter:Object.assign(i,{width:`2px`,height:`${n.height}px`,transform:`perspective(1px) translate3d(${n.x+n.width-2}px, ${n.y}px, 0)`});break;case Z.Upper:case Z.ForbidUpper:Object.assign(i,{width:`${n.width}px`,height:`2px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y}px, 0)`});break;case Z.Under:case Z.ForbidUnder:Object.assign(i,{width:`${n.width}px`,height:`2px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y+n.height-2}px, 0)`});break;case Z.Inner:case Z.InnerBefore:case Z.InnerAfter:case Z.ForbidInner:case Z.ForbidInnerBefore:case Z.ForbidInnerAfter:Object.assign(i,{width:`${n.width}px`,height:`${n.height}px`,transform:`perspective(1px) translate3d(${n.x}px, ${n.y}px, 0)`,backgroundColor:`transparent`,border:r?`2px dashed #ef4444`:`2px dashed #3b82f6`});break;case Z.Forbid:return{display:`none`};default:return{display:`none`}}return i});return(e,n)=>D(t).draggable?(v(),a(`div`,{key:0,class:`insertion-indicator`,style:g(r.value)},null,4)):i(``,!0)}}),[[`__scopeId`,`data-v-9dbef644`]]),Oe=$(l({__name:`SelectionBox`,setup(e){let t=ye(K().selectedNodeId),r=n(()=>{let e={position:`absolute`,top:0,left:0,boxSizing:`border-box`,pointerEvents:`none`,zIndex:4,visibility:`hidden`};return t.value&&(e.transform=`perspective(1px) translate3d(${t.value.x-2}px, ${t.value.y-2}px, 0)`,e.width=`${t.value.width+4}px`,e.height=`${t.value.height+4}px`,e.visibility=`visible`),e}),s=n(()=>t.value!==null);return(e,t)=>s.value?(v(),a(`div`,{key:0,class:`selection-box`,style:g(r.value)},[...t[0]||=[o(`div`,{class:`selection-box-inner`},null,-1)]],4)):i(``,!0)}}),[[`__scopeId`,`data-v-c58abee5`]]);const ke={class:`aux-tool-widget`};var Ae=$(l({__name:`AuxToolWidget`,setup(e){return(e,t)=>(v(),a(`div`,ke,[c(Ee),c(Oe),c(De)]))}}),[[`__scopeId`,`data-v-d048dbcd`]]);function je(e,t){let n={...e?.[`x-component-props`]||{}};return t.basicSetter&&Object.entries(t.basicSetter).forEach(([t,r])=>{let i=r[`x-path`];if(i){let r=N(e,i);r!==void 0&&(n[t]=r)}}),t.componentSetter?.properties&&Object.entries(t.componentSetter.properties).forEach(([t,r])=>{let i=r[`x-path`];if(i){let r=N(e,i);r!==void 0&&(n[t]=r)}}),n}function Me(e){if(e?.[`x-droppable`]===!1)return!1;let t=e.type;return(t===`object`||t===`void`||t===`array`)&&!!e.properties}function Ne(e){return e.type===`array`&&!!e.items}const Pe=[`data-node-id`,`draggable`],Fe={key:0,class:`empty-container-placeholder`},Ie={key:0,class:`empty-container-placeholder`};var Le=$(l({name:`CanvasField`,__name:`index`,props:{schema:{},fieldName:{},nodePath:{}},setup(t){let s=t,c=d(q)??{},l=K(),u=n(()=>s.schema?.[`x-component`]),p=n(()=>s.nodePath?s.fieldName?s.nodePath?`${s.nodePath}.${s.fieldName}`:s.fieldName:s.nodePath:s.fieldName||``),g=n(()=>l.selectedNodeId.value===p.value),_=n(()=>!l.draggable||!s.fieldName?!1:g.value);function y(){return s.schema?.type===`array`?p.value?`${p.value}.items`:``:p.value?`${p.value}.properties`:``}let b=n(()=>{let e=s.schema;if(!e||e[`x-droppable`]===!1)return!1;let t=e.type===`object`||e.type===`void`,n=!e.properties||Object.keys(e.properties).length===0;return t&&n});function S(e){if(!_.value||!e.dataTransfer)return;let t={type:`move-component`,nodePath:p.value,fieldName:s.fieldName,schema:s.schema};e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`application/json`,JSON.stringify(t)),l.startDrag([{nodePath:p.value,fieldName:s.fieldName||``,schema:s.schema}])}function T(){l.cancelDrag()}return(t,n)=>{let l=C(`CanvasField`);return s.schema?(v(),a(`div`,{key:0,"data-node-id":p.value,class:m({"is-draggable":_.value,"is-selected":g.value}),draggable:_.value,onDragstart:S,onDragend:T},[u.value&&D(c)[u.value]?(v(),r(w(D(c)[u.value].component),h(f({key:0},D(je)(s.schema,D(c)[u.value].setterSchema))),{default:A(()=>[b.value?(v(),a(`div`,Fe,[...n[0]||=[o(`svg`,{class:`placeholder-icon`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`},[o(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`,stroke:`currentColor`,"stroke-width":`2`}),o(`path`,{d:`M12 8v8M8 12h8`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`})],-1),o(`span`,{class:`placeholder-text`},`添加组件到这里`,-1)]])):i(``,!0),D(Ne)(s.schema)?(v(),r(l,{key:1,schema:s.schema.items,"node-path":`${y()}`},null,8,[`schema`,`node-path`])):i(``,!0),D(Me)(s.schema)?(v(!0),a(e,{key:2},x(Object.keys(s.schema?.properties||{}),e=>(v(),r(l,{key:e,schema:s.schema?.properties?.[e],"field-name":e,"node-path":y()},null,8,[`schema`,`field-name`,`node-path`]))),128)):i(``,!0)]),_:1},16)):(v(),a(e,{key:1},[b.value?(v(),a(`div`,Ie,[...n[1]||=[o(`svg`,{class:`placeholder-icon`,width:`24`,height:`24`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`},[o(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`,stroke:`currentColor`,"stroke-width":`2`}),o(`path`,{d:`M12 8v8M8 12h8`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`})],-1),o(`span`,{class:`placeholder-text`},`添加组件到这里`,-1)]])):i(``,!0),(v(!0),a(e,null,x(Object.keys(s.schema?.properties||{}),e=>(v(),r(l,{key:e,schema:s.schema?.properties?.[e],"field-name":e,"node-path":y()},null,8,[`schema`,`field-name`,`node-path`]))),128))],64))],42,Pe)):i(``,!0)}}}),[[`__scopeId`,`data-v-18008a74`]]);const Re={class:`canvas djd-design`};var ze=$(l({__name:`canvas`,props:{components:{}},setup(e){y(q,e.components);let t=K(),s=b(!1),l=n(()=>{let e=t.formSchema.value?.properties;return!e||Object.keys(e).length===0});function u(e){let n=e.target.closest(`[data-node-id]`);if(n){let e=n.getAttribute(`data-node-id`);e&&(console.log(e),t.selectNode(e))}else t.selectNode(null)}function d(e){let n=e.target.closest(`[data-node-id]`)?.getAttribute(`data-node-id`);if(t.setHover(n||null),t.isDragging.value){let r={x:e.clientX,y:e.clientY};t.updateDragPosition(r,n||void 0)}}function f(){t.setHover(null)}function p(e){if(!t.draggable||(e.preventDefault(),e.stopPropagation(),!e.dataTransfer))return;let n=t.dragNodes.value.length>0;e.dataTransfer.dropEffect=n?`move`:`copy`,s.value=!0,t.isDragging.value||t.startDrag([]);let r=e.target.closest(`[data-node-id]`)?.getAttribute(`data-node-id`),i={x:e.clientX,y:e.clientY};t.updateDragPosition(i,r||void 0)}function h(e){e.target.classList.contains(`canvas-content`)&&(s.value=!1)}function g(e){if(t.draggable&&(console.log(`[Canvas] handleDrop`),e.preventDefault(),e.stopPropagation(),s.value=!1,e.dataTransfer))try{let t=e.dataTransfer.getData(`application/json`);if(!t)return;let n=JSON.parse(t);console.log(`dragData`,n),n.type===`new-component`?_(n):n.type===`move-component`&&x()}catch(e){console.error(`解析拖拽数据失败:`,e)}}function _(e){let{componentKey:n,defaultSchema:r}=e;if(!r){console.warn(`组件缺少 defaultSchema:`,n);return}let i=`f_${j()}`,a=t.closestNode.value,o=t.closestPosition.value;a?t.insertField(a,i,r,o):t.addField(i,r),t.selectNode(i),t.cancelDrag()}function x(){t.drop()}return(e,n)=>(v(),a(`div`,Re,[o(`div`,{class:m([`canvas-content`,{"drag-over":s.value,empty:l.value}]),onClick:u,onMousemove:d,onMouseleave:f,onDragover:p,onDragleave:h,onDrop:g},[D(t).formSchema.value?(v(),r(Le,{key:0,schema:D(t).formSchema.value},null,8,[`schema`])):i(``,!0),c(Ae)],34)]))}}),[[`__scopeId`,`data-v-b174a160`]]);function Be(e,t){let n=t.getSelectedField();return V({values:n?we(n,e):{},effects(){U(n=>{let r=t.getSelectedField(),i=t.selectedFieldName.value;if(!r||!i)return;let a=Te(n.values,e,r);t.updateFieldSchema(i,a)})}})}const Ve={class:`reactions-editor`},He={class:`section`},Ue={class:`section-header`},We={key:0,class:`empty-tip`},Ge={key:1,class:`dependency-list`},Ke={class:`dependency-header`},qe={class:`dependency-index`},Je={class:`section`},Ye={class:`section-header`},Xe={key:0,class:`empty-tip`},Ze={key:1,class:`state-rule-list`},Qe={class:`state-rule-header`},$e={class:`state-rule-index`};var et=$(l({__name:`ReactionsEditor`,props:{modelValue:{type:Boolean},schema:{},currentFieldName:{},initialReactions:{}},emits:[`update:modelValue`,`save`],setup(t,{emit:i}){let l=t,u=i,d=n({get:()=>l.modelValue,set:e=>u(`update:modelValue`,e)}),f=b([]),p=b([]),m=[{label:`显示/隐藏 (visible)`,value:`visible`},{label:`禁用 (disabled)`,value:`disabled`},{label:`只读 (readOnly)`,value:`readOnly`},{label:`值 (value)`,value:`value`},{label:`显示模式 (display)`,value:`display`},{label:`模式 (pattern)`,value:`pattern`},{label:`必填 (required)`,value:`required`},{label:`标题 (title)`,value:`title`},{label:`描述 (description)`,value:`description`}],h=[{label:`值 (value)`,value:`value`},{label:`显示模式 (display)`,value:`display`},{label:`模式 (pattern)`,value:`pattern`},{label:`初始值 (initialValue)`,value:`initialValue`},{label:`错误信息 (errors)`,value:`errors`},{label:`验证状态 (valid)`,value:`valid`}],g=[{label:`任意类型 (any)`,value:`any`},{label:`字符串 (string)`,value:`string`},{label:`数字 (number)`,value:`number`},{label:`布尔值 (boolean)`,value:`boolean`},{label:`数组 (array)`,value:`array`},{label:`对象 (object)`,value:`object`}],_=n(()=>{function e(t,n=``){if(!t)return[];let r=[];return Object.entries(t).forEach(([t,i])=>{let a=n?`${n}.${t}`:t,o=i.title||t;if(a===l.currentFieldName||a.startsWith(`${l.currentFieldName}.`))return;let s={value:a,label:`${o} (${t})`,children:void 0};if(i.properties){let t=e(i.properties,a);t.length>0&&(s.children=t)}r.push(s)}),r}return e(l.schema?.properties)});function y(){let e=l.initialReactions;if(!e){f.value=[],p.value=[];return}e.dependencies&&Array.isArray(e.dependencies)&&(f.value=e.dependencies.map(e=>({source:e.source||``,property:e.property||`value`,name:e.name||``,type:e.type||`any`}))),e.fulfill?.state&&(p.value=Object.entries(e.fulfill.state).map(([e,t])=>({state:e,expression:String(t).replace(/^\{\{|\}\}$/g,``).trim()})))}function S(){y()}function w(){f.value.push({source:``,property:`value`,name:``,type:`any`})}function T(e){f.value.splice(e,1)}function D(e){!e.name&&e.source&&(e.name=`${e.source.split(`.`).pop()||e.source}_${e.property}`)}function O(){p.value.push({state:`visible`,expression:``})}function k(e){p.value.splice(e,1)}function ee(){let e={};f.value.length>0&&(e.dependencies=f.value.filter(e=>e.source).map(e=>({source:e.source,property:e.property,name:e.name,type:e.type}))),p.value.length>0&&(e.fulfill={state:{}},p.value.forEach(t=>{t.state&&t.expression&&(e.fulfill.state[t.state]=`{{${t.expression}}}`)})),u(`save`,e),d.value=!1}function te(){d.value=!1}return(t,n)=>{let i=C(`ElButton`),l=C(`ElTreeSelect`),u=C(`ElFormItem`),y=C(`ElOption`),b=C(`ElSelect`),j=C(`ElInput`),M=C(`ElForm`),N=C(`ElDialog`);return v(),r(N,{modelValue:d.value,"onUpdate:modelValue":n[0]||=e=>d.value=e,title:`条件渲染配置`,width:`800px`,onOpen:S},{footer:A(()=>[c(i,{onClick:te},{default:A(()=>[...n[8]||=[s(` 取消 `,-1)]]),_:1}),c(i,{type:`primary`,onClick:ee},{default:A(()=>[...n[9]||=[s(` 保存 `,-1)]]),_:1})]),default:A(()=>[o(`div`,Ve,[o(`div`,He,[o(`div`,Ue,[n[2]||=o(`span`,{class:`section-title`},`依赖字段`,-1),c(i,{size:`small`,type:`primary`,onClick:w},{default:A(()=>[...n[1]||=[s(` 添加依赖 `,-1)]]),_:1})]),f.value.length===0?(v(),a(`div`,We,` 暂无依赖字段,点击"添加依赖"按钮添加 `)):(v(),a(`div`,Ge,[(v(!0),a(e,null,x(f.value,(t,r)=>(v(),a(`div`,{key:r,class:`dependency-item`},[o(`div`,Ke,[o(`span`,qe,`依赖 `+E(r+1),1),c(i,{size:`small`,type:`danger`,text:``,onClick:e=>T(r)},{default:A(()=>[...n[3]||=[s(` 删除 `,-1)]]),_:1},8,[`onClick`])]),c(M,{"label-width":`80px`},{default:A(()=>[c(u,{label:`字段`},{default:A(()=>[c(l,{modelValue:t.source,"onUpdate:modelValue":e=>t.source=e,data:_.value,placeholder:`选择依赖的字段`,clearable:``,"check-strictly":``,"render-after-expand":!1,onChange:e=>D(t)},null,8,[`modelValue`,`onUpdate:modelValue`,`data`,`onChange`])]),_:2},1024),c(u,{label:`属性`},{default:A(()=>[c(b,{modelValue:t.property,"onUpdate:modelValue":e=>t.property=e,placeholder:`选择属性`,onChange:e=>D(t)},{default:A(()=>[(v(),a(e,null,x(h,e=>c(y,{key:e.value,label:e.label,value:e.value},null,8,[`label`,`value`])),64))]),_:1},8,[`modelValue`,`onUpdate:modelValue`,`onChange`])]),_:2},1024),c(u,{label:`变量名`},{default:A(()=>[c(j,{modelValue:t.name,"onUpdate:modelValue":e=>t.name=e,placeholder:`在表达式中使用的变量名`},null,8,[`modelValue`,`onUpdate:modelValue`])]),_:2},1024),c(u,{label:`类型`},{default:A(()=>[c(b,{modelValue:t.type,"onUpdate:modelValue":e=>t.type=e,placeholder:`选择类型`},{default:A(()=>[(v(),a(e,null,x(g,e=>c(y,{key:e.value,label:e.label,value:e.value},null,8,[`label`,`value`])),64))]),_:1},8,[`modelValue`,`onUpdate:modelValue`])]),_:2},1024)]),_:2},1024)]))),128))]))]),o(`div`,Je,[o(`div`,Ye,[n[5]||=o(`span`,{class:`section-title`},`状态控制`,-1),c(i,{size:`small`,type:`primary`,onClick:O},{default:A(()=>[...n[4]||=[s(` 添加规则 `,-1)]]),_:1})]),p.value.length===0?(v(),a(`div`,Xe,` 暂无状态规则,点击"添加规则"按钮添加 `)):(v(),a(`div`,Ze,[(v(!0),a(e,null,x(p.value,(t,r)=>(v(),a(`div`,{key:r,class:`state-rule-item`},[o(`div`,Qe,[o(`span`,$e,`规则 `+E(r+1),1),c(i,{size:`small`,type:`danger`,text:``,onClick:e=>k(r)},{default:A(()=>[...n[6]||=[s(` 删除 `,-1)]]),_:1},8,[`onClick`])]),c(M,{"label-width":`80px`},{default:A(()=>[c(u,{label:`状态属性`},{default:A(()=>[c(b,{modelValue:t.state,"onUpdate:modelValue":e=>t.state=e,placeholder:`选择要控制的状态`},{default:A(()=>[(v(),a(e,null,x(m,e=>c(y,{key:e.value,label:e.label,value:e.value},null,8,[`label`,`value`])),64))]),_:1},8,[`modelValue`,`onUpdate:modelValue`])]),_:2},1024),c(u,{label:`表达式`},{default:A(()=>[c(j,{modelValue:t.expression,"onUpdate:modelValue":e=>t.expression=e,type:`textarea`,rows:2,placeholder:`输入 JS 表达式,如:$deps.username_value === '123'`},null,8,[`modelValue`,`onUpdate:modelValue`]),n[7]||=o(`div`,{class:`expression-tip`},` 使用 $deps.变量名 访问依赖字段的值 `,-1)]),_:2},1024)]),_:2},1024)]))),128))]))])])]),_:1},8,[`modelValue`])}}}),[[`__scopeId`,`data-v-0aa160aa`]]);const tt={class:`config-panel`},nt={key:0,class:`config-empty`},rt={key:1,class:`config-content`},it={class:`config-title`};var at=$(l({__name:`index`,props:{components:{}},setup(e){let t=e,l=K(),{SchemaField:u}=le({components:{FormItem:re,Input:ie,InputNumber:ae,Checkbox:I,Radio:oe,Switch:R,Select:L,Space:se,ArrayItems:ne}}),d=T(null),f=n(()=>l.getSelectedField()),p=n(()=>f.value?f.value[`x-component`]:null),m=n(()=>{let e=p.value;return e?t.components[e]?.setterSchema:null}),h=n(()=>{if(!m.value)return null;let e=m.value.basicSetter;return!e||Object.keys(e).length===0?null:{type:`object`,properties:e}}),g=n(()=>{if(!m.value)return null;let e=m.value.componentSetter;return!e||!e.properties||Object.keys(e.properties).length===0?null:e}),_=n(()=>{if(!m.value)return null;let e=m.value.basicSetter||{},t=m.value.componentSetter?.properties||{};return{type:`object`,properties:{...e,...t}}});k(()=>l.selectedFieldName.value,()=>{f.value&&_.value?d.value=Be(_.value,l):d.value=null},{immediate:!0});let y=T([`base`,`operate`,`component`]),x=n(()=>l.selectedFieldName.value||`empty`),S=b(!1);function w(){S.value=!0}function O(e){let t=l.selectedFieldName.value;if(!t)return;let n=l.getSelectedField();if(!n)return;let r={...n,"x-reactions":Object.keys(e).length>0?e:void 0};l.updateFieldSchema(t,r)}return(e,t)=>{let n=C(`ElCollapseItem`),m=C(`ElButton`),_=C(`ElCollapse`);return v(),a(`div`,tt,[f.value?(v(),a(`div`,rt,[o(`h3`,it,E(p.value)+` 配置 `,1),d.value?(v(),r(D(z),{key:x.value,form:d.value},{default:A(()=>[c(_,{modelValue:y.value,"onUpdate:modelValue":t[0]||=e=>y.value=e,class:`config-section`},{default:A(()=>[h.value?(v(),r(n,{key:0,name:`base`,title:`基本配置`},{default:A(()=>[c(D(u),{schema:h.value},null,8,[`schema`])]),_:1})):i(``,!0),c(n,{name:`operate`,title:`操作配置`},{default:A(()=>[o(`div`,null,[c(m,{type:`primary`,onClick:w},{default:A(()=>[...t[3]||=[s(` 条件渲染 `,-1)]]),_:1})])]),_:1}),g.value?(v(),r(n,{key:1,name:`component`,title:`组件配置`},{default:A(()=>[c(D(u),{schema:g.value},null,8,[`schema`])]),_:1})):i(``,!0)]),_:1},8,[`modelValue`])]),_:1},8,[`form`])):i(``,!0),c(et,{modelValue:S.value,"onUpdate:modelValue":t[1]||=e=>S.value=e,schema:D(l).formSchema.value,"current-field-name":D(l).selectedFieldName.value,"initial-reactions":f.value?.[`x-reactions`],onSave:O},null,8,[`modelValue`,`schema`,`current-field-name`,`initial-reactions`])])):(v(),a(`div`,nt,[...t[2]||=[o(`p`,null,`请选择一个字段`,-1)]]))])}}}),[[`__scopeId`,`data-v-3a22b8d5`]]);const ot={class:`material-panel`},st={class:`panel-content`},ct={class:`category-title`},lt={class:`component-grid`},ut=[`onClick`,`onDragstart`],dt={class:`component-icon`},ft={class:`component-name`},pt={key:0,class:`component-desc`};var mt=$(l({__name:`materialPanel`,props:{components:{}},setup(t){let r=t,s=d(ve,null),c=n(()=>{let e={};return Object.entries(r.components).forEach(([t,n])=>{if(n.config?.hidden===!0)return;let r=n.config?.category||`其他`;e[r]||(e[r]=[]),e[r].push({key:t,component:n})}),e});function l(e,t,n){if(!e.dataTransfer)return;let r={type:`new-component`,componentKey:t,componentName:n.config.name,defaultSchema:n.defaultSchema};e.dataTransfer.effectAllowed=`copy`,e.dataTransfer.setData(`application/json`,JSON.stringify(r));let i=e.target;e.dataTransfer.setDragImage(i,10,10),setTimeout(()=>{s?.switchToTreeTab()},100)}function u(e){let t=e.target;t.style.opacity=`1`}function f(e){console.log(`点击组件:`,e)}return(t,n)=>(v(),a(`div`,ot,[n[0]||=o(`div`,{class:`panel-header`},[o(`h3`,null,`组件库`)],-1),o(`div`,st,[(v(!0),a(e,null,x(c.value,(t,n)=>(v(),a(`div`,{key:n,class:`category-group`},[o(`div`,ct,E(n),1),o(`div`,lt,[(v(!0),a(e,null,x(t,({key:e,component:t})=>(v(),a(`div`,{key:e,class:`component-item`,draggable:`true`,onClick:t=>f(e),onDragstart:n=>l(n,e,t),onDragend:u},[o(`div`,dt,E(t.config?.icon?.slice(0,3)),1),o(`div`,ft,E(t.config?.name||e),1),t.config?.description?(v(),a(`div`,pt,E(t.config.description),1)):i(``,!0)],40,ut))),128))])]))),128))])]))}}),[[`__scopeId`,`data-v-93609a69`]]);const ht={class:`schema-tree`},gt={class:`tree-toolbar`},_t={class:`toolbar-buttons`},vt={class:`node-label`},yt={class:`node-component`},bt={key:0,class:`menu-divider`},xt=[`onClick`],St={class:`component-picker-content`},Ct={class:`picker-category-title`},wt={class:`picker-component-grid`},Tt=[`onClick`],Et={class:`picker-component-icon`},Dt={class:`picker-component-name`};var Ot=$(l({__name:`SchemaTree`,setup(i){let l=K(),u=d(`designerComponents`,{}),f=b(),h=b(``),_=b(!1),y=b({top:`0px`,left:`0px`}),S=b(null),T=b(`node`),k=b(!1),N=b(null);function P(e,t=``){let n=[];return!e||typeof e!=`object`?n:(e.properties&&typeof e.properties==`object`&&Object.entries(e.properties).forEach(([e,r])=>{let i=t?`${t}.properties.${e}`:e,a=r[`x-component`]||`Unknown`,o=r.title||e,s={path:i,label:o,title:o,component:a,isContainer:ne(r),children:P(r,i)};n.push(s)}),e.items?.properties&&Object.entries(e.items.properties).forEach(([e,r])=>{let i=`${t}.items.properties.${e}`,a=r[`x-component`]||`Unknown`,o=r.title||e,s={path:i,label:o,title:o,component:a,isContainer:ne(r),children:P(r,i)};n.push(s)}),n)}function ne(e){return e[`x-droppable`]===!1?!1:!![`object`,`void`,`array`].includes(e.type)}let I=n(()=>P(l.formSchema.value)),re=n(()=>{let e={};return Object.entries(u).forEach(([t,n])=>{if(n.config?.hidden===!0)return;let r=n.config?.category||`其他`;e[r]||(e[r]=[]),e[r].push({key:t,component:n})}),e}),ie={children:`children`,label:`label`};function ae(e,t){return e?t.label.toLowerCase().includes(e.toLowerCase()):!0}function oe(e){f.value?.filter(e)}function L(){R(I.value).forEach(e=>{let t=f.value?.getNode(e);t&&(t.expanded=!0)})}function se(){R(I.value).forEach(e=>{let t=f.value?.getNode(e);t&&(t.expanded=!1)})}function R(e){let t=[];return e.forEach(e=>{t.push(e.path),e.children&&e.children.length>0&&t.push(...R(e.children))}),t}function z(e){l.selectNode(e.path)}function ce(e){return!0}function le(e,t,n){let r=t.data;return n===`inner`?r.isContainer:!0}function B(e,t,n,r){let i=e.data,a=t.data,o;o=n===`inner`?`INNER`:n===`before`?`BEFORE`:`AFTER`,l.moveField(i.path,a.path,o)}let ue=n(()=>{if(T.value===`empty`)return[{type:`insertRoot`,label:`插入组件`,icon:W}];let e=S.value;if(!e)return[];let t=[{type:`copy`,label:`复制`,icon:fe},{type:`delete`,label:`删除`,icon:pe},`divider`,{type:`moveUp`,label:`上移`,icon:ge},{type:`moveDown`,label:`下移`,icon:de},`divider`,{type:`insertBefore`,label:`上方插入`,icon:W},{type:`insertAfter`,label:`下方插入`,icon:W}];return e.isContainer&&t.push({type:`insertInner`,label:`插入内部组件`,icon:me}),t});function V(e){e.preventDefault(),e.stopPropagation(),T.value=`empty`,S.value=null,y.value={top:`${e.clientY}px`,left:`${e.clientX}px`},_.value=!0;let t=()=>{_.value=!1,document.removeEventListener(`click`,t)};setTimeout(()=>{document.addEventListener(`click`,t)},0)}function H(e,t,n,r){e.preventDefault(),e.stopPropagation(),T.value=`node`,S.value=t,y.value={top:`${e.clientY}px`,left:`${e.clientX}px`},_.value=!0;let i=()=>{_.value=!1,document.removeEventListener(`click`,i)};setTimeout(()=>{document.addEventListener(`click`,i)},0)}function U(e,t){N.value={targetNode:e,position:t},k.value=!0}function _e(e){switch(e){case`insertRoot`:U(null,`root`);break;case`insertBefore`:U(S.value,`before`);break;case`insertAfter`:U(S.value,`after`);break;case`insertInner`:U(S.value,`inner`);break;case`copy`:J();return;case`delete`:Y();return;case`moveUp`:ve();return;case`moveDown`:ye();return}_.value=!1}function G(e,t){if(!N.value)return;let{targetNode:n,position:r}=N.value,i={componentKey:e,defaultSchema:t.defaultSchema};r===`root`?Q(i):n&&Se(i,n,r),k.value=!1,N.value=null}function q(e){let t=e.split(`.`),n=t[t.length-1],r=t.includes(`items`)&&t.includes(`properties`),i=``;if(r){let e=t.lastIndexOf(`items`);i=t.slice(0,e).join(`.`)}else{let e=t.lastIndexOf(`properties`);e>0&&(i=t.slice(0,e).join(`.`))}let a,o;return i?(a=l.getNodeSchema(i),a&&(o=a.type===`array`?a.items?.properties:a.properties)):(a=l.formSchema.value,o=a.properties),{parentSchema:a,propertiesObj:o,fieldName:n}}function J(){if(!S.value)return;let e=S.value.path,t=l.getNodeSchema(e);if(!t)return;let n=`f_${j()}`,r=JSON.parse(JSON.stringify(t)),i=[...e.split(`.`).slice(0,-1),n].join(`.`);F(l.formSchema.value.properties,i,r),_.value=!1}function Y(){if(!S.value)return;let e=S.value.path;M(l.formSchema.value.properties,e),_.value=!1}function ve(){if(!S.value)return;let e=S.value.path,{parentSchema:t,propertiesObj:n,fieldName:r}=q(e);if(!n||!t)return;let i=Object.entries(n),a=i.findIndex(([e])=>e===r);if(a<=0)return;let o=i[a];i[a]=i[a-1],i[a-1]=o;let s={};i.forEach(([e,t])=>{s[e]=t});let c=e.split(`.`);if(c.length===1)l.formSchema.value.properties=s;else{let e=c.includes(`items`),t;if(e){let e=c.lastIndexOf(`items`);t=`${c.slice(0,e).join(`.`)}.items.properties`}else{let e=c.lastIndexOf(`properties`);t=c.slice(0,e+1).join(`.`)}F(l.formSchema.value.properties,t,s)}_.value=!1}function ye(){if(!S.value)return;let e=S.value.path,{parentSchema:t,propertiesObj:n,fieldName:r}=q(e);if(!n||!t)return;let i=Object.entries(n),a=i.findIndex(([e])=>e===r);if(a===-1||a>=i.length-1)return;let o=i[a];i[a]=i[a+1],i[a+1]=o;let s={};i.forEach(([e,t])=>{s[e]=t});let c=e.split(`.`);if(c.length===1)l.formSchema.value.properties=s;else{let e=c.includes(`items`),t;if(e){let e=c.lastIndexOf(`items`);t=`${c.slice(0,e).join(`.`)}.items.properties`}else{let e=c.lastIndexOf(`properties`);t=c.slice(0,e+1).join(`.`)}F(l.formSchema.value.properties,t,s)}_.value=!1}function X(e){if(e.preventDefault(),e.stopPropagation(),e.dataTransfer)try{let t=e.dataTransfer.getData(`application/json`);if(!t)return;let n=JSON.parse(t);if(n.type!==`new-component`)return;let{componentKey:r,defaultSchema:i}=n;if(!i){console.warn(`组件缺少 defaultSchema:`,r);return}let a=be(e.clientX,e.clientY);if(console.log(`targetNode`,a),a){let t=xe(e,a.element);Se(n,a.data,t)}else Q(n)}catch(e){console.error(`解析拖拽数据失败:`,e)}}function be(e,t){let n=document.elementFromPoint(e,t)?.closest(`.el-tree-node`);if(n){let e=n.querySelector(`.el-tree-node__content`);if(e){n.__vnode?.props?.[`node-key`];let t=(e,n)=>{for(let r of e){if(r.path===n)return r;if(r.children){let e=t(r.children,n);if(e)return e}}return null},r=n.getAttribute(`data-path`)||e.getAttribute(`data-path`);if(r){let e=t(I.value,r);if(e)return{element:n,data:e}}let i=document.querySelectorAll(`.el-tree-node`),a=Array.from(i).indexOf(n);if(a>=0&&a<I.value.length)return{element:n,data:I.value[a]}}}return null}function xe(e,t){let n=t.getBoundingClientRect(),r=e.clientY-n.top,i=n.height*.2;return r<i?`before`:r>n.height-i?`after`:`inner`}function Se(e,t,n){let{defaultSchema:r}=e,i=`f_${j()}`,a;a=n===`inner`?Z.Inner:n===`before`?Z.Before:Z.After,l.insertField(t.path,i,r,a),p(()=>{let e;if(n===`inner`)e=l.getNodeSchema(t.path)?.type===`array`?`${t.path}.items.properties.${i}`:`${t.path}.properties.${i}`;else{let n=t.path.split(`.`).slice(0,-1).join(`.`);e=n?`${n}.${i}`:i}l.selectNode(e),L()})}function Q(e){let{defaultSchema:t}=e,n=`f_${j()}`;l.addField(n,t),l.selectNode(n),p(()=>{L()})}return p(()=>{L()}),(n,i)=>{let l=C(`ElIcon`),u=C(`ElInput`),d=C(`ElButton`),p=C(`ElEmpty`),b=C(`ElTree`),S=C(`ElDialog`);return v(),a(`div`,ht,[o(`div`,gt,[c(u,{modelValue:h.value,"onUpdate:modelValue":i[0]||=e=>h.value=e,placeholder:`搜索组件`,clearable:``,size:`small`,onInput:oe},{prefix:A(()=>[c(l,null,{default:A(()=>[c(D(he))]),_:1})]),_:1},8,[`modelValue`]),o(`div`,_t,[c(d,{size:`small`,text:``,onClick:L},{default:A(()=>[...i[3]||=[s(` 全部展开 `,-1)]]),_:1}),c(d,{size:`small`,text:``,onClick:se},{default:A(()=>[...i[4]||=[s(` 全部折叠 `,-1)]]),_:1})])]),o(`div`,{class:`tree-content`,onDrop:X,onDragover:i[1]||=te(()=>{},[`prevent`]),onContextmenu:V},[c(b,{ref_key:`treeRef`,ref:f,style:{height:`100%`},data:I.value,props:ie,"node-key":`path`,draggable:``,"allow-drop":le,"allow-drag":ce,"filter-node-method":ae,"default-expand-all":``,"highlight-current":``,onNodeClick:z,onNodeDrop:B,onNodeContextmenu:H},{default:A(({data:e})=>[o(`div`,{class:m([`tree-node`,{"is-container":e.isContainer}])},[o(`span`,vt,E(e.label),1),o(`span`,yt,`(`+E(e.component)+`)`,1)],2)]),empty:A(()=>[c(p,{description:`暂无组件,请点击右键插入`})]),_:1},8,[`data`])],32),(v(),r(t,{to:`body`},[ee(o(`div`,{class:`context-menu`,style:g(y.value)},[(v(!0),a(e,null,x(ue.value,(t,n)=>(v(),a(e,{key:n},[t===`divider`?(v(),a(`div`,bt)):(v(),a(`div`,{key:1,class:`menu-item`,onClick:e=>_e(t.type)},[c(l,null,{default:A(()=>[(v(),r(w(t.icon)))]),_:2},1024),o(`span`,null,E(t.label),1)],8,xt))],64))),128))],4),[[O,_.value]])])),c(S,{modelValue:k.value,"onUpdate:modelValue":i[2]||=e=>k.value=e,title:`选择组件`,width:`600px`,"close-on-click-modal":!1},{default:A(()=>[o(`div`,St,[(v(!0),a(e,null,x(re.value,(t,n)=>(v(),a(`div`,{key:n,class:`picker-category-group`},[o(`div`,Ct,E(n),1),o(`div`,wt,[(v(!0),a(e,null,x(t,({key:e,component:t})=>(v(),a(`div`,{key:e,class:`picker-component-item`,onClick:n=>G(e,t)},[o(`div`,Et,E(t.config?.icon?.slice(0,3)),1),o(`div`,Dt,E(t.config?.name||e),1)],8,Tt))),128))])]))),128))])]),_:1},8,[`modelValue`])])}}}),[[`__scopeId`,`data-v-b2185ca2`]]);const kt={class:`left-panel`};var At=$(l({__name:`index`,props:{components:{},draggable:{type:Boolean,default:!1}},setup(e){let t=e,n=b(`materials`);function i(){n.value!==`tree`&&(n.value=`tree`)}return y(ve,{switchToTreeTab:i}),(i,o)=>{let s=C(`ElTabPane`),l=C(`ElTabs`);return v(),a(`div`,kt,[t.draggable?(v(),r(l,{key:0,modelValue:n.value,"onUpdate:modelValue":o[0]||=e=>n.value=e,class:`panel-tabs`},{default:A(()=>[c(s,{label:`组件库`,name:`materials`},{default:A(()=>[c(mt,{components:e.components},null,8,[`components`])]),_:1}),c(s,{label:`组件树`,name:`tree`},{default:A(()=>[c(Ot)]),_:1})]),_:1},8,[`modelValue`])):(v(),r(Ot,{key:1}))])}}}),[[`__scopeId`,`data-v-e47d1682`]]),jt=l({name:`ArrayInner`,inheritAttrs:!1,__name:`arrayInner`,setup(e){return y(J,B()),(e,t)=>S(e.$slots,`default`)}}),Mt=l({inheritAttrs:!1,__name:`arrayItemInner`,props:{index:{}},setup(e){return y(Y,e),(e,t)=>S(e.$slots,`default`)}});function Nt(e){return Array.isArray(e?.items)?Nt(e.items[0]):e?.items?.type===`array`||e?.items?.type===`object`}function Pt(e){let t=Nt(e),n=null;return n=t?new WeakMap:[],_(()=>{n=null}),{getKey:(e,t)=>n instanceof WeakMap?(n.has(e)||n.set(e,j()),`${n.get(e)}-${t}`):(n&&!n[t]&&(n[t]=j()),n?`${n[t]}-${t}`:void 0)}}function Ft(e){return _e(l({name:`SchemaWrapper`,props:{value:{type:[String,Number,Boolean,Array,Object],default:void 0},onChange:{type:Function,default:void 0}},setup(t,r){let{setterSchema:i}=e,a=B(),o=ue(),s=d(J,void 0),c=d(Y,void 0),{getKey:l}=Pt(o.value),f=n(()=>{let e=a.value,n={value:t.value,onChange:t.onChange};if(e&&!H(e)&&(n.pattern=e.pattern),i.basicSetter)for(let[e,t]of Object.entries(i.basicSetter)){let r=t[`x-path`];r&&(n[e]=N(o.value,r))}if(i.componentSetter?.properties)for(let[e,t]of Object.entries(i.componentSetter.properties)){let r=t[`x-path`];r&&(n[e]=N(o.value,r))}e&&!H(e)&&(n.pattern=e.pattern);let r=o.value?.type===`array`?a.value:s?.value;return r&&(n.onAdd=()=>r.push({}),n.onPush=()=>r.push({}),n.onUnshift=()=>r.unshift({}),n.onRemove=e=>r.remove(e),n.onMove=(e,t)=>r.move(e,t),n.onMoveUp=e=>{e>0&&r.move(e,e-1)},n.onMoveDown=e=>{e<r.value.length-1&&r.move(e,e+1)},c?.index!==void 0&&(n.pattern=r.pattern)),c?.index!==void 0&&(n.arrayIndex=c.index),n});return()=>{let t=a.value;if(!t||t.display!==`visible`)return u(`template`,{},{});let n=()=>{if(!t||H(t))return null;let e=t.errors||[];return e.length===0?null:u(`div`,{class:`formily-validation-errors`,style:{color:`#f56c6c`,fontSize:`12px`,marginTop:`4px`,lineHeight:`1.5`}},u(`div`,{class:`formily-validation-error-item`},e[0].messages))};if(o.value?.type===`array`){let r=t?.value||[],i=r.length>0?r.map((e,t)=>u(Mt,{index:t},{default:()=>u(ce,{key:l(e,t),schema:o.value.items,name:t})})):null;return u(`div`,{},[u(jt,{},{default:()=>u(e.component,f.value,{default:()=>i})}),n()])}return u(`div`,{},[u(e.component,f.value,r.slots),n()])}}}))}var It=l({__name:`index`,props:{schema:{},components:{}},setup(e,{expose:t}){let n=e,i=V(),{SchemaField:a}=le({components:Object.keys(n.components).reduce((e,t)=>(e[t]=Ft(n.components[t]),e),{})});return t({form:i}),(t,n)=>(v(),r(D(z),{form:D(i)},{default:A(()=>[c(D(a),{schema:e.schema},null,8,[`schema`])]),_:1},8,[`form`]))}});const Lt={key:0,class:`designer-layout`},Rt={class:`designer-material`},zt={class:`designer-canvas`},Bt={class:`designer-config`},Vt={key:1,class:`designer-preview`};var Ht=$(l({__name:`designer`,props:{components:{},mode:{default:`edit`},modelValue:{},draggable:{type:Boolean,default:!1},height:{default:`100vh`}},emits:[`update:modelValue`],setup(e,{expose:t,emit:r}){let i=e,s=r,l=Ce(i.draggable);y(`designerComponents`,i.components);let u=b(null);k(()=>i.modelValue,e=>{e&&JSON.stringify(e)!==JSON.stringify(l.formSchema.value)&&(l.formSchema.value=e)},{immediate:!0,deep:!0}),k(()=>l.formSchema.value,e=>{s(`update:modelValue`,e)},{deep:!0});function d(){return u.value?.form?.values||{}}return t({getFormValues:d,schema:n(()=>l.formSchema.value),store:l}),(t,n)=>(v(),a(`div`,{class:`designer`,style:g({height:i.height})},[i.mode===`edit`?(v(),a(`div`,Lt,[o(`div`,Rt,[c(At,{components:e.components,draggable:e.draggable},null,8,[`components`,`draggable`])]),o(`div`,zt,[c(ze,{components:e.components},null,8,[`components`])]),o(`div`,Bt,[c(at,{components:e.components},null,8,[`components`])])])):(v(),a(`div`,Vt,[c(It,{ref_key:`renderRef`,ref:u,schema:D(l).formSchema.value,components:e.components},null,8,[`schema`,`components`])]))],4))}}),[[`__scopeId`,`data-v-aaa05eea`]]);const Ut=ze,Wt=at,Gt=mt,Kt=Ht;export{Ut as Canvas,Wt as ConfigPanel,G as DesignStoreKey,Kt as Designer,Gt as MaterialPanel,we as schemaToSetterValues,Te as setterValuesToSchema,Ce as useCreateDesignStore,K as useDesignStore};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formily-djd/designer",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.4",
|
|
5
5
|
"description": "djd formily designer",
|
|
6
6
|
"author": "gaojinsong2010@gmail.com",
|
|
7
7
|
"license": "MIT",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@formily/shared": "^2.3.7",
|
|
28
28
|
"@formily/vue": "^2.3.7",
|
|
29
29
|
"vue": "^3.5.22",
|
|
30
|
-
"@formily-djd/utils": "0.0.
|
|
30
|
+
"@formily-djd/utils": "0.0.4"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@antfu/eslint-config": "^5.4.1",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"vitest": "^3.2.4",
|
|
57
57
|
"vitest-package-exports": "^0.1.1",
|
|
58
58
|
"yaml": "^2.8.1",
|
|
59
|
-
"@formily-djd/component": "0.0.
|
|
59
|
+
"@formily-djd/component": "0.0.4"
|
|
60
60
|
},
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public",
|