whistle.mock-plugins 1.1.3-dev.16 → 1.1.3-dev.18
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/package.json
CHANGED
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
import {
|
|
16
16
|
PlusOutlined, EditOutlined, DeleteOutlined,
|
|
17
17
|
FileTextOutlined, PlusCircleOutlined, SettingOutlined,
|
|
18
|
-
SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined
|
|
18
|
+
SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined
|
|
19
19
|
} from '@ant-design/icons';
|
|
20
20
|
import '../styles/interface-management.css';
|
|
21
21
|
import axios from 'axios';
|
|
@@ -1318,7 +1318,7 @@ const InterfaceManagement = () => {
|
|
|
1318
1318
|
}}
|
|
1319
1319
|
>
|
|
1320
1320
|
<Collapse
|
|
1321
|
-
defaultActiveKey={editingInterface ? ['
|
|
1321
|
+
defaultActiveKey={editingInterface ? ['3'] : ['1', '2', '3']}
|
|
1322
1322
|
style={{ marginBottom: '16px' }}
|
|
1323
1323
|
ghost
|
|
1324
1324
|
>
|
|
@@ -1656,30 +1656,42 @@ const InterfaceManagement = () => {
|
|
|
1656
1656
|
/>
|
|
1657
1657
|
</div>
|
|
1658
1658
|
))}
|
|
1659
|
-
<
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
<
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1659
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
|
|
1660
|
+
<Button
|
|
1661
|
+
type="dashed"
|
|
1662
|
+
onClick={() => add()}
|
|
1663
|
+
icon={<PlusOutlined />}
|
|
1664
|
+
style={{ flex: 1 }}
|
|
1665
|
+
>
|
|
1666
|
+
添加参数匹配规则
|
|
1667
|
+
</Button>
|
|
1668
|
+
<Popover
|
|
1669
|
+
content={
|
|
1670
|
+
<div style={{ maxWidth: '300px' }}>
|
|
1671
|
+
<div style={{ marginBottom: '8px', fontWeight: 'bold' }}>匹配规则说明：</div>
|
|
1672
|
+
<div style={{ lineHeight: '1.6' }}>
|
|
1673
|
+
<div>• <strong>精确匹配</strong>：参数值完全相等</div>
|
|
1674
|
+
<div>• <strong>包含</strong>：参数值包含指定内容</div>
|
|
1675
|
+
<div>• <strong>正则</strong>：参数值符合正则表达式</div>
|
|
1676
|
+
<div>• <strong>嵌套路径</strong>：使用点号分隔，如 data.user.id</div>
|
|
1677
|
+
</div>
|
|
1678
|
+
</div>
|
|
1679
|
+
}
|
|
1680
|
+
title="参数匹配规则"
|
|
1681
|
+
trigger="click"
|
|
1682
|
+
placement="top"
|
|
1683
|
+
>
|
|
1684
|
+
<Button
|
|
1685
|
+
type="text"
|
|
1686
|
+
icon={<QuestionCircleOutlined />}
|
|
1687
|
+
style={{
|
|
1688
|
+
color: '#999',
|
|
1689
|
+
padding: '4px'
|
|
1690
|
+
}}
|
|
1691
|
+
size="small"
|
|
1692
|
+
/>
|
|
1693
|
+
</Popover>
|
|
1694
|
+
</div>
|
|
1683
1695
|
</>
|
|
1684
1696
|
)}
|
|
1685
1697
|
</Form.List>
|
|
@@ -520,24 +520,22 @@ const MockData = () => {
|
|
|
520
520
|
return (
|
|
521
521
|
<AppLayout>
|
|
522
522
|
<div className="page-container">
|
|
523
|
-
{/* V2版本标识 */}
|
|
524
|
-
<div style={{
|
|
525
|
-
position: 'absolute',
|
|
526
|
-
top: '10px',
|
|
527
|
-
right: '10px',
|
|
528
|
-
backgroundColor: '#52c41a',
|
|
529
|
-
color: 'white',
|
|
530
|
-
padding: '4px 8px',
|
|
531
|
-
borderRadius: '4px',
|
|
532
|
-
fontSize: '12px',
|
|
533
|
-
zIndex: 1000
|
|
534
|
-
}}>
|
|
535
|
-
V2版本
|
|
536
|
-
</div>
|
|
537
|
-
|
|
538
523
|
<div className="page-title-bar">
|
|
539
|
-
<div>
|
|
540
|
-
<
|
|
524
|
+
<div className="title-section">
|
|
525
|
+
<div className="title-with-badge">
|
|
526
|
+
<h1 className="page-title">功能模块管理</h1>
|
|
527
|
+
<Badge
|
|
528
|
+
count="V2"
|
|
529
|
+
style={{
|
|
530
|
+
backgroundColor: '#52c41a',
|
|
531
|
+
fontSize: '12px',
|
|
532
|
+
height: '20px',
|
|
533
|
+
lineHeight: '20px',
|
|
534
|
+
borderRadius: '10px',
|
|
535
|
+
marginLeft: '12px'
|
|
536
|
+
}}
|
|
537
|
+
/>
|
|
538
|
+
</div>
|
|
541
539
|
<div className="page-description">
|
|
542
540
|
创建和管理功能模块，为每个功能配置独立的接口
|
|
543
541
|
</div>
|
|
@@ -561,117 +559,147 @@ const MockData = () => {
|
|
|
561
559
|
</div>
|
|
562
560
|
</div>
|
|
563
561
|
|
|
564
|
-
{/*
|
|
562
|
+
{/* 控制面板 */}
|
|
565
563
|
{mockFeatures.length > 0 && !loading && (
|
|
566
|
-
<
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
564
|
+
<Card className="control-panel-card" style={{ marginBottom: 24 }}>
|
|
565
|
+
<Row gutter={[24, 16]} align="middle">
|
|
566
|
+
{/* 统计信息区域 */}
|
|
567
|
+
<Col xs={24} sm={12} md={8} lg={6}>
|
|
568
|
+
<div className="stats-section">
|
|
569
|
+
<div className="stats-item">
|
|
570
|
+
<span className="stats-number">{mockFeatures.length}</span>
|
|
571
|
+
<span className="stats-label">功能模块</span>
|
|
572
|
+
</div>
|
|
573
|
+
<div className="stats-item">
|
|
574
|
+
<span className="stats-number">
|
|
575
|
+
{mockFeatures.filter(f => f.active).length}
|
|
576
|
+
</span>
|
|
577
|
+
<span className="stats-label">已启用</span>
|
|
578
|
+
</div>
|
|
579
|
+
<div className="stats-item">
|
|
580
|
+
<span className="stats-number">
|
|
581
|
+
{mockFeatures.reduce((sum, f) => sum + (f.interfaceCount || 0), 0)}
|
|
582
|
+
</span>
|
|
583
|
+
<span className="stats-label">接口总数</span>
|
|
584
|
+
</div>
|
|
585
|
+
</div>
|
|
586
|
+
</Col>
|
|
587
|
+
|
|
588
|
+
{/* 排序控制区域 */}
|
|
589
|
+
<Col xs={24} sm={12} md={8} lg={9}>
|
|
590
|
+
<div className="sort-controls">
|
|
591
|
+
<div className="control-group">
|
|
592
|
+
<span className="control-label">
|
|
593
|
+
<SortAscendingOutlined /> 排序方式
|
|
594
|
+
</span>
|
|
595
|
+
<Select
|
|
596
|
+
value={listConfig.sortBy}
|
|
597
|
+
onChange={handleSortChange}
|
|
598
|
+
style={{ width: 120 }}
|
|
599
|
+
size="middle"
|
|
600
|
+
>
|
|
601
|
+
<Select.Option value="name">名称</Select.Option>
|
|
602
|
+
<Select.Option value="createdAt">创建时间</Select.Option>
|
|
603
|
+
<Select.Option value="interfaceCount">接口数量</Select.Option>
|
|
604
|
+
<Select.Option value="active">状态</Select.Option>
|
|
605
|
+
</Select>
|
|
606
|
+
<Select
|
|
607
|
+
value={listConfig.sortOrder}
|
|
608
|
+
onChange={handleSortOrderChange}
|
|
609
|
+
style={{ width: 80 }}
|
|
610
|
+
size="middle"
|
|
611
|
+
>
|
|
612
|
+
<Select.Option value="ascend">升序</Select.Option>
|
|
613
|
+
<Select.Option value="descend">降序</Select.Option>
|
|
614
|
+
</Select>
|
|
615
|
+
</div>
|
|
616
|
+
</div>
|
|
617
|
+
</Col>
|
|
618
|
+
|
|
619
|
+
{/* 分页控制区域 */}
|
|
620
|
+
<Col xs={24} sm={24} md={8} lg={9}>
|
|
621
|
+
<div className="pagination-controls">
|
|
622
|
+
<div className="control-group">
|
|
623
|
+
<span className="control-label">每页显示</span>
|
|
624
|
+
<Select
|
|
625
|
+
value={listConfig.pageSize}
|
|
626
|
+
onChange={handlePageSizeChange}
|
|
627
|
+
style={{ width: 80 }}
|
|
628
|
+
size="middle"
|
|
629
|
+
>
|
|
630
|
+
<Select.Option value={8}>8</Select.Option>
|
|
631
|
+
<Select.Option value={12}>12</Select.Option>
|
|
632
|
+
<Select.Option value={16}>16</Select.Option>
|
|
633
|
+
<Select.Option value={24}>24</Select.Option>
|
|
634
|
+
</Select>
|
|
635
|
+
<span className="page-info">
|
|
636
|
+
第 {(listConfig.current - 1) * listConfig.pageSize + 1}-{Math.min(listConfig.current * listConfig.pageSize, mockFeatures.length)} 条
|
|
637
|
+
</span>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
</Col>
|
|
641
|
+
</Row>
|
|
642
|
+
</Card>
|
|
621
643
|
)}
|
|
622
644
|
|
|
623
|
-
<
|
|
645
|
+
<Card className="feature-list-card">
|
|
624
646
|
{loading ? (
|
|
625
|
-
<div className="loading">
|
|
626
|
-
<
|
|
627
|
-
<div>正在加载功能模块...</div>
|
|
647
|
+
<div className="loading-state">
|
|
648
|
+
<Spin size="large" />
|
|
649
|
+
<div className="loading-text">正在加载功能模块...</div>
|
|
628
650
|
</div>
|
|
629
651
|
) : mockFeatures.length > 0 ? (
|
|
630
652
|
<>
|
|
631
|
-
<Row gutter={[
|
|
653
|
+
<Row gutter={[20, 20]} className="feature-grid">
|
|
632
654
|
{getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
|
|
633
655
|
</Row>
|
|
634
656
|
|
|
635
657
|
{/* 分页组件 */}
|
|
636
658
|
{mockFeatures.length > listConfig.pageSize && (
|
|
637
|
-
<div
|
|
638
|
-
marginTop: 24,
|
|
639
|
-
textAlign: 'center',
|
|
640
|
-
padding: '16px',
|
|
641
|
-
borderTop: '1px solid #f0f0f0'
|
|
642
|
-
}}>
|
|
659
|
+
<div className="pagination-wrapper">
|
|
643
660
|
<Pagination
|
|
644
661
|
current={listConfig.current}
|
|
645
662
|
pageSize={listConfig.pageSize}
|
|
646
663
|
total={mockFeatures.length}
|
|
647
664
|
onChange={handlePageChange}
|
|
648
665
|
onShowSizeChange={handlePageChange}
|
|
649
|
-
showSizeChanger={
|
|
666
|
+
showSizeChanger={false}
|
|
650
667
|
showQuickJumper={true}
|
|
651
668
|
showTotal={(total, range) =>
|
|
652
669
|
`第 ${range[0]}-${range[1]} 条，共 ${total} 个功能模块`
|
|
653
670
|
}
|
|
654
|
-
pageSizeOptions={['8', '12', '16', '24']}
|
|
655
671
|
size="default"
|
|
672
|
+
className="custom-pagination"
|
|
656
673
|
/>
|
|
657
674
|
</div>
|
|
658
675
|
)}
|
|
659
676
|
</>
|
|
660
677
|
) : (
|
|
661
|
-
<
|
|
662
|
-
|
|
663
|
-
|
|
678
|
+
<Empty
|
|
679
|
+
className="custom-empty"
|
|
680
|
+
image={
|
|
681
|
+
<div className="empty-image">
|
|
682
|
+
<ApiOutlined style={{ fontSize: 64, color: '#d9d9d9' }} />
|
|
683
|
+
</div>
|
|
684
|
+
}
|
|
685
|
+
description={
|
|
686
|
+
<div className="empty-description">
|
|
687
|
+
<div className="empty-title">暂无功能模块</div>
|
|
688
|
+
<div className="empty-subtitle">创建您的第一个功能模块，开始管理接口</div>
|
|
689
|
+
</div>
|
|
690
|
+
}
|
|
691
|
+
>
|
|
664
692
|
<div className="empty-actions">
|
|
665
|
-
<
|
|
693
|
+
<Button type="primary" icon={<PlusOutlined />} onClick={() => openModal()}>
|
|
666
694
|
创建新功能
|
|
667
|
-
</
|
|
668
|
-
<
|
|
669
|
-
|
|
670
|
-
</
|
|
695
|
+
</Button>
|
|
696
|
+
<Button icon={<ExportOutlined />} onClick={importFeatureConfig}>
|
|
697
|
+
导入功能
|
|
698
|
+
</Button>
|
|
671
699
|
</div>
|
|
672
|
-
</
|
|
700
|
+
</Empty>
|
|
673
701
|
)}
|
|
674
|
-
</
|
|
702
|
+
</Card>
|
|
675
703
|
</div>
|
|
676
704
|
|
|
677
705
|
<Modal
|
|
@@ -1236,6 +1236,18 @@
|
|
|
1236
1236
|
font-size: 12px !important;
|
|
1237
1237
|
}
|
|
1238
1238
|
|
|
1239
|
+
/* 参数匹配规则帮助按钮样式 */
|
|
1240
|
+
.interface-modal .ant-popover-inner-content {
|
|
1241
|
+
padding: 12px;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1244
|
+
.interface-modal .ant-popover-title {
|
|
1245
|
+
font-weight: 600;
|
|
1246
|
+
color: #262626;
|
|
1247
|
+
padding: 8px 12px;
|
|
1248
|
+
border-bottom: 1px solid #f0f0f0;
|
|
1249
|
+
}
|
|
1250
|
+
|
|
1239
1251
|
/* 分页器样式 */
|
|
1240
1252
|
.interface-table .ant-pagination-options {
|
|
1241
1253
|
margin-right: 16px;
|