whistle.mock-plugins 1.1.3-dev.5 → 1.1.3-dev.7

package/app/public/js/index.js.LICENSE.txt

@@ -125,8 +125,6 @@
 
 /**![holder](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMwMCAyNzYuNWE1NiA1NiAwIDEwNTYtOTcgNTYgNTYgMCAwMC01NiA5N3ptMCAyODRhNTYgNTYgMCAxMDU2LTk3IDU2IDU2IDAgMDAtNTYgOTd6TTY0MCAyMjhhNTYgNTYgMCAxMDExMiAwIDU2IDU2IDAgMDAtMTEyIDB6bTAgMjg0YTU2IDU2IDAgMTAxMTIgMCA1NiA1NiAwIDAwLTExMiAwek0zMDAgODQ0LjVhNTYgNTYgMCAxMDU2LTk3IDU2IDU2IDAgMDAtNTYgOTd6TTY0MCA3OTZhNTYgNTYgMCAxMDExMiAwIDU2IDU2IDAgMDAtMTEyIDB6IiAvPjwvc3ZnPg==) */
 
-/**![import](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdmlld0JveD0iNjQgNjQgODk2IDg5NiIgZm9jdXNhYmxlPSJmYWxzZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODgwIDkxMkgxNDRjLTE3LjcgMC0zMi0xNC4zLTMyLTMyVjE0NGMwLTE3LjcgMTQuMy0zMiAzMi0zMmgzNjBjNC40IDAgOCAzLjYgOCA4djU2YzAgNC40LTMuNiA4LTggOEgxODR2NjU2aDY1NlY1MjBjMC00LjQgMy42LTggOC04aDU2YzQuNCAwIDggMy42IDggOHYzNjBjMCAxNy43LTE0LjMgMzItMzIgMzJ6TTY1My4zIDQyNC42bDUyLjIgNTIuMmE4LjAxIDguMDEgMCAwMS00LjcgMTMuNmwtMTc5LjQgMjFjLTUuMS42LTkuNS0zLjctOC45LTguOWwyMS0xNzkuNGMuOC02LjYgOC45LTkuNCAxMy42LTQuN2w1Mi40IDUyLjQgMjU2LjItMjU2LjJjMy4xLTMuMSA4LjItMy4xIDExLjMgMGw0Mi40IDQyLjRjMy4xIDMuMSAzLjEgOC4yIDAgMTEuM0w2NTMuMyA0MjQuNnoiIC8+PC9zdmc+) */
-
 /**![info-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0wIDgyMGMtMjA1LjQgMC0zNzItMTY2LjYtMzcyLTM3MnMxNjYuNi0zNzIgMzcyLTM3MiAzNzIgMTY2LjYgMzcyIDM3Mi0xNjYuNiAzNzItMzcyIDM3MnoiIC8+PHBhdGggZD0iTTQ2NCAzMzZhNDggNDggMCAxMDk2IDAgNDggNDggMCAxMC05NiAwem03MiAxMTJoLTQ4Yy00LjQgMC04IDMuNi04IDh2MjcyYzAgNC40IDMuNiA4IDggOGg0OGM0LjQgMCA4LTMuNiA4LThWNDU2YzAtNC40LTMuNi04LTgtOHoiIC8+PC9zdmc+) */
 
 /**![info-circle](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNiA2NCA2NCAyNjQuNiA2NCA1MTJzMjAwLjYgNDQ4IDQ0OCA0NDggNDQ4LTIwMC42IDQ0OC00NDhTNzU5LjQgNjQgNTEyIDY0em0zMiA2NjRjMCA0LjQtMy42IDgtOCA4aC00OGMtNC40IDAtOC0zLjYtOC04VjQ1NmMwLTQuNCAzLjYtOCA4LThoNDhjNC40IDAgOCAzLjYgOCA4djI3MnptLTMyLTM0NGE0OC4wMSA0OC4wMSAwIDAxMC05NiA0OC4wMSA0OC4wMSAwIDAxMCA5NnoiIC8+PC9zdmc+) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.1.3-dev.5",
+  "version": "1.1.3-dev.7",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {

package/ui/src/pages/InterfaceManagementV2.js

@@ -10,12 +10,12 @@ import AppLayout from '../components/AppLayout';
 import { 
   Table, Button, Modal, Form, Input, Select, message, Switch, 
   Popconfirm, Alert, Space, Card, Badge, Tooltip, Row, Col,
-  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer
+  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer, Dropdown, Menu
 } from 'antd';
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
   FileTextOutlined, PlusCircleOutlined, SettingOutlined,
-  SearchOutlined, FilterOutlined, ReloadOutlined
+  SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined
 } from '@ant-design/icons';
 import '../styles/interface-management.css';
 import axios from 'axios';
@@ -976,15 +976,15 @@ const InterfaceManagement = () => {
           重构后版本 V2
         </div>
         
-        <Card className="interface-header-card">
-          <div className="interface-management-header">
-            <div className="feature-selector-container">
+        <Card className="interface-control-panel">
+          <div className="control-panel-header">
+            <div className="control-left">
               <div className="feature-selector">
                 <span>功能模块：</span>
                 <Select
                   value={selectedFeatureId}
                   onChange={handleSelectFeature}
-                  style={{ width: 240 }}
+                  style={{ width: 200 }}
                   placeholder="选择功能模块"
                   loading={featuresLoading}
                   dropdownMatchSelectWidth={false}
@@ -1005,13 +1005,36 @@ const InterfaceManagement = () => {
                 onSearch={handleSearch}
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
-                style={{ width: 250, marginLeft: 16 }}
+                style={{ width: 220, marginLeft: 12 }}
                 enterButton={<SearchOutlined />}
                 allowClear
               />
+              
+              <Dropdown
+                overlay={
+                  <Menu
+                    selectedKeys={selectedGroup ? [selectedGroup] : []}
+                    onClick={({ key }) => setSelectedGroup(key === selectedGroup ? null : key)}
+                  >
+                    <Menu.Item key={null}>全部分组</Menu.Item>
+                    {groups.map(group => (
+                      <Menu.Item key={group}>
+                        {group} ({interfaces.filter(item => item.group === group).length})
+                      </Menu.Item>
+                    ))}
+                  </Menu>
+                }
+                trigger={['click']}
+                disabled={groups.length === 0}
+              >
+                <Button style={{ marginLeft: 12 }} icon={<FilterOutlined />}>
+                  {selectedGroup ? `分组: ${selectedGroup}` : '分组筛选'}
+                  <DownOutlined />
+                </Button>
+              </Dropdown>
             </div>
             
-            <div className="interface-actions">
+            <div className="control-right">
               <Space>
                 <Tooltip title="刷新数据">
                   <Button 
@@ -1020,138 +1043,103 @@ const InterfaceManagement = () => {
                     loading={interfacesLoading}
                   />
                 </Tooltip>
+                
+                <Popover
+                  title="自定义显示列"
+                  trigger="click"
+                  open={columnConfigVisible}
+                  onOpenChange={handleColumnConfigToggle}
+                  content={
+                    <div style={{ width: 280 }}>
+                      <div style={{ marginBottom: 12 }}>
+                        <Space>
+                          <Button size="small" onClick={handleSelectAllColumns}>
+                            全选
+                          </Button>
+                          <Button size="small" onClick={handleResetColumns}>
+                            重置
+                          </Button>
+                        </Space>
+                      </div>
+                      <Checkbox.Group
+                        value={tableConfig.visibleColumns || COLUMN_CONFIG.map(col => col.key)}
+                        onChange={handleColumnConfigChange}
+                        style={{ width: '100%' }}
+                      >
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                          {COLUMN_CONFIG.map(col => (
+                            <Checkbox 
+                              key={col.key} 
+                              value={col.key}
+                              disabled={col.required}
+                              style={{ 
+                                width: '100%',
+                                color: col.required ? '#999' : undefined 
+                              }}
+                            >
+                              {col.title}
+                              {col.required && (
+                                <span style={{ color: '#999', fontSize: '12px', marginLeft: 4 }}>
+                                  (必须)
+                                </span>
+                              )}
+                            </Checkbox>
+                          ))}
+                        </div>
+                      </Checkbox.Group>
+                    </div>
+                  }
+                >
+                  <Button icon={<SettingOutlined />} size="small">
+                    列设置
+                  </Button>
+                </Popover>
 
                 <Button
                   type="primary"
                   icon={<PlusOutlined />}
                   onClick={handleAddInterface}
                   disabled={!selectedFeatureId || selectedFeature?.active === false}
-                  className="add-interface-button"
                 >
                   添加接口
                 </Button>
               </Space>
             </div>
           </div>
-        </Card>
-        
-        {!features.length && (
-          <Alert
-            message="未找到功能模块"
-            description="请先在模拟数据页面创建功能模块，然后再添加接口"
-            type="warning"
-            showIcon
-            style={{ marginBottom: 16 }}
-          />
-        )}
-
-        {selectedFeature?.active === false && (
-          <Alert
-            message="功能模块已禁用"
-            description="当前功能模块已被禁用，所有关联接口不会生效。您可以在模拟数据页面启用此功能模块。"
-            type="warning"
-            showIcon
-            style={{ marginBottom: 16 }}
-          />
-        )}
-
-        {/* 分组筛选和操作区域 */}
-        <Card className="filter-card" bordered={false}>
-          <div className="filter-header">
-            <div className="filter-title">
-              <FilterOutlined /> 分组筛选
-            </div>
-            {selectedGroup && (
-              <Button 
-                type="link" 
-                onClick={() => setSelectedGroup(null)}
-                size="small"
-              >
-                清除筛选
-              </Button>
-            )}
-          </div>
           
-          <div className="group-tags-container">
-            {groups.length === 0 ? (
-              <div className="empty-groups">暂无分组</div>
-            ) : (
-              <div className="group-tags">
-                {groups.map(group => (
-                  <Tag 
-                    key={group} 
-                    color={selectedGroup === group ? "blue" : "default"}
-                    onClick={() => setSelectedGroup(group === selectedGroup ? null : group)}
-                    className={`group-tag ${selectedGroup === group ? 'active' : ''}`}
-                  >
-                    {group} ({interfaces.filter(item => item.group === group).length})
-                  </Tag>
-                ))}
-              </div>
-            )}
-          </div>
-          
-          {selectedGroup && (
-            <div className="group-actions">
-              <Popconfirm
-                title={`确定要启用分组 "${selectedGroup}" 中的所有接口吗？`}
-                onConfirm={() => handleBatchToggleActive(true)}
-                okText="确定"
-                cancelText="取消"
-              >
-                <Button 
-                  type="primary" 
-                  size="small"
-                  loading={groupActionLoading}
-                >
-                  批量启用
-                </Button>
-              </Popconfirm>
-              
-              <Popconfirm
-                title={`确定要禁用分组 "${selectedGroup}" 中的所有接口吗？`}
-                onConfirm={() => handleBatchToggleActive(false)}
-                okText="确定"
-                cancelText="取消"
-              >
-                <Button 
-                  danger 
-                  size="small"
-                  loading={groupActionLoading}
-                >
-                  批量禁用
-                </Button>
-              </Popconfirm>
-            </div>
-          )}
-        </Card>
-
-        {/* 接口列表状态栏 */}
-        <Card className="list-header-card" bordered={false}>
-          <div className="list-header">
-            <div className="list-header-info">
-              <div className="feature-info">
-                <span className="label">功能模块：</span>
-                <span className="value">{selectedFeature?.name}</span>
+          {/* 统计和批量操作行 */}
+          <div className="control-panel-stats">
+            <div className="stats-left">
+              <Space size="large">
+                <span className="stat-item">
+                  <span className="stat-label">功能模块：</span>
+                  <span className="stat-value">{selectedFeature?.name}</span>
+                </span>
+                
                 {selectedGroup && (
-                  <Tag color="blue" className="group-badge">{selectedGroup}</Tag>
-                )}
-              </div>
-              <div className="interface-stats">
-                {searchValue ? (
-                  <Badge 
-                    count={`搜索"${searchValue}" - ${filteredInterfaces.length}个结果`} 
-                    style={{ backgroundColor: '#108ee9' }} 
-                  />
-                ) : (
-                  <Badge 
-                    count={`共 ${filteredInterfaces.length} 个接口`} 
-                    style={{ backgroundColor: '#52c41a' }} 
-                  />
+                  <span className="stat-item">
+                    <span className="stat-label">分组：</span>
+                    <Tag color="blue">{selectedGroup}</Tag>
+                  </span>
                 )}
-              </div>
+                
+                <span className="stat-item">
+                  {searchValue ? (
+                    <Badge 
+                      count={`搜索"${searchValue}" - ${filteredInterfaces.length}个结果`} 
+                      style={{ backgroundColor: '#108ee9' }} 
+                    />
+                  ) : (
+                    <Badge 
+                      count={`共 ${filteredInterfaces.length} 个接口`} 
+                      style={{ backgroundColor: '#52c41a' }} 
+                    />
+                  )}
+                </span>
+              </Space>
             </div>
-            <div className="batch-actions">
+            
+            <div className="stats-right">
               {selectedRowKeys.length > 0 && (
                 <Space>
                   <span className="selected-count">
@@ -1175,72 +1163,64 @@ const InterfaceManagement = () => {
                   </Popconfirm>
                 </Space>
               )}
+              
+              {selectedGroup && (
+                <Space style={{ marginLeft: selectedRowKeys.length > 0 ? 16 : 0 }}>
+                  <Popconfirm
+                    title={`确定要启用分组 "${selectedGroup}" 中的所有接口吗？`}
+                    onConfirm={() => handleBatchToggleActive(true)}
+                    okText="确定"
+                    cancelText="取消"
+                  >
+                    <Button 
+                      type="primary" 
+                      size="small"
+                      loading={groupActionLoading}
+                    >
+                      分组启用
+                    </Button>
+                  </Popconfirm>
+                  <Popconfirm
+                    title={`确定要禁用分组 "${selectedGroup}" 中的所有接口吗？`}
+                    onConfirm={() => handleBatchToggleActive(false)}
+                    okText="确定"
+                    cancelText="取消"
+                  >
+                    <Button 
+                      danger 
+                      size="small"
+                      loading={groupActionLoading}
+                    >
+                      分组禁用
+                    </Button>
+                  </Popconfirm>
+                </Space>
+              )}
             </div>
           </div>
         </Card>
+        
+        {!features.length && (
+          <Alert
+            message="未找到功能模块"
+            description="请先在模拟数据页面创建功能模块，然后再添加接口"
+            type="warning"
+            showIcon
+            style={{ marginBottom: 16 }}
+          />
+        )}
+
+        {selectedFeature?.active === false && (
+          <Alert
+            message="功能模块已禁用"
+            description="当前功能模块已被禁用，所有关联接口不会生效。您可以在模拟数据页面启用此功能模块。"
+            type="warning"
+            showIcon
+            style={{ marginBottom: 16 }}
+          />
+        )}
+
 
-        {/* 列配置区域 */}
-        <div style={{ 
-          marginBottom: 16, 
-          display: 'flex', 
-          justifyContent: 'flex-end',
-          alignItems: 'center' 
-        }}>
-          <Popover
-            title="自定义显示列"
-            trigger="click"
-            open={columnConfigVisible}
-            onOpenChange={handleColumnConfigToggle}
-            content={
-              <div style={{ width: 280 }}>
-                <div style={{ marginBottom: 12 }}>
-                  <Space>
-                    <Button size="small" onClick={handleSelectAllColumns}>
-                      全选
-                    </Button>
-                    <Button size="small" onClick={handleResetColumns}>
-                      重置
-                    </Button>
-                  </Space>
-                </div>
-                <Checkbox.Group
-                  value={tableConfig.visibleColumns || COLUMN_CONFIG.map(col => col.key)}
-                  onChange={handleColumnConfigChange}
-                  style={{ width: '100%' }}
-                >
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                    {COLUMN_CONFIG.map(col => (
-                      <Checkbox 
-                        key={col.key} 
-                        value={col.key}
-                        disabled={col.required}
-                        style={{ 
-                          width: '100%',
-                          color: col.required ? '#999' : undefined 
-                        }}
-                      >
-                        {col.title}
-                        {col.required && (
-                          <span style={{ color: '#999', fontSize: '12px', marginLeft: 4 }}>
-                            (必须)
-                          </span>
-                        )}
-                      </Checkbox>
-                    ))}
-                  </div>
-                </Checkbox.Group>
-              </div>
-            }
-          >
-            <Button 
-              icon={<SettingOutlined />} 
-              size="small"
-              type="text"
-            >
-              列设置
-            </Button>
-          </Popover>
-        </div>
 
                 <Card className="list-container-card" bordered={false} bodyStyle={{ padding: 0 }}>
           <div className="interface-list-container">