whistle.mock-plugins 1.1.3-dev.9 → 1.2.0-beta.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.
- package/VERSION.md +14 -0
- package/app/public/js/index.js +1 -1
- package/app/public/js/index.js.LICENSE.txt +4 -2
- package/package.json +1 -1
- package/ui/src/components/AppLayout.js +5 -3
- package/ui/src/pages/InterfaceManagement.js +53 -13
- package/ui/src/pages/InterfaceManagementV2.js +231 -186
- package/ui/src/pages/MockDataV2.js +256 -100
- package/ui/src/styles/app-layout.css +38 -2
- package/ui/src/styles/interface-management.css +156 -220
- package/ui/src/styles/mock-data.css +399 -22
|
@@ -81,8 +81,6 @@
|
|
|
81
81
|
|
|
82
82
|
/** */
|
|
83
83
|
|
|
84
|
-
/** */
|
|
85
|
-
|
|
86
84
|
/** */
|
|
87
85
|
|
|
88
86
|
/** */
|
|
@@ -99,6 +97,8 @@
|
|
|
99
97
|
|
|
100
98
|
/** */
|
|
101
99
|
|
|
100
|
+
/** */
|
|
101
|
+
|
|
102
102
|
/** */
|
|
103
103
|
|
|
104
104
|
/** */
|
|
@@ -156,3 +156,5 @@
|
|
|
156
156
|
/** */
|
|
157
157
|
|
|
158
158
|
/** */
|
|
159
|
+
|
|
160
|
+
/** */
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
FileTextOutlined,
|
|
8
8
|
MenuFoldOutlined,
|
|
9
9
|
MenuUnfoldOutlined,
|
|
10
|
-
|
|
10
|
+
ExperimentOutlined
|
|
11
11
|
} from '@ant-design/icons';
|
|
12
12
|
import { Link, useLocation } from 'react-router-dom';
|
|
13
13
|
import VersionModal from './VersionModal';
|
|
@@ -93,8 +93,10 @@ const AppLayout = ({ children }) => {
|
|
|
93
93
|
<Header className="app-header" style={{ background: colorBgContainer }}>
|
|
94
94
|
<div className="header-left">
|
|
95
95
|
<div className="logo-container">
|
|
96
|
-
<
|
|
97
|
-
|
|
96
|
+
<div className="logo-icon-group">
|
|
97
|
+
<ExperimentOutlined className="logo-icon logo-icon-secondary" />
|
|
98
|
+
</div>
|
|
99
|
+
<div className="logo-text">MockMaster</div>
|
|
98
100
|
</div>
|
|
99
101
|
<Button
|
|
100
102
|
type="text"
|
|
@@ -4,7 +4,7 @@ import AppLayout from '../components/AppLayout';
|
|
|
4
4
|
import {
|
|
5
5
|
Table, Button, Modal, Form, Input, Select, message, Switch,
|
|
6
6
|
Popconfirm, Alert, Space, Card, Badge, Tooltip, Row, Col,
|
|
7
|
-
Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer
|
|
7
|
+
Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer, Divider
|
|
8
8
|
} from 'antd';
|
|
9
9
|
import {
|
|
10
10
|
PlusOutlined, EditOutlined, DeleteOutlined,
|
|
@@ -64,6 +64,7 @@ const InterfaceManagement = () => {
|
|
|
64
64
|
const [groups, setGroups] = useState([]);
|
|
65
65
|
const [selectedGroup, setSelectedGroup] = useState(null);
|
|
66
66
|
const [groupActionLoading, setGroupActionLoading] = useState(false);
|
|
67
|
+
const [newGroupName, setNewGroupName] = useState('');
|
|
67
68
|
|
|
68
69
|
// 模态框状态
|
|
69
70
|
const [modalVisible, setModalVisible] = useState(false);
|
|
@@ -216,6 +217,17 @@ const InterfaceManagement = () => {
|
|
|
216
217
|
setSelectedGroup(null);
|
|
217
218
|
}
|
|
218
219
|
};
|
|
220
|
+
|
|
221
|
+
// 添加新分组
|
|
222
|
+
const addNewGroup = () => {
|
|
223
|
+
if (newGroupName.trim() && !groups.includes(newGroupName.trim())) {
|
|
224
|
+
const updatedGroups = [...groups, newGroupName.trim()].sort();
|
|
225
|
+
setGroups(updatedGroups);
|
|
226
|
+
setNewGroupName('');
|
|
227
|
+
return newGroupName.trim();
|
|
228
|
+
}
|
|
229
|
+
return null;
|
|
230
|
+
};
|
|
219
231
|
|
|
220
232
|
// 根据分组和搜索关键词筛选接口
|
|
221
233
|
const getFilteredInterfaces = () => {
|
|
@@ -1298,27 +1310,55 @@ const InterfaceManagement = () => {
|
|
|
1298
1310
|
tooltip="为接口设置分组，便于管理和批量操作"
|
|
1299
1311
|
>
|
|
1300
1312
|
<Select
|
|
1301
|
-
placeholder="
|
|
1313
|
+
placeholder="选择或输入新分组名称"
|
|
1302
1314
|
showSearch
|
|
1303
1315
|
allowClear
|
|
1304
1316
|
style={{ width: '100%' }}
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
// 如果值是数组（tags模式），只取第一个元素
|
|
1310
|
-
if (Array.isArray(value) && value.length > 0) {
|
|
1311
|
-
// 如果第一个元素是空字符串，则设置为undefined
|
|
1312
|
-
const groupValue = value[0] === '' ? undefined : value[0];
|
|
1313
|
-
form.setFieldsValue({ group: groupValue });
|
|
1314
|
-
}
|
|
1315
|
-
}}
|
|
1317
|
+
dropdownMatchSelectWidth={false}
|
|
1318
|
+
filterOption={(input, option) =>
|
|
1319
|
+
option?.children?.toLowerCase()?.indexOf(input.toLowerCase()) >= 0
|
|
1320
|
+
}
|
|
1316
1321
|
onInputKeyDown={(e) => {
|
|
1317
1322
|
// 防止回车键提交表单
|
|
1318
1323
|
if (e.key === 'Enter') {
|
|
1319
1324
|
e.stopPropagation();
|
|
1320
1325
|
}
|
|
1321
1326
|
}}
|
|
1327
|
+
dropdownRender={(menu) => (
|
|
1328
|
+
<div>
|
|
1329
|
+
{menu}
|
|
1330
|
+
<Divider style={{ margin: '4px 0' }} />
|
|
1331
|
+
<div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
|
|
1332
|
+
<Input
|
|
1333
|
+
style={{ flex: 'auto' }}
|
|
1334
|
+
value={newGroupName}
|
|
1335
|
+
onChange={(e) => setNewGroupName(e.target.value)}
|
|
1336
|
+
placeholder="输入新分组名称"
|
|
1337
|
+
onPressEnter={(e) => {
|
|
1338
|
+
e.stopPropagation();
|
|
1339
|
+
const groupName = addNewGroup();
|
|
1340
|
+
if (groupName) {
|
|
1341
|
+
form.setFieldsValue({ group: groupName });
|
|
1342
|
+
}
|
|
1343
|
+
}}
|
|
1344
|
+
/>
|
|
1345
|
+
<Button
|
|
1346
|
+
type="text"
|
|
1347
|
+
icon={<PlusOutlined />}
|
|
1348
|
+
style={{ flex: 'none', padding: '4px 8px', cursor: 'pointer' }}
|
|
1349
|
+
onClick={(e) => {
|
|
1350
|
+
e.stopPropagation();
|
|
1351
|
+
const groupName = addNewGroup();
|
|
1352
|
+
if (groupName) {
|
|
1353
|
+
form.setFieldsValue({ group: groupName });
|
|
1354
|
+
}
|
|
1355
|
+
}}
|
|
1356
|
+
>
|
|
1357
|
+
添加
|
|
1358
|
+
</Button>
|
|
1359
|
+
</div>
|
|
1360
|
+
</div>
|
|
1361
|
+
)}
|
|
1322
1362
|
>
|
|
1323
1363
|
{Array.from(new Set(interfaces.map(item => item.group).filter(Boolean))).map(group => (
|
|
1324
1364
|
<Option key={group} value={group}>{group}</Option>
|