whistle.mock-plugins 1.3.1 → 1.4.0-beta.2

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.
Files changed (70) hide show
  1. package/VERSION.md +29 -0
  2. package/app/cgi-bin/interfaces.js +2 -0
  3. package/app/cgi-bin/settings.js +1 -0
  4. package/app/cgi-bin/stats.js +22 -12
  5. package/app/cgi-bin/webdav.js +56 -0
  6. package/app/public/index.html +1 -1
  7. package/app/public/js/11.index.js +2 -0
  8. package/app/public/js/11.index.js.LICENSE.txt +5 -0
  9. package/app/public/js/704.index.js +2 -0
  10. package/app/public/js/704.index.js.LICENSE.txt +1 -0
  11. package/app/public/js/798.index.js +2 -0
  12. package/app/public/js/798.index.js.LICENSE.txt +53 -0
  13. package/app/public/js/807.index.js +2 -0
  14. package/app/public/js/807.index.js.LICENSE.txt +1 -0
  15. package/app/public/js/968.index.js +2 -0
  16. package/app/public/js/968.index.js.LICENSE.txt +12 -0
  17. package/app/public/js/index.js +1 -1
  18. package/app/public/js/index.js.LICENSE.txt +0 -173
  19. package/lib/routes/settings.js +1 -0
  20. package/lib/webdav-sync.js +806 -0
  21. package/package.json +9 -2
  22. package/API.md +0 -247
  23. package/COLUMN_RESIZE_IMPLEMENTATION.md +0 -162
  24. package/FEATURE_ENHANCEMENT.md +0 -157
  25. package/TEST_GUIDE.md +0 -156
  26. package/data/features.json +0 -1
  27. package/data/interfaces.json +0 -1
  28. package/index.html +0 -52
  29. package/initialize.js +0 -32
  30. package/public/bundle.js +0 -2
  31. package/public/bundle.js.LICENSE.txt +0 -38
  32. package/public/index.html +0 -1
  33. package/public/plugin.mock-plugin.html +0 -14
  34. package/rules.txt +0 -22
  35. package/ui/src/App.css +0 -173
  36. package/ui/src/components/AppLayout.js +0 -407
  37. package/ui/src/components/FeatureCard.js +0 -58
  38. package/ui/src/components/KeyboardShortcutsHelp.js +0 -58
  39. package/ui/src/components/Layout.js +0 -94
  40. package/ui/src/components/MainNav.js +0 -42
  41. package/ui/src/components/PageContainer.js +0 -16
  42. package/ui/src/components/VersionModal.js +0 -99
  43. package/ui/src/components/interface-management/DataManagementDrawer.js +0 -115
  44. package/ui/src/components/interface-management/DataManagementModal.js +0 -110
  45. package/ui/src/components/interface-management/InterfaceTestModal.js +0 -313
  46. package/ui/src/components/interface-management/PreviewModal.js +0 -48
  47. package/ui/src/components/interface-management/README.md +0 -184
  48. package/ui/src/components/interface-management/RealResponseRecorder.js +0 -165
  49. package/ui/src/components/interface-management/ResponseContentEditor.js +0 -645
  50. package/ui/src/components/interface-management/constants.js +0 -36
  51. package/ui/src/components/interface-management/index.js +0 -7
  52. package/ui/src/components/interface-management/utils.js +0 -103
  53. package/ui/src/hooks/useKeyboardShortcuts.js +0 -99
  54. package/ui/src/index.html +0 -14
  55. package/ui/src/index.js +0 -50
  56. package/ui/src/pages/InterfaceManagementV2.js +0 -2351
  57. package/ui/src/pages/MockDataV2.js +0 -1089
  58. package/ui/src/pages/Settings.js +0 -299
  59. package/ui/src/pages/Sniffer.js +0 -521
  60. package/ui/src/pages/Stats.js +0 -288
  61. package/ui/src/services/del_api.js +0 -192
  62. package/ui/src/styles/app-layout.css +0 -373
  63. package/ui/src/styles/cyber-theme.css +0 -1234
  64. package/ui/src/styles/earth-theme.css +0 -618
  65. package/ui/src/styles/global.css +0 -224
  66. package/ui/src/styles/interface-management.css +0 -1321
  67. package/ui/src/styles/mock-data.css +0 -1185
  68. package/ui/src/styles/settings.css +0 -252
  69. package/ui/src/styles/version-modal.css +0 -116
  70. package/webpack.config.js +0 -54
@@ -1,1321 +0,0 @@
1
- /* 全局样式变量 */
2
- :root {
3
- --primary-color: #1890ff;
4
- --primary-hover: #40a9ff;
5
- --primary-active: #096dd9;
6
- --success-color: #52c41a;
7
- --warning-color: #faad14;
8
- --error-color: #f5222d;
9
- --font-color: #262626;
10
- --text-secondary: #595959;
11
- --text-light: #8c8c8c;
12
- --border-color: #f0f0f0;
13
- --border-radius: 8px;
14
- --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
15
- --transition-time: 0.3s;
16
- }
17
-
18
-
19
- /* 页面容器 */
20
- .interface-management-container {
21
- padding: 24px;
22
- min-height: calc(100vh - 120px);
23
- }
24
-
25
- /* 统一控制台 */
26
- .interface-control-panel {
27
- margin-bottom: 16px;
28
- border-radius: 12px;
29
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
30
- overflow: hidden;
31
- }
32
-
33
- .control-panel-header {
34
- display: flex;
35
- justify-content: space-between;
36
- align-items: center;
37
- padding: 8px 0;
38
- border-bottom: 1px solid #f0f0f0;
39
- }
40
-
41
- .control-left {
42
- display: flex;
43
- align-items: center;
44
- flex-wrap: wrap;
45
- gap: 8px;
46
- }
47
-
48
- .control-right {
49
- display: flex;
50
- align-items: center;
51
- }
52
-
53
- .feature-selector {
54
- display: flex;
55
- align-items: center;
56
- background: #f9f9f9;
57
- padding: 6px 12px;
58
- border-radius: var(--border-radius);
59
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
60
- transition: all var(--transition-time);
61
- }
62
-
63
- .feature-selector:hover {
64
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
65
- }
66
-
67
- .feature-selector span {
68
- margin-right: 8px;
69
- font-weight: 600;
70
- color: var(--text-secondary);
71
- font-size: 14px;
72
- }
73
-
74
- .control-panel-stats {
75
- display: flex;
76
- justify-content: space-between;
77
- align-items: center;
78
- padding: 12px 0 8px 0;
79
- min-height: 40px;
80
- }
81
-
82
- .stats-left {
83
- display: flex;
84
- align-items: center;
85
- flex-wrap: wrap;
86
- }
87
-
88
- .stats-right {
89
- display: flex;
90
- align-items: center;
91
- gap: 12px;
92
- }
93
-
94
- .stat-item {
95
- display: inline-flex;
96
- align-items: center;
97
- font-size: 14px;
98
- }
99
-
100
- .stat-label {
101
- color: var(--text-secondary);
102
- margin-right: 6px;
103
- }
104
-
105
- .stat-value {
106
- font-weight: 600;
107
- color: var(--font-color);
108
- }
109
-
110
- .selected-count {
111
- font-weight: 600;
112
- color: var(--primary-color);
113
- font-size: 13px;
114
- }
115
-
116
- /* 旧版样式兼容 */
117
- .interface-header-card {
118
- margin-bottom: 16px;
119
- border-radius: 12px;
120
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
121
- overflow: hidden;
122
- }
123
-
124
- .interface-management-header {
125
- display: flex;
126
- justify-content: space-between;
127
- align-items: center;
128
- padding: 8px 0;
129
- }
130
-
131
- .feature-selector-container {
132
- display: flex;
133
- align-items: center;
134
- flex-wrap: wrap;
135
- gap: 12px;
136
- }
137
-
138
- .interface-actions {
139
- display: flex;
140
- align-items: center;
141
- }
142
-
143
- .add-interface-button {
144
- background: linear-gradient(to right, var(--primary-color), var(--primary-hover));
145
- border: none;
146
- box-shadow: 0 2px 6px rgba(24, 144, 255, 0.25);
147
- transition: all var(--transition-time);
148
- }
149
-
150
- .add-interface-button:hover {
151
- transform: translateY(-2px);
152
- box-shadow: 0 4px 10px rgba(24, 144, 255, 0.4);
153
- }
154
-
155
- /* 分组筛选区域 */
156
- .filter-card {
157
- margin-bottom: 16px;
158
- border-radius: 12px;
159
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
160
- }
161
-
162
- .filter-header {
163
- display: flex;
164
- justify-content: space-between;
165
- align-items: center;
166
- margin-bottom: 12px;
167
- }
168
-
169
- .filter-title {
170
- font-weight: 600;
171
- font-size: 15px;
172
- color: var(--text-secondary);
173
- display: flex;
174
- align-items: center;
175
- gap: 8px;
176
- }
177
-
178
- .group-tags-container {
179
- margin-bottom: 12px;
180
- max-height: 120px;
181
- overflow-y: auto;
182
- padding: 8px 0;
183
- }
184
-
185
- .group-tags {
186
- display: flex;
187
- flex-wrap: wrap;
188
- gap: 8px;
189
- }
190
-
191
- .group-tag {
192
- cursor: pointer;
193
- user-select: none;
194
- transition: all 0.2s;
195
- padding: 6px 12px;
196
- font-size: 13px;
197
- }
198
-
199
- .group-tag:hover {
200
- transform: translateY(-2px);
201
- }
202
-
203
- .group-tag.active {
204
- font-weight: 600;
205
- }
206
-
207
- .group-actions {
208
- display: flex;
209
- gap: 8px;
210
- margin-top: 12px;
211
- justify-content: flex-end;
212
- }
213
-
214
- .empty-groups {
215
- color: #999;
216
- font-style: italic;
217
- padding: 8px 0;
218
- }
219
-
220
- /* 接口列表区域 */
221
- .list-header-card {
222
- margin-bottom: 16px;
223
- border-radius: 12px;
224
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
225
- }
226
-
227
- .list-header {
228
- display: flex;
229
- justify-content: space-between;
230
- align-items: center;
231
- }
232
-
233
- .list-header-info {
234
- display: flex;
235
- align-items: center;
236
- justify-content: space-between;
237
- width: 100%;
238
- }
239
-
240
- .feature-info {
241
- display: flex;
242
- align-items: center;
243
- gap: 8px;
244
- }
245
-
246
- .feature-info .label {
247
- color: var(--text-secondary);
248
- font-weight: 500;
249
- }
250
-
251
- .feature-info .value {
252
- font-weight: 600;
253
- color: var(--font-color);
254
- }
255
-
256
- .group-badge {
257
- margin-left: 12px;
258
- }
259
-
260
- .interface-stats {
261
- font-size: 13px;
262
- }
263
-
264
- .selected-count {
265
- font-weight: 600;
266
- color: var(--primary-color);
267
- }
268
-
269
- .batch-actions {
270
- display: flex;
271
- align-items: center;
272
- gap: 8px;
273
- }
274
-
275
- .list-container-card {
276
- border-radius: 12px;
277
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
278
- margin-bottom: 40px;
279
- }
280
-
281
- .interface-list-container {
282
- padding: 0;
283
- }
284
-
285
- /* 表格样式增强 */
286
- .interface-table th {
287
- background-color: #f5f7fa !important;
288
- font-weight: 600;
289
- padding: 12px 16px !important;
290
- color: #333;
291
- white-space: nowrap;
292
- }
293
-
294
- .interface-table td {
295
- padding: 12px 16px !important;
296
- white-space: nowrap;
297
- overflow: hidden;
298
- }
299
-
300
- /* 当前响应列需要 overflow: visible 以显示完整的下拉菜单 */
301
- .interface-table td.current-response-cell {
302
- overflow: visible !important;
303
- }
304
-
305
- /* 卡片视图样式 */
306
- .interface-card-view {
307
- padding-bottom: 20px;
308
- }
309
-
310
- .interface-card {
311
- border-radius: 8px;
312
- transition: all 0.3s;
313
- height: 100%;
314
- }
315
-
316
- .interface-card:hover {
317
- transform: translateY(-3px);
318
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
319
- }
320
-
321
- .interface-card.inactive {
322
- background-color: #f5f5f5;
323
- border: 1px solid #e8e8e8;
324
- opacity: 0.8;
325
- }
326
-
327
- .interface-card-header {
328
- display: flex;
329
- flex-direction: column;
330
- gap: 8px;
331
- margin-bottom: 12px;
332
- position: relative;
333
- }
334
-
335
- .interface-card-title {
336
- font-weight: 600;
337
- font-size: 15px;
338
- margin-right: 40px;
339
- line-height: 1.4;
340
- white-space: nowrap;
341
- overflow: hidden;
342
- text-overflow: ellipsis;
343
- }
344
-
345
- .interface-card-switch {
346
- position: absolute;
347
- right: 0;
348
- top: 0;
349
- }
350
-
351
- .interface-card-group {
352
- cursor: pointer;
353
- max-width: 100%;
354
- overflow: hidden;
355
- text-overflow: ellipsis;
356
- white-space: nowrap;
357
- align-self: flex-start;
358
- }
359
-
360
- .url-pattern-container {
361
- background: #f5f7fa;
362
- padding: 8px;
363
- border-radius: 4px;
364
- margin-bottom: 10px;
365
- }
366
-
367
- .interface-card .url-pattern {
368
- font-family: monospace;
369
- white-space: nowrap;
370
- overflow: hidden;
371
- text-overflow: ellipsis;
372
- font-size: 12px;
373
- color: #333;
374
- }
375
-
376
- .interface-card-info {
377
- margin-bottom: 12px;
378
- }
379
-
380
- .info-item {
381
- display: flex;
382
- align-items: center;
383
- justify-content: space-between;
384
- margin-bottom: 4px;
385
- }
386
-
387
- .info-label {
388
- font-size: 12px;
389
- color: #666;
390
- }
391
-
392
- .status-badge {
393
- padding: 2px 8px;
394
- border-radius: 10px;
395
- font-size: 12px;
396
- }
397
-
398
- .status-success {
399
- background: #f6ffed;
400
- border: 1px solid #b7eb8f;
401
- color: #52c41a;
402
- }
403
-
404
- .status-warning {
405
- background: #fff7e6;
406
- border: 1px solid #ffd591;
407
- color: #faad14;
408
- }
409
-
410
- .status-error {
411
- background: #fff1f0;
412
- border: 1px solid #ffa39e;
413
- color: #f5222d;
414
- }
415
-
416
- .interface-card-actions {
417
- display: flex;
418
- justify-content: space-between;
419
- margin-top: 12px;
420
- gap: 8px;
421
- }
422
-
423
- .card-pagination {
424
- display: flex;
425
- justify-content: center;
426
- margin-top: 20px;
427
- padding: 0 16px 16px;
428
- }
429
-
430
- .test-interface-container {
431
- padding: 20px;
432
- background: #f9f9f9;
433
- border-radius: var(--border-radius);
434
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
435
- margin-top: 24px;
436
- }
437
-
438
- .test-result {
439
- margin-top: 24px;
440
- padding: 20px;
441
- border-radius: var(--border-radius);
442
- background-color: #fff;
443
- border: 1px solid var(--border-color);
444
- box-shadow: var(--card-shadow);
445
- }
446
-
447
- .result-header {
448
- display: flex;
449
- justify-content: space-between;
450
- align-items: center;
451
- margin-bottom: 20px;
452
- padding-bottom: 12px;
453
- border-bottom: 1px solid var(--border-color);
454
- }
455
-
456
- .result-header h3 {
457
- margin: 0;
458
- font-size: 18px;
459
- font-weight: 600;
460
- color: var(--font-color);
461
- }
462
-
463
- .status {
464
- font-size: 14px;
465
- padding: 4px 12px;
466
- border-radius: 20px;
467
- font-weight: 500;
468
- display: inline-flex;
469
- align-items: center;
470
- gap: 6px;
471
- }
472
-
473
- .status.success {
474
- background-color: #f6ffed;
475
- border: 1px solid #b7eb8f;
476
- color: var(--success-color);
477
- }
478
-
479
- .status.error {
480
- background-color: #fff2f0;
481
- border: 1px solid #ffccc7;
482
- color: var(--error-color);
483
- }
484
-
485
- .result-content {
486
- display: flex;
487
- flex-direction: column;
488
- gap: 12px;
489
- }
490
-
491
- .result-item {
492
- display: flex;
493
- align-items: flex-start;
494
- padding: 8px 12px;
495
- background: #fafafa;
496
- border-radius: 6px;
497
- transition: background-color var(--transition-time);
498
- }
499
-
500
- .result-item:hover {
501
- background: #f0f0f0;
502
- }
503
-
504
- .result-item .label {
505
- font-weight: 600;
506
- width: 120px;
507
- flex-shrink: 0;
508
- color: var(--text-secondary);
509
- }
510
-
511
- .result-item .value {
512
- word-break: break-all;
513
- color: var(--font-color);
514
- font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
515
- }
516
-
517
- .result-body {
518
- margin-top: 16px;
519
- }
520
-
521
- .result-body .label {
522
- font-weight: 600;
523
- margin-bottom: 12px;
524
- color: var(--text-secondary);
525
- }
526
-
527
- .result-body pre {
528
- margin: 0;
529
- padding: 16px;
530
- background-color: #f5f5f5;
531
- border-radius: var(--border-radius);
532
- max-height: 400px;
533
- overflow: auto;
534
- white-space: pre-wrap;
535
- word-wrap: break-word;
536
- font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
537
- font-size: 14px;
538
- line-height: 1.6;
539
- border: 1px solid #e8e8e8;
540
- }
541
-
542
- .result-error {
543
- color: var(--error-color);
544
- padding: 12px 16px;
545
- background-color: #fff2f0;
546
- border-radius: var(--border-radius);
547
- border-left: 4px solid var(--error-color);
548
- }
549
-
550
- .breadcrumb {
551
- display: flex;
552
- align-items: center;
553
- font-size: 14px;
554
- margin-bottom: 16px;
555
- }
556
-
557
- .breadcrumb .link {
558
- color: var(--primary-color);
559
- cursor: pointer;
560
- transition: color var(--transition-time);
561
- }
562
-
563
- .breadcrumb .link:hover {
564
- color: var(--primary-hover);
565
- text-decoration: underline;
566
- }
567
-
568
- .breadcrumb .separator {
569
- margin: 0 12px;
570
- color: #d9d9d9;
571
- }
572
-
573
- .breadcrumb .current {
574
- color: var(--text-secondary);
575
- font-weight: 500;
576
- }
577
-
578
- .add-button {
579
- background: linear-gradient(to right, var(--primary-color), var(--primary-hover));
580
- color: white;
581
- border: none;
582
- border-radius: var(--border-radius);
583
- padding: 0 20px;
584
- height: 40px;
585
- cursor: pointer;
586
- font-size: 15px;
587
- font-weight: 500;
588
- display: flex;
589
- align-items: center;
590
- gap: 8px;
591
- transition: all var(--transition-time);
592
- box-shadow: 0 2px 8px rgba(24, 144, 255, 0.35);
593
- }
594
-
595
- .add-button:hover {
596
- background: linear-gradient(to right, var(--primary-hover), var(--primary-active));
597
- transform: translateY(-2px);
598
- box-shadow: 0 4px 12px rgba(24, 144, 255, 0.5);
599
- }
600
-
601
- .feature-details {
602
- background-color: white;
603
- border-radius: var(--border-radius);
604
- box-shadow: var(--card-shadow);
605
- padding: 24px;
606
- margin-bottom: 24px;
607
- border-left: 4px solid var(--primary-color);
608
- }
609
-
610
- .feature-name {
611
- display: flex;
612
- align-items: center;
613
- gap: 16px;
614
- margin-bottom: 12px;
615
- }
616
-
617
- .feature-name h1 {
618
- font-size: 22px;
619
- font-weight: 600;
620
- color: var(--font-color);
621
- margin: 0;
622
- }
623
-
624
- .status-badge {
625
- font-size: 13px;
626
- padding: 4px 12px;
627
- border-radius: 20px;
628
- font-weight: 500;
629
- display: inline-flex;
630
- align-items: center;
631
- gap: 6px;
632
- }
633
-
634
- .status-badge.active {
635
- background-color: #f6ffed;
636
- color: var(--success-color);
637
- border: 1px solid #b7eb8f;
638
- }
639
-
640
- .status-badge.inactive {
641
- background-color: #fff1f0;
642
- color: var(--error-color);
643
- border: 1px solid #ffa39e;
644
- }
645
-
646
- .feature-description {
647
- color: var(--text-secondary);
648
- font-size: 15px;
649
- margin: 0;
650
- line-height: 1.6;
651
- }
652
-
653
- /* 重复的表格样式已移除,使用上面的统一定义 */
654
-
655
- .interface-table tr.inactive {
656
- color: var(--text-light);
657
- background-color: #f9f9f9;
658
- opacity: 0.7;
659
- }
660
-
661
- .url-pattern {
662
- font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
663
- padding: 4px 8px;
664
- background: #f5f5f5;
665
- border-radius: 4px;
666
- display: inline-block;
667
- max-width: 300px;
668
- overflow: hidden;
669
- text-overflow: ellipsis;
670
- white-space: nowrap;
671
- }
672
-
673
- /* 接口状态开关 */
674
- .status-switch {
675
- position: relative;
676
- display: inline-block;
677
- width: 48px;
678
- height: 24px;
679
- }
680
-
681
- .status-switch input {
682
- opacity: 0;
683
- width: 0;
684
- height: 0;
685
- }
686
-
687
- .status-switch .slider {
688
- position: absolute;
689
- cursor: pointer;
690
- top: 0;
691
- left: 0;
692
- right: 0;
693
- bottom: 0;
694
- background-color: #ccc;
695
- transition: .4s;
696
- border-radius: 24px;
697
- }
698
-
699
- .status-switch .slider:before {
700
- position: absolute;
701
- content: "";
702
- height: 18px;
703
- width: 18px;
704
- left: 3px;
705
- bottom: 3px;
706
- background-color: white;
707
- transition: .4s;
708
- border-radius: 50%;
709
- }
710
-
711
- .status-switch input:checked + .slider {
712
- background-color: var(--success-color);
713
- }
714
-
715
- .status-switch input:checked + .slider:before {
716
- transform: translateX(24px);
717
- }
718
-
719
- /* 操作按钮 */
720
- .action-button {
721
- border: none;
722
- border-radius: 6px;
723
- padding: 6px 12px;
724
- cursor: pointer;
725
- font-size: 14px;
726
- font-weight: 500;
727
- display: inline-flex;
728
- align-items: center;
729
- gap: 6px;
730
- transition: all var(--transition-time);
731
- margin-right: 8px;
732
- }
733
-
734
- .test-button {
735
- background-color: #e6f7ff;
736
- color: var(--primary-color);
737
- border: 1px solid #91d5ff;
738
- }
739
-
740
- .test-button:hover {
741
- background-color: #bae7ff;
742
- }
743
-
744
- .edit-button {
745
- background-color: #fcf6bd;
746
- color: #d4b106;
747
- border: 1px solid #ffd666;
748
- }
749
-
750
- .edit-button:hover {
751
- background-color: #fff1b8;
752
- }
753
-
754
- .delete-button {
755
- background-color: #fff2f0;
756
- color: var(--error-color);
757
- border: 1px solid #ffccc7;
758
- }
759
-
760
- .delete-button:hover {
761
- background-color: #ffa39e;
762
- color: #fff;
763
- }
764
-
765
- /* 空状态 */
766
- .empty-data {
767
- display: flex;
768
- flex-direction: column;
769
- align-items: center;
770
- justify-content: center;
771
- padding: 60px 20px;
772
- background: #fafafa;
773
- border-radius: var(--border-radius);
774
- text-align: center;
775
- margin-top: 24px;
776
- }
777
-
778
- .empty-icon {
779
- font-size: 64px;
780
- color: #d9d9d9;
781
- margin-bottom: 24px;
782
- }
783
-
784
- .empty-text {
785
- color: var(--text-secondary);
786
- font-size: 16px;
787
- margin-bottom: 24px;
788
- }
789
-
790
- .create-interface-button {
791
- background: linear-gradient(to right, var(--primary-color), var(--primary-hover));
792
- color: white;
793
- border: none;
794
- border-radius: var(--border-radius);
795
- padding: 0 24px;
796
- height: 44px;
797
- cursor: pointer;
798
- font-size: 16px;
799
- font-weight: 500;
800
- display: flex;
801
- align-items: center;
802
- gap: 8px;
803
- transition: all var(--transition-time);
804
- box-shadow: 0 2px 8px rgba(24, 144, 255, 0.35);
805
- }
806
-
807
- .create-interface-button:hover {
808
- background: linear-gradient(to right, var(--primary-hover), var(--primary-active));
809
- transform: translateY(-2px);
810
- box-shadow: 0 4px 12px rgba(24, 144, 255, 0.5);
811
- }
812
-
813
- /* 加载状态 */
814
- .loading {
815
- display: flex;
816
- justify-content: center;
817
- align-items: center;
818
- padding: 40px;
819
- font-size: 16px;
820
- color: var(--text-secondary);
821
- }
822
-
823
- /* 错误容器样式 */
824
- .error-container {
825
- display: flex;
826
- flex-direction: column;
827
- align-items: center;
828
- justify-content: center;
829
- height: 300px;
830
- color: #8c8c8c;
831
- }
832
-
833
- .error-icon {
834
- font-size: 48px;
835
- margin-bottom: 16px;
836
- }
837
-
838
- .error-message {
839
- font-size: 16px;
840
- margin-bottom: 24px;
841
- }
842
-
843
- .back-button {
844
- height: 36px;
845
- padding: 0 20px;
846
- background-color: #1890ff;
847
- color: white;
848
- border: none;
849
- border-radius: 4px;
850
- cursor: pointer;
851
- font-size: 14px;
852
- }
853
-
854
- .back-button:hover {
855
- background-color: #40a9ff;
856
- }
857
-
858
- /* 模态框样式 */
859
- .modal-overlay {
860
- position: fixed;
861
- top: 0;
862
- left: 0;
863
- right: 0;
864
- bottom: 0;
865
- background-color: rgba(0, 0, 0, 0.5);
866
- display: flex;
867
- align-items: center;
868
- justify-content: center;
869
- z-index: 1000;
870
- }
871
-
872
- .modal {
873
- background-color: white;
874
- border-radius: 4px;
875
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
876
- width: 600px;
877
- max-width: 90%;
878
- max-height: 90vh;
879
- overflow-y: auto;
880
- }
881
-
882
- .interface-modal {
883
- width: 700px;
884
- }
885
-
886
- .modal-header {
887
- display: flex;
888
- justify-content: space-between;
889
- align-items: center;
890
- padding: 16px;
891
- border-bottom: 1px solid #f0f0f0;
892
- }
893
-
894
- .modal-header h2 {
895
- margin: 0;
896
- font-size: 16px;
897
- font-weight: 600;
898
- color: #262626;
899
- }
900
-
901
- .close-button {
902
- background: none;
903
- border: none;
904
- font-size: 20px;
905
- color: #8c8c8c;
906
- cursor: pointer;
907
- }
908
-
909
- .interface-form {
910
- padding: 16px;
911
- }
912
-
913
- .form-row {
914
- display: flex;
915
- gap: 16px;
916
- }
917
-
918
- .form-row .form-group {
919
- flex: 1;
920
- }
921
-
922
- .form-group {
923
- margin-bottom: 16px;
924
- }
925
-
926
- .form-group label {
927
- display: block;
928
- margin-bottom: 8px;
929
- font-weight: 500;
930
- color: #262626;
931
- }
932
-
933
- .response-header {
934
- display: flex;
935
- justify-content: space-between;
936
- align-items: center;
937
- margin-bottom: 8px;
938
- }
939
-
940
- .format-button {
941
- background-color: #f0f5ff;
942
- color: #597ef7;
943
- border: none;
944
- border-radius: 4px;
945
- padding: 4px 8px;
946
- cursor: pointer;
947
- font-size: 12px;
948
- }
949
-
950
- .format-button:hover {
951
- background-color: #d6e4ff;
952
- }
953
-
954
- .checkbox-label,
955
- .radio-label {
956
- display: flex;
957
- align-items: center;
958
- gap: 8px;
959
- font-weight: normal;
960
- color: #262626;
961
- margin-bottom: 8px;
962
- }
963
-
964
- .radio-group {
965
- display: flex;
966
- gap: 24px;
967
- }
968
-
969
- .form-group input[type="text"],
970
- .form-group input[type="number"],
971
- .form-group select {
972
- width: 100%;
973
- height: 32px;
974
- padding: 0 12px;
975
- border: 1px solid #d9d9d9;
976
- border-radius: 4px;
977
- font-size: 14px;
978
- }
979
-
980
- .form-group textarea {
981
- width: 100%;
982
- padding: 8px 12px;
983
- border: 1px solid #d9d9d9;
984
- border-radius: 4px;
985
- font-size: 14px;
986
- resize: vertical;
987
- font-family: monospace;
988
- }
989
-
990
- .help-text {
991
- font-size: 12px;
992
- color: #8c8c8c;
993
- margin-top: 4px;
994
- display: block;
995
- }
996
-
997
- .form-actions {
998
- display: flex;
999
- justify-content: flex-end;
1000
- gap: 8px;
1001
- margin-top: 24px;
1002
- padding-top: 16px;
1003
- border-top: 1px solid #f0f0f0;
1004
- }
1005
-
1006
- .cancel-button {
1007
- height: 32px;
1008
- padding: 0 16px;
1009
- background-color: white;
1010
- border: 1px solid #d9d9d9;
1011
- border-radius: 4px;
1012
- cursor: pointer;
1013
- font-size: 14px;
1014
- }
1015
-
1016
- .submit-button {
1017
- height: 32px;
1018
- padding: 0 16px;
1019
- background-color: #1890ff;
1020
- color: white;
1021
- border: none;
1022
- border-radius: 4px;
1023
- cursor: pointer;
1024
- font-size: 14px;
1025
- }
1026
-
1027
- /* 全屏TextArea样式 */
1028
- .textarea-fullscreen-btn {
1029
- position: absolute;
1030
- top: 8px;
1031
- right: 32px;
1032
- background: rgba(255, 255, 255, 0.9);
1033
- border: 1px solid #d9d9d9;
1034
- z-index: 10;
1035
- }
1036
-
1037
- .textarea-fullscreen-btn:hover {
1038
- background: rgba(255, 255, 255, 1);
1039
- border-color: #40a9ff;
1040
- }
1041
-
1042
- .textarea-fullscreen-overlay {
1043
- position: fixed;
1044
- top: 0;
1045
- left: 0;
1046
- right: 0;
1047
- bottom: 0;
1048
- background: #1f1f1f;
1049
- z-index: 1000;
1050
- display: flex;
1051
- flex-direction: column;
1052
- }
1053
-
1054
- .textarea-fullscreen-header {
1055
- padding: 12px 16px;
1056
- border-bottom: 1px solid #333;
1057
- display: flex;
1058
- justify-content: flex-end;
1059
- align-items: center;
1060
- }
1061
-
1062
- .textarea-fullscreen-editor {
1063
- flex: 1;
1064
- border: none !important;
1065
- background: #1f1f1f !important;
1066
- color: #ffffff !important;
1067
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
1068
- font-size: 14px !important;
1069
- line-height: 1.6 !important;
1070
- resize: none !important;
1071
- padding: 16px !important;
1072
- outline: none !important;
1073
- box-shadow: none !important;
1074
- }
1075
-
1076
- .textarea-fullscreen-editor:focus {
1077
- background: #1f1f1f !important;
1078
- border: none !important;
1079
- box-shadow: none !important;
1080
- }
1081
-
1082
- /* 延迟时间样式 */
1083
- .delay-active {
1084
- color: #1890ff;
1085
- font-weight: 500;
1086
- }
1087
-
1088
- .delay-inactive {
1089
- color: #999;
1090
- font-style: italic;
1091
- }
1092
-
1093
- /* 状态码样式 */
1094
- .status-success {
1095
- color: #52c41a;
1096
- font-weight: 500;
1097
- }
1098
-
1099
- .status-warning {
1100
- color: #faad14;
1101
- font-weight: 500;
1102
- }
1103
-
1104
- .status-error {
1105
- color: #f5222d;
1106
- font-weight: 500;
1107
- }
1108
-
1109
- /* 接口名称样式 */
1110
- .interface-name {
1111
- font-weight: 500;
1112
- }
1113
-
1114
- /* URL模式样式 */
1115
- .url-pattern {
1116
- font-family: monospace;
1117
- color: #333;
1118
- }
1119
-
1120
- /* 无响应数据样式 */
1121
- .no-response {
1122
- color: #999;
1123
- font-style: italic;
1124
- }
1125
-
1126
- /* 内联列设置按钮样式 */
1127
- .inline-column-settings-btn {
1128
- display: flex;
1129
- align-items: center;
1130
- gap: 6px;
1131
- padding: 4px 8px;
1132
- border-radius: 4px;
1133
- border: 1px solid #d9d9d9;
1134
- background: #ffffff;
1135
- color: #666;
1136
- font-size: 12px;
1137
- transition: all 0.2s ease;
1138
- }
1139
-
1140
- .inline-column-settings-btn:hover {
1141
- border-color: #4096ff;
1142
- background: #f0f9ff;
1143
- color: #4096ff;
1144
- }
1145
-
1146
- .inline-column-settings-btn:active {
1147
- border-color: #1677ff;
1148
- background: #e6f4ff;
1149
- }
1150
-
1151
- /* 紧凑排序 Chips */
1152
- .sortable-chip {
1153
- display: inline-flex;
1154
- align-items: center;
1155
- padding: 2px 10px;
1156
- height: 24px;
1157
- border: 1px solid #e6e6e6;
1158
- border-radius: 12px;
1159
- background: #fff;
1160
- font-size: 12px;
1161
- color: #595959;
1162
- cursor: move;
1163
- user-select: none;
1164
- white-space: nowrap;
1165
- }
1166
-
1167
- .sortable-chip:hover {
1168
- border-color: #bfbfbf;
1169
- box-shadow: 0 1px 2px rgba(0,0,0,0.06);
1170
- }
1171
-
1172
- .sortable-chip-active {
1173
- background: #e6f7ff;
1174
- border-color: #91d5ff;
1175
- color: #1677ff;
1176
- }
1177
-
1178
- .sortable-ghost {
1179
- opacity: 0.6;
1180
- }
1181
-
1182
- /* 接口弹窗样式 */
1183
- .interface-modal .ant-modal-header {
1184
- border-bottom: 1px solid #f0f0f0;
1185
- padding: 16px 24px;
1186
- margin-bottom: 0;
1187
- }
1188
-
1189
- .interface-modal .ant-modal-body {
1190
- padding: 0;
1191
- }
1192
-
1193
- .interface-modal .ant-card {
1194
- border: 1px solid #e8e8e8;
1195
- border-radius: 8px;
1196
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
1197
- }
1198
-
1199
- .interface-modal .ant-card-head {
1200
- background: #fafafa;
1201
- border-bottom: 1px solid #f0f0f0;
1202
- padding: 0 20px;
1203
- min-height: 48px;
1204
- }
1205
-
1206
- .interface-modal .ant-card-head-title {
1207
- font-size: 14px;
1208
- font-weight: 600;
1209
- color: #262626;
1210
- padding: 12px 0;
1211
- }
1212
-
1213
- .interface-modal .ant-form-item-label > label {
1214
- font-size: 13px;
1215
- font-weight: 500;
1216
- color: #434343;
1217
- }
1218
-
1219
- .interface-modal .ant-form-item {
1220
- margin-bottom: 16px;
1221
- }
1222
-
1223
- .interface-modal .ant-input,
1224
- .interface-modal .ant-select-selector {
1225
- border-radius: 6px;
1226
- border: 1px solid #d9d9d9;
1227
- }
1228
-
1229
- .interface-modal .ant-input:focus,
1230
- .interface-modal .ant-select-focused .ant-select-selector {
1231
- border-color: #4096ff;
1232
- box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.1);
1233
- }
1234
-
1235
- /* 接口弹窗中的折叠面板样式 */
1236
- .interface-modal .ant-collapse {
1237
- background: transparent;
1238
- border: none;
1239
- }
1240
-
1241
- .interface-modal .ant-collapse-item {
1242
- margin-bottom: 16px;
1243
- background: #ffffff;
1244
- border: 1px solid #e8e8e8;
1245
- border-radius: 8px;
1246
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
1247
- }
1248
-
1249
- .interface-modal .ant-collapse-header {
1250
- background: #fafafa;
1251
- border-bottom: 1px solid #f0f0f0;
1252
- border-radius: 8px 8px 0 0 !important;
1253
- padding: 16px 20px !important;
1254
- font-size: 14px;
1255
- font-weight: 600;
1256
- color: #262626;
1257
- }
1258
-
1259
- .interface-modal .ant-collapse-content {
1260
- border-top: none;
1261
- background: #ffffff;
1262
- border-radius: 0 0 8px 8px;
1263
- }
1264
-
1265
- .interface-modal .ant-collapse-content-box {
1266
- padding: 20px;
1267
- }
1268
-
1269
- .interface-modal .ant-collapse-arrow {
1270
- color: #666 !important;
1271
- font-size: 12px !important;
1272
- }
1273
-
1274
- /* 参数匹配规则帮助按钮样式 */
1275
- .interface-modal .ant-popover-inner-content {
1276
- padding: 12px;
1277
- }
1278
-
1279
- .interface-modal .ant-popover-title {
1280
- font-weight: 600;
1281
- color: #262626;
1282
- padding: 8px 12px;
1283
- border-bottom: 1px solid #f0f0f0;
1284
- }
1285
-
1286
- /* 分页器样式 */
1287
- .interface-table .ant-pagination-options {
1288
- margin-right: 16px;
1289
- }
1290
-
1291
- /* 可调整列宽样式 */
1292
- .column-resize-handle {
1293
- position: absolute;
1294
- right: -5px;
1295
- top: 0;
1296
- bottom: 0;
1297
- width: 10px;
1298
- cursor: col-resize;
1299
- z-index: 1;
1300
- user-select: none;
1301
- }
1302
-
1303
- .column-resize-handle:hover {
1304
- background-color: rgba(24, 144, 255, 0.2);
1305
- }
1306
-
1307
- .column-resize-handle::after {
1308
- content: '';
1309
- position: absolute;
1310
- right: 4px;
1311
- top: 50%;
1312
- transform: translateY(-50%);
1313
- width: 2px;
1314
- height: 20px;
1315
- background-color: #d9d9d9;
1316
- transition: background-color 0.3s;
1317
- }
1318
-
1319
- .column-resize-handle:hover::after {
1320
- background-color: #1890ff;
1321
- }