whistle.mock-plugins 1.1.3-beta.3 → 1.1.3-dev.10

package/ui/src/pages/MockDataV2.js

@@ -1,48 +1,36 @@
 /**
- * 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/flushCache', { method: 'POST' });
+    const response = await axios.get(`/_flush_cache`);
+    return response.data;
   } catch (error) {
     console.error('刷新缓存失败:', error);
     throw error;
   }
 };
 
-
 const MockData = () => {
   const history = useHistory();
   const [mockFeatures, setMockFeatures] = useState([]);
   const [showModal, setShowModal] = useState(false);
   const [currentFeature, setCurrentFeature] = useState(null);
-  const [formData, setFormData] = useState({
-    name: '',
-    description: '',
-    active: true
-  });
+
   const [loading, setLoading] = useState(true);
   const [form] = Form.useForm();
 
@@ -91,353 +79,435 @@ const MockData = () => {
   };
 
   const openModal = (feature = null) => {
-    setCurrentFeature(feature);
     if (feature) {
-      setFormData({
-        name: feature.name,
-        description: feature.description || '',
-        active: feature.active !== false
-      });
+      setCurrentFeature(feature);
       form.setFieldsValue({
         name: feature.name,
-        description: feature.description || '',
+        description: feature.description,
         active: feature.active !== false
       });
     } else {
-      setFormData({
-        name: '',
-        description: '',
+      setCurrentFeature(null);
+      form.resetFields();
+      form.setFieldsValue({
         active: true
       });
-      form.resetFields();
     }
     setShowModal(true);
   };
 
-  const handleSubmit = async (values) => {
-    console.log('表单提交数据:', values);
-    try {
-      const submitData = {
-        name: values.name.trim(),
-        description: values.description?.trim() || '',
-        active: values.active !== false
-      };
-
-      console.log('处理后的提交数据:', submitData);
+  const closeModal = () => {
+    setShowModal(false);
+  };
 
-      if (currentFeature) {
-        // 更新功能模块
-        const response = await fetch(`/cgi-bin/features?id=${currentFeature.id}`, {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(submitData),
-        });
-        
-        const result = await response.json();
-        console.log('更新响应:', result);
-        
-        if (result.code === 0) {
-          message.success('功能模块更新成功');
-          setShowModal(false);
-          fetchFeatures();
-          
-          // 刷新缓存
-          await flushCache();
-        } else {
-          message.error('功能模块更新失败: ' + (result.message || '未知错误'));
-        }
-      } else {
-        // 创建新功能模块
-        const response = await fetch('/cgi-bin/features', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(submitData),
-        });
-        
-        const result = await response.json();
-        console.log('创建响应:', result);
-        
-        if (result.code === 0) {
-          message.success('功能模块创建成功');
-          setShowModal(false);
-          fetchFeatures();
-          
-          // 刷新缓存
-          await flushCache();
-        } else {
-          message.error('功能模块创建失败: ' + (result.message || '未知错误'));
-        }
-      }
+  // 更新成功后刷新缓存
+  const refreshCacheAfterUpdate = async () => {
+    try {
+      await flushCache();
+      // 不显示提示，避免干扰主操作的反馈
     } catch (error) {
-      console.error('操作失败:', error);
-      message.error('操作失败: ' + error.message);
+      // 记录错误但不影响用户体验
+      console.error('刷新缓存失败，可能需要等待缓存自动过期:', error);
     }
   };
 
-  const handleDelete = async (id) => {
+  const handleSubmit = async (values) => {
     try {
-      const response = await fetch(`/cgi-bin/features?id=${id}`, {
-        method: 'DELETE',
+      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(featureData)
       });
       
       const result = await response.json();
+      
       if (result.code === 0) {
-        message.success('功能模块删除成功');
+        // 刷新功能列表
+        message.success(currentFeature ? '功能模块更新成功' : '功能模块创建成功');
         fetchFeatures();
+        closeModal();
         
         // 刷新缓存
-        await flushCache();
+        refreshCacheAfterUpdate();
       } else {
-        message.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 handleToggleActive = async (id, currentActive) => {
     try {
       const response = await fetch(`/cgi-bin/features?id=${id}`, {
-        method: 'PUT',
+        method: 'PATCH',
         headers: {
-          'Content-Type': 'application/json',
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
           active: !currentActive
-        }),
+        })
       });
       
       const result = await response.json();
+      
       if (result.code === 0) {
-        message.success(`功能模块${!currentActive ? '启用' : '禁用'}成功`);
-        fetchFeatures();
+        message.success(`${currentActive ? '禁用' : '启用'}功能模块成功`);
+        // 更新本地状态
+        setMockFeatures(mockFeatures.map(feature => 
+          feature.id === id ? { ...feature, active: !currentActive } : feature
+        ));
         
-        // 刷新缓存
-        await flushCache();
+        // 刷新缓存 - 功能启用状态变化是最关键的需要刷新缓存的操作
+        refreshCacheAfterUpdate();
       } else {
-        message.error(`功能模块${!currentActive ? '启用' : '禁用'}失败: ` + (result.message || '未知错误'));
+        message.error(`${currentActive ? '禁用' : '启用'}功能模块失败: ${result.message}`);
       }
     } catch (error) {
-      console.error(`${!currentActive ? '启用' : '禁用'}失败:`, error);
-      message.error(`${!currentActive ? '启用' : '禁用'}失败: ` + error.message);
+      console.error(`${currentActive ? '禁用' : '启用'}功能模块错误:`, error);
+      message.error(`操作失败: ${error.message}`);
     }
   };
 
-  const gotoInterfaceManagement = (featureId) => {
-    history.push(`/interface/${featureId}`);
+  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 viewInterfaces = (feature) => {
+    // 导航到该功能的接口列表页面
+    history.push(`/interface/${feature.id}`);
   };
 
-  // 导出功能配置
-  const exportFeatureConfig = async () => {
+  const exportFeatureConfig = async (feature) => {
     try {
-      const response = await fetch('/cgi-bin/export-features');
+      // 获取该功能的所有接口
+      const response = await fetch(`/cgi-bin/interfaces?featureId=${feature.id}`);
       const result = await response.json();
       
-      if (result.code === 0) {
-        // 创建下载链接
-        const dataStr = JSON.stringify(result.data, null, 2);
-        const dataBlob = new Blob([dataStr], { type: 'application/json' });
-        const url = URL.createObjectURL(dataBlob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = `whistle-mock-features-${new Date().getTime()}.json`;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(url);
-        
-        message.success('功能配置导出成功');
-      } else {
-        message.error('导出失败: ' + (result.message || '未知错误'));
-      }
+      // 创建完整配置
+      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 exportFileDefaultName = `whistle-mock-feature-${feature.id}.json`;
+      
+      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);
     }
   };
 
-  // 导入功能配置
   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;
       
-      try {
-        const text = await file.text();
-        const data = JSON.parse(text);
-        
-        const response = await fetch('/cgi-bin/import-features', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(data),
-        });
-        
-        const result = await response.json();
-        if (result.code === 0) {
-          message.success('功能配置导入成功');
-          fetchFeatures();
+      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)
+          });
           
-          // 刷新缓存
-          await flushCache();
-        } else {
-          message.error('导入失败: ' + (result.message || '未知错误'));
+          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);
-      }
+      };
+      
+      reader.readAsText(file);
     };
+    
     input.click();
   };
 
-  // 搜索和筛选状态
-  const [searchText, setSearchText] = useState('');
-  const [filterStatus, setFilterStatus] = useState('all'); // all, active, inactive
+  // 排序处理
+  const handleSortChange = (value) => {
+    saveListConfig({ sortBy: value, current: 1 });
+  };
 
-  // 筛选和排序数据
-  const getFilteredAndSortedData = () => {
-    let filtered = [...mockFeatures];
+  const handleSortOrderChange = (value) => {
+    saveListConfig({ sortOrder: value, current: 1 });
+  };
 
-    // 文本搜索
-    if (searchText) {
-      const searchLower = searchText.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.name.toLowerCase().includes(searchLower) ||
-        (item.description && item.description.toLowerCase().includes(searchLower))
-      );
-    }
+  const handlePageSizeChange = (value) => {
+    saveListConfig({ pageSize: value, current: 1 });
+  };
 
-    // 状态筛选
-    if (filterStatus === 'active') {
-      filtered = filtered.filter(item => item.active !== false);
-    } else if (filterStatus === 'inactive') {
-      filtered = filtered.filter(item => item.active === false);
-    }
+  const handlePageChange = (page, pageSize) => {
+    saveListConfig({ current: page, pageSize });
+  };
 
-    // 排序
-    filtered.sort((a, b) => {
+  // 获取排序后的功能列表
+  const getSortedFeatures = () => {
+    const sorted = [...mockFeatures].sort((a, b) => {
       let aValue, bValue;
       
       switch (listConfig.sortBy) {
         case 'name':
           aValue = a.name || '';
           bValue = b.name || '';
-          break;
+          return listConfig.sortOrder === 'ascend' 
+            ? aValue.localeCompare(bValue, 'zh-CN')
+            : bValue.localeCompare(aValue, 'zh-CN');
+            
         case 'createdAt':
-          aValue = new Date(a.createdAt || 0);
-          bValue = new Date(b.createdAt || 0);
-          break;
+          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;
-          break;
+          return listConfig.sortOrder === 'ascend' ? aValue - bValue : bValue - aValue;
+          
         case 'active':
-          aValue = a.active === false ? 0 : 1;
-          bValue = b.active === false ? 0 : 1;
-          break;
+          aValue = a.active ? 1 : 0;
+          bValue = b.active ? 1 : 0;
+          return listConfig.sortOrder === 'ascend' ? aValue - bValue : bValue - aValue;
+          
         default:
-          aValue = a.name || '';
-          bValue = b.name || '';
-      }
-
-      if (listConfig.sortOrder === 'descend') {
-        return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
-      } else {
-        return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
+          return 0;
       }
     });
-
-    return filtered;
+    
+    return sorted;
   };
 
-  const filteredData = getFilteredAndSortedData();
-
-  // 分页计算
-  const startIndex = (listConfig.current - 1) * listConfig.pageSize;
-  const endIndex = startIndex + listConfig.pageSize;
-  const paginatedData = filteredData.slice(startIndex, endIndex);
-
-  // 排序菜单
-  const sortMenu = (
-    <Menu onClick={({ key }) => {
-      const [sortBy, sortOrder] = key.split('-');
-      saveListConfig({ sortBy, sortOrder, current: 1 });
-    }}>
-      <Menu.Item key="name-ascend">名称 (A-Z)</Menu.Item>
-      <Menu.Item key="name-descend">名称 (Z-A)</Menu.Item>
-      <Menu.Item key="createdAt-descend">创建时间 (新-旧)</Menu.Item>
-      <Menu.Item key="createdAt-ascend">创建时间 (旧-新)</Menu.Item>
-      <Menu.Item key="interfaceCount-descend">接口数量 (多-少)</Menu.Item>
-      <Menu.Item key="interfaceCount-ascend">接口数量 (少-多)</Menu.Item>
-      <Menu.Item key="active-descend">状态 (启用优先)</Menu.Item>
-      <Menu.Item key="active-ascend">状态 (禁用优先)</Menu.Item>
-    </Menu>
-  );
+  // 获取分页后的功能列表
+  const getPaginatedFeatures = () => {
+    const sortedFeatures = getSortedFeatures();
+    const startIndex = (listConfig.current - 1) * listConfig.pageSize;
+    const endIndex = startIndex + listConfig.pageSize;
+    return sortedFeatures.slice(startIndex, endIndex);
+  };
 
+  // 渲染功能模块卡片
   const renderFeatureCard = (feature) => {
-    const isActive = feature.active !== false;
+    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}>
+      <Col xs={24} sm={12} md={8} lg={6} key={feature.id} style={{ marginBottom: 16 }}>
         <Badge.Ribbon 
-          text={isActive ? "启用" : "禁用"} 
-          color={isActive ? "green" : "volcano"}
+          text={feature.active ? '已启用' : '已禁用'} 
+          color={feature.active ? '#52c41a' : '#f5222d'}
+          style={{ display: 'block' }}
         >
           <Card
-            className={`feature-card ${!isActive ? 'inactive' : ''}`}
-            hoverable
+            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={() => openModal(feature)} />
+                <EditOutlined key="edit" onClick={(e) => {
+                  e.stopPropagation();
+                  openModal(feature);
+                }} />
               </Tooltip>,
-              <Tooltip title="管理接口">
-                <SettingOutlined key="setting" onClick={() => gotoInterfaceManagement(feature.id)} />
+              <Tooltip title="删除功能">
+                <DeleteOutlined key="delete" onClick={(e) => {
+                  e.stopPropagation();
+                  deleteFeature(feature.id);
+                }} />
               </Tooltip>,
-              <Popconfirm
-                title="确定删除此功能模块吗？"
-                description="删除后相关的所有接口配置也会被删除，且无法恢复。"
-                onConfirm={() => handleDelete(feature.id)}
-                okText="确定"
-                cancelText="取消"
-              >
-                <Tooltip title="删除功能">
-                  <DeleteOutlined key="delete" style={{ color: '#ff4d4f' }} />
-                </Tooltip>
-              </Popconfirm>,
+              <Tooltip title="导出配置">
+                <ExportOutlined key="export" onClick={(e) => {
+                  e.stopPropagation();
+                  exportFeatureConfig(feature);
+                }} />
+              </Tooltip>
             ]}
           >
-            <div className="feature-card-header">
+            <div className="feature-card-content">
               <div className="feature-name">
-                {feature.name}
-              </div>
-              <Switch
-                checked={isActive}
-                onChange={() => handleToggleActive(feature.id, isActive)}
-                size="small"
-              />
-            </div>
-            <div className="feature-description">
-              {feature.description || '暂无描述'}
-            </div>
-            <div className="feature-stats">
-              <div className="stat-item">
-                <span className="stat-label">接口数量:</span>
-                <span className="stat-value">{feature.interfaceCount || 0}</span>
+                <Title level={4} ellipsis={{ tooltip: feature.name }}>
+                  {feature.name}
+                </Title>
+
+                <Switch
+                  checked={feature.active}
+                  onChange={handleSwitchClick}
+                  size="small"
+                  onClick={() => {event.stopPropagation()}}
+                />
               </div>
-              <div className="stat-item">
-                <span className="stat-label">创建时间:</span>
-                <span className="stat-value">
-                  {feature.createdAt ? new Date(feature.createdAt).toLocaleDateString() : '未知'}
+              
+              <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>
@@ -462,7 +532,7 @@ const MockData = () => {
           fontSize: '12px',
           zIndex: 1000
         }}>
-          重构后版本 V2
+          V2版本
         </div>
         
         <div className="page-title-bar">
@@ -493,208 +563,162 @@ const MockData = () => {
 
         {/* 排序和分页控制栏 */}
         {mockFeatures.length > 0 && !loading && (
-          <Card className="filter-controls" bordered={false}>
-            <div className="control-row">
-              <div className="search-controls">
-                <Input
-                  placeholder="搜索功能名称或描述"
-                  prefix={<SearchOutlined />}
-                  value={searchText}
-                  onChange={(e) => setSearchText(e.target.value)}
-                  style={{ width: 240 }}
-                  allowClear
-                />
-                <Select
-                  value={filterStatus}
-                  onChange={setFilterStatus}
-                  style={{ width: 120 }}
-                >
-                  <Option value="all">全部状态</Option>
-                  <Option value="active">已启用</Option>
-                  <Option value="inactive">已禁用</Option>
-                </Select>
-              </div>
-              
-              <div className="action-controls">
-                <Space>
-                  <Dropdown overlay={sortMenu} trigger={['click']}>
-                    <Button icon={<SortAscendingOutlined />}>
-                      排序 
-                    </Button>
-                  </Dropdown>
-                  <Button 
-                    icon={<DownloadOutlined />}
-                    onClick={exportFeatureConfig}
-                  >
-                    导出配置
-                  </Button>
-                  <Button 
-                    icon={<ReloadOutlined />}
-                    onClick={fetchFeatures}
-                    loading={loading}
-                  >
-                    刷新
-                  </Button>
-                  {(searchText || filterStatus !== 'all') && (
-                    <Button 
-                      icon={<ClearOutlined />}
-                      onClick={() => {
-                        setSearchText('');
-                        setFilterStatus('all');
-                      }}
-                    >
-                      清除筛选
-                    </Button>
-                  )}
-                </Space>
-              </div>
+          <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="result-info">
-              <Space>
-                <span>
-                  共 {mockFeatures.length} 个功能模块
-                  {filteredData.length !== mockFeatures.length && (
-                    <span>，筛选后 {filteredData.length} 个</span>
-                  )}
-                </span>
-                <Badge 
-                  count={mockFeatures.filter(f => f.active !== false).length} 
-                  style={{ backgroundColor: '#52c41a' }} 
-                  title="启用的功能数量"
-                />
-                <Badge 
-                  count={mockFeatures.filter(f => f.active === false).length} 
-                  style={{ backgroundColor: '#ff4d4f' }} 
-                  title="禁用的功能数量"
-                />
-              </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>
-          </Card>
+          </div>
         )}
-
-        {/* 功能模块列表 */}
+        
         <div className="feature-list-container">
           {loading ? (
-            <div className="loading-container">
-              <Row gutter={[16, 16]}>
-                {[1, 2, 3, 4].map(i => (
-                  <Col xs={24} sm={12} md={8} lg={6} key={i}>
-                    <Card loading style={{ height: 200 }} />
-                  </Col>
-                ))}
-              </Row>
+            <div className="loading">
+              <div className="loading-spinner"></div>
+              <div>正在加载功能模块...</div>
             </div>
-          ) : mockFeatures.length === 0 ? (
-            <Alert
-              message="暂无功能模块"
-              description="点击 '新建功能' 按钮创建第一个功能模块"
-              type="info"
-              showIcon
-              style={{ textAlign: 'center', padding: '60px 20px' }}
-            />
-          ) : filteredData.length === 0 ? (
-            <Alert
-              message="无匹配结果"
-              description="请调整搜索条件或筛选设置"
-              type="warning"
-              showIcon
-              style={{ textAlign: 'center', padding: '60px 20px' }}
-            />
-          ) : (
+          ) : mockFeatures.length > 0 ? (
             <>
-              <Row gutter={[16, 16]} className="feature-grid">
-                {paginatedData.map(renderFeatureCard)}
+              <Row gutter={[16, 16]}>
+                {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
               </Row>
               
-              {/* 分页控件 */}
-              {filteredData.length > listConfig.pageSize && (
-                <div className="pagination-container">
+              {/* 分页组件 */}
+              {mockFeatures.length > listConfig.pageSize && (
+                <div style={{ 
+                  marginTop: 24, 
+                  textAlign: 'center',
+                  padding: '16px',
+                  borderTop: '1px solid #f0f0f0'
+                }}>
                   <Pagination
                     current={listConfig.current}
                     pageSize={listConfig.pageSize}
-                    total={filteredData.length}
-                    showSizeChanger
-                    showQuickJumper
+                    total={mockFeatures.length}
+                    onChange={handlePageChange}
+                    onShowSizeChange={handlePageChange}
+                    showSizeChanger={true}
+                    showQuickJumper={true}
                     showTotal={(total, range) => 
-                      `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
+                      `第 ${range[0]}-${range[1]} 条，共 ${total} 个功能模块`
                     }
                     pageSizeOptions={['8', '12', '16', '24']}
-                    onChange={(current, pageSize) => {
-                      saveListConfig({ current, pageSize });
-                    }}
+                    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>
           )}
         </div>
-
-        {/* 新建/编辑功能模块弹窗 */}
-        <Modal
-          title={currentFeature ? '编辑功能模块' : '新建功能模块'}
-          open={showModal}
-          onCancel={() => setShowModal(false)}
-          footer={null}
-          destroyOnClose
+      </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"
-            onFinish={handleSubmit}
-            initialValues={{
-              name: '',
-              description: '',
-              active: true
-            }}
+          <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.Item
-              name="active"
-              label="启用状态"
-              valuePropName="checked"
-            >
-              <Switch checkedChildren="启用" unCheckedChildren="禁用" />
-            </Form.Item>
-            
-            <Form.Item className="form-actions">
-              <Space>
-                <Button onClick={() => setShowModal(false)}>
-                  取消
-                </Button>
-                <Button type="primary" htmlType="submit">
-                  {currentFeature ? '保存' : '创建'}
-                </Button>
-              </Space>
-            </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>
   );
 };