whistle.mock-plugins 1.1.0 → 1.1.1-beta.2

package/ui/src/pages/MockData.js

@@ -338,6 +338,33 @@ const MockData = () => {
     const formattedDate = feature.createdAt 
       ? new Date(feature.createdAt).toLocaleDateString()
       : '未知日期';
+
+    // 处理卡片点击事件
+    const handleCardClick = (e) => {
+      // 检查点击目标是否是开关或其父元素
+      const target = e.target;
+      const switchElement = target.closest('.ant-switch') || target.closest('.feature-name .ant-switch');
+      
+      // 如果点击的是开关区域，则不执行跳转
+      if (switchElement) {
+        return;
+      }
+      
+      // 检查是否点击了操作按钮区域
+      const actionElement = target.closest('.ant-card-actions') || target.closest('.ant-card-actions li');
+      if (actionElement) {
+        return;
+      }
+      
+      // 执行跳转到接口管理界面
+      viewInterfaces(feature);
+    };
+
+    // 处理开关点击事件，阻止事件冒泡
+    const handleSwitchClick = (checked, e) => {
+      e.stopPropagation(); // 阻止事件冒泡到卡片
+      handleToggleActive(feature.id, feature.active);
+    };
     
     return (
       <Col xs={24} sm={12} md={8} lg={6} key={feature.id} style={{ marginBottom: 16 }}>
@@ -349,18 +376,32 @@ const MockData = () => {
           <Card
             hoverable
             className={`feature-card ${!feature.active ? 'inactive-feature' : ''}`}
+            onClick={handleCardClick}
+            style={{ cursor: 'pointer' }}
             actions={[
               <Tooltip title="管理接口">
-                <ApiOutlined key="interfaces" onClick={() => viewInterfaces(feature)} />
+                <ApiOutlined key="interfaces" onClick={(e) => {
+                  e.stopPropagation();
+                  viewInterfaces(feature);
+                }} />
               </Tooltip>,
               <Tooltip title="编辑功能">
-                <EditOutlined key="edit" onClick={() => openModal(feature)} />
+                <EditOutlined key="edit" onClick={(e) => {
+                  e.stopPropagation();
+                  openModal(feature);
+                }} />
               </Tooltip>,
               <Tooltip title="删除功能">
-                <DeleteOutlined key="delete" onClick={() => deleteFeature(feature.id)} />
+                <DeleteOutlined key="delete" onClick={(e) => {
+                  e.stopPropagation();
+                  deleteFeature(feature.id);
+                }} />
               </Tooltip>,
               <Tooltip title="导出配置">
-                <ExportOutlined key="export" onClick={() => exportFeatureConfig(feature)} />
+                <ExportOutlined key="export" onClick={(e) => {
+                  e.stopPropagation();
+                  exportFeatureConfig(feature);
+                }} />
               </Tooltip>
             ]}
           >
@@ -372,8 +413,9 @@ const MockData = () => {
 
                 <Switch
                   checked={feature.active}
-                  onChange={() => handleToggleActive(feature.id, feature.active)}
+                  onChange={handleSwitchClick}
                   size="small"
+                  onClick={(e) => e.stopPropagation()}
                 />
               </div>
               

package/ui/src/styles/mock-data.css

@@ -23,11 +23,47 @@
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
 }
 
 .feature-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border-color: #40a9ff;
+}
+
+.feature-card:active {
+  transform: translateY(-2px);
+}
+
+/* 添加卡片点击提示 */
+.feature-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.02), rgba(24, 144, 255, 0.05));
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.feature-card:hover::before {
+  opacity: 1;
+}
+
+/* 为卡片内容添加相对定位，确保在渐变层之上 */
+.feature-card .ant-card-body {
+  position: relative;
+  z-index: 2;
+}
+
+.feature-card .ant-card-actions {
+  position: relative;
+  z-index: 2;
 }
 
 .feature-card-content {