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

package/package.json

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

package/ui/src/pages/InterfaceManagementV2.js

@@ -679,10 +679,40 @@ const InterfaceManagement = () => {
       },
       render: (group) => {
         if (!group) {
-          return <span style={{ color: '#999', fontStyle: 'italic' }}>未分组</span>;
+          return (
+            <span style={{ 
+              color: '#a0aec0', 
+              fontStyle: 'italic',
+              fontSize: '12px'
+            }}>
+              未分组
+            </span>
+          );
         }
         return (
-          <Tag color="blue" style={{ cursor: 'pointer' }} onClick={() => setSelectedGroup(group)}>
+          <Tag 
+            style={{ 
+              cursor: 'pointer',
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              border: 'none',
+              borderRadius: '12px',
+              color: '#ffffff',
+              fontWeight: '600',
+              fontSize: '11px',
+              padding: '2px 8px',
+              boxShadow: '0 2px 4px rgba(102, 126, 234, 0.3)',
+              transition: 'all 0.2s ease'
+            }} 
+            onClick={() => setSelectedGroup(group)}
+            onMouseEnter={(e) => {
+              e.target.style.transform = 'translateY(-1px)';
+              e.target.style.boxShadow = '0 4px 8px rgba(102, 126, 234, 0.4)';
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.transform = 'translateY(0)';
+              e.target.style.boxShadow = '0 2px 4px rgba(102, 126, 234, 0.3)';
+            }}
+          >
             {group}
           </Tag>
         );
@@ -702,11 +732,31 @@ const InterfaceManagement = () => {
       width: 120,
       render: (text) => {
         const proxyType = proxyTypes.find(item => item.value === text);
+        const color = proxyType?.color || '#999';
+        const label = proxyType?.label || text;
+        
         return (
-          <Badge 
-            color={proxyType?.color || '#999'} 
-            text={proxyType?.label || text} 
-          />
+          <span 
+            style={{ 
+              display: 'inline-flex',
+              alignItems: 'center',
+              padding: '4px 10px',
+              borderRadius: '12px',
+              fontSize: '12px',
+              fontWeight: '600',
+              backgroundColor: color === '#1890ff' ? '#ebf8ff' : 
+                             color === '#52c41a' ? '#f0fff4' :
+                             color === '#faad14' ? '#fffbf0' : '#f5f5f5',
+              color: color === '#1890ff' ? '#3182ce' :
+                     color === '#52c41a' ? '#38a169' :
+                     color === '#faad14' ? '#d69e2e' : '#718096',
+              border: `1px solid ${color === '#1890ff' ? '#bee3f8' : 
+                                   color === '#52c41a' ? '#c6f6d5' :
+                                   color === '#faad14' ? '#feebc8' : '#e2e8f0'}`
+            }}
+          >
+            {label}
+          </span>
         );
       },
     },
@@ -730,13 +780,22 @@ const InterfaceManagement = () => {
         return (
           <Select
             value={activeResponseId || record.responses[0]?.id}
-            style={{ width: '100%' }}
+            style={{ 
+              width: '100%',
+              borderRadius: '6px'
+            }}
             onChange={(value) => handleResponseSwitch(record.id, value)}
             disabled={record.proxyType !== 'response'}
+            size="small"
           >
             {record.responses.map(resp => (
               <Option key={resp.id} value={resp.id}>
-                {resp.name}
+                <span style={{ 
+                  fontSize: '12px',
+                  fontWeight: '500'
+                }}>
+                  {resp.name}
+                </span>
               </Option>
             ))}
           </Select>
@@ -914,18 +973,28 @@ const InterfaceManagement = () => {
       width: 180,
       render: (_, record) => (
         <div className="action-buttons">
-          <Button 
-            type="text" 
-            icon={<EditOutlined />} 
-            onClick={() => handleEditInterface(record)}
-          />
+          <Tooltip title="编辑接口">
+            <Button 
+              type="text" 
+              icon={<EditOutlined />} 
+              onClick={() => handleEditInterface(record)}
+              aria-label="编辑接口"
+            />
+          </Tooltip>
           <Popconfirm
             title="确定要删除此接口吗？"
             onConfirm={() => handleDeleteInterface(record.id)}
             okText="确定"
             cancelText="取消"
           >
-            <Button type="text" danger icon={<DeleteOutlined />} />
+            <Tooltip title="删除接口">
+              <Button 
+                type="text" 
+                danger 
+                icon={<DeleteOutlined />}
+                aria-label="删除接口"
+              />
+            </Tooltip>
           </Popconfirm>
         </div>
       ),
@@ -1013,10 +1082,16 @@ const InterfaceManagement = () => {
               <Dropdown
                 overlay={
                   <Menu
-                    selectedKeys={selectedGroup ? [selectedGroup] : []}
-                    onClick={({ key }) => setSelectedGroup(key === selectedGroup ? null : key)}
+                    selectedKeys={selectedGroup ? [selectedGroup] : ['ALL_GROUPS']}
+                    onClick={({ key }) => {
+                      if (key === 'ALL_GROUPS') {
+                        setSelectedGroup(null);
+                      } else {
+                        setSelectedGroup(key === selectedGroup ? null : key);
+                      }
+                    }}
                   >
-                    <Menu.Item key={null}>全部分组</Menu.Item>
+                    <Menu.Item key="ALL_GROUPS">全部分组</Menu.Item>
                     {groups.map(group => (
                       <Menu.Item key={group}>
                         {group} ({interfaces.filter(item => item.group === group).length})
@@ -1043,57 +1118,6 @@ 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"
@@ -1196,6 +1220,69 @@ const InterfaceManagement = () => {
                   </Popconfirm>
                 </Space>
               )}
+              
+              {/* 列设置按钮 */}
+              <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>
+                }
+              >
+                <Tooltip title="自定义显示列">
+                  <Button 
+                    icon={<SettingOutlined />} 
+                    type="text"
+                    size="middle"
+                    className="column-settings-btn"
+                    style={{ 
+                      marginLeft: (selectedRowKeys.length > 0 || selectedGroup) ? 16 : 0,
+                      color: '#666'
+                    }}
+                  >
+                    列设置
+                  </Button>
+                </Tooltip>
+              </Popover>
             </div>
           </div>
         </Card>

package/ui/src/styles/interface-management.css

@@ -15,10 +15,6 @@
   --transition-time: 0.3s;
 }
 
-.interface-management-container {
-  padding: 24px;
-  background: #f5f7fa;
-}
 
 /* 统一控制台 */
 .interface-control-panel {
@@ -111,6 +107,120 @@
   font-size: 13px;
 }
 
+/* 列设置按钮 */
+.column-settings-btn {
+  transition: all 0.2s ease;
+  border-radius: 6px;
+}
+
+.column-settings-btn:hover {
+  background-color: #f5f5f5;
+  color: var(--primary-color) !important;
+}
+
+.column-settings-btn:active {
+  background-color: #e6f7ff;
+}
+
+/* 接口名称样式优化 */
+.interface-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: #2d3748;
+  display: block;
+  line-height: 1.4;
+}
+
+/* 状态码样式优化 */
+.status-success {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
+  color: #ffffff;
+  box-shadow: 0 2px 4px rgba(72, 187, 120, 0.3);
+}
+
+.status-warning {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
+  color: #ffffff;
+  box-shadow: 0 2px 4px rgba(237, 137, 54, 0.3);
+}
+
+.status-error {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
+  color: #ffffff;
+  box-shadow: 0 2px 4px rgba(245, 101, 101, 0.3);
+}
+
+/* 延迟状态样式 */
+.delay-active {
+  color: #ed8936;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.delay-inactive {
+  color: #a0aec0;
+  font-size: 12px;
+}
+
+/* 无响应数据样式 */
+.no-response {
+  color: #a0aec0;
+  font-style: italic;
+  font-size: 12px;
+}
+
+/* 操作按钮区域优化 */
+.action-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.action-buttons .ant-btn {
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.action-buttons .ant-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.action-buttons .ant-btn[aria-label*="编辑"] {
+  color: #3182ce;
+}
+
+.action-buttons .ant-btn[aria-label*="编辑"]:hover {
+  background-color: #ebf8ff;
+  border-color: #3182ce;
+}
+
+.action-buttons .ant-btn.ant-btn-dangerous:hover {
+  background-color: #fed7d7;
+  border-color: #e53e3e;
+}
+
 /* 旧版样式兼容 */
 .interface-header-card {
   margin-bottom: 16px;
@@ -281,15 +391,67 @@
 }
 
 /* 表格样式增强 */
+.interface-table {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border: 1px solid #f0f2f5;
+}
+
 .interface-table th {
-  background-color: #f5f7fa !important;
+  background: linear-gradient(135deg, #fafbfc 0%, #f5f6fa 100%) !important;
   font-weight: 600;
-  padding: 12px 16px !important;
-  color: #333;
+  padding: 16px 16px !important;
+  color: #4a5568;
+  font-size: 13px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  border-bottom: 2px solid #e2e8f0 !important;
+  position: relative;
+}
+
+.interface-table th::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, #4299e1, transparent);
 }
 
 .interface-table td {
-  padding: 12px 16px !important;
+  padding: 20px 16px !important;
+  vertical-align: middle;
+  border-bottom: 1px solid #f7fafc !important;
+  transition: all 0.2s ease;
+}
+
+.interface-table tbody tr {
+  transition: all 0.2s ease;
+  background-color: #ffffff;
+}
+
+.interface-table tbody tr:nth-child(even) {
+  background-color: #fafbfc;
+}
+
+.interface-table tbody tr:hover {
+  background-color: #edf2f7 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.interface-table tbody tr:hover td {
+  border-bottom-color: #e2e8f0 !important;
+}
+
+.interface-table tbody tr.ant-table-row-selected {
+  background-color: #ebf8ff !important;
+}
+
+.interface-table tbody tr.ant-table-row-selected:hover {
+  background-color: #bee3f8 !important;
 }
 
 /* 卡片视图样式 */
@@ -677,13 +839,29 @@
 .url-pattern {
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
   word-break: break-all;
-  padding: 4px 8px;
-  background: #f5f5f5;
-  border-radius: 4px;
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 12px;
+  color: #2d3748;
+  position: relative;
+}
+
+.url-pattern::before {
+  content: 'URL';
+  position: absolute;
+  top: -6px;
+  left: 8px;
+  background: #ffffff;
+  padding: 0 4px;
+  font-size: 10px;
+  color: #718096;
+  font-weight: 600;
 }
 
 /* 接口状态开关 */