whistle.mock-plugins 1.1.3-beta.2 → 1.1.3-dev.4

package/ui/src/pages/MockDataV2.js

@@ -25,51 +25,45 @@ const { TextArea } = Input;
 // 刷新缓存工具函数
 const flushCache = async () => {
   try {
-    await fetch('/cgi-bin/flushCache', { method: 'POST' });
+    await fetch('/cgi-bin/flush-cache', { method: 'POST' });
+    console.log('缓存刷新成功');
   } catch (error) {
-    console.error('刷新缓存失败:', error);
-    throw error;
+    console.error('缓存刷新失败:', 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 [features, setFeatures] = useState([]);
   const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [editingFeature, setEditingFeature] = useState(null);
 
-  // 排序和分页配置（支持缓存）
-  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 [searchTerm, setSearchTerm] = useState('');
+  const [filteredFeatures, setFilteredFeatures] = useState([]);
+  const [statusFilter, setStatusFilter] = useState('all'); // all, active, inactive
+  const [sortBy, setSortBy] = useState('name'); // name, createTime, updateTime
 
-  // 保存列表配置到localStorage
-  const saveListConfig = (config) => {
-    const newConfig = { ...listConfig, ...config };
-    setListConfig(newConfig);
-    localStorage.setItem('feature-list-config', JSON.stringify(newConfig));
-  };
+  // 分页状态
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+
+  // 导入/导出状态
+  const [exportLoading, setExportLoading] = useState(false);
+  const [importLoading, setImportLoading] = useState(false);
 
-  // 加载功能列表
   useEffect(() => {
     fetchFeatures();
   }, []);
 
-  // 获取所有功能模块
+  useEffect(() => {
+    filterAndSortFeatures();
+  }, [features, searchTerm, statusFilter, sortBy]);
+
   const fetchFeatures = async () => {
     try {
       setLoading(true);
@@ -77,114 +71,78 @@ const MockData = () => {
       const result = await response.json();
       
       if (result.code === 0) {
-        setMockFeatures(result.data || []);
+        setFeatures(result.data || []);
       } else {
-        console.error('获取功能模块失败:', result.message);
-        message.error('获取功能模块失败: ' + result.message);
+        throw new Error(result.message || '获取功能模块失败');
       }
     } catch (error) {
-      console.error('获取功能模块错误:', error);
-      message.error('获取功能模块失败, 请检查网络连接');
+      console.error('获取功能模块失败:', error);
+      message.error('获取功能模块失败: ' + error.message);
+      setFeatures([]);
     } finally {
       setLoading(false);
     }
   };
 
-  const openModal = (feature = null) => {
-    setCurrentFeature(feature);
-    if (feature) {
-      setFormData({
-        name: feature.name,
-        description: feature.description || '',
-        active: feature.active !== false
-      });
-      form.setFieldsValue({
-        name: feature.name,
-        description: feature.description || '',
-        active: feature.active !== false
-      });
-    } else {
-      setFormData({
-        name: '',
-        description: '',
-        active: true
-      });
-      form.resetFields();
-    }
-    setShowModal(true);
-  };
+  const filterAndSortFeatures = () => {
+    let filtered = [...features];
 
-  const handleSubmit = async (values) => {
-    console.log('表单提交数据:', values);
-    try {
-      const submitData = {
-        name: values.name.trim(),
-        description: values.description?.trim() || '',
-        active: values.active !== false
-      };
+    // 搜索筛选
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      filtered = filtered.filter(feature => 
+        feature.name.toLowerCase().includes(term) ||
+        (feature.description && feature.description.toLowerCase().includes(term))
+      );
+    }
 
-      console.log('处理后的提交数据:', submitData);
+    // 状态筛选
+    if (statusFilter === 'active') {
+      filtered = filtered.filter(feature => feature.active !== false);
+    } else if (statusFilter === 'inactive') {
+      filtered = filtered.filter(feature => feature.active === 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 || '未知错误'));
-        }
+    // 排序
+    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;
       }
-    } catch (error) {
-      console.error('操作失败:', error);
-      message.error('操作失败: ' + error.message);
-    }
+    });
+
+    setFilteredFeatures(filtered);
+    setCurrentPage(1); // 重置到第一页
+  };
+
+  const handleAddFeature = () => {
+    form.resetFields();
+    setEditingFeature(null);
+    setModalVisible(true);
   };
 
-  const handleDelete = async (id) => {
+  const handleEditFeature = (feature) => {
+    form.setFieldsValue({
+      name: feature.name,
+      description: feature.description
+    });
+    setEditingFeature(feature);
+    setModalVisible(true);
+  };
+
+  const handleDeleteFeature = async (id) => {
     try {
       const response = await fetch(`/cgi-bin/features?id=${id}`, {
-        method: 'DELETE',
+        method: 'DELETE'
       });
-      
       const result = await response.json();
+      
       if (result.code === 0) {
         message.success('功能模块删除成功');
         fetchFeatures();
@@ -192,27 +150,29 @@ const MockData = () => {
         // 刷新缓存
         await flushCache();
       } else {
-        message.error('功能模块删除失败: ' + (result.message || '未知错误'));
+        throw new Error(result.message || '删除失败');
       }
     } catch (error) {
-      console.error('删除失败:', error);
-      message.error('删除失败: ' + error.message);
+      console.error('删除功能模块失败:', error);
+      message.error('删除功能模块失败: ' + error.message);
     }
   };
 
   const handleToggleActive = async (id, currentActive) => {
     try {
-      const response = await fetch(`/cgi-bin/features?id=${id}`, {
-        method: 'PUT',
+      const response = await fetch(`/cgi-bin/features`, {
+        method: 'PATCH',
         headers: {
-          'Content-Type': 'application/json',
+          'Content-Type': 'application/json'
         },
         body: JSON.stringify({
+          id,
           active: !currentActive
-        }),
+        })
       });
       
       const result = await response.json();
+      
       if (result.code === 0) {
         message.success(`功能模块${!currentActive ? '启用' : '禁用'}成功`);
         fetchFeatures();
@@ -220,236 +180,194 @@ const MockData = () => {
         // 刷新缓存
         await flushCache();
       } else {
-        message.error(`功能模块${!currentActive ? '启用' : '禁用'}失败: ` + (result.message || '未知错误'));
+        throw new Error(result.message || '操作失败');
       }
     } catch (error) {
-      console.error(`${!currentActive ? '启用' : '禁用'}失败:`, error);
-      message.error(`${!currentActive ? '启用' : '禁用'}失败: ` + error.message);
+      console.error('切换功能模块状态失败:', error);
+      message.error('操作失败: ' + error.message);
     }
   };
 
-  const gotoInterfaceManagement = (featureId) => {
-    history.push(`/interface/${featureId}`);
-  };
-
-  // 导出功能配置
-  const exportFeatureConfig = async () => {
+  const handleSubmit = async () => {
     try {
-      const response = await fetch('/cgi-bin/export-features');
+      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,
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(requestData)
+      });
+
       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(editingFeature ? '功能模块更新成功' : '功能模块创建成功');
+        setModalVisible(false);
+        fetchFeatures();
         
-        message.success('功能配置导出成功');
+        // 刷新缓存
+        await flushCache();
       } else {
-        message.error('导出失败: ' + (result.message || '未知错误'));
+        throw new Error(result.message || '操作失败');
+      }
+    } catch (error) {
+      console.error('提交失败:', error);
+      message.error('操作失败: ' + error.message);
+    }
+  };
+
+  const handleCancel = () => {
+    setModalVisible(false);
+  };
+
+  const handleNavigateToInterfaces = (featureId) => {
+    history.push(`/interface-management/${featureId}`);
+  };
+
+  // 导出功能
+  const handleExport = async () => {
+    try {
+      setExportLoading(true);
+      const response = await fetch('/cgi-bin/features/export');
+      
+      if (!response.ok) {
+        throw new Error('导出失败');
       }
+      
+      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);
+      
+      message.success('导出成功');
     } catch (error) {
       console.error('导出失败:', error);
       message.error('导出失败: ' + error.message);
+    } finally {
+      setExportLoading(false);
     }
   };
 
-  // 导入功能配置
-  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 handleImport = (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
       try {
-        const text = await file.text();
-        const data = JSON.parse(text);
+        setImportLoading(true);
+        const data = JSON.parse(e.target.result);
         
-        const response = await fetch('/cgi-bin/import-features', {
+        const response = await fetch('/cgi-bin/features/import', {
           method: 'POST',
           headers: {
-            'Content-Type': 'application/json',
+            'Content-Type': 'application/json'
           },
-          body: JSON.stringify(data),
+          body: JSON.stringify(data)
         });
-        
+
         const result = await response.json();
+        
         if (result.code === 0) {
-          message.success('功能配置导入成功');
+          message.success('导入成功');
           fetchFeatures();
-          
-          // 刷新缓存
-          await flushCache();
         } else {
-          message.error('导入失败: ' + (result.message || '未知错误'));
+          throw new Error(result.message || '导入失败');
         }
       } catch (error) {
         console.error('导入失败:', error);
         message.error('导入失败: ' + error.message);
+      } finally {
+        setImportLoading(false);
+        // 清除文件选择
+        event.target.value = '';
       }
     };
-    input.click();
-  };
 
-  // 搜索和筛选状态
-  const [searchText, setSearchText] = useState('');
-  const [filterStatus, setFilterStatus] = useState('all'); // all, active, inactive
-
-  // 筛选和排序数据
-  const getFilteredAndSortedData = () => {
-    let filtered = [...mockFeatures];
-
-    // 文本搜索
-    if (searchText) {
-      const searchLower = searchText.toLowerCase();
-      filtered = filtered.filter(item => 
-        item.name.toLowerCase().includes(searchLower) ||
-        (item.description && item.description.toLowerCase().includes(searchLower))
-      );
-    }
-
-    // 状态筛选
-    if (filterStatus === 'active') {
-      filtered = filtered.filter(item => item.active !== false);
-    } else if (filterStatus === 'inactive') {
-      filtered = filtered.filter(item => item.active === false);
-    }
-
-    // 排序
-    filtered.sort((a, b) => {
-      let aValue, bValue;
-      
-      switch (listConfig.sortBy) {
-        case 'name':
-          aValue = a.name || '';
-          bValue = b.name || '';
-          break;
-        case 'createdAt':
-          aValue = new Date(a.createdAt || 0);
-          bValue = new Date(b.createdAt || 0);
-          break;
-        case 'interfaceCount':
-          aValue = a.interfaceCount || 0;
-          bValue = b.interfaceCount || 0;
-          break;
-        case 'active':
-          aValue = a.active === false ? 0 : 1;
-          bValue = b.active === false ? 0 : 1;
-          break;
-        default:
-          aValue = a.name || '';
-          bValue = b.name || '';
-      }
+    reader.readAsText(file);
+  };
 
-      if (listConfig.sortOrder === 'descend') {
-        return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
-      } else {
-        return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
-      }
-    });
+  // 清空搜索
+  const handleClearSearch = () => {
+    setSearchTerm('');
+  };
 
-    return filtered;
+  // 刷新数据
+  const handleRefresh = () => {
+    fetchFeatures();
+    message.success('数据已刷新');
   };
 
-  const filteredData = getFilteredAndSortedData();
+  // 获取分页数据
+  const getPaginatedFeatures = () => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredFeatures.slice(startIndex, endIndex);
+  };
 
-  // 分页计算
-  const startIndex = (listConfig.current - 1) * listConfig.pageSize;
-  const endIndex = startIndex + listConfig.pageSize;
-  const paginatedData = filteredData.slice(startIndex, endIndex);
+  // 筛选菜单
+  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 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
+      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 renderFeatureCard = (feature) => {
-    const isActive = feature.active !== false;
-    
-    return (
-      <Col xs={24} sm={12} md={8} lg={6} key={feature.id}>
-        <Badge.Ribbon 
-          text={isActive ? "启用" : "禁用"} 
-          color={isActive ? "green" : "volcano"}
-        >
-          <Card
-            className={`feature-card ${!isActive ? 'inactive' : ''}`}
-            hoverable
-            actions={[
-              <Tooltip title="编辑功能">
-                <EditOutlined key="edit" onClick={() => openModal(feature)} />
-              </Tooltip>,
-              <Tooltip title="管理接口">
-                <SettingOutlined key="setting" onClick={() => gotoInterfaceManagement(feature.id)} />
-              </Tooltip>,
-              <Popconfirm
-                title="确定删除此功能模块吗？"
-                description="删除后相关的所有接口配置也会被删除，且无法恢复。"
-                onConfirm={() => handleDelete(feature.id)}
-                okText="确定"
-                cancelText="取消"
-              >
-                <Tooltip title="删除功能">
-                  <DeleteOutlined key="delete" style={{ color: '#ff4d4f' }} />
-                </Tooltip>
-              </Popconfirm>,
-            ]}
-          >
-            <div className="feature-card-header">
-              <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>
-              </div>
-              <div className="stat-item">
-                <span className="stat-label">创建时间:</span>
-                <span className="stat-value">
-                  {feature.createdAt ? new Date(feature.createdAt).toLocaleDateString() : '未知'}
-                </span>
-              </div>
-            </div>
-          </Card>
-        </Badge.Ribbon>
-      </Col>
-    );
+  const getStatusText = (filter) => {
+    switch (filter) {
+      case 'active': return '启用';
+      case 'inactive': return '禁用';
+      default: return '全部状态';
+    }
+  };
+
+  const getSortText = (sort) => {
+    switch (sort) {
+      case 'createTime': return '创建时间';
+      case 'updateTime': return '更新时间';
+      default: return '名称';
+    }
   };
 
   return (
     <AppLayout>
-      <div className="page-container">
+      <div className="mock-data-container">
         {/* V2版本标识 */}
         <div style={{ 
           position: 'absolute', 
@@ -465,233 +383,302 @@ const MockData = () => {
           重构后版本 V2
         </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 && (
-          <Card className="filter-controls" bordered={false}>
-            <div className="control-row">
-              <div className="search-controls">
+        {/* 头部操作栏 */}
+        <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="搜索功能名称或描述"
+                  placeholder="搜索功能模块名称或描述"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  style={{ width: 300 }}
                   prefix={<SearchOutlined />}
-                  value={searchText}
-                  onChange={(e) => setSearchText(e.target.value)}
-                  style={{ width: 240 }}
                   allowClear
+                  onClear={handleClearSearch}
                 />
-                <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>
+            </div>
+            
+            <div className="header-right">
+              <Space size="middle">
+                <Tooltip title="刷新数据">
                   <Button 
-                    icon={<DownloadOutlined />}
-                    onClick={exportFeatureConfig}
-                  >
-                    导出配置
+                    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={<ReloadOutlined />}
-                    onClick={fetchFeatures}
-                    loading={loading}
+                    icon={<ImportOutlined />}
+                    loading={importLoading}
+                    onClick={() => document.getElementById('import-input').click()}
                   >
-                    刷新
+                    导入
                   </Button>
-                  {(searchText || filterStatus !== 'all') && (
-                    <Button 
-                      icon={<ClearOutlined />}
-                      onClick={() => {
-                        setSearchText('');
-                        setFilterStatus('all');
-                      }}
-                    >
-                      清除筛选
-                    </Button>
-                  )}
-                </Space>
-              </div>
-            </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="禁用的功能数量"
-                />
+                </div>
+                
+                <Button 
+                  type="primary" 
+                  icon={<PlusOutlined />}
+                  onClick={handleAddFeature}
+                >
+                  添加功能模块
+                </Button>
               </Space>
             </div>
-          </Card>
-        )}
+          </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>
 
         {/* 功能模块列表 */}
-        <div className="feature-list-container">
+        <Card className="list-card" bordered={false} title="功能模块列表">
           {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 }} />
+                {[...Array(6)].map((_, index) => (
+                  <Col xs={24} sm={12} md={8} lg={6} key={index}>
+                    <Card loading />
                   </Col>
                 ))}
               </Row>
             </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' }}
-            />
+          ) : 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>
           ) : (
             <>
-              <Row gutter={[16, 16]} className="feature-grid">
-                {paginatedData.map(renderFeatureCard)}
+              <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>
+                ))}
               </Row>
               
-              {/* 分页控件 */}
-              {filteredData.length > listConfig.pageSize && (
+              {/* 分页 */}
+              {filteredFeatures.length > pageSize && (
                 <div className="pagination-container">
                   <Pagination
-                    current={listConfig.current}
-                    pageSize={listConfig.pageSize}
-                    total={filteredData.length}
+                    current={currentPage}
+                    pageSize={pageSize}
+                    total={filteredFeatures.length}
                     showSizeChanger
                     showQuickJumper
                     showTotal={(total, range) => 
-                      `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
+                      `共 ${total} 个功能模块，显示第 ${range[0]}-${range[1]} 个`
                     }
-                    pageSizeOptions={['8', '12', '16', '24']}
-                    onChange={(current, pageSize) => {
-                      saveListConfig({ current, pageSize });
+                    pageSizeOptions={['8', '12', '24', '48']}
+                    onChange={(page, size) => {
+                      setCurrentPage(page);
+                      setPageSize(size);
                     }}
                   />
                 </div>
               )}
             </>
           )}
-        </div>
+        </Card>
 
-        {/* 新建/编辑功能模块弹窗 */}
+        {/* 添加/编辑功能模块模态框 */}
         <Modal
-          title={currentFeature ? '编辑功能模块' : '新建功能模块'}
-          open={showModal}
-          onCancel={() => setShowModal(false)}
-          footer={null}
+          title={editingFeature ? '编辑功能模块' : '添加功能模块'}
+          open={modalVisible}
+          onOk={handleSubmit}
+          onCancel={handleCancel}
+          okText={editingFeature ? '保存' : '创建'}
+          cancelText="取消"
           destroyOnClose
         >
           <Form
             form={form}
             layout="vertical"
-            onFinish={handleSubmit}
             initialValues={{
               name: '',
-              description: '',
-              active: true
+              description: ''
             }}
           >
             <Form.Item
               name="name"
-              label="功能名称"
+              label="功能模块名称"
               rules={[
-                { required: true, message: '请输入功能名称' },
-                { max: 50, message: '功能名称不能超过50个字符' }
+                { required: true, message: '请输入功能模块名称' },
+                { max: 50, message: '名称长度不能超过50个字符' }
               ]}
             >
-              <Input placeholder="请输入功能名称" />
+              <Input placeholder="请输入功能模块名称" />
             </Form.Item>
             
             <Form.Item
               name="description"
-              label="功能描述"
+              label="描述"
               rules={[
-                { max: 200, message: '功能描述不能超过200个字符' }
+                { max: 200, message: '描述长度不能超过200个字符' }
               ]}
             >
-              <TextArea
-                placeholder="请输入功能描述（可选）"
+              <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>