whistle.mock-plugins 1.2.0-beta.10 → 1.2.0-beta.12

package/app/public/js/index.js.LICENSE.txt

@@ -156,5 +156,3 @@
 /**![setting](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkyNC44IDYyNS43bC02NS41LTU2YzMuMS0xOSA0LjctMzguNCA0LjctNTcuOHMtMS42LTM4LjgtNC43LTU3LjhsNjUuNS01NmEzMi4wMyAzMi4wMyAwIDAwOS4zLTM1LjJsLS45LTIuNmE0NDMuNzQgNDQzLjc0IDAgMDAtNzkuNy0xMzcuOWwtMS44LTIuMWEzMi4xMiAzMi4xMiAwIDAwLTM1LjEtOS41bC04MS4zIDI4LjljLTMwLTI0LjYtNjMuNS00NC05OS43LTU3LjZsLTE1LjctODVhMzIuMDUgMzIuMDUgMCAwMC0yNS44LTI1LjdsLTIuNy0uNWMtNTIuMS05LjQtMTA2LjktOS40LTE1OSAwbC0yLjcuNWEzMi4wNSAzMi4wNSAwIDAwLTI1LjggMjUuN2wtMTUuOCA4NS40YTM1MS44NiAzNTEuODYgMCAwMC05OSA1Ny40bC04MS45LTI5LjFhMzIgMzIgMCAwMC0zNS4xIDkuNWwtMS44IDIuMWE0NDYuMDIgNDQ2LjAyIDAgMDAtNzkuNyAxMzcuOWwtLjkgMi42Yy00LjUgMTIuNS0uOCAyNi41IDkuMyAzNS4ybDY2LjMgNTYuNmMtMy4xIDE4LjgtNC42IDM4LTQuNiA1Ny4xIDAgMTkuMiAxLjUgMzguNCA0LjYgNTcuMUw5OSA2MjUuNWEzMi4wMyAzMi4wMyAwIDAwLTkuMyAzNS4ybC45IDIuNmMxOC4xIDUwLjQgNDQuOSA5Ni45IDc5LjcgMTM3LjlsMS44IDIuMWEzMi4xMiAzMi4xMiAwIDAwMzUuMSA5LjVsODEuOS0yOS4xYzI5LjggMjQuNSA2My4xIDQzLjkgOTkgNTcuNGwxNS44IDg1LjRhMzIuMDUgMzIuMDUgMCAwMDI1LjggMjUuN2wyLjcuNWE0NDkuNCA0NDkuNCAwIDAwMTU5IDBsMi43LS41YTMyLjA1IDMyLjA1IDAgMDAyNS44LTI1LjdsMTUuNy04NWEzNTAgMzUwIDAgMDA5OS43LTU3LjZsODEuMyAyOC45YTMyIDMyIDAgMDAzNS4xLTkuNWwxLjgtMi4xYzM0LjgtNDEuMSA2MS42LTg3LjUgNzkuNy0xMzcuOWwuOS0yLjZjNC41LTEyLjMuOC0yNi4zLTkuMy0zNXpNNzg4LjMgNDY1LjljMi41IDE1LjEgMy44IDMwLjYgMy44IDQ2LjFzLTEuMyAzMS0zLjggNDYuMWwtNi42IDQwLjEgNzQuNyA2My45YTM3MC4wMyAzNzAuMDMgMCAwMS00Mi42IDczLjZMNzIxIDcwMi44bC0zMS40IDI1LjhjLTIzLjkgMTkuNi01MC41IDM1LTc5LjMgNDUuOGwtMzguMSAxNC4zLTE3LjkgOTdhMzc3LjUgMzc3LjUgMCAwMS04NSAwbC0xNy45LTk3LjItMzcuOC0xNC41Yy0yOC41LTEwLjgtNTUtMjYuMi03OC43LTQ1LjdsLTMxLjQtMjUuOS05My40IDMzLjJjLTE3LTIyLjktMzEuMi00Ny42LTQyLjYtNzMuNmw3NS41LTY0LjUtNi41LTQwYy0yLjQtMTQuOS0zLjctMzAuMy0zLjctNDUuNSAwLTE1LjMgMS4yLTMwLjYgMy43LTQ1LjVsNi41LTQwLTc1LjUtNjQuNWMxMS4zLTI2LjEgMjUuNi01MC43IDQyLjYtNzMuNmw5My40IDMzLjIgMzEuNC0yNS45YzIzLjctMTkuNSA1MC4yLTM0LjkgNzguNy00NS43bDM3LjktMTQuMyAxNy45LTk3LjJjMjguMS0zLjIgNTYuOC0zLjIgODUgMGwxNy45IDk3IDM4LjEgMTQuM2MyOC43IDEwLjggNTUuNCAyNi4yIDc5LjMgNDUuOGwzMS40IDI1LjggOTIuOC0zMi45YzE3IDIyLjkgMzEuMiA0Ny42IDQyLjYgNzMuNkw3ODEuOCA0MjZsNi41IDM5Ljl6TTUxMiAzMjZjLTk3LjIgMC0xNzYgNzguOC0xNzYgMTc2czc4LjggMTc2IDE3NiAxNzYgMTc2LTc4LjggMTc2LTE3Ni03OC44LTE3Ni0xNzYtMTc2em03OS4yIDI1NS4yQTExMS42IDExMS42IDAgMDE1MTIgNjE0Yy0yOS45IDAtNTgtMTEuNy03OS4yLTMyLjhBMTExLjYgMTExLjYgMCAwMTQwMCA1MDJjMC0yOS45IDExLjctNTggMzIuOC03OS4yQzQ1NCA0MDEuNiA0ODIuMSAzOTAgNTEyIDM5MGMyOS45IDAgNTggMTEuNiA3OS4yIDMyLjhBMTExLjYgMTExLjYgMCAwMTYyNCA1MDJjMCAyOS45LTExLjcgNTgtMzIuOCA3OS4yeiIgLz48L3N2Zz4=) */
 
 /**![sort-ascending](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTgzOS42IDQzMy44TDc0OSAxNTAuNWE5LjI0IDkuMjQgMCAwMC04LjktNi41aC03Ny40Yy00LjEgMC03LjYgMi42LTguOSA2LjVsLTkxLjMgMjgzLjNjLS4zLjktLjUgMS45LS41IDIuOSAwIDUuMSA0LjIgOS4zIDkuMyA5LjNoNTYuNGM0LjIgMCA3LjgtMi44IDktNi44bDE3LjUtNjEuNmg4OWwxNy4zIDYxLjVjMS4xIDQgNC44IDYuOCA5IDYuOGg2MS4yYzEgMCAxLjktLjEgMi44LS40IDIuNC0uOCA0LjMtMi40IDUuNS00LjYgMS4xLTIuMiAxLjMtNC43LjYtNy4xek02NjMuMyAzMjUuNWwzMi44LTExNi45aDYuM2wzMi4xIDExNi45aC03MS4yem0xNDMuNSA0OTIuOUg2NzcuMnYtLjRsMTMyLjYtMTg4LjljMS4xLTEuNiAxLjctMy40IDEuNy01LjR2LTM2LjRjMC01LjEtNC4yLTkuMy05LjMtOS4zaC0yMDRjLTUuMSAwLTkuMyA0LjItOS4zIDkuM3Y0M2MwIDUuMSA0LjIgOS4zIDkuMyA5LjNoMTIyLjZ2LjRMNTg3LjcgODI4LjlhOS4zNSA5LjM1IDAgMDAtMS43IDUuNHYzNi40YzAgNS4xIDQuMiA5LjMgOS4zIDkuM2gyMTEuNGM1LjEgMCA5LjMtNC4yIDkuMy05LjN2LTQzYTkuMiA5LjIgMCAwMC05LjItOS4zek00MTYgNzAyaC03NlYxNzJjMC00LjQtMy42LTgtOC04aC01NmMtNC40IDAtOCAzLjYtOCA4djUzMGgtNzZjLTYuNyAwLTEwLjUgNy44LTYuMyAxM2wxMTIgMTQxLjlhOCA4IDAgMDAxMi42IDBsMTEyLTE0MS45YzQuMS01LjIuNC0xMy02LjMtMTN6IiAvPjwvc3ZnPg==) */
-
-/**![unordered-list](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkxMiAxOTJIMzI4Yy00LjQgMC04IDMuNi04IDh2NTZjMCA0LjQgMy42IDggOCA4aDU4NGM0LjQgMCA4LTMuNiA4LTh2LTU2YzAtNC40LTMuNi04LTgtOHptMCAyODRIMzI4Yy00LjQgMC04IDMuNi04IDh2NTZjMCA0LjQgMy42IDggOCA4aDU4NGM0LjQgMCA4LTMuNiA4LTh2LTU2YzAtNC40LTMuNi04LTgtOHptMCAyODRIMzI4Yy00LjQgMC04IDMuNi04IDh2NTZjMCA0LjQgMy42IDggOCA4aDU4NGM0LjQgMCA4LTMuNiA4LTh2LTU2YzAtNC40LTMuNi04LTgtOHpNMTA0IDIyOGE1NiA1NiAwIDEwMTEyIDAgNTYgNTYgMCAxMC0xMTIgMHptMCAyODRhNTYgNTYgMCAxMDExMiAwIDU2IDU2IDAgMTAtMTEyIDB6bTAgMjg0YTU2IDU2IDAgMTAxMTIgMCA1NiA1NiAwIDEwLTExMiAweiIgLz48L3N2Zz4=) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "whistle.mock-plugins",
-  "version": "1.2.0-beta.10",
+  "version": "1.2.0-beta.12",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {

package/ui/src/pages/InterfaceManagement.js

@@ -4,7 +4,7 @@ import AppLayout from '../components/AppLayout';
 import { 
   Table, Button, Modal, Form, Input, Select, message, Switch, 
   Popconfirm, Alert, Space, Card, Badge, Tooltip, Row, Col,
-  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer, Divider
+  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer
 } from 'antd';
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
@@ -64,7 +64,6 @@ const InterfaceManagement = () => {
   const [groups, setGroups] = useState([]);
   const [selectedGroup, setSelectedGroup] = useState(null);
   const [groupActionLoading, setGroupActionLoading] = useState(false);
-  const [newGroupName, setNewGroupName] = useState('');
   
   // 模态框状态
   const [modalVisible, setModalVisible] = useState(false);
@@ -217,17 +216,6 @@ const InterfaceManagement = () => {
       setSelectedGroup(null);
     }
   };
-
-  // 添加新分组
-  const addNewGroup = () => {
-    if (newGroupName.trim() && !groups.includes(newGroupName.trim())) {
-      const updatedGroups = [...groups, newGroupName.trim()].sort();
-      setGroups(updatedGroups);
-      setNewGroupName('');
-      return newGroupName.trim();
-    }
-    return null;
-  };
   
   // 根据分组和搜索关键词筛选接口
   const getFilteredInterfaces = () => {
@@ -1310,55 +1298,27 @@ const InterfaceManagement = () => {
                   tooltip="为接口设置分组，便于管理和批量操作"
                 >
                   <Select
-                    placeholder="选择或输入新分组名称"
+                    placeholder="选择或创建分组"
                     showSearch
                     allowClear
                     style={{ width: '100%' }}
-                    dropdownMatchSelectWidth={false}
-                    filterOption={(input, option) =>
-                      option?.children?.toLowerCase()?.indexOf(input.toLowerCase()) >= 0
-                    }
+                    mode="tags"
+                    maxTagCount="responsive"
+                    maxTagTextLength={10}
+                    onChange={(value) => {
+                      // 如果值是数组（tags模式），只取第一个元素
+                      if (Array.isArray(value) && value.length > 0) {
+                        // 如果第一个元素是空字符串，则设置为undefined
+                        const groupValue = value[0] === '' ? undefined : value[0];
+                        form.setFieldsValue({ group: groupValue });
+                      }
+                    }}
                     onInputKeyDown={(e) => {
                       // 防止回车键提交表单
                       if (e.key === 'Enter') {
                         e.stopPropagation();
                       }
                     }}
-                    dropdownRender={(menu) => (
-                      <div>
-                        {menu}
-                        <Divider style={{ margin: '4px 0' }} />
-                        <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
-                          <Input
-                            style={{ flex: 'auto' }}
-                            value={newGroupName}
-                            onChange={(e) => setNewGroupName(e.target.value)}
-                            placeholder="输入新分组名称"
-                            onPressEnter={(e) => {
-                              e.stopPropagation();
-                              const groupName = addNewGroup();
-                              if (groupName) {
-                                form.setFieldsValue({ group: groupName });
-                              }
-                            }}
-                          />
-                          <Button
-                            type="text"
-                            icon={<PlusOutlined />}
-                            style={{ flex: 'none', padding: '4px 8px', cursor: 'pointer' }}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              const groupName = addNewGroup();
-                              if (groupName) {
-                                form.setFieldsValue({ group: groupName });
-                              }
-                            }}
-                          >
-                            添加
-                          </Button>
-                        </div>
-                      </div>
-                    )}
                   >
                     {Array.from(new Set(interfaces.map(item => item.group).filter(Boolean))).map(group => (
                       <Option key={group} value={group}>{group}</Option>

package/ui/src/pages/InterfaceManagementV2.js

@@ -10,7 +10,7 @@ import AppLayout from '../components/AppLayout';
 import { 
   Table, Button, Modal, Form, Input, Select, message, Switch, 
   Popconfirm, Alert, Space, Card, Badge, Tooltip, Row, Col,
-  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer, Dropdown, Menu, Collapse, Divider
+  Popover, Checkbox, Tag, Input as AntInput, Radio, Drawer, Dropdown, Menu, Collapse
 } from 'antd';
 import { 
   PlusOutlined, EditOutlined, DeleteOutlined, 
@@ -70,7 +70,6 @@ const InterfaceManagement = () => {
   const [groups, setGroups] = useState([]);
   const [selectedGroup, setSelectedGroup] = useState(null);
   const [groupActionLoading, setGroupActionLoading] = useState(false);
-  const [newGroupName, setNewGroupName] = useState('');
   
   // 模态框状态
   const [modalVisible, setModalVisible] = useState(false);
@@ -223,17 +222,6 @@ const InterfaceManagement = () => {
       setSelectedGroup(null);
     }
   };
-
-  // 添加新分组
-  const addNewGroup = () => {
-    if (newGroupName.trim() && !groups.includes(newGroupName.trim())) {
-      const updatedGroups = [...groups, newGroupName.trim()].sort();
-      setGroups(updatedGroups);
-      setNewGroupName('');
-      return newGroupName.trim();
-    }
-    return null;
-  };
   
   // 根据分组和搜索关键词筛选接口
   const getFilteredInterfaces = () => {
@@ -1332,8 +1320,8 @@ const InterfaceManagement = () => {
               <Collapse 
                 defaultActiveKey={
                   editingInterface && editingInterface.proxyType === 'response'
-                    ? ['3'] 
-                    : ['1', '2', '3']
+                    ? ['3'] // mock代理场景：只展开第3步（高级配置）
+                    : ['1', '2', '3'] // 其他场景：展开所有步骤
                 }
                 style={{ marginBottom: '16px' }}
                 ghost
@@ -1365,55 +1353,27 @@ const InterfaceManagement = () => {
                   tooltip="为接口设置分组，便于管理和批量操作"
                 >
                   <Select
-                    placeholder="选择或输入新分组名称"
+                    placeholder="选择或创建分组"
                     showSearch
                     allowClear
                     style={{ width: '100%' }}
-                    dropdownMatchSelectWidth={false}
-                    filterOption={(input, option) =>
-                      option?.children?.toLowerCase()?.indexOf(input.toLowerCase()) >= 0
-                    }
+                    mode="tags"
+                    maxTagCount="responsive"
+                    maxTagTextLength={10}
+                    onChange={(value) => {
+                      // 如果值是数组（tags模式），只取第一个元素
+                      if (Array.isArray(value) && value.length > 0) {
+                        // 如果第一个元素是空字符串，则设置为undefined
+                        const groupValue = value[0] === '' ? undefined : value[0];
+                        form.setFieldsValue({ group: groupValue });
+                      }
+                    }}
                     onInputKeyDown={(e) => {
                       // 防止回车键提交表单
                       if (e.key === 'Enter') {
                         e.stopPropagation();
                       }
                     }}
-                    dropdownRender={(menu) => (
-                      <div>
-                        {menu}
-                        <Divider style={{ margin: '4px 0' }} />
-                        <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
-                          <Input
-                            style={{ flex: 'auto' }}
-                            value={newGroupName}
-                            onChange={(e) => setNewGroupName(e.target.value)}
-                            placeholder="输入新分组名称"
-                            onPressEnter={(e) => {
-                              e.stopPropagation();
-                              const groupName = addNewGroup();
-                              if (groupName) {
-                                form.setFieldsValue({ group: groupName });
-                              }
-                            }}
-                          />
-                          <Button
-                            type="text"
-                            icon={<PlusOutlined />}
-                            style={{ flex: 'none', padding: '4px 8px', cursor: 'pointer' }}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              const groupName = addNewGroup();
-                              if (groupName) {
-                                form.setFieldsValue({ group: groupName });
-                              }
-                            }}
-                          >
-                            添加
-                          </Button>
-                        </div>
-                      </div>
-                    )}
                   >
                     {Array.from(new Set(interfaces.map(item => item.group).filter(Boolean))).map(group => (
                       <Option key={group} value={group}>{group}</Option>

package/ui/src/pages/MockDataV2.js

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

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

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