whistle.mock-plugins 1.2.2-beta.4 → 1.2.2-beta.5
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/VERSION.md +13 -7
- package/app/public/js/index.js +1 -1
- package/package.json +1 -1
- package/ui/src/pages/InterfaceManagementV2.js +622 -44
- package/ui/src/pages/Settings.js +35 -0
|
@@ -95,6 +95,9 @@ const InterfaceManagement = () => {
|
|
|
95
95
|
// 数据管理显示模式
|
|
96
96
|
const [displayMode, setDisplayMode] = useState('modal');
|
|
97
97
|
|
|
98
|
+
// 接口表单显示模式
|
|
99
|
+
const [interfaceFormDisplayMode, setInterfaceFormDisplayMode] = useState('modal');
|
|
100
|
+
|
|
98
101
|
// 表单实例
|
|
99
102
|
const [form] = Form.useForm();
|
|
100
103
|
|
|
@@ -165,6 +168,29 @@ const InterfaceManagement = () => {
|
|
|
165
168
|
};
|
|
166
169
|
}, []);
|
|
167
170
|
|
|
171
|
+
// 监听接口表单显示模式变化
|
|
172
|
+
useEffect(() => {
|
|
173
|
+
// 初始化时从 localStorage 读取配置
|
|
174
|
+
const savedMode = localStorage.getItem('interfaceFormDisplayMode');
|
|
175
|
+
if (savedMode) {
|
|
176
|
+
setInterfaceFormDisplayMode(savedMode);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// 监听 storage 事件，实现设置立即生效
|
|
180
|
+
const handleStorageChange = () => {
|
|
181
|
+
const newMode = localStorage.getItem('interfaceFormDisplayMode');
|
|
182
|
+
if (newMode) {
|
|
183
|
+
setInterfaceFormDisplayMode(newMode);
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
window.addEventListener('storage', handleStorageChange);
|
|
188
|
+
|
|
189
|
+
return () => {
|
|
190
|
+
window.removeEventListener('storage', handleStorageChange);
|
|
191
|
+
};
|
|
192
|
+
}, []);
|
|
193
|
+
|
|
168
194
|
// 获取当前选中的功能模块
|
|
169
195
|
const selectedFeature = features.find(f => f.id === selectedFeatureId);
|
|
170
196
|
|
|
@@ -1543,49 +1569,70 @@ const InterfaceManagement = () => {
|
|
|
1543
1569
|
</div>
|
|
1544
1570
|
</Card>
|
|
1545
1571
|
|
|
1546
|
-
{/*
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1572
|
+
{/* 接口编辑/创建模态框/抽屉 */}
|
|
1573
|
+
{interfaceFormDisplayMode === 'drawer' ? (
|
|
1574
|
+
<Drawer
|
|
1575
|
+
title={
|
|
1576
|
+
<div style={{
|
|
1577
|
+
fontSize: '18px',
|
|
1578
|
+
fontWeight: 600,
|
|
1579
|
+
color: '#262626',
|
|
1580
|
+
display: 'flex',
|
|
1581
|
+
alignItems: 'center',
|
|
1582
|
+
gap: '8px'
|
|
1583
|
+
}}>
|
|
1584
|
+
<span>{editingInterface ? '编辑接口' : (isDuplicateMode ? '复制新增接口' : '添加接口')}</span>
|
|
1585
|
+
<Badge
|
|
1586
|
+
count="配置向导"
|
|
1587
|
+
style={{
|
|
1588
|
+
backgroundColor: '#f0f9ff',
|
|
1589
|
+
color: '#1677ff',
|
|
1590
|
+
fontSize: '11px',
|
|
1591
|
+
fontWeight: 'normal'
|
|
1592
|
+
}}
|
|
1593
|
+
/>
|
|
1594
|
+
</div>
|
|
1595
|
+
}
|
|
1596
|
+
placement="right"
|
|
1597
|
+
width={1040}
|
|
1598
|
+
open={modalVisible}
|
|
1599
|
+
onClose={handleCancel}
|
|
1600
|
+
destroyOnClose
|
|
1601
|
+
bodyStyle={{
|
|
1602
|
+
padding: '0',
|
|
1603
|
+
background: '#fafafa'
|
|
1604
|
+
}}
|
|
1605
|
+
footer={
|
|
1606
|
+
<div style={{ textAlign: 'right' }}>
|
|
1607
|
+
<Space>
|
|
1608
|
+
<Button onClick={handleCancel}>取消</Button>
|
|
1609
|
+
<Button type="primary" onClick={handleSubmit}>
|
|
1610
|
+
{editingInterface ? '保存' : '创建'}
|
|
1611
|
+
</Button>
|
|
1612
|
+
</Space>
|
|
1613
|
+
</div>
|
|
1614
|
+
}
|
|
1615
|
+
className="interface-drawer"
|
|
1616
|
+
>
|
|
1617
|
+
<div style={{ padding: '24px' }}>
|
|
1618
|
+
<Form
|
|
1619
|
+
form={form}
|
|
1620
|
+
layout="vertical"
|
|
1621
|
+
initialValues={{
|
|
1622
|
+
name: '',
|
|
1623
|
+
group: '',
|
|
1624
|
+
pattern: '',
|
|
1625
|
+
proxyType: 'response',
|
|
1626
|
+
statusCode: '200',
|
|
1627
|
+
contentType: 'application/json; charset=utf-8',
|
|
1628
|
+
responses: [],
|
|
1629
|
+
httpMethod: 'ALL',
|
|
1630
|
+
targetUrl: '',
|
|
1631
|
+
headerItems: [],
|
|
1632
|
+
paramMatchers: [],
|
|
1633
|
+
responseDelay: '0'
|
|
1634
|
+
}}
|
|
1635
|
+
>
|
|
1589
1636
|
name: '',
|
|
1590
1637
|
group: '',
|
|
1591
1638
|
pattern: '',
|
|
@@ -2106,7 +2153,538 @@ const InterfaceManagement = () => {
|
|
|
2106
2153
|
</Collapse>
|
|
2107
2154
|
</Form>
|
|
2108
2155
|
</div>
|
|
2109
|
-
|
|
2156
|
+
</Drawer>
|
|
2157
|
+
) : (
|
|
2158
|
+
<Modal
|
|
2159
|
+
title={
|
|
2160
|
+
<div style={{
|
|
2161
|
+
fontSize: '18px',
|
|
2162
|
+
fontWeight: 600,
|
|
2163
|
+
color: '#262626',
|
|
2164
|
+
display: 'flex',
|
|
2165
|
+
alignItems: 'center',
|
|
2166
|
+
gap: '8px'
|
|
2167
|
+
}}>
|
|
2168
|
+
<span>{editingInterface ? '编辑接口' : (isDuplicateMode ? '复制新增接口' : '添加接口')}</span>
|
|
2169
|
+
<Badge
|
|
2170
|
+
count="配置向导"
|
|
2171
|
+
style={{
|
|
2172
|
+
backgroundColor: '#f0f9ff',
|
|
2173
|
+
color: '#1677ff',
|
|
2174
|
+
fontSize: '11px',
|
|
2175
|
+
fontWeight: 'normal'
|
|
2176
|
+
}}
|
|
2177
|
+
/>
|
|
2178
|
+
</div>
|
|
2179
|
+
}
|
|
2180
|
+
open={modalVisible}
|
|
2181
|
+
onCancel={handleCancel}
|
|
2182
|
+
onOk={handleSubmit}
|
|
2183
|
+
width={1040}
|
|
2184
|
+
destroyOnClose
|
|
2185
|
+
okText={editingInterface ? '保存' : '创建'}
|
|
2186
|
+
cancelText="取消"
|
|
2187
|
+
bodyStyle={{
|
|
2188
|
+
maxHeight: '70vh',
|
|
2189
|
+
overflow: 'auto',
|
|
2190
|
+
background: '#fafafa'
|
|
2191
|
+
}}
|
|
2192
|
+
>
|
|
2193
|
+
<div style={{ padding: '0' }}>
|
|
2194
|
+
<Form
|
|
2195
|
+
form={form}
|
|
2196
|
+
layout="vertical"
|
|
2197
|
+
initialValues={{
|
|
2198
|
+
name: '',
|
|
2199
|
+
group: '',
|
|
2200
|
+
pattern: '',
|
|
2201
|
+
proxyType: 'response',
|
|
2202
|
+
statusCode: '200',
|
|
2203
|
+
contentType: 'application/json; charset=utf-8',
|
|
2204
|
+
responses: [],
|
|
2205
|
+
httpMethod: 'ALL',
|
|
2206
|
+
targetUrl: '',
|
|
2207
|
+
headerItems: [],
|
|
2208
|
+
paramMatchers: [],
|
|
2209
|
+
responseDelay: '0'
|
|
2210
|
+
}}
|
|
2211
|
+
>
|
|
2212
|
+
{/* Modal 模式下使用相同的表单内容，但去掉 Collapse 包装 */}
|
|
2213
|
+
<div style={{ padding: '24px' }}>
|
|
2214
|
+
{/* 基础信息 */}
|
|
2215
|
+
<div style={{ marginBottom: '24px' }}>
|
|
2216
|
+
<div style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
2217
|
+
<Badge count="1" style={{ backgroundColor: '#1677ff' }} />
|
|
2218
|
+
<span>基础信息</span>
|
|
2219
|
+
</div>
|
|
2220
|
+
<div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
|
|
2221
|
+
<div style={{ flex: 1 }}>
|
|
2222
|
+
<Form.Item
|
|
2223
|
+
name="name"
|
|
2224
|
+
label="接口名称"
|
|
2225
|
+
rules={[{ required: true, message: '请输入接口名称' }]}
|
|
2226
|
+
>
|
|
2227
|
+
<Input placeholder="请输入接口名称" />
|
|
2228
|
+
</Form.Item>
|
|
2229
|
+
</div>
|
|
2230
|
+
<div style={{ flex: 1 }}>
|
|
2231
|
+
<Form.Item
|
|
2232
|
+
name="group"
|
|
2233
|
+
label="分组"
|
|
2234
|
+
tooltip="为接口设置分组，便于管理和批量操作"
|
|
2235
|
+
>
|
|
2236
|
+
<Select
|
|
2237
|
+
placeholder="选择或创建分组"
|
|
2238
|
+
showSearch
|
|
2239
|
+
allowClear
|
|
2240
|
+
style={{ width: '100%' }}
|
|
2241
|
+
mode="tags"
|
|
2242
|
+
maxTagCount="responsive"
|
|
2243
|
+
maxTagTextLength={10}
|
|
2244
|
+
onChange={(value) => {
|
|
2245
|
+
if (Array.isArray(value) && value.length > 0) {
|
|
2246
|
+
const groupValue = value[0] === '' ? undefined : value[0];
|
|
2247
|
+
form.setFieldsValue({ group: groupValue });
|
|
2248
|
+
}
|
|
2249
|
+
}}
|
|
2250
|
+
onInputKeyDown={(e) => {
|
|
2251
|
+
if (e.key === 'Enter') {
|
|
2252
|
+
e.stopPropagation();
|
|
2253
|
+
}
|
|
2254
|
+
}}
|
|
2255
|
+
>
|
|
2256
|
+
{Array.from(new Set(interfaces.map(item => item.group).filter(Boolean))).map(group => (
|
|
2257
|
+
<Option key={group} value={group}>{group}</Option>
|
|
2258
|
+
))}
|
|
2259
|
+
</Select>
|
|
2260
|
+
</Form.Item>
|
|
2261
|
+
</div>
|
|
2262
|
+
</div>
|
|
2263
|
+
</div>
|
|
2264
|
+
|
|
2265
|
+
{/* URL配置 */}
|
|
2266
|
+
<div style={{ marginBottom: '24px' }}>
|
|
2267
|
+
<div style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
2268
|
+
<Badge count="2" style={{ backgroundColor: '#1677ff' }} />
|
|
2269
|
+
<span>URL配置</span>
|
|
2270
|
+
</div>
|
|
2271
|
+
<div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
|
|
2272
|
+
<div style={{ flex: 1 }}>
|
|
2273
|
+
<Form.Item
|
|
2274
|
+
name="pattern"
|
|
2275
|
+
label="URL匹配规则"
|
|
2276
|
+
rules={[
|
|
2277
|
+
{ required: true, message: '请输入URL匹配规则' },
|
|
2278
|
+
({ getFieldValue }) => ({
|
|
2279
|
+
validator(_, value) {
|
|
2280
|
+
const proxyType = getFieldValue('proxyType');
|
|
2281
|
+
if (!value) return Promise.resolve();
|
|
2282
|
+
|
|
2283
|
+
if (proxyType === 'url_redirect') {
|
|
2284
|
+
try {
|
|
2285
|
+
new URL(value);
|
|
2286
|
+
return Promise.resolve();
|
|
2287
|
+
} catch (e) {
|
|
2288
|
+
return Promise.reject(new Error('URL重定向模式下，URL匹配规则必须是完整的URL（包括http://或https://）'));
|
|
2289
|
+
}
|
|
2290
|
+
}
|
|
2291
|
+
|
|
2292
|
+
if (proxyType === 'redirect') {
|
|
2293
|
+
if (value.startsWith('http://') || value.startsWith('https://')) {
|
|
2294
|
+
return Promise.resolve();
|
|
2295
|
+
}
|
|
2296
|
+
return Promise.reject(new Error('重定向模式下，URL匹配规则必须以http://或https://开头'));
|
|
2297
|
+
}
|
|
2298
|
+
|
|
2299
|
+
if (proxyType === 'response') {
|
|
2300
|
+
if (value.startsWith('/') && value.endsWith('/')) {
|
|
2301
|
+
try {
|
|
2302
|
+
new RegExp(value.slice(1, -1));
|
|
2303
|
+
return Promise.resolve();
|
|
2304
|
+
} catch (e) {
|
|
2305
|
+
return Promise.reject(new Error('无效的正则表达式格式'));
|
|
2306
|
+
}
|
|
2307
|
+
}
|
|
2308
|
+
|
|
2309
|
+
if (value.includes('*')) {
|
|
2310
|
+
if (/^[a-zA-Z0-9\-_/.*]+$/.test(value)) {
|
|
2311
|
+
return Promise.resolve();
|
|
2312
|
+
}
|
|
2313
|
+
return Promise.reject(new Error('通配符URL格式不正确'));
|
|
2314
|
+
}
|
|
2315
|
+
|
|
2316
|
+
if (/^[a-zA-Z0-9\-_/]+$/.test(value)) {
|
|
2317
|
+
return Promise.resolve();
|
|
2318
|
+
}
|
|
2319
|
+
return Promise.reject(new Error('URL路径格式不正确'));
|
|
2320
|
+
}
|
|
2321
|
+
|
|
2322
|
+
return Promise.resolve();
|
|
2323
|
+
},
|
|
2324
|
+
}),
|
|
2325
|
+
]}
|
|
2326
|
+
tooltip={{
|
|
2327
|
+
title: (
|
|
2328
|
+
<>
|
|
2329
|
+
<div>不同处理方式下URL匹配规则要求：</div>
|
|
2330
|
+
<ul style={{margin: '5px 0 0 15px', padding: 0}}>
|
|
2331
|
+
<li><b>模拟响应：</b> 支持路径格式如 /api/users，通配符如 /api/*，正则如 /\/api\/\d+/</li>
|
|
2332
|
+
<li><b>重定向：</b> 必须以http://或https://开头，例如：https://example.com/api</li>
|
|
2333
|
+
<li><b>URL重定向：</b> 必须是完整URL，包括http://或https://，例如：https://example.com/api/users</li>
|
|
2334
|
+
</ul>
|
|
2335
|
+
</>
|
|
2336
|
+
),
|
|
2337
|
+
overlayStyle: { maxWidth: '450px' }
|
|
2338
|
+
}}
|
|
2339
|
+
>
|
|
2340
|
+
<Input
|
|
2341
|
+
placeholder="根据选择的处理方式输入相应格式的URL"
|
|
2342
|
+
/>
|
|
2343
|
+
</Form.Item>
|
|
2344
|
+
</div>
|
|
2345
|
+
<div style={{ flex: 1 }}>
|
|
2346
|
+
<Form.Item
|
|
2347
|
+
name="proxyType"
|
|
2348
|
+
label="处理方式"
|
|
2349
|
+
rules={[{ required: true, message: '请选择处理方式' }]}
|
|
2350
|
+
tooltip={{
|
|
2351
|
+
title: (
|
|
2352
|
+
<>
|
|
2353
|
+
<div>不同处理方式的规则说明：</div>
|
|
2354
|
+
<ul style={{margin: '5px 0 0 15px', padding: 0}}>
|
|
2355
|
+
<li><b>模拟响应：</b> 返回您定义的响应内容</li>
|
|
2356
|
+
<li><b>重定向：</b> 将请求重定向到其他URL，URL匹配规则必须以http://或https://开头</li>
|
|
2357
|
+
<li><b>URL重定向：</b> 完全匹配URL时重定向，URL匹配规则必须是完整URL</li>
|
|
2358
|
+
</ul>
|
|
2359
|
+
</>
|
|
2360
|
+
),
|
|
2361
|
+
overlayStyle: { maxWidth: '450px' }
|
|
2362
|
+
}}
|
|
2363
|
+
>
|
|
2364
|
+
<Select onChange={(value) => {
|
|
2365
|
+
form.setFieldsValue({ pattern: '' });
|
|
2366
|
+
const patternInput = document.querySelector('input[placeholder="根据选择的处理方式输入相应格式的URL"]');
|
|
2367
|
+
if (patternInput) {
|
|
2368
|
+
if (value === 'response') {
|
|
2369
|
+
patternInput.placeholder = "例如：/api/users，/api/users/*，/api\\/users\\/\\d+/";
|
|
2370
|
+
} else if (value === 'redirect') {
|
|
2371
|
+
patternInput.placeholder = "例如：https://example.com/api";
|
|
2372
|
+
} else if (value === 'url_redirect') {
|
|
2373
|
+
patternInput.placeholder = "例如：https://example.com/api/users";
|
|
2374
|
+
}
|
|
2375
|
+
}
|
|
2376
|
+
}}>
|
|
2377
|
+
{proxyTypes.map(item => (
|
|
2378
|
+
<Option key={item.value} value={item.value}>{item.label}</Option>
|
|
2379
|
+
))}
|
|
2380
|
+
</Select>
|
|
2381
|
+
</Form.Item>
|
|
2382
|
+
</div>
|
|
2383
|
+
</div>
|
|
2384
|
+
|
|
2385
|
+
<div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
|
|
2386
|
+
<div style={{ flex: 1 }}>
|
|
2387
|
+
<Form.Item
|
|
2388
|
+
name="httpMethod"
|
|
2389
|
+
label="请求方法"
|
|
2390
|
+
rules={[{ required: true, message: '请选择请求方法' }]}
|
|
2391
|
+
>
|
|
2392
|
+
<Select>
|
|
2393
|
+
{httpMethods.map(item => (
|
|
2394
|
+
<Option key={item.value} value={item.value}>{item.label}</Option>
|
|
2395
|
+
))}
|
|
2396
|
+
</Select>
|
|
2397
|
+
</Form.Item>
|
|
2398
|
+
</div>
|
|
2399
|
+
<div style={{ flex: 1 }}>
|
|
2400
|
+
{/* 这里可以留空或添加其他字段 */}
|
|
2401
|
+
</div>
|
|
2402
|
+
</div>
|
|
2403
|
+
</div>
|
|
2404
|
+
|
|
2405
|
+
{/* 高级配置 */}
|
|
2406
|
+
<div style={{ marginBottom: '24px' }}>
|
|
2407
|
+
<div style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
2408
|
+
<Badge count="3" style={{ backgroundColor: '#1677ff' }} />
|
|
2409
|
+
<span>高级配置</span>
|
|
2410
|
+
</div>
|
|
2411
|
+
|
|
2412
|
+
{/* 根据proxyType显示不同的表单项 */}
|
|
2413
|
+
<Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.proxyType !== currentValues.proxyType}>
|
|
2414
|
+
{({ getFieldValue }) => {
|
|
2415
|
+
const proxyType = getFieldValue('proxyType');
|
|
2416
|
+
|
|
2417
|
+
if (proxyType === 'response') {
|
|
2418
|
+
return (
|
|
2419
|
+
<>
|
|
2420
|
+
<div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
|
|
2421
|
+
<div style={{ flex: 1 }}>
|
|
2422
|
+
<Form.Item
|
|
2423
|
+
name="statusCode"
|
|
2424
|
+
label="状态码"
|
|
2425
|
+
rules={[{ required: true, message: '请选择状态码' }]}
|
|
2426
|
+
>
|
|
2427
|
+
<Select>
|
|
2428
|
+
{statusCodes.map(item => (
|
|
2429
|
+
<Option key={item.value} value={item.value}>{item.label}</Option>
|
|
2430
|
+
))}
|
|
2431
|
+
</Select>
|
|
2432
|
+
</Form.Item>
|
|
2433
|
+
</div>
|
|
2434
|
+
<div style={{ flex: 1 }}>
|
|
2435
|
+
<Form.Item
|
|
2436
|
+
name="contentType"
|
|
2437
|
+
label="内容类型"
|
|
2438
|
+
rules={[{ required: true, message: '请选择内容类型' }]}
|
|
2439
|
+
>
|
|
2440
|
+
<Select>
|
|
2441
|
+
{contentTypes.map(item => (
|
|
2442
|
+
<Option key={item.value} value={item.value}>{item.label}</Option>
|
|
2443
|
+
))}
|
|
2444
|
+
</Select>
|
|
2445
|
+
</Form.Item>
|
|
2446
|
+
</div>
|
|
2447
|
+
<div style={{ flex: 1 }}>
|
|
2448
|
+
<Form.Item
|
|
2449
|
+
name="responseDelay"
|
|
2450
|
+
label="延迟响应(毫秒)"
|
|
2451
|
+
tooltip="设置接口响应延迟时间，单位为毫秒"
|
|
2452
|
+
rules={[
|
|
2453
|
+
{
|
|
2454
|
+
pattern: /^\d*$/,
|
|
2455
|
+
message: '请输入有效的数字'
|
|
2456
|
+
},
|
|
2457
|
+
{
|
|
2458
|
+
validator: (_, value) => {
|
|
2459
|
+
if (!value || parseInt(value, 10) <= 60000) {
|
|
2460
|
+
return Promise.resolve();
|
|
2461
|
+
}
|
|
2462
|
+
return Promise.reject(new Error('延迟时间不能超过60秒(60000毫秒)'));
|
|
2463
|
+
}
|
|
2464
|
+
}
|
|
2465
|
+
]}
|
|
2466
|
+
>
|
|
2467
|
+
<Input placeholder="例如：500" />
|
|
2468
|
+
</Form.Item>
|
|
2469
|
+
</div>
|
|
2470
|
+
</div>
|
|
2471
|
+
|
|
2472
|
+
{/* 请求入参匹配设置 */}
|
|
2473
|
+
<Form.Item
|
|
2474
|
+
label="请求入参匹配"
|
|
2475
|
+
tooltip="设置请求参数的匹配条件，只有当请求参数满足条件时才返回对应的响应。支持嵌套属性路径，如：a.b.c"
|
|
2476
|
+
>
|
|
2477
|
+
<Form.List name="paramMatchers">
|
|
2478
|
+
{(fields, { add, remove }) => (
|
|
2479
|
+
<>
|
|
2480
|
+
{fields.map(({ key, name, ...restField }) => (
|
|
2481
|
+
<div key={key} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
|
|
2482
|
+
<Form.Item
|
|
2483
|
+
{...restField}
|
|
2484
|
+
name={[name, 'paramPath']}
|
|
2485
|
+
rules={[
|
|
2486
|
+
{ required: true, message: '请输入参数路径' },
|
|
2487
|
+
{
|
|
2488
|
+
pattern: /^[a-zA-Z_$][a-zA-Z0-9_$.]*$/,
|
|
2489
|
+
message: '请输入有效的参数路径，如：userId 或 data.user.id'
|
|
2490
|
+
}
|
|
2491
|
+
]}
|
|
2492
|
+
style={{ flex: 1, margin: 0 }}
|
|
2493
|
+
>
|
|
2494
|
+
<Input placeholder="参数路径（如：userId 或 data.user.id）" />
|
|
2495
|
+
</Form.Item>
|
|
2496
|
+
<Form.Item
|
|
2497
|
+
{...restField}
|
|
2498
|
+
name={[name, 'paramValue']}
|
|
2499
|
+
rules={[{ required: true, message: '请输入期望值' }]}
|
|
2500
|
+
style={{ flex: 1, margin: 0 }}
|
|
2501
|
+
>
|
|
2502
|
+
<Input placeholder="期望值（如：123 或 admin）" />
|
|
2503
|
+
</Form.Item>
|
|
2504
|
+
<Form.Item
|
|
2505
|
+
{...restField}
|
|
2506
|
+
name={[name, 'matchType']}
|
|
2507
|
+
style={{ width: 100, margin: 0 }}
|
|
2508
|
+
initialValue="exact"
|
|
2509
|
+
>
|
|
2510
|
+
<Select placeholder="匹配类型">
|
|
2511
|
+
<Option value="exact">精确匹配</Option>
|
|
2512
|
+
<Option value="contains">包含</Option>
|
|
2513
|
+
<Option value="regex">正则</Option>
|
|
2514
|
+
</Select>
|
|
2515
|
+
</Form.Item>
|
|
2516
|
+
<Button
|
|
2517
|
+
type="text"
|
|
2518
|
+
danger
|
|
2519
|
+
icon={<DeleteOutlined />}
|
|
2520
|
+
onClick={() => remove(name)}
|
|
2521
|
+
/>
|
|
2522
|
+
</div>
|
|
2523
|
+
))}
|
|
2524
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
|
|
2525
|
+
<Button
|
|
2526
|
+
type="dashed"
|
|
2527
|
+
onClick={() => add()}
|
|
2528
|
+
icon={<PlusOutlined />}
|
|
2529
|
+
style={{ flex: 1 }}
|
|
2530
|
+
>
|
|
2531
|
+
添加参数匹配规则
|
|
2532
|
+
</Button>
|
|
2533
|
+
<Popover
|
|
2534
|
+
content={
|
|
2535
|
+
<div style={{ maxWidth: '300px' }}>
|
|
2536
|
+
<div style={{ marginBottom: '8px', fontWeight: 'bold' }}>匹配规则说明：</div>
|
|
2537
|
+
<div style={{ lineHeight: '1.6' }}>
|
|
2538
|
+
<div>• <strong>精确匹配</strong>：参数值完全相等</div>
|
|
2539
|
+
<div>• <strong>包含</strong>：参数值包含指定内容</div>
|
|
2540
|
+
<div>• <strong>正则</strong>：参数值符合正则表达式</div>
|
|
2541
|
+
<div>• <strong>嵌套路径</strong>：使用点号分隔，如 data.user.id</div>
|
|
2542
|
+
</div>
|
|
2543
|
+
</div>
|
|
2544
|
+
}
|
|
2545
|
+
title="参数匹配规则"
|
|
2546
|
+
trigger="click"
|
|
2547
|
+
placement="top"
|
|
2548
|
+
>
|
|
2549
|
+
<Button
|
|
2550
|
+
type="text"
|
|
2551
|
+
icon={<QuestionCircleOutlined />}
|
|
2552
|
+
style={{
|
|
2553
|
+
color: '#999',
|
|
2554
|
+
padding: '4px'
|
|
2555
|
+
}}
|
|
2556
|
+
size="small"
|
|
2557
|
+
/>
|
|
2558
|
+
</Popover>
|
|
2559
|
+
</div>
|
|
2560
|
+
</>
|
|
2561
|
+
)}
|
|
2562
|
+
</Form.List>
|
|
2563
|
+
</Form.Item>
|
|
2564
|
+
|
|
2565
|
+
{/* 隐藏的表单字段用于存储响应数据 */}
|
|
2566
|
+
<Form.Item
|
|
2567
|
+
name="responses"
|
|
2568
|
+
initialValue={[]}
|
|
2569
|
+
hidden
|
|
2570
|
+
>
|
|
2571
|
+
<Input />
|
|
2572
|
+
</Form.Item>
|
|
2573
|
+
<Form.Item name="activeResponseId" hidden>
|
|
2574
|
+
<Input />
|
|
2575
|
+
</Form.Item>
|
|
2576
|
+
|
|
2577
|
+
{/* 使用新的合并组件 */}
|
|
2578
|
+
<Form.Item noStyle shouldUpdate>
|
|
2579
|
+
{({ getFieldValue }) => {
|
|
2580
|
+
let responses = getFieldValue('responses') || [];
|
|
2581
|
+
const activeResponseId = getFieldValue('activeResponseId');
|
|
2582
|
+
|
|
2583
|
+
if (!Array.isArray(responses)) {
|
|
2584
|
+
try {
|
|
2585
|
+
if (typeof responses === 'string') {
|
|
2586
|
+
responses = JSON.parse(responses);
|
|
2587
|
+
}
|
|
2588
|
+
} catch (e) {
|
|
2589
|
+
responses = [];
|
|
2590
|
+
}
|
|
2591
|
+
}
|
|
2592
|
+
|
|
2593
|
+
return (
|
|
2594
|
+
<ResponseContentEditor
|
|
2595
|
+
form={form}
|
|
2596
|
+
responses={responses}
|
|
2597
|
+
activeResponseId={activeResponseId}
|
|
2598
|
+
onPreview={handlePreview}
|
|
2599
|
+
/>
|
|
2600
|
+
);
|
|
2601
|
+
}}
|
|
2602
|
+
</Form.Item>
|
|
2603
|
+
</>
|
|
2604
|
+
);
|
|
2605
|
+
} else if (proxyType === 'redirect' || proxyType === 'url_redirect') {
|
|
2606
|
+
return (
|
|
2607
|
+
<>
|
|
2608
|
+
<Form.Item
|
|
2609
|
+
name="targetUrl"
|
|
2610
|
+
label="重定向目标URL"
|
|
2611
|
+
rules={[
|
|
2612
|
+
{ required: true, message: '请输入重定向目标URL' },
|
|
2613
|
+
{
|
|
2614
|
+
validator(_, value) {
|
|
2615
|
+
if (!value) return Promise.resolve();
|
|
2616
|
+
try {
|
|
2617
|
+
new URL(value);
|
|
2618
|
+
return Promise.resolve();
|
|
2619
|
+
} catch (e) {
|
|
2620
|
+
return Promise.reject(new Error('请输入有效的URL格式（包括http://或https://）'));
|
|
2621
|
+
}
|
|
2622
|
+
}
|
|
2623
|
+
}
|
|
2624
|
+
]}
|
|
2625
|
+
tooltip="重定向的目标URL，必须是完整的URL格式"
|
|
2626
|
+
>
|
|
2627
|
+
<Input
|
|
2628
|
+
placeholder="例如：https://api.example.com/users"
|
|
2629
|
+
/>
|
|
2630
|
+
</Form.Item>
|
|
2631
|
+
|
|
2632
|
+
{/* 自定义请求头设置 */}
|
|
2633
|
+
<Form.Item label="自定义请求头">
|
|
2634
|
+
<Form.List name="headerItems">
|
|
2635
|
+
{(fields, { add, remove }) => (
|
|
2636
|
+
<>
|
|
2637
|
+
{fields.map(({ key, name, ...restField }) => (
|
|
2638
|
+
<div key={key} style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '8px' }}>
|
|
2639
|
+
<Form.Item
|
|
2640
|
+
{...restField}
|
|
2641
|
+
name={[name, 'headerName']}
|
|
2642
|
+
rules={[{ required: true, message: '请输入请求头名称' }]}
|
|
2643
|
+
style={{ flex: 1, margin: 0 }}
|
|
2644
|
+
>
|
|
2645
|
+
<Input placeholder="请求头名称（如：Authorization）" />
|
|
2646
|
+
</Form.Item>
|
|
2647
|
+
<Form.Item
|
|
2648
|
+
{...restField}
|
|
2649
|
+
name={[name, 'headerValue']}
|
|
2650
|
+
rules={[{ required: true, message: '请输入请求头值' }]}
|
|
2651
|
+
style={{ flex: 1, margin: 0 }}
|
|
2652
|
+
>
|
|
2653
|
+
<Input placeholder="请求头值（如：Bearer token123）" />
|
|
2654
|
+
</Form.Item>
|
|
2655
|
+
<Button
|
|
2656
|
+
type="text"
|
|
2657
|
+
danger
|
|
2658
|
+
icon={<DeleteOutlined />}
|
|
2659
|
+
onClick={() => remove(name)}
|
|
2660
|
+
/>
|
|
2661
|
+
</div>
|
|
2662
|
+
))}
|
|
2663
|
+
<Button
|
|
2664
|
+
type="dashed"
|
|
2665
|
+
onClick={() => add()}
|
|
2666
|
+
icon={<PlusOutlined />}
|
|
2667
|
+
style={{ width: '100%', marginTop: '8px' }}
|
|
2668
|
+
>
|
|
2669
|
+
添加请求头
|
|
2670
|
+
</Button>
|
|
2671
|
+
</>
|
|
2672
|
+
)}
|
|
2673
|
+
</Form.List>
|
|
2674
|
+
</Form.Item>
|
|
2675
|
+
</>
|
|
2676
|
+
);
|
|
2677
|
+
}
|
|
2678
|
+
|
|
2679
|
+
return null;
|
|
2680
|
+
}}
|
|
2681
|
+
</Form.Item>
|
|
2682
|
+
</div>
|
|
2683
|
+
</div>
|
|
2684
|
+
</Form>
|
|
2685
|
+
</div>
|
|
2686
|
+
</Modal>
|
|
2687
|
+
)}
|
|
2110
2688
|
|
|
2111
2689
|
{/* 使用拆分后的预览模态框组件 */}
|
|
2112
2690
|
<PreviewModal
|