whistle.mock-plugins 1.2.0-beta.9 → 1.2.0

package/ui/src/pages/MockDataV2.js

@@ -6,8 +6,8 @@
 import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import AppLayout from '../components/AppLayout';
-import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination, Tag, List } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined } from '@ant-design/icons';
 import '../styles/mock-data.css';
 import axios from 'axios';
 
@@ -34,12 +34,6 @@ const MockData = () => {
   const [loading, setLoading] = useState(true);
   const [form] = Form.useForm();
 
-  // 视图模式配置（卡片/列表）
-  const [viewMode, setViewMode] = useState(() => {
-    const savedViewMode = localStorage.getItem('feature-view-mode');
-    return savedViewMode === 'list' ? 'list' : 'card'; // 默认为卡片视图
-  });
-  
   // 排序和分页配置（支持缓存）
   const [listConfig, setListConfig] = useState(() => {
     const cached = localStorage.getItem('feature-list-config');
@@ -57,13 +51,6 @@ const MockData = () => {
     setListConfig(newConfig);
     localStorage.setItem('feature-list-config', JSON.stringify(newConfig));
   };
-  
-  // 切换视图模式（卡片/列表）
-  const toggleViewMode = () => {
-    const newMode = viewMode === 'card' ? 'list' : 'card';
-    setViewMode(newMode);
-    localStorage.setItem('feature-view-mode', newMode);
-  };
 
   // 加载功能列表
   useEffect(() => {
@@ -426,98 +413,6 @@ const MockData = () => {
     return sortedFeatures.slice(startIndex, endIndex);
   };
 
-  // 渲染功能模块列表项
-  const renderFeatureListItem = (feature) => {
-    const formattedDate = feature.createdAt 
-      ? new Date(feature.createdAt).toLocaleDateString()
-      : '未知日期';
-    
-    return (
-      <div 
-        key={feature.id} 
-        className={`feature-list-item ${!feature.active ? 'inactive-feature' : ''}`}
-        onClick={() => viewInterfaces(feature)}
-      >
-        <div className="feature-list-content">
-          <div className="feature-list-main">
-            <div className="feature-list-name">
-              <h3>{feature.name}</h3>
-              {!feature.active && <Tag color="red">已禁用</Tag>}
-              {feature.active && <Tag color="green">已启用</Tag>}
-            </div>
-            <div className="feature-list-description">
-              {feature.description || '无描述'}
-            </div>
-          </div>
-          
-          <div className="feature-list-meta">
-            <div className="feature-list-stats">
-              <span><InfoCircleOutlined /> {feature.interfaceCount || 0} 个接口</span>
-              <span><CalendarOutlined /> {formattedDate}</span>
-            </div>
-          </div>
-        </div>
-        
-        <div className="feature-list-actions">
-          <Switch
-            checked={feature.active}
-            onChange={(checked, e) => {
-              e.stopPropagation();
-              handleToggleActive(feature.id, feature.active);
-            }}
-            onClick={(e) => e.stopPropagation()}
-            size="small"
-          />
-          <Tooltip title="管理接口">
-            <Button 
-              icon={<ApiOutlined />}
-              size="small"
-              type="text"
-              onClick={(e) => {
-                e.stopPropagation();
-                viewInterfaces(feature);
-              }}
-            />
-          </Tooltip>
-          <Tooltip title="编辑功能">
-            <Button 
-              icon={<EditOutlined />}
-              size="small"
-              type="text"
-              onClick={(e) => {
-                e.stopPropagation();
-                openModal(feature);
-              }}
-            />
-          </Tooltip>
-          <Tooltip title="删除功能">
-            <Button 
-              icon={<DeleteOutlined />}
-              size="small"
-              type="text"
-              danger
-              onClick={(e) => {
-                e.stopPropagation();
-                deleteFeature(feature.id);
-              }}
-            />
-          </Tooltip>
-          <Tooltip title="导出配置">
-            <Button 
-              icon={<ExportOutlined />}
-              size="small"
-              type="text"
-              onClick={(e) => {
-                e.stopPropagation();
-                exportFeatureConfig(feature);
-              }}
-            />
-          </Tooltip>
-        </div>
-      </div>
-    );
-  };
-  
   // 渲染功能模块卡片
   const renderFeatureCard = (feature) => {
     const formattedDate = feature.createdAt 
@@ -722,7 +617,7 @@ const MockData = () => {
               </Col>
               
               {/* 分页控制区域 */}
-              <Col xs={24} sm={12} md={5} lg={6}>
+              <Col xs={24} sm={24} md={8} lg={9}>
                 <div className="pagination-controls">
                   <div className="control-group">
                     <span className="control-label">每页显示</span>
@@ -743,22 +638,6 @@ const MockData = () => {
                   </div>
                 </div>
               </Col>
-              
-              {/* 视图切换按钮区域 */}
-              <Col xs={24} sm={12} md={3} lg={3}>
-                <div className="view-toggle-controls">
-                  <Tooltip title={viewMode === 'card' ? '切换到列表视图' : '切换到卡片视图'}>
-                    <Button
-                      type="default"
-                      icon={viewMode === 'card' ? <UnorderedListOutlined /> : <AppstoreOutlined />}
-                      onClick={toggleViewMode}
-                      className="view-toggle-button"
-                    >
-                      {viewMode === 'card' ? '列表视图' : '卡片视图'}
-                    </Button>
-                  </Tooltip>
-                </div>
-              </Col>
             </Row>
           </Card>
         )}
@@ -771,16 +650,9 @@ const MockData = () => {
             </div>
           ) : mockFeatures.length > 0 ? (
             <>
-              {/* 根据视图模式渲染不同的视图 */}
-              {viewMode === 'card' ? (
-                <Row gutter={[20, 20]} className="feature-grid">
-                  {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
-                </Row>
-              ) : (
-                <div className="feature-list-view">
-                  {getPaginatedFeatures().map(feature => renderFeatureListItem(feature))}
-                </div>
-              )}
+              <Row gutter={[20, 20]} className="feature-grid">
+                {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
+              </Row>
               
               {/* 分页组件 */}
               {mockFeatures.length > listConfig.pageSize && (

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

@@ -121,118 +121,6 @@
   min-height: 300px;
 }
 
-/* 视图切换按钮样式 */
-.view-toggle-controls {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 100%;
-}
-
-.view-toggle-button {
-  border-radius: 4px;
-  border: 1px solid #e8e8e8;
-  background: #fafafa;
-  transition: all 0.3s;
-}
-
-.view-toggle-button:hover {
-  border-color: #1890ff;
-  color: #1890ff;
-}
-
-/* 列表视图样式 */
-.feature-list-view {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 300px;
-}
-
-.feature-list-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-radius: 8px;
-  border: 1px solid #f0f0f0;
-  background: #ffffff;
-  transition: all 0.3s;
-  cursor: pointer;
-  position: relative;
-}
-
-.feature-list-item:hover {
-  border-color: #d9d9d9;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  transform: translateY(-2px);
-}
-
-.feature-list-item.inactive-feature {
-  opacity: 0.7;
-  background-color: #fafafa;
-}
-
-.feature-list-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-}
-
-.feature-list-main {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.feature-list-name {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.feature-list-name h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1890ff;
-}
-
-.feature-list-description {
-  color: #666;
-  font-size: 14px;
-  max-width: 80%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.feature-list-meta {
-  display: flex;
-  justify-content: space-between;
-}
-
-.feature-list-stats {
-  display: flex;
-  gap: 16px;
-  color: #8c8c8c;
-  font-size: 13px;
-}
-
-.feature-list-stats span {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.feature-list-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .feature-card {
   position: relative;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -1151,33 +1039,6 @@ input:checked + .slider:before {
     height: auto;
   }
   
-  .feature-list-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 16px;
-    padding: 16px;
-  }
-  
-  .feature-list-content {
-    width: 100%;
-  }
-  
-  .feature-list-description {
-    max-width: 100%;
-  }
-  
-  .feature-list-actions {
-    width: 100%;
-    justify-content: flex-end;
-    border-top: 1px solid #f0f0f0;
-    padding-top: 12px;
-  }
-  
-  .view-toggle-controls {
-    justify-content: flex-start;
-    margin-top: 12px;
-  }
-  
   .form-actions {
     flex-direction: column;
   }