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

package/package.json

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

package/ui/src/pages/InterfaceManagementV2.js

@@ -1043,57 +1043,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"
@@ -1220,9 +1169,73 @@ const InterfaceManagement = () => {
           />
         )}
 
+        {/* 表格工具栏 */}
+        <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 }}>
+        <Card className="list-container-card" bordered={false} bodyStyle={{ padding: 0 }}>
           <div className="interface-list-container">
             <Table
               columns={columns}

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

@@ -273,9 +273,11 @@
 }
 
 .list-container-card {
-  border-radius: 12px;
+  border-radius: 0 0 8px 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   margin-bottom: 40px;
+  border: 1px solid #f0f2f5;
+  border-top: none;
 }
 
 .interface-list-container {
@@ -1117,4 +1119,59 @@
 .no-response {
   color: #999;
   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 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+  background: #ffffff;
+  color: #666;
+  font-size: 13px;
+  transition: all 0.2s ease;
+}
+
+.table-column-settings-btn:hover {
+  border-color: #4096ff;
+  background: #f6ffed;
+  color: #4096ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(64, 150, 255, 0.15);
+}
+
+.table-column-settings-btn:active {
+  transform: translateY(0);
+}
+
+/* 分页器样式 */
+.interface-table .ant-pagination-options {
+  margin-right: 16px;
+}