whistle.mock-plugins 1.2.1-beta.5 → 1.2.1

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

@@ -171,3 +171,5 @@
 /**![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.1-beta.5",
+  "version": "1.2.1",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {

package/ui/src/index.js

@@ -7,39 +7,19 @@ import 'antd/dist/reset.css'; // 导入antd样式，使用适合的版本
 import './styles/global.css';
 import './App.css';
 
-// 导入页面组件 - V1版本（重构前）
-import MockData from './pages/MockData';
-import InterfaceManagement from './pages/InterfaceManagement';
+// 导入页面组件
+import MockData from './pages/MockDataV2';
+import InterfaceManagement from './pages/InterfaceManagementV2';
 import Settings from './pages/Settings';
 
-// 导入页面组件 - V2版本（重构后）
-import MockDataV2 from './pages/MockDataV2';
-import InterfaceManagementV2 from './pages/InterfaceManagementV2';
-
-// UI版本检测函数
-const getUIVersion = () => {
-  try {
-    return localStorage.getItem('ui-version') || 'v1';
-  } catch (error) {
-    console.error('获取UI版本设置失败:', error);
-    return 'v1';
-  }
-};
-
 const App = () => {
-  const uiVersion = getUIVersion();
-  
-  // 根据版本选择对应组件
-  const MockDataComponent = uiVersion === 'v2' ? MockDataV2 : MockData;
-  const InterfaceManagementComponent = uiVersion === 'v2' ? InterfaceManagementV2 : InterfaceManagement;
-
   return (
     <Router>
       <div className="App">
         <Switch>
-          <Route exact path="/" component={MockDataComponent} />
-          <Route exact path="/interface" component={InterfaceManagementComponent} />
-          <Route path="/interface/:featureId" component={InterfaceManagementComponent} />
+          <Route exact path="/" component={MockData} />
+          <Route exact path="/interface" component={InterfaceManagement} />
+          <Route path="/interface/:featureId" component={InterfaceManagement} />
           <Route path="/settings" component={Settings} />
           <Redirect to="/" />
         </Switch>

package/ui/src/pages/InterfaceManagementV2.js

@@ -1,7 +1,5 @@
 /**
- * InterfaceManagementV2.js - 接口管理页面（重构后版本）
- * 这是重构后的新版本界面，提供更好的用户体验和功能优化
- * 当前内容与V1版本相同，等待后续重构
+ * InterfaceManagementV2.js - 接口管理页面
  */
 
 import React, { useState, useEffect } from 'react';
@@ -1068,21 +1066,6 @@ const InterfaceManagement = () => {
   return (
     <AppLayout>
       <div className="interface-management-container">
-        {/* V2版本标识 */}
-        <div style={{ 
-          position: 'absolute', 
-          top: '10px', 
-          right: '10px', 
-          backgroundColor: '#52c41a', 
-          color: 'white', 
-          padding: '4px 8px', 
-          borderRadius: '4px', 
-          fontSize: '12px',
-          zIndex: 1000
-        }}>
-          重构后版本 V2
-        </div>
-        
         {/* 警告信息置顶显示 */}
         {!features.length && (
           <Alert

package/ui/src/pages/MockDataV2.js

@@ -1,13 +1,12 @@
 /**
- * MockDataV2.js - 功能模块管理页面（V2版本）
- * 功能和UI与V1版本完全一致，仅保留V2版本标识
+ * MockDataV2.js - 功能模块管理页面
  */
 
 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 } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined } from '@ant-design/icons';
+import { Card, Row, Col, Button, Modal, Form, Input, message, Switch, Empty, Spin, Typography, Tooltip, Badge, Select, Pagination, Table, Space, Tag } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ApiOutlined, ExportOutlined, InfoCircleOutlined, CalendarOutlined, SortAscendingOutlined, AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import '../styles/mock-data.css';
 import axios from 'axios';
 
@@ -41,7 +40,8 @@ const MockData = () => {
       sortBy: 'name', // name, createdAt, interfaceCount, active
       sortOrder: 'ascend', // ascend, descend
       pageSize: 12,
-      current: 1
+      current: 1,
+      viewMode: 'card' // card, list
     };
   });
 
@@ -369,6 +369,10 @@ const MockData = () => {
     saveListConfig({ current: page, pageSize });
   };
 
+  const handleViewModeChange = (mode) => {
+    saveListConfig({ viewMode: mode, current: 1 });
+  };
+
   // 获取排序后的功能列表
   const getSortedFeatures = () => {
     const sorted = [...mockFeatures].sort((a, b) => {
@@ -517,6 +521,139 @@ const MockData = () => {
     );
   };
 
+  // 渲染列表视图
+  const renderListView = () => {
+    const columns = [
+      {
+        title: '状态',
+        dataIndex: 'active',
+        key: 'active',
+        width: 100,
+        render: (active, record) => (
+          <Switch
+            checked={active}
+            onChange={(checked, e) => {
+              e.stopPropagation();
+              handleToggleActive(record.id, active);
+            }}
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+          />
+        ),
+      },
+      {
+        title: '功能名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: { tooltip: true },
+        render: (name) => (
+          <Text strong style={{ fontSize: '14px' }}>{name}</Text>
+        ),
+      },
+      {
+        title: '功能描述',
+        dataIndex: 'description',
+        key: 'description',
+        ellipsis: { tooltip: true },
+        render: (description) => (
+          <Text type="secondary">{description || '无描述'}</Text>
+        ),
+      },
+      {
+        title: '接口数量',
+        dataIndex: 'interfaceCount',
+        key: 'interfaceCount',
+        width: 100,
+        align: 'center',
+        render: (count) => (
+          <Badge count={count || 0} showZero style={{ backgroundColor: '#1890ff' }} />
+        ),
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createdAt',
+        key: 'createdAt',
+        width: 120,
+        render: (createdAt) => (
+          <Text type="secondary">
+            {createdAt ? new Date(createdAt).toLocaleDateString() : '未知日期'}
+          </Text>
+        ),
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 200,
+        fixed: 'right',
+        render: (_, record) => (
+          <Space size="small">
+            <Tooltip title="管理接口">
+              <Button
+                type="link"
+                size="small"
+                icon={<ApiOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  viewInterfaces(record);
+                }}
+              >
+                接口
+              </Button>
+            </Tooltip>
+            <Tooltip title="编辑">
+              <Button
+                type="link"
+                size="small"
+                icon={<EditOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  openModal(record);
+                }}
+              />
+            </Tooltip>
+            <Tooltip title="导出">
+              <Button
+                type="link"
+                size="small"
+                icon={<ExportOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  exportFeatureConfig(record);
+                }}
+              />
+            </Tooltip>
+            <Tooltip title="删除">
+              <Button
+                type="link"
+                size="small"
+                danger
+                icon={<DeleteOutlined />}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  deleteFeature(record.id);
+                }}
+              />
+            </Tooltip>
+          </Space>
+        ),
+      },
+    ];
+
+    return (
+      <Table
+        columns={columns}
+        dataSource={getPaginatedFeatures()}
+        rowKey="id"
+        pagination={false}
+        onRow={(record) => ({
+          onClick: () => viewInterfaces(record),
+          style: { cursor: 'pointer' }
+        })}
+        rowClassName={(record) => !record.active ? 'inactive-row' : ''}
+      />
+    );
+  };
+
   return (
     <AppLayout>
       <div className="page-container">
@@ -585,7 +722,7 @@ const MockData = () => {
                 </div>
               </Col>
               
-              {/* 排序控制区域 */}
+              {/* 排序和视图控制区域 */}
               <Col xs={24} sm={12} md={8} lg={9}>
                 <div className="sort-controls">
                   <div className="control-group">
@@ -616,8 +753,30 @@ const MockData = () => {
                 </div>
               </Col>
               
+              {/* 视图切换区域 */}
+              <Col xs={24} sm={12} md={4} lg={3}>
+                <div className="view-mode-controls">
+                  <Button.Group>
+                    <Tooltip title="卡片视图">
+                      <Button
+                        type={listConfig.viewMode === 'card' ? 'primary' : 'default'}
+                        icon={<AppstoreOutlined />}
+                        onClick={() => handleViewModeChange('card')}
+                      />
+                    </Tooltip>
+                    <Tooltip title="列表视图">
+                      <Button
+                        type={listConfig.viewMode === 'list' ? 'primary' : 'default'}
+                        icon={<UnorderedListOutlined />}
+                        onClick={() => handleViewModeChange('list')}
+                      />
+                    </Tooltip>
+                  </Button.Group>
+                </div>
+              </Col>
+              
               {/* 分页控制区域 */}
-              <Col xs={24} sm={24} md={8} lg={9}>
+              <Col xs={24} sm={24} md={12} lg={6}>
                 <div className="pagination-controls">
                   <div className="control-group">
                     <span className="control-label">每页显示</span>
@@ -650,9 +809,13 @@ const MockData = () => {
             </div>
           ) : mockFeatures.length > 0 ? (
             <>
-              <Row gutter={[20, 20]} className="feature-grid">
-                {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
-              </Row>
+              {listConfig.viewMode === 'card' ? (
+                <Row gutter={[20, 20]} className="feature-grid">
+                  {getPaginatedFeatures().map(feature => renderFeatureCard(feature))}
+                </Row>
+              ) : (
+                renderListView()
+              )}
               
               {/* 分页组件 */}
               {mockFeatures.length > listConfig.pageSize && (

package/ui/src/pages/Settings.js

@@ -1,64 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import AppLayout from '../components/AppLayout';
-import { Card, Switch, message, Typography, Divider } from 'antd';
+import { Card, Typography, Empty } from 'antd';
 import '../styles/settings.css';
 
 const { Title, Text, Paragraph } = Typography;
 
-// localStorage工具函数
-const getUIVersion = () => {
-  try {
-    return localStorage.getItem('ui-version') || 'v1';
-  } catch (error) {
-    console.error('获取UI版本设置失败:', error);
-    return 'v1';
-  }
-};
-
-const setUIVersion = (version) => {
-  try {
-    localStorage.setItem('ui-version', version);
-    return true;
-  } catch (error) {
-    console.error('保存UI版本设置失败:', error);
-    return false;
-  }
-};
-
 const Settings = () => {
-  const [uiVersion, setUiVersionState] = useState(getUIVersion());
-
-  // 页面加载时同步localStorage状态
-  useEffect(() => {
-    const currentVersion = getUIVersion();
-    setUiVersionState(currentVersion);
-  }, []);
-
-  // 处理UI版本切换
-  const handleUIVersionChange = (checked) => {
-    const newVersion = checked ? 'v2' : 'v1';
-    
-    if (setUIVersion(newVersion)) {
-      setUiVersionState(newVersion);
-      
-      // 提示用户刷新页面以应用更改
-      message.success({
-        content: `已切换到${checked ? '重构后' : '重构前'}版本，页面将自动刷新`,
-        duration: 2,
-        onClose: () => {
-          window.location.reload();
-        }
-      });
-      
-      // 1秒后自动刷新
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
-    } else {
-      message.error('设置保存失败，请重试');
-    }
-  };
-
   return (
     <AppLayout>
       <div className="page-container">
@@ -72,39 +19,10 @@ const Settings = () => {
         </div>
 
         <Card title="界面设置" className="settings-card">
-          <div className="setting-item">
-            <div className="setting-label">
-              <Text strong>UI版本切换</Text>
-              <Paragraph type="secondary" style={{ margin: '4px 0 0 0', fontSize: '12px' }}>
-                切换使用重构前后的界面版本
-              </Paragraph>
-            </div>
-            <div className="setting-control">
-              <Switch
-                checked={uiVersion === 'v2'}
-                onChange={handleUIVersionChange}
-                checkedChildren="重构后"
-                unCheckedChildren="重构前"
-              />
-            </div>
-          </div>
-          
-          <Divider />
-          
-          <div style={{ padding: '16px 0' }}>
-            <Title level={5}>版本说明</Title>
-            <div style={{ marginLeft: '16px' }}>
-              <Paragraph>
-                <Text strong>重构前版本：</Text> 当前稳定版本的功能模块管理和接口管理界面
-              </Paragraph>
-              <Paragraph>
-                <Text strong>重构后版本：</Text> 新设计的界面版本，提供更好的用户体验和功能优化
-              </Paragraph>
-              <Paragraph type="warning">
-                <Text>注意：切换版本后页面将自动刷新以应用更改</Text>
-              </Paragraph>
-            </div>
-          </div>
+          <Empty 
+            description="暂无可配置项" 
+            style={{ padding: '40px 0' }}
+          />
         </Card>
       </div>
     </AppLayout>

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

@@ -1115,4 +1115,71 @@ input:checked + .slider:before {
   .ant-card-extra {
     margin-right: 60px;
   }
+}
+
+/* 视图切换控制样式 */
+.view-mode-controls {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.view-mode-controls .ant-btn-group {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+/* 列表视图样式 */
+.feature-list-card .ant-table-wrapper {
+  margin-top: 0;
+}
+
+.feature-list-card .ant-table {
+  font-size: 14px;
+}
+
+.feature-list-card .ant-table-thead > tr > th {
+  background-color: #fafafa;
+  font-weight: 600;
+  color: #262626;
+  padding: 16px;
+}
+
+.feature-list-card .ant-table-tbody > tr > td {
+  padding: 16px;
+}
+
+.feature-list-card .ant-table-tbody > tr:hover {
+  background-color: #f5f5f5;
+}
+
+.feature-list-card .ant-table-tbody > tr.inactive-row {
+  background-color: #fafafa;
+  opacity: 0.7;
+}
+
+.feature-list-card .ant-table-tbody > tr.inactive-row:hover {
+  background-color: #f0f0f0;
+}
+
+/* 列表视图中的操作按钮样式 */
+.feature-list-card .ant-btn-link {
+  padding: 4px 8px;
+  height: auto;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .view-mode-controls {
+    justify-content: center;
+    margin-top: 12px;
+  }
+  
+  .feature-list-card .ant-table {
+    font-size: 13px;
+  }
+  
+  .feature-list-card .ant-table-thead > tr > th,
+  .feature-list-card .ant-table-tbody > tr > td {
+    padding: 12px 8px;
+  }
 }