whistle.mock-plugins 1.2.1-beta.6 → 1.2.2-beta.2

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.6",
+  "version": "1.2.2-beta.2",
   "description": "Whistle 插件，用于快速创建 API 模拟数据",
   "main": "lib/index.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable": "^3.0.5",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.3",
     "react-markdown": "^8.0.7",

package/ui/src/pages/InterfaceManagementV2.js

@@ -15,6 +15,7 @@ import {
   FileTextOutlined, PlusCircleOutlined, SettingOutlined,
   SearchOutlined, FilterOutlined, ReloadOutlined, DownOutlined, QuestionCircleOutlined, CopyOutlined
 } from '@ant-design/icons';
+// 移除 react-resizable，改用原生实现
 import '../styles/interface-management.css';
 import axios from 'axios';
 
@@ -97,13 +98,27 @@ const InterfaceManagement = () => {
   const [tableConfig, setTableConfig] = useState(() => {
     const cached = localStorage.getItem('interface-table-config');
     const defaultVisibleColumns = COLUMN_CONFIG.map(col => col.key);
-    return cached ? JSON.parse(cached) : {
+    const defaultConfig = {
       sortOrder: null,
       sortField: null,
       pageSize: 10,
       current: 1,
-      visibleColumns: defaultVisibleColumns
+      visibleColumns: defaultVisibleColumns,
+      columnWidths: {
+        currentResponse: 180
+      }
     };
+    
+    if (cached) {
+      const parsedConfig = JSON.parse(cached);
+      // 确保 columnWidths 存在
+      if (!parsedConfig.columnWidths) {
+        parsedConfig.columnWidths = { currentResponse: 180 };
+      }
+      return parsedConfig;
+    }
+    
+    return defaultConfig;
   });
 
   // 保存表格配置到localStorage
@@ -675,7 +690,12 @@ const InterfaceManagement = () => {
   // 重置列配置
   const handleResetColumns = () => {
     const defaultColumns = COLUMN_CONFIG.map(col => col.key);
-    saveTableConfig({ visibleColumns: defaultColumns });
+    saveTableConfig({ 
+      visibleColumns: defaultColumns,
+      columnWidths: {
+        currentResponse: 180
+      }
+    });
   };
 
   // 切换列配置面板显示
@@ -706,6 +726,61 @@ const InterfaceManagement = () => {
     message.success('数据已刷新');
   };
 
+  // 可调整大小的表头组件（使用原生实现）
+  const ResizableTitle = (props) => {
+    const { onResize, width, columnKey, ...restProps } = props;
+
+    if (!width || !onResize) {
+      return <th {...restProps} />;
+    }
+
+    const handleMouseDown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      const startX = e.clientX;
+      const startWidth = width;
+
+      const handleMouseMove = (moveEvent) => {
+        const deltaX = moveEvent.clientX - startX;
+        const newWidth = Math.max(50, startWidth + deltaX); // 最小宽度 50px
+        onResize(columnKey, newWidth);
+      };
+
+      const handleMouseUp = () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    };
+
+    return (
+      <th {...restProps} style={{ ...restProps.style, position: 'relative' }}>
+        {restProps.children}
+        <span
+          className="column-resize-handle"
+          onMouseDown={handleMouseDown}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </th>
+    );
+  };
+
+  // 处理列宽调整
+  const handleResize = (columnKey, newWidth) => {
+    const newColumnWidths = {
+      ...tableConfig.columnWidths,
+      [columnKey]: newWidth
+    };
+    saveTableConfig({ columnWidths: newColumnWidths });
+  };
+
   // 批量操作接口状态
   const handleBatchOperation = async (active) => {
     if (!selectedRowKeys || selectedRowKeys.length === 0) {
@@ -803,7 +878,12 @@ const InterfaceManagement = () => {
       title: '当前响应',
       dataIndex: 'activeResponseId',
       key: 'currentResponse',
-      width: 180,
+      width: tableConfig.columnWidths?.currentResponse || 180,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        columnKey: 'currentResponse',
+        onResize: handleResize,
+      }),
       render: (activeResponseId, record) => {
         // 如果没有响应数据，返回空
         if (!record.responses || !Array.isArray(record.responses) || record.responses.length === 0) {
@@ -822,6 +902,7 @@ const InterfaceManagement = () => {
             style={{ width: '100%' }}
             onChange={(value) => handleResponseSwitch(record.id, value)}
             disabled={record.proxyType !== 'response'}
+            getPopupContainer={(trigger) => trigger.parentNode}
           >
             {record.responses.map(resp => (
               <Option key={resp.id} value={resp.id}>
@@ -1333,6 +1414,11 @@ const InterfaceManagement = () => {
                 selectedRowKeys,
                 onChange: onSelectChange,
               }}
+              components={{
+                header: {
+                  cell: ResizableTitle,
+                },
+              }}
               size="middle"
               pagination={{
                 current: tableConfig.current,

package/ui/src/pages/MockDataV2.js

@@ -5,8 +5,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 } 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';
 
@@ -40,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
     };
   });
 
@@ -368,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) => {
@@ -516,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">
@@ -584,7 +722,7 @@ const MockData = () => {
                 </div>
               </Col>
               
-              {/* 排序控制区域 */}
+              {/* 排序和视图控制区域 */}
               <Col xs={24} sm={12} md={8} lg={9}>
                 <div className="sort-controls">
                   <div className="control-group">
@@ -615,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>
@@ -649,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/styles/interface-management.css

@@ -294,10 +294,23 @@
 .interface-table td {
   padding: 12px 16px !important;
   white-space: nowrap;
-  overflow: hidden;
+  overflow: visible !important;
   text-overflow: ellipsis;
 }
 
+/* 确保表格容器不裁剪下拉菜单 */
+.interface-list-container {
+  overflow: visible !important;
+}
+
+.interface-list-container .ant-table-container {
+  overflow: visible !important;
+}
+
+.interface-list-container .ant-table-body {
+  overflow: visible !important;
+}
+
 /* 卡片视图样式 */
 .interface-card-view {
   padding-bottom: 20px;
@@ -1283,3 +1296,35 @@
 .interface-table .ant-pagination-options {
   margin-right: 16px;
 }
+
+/* 可调整列宽样式 */
+.column-resize-handle {
+  position: absolute;
+  right: -5px;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: col-resize;
+  z-index: 1;
+  user-select: none;
+}
+
+.column-resize-handle:hover {
+  background-color: rgba(24, 144, 255, 0.2);
+}
+
+.column-resize-handle::after {
+  content: '';
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2px;
+  height: 20px;
+  background-color: #d9d9d9;
+  transition: background-color 0.3s;
+}
+
+.column-resize-handle:hover::after {
+  background-color: #1890ff;
+}

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;
+  }
 }