whistle.mock-plugins 1.1.3-beta.3 → 1.1.3-dev.10

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 (7) hide show
  1. package/app/public/js/index.js +1 -1
  2. package/app/public/js/index.js.LICENSE.txt +0 -6
  3. package/package.json +1 -1
  4. package/ui/src/pages/InterfaceManagement.js +30 -162
  5. package/ui/src/pages/InterfaceManagementV2.js +1434 -21
  6. package/ui/src/pages/MockDataV2.js +464 -440
  7. package/ui/src/styles/interface-management.css +89 -38
package/ui/src/styles/interface-management.css CHANGED
@@ -15,38 +15,46 @@
15
15
  --transition-time: 0.3s;
16
16
  }
17
17
 
18
+
19
+ /* 页面容器 */
18
20
  .interface-management-container {
19
21
  padding: 24px;
20
- background: #f5f7fa;
22
+ min-height: calc(100vh - 120px);
21
23
  }
22
24
 
23
- /* 顶部功能区域 */
24
- .interface-header-card {
25
+ /* 统一控制台 */
26
+ .interface-control-panel {
25
27
  margin-bottom: 16px;
26
28
  border-radius: 12px;
27
29
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
28
30
  overflow: hidden;
29
31
  }
30
32
 
31
- .interface-management-header {
33
+ .control-panel-header {
32
34
  display: flex;
33
35
  justify-content: space-between;
34
36
  align-items: center;
35
37
  padding: 8px 0;
38
+ border-bottom: 1px solid #f0f0f0;
36
39
  }
37
40
 
38
- .feature-selector-container {
41
+ .control-left {
39
42
  display: flex;
40
43
  align-items: center;
41
44
  flex-wrap: wrap;
42
- gap: 12px;
45
+ gap: 8px;
46
+ }
47
+
48
+ .control-right {
49
+ display: flex;
50
+ align-items: center;
43
51
  }
44
52
 
45
53
  .feature-selector {
46
54
  display: flex;
47
55
  align-items: center;
48
56
  background: #f9f9f9;
49
- padding: 8px 16px;
57
+ padding: 6px 12px;
50
58
  border-radius: var(--border-radius);
51
59
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
52
60
  transition: all var(--transition-time);
@@ -57,9 +65,74 @@
57
65
  }
58
66
 
59
67
  .feature-selector span {
60
- margin-right: 12px;
68
+ margin-right: 8px;
61
69
  font-weight: 600;
62
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;
63
136
  }
64
137
 
65
138
  .interface-actions {
@@ -202,7 +275,7 @@
202
275
  .list-container-card {
203
276
  border-radius: 12px;
204
277
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
205
- margin-bottom: 24px;
278
+ margin-bottom: 40px;
206
279
  }
207
280
 
208
281
  .interface-list-container {
@@ -215,10 +288,14 @@
215
288
  font-weight: 600;
216
289
  padding: 12px 16px !important;
217
290
  color: #333;
291
+ white-space: nowrap;
218
292
  }
219
293
 
220
294
  .interface-table td {
221
295
  padding: 12px 16px !important;
296
+ white-space: nowrap;
297
+ overflow: hidden;
298
+ text-overflow: ellipsis;
222
299
  }
223
300
 
224
301
  /* 卡片视图样式 */
@@ -569,33 +646,7 @@
569
646
  line-height: 1.6;
570
647
  }
571
648
 
572
- .interface-table {
573
- width: 100%;
574
- border-collapse: collapse;
575
- border-radius: var(--border-radius);
576
- overflow: hidden;
577
- box-shadow: var(--card-shadow);
578
- }
579
-
580
- .interface-table th,
581
- .interface-table td {
582
- padding: 16px;
583
- text-align: left;
584
- border-bottom: 1px solid var(--border-color);
585
- }
586
-
587
- .interface-table th {
588
- background-color: #fafafa;
589
- color: var(--text-secondary);
590
- font-weight: 600;
591
- font-size: 14px;
592
- text-transform: uppercase;
593
- letter-spacing: 0.5px;
594
- }
595
-
596
- .interface-table tr:hover {
597
- background-color: #f5f5f5;
598
- }
649
+ /* 重复的表格样式已移除，使用上面的统一定义 */
599
650
 
600
651
  .interface-table tr.inactive {
601
652
  color: var(--text-light);
@@ -605,14 +656,14 @@
605
656
 
606
657
  .url-pattern {
607
658
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
608
- word-break: break-all;
609
659
  padding: 4px 8px;
610
660
  background: #f5f5f5;
611
661
  border-radius: 4px;
612
662
  display: inline-block;
613
- max-width: 100%;
663
+ max-width: 300px;
614
664
  overflow: hidden;
615
665
  text-overflow: ellipsis;
666
+ white-space: nowrap;
616
667
  }
617
668
 
618
669
  /* 接口状态开关 */