whistle.mock-plugins 1.2.1-beta.6 → 1.2.1
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 +11 -1
- package/app/public/js/index.js +1 -1
- package/app/public/js/index.js.LICENSE.txt +2 -0
- package/package.json +1 -1
- package/ui/src/pages/MockDataV2.js +172 -8
- package/ui/src/styles/mock-data.css +67 -0
|
@@ -171,3 +171,5 @@
|
|
|
171
171
|
/** */
|
|
172
172
|
|
|
173
173
|
/** */
|
|
174
|
+
|
|
175
|
+
/** */
|
package/package.json
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
import React, { useState, useEffect } from 'react';
|
|
6
6
|
import { useHistory } from 'react-router-dom';
|
|
7
7
|
import AppLayout from '../components/AppLayout';
|
|
8
|
-
import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination } from 'antd';
|
|
9
|
-
import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined } from '@ant-design/icons';
|
|
8
|
+
import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination, Table, Space, Tag } from 'antd';
|
|
9
|
+
import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';
|
|
10
10
|
import '../styles/mock-data.css';
|
|
11
11
|
import axios from 'axios';
|
|
12
12
|
|
|
@@ -40,7 +40,8 @@ const MockData = () => {
|
|
|
40
40
|
sortBy: 'name', // name, createdAt, interfaceCount, active
|
|
41
41
|
sortOrder: 'ascend', // ascend, descend
|
|
42
42
|
pageSize: 12,
|
|
43
|
-
current: 1
|
|
43
|
+
current: 1,
|
|
44
|
+
viewMode: 'card' // card, list
|
|
44
45
|
};
|
|
45
46
|
});
|
|
46
47
|
|
|
@@ -368,6 +369,10 @@ const MockData = () => {
|
|
|
368
369
|
saveListConfig({ current: page, pageSize });
|
|
369
370
|
};
|
|
370
371
|
|
|
372
|
+
const handleViewModeChange = (mode) => {
|
|
373
|
+
saveListConfig({ viewMode: mode, current: 1 });
|
|
374
|
+
};
|
|
375
|
+
|
|
371
376
|
// 获取排序后的功能列表
|
|
372
377
|
const getSortedFeatures = () => {
|
|
373
378
|
const sorted = [...mockFeatures].sort((a, b) => {
|
|
@@ -516,6 +521,139 @@ const MockData = () => {
|
|
|
516
521
|
);
|
|
517
522
|
};
|
|
518
523
|
|
|
524
|
+
// 渲染列表视图
|
|
525
|
+
const renderListView = () => {
|
|
526
|
+
const columns = [
|
|
527
|
+
{
|
|
528
|
+
title: '状态',
|
|
529
|
+
dataIndex: 'active',
|
|
530
|
+
key: 'active',
|
|
531
|
+
width: 100,
|
|
532
|
+
render: (active, record) => (
|
|
533
|
+
<Switch
|
|
534
|
+
checked={active}
|
|
535
|
+
onChange={(checked, e) => {
|
|
536
|
+
e.stopPropagation();
|
|
537
|
+
handleToggleActive(record.id, active);
|
|
538
|
+
}}
|
|
539
|
+
checkedChildren="启用"
|
|
540
|
+
unCheckedChildren="禁用"
|
|
541
|
+
/>
|
|
542
|
+
),
|
|
543
|
+
},
|
|
544
|
+
{
|
|
545
|
+
title: '功能名称',
|
|
546
|
+
dataIndex: 'name',
|
|
547
|
+
key: 'name',
|
|
548
|
+
ellipsis: { tooltip: true },
|
|
549
|
+
render: (name) => (
|
|
550
|
+
<Text strong style={{ fontSize: '14px' }}>{name}</Text>
|
|
551
|
+
),
|
|
552
|
+
},
|
|
553
|
+
{
|
|
554
|
+
title: '功能描述',
|
|
555
|
+
dataIndex: 'description',
|
|
556
|
+
key: 'description',
|
|
557
|
+
ellipsis: { tooltip: true },
|
|
558
|
+
render: (description) => (
|
|
559
|
+
<Text type="secondary">{description || '无描述'}</Text>
|
|
560
|
+
),
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
title: '接口数量',
|
|
564
|
+
dataIndex: 'interfaceCount',
|
|
565
|
+
key: 'interfaceCount',
|
|
566
|
+
width: 100,
|
|
567
|
+
align: 'center',
|
|
568
|
+
render: (count) => (
|
|
569
|
+
<Badge count={count || 0} showZero style={{ backgroundColor: '#1890ff' }} />
|
|
570
|
+
),
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
title: '创建时间',
|
|
574
|
+
dataIndex: 'createdAt',
|
|
575
|
+
key: 'createdAt',
|
|
576
|
+
width: 120,
|
|
577
|
+
render: (createdAt) => (
|
|
578
|
+
<Text type="secondary">
|
|
579
|
+
{createdAt ? new Date(createdAt).toLocaleDateString() : '未知日期'}
|
|
580
|
+
</Text>
|
|
581
|
+
),
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
title: '操作',
|
|
585
|
+
key: 'action',
|
|
586
|
+
width: 200,
|
|
587
|
+
fixed: 'right',
|
|
588
|
+
render: (_, record) => (
|
|
589
|
+
<Space size="small">
|
|
590
|
+
<Tooltip title="管理接口">
|
|
591
|
+
<Button
|
|
592
|
+
type="link"
|
|
593
|
+
size="small"
|
|
594
|
+
icon={<ApiOutlined />}
|
|
595
|
+
onClick={(e) => {
|
|
596
|
+
e.stopPropagation();
|
|
597
|
+
viewInterfaces(record);
|
|
598
|
+
}}
|
|
599
|
+
>
|
|
600
|
+
接口
|
|
601
|
+
</Button>
|
|
602
|
+
</Tooltip>
|
|
603
|
+
<Tooltip title="编辑">
|
|
604
|
+
<Button
|
|
605
|
+
type="link"
|
|
606
|
+
size="small"
|
|
607
|
+
icon={<EditOutlined />}
|
|
608
|
+
onClick={(e) => {
|
|
609
|
+
e.stopPropagation();
|
|
610
|
+
openModal(record);
|
|
611
|
+
}}
|
|
612
|
+
/>
|
|
613
|
+
</Tooltip>
|
|
614
|
+
<Tooltip title="导出">
|
|
615
|
+
<Button
|
|
616
|
+
type="link"
|
|
617
|
+
size="small"
|
|
618
|
+
icon={<ExportOutlined />}
|
|
619
|
+
onClick={(e) => {
|
|
620
|
+
e.stopPropagation();
|
|
621
|
+
exportFeatureConfig(record);
|
|
622
|
+
}}
|
|
623
|
+
/>
|
|
624
|
+
</Tooltip>
|
|
625
|
+
<Tooltip title="删除">
|
|
626
|
+
<Button
|
|
627
|
+
type="link"
|
|
628
|
+
size="small"
|
|
629
|
+
danger
|
|
630
|
+
icon={<DeleteOutlined />}
|
|
631
|
+
onClick={(e) => {
|
|
632
|
+
e.stopPropagation();
|
|
633
|
+
deleteFeature(record.id);
|
|
634
|
+
}}
|
|
635
|
+
/>
|
|
636
|
+
</Tooltip>
|
|
637
|
+
</Space>
|
|
638
|
+
),
|
|
639
|
+
},
|
|
640
|
+
];
|
|
641
|
+
|
|
642
|
+
return (
|
|
643
|
+
<Table
|
|
644
|
+
columns={columns}
|
|
645
|
+
dataSource={getPaginatedFeatures()}
|
|
646
|
+
rowKey="id"
|
|
647
|
+
pagination={false}
|
|
648
|
+
onRow={(record) => ({
|
|
649
|
+
onClick: () => viewInterfaces(record),
|
|
650
|
+
style: { cursor: 'pointer' }
|
|
651
|
+
})}
|
|
652
|
+
rowClassName={(record) => !record.active ? 'inactive-row' : ''}
|
|
653
|
+
/>
|
|
654
|
+
);
|
|
655
|
+
};
|
|
656
|
+
|
|
519
657
|
return (
|
|
520
658
|
<AppLayout>
|
|
521
659
|
<div className="page-container">
|
|
@@ -584,7 +722,7 @@ const MockData = () => {
|
|
|
584
722
|
</div>
|
|
585
723
|
</Col>
|
|
586
724
|
|
|
587
|
-
{/*
|
|
725
|
+
{/* 排序和视图控制区域 */}
|
|
588
726
|
<Col xs={24} sm={12} md={8} lg={9}>
|
|
589
727
|
<div className="sort-controls">
|
|
590
728
|
<div className="control-group">
|
|
@@ -615,8 +753,30 @@ const MockData = () => {
|
|
|
615
753
|
</div>
|
|
616
754
|
</Col>
|
|
617
755
|
|
|
756
|
+
{/* 视图切换区域 */}
|
|
757
|
+
<Col xs={24} sm={12} md={4} lg={3}>
|
|
758
|
+
<div className="view-mode-controls">
|
|
759
|
+
<Button.Group>
|
|
760
|
+
<Tooltip title="卡片视图">
|
|
761
|
+
<Button
|
|
762
|
+
type={listConfig.viewMode === 'card' ? 'primary' : 'default'}
|
|
763
|
+
icon={<AppstoreOutlined />}
|
|
764
|
+
onClick={() => handleViewModeChange('card')}
|
|
765
|
+
/>
|
|
766
|
+
</Tooltip>
|
|
767
|
+
<Tooltip title="列表视图">
|
|
768
|
+
<Button
|
|
769
|
+
type={listConfig.viewMode === 'list' ? 'primary' : 'default'}
|
|
770
|
+
icon={<UnorderedListOutlined />}
|
|
771
|
+
onClick={() => handleViewModeChange('list')}
|
|
772
|
+
/>
|
|
773
|
+
</Tooltip>
|
|
774
|
+
</Button.Group>
|
|
775
|
+
</div>
|
|
776
|
+
</Col>
|
|
777
|
+
|
|
618
778
|
{/* 分页控制区域 */}
|
|
619
|
-
<Col xs={24} sm={24} md={
|
|
779
|
+
<Col xs={24} sm={24} md={12} lg={6}>
|
|
620
780
|
<div className="pagination-controls">
|
|
621
781
|
<div className="control-group">
|
|
622
782
|
<span className="control-label">每页显示</span>
|
|
@@ -649,9 +809,13 @@ const MockData = () => {
|
|
|
649
809
|
</div>
|
|
650
810
|
) : mockFeatures.length > 0 ? (
|
|
651
811
|
<>
|
|
652
|
-
|
|
653
|
-
{
|
|
654
|
-
|
|
812
|
+
{listConfig.viewMode === 'card' ? (
|
|
813
|
+
<Row gutter={[20, 20]} className="feature-grid">
|
|
814
|
+
{getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
|
|
815
|
+
</Row>
|
|
816
|
+
) : (
|
|
817
|
+
renderListView()
|
|
818
|
+
)}
|
|
655
819
|
|
|
656
820
|
{/* 分页组件 */}
|
|
657
821
|
{mockFeatures.length > listConfig.pageSize && (
|
|
@@ -1115,4 +1115,71 @@ input:checked + .slider:before {
|
|
|
1115
1115
|
.ant-card-extra {
|
|
1116
1116
|
margin-right: 60px;
|
|
1117
1117
|
}
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
/* 视图切换控制样式 */
|
|
1121
|
+
.view-mode-controls {
|
|
1122
|
+
display: flex;
|
|
1123
|
+
justify-content: flex-end;
|
|
1124
|
+
align-items: center;
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.view-mode-controls .ant-btn-group {
|
|
1128
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
/* 列表视图样式 */
|
|
1132
|
+
.feature-list-card .ant-table-wrapper {
|
|
1133
|
+
margin-top: 0;
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.feature-list-card .ant-table {
|
|
1137
|
+
font-size: 14px;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
.feature-list-card .ant-table-thead > tr > th {
|
|
1141
|
+
background-color: #fafafa;
|
|
1142
|
+
font-weight: 600;
|
|
1143
|
+
color: #262626;
|
|
1144
|
+
padding: 16px;
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
.feature-list-card .ant-table-tbody > tr > td {
|
|
1148
|
+
padding: 16px;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.feature-list-card .ant-table-tbody > tr:hover {
|
|
1152
|
+
background-color: #f5f5f5;
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1155
|
+
.feature-list-card .ant-table-tbody > tr.inactive-row {
|
|
1156
|
+
background-color: #fafafa;
|
|
1157
|
+
opacity: 0.7;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
.feature-list-card .ant-table-tbody > tr.inactive-row:hover {
|
|
1161
|
+
background-color: #f0f0f0;
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
/* 列表视图中的操作按钮样式 */
|
|
1165
|
+
.feature-list-card .ant-btn-link {
|
|
1166
|
+
padding: 4px 8px;
|
|
1167
|
+
height: auto;
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
/* 响应式调整 */
|
|
1171
|
+
@media (max-width: 768px) {
|
|
1172
|
+
.view-mode-controls {
|
|
1173
|
+
justify-content: center;
|
|
1174
|
+
margin-top: 12px;
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
.feature-list-card .ant-table {
|
|
1178
|
+
font-size: 13px;
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
.feature-list-card .ant-table-thead > tr > th,
|
|
1182
|
+
.feature-list-card .ant-table-tbody > tr > td {
|
|
1183
|
+
padding: 12px 8px;
|
|
1184
|
+
}
|
|
1118
1185
|
}
|