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

package/ui/src/pages/MockDataV2.js

@@ -1,69 +1,63 @@
 /**
- * MockDataV2.js - 功能模块管理页面（重构后版本）
- * 这是重构后的新版本界面，提供更好的用户体验和功能优化
- * 当前内容与V1版本相同，等待后续重构
+ * MockDataV2.js - 功能模块管理页面（V2版本）
+ * 功能和UI与V1版本完全一致，仅保留V2版本标识
  */
 
 import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import AppLayout from '../components/AppLayout';
-import { 
-  Form, Input, Modal, Button, message, Card, Switch, 
-  Row, Col, Badge, Popconfirm, Alert, Space, Select, 
-  Tooltip, Menu, Dropdown, Pagination, AutoComplete
-} from 'antd';
-import { 
-  PlusOutlined, DeleteOutlined, EditOutlined, SettingOutlined,
-  ExportOutlined, ImportOutlined, SearchOutlined, FilterOutlined,
-  SortAscendingOutlined, ReloadOutlined, ClearOutlined, DownloadOutlined
-} 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';
 
-const { Option } = Select;
+const { Text, Title, Paragraph } = Typography;
 const { TextArea } = Input;
 
-// 刷新缓存工具函数
+// 刷新缓存服务
 const flushCache = async () => {
   try {
-    await fetch('/cgi-bin/flush-cache', { method: 'POST' });
-    console.log('缓存刷新成功');
+    const response = await axios.get(`/_flush_cache`);
+    return response.data;
   } catch (error) {
-    console.error('缓存刷新失败:', error);
+    console.error('刷新缓存失败:', error);
+    throw error;
   }
 };
 
 const MockData = () => {
   const history = useHistory();
-  
-  // 功能模块状态
-  const [features, setFeatures] = useState([]);
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState(false);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [editingFeature, setEditingFeature] = useState(null);
+  const [mockFeatures, setMockFeatures] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+  const [currentFeature, setCurrentFeature] = useState(null);
 
-  // 搜索和筛选状态
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filteredFeatures, setFilteredFeatures] = useState([]);
-  const [statusFilter, setStatusFilter] = useState('all'); // all, active, inactive
-  const [sortBy, setSortBy] = useState('name'); // name, createTime, updateTime
+  const [loading, setLoading] = useState(true);
+  const [form] = Form.useForm();
 
-  // 分页状态
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  // 排序和分页配置（支持缓存）
+  const [listConfig, setListConfig] = useState(() => {
+    const cached = localStorage.getItem('feature-list-config');
+    return cached ? JSON.parse(cached) : {
+      sortBy: 'name', // name, createdAt, interfaceCount, active
+      sortOrder: 'ascend', // ascend, descend
+      pageSize: 12,
+      current: 1
+    };
+  });
 
-  // 导入/导出状态
-  const [exportLoading, setExportLoading] = useState(false);
-  const [importLoading, setImportLoading] = useState(false);
+  // 保存列表配置到localStorage
+  const saveListConfig = (config) => {
+    const newConfig = { ...listConfig, ...config };
+    setListConfig(newConfig);
+    localStorage.setItem('feature-list-config', JSON.stringify(newConfig));
+  };
 
+  // 加载功能列表
   useEffect(() => {
     fetchFeatures();
   }, []);
 
-  useEffect(() => {
-    filterAndSortFeatures();
-  }, [features, searchTerm, statusFilter, sortBy]);
-
+  // 获取所有功能模块
   const fetchFeatures = async () => {
     try {
       setLoading(true);
@@ -71,303 +65,461 @@ const MockData = () => {
       const result = await response.json();
       
       if (result.code === 0) {
-        setFeatures(result.data || []);
+        setMockFeatures(result.data || []);
       } else {
-        throw new Error(result.message || '获取功能模块失败');
+        console.error('获取功能模块失败:', result.message);
+        message.error('获取功能模块失败: ' + result.message);
       }
     } catch (error) {
-      console.error('获取功能模块失败:', error);
-      message.error('获取功能模块失败: ' + error.message);
-      setFeatures([]);
+      console.error('获取功能模块错误:', error);
+      message.error('获取功能模块失败, 请检查网络连接');
     } finally {
       setLoading(false);
     }
   };
 
-  const filterAndSortFeatures = () => {
-    let filtered = [...features];
-
-    // 搜索筛选
-    if (searchTerm) {
-      const term = searchTerm.toLowerCase();
-      filtered = filtered.filter(feature => 
-        feature.name.toLowerCase().includes(term) ||
-        (feature.description && feature.description.toLowerCase().includes(term))
-      );
-    }
-
-    // 状态筛选
-    if (statusFilter === 'active') {
-      filtered = filtered.filter(feature => feature.active !== false);
-    } else if (statusFilter === 'inactive') {
-      filtered = filtered.filter(feature => feature.active === false);
+  const openModal = (feature = null) => {
+    if (feature) {
+      setCurrentFeature(feature);
+      form.setFieldsValue({
+        name: feature.name,
+        description: feature.description,
+        active: feature.active !== false
+      });
+    } else {
+      setCurrentFeature(null);
+      form.resetFields();
+      form.setFieldsValue({
+        active: true
+      });
     }
-
-    // 排序
-    filtered.sort((a, b) => {
-      switch (sortBy) {
-        case 'name':
-          return a.name.localeCompare(b.name);
-        case 'createTime':
-          return new Date(b.createTime || 0) - new Date(a.createTime || 0);
-        case 'updateTime':
-          return new Date(b.updateTime || 0) - new Date(a.updateTime || 0);
-        default:
-          return 0;
-      }
-    });
-
-    setFilteredFeatures(filtered);
-    setCurrentPage(1); // 重置到第一页
-  };
-
-  const handleAddFeature = () => {
-    form.resetFields();
-    setEditingFeature(null);
-    setModalVisible(true);
+    setShowModal(true);
   };
 
-  const handleEditFeature = (feature) => {
-    form.setFieldsValue({
-      name: feature.name,
-      description: feature.description
-    });
-    setEditingFeature(feature);
-    setModalVisible(true);
+  const closeModal = () => {
+    setShowModal(false);
   };
 
-  const handleDeleteFeature = async (id) => {
+  // 更新成功后刷新缓存
+  const refreshCacheAfterUpdate = async () => {
     try {
-      const response = await fetch(`/cgi-bin/features?id=${id}`, {
-        method: 'DELETE'
-      });
-      const result = await response.json();
-      
-      if (result.code === 0) {
-        message.success('功能模块删除成功');
-        fetchFeatures();
-        
-        // 刷新缓存
-        await flushCache();
-      } else {
-        throw new Error(result.message || '删除失败');
-      }
+      await flushCache();
+      // 不显示提示，避免干扰主操作的反馈
     } catch (error) {
-      console.error('删除功能模块失败:', error);
-      message.error('删除功能模块失败: ' + error.message);
+      // 记录错误但不影响用户体验
+      console.error('刷新缓存失败，可能需要等待缓存自动过期:', error);
     }
   };
 
-  const handleToggleActive = async (id, currentActive) => {
+  const handleSubmit = async (values) => {
     try {
-      const response = await fetch(`/cgi-bin/features`, {
-        method: 'PATCH',
+      const featureData = {
+        ...values
+      };
+      
+      // 如果是编辑已有功能，添加ID
+      if (currentFeature) {
+        featureData.id = currentFeature.id;
+      }
+      
+      setLoading(true);
+      const response = await fetch('/cgi-bin/features', {
+        method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify({
-          id,
-          active: !currentActive
-        })
+        body: JSON.stringify(featureData)
       });
       
       const result = await response.json();
       
       if (result.code === 0) {
-        message.success(`功能模块${!currentActive ? '启用' : '禁用'}成功`);
+        // 刷新功能列表
+        message.success(currentFeature ? '功能模块更新成功' : '功能模块创建成功');
         fetchFeatures();
+        closeModal();
         
         // 刷新缓存
-        await flushCache();
+        refreshCacheAfterUpdate();
       } else {
-        throw new Error(result.message || '操作失败');
+        message.error('操作失败: ' + result.message);
       }
     } catch (error) {
-      console.error('切换功能模块状态失败:', error);
-      message.error('操作失败: ' + error.message);
+      console.error('保存功能模块错误:', error);
+      message.error('保存失败: ' + error.message);
+    } finally {
+      setLoading(false);
     }
   };
 
-  const handleSubmit = async () => {
+  const handleToggleActive = async (id, currentActive) => {
     try {
-      const values = await form.validateFields();
-      
-      const requestData = {
-        name: values.name,
-        description: values.description || '',
-        active: true
-      };
-
-      const url = editingFeature 
-        ? `/cgi-bin/features?id=${editingFeature.id}`
-        : '/cgi-bin/features';
-      
-      const method = editingFeature ? 'PUT' : 'POST';
-
-      const response = await fetch(url, {
-        method,
+      const response = await fetch(`/cgi-bin/features?id=${id}`, {
+        method: 'PATCH',
         headers: {
           'Content-Type': 'application/json'
         },
-        body: JSON.stringify(requestData)
+        body: JSON.stringify({
+          active: !currentActive
+        })
       });
-
+      
       const result = await response.json();
       
       if (result.code === 0) {
-        message.success(editingFeature ? '功能模块更新成功' : '功能模块创建成功');
-        setModalVisible(false);
-        fetchFeatures();
+        message.success(`${currentActive ? '禁用' : '启用'}功能模块成功`);
+        // 更新本地状态
+        setMockFeatures(mockFeatures.map(feature => 
+          feature.id === id ? { ...feature, active: !currentActive } : feature
+        ));
         
-        // 刷新缓存
-        await flushCache();
+        // 刷新缓存 - 功能启用状态变化是最关键的需要刷新缓存的操作
+        refreshCacheAfterUpdate();
       } else {
-        throw new Error(result.message || '操作失败');
+        message.error(`${currentActive ? '禁用' : '启用'}功能模块失败: ${result.message}`);
       }
     } catch (error) {
-      console.error('提交失败:', error);
-      message.error('操作失败: ' + error.message);
+      console.error(`${currentActive ? '禁用' : '启用'}功能模块错误:`, error);
+      message.error(`操作失败: ${error.message}`);
     }
   };
 
-  const handleCancel = () => {
-    setModalVisible(false);
+  const deleteFeature = async (id) => {
+    Modal.confirm({
+      title: '确定要删除此功能吗？',
+      content: '这将删除所有相关的接口和模拟数据，此操作无法恢复。',
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          setLoading(true);
+          const response = await fetch(`/cgi-bin/features?id=${id}`, {
+            method: 'DELETE'
+          });
+          
+          const result = await response.json();
+          
+          if (result.code === 0) {
+            message.success('功能模块已成功删除');
+            // 更新本地状态
+            setMockFeatures(mockFeatures.filter(f => f.id !== id));
+            
+            // 刷新缓存
+            refreshCacheAfterUpdate();
+          } else {
+            message.error('删除失败: ' + result.message);
+          }
+        } catch (error) {
+          console.error('删除功能错误:', error);
+          message.error('操作失败: ' + error.message);
+        } finally {
+          setLoading(false);
+        }
+      }
+    });
   };
 
-  const handleNavigateToInterfaces = (featureId) => {
-    history.push(`/interface-management/${featureId}`);
+  const viewInterfaces = (feature) => {
+    // 导航到该功能的接口列表页面
+    history.push(`/interface/${feature.id}`);
   };
 
-  // 导出功能
-  const handleExport = async () => {
+  const exportFeatureConfig = async (feature) => {
     try {
-      setExportLoading(true);
-      const response = await fetch('/cgi-bin/features/export');
+      // 获取该功能的所有接口
+      const response = await fetch(`/cgi-bin/interfaces?featureId=${feature.id}`);
+      const result = await response.json();
       
-      if (!response.ok) {
-        throw new Error('导出失败');
-      }
+      // 创建完整配置
+      const config = {
+        ...feature,
+        interfaces: result.code === 0 ? result.data : []
+      };
+      
+      const dataStr = JSON.stringify(config, null, 2);
+      const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
       
-      const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `features-${new Date().toISOString().split('T')[0]}.json`;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
+      const exportFileDefaultName = `whistle-mock-feature-${feature.id}.json`;
       
-      message.success('导出成功');
+      const linkElement = document.createElement('a');
+      linkElement.setAttribute('href', dataUri);
+      linkElement.setAttribute('download', exportFileDefaultName);
+      linkElement.click();
+      
+      message.success('配置导出成功');
     } catch (error) {
-      console.error('导出失败:', error);
+      console.error('导出配置错误:', error);
       message.error('导出失败: ' + error.message);
-    } finally {
-      setExportLoading(false);
     }
   };
 
-  // 导入功能
-  const handleImport = (event) => {
-    const file = event.target.files[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      try {
-        setImportLoading(true);
-        const data = JSON.parse(e.target.result);
-        
-        const response = await fetch('/cgi-bin/features/import', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(data)
-        });
-
-        const result = await response.json();
-        
-        if (result.code === 0) {
-          message.success('导入成功');
-          fetchFeatures();
-        } else {
-          throw new Error(result.message || '导入失败');
+  const importFeatureConfig = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    
+    input.onchange = async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      
+      const reader = new FileReader();
+      reader.onload = async (event) => {
+        try {
+          const config = JSON.parse(event.target.result);
+          
+          // 验证导入的配置
+          if (!config.name) {
+            message.error('无效的配置文件: 缺少功能名称');
+            return;
+          }
+          
+          // 创建新功能
+          const featureData = {
+            name: config.name,
+            description: config.description || '',
+            active: config.active !== false
+          };
+          
+          // 保存功能
+          const featureResponse = await fetch('/cgi-bin/features', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(featureData)
+          });
+          
+          const featureResult = await featureResponse.json();
+          
+          if (featureResult.code === 0) {
+            const newFeature = featureResult.data;
+            
+            // 导入接口配置
+            if (Array.isArray(config.interfaces) && config.interfaces.length > 0) {
+              message.loading({ content: '正在导入接口配置...', key: 'importInfo' });
+              
+              let successCount = 0;
+              let errorCount = 0;
+              
+              for (const interfaceItem of config.interfaces) {
+                try {
+                  // 创建接口，使用新功能ID
+                  const interfaceData = {
+                    ...interfaceItem,
+                    featureId: newFeature.id,
+                    id: undefined // 不使用原接口ID
+                  };
+                  
+                  await fetch('/cgi-bin/interfaces', {
+                    method: 'POST',
+                    headers: {
+                      'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(interfaceData)
+                  });
+                  
+                  successCount++;
+                } catch (error) {
+                  console.error('导入接口配置失败:', error);
+                  errorCount++;
+                }
+              }
+              
+              if (errorCount > 0) {
+                message.info({ content: `导入完成，成功 ${successCount} 个接口，失败 ${errorCount} 个接口`, key: 'importInfo', duration: 3 });
+              } else {
+                message.success({ content: `成功导入 ${successCount} 个接口`, key: 'importInfo', duration: 2 });
+              }
+            } else {
+              message.success('功能导入成功（无接口配置）');
+            }
+            
+            // 刷新功能列表
+            fetchFeatures();
+          } else {
+            message.error('导入功能失败: ' + featureResult.message);
+          }
+        } catch (error) {
+          console.error('导入配置错误:', error);
+          message.error('导入失败: ' + error.message);
         }
-      } catch (error) {
-        console.error('导入失败:', error);
-        message.error('导入失败: ' + error.message);
-      } finally {
-        setImportLoading(false);
-        // 清除文件选择
-        event.target.value = '';
-      }
+      };
+      
+      reader.readAsText(file);
     };
-
-    reader.readAsText(file);
+    
+    input.click();
   };
 
-  // 清空搜索
-  const handleClearSearch = () => {
-    setSearchTerm('');
+  // 排序处理
+  const handleSortChange = (value) => {
+    saveListConfig({ sortBy: value, current: 1 });
   };
 
-  // 刷新数据
-  const handleRefresh = () => {
-    fetchFeatures();
-    message.success('数据已刷新');
+  const handleSortOrderChange = (value) => {
+    saveListConfig({ sortOrder: value, current: 1 });
   };
 
-  // 获取分页数据
-  const getPaginatedFeatures = () => {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return filteredFeatures.slice(startIndex, endIndex);
+  const handlePageSizeChange = (value) => {
+    saveListConfig({ pageSize: value, current: 1 });
   };
 
-  // 筛选菜单
-  const filterMenu = (
-    <Menu
-      selectedKeys={[statusFilter]}
-      onClick={({ key }) => setStatusFilter(key)}
-    >
-      <Menu.Item key="all">全部状态</Menu.Item>
-      <Menu.Item key="active">启用</Menu.Item>
-      <Menu.Item key="inactive">禁用</Menu.Item>
-    </Menu>
-  );
+  const handlePageChange = (page, pageSize) => {
+    saveListConfig({ current: page, pageSize });
+  };
 
-  // 排序菜单
-  const sortMenu = (
-    <Menu
-      selectedKeys={[sortBy]}
-      onClick={({ key }) => setSortBy(key)}
-    >
-      <Menu.Item key="name">按名称排序</Menu.Item>
-      <Menu.Item key="createTime">按创建时间排序</Menu.Item>
-      <Menu.Item key="updateTime">按更新时间排序</Menu.Item>
-    </Menu>
-  );
+  // 获取排序后的功能列表
+  const getSortedFeatures = () => {
+    const sorted = [...mockFeatures].sort((a, b) => {
+      let aValue, bValue;
+      
+      switch (listConfig.sortBy) {
+        case 'name':
+          aValue = a.name || '';
+          bValue = b.name || '';
+          return listConfig.sortOrder === 'ascend' 
+            ? aValue.localeCompare(bValue, 'zh-CN')
+            : bValue.localeCompare(aValue, 'zh-CN');
+            
+        case 'createdAt':
+          aValue = new Date(a.createdAt || 0).getTime();
+          bValue = new Date(b.createdAt || 0).getTime();
+          return listConfig.sortOrder === 'ascend' ? aValue - bValue : bValue - aValue;
+          
+        case 'interfaceCount':
+          aValue = a.interfaceCount || 0;
+          bValue = b.interfaceCount || 0;
+          return listConfig.sortOrder === 'ascend' ? aValue - bValue : bValue - aValue;
+          
+        case 'active':
+          aValue = a.active ? 1 : 0;
+          bValue = b.active ? 1 : 0;
+          return listConfig.sortOrder === 'ascend' ? aValue - bValue : bValue - aValue;
+          
+        default:
+          return 0;
+      }
+    });
+    
+    return sorted;
+  };
 
-  const getStatusText = (filter) => {
-    switch (filter) {
-      case 'active': return '启用';
-      case 'inactive': return '禁用';
-      default: return '全部状态';
-    }
+  // 获取分页后的功能列表
+  const getPaginatedFeatures = () => {
+    const sortedFeatures = getSortedFeatures();
+    const startIndex = (listConfig.current - 1) * listConfig.pageSize;
+    const endIndex = startIndex + listConfig.pageSize;
+    return sortedFeatures.slice(startIndex, endIndex);
   };
 
-  const getSortText = (sort) => {
-    switch (sort) {
-      case 'createTime': return '创建时间';
-      case 'updateTime': return '更新时间';
-      default: return '名称';
-    }
+  // 渲染功能模块卡片
+  const renderFeatureCard = (feature) => {
+    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 }}>
+        <Badge.Ribbon 
+          text={feature.active ? '已启用' : '已禁用'} 
+          color={feature.active ? '#52c41a' : '#f5222d'}
+          style={{ display: 'block' }}
+        >
+          <Card
+            className={`feature-card ${!feature.active ? 'inactive-feature' : ''}`}
+            onClick={handleCardClick}
+            style={{ cursor: 'pointer' }}
+            actions={[
+              <Tooltip title="管理接口">
+                <ApiOutlined key="interfaces" onClick={(e) => {
+                  e.stopPropagation();
+                  viewInterfaces(feature);
+                }} />
+              </Tooltip>,
+              <Tooltip title="编辑功能">
+                <EditOutlined key="edit" onClick={(e) => {
+                  e.stopPropagation();
+                  openModal(feature);
+                }} />
+              </Tooltip>,
+              <Tooltip title="删除功能">
+                <DeleteOutlined key="delete" onClick={(e) => {
+                  e.stopPropagation();
+                  deleteFeature(feature.id);
+                }} />
+              </Tooltip>,
+              <Tooltip title="导出配置">
+                <ExportOutlined key="export" onClick={(e) => {
+                  e.stopPropagation();
+                  exportFeatureConfig(feature);
+                }} />
+              </Tooltip>
+            ]}
+          >
+            <div className="feature-card-content">
+              <div className="feature-name">
+                <Title level={4} ellipsis={{ tooltip: feature.name }}>
+                  {feature.name}
+                </Title>
+
+                <Switch
+                  checked={feature.active}
+                  onChange={handleSwitchClick}
+                  size="small"
+                  onClick={() => {event.stopPropagation()}}
+                />
+              </div>
+              
+              <Paragraph className="feature-description" ellipsis={{ rows: 2, expandable: false, tooltip: feature.description }}>
+                {feature.description || '无描述'}
+              </Paragraph>
+              
+              <div className="feature-stat">
+                <span>
+                  <InfoCircleOutlined /> {feature.interfaceCount || 0} 个接口
+                </span>
+                <span className="feature-date">
+                  <CalendarOutlined /> {formattedDate}
+                </span>
+              </div>
+            </div>
+          </Card>
+        </Badge.Ribbon>
+      </Col>
+    );
   };
 
   return (
     <AppLayout>
-      <div className="mock-data-container">
+      <div className="page-container">
         {/* V2版本标识 */}
         <div style={{ 
           position: 'absolute', 
@@ -380,308 +532,193 @@ const MockData = () => {
           fontSize: '12px',
           zIndex: 1000
         }}>
-          重构后版本 V2
+          V2版本
         </div>
         
-        {/* 头部操作栏 */}
-        <Card className="header-card" bordered={false}>
-          <div className="header-content">
-            <div className="header-left">
-              <h2 className="page-title">功能模块管理</h2>
-              <div className="search-container">
-                <Input
-                  placeholder="搜索功能模块名称或描述"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  style={{ width: 300 }}
-                  prefix={<SearchOutlined />}
-                  allowClear
-                  onClear={handleClearSearch}
-                />
-              </div>
+        <div className="page-title-bar">
+          <div>
+            <h1 className="page-title">功能模块管理</h1>
+            <div className="page-description">
+              创建和管理功能模块，为每个功能配置独立的接口
+            </div>
+          </div>
+          <div className="page-actions">
+            <Button 
+              type="primary" 
+              icon={<PlusOutlined />}
+              onClick={() => openModal()}
+            >
+              新建功能
+            </Button>
+            <Button 
+              type="primary" 
+              icon={<ExportOutlined />}
+              onClick={importFeatureConfig}
+              style={{ backgroundColor: '#52c41a', borderColor: '#52c41a' }}
+            >
+              导入功能
+            </Button>
+          </div>
+        </div>
+
+        {/* 排序和分页控制栏 */}
+        {mockFeatures.length > 0 && !loading && (
+          <div style={{ 
+            marginBottom: 16, 
+            padding: '12px 16px', 
+            background: '#fafafa', 
+            borderRadius: '6px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            gap: '8px'
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>
+              <span style={{ fontSize: '14px', color: '#666' }}>
+                <SortAscendingOutlined /> 排序：
+              </span>
+              <Select
+                value={listConfig.sortBy}
+                onChange={handleSortChange}
+                style={{ width: 120 }}
+                size="small"
+              >
+                <Select.Option value="name">名称</Select.Option>
+                <Select.Option value="createdAt">创建时间</Select.Option>
+                <Select.Option value="interfaceCount">接口数量</Select.Option>
+                <Select.Option value="active">状态</Select.Option>
+              </Select>
+              <Select
+                value={listConfig.sortOrder}
+                onChange={handleSortOrderChange}
+                style={{ width: 80 }}
+                size="small"
+              >
+                <Select.Option value="ascend">升序</Select.Option>
+                <Select.Option value="descend">降序</Select.Option>
+              </Select>
             </div>
             
-            <div className="header-right">
-              <Space size="middle">
-                <Tooltip title="刷新数据">
-                  <Button 
-                    icon={<ReloadOutlined />} 
-                    onClick={handleRefresh}
-                    loading={loading}
-                  />
-                </Tooltip>
-                
-                <Dropdown overlay={filterMenu} trigger={['click']}>
-                  <Button icon={<FilterOutlined />}>
-                    {getStatusText(statusFilter)}
-                  </Button>
-                </Dropdown>
-                
-                <Dropdown overlay={sortMenu} trigger={['click']}>
-                  <Button icon={<SortAscendingOutlined />}>
-                    按{getSortText(sortBy)}
-                  </Button>
-                </Dropdown>
-                
-                <Button 
-                  icon={<ExportOutlined />}
-                  onClick={handleExport}
-                  loading={exportLoading}
-                >
-                  导出
-                </Button>
-                
-                <div style={{ position: 'relative' }}>
-                  <input
-                    type="file"
-                    accept=".json"
-                    onChange={handleImport}
-                    style={{ display: 'none' }}
-                    id="import-input"
-                  />
-                  <Button 
-                    icon={<ImportOutlined />}
-                    loading={importLoading}
-                    onClick={() => document.getElementById('import-input').click()}
-                  >
-                    导入
-                  </Button>
-                </div>
-                
-                <Button 
-                  type="primary" 
-                  icon={<PlusOutlined />}
-                  onClick={handleAddFeature}
-                >
-                  添加功能模块
-                </Button>
-              </Space>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <span style={{ fontSize: '14px', color: '#666' }}>每页显示：</span>
+              <Select
+                value={listConfig.pageSize}
+                onChange={handlePageSizeChange}
+                style={{ width: 80 }}
+                size="small"
+              >
+                <Select.Option value={8}>8</Select.Option>
+                <Select.Option value={12}>12</Select.Option>
+                <Select.Option value={16}>16</Select.Option>
+                <Select.Option value={24}>24</Select.Option>
+              </Select>
+              <span style={{ fontSize: '14px', color: '#999' }}>
+                共 {mockFeatures.length} 个功能模块
+              </span>
             </div>
           </div>
-        </Card>
-
-        {/* 统计信息卡片 */}
-        <Card className="stats-card" bordered={false}>
-          <Row gutter={[24, 24]}>
-            <Col xs={24} sm={8} md={6}>
-              <div className="stat-item">
-                <div className="stat-number">{features.length}</div>
-                <div className="stat-label">总功能模块</div>
-              </div>
-            </Col>
-            <Col xs={24} sm={8} md={6}>
-              <div className="stat-item">
-                <div className="stat-number text-success">
-                  {features.filter(f => f.active !== false).length}
-                </div>
-                <div className="stat-label">启用模块</div>
-              </div>
-            </Col>
-            <Col xs={24} sm={8} md={6}>
-              <div className="stat-item">
-                <div className="stat-number text-warning">
-                  {features.filter(f => f.active === false).length}
-                </div>
-                <div className="stat-label">禁用模块</div>
-              </div>
-            </Col>
-            <Col xs={24} sm={8} md={6}>
-              <div className="stat-item">
-                <div className="stat-number text-info">{filteredFeatures.length}</div>
-                <div className="stat-label">筛选结果</div>
-              </div>
-            </Col>
-          </Row>
-        </Card>
-
-        {/* 功能模块列表 */}
-        <Card className="list-card" bordered={false} title="功能模块列表">
+        )}
+        
+        <div className="feature-list-container">
           {loading ? (
-            <div className="loading-container">
-              <Row gutter={[16, 16]}>
-                {[...Array(6)].map((_, index) => (
-                  <Col xs={24} sm={12} md={8} lg={6} key={index}>
-                    <Card loading />
-                  </Col>
-                ))}
-              </Row>
-            </div>
-          ) : getPaginatedFeatures().length === 0 ? (
-            <div className="empty-state">
-              <div className="empty-icon">📦</div>
-              <div className="empty-text">
-                {searchTerm || statusFilter !== 'all' ? '没有找到匹配的功能模块' : '暂无功能模块'}
-              </div>
-              <div className="empty-description">
-                {searchTerm || statusFilter !== 'all' ? '尝试调整搜索条件或筛选器' : '点击上方按钮创建你的第一个功能模块'}
-              </div>
-              {!searchTerm && statusFilter === 'all' && (
-                <Button 
-                  type="primary" 
-                  icon={<PlusOutlined />}
-                  onClick={handleAddFeature}
-                  style={{ marginTop: 16 }}
-                >
-                  创建功能模块
-                </Button>
-              )}
+            <div className="loading">
+              <div className="loading-spinner"></div>
+              <div>正在加载功能模块...</div>
             </div>
-          ) : (
+          ) : mockFeatures.length > 0 ? (
             <>
               <Row gutter={[16, 16]}>
-                {getPaginatedFeatures().map(feature => (
-                  <Col xs={24} sm={12} md={8} lg={6} key={feature.id}>
-                    <Card 
-                      className={`feature-card ${feature.active === false ? 'inactive' : ''}`}
-                      hoverable
-                      actions={[
-                        <Tooltip title="编辑">
-                          <EditOutlined 
-                            key="edit"
-                            onClick={() => handleEditFeature(feature)}
-                          />
-                        </Tooltip>,
-                        <Tooltip title="接口管理">
-                          <SettingOutlined 
-                            key="setting"
-                            onClick={() => handleNavigateToInterfaces(feature.id)}
-                          />
-                        </Tooltip>,
-                        <Popconfirm
-                          title="确定要删除这个功能模块吗？"
-                          description="删除后将无法恢复，请谨慎操作。"
-                          onConfirm={() => handleDeleteFeature(feature.id)}
-                          okText="确定"
-                          cancelText="取消"
-                        >
-                          <Tooltip title="删除">
-                            <DeleteOutlined key="delete" className="text-danger" />
-                          </Tooltip>
-                        </Popconfirm>
-                      ]}
-                    >
-                      <div className="feature-card-header">
-                        <div className="feature-card-title">
-                          <span className="feature-name">{feature.name}</span>
-                          <Switch
-                            checked={feature.active !== false}
-                            onChange={() => handleToggleActive(feature.id, feature.active !== false)}
-                            size="small"
-                            className="feature-switch"
-                          />
-                        </div>
-                        <Badge 
-                          status={feature.active === false ? 'error' : 'success'} 
-                          text={feature.active === false ? '已禁用' : '已启用'}
-                          className="feature-status"
-                        />
-                      </div>
-                      
-                      <div className="feature-card-content">
-                        {feature.description ? (
-                          <p className="feature-description">
-                            {feature.description}
-                          </p>
-                        ) : (
-                          <p className="feature-description empty">
-                            暂无描述
-                          </p>
-                        )}
-                        
-                        <div className="feature-meta">
-                          {feature.createTime && (
-                            <div className="meta-item">
-                              <span className="meta-label">创建：</span>
-                              <span className="meta-value">
-                                {new Date(feature.createTime).toLocaleDateString()}
-                              </span>
-                            </div>
-                          )}
-                          {feature.updateTime && feature.updateTime !== feature.createTime && (
-                            <div className="meta-item">
-                              <span className="meta-label">更新：</span>
-                              <span className="meta-value">
-                                {new Date(feature.updateTime).toLocaleDateString()}
-                              </span>
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </Card>
-                  </Col>
-                ))}
+                {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
               </Row>
               
-              {/* 分页 */}
-              {filteredFeatures.length > pageSize && (
-                <div className="pagination-container">
+              {/* 分页组件 */}
+              {mockFeatures.length > listConfig.pageSize && (
+                <div style={{ 
+                  marginTop: 24, 
+                  textAlign: 'center',
+                  padding: '16px',
+                  borderTop: '1px solid #f0f0f0'
+                }}>
                   <Pagination
-                    current={currentPage}
-                    pageSize={pageSize}
-                    total={filteredFeatures.length}
-                    showSizeChanger
-                    showQuickJumper
+                    current={listConfig.current}
+                    pageSize={listConfig.pageSize}
+                    total={mockFeatures.length}
+                    onChange={handlePageChange}
+                    onShowSizeChange={handlePageChange}
+                    showSizeChanger={true}
+                    showQuickJumper={true}
                     showTotal={(total, range) => 
-                      `共 ${total} 个功能模块，显示第 ${range[0]}-${range[1]} 个`
+                      `第 ${range[0]}-${range[1]} 条，共 ${total} 个功能模块`
                     }
-                    pageSizeOptions={['8', '12', '24', '48']}
-                    onChange={(page, size) => {
-                      setCurrentPage(page);
-                      setPageSize(size);
-                    }}
+                    pageSizeOptions={['8', '12', '16', '24']}
+                    size="default"
                   />
                 </div>
               )}
             </>
+          ) : (
+            <div className="empty-data">
+              <div className="empty-icon">📂</div>
+              <div className="empty-text">暂无功能，请点击"新建功能"按钮创建</div>
+              <div className="empty-actions">
+                <button className="create-button" onClick={() => openModal()}>
+                  创建新功能
+                </button>
+                <button className="import-button-large" onClick={importFeatureConfig}>
+                  导入已有功能
+                </button>
+              </div>
+            </div>
           )}
-        </Card>
-
-        {/* 添加/编辑功能模块模态框 */}
-        <Modal
-          title={editingFeature ? '编辑功能模块' : '添加功能模块'}
-          open={modalVisible}
-          onOk={handleSubmit}
-          onCancel={handleCancel}
-          okText={editingFeature ? '保存' : '创建'}
-          cancelText="取消"
-          destroyOnClose
+        </div>
+      </div>
+      
+      <Modal
+        title={currentFeature ? '编辑功能' : '新建功能'}
+        open={showModal}
+        onCancel={closeModal}
+        footer={null}
+        destroyOnClose
+        width={500}
+      >
+        <Form 
+          form={form}
+          layout="vertical"
+          onFinish={handleSubmit}
+          initialValues={{
+            name: '',
+            description: '',
+            active: true
+          }}
         >
-          <Form
-            form={form}
-            layout="vertical"
-            initialValues={{
-              name: '',
-              description: ''
-            }}
+          <Form.Item
+            name="name"
+            label="功能名称"
+            rules={[{ required: true, message: '请输入功能名称' }]}
           >
-            <Form.Item
-              name="name"
-              label="功能模块名称"
-              rules={[
-                { required: true, message: '请输入功能模块名称' },
-                { max: 50, message: '名称长度不能超过50个字符' }
-              ]}
-            >
-              <Input placeholder="请输入功能模块名称" />
-            </Form.Item>
-            
-            <Form.Item
-              name="description"
-              label="描述"
-              rules={[
-                { max: 200, message: '描述长度不能超过200个字符' }
-              ]}
-            >
-              <TextArea 
-                placeholder="请输入功能模块描述（可选）" 
-                rows={3}
-                showCount
-                maxLength={200}
-              />
-            </Form.Item>
-          </Form>
-        </Modal>
-      </div>
+            <Input placeholder="请输入功能名称" />
+          </Form.Item>
+          
+          <Form.Item
+            name="description"
+            label="功能描述"
+          >
+            <TextArea 
+              placeholder="请输入功能描述（可选）" 
+              autoSize={{ minRows: 3, maxRows: 6 }}
+            />
+          </Form.Item>
+          <div className="form-actions">
+            <Button onClick={closeModal}>
+              取消
+            </Button>
+            <Button type="primary" htmlType="submit" loading={loading}>
+              确定
+            </Button>
+          </div>
+        </Form>
+      </Modal>
     </AppLayout>
   );
 };