whistle.mock-plugins 1.1.3-dev.12 → 1.1.3-dev.13

package/package.json

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

package/ui/src/pages/InterfaceManagementV2.js

@@ -976,6 +976,27 @@ const InterfaceManagement = () => {
           重构后版本 V2
         </div>
         
+        {/* 警告信息置顶显示 */}
+        {!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="interface-control-panel">
           <div className="control-panel-header">
             <div className="control-left">
@@ -1060,14 +1081,9 @@ const InterfaceManagement = () => {
           <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 && (
                   <span className="stat-item">
-                    <span className="stat-label">分组：</span>
+                    <span className="stat-label">当前分组：</span>
                     <Tag color="blue">{selectedGroup}</Tag>
                   </span>
                 )}
@@ -1145,96 +1161,70 @@ 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="small"
+                    className="inline-column-settings-btn"
+                    style={{ marginLeft: (selectedRowKeys.length > 0 || selectedGroup) ? 16 : 0 }}
+                  >
+                    列设置
+                  </Button>
+                </Tooltip>
+              </Popover>
             </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 className="table-toolbar">
-          <div className="table-toolbar-left">
-            {/* 可以在这里添加其他表格相关的工具 */}
-          </div>
-          <div className="table-toolbar-right">
-            <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="small"
-                  className="table-column-settings-btn"
-                >
-                  列设置
-                </Button>
-              </Tooltip>
-            </Popover>
-          </div>
-        </div>
-
         <Card className="list-container-card" bordered={false} bodyStyle={{ padding: 0 }}>
           <div className="interface-list-container">
             <Table

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

@@ -273,11 +273,9 @@
 }
 
 .list-container-card {
-  border-radius: 0 0 8px 8px;
+  border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   margin-bottom: 40px;
-  border: 1px solid #f0f2f5;
-  border-top: none;
 }
 
 .interface-list-container {
@@ -1121,54 +1119,29 @@
   font-style: italic;
 }
 
-/* 表格工具栏样式 */
-.table-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: #fafbfc;
-  border: 1px solid #f0f2f5;
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
-  margin-bottom: 0;
-}
-
-.table-toolbar-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.table-toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.table-column-settings-btn {
+/* 内联列设置按钮样式 */
+.inline-column-settings-btn {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 12px;
-  border-radius: 6px;
+  padding: 4px 8px;
+  border-radius: 4px;
   border: 1px solid #d9d9d9;
   background: #ffffff;
   color: #666;
-  font-size: 13px;
+  font-size: 12px;
   transition: all 0.2s ease;
 }
 
-.table-column-settings-btn:hover {
+.inline-column-settings-btn:hover {
   border-color: #4096ff;
-  background: #f6ffed;
+  background: #f0f9ff;
   color: #4096ff;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(64, 150, 255, 0.15);
 }
 
-.table-column-settings-btn:active {
-  transform: translateY(0);
+.inline-column-settings-btn:active {
+  border-color: #1677ff;
+  background: #e6f4ff;
 }
 
 /* 分页器样式 */