whistle.mock-plugins 1.1.2-dev.2 → 1.1.3-beta.1

package/ui/src/pages/MockDataV2.js

@@ -0,0 +1,702 @@
+/**
+ * MockDataV2.js - 功能模块管理页面（重构后版本）
+ * 这是重构后的新版本界面，提供更好的用户体验和功能优化
+ * 当前内容与V1版本相同，等待后续重构
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import AppLayout from '../components/AppLayout';
+import { 
+  Form, Input, Modal, Button, message, Card, Switch, 
+  Row, Col, Badge, Popconfirm, Alert, Space, Select, 
+  Tooltip, Menu, Dropdown, Pagination, AutoComplete
+} from 'antd';
+import { 
+  PlusOutlined, DeleteOutlined, EditOutlined, SettingOutlined,
+  ExportOutlined, ImportOutlined, SearchOutlined, FilterOutlined,
+  SortAscendingOutlined, ReloadOutlined, ClearOutlined, DownloadOutlined
+} from '@ant-design/icons';
+import '../styles/mock-data.css';
+
+const { Option } = Select;
+const { TextArea } = Input;
+
+// 刷新缓存工具函数
+const flushCache = async () => {
+  try {
+    await fetch('/cgi-bin/flushCache', { method: 'POST' });
+  } catch (error) {
+    console.error('刷新缓存失败:', error);
+    throw error;
+  }
+};
+
+
+const MockData = () => {
+  const history = useHistory();
+  const [mockFeatures, setMockFeatures] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+  const [currentFeature, setCurrentFeature] = useState(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    active: true
+  });
+  const [loading, setLoading] = useState(true);
+  const [form] = Form.useForm();
+
+  // 排序和分页配置（支持缓存）
+  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
+    };
+  });
+
+  // 保存列表配置到localStorage
+  const saveListConfig = (config) => {
+    const newConfig = { ...listConfig, ...config };
+    setListConfig(newConfig);
+    localStorage.setItem('feature-list-config', JSON.stringify(newConfig));
+  };
+
+  // 加载功能列表
+  useEffect(() => {
+    fetchFeatures();
+  }, []);
+
+  // 获取所有功能模块
+  const fetchFeatures = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/cgi-bin/features');
+      const result = await response.json();
+      
+      if (result.code === 0) {
+        setMockFeatures(result.data || []);
+      } else {
+        console.error('获取功能模块失败:', result.message);
+        message.error('获取功能模块失败: ' + result.message);
+      }
+    } catch (error) {
+      console.error('获取功能模块错误:', error);
+      message.error('获取功能模块失败, 请检查网络连接');
+    } 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 handleSubmit = async (values) => {
+    console.log('表单提交数据:', values);
+    try {
+      const submitData = {
+        name: values.name.trim(),
+        description: values.description?.trim() || '',
+        active: values.active !== false
+      };
+
+      console.log('处理后的提交数据:', submitData);
+
+      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 || '未知错误'));
+        }
+      }
+    } catch (error) {
+      console.error('操作失败:', error);
+      message.error('操作失败: ' + error.message);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      const response = await fetch(`/cgi-bin/features?id=${id}`, {
+        method: 'DELETE',
+      });
+      
+      const result = await response.json();
+      if (result.code === 0) {
+        message.success('功能模块删除成功');
+        fetchFeatures();
+        
+        // 刷新缓存
+        await flushCache();
+      } else {
+        message.error('功能模块删除失败: ' + (result.message || '未知错误'));
+      }
+    } catch (error) {
+      console.error('删除失败:', error);
+      message.error('删除失败: ' + error.message);
+    }
+  };
+
+  const handleToggleActive = async (id, currentActive) => {
+    try {
+      const response = await fetch(`/cgi-bin/features?id=${id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          active: !currentActive
+        }),
+      });
+      
+      const result = await response.json();
+      if (result.code === 0) {
+        message.success(`功能模块${!currentActive ? '启用' : '禁用'}成功`);
+        fetchFeatures();
+        
+        // 刷新缓存
+        await flushCache();
+      } else {
+        message.error(`功能模块${!currentActive ? '启用' : '禁用'}失败: ` + (result.message || '未知错误'));
+      }
+    } catch (error) {
+      console.error(`${!currentActive ? '启用' : '禁用'}失败:`, error);
+      message.error(`${!currentActive ? '启用' : '禁用'}失败: ` + error.message);
+    }
+  };
+
+  const gotoInterfaceManagement = (featureId) => {
+    history.push(`/interface/${featureId}`);
+  };
+
+  // 导出功能配置
+  const exportFeatureConfig = async () => {
+    try {
+      const response = await fetch('/cgi-bin/export-features');
+      const result = await response.json();
+      
+      if (result.code === 0) {
+        // 创建下载链接
+        const dataStr = JSON.stringify(result.data, null, 2);
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
+        const url = URL.createObjectURL(dataBlob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `whistle-mock-features-${new Date().getTime()}.json`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+        
+        message.success('功能配置导出成功');
+      } else {
+        message.error('导出失败: ' + (result.message || '未知错误'));
+      }
+    } catch (error) {
+      console.error('导出失败:', error);
+      message.error('导出失败: ' + error.message);
+    }
+  };
+
+  // 导入功能配置
+  const importFeatureConfig = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      
+      try {
+        const text = await file.text();
+        const data = JSON.parse(text);
+        
+        const response = await fetch('/cgi-bin/import-features', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(data),
+        });
+        
+        const result = await response.json();
+        if (result.code === 0) {
+          message.success('功能配置导入成功');
+          fetchFeatures();
+          
+          // 刷新缓存
+          await flushCache();
+        } else {
+          message.error('导入失败: ' + (result.message || '未知错误'));
+        }
+      } catch (error) {
+        console.error('导入失败:', error);
+        message.error('导入失败: ' + error.message);
+      }
+    };
+    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 || '';
+      }
+
+      if (listConfig.sortOrder === 'descend') {
+        return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
+      } else {
+        return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
+      }
+    });
+
+    return filtered;
+  };
+
+  const filteredData = getFilteredAndSortedData();
+
+  // 分页计算
+  const startIndex = (listConfig.current - 1) * listConfig.pageSize;
+  const endIndex = startIndex + listConfig.pageSize;
+  const paginatedData = filteredData.slice(startIndex, endIndex);
+
+  // 排序菜单
+  const sortMenu = (
+    <Menu onClick={({ key }) => {
+      const [sortBy, sortOrder] = key.split('-');
+      saveListConfig({ sortBy, sortOrder, current: 1 });
+    }}>
+      <Menu.Item key="name-ascend">名称 (A-Z)</Menu.Item>
+      <Menu.Item key="name-descend">名称 (Z-A)</Menu.Item>
+      <Menu.Item key="createdAt-descend">创建时间 (新-旧)</Menu.Item>
+      <Menu.Item key="createdAt-ascend">创建时间 (旧-新)</Menu.Item>
+      <Menu.Item key="interfaceCount-descend">接口数量 (多-少)</Menu.Item>
+      <Menu.Item key="interfaceCount-ascend">接口数量 (少-多)</Menu.Item>
+      <Menu.Item key="active-descend">状态 (启用优先)</Menu.Item>
+      <Menu.Item key="active-ascend">状态 (禁用优先)</Menu.Item>
+    </Menu>
+  );
+
+  const 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>
+    );
+  };
+
+  return (
+    <AppLayout>
+      <div className="page-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>
+        
+        <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">
+                <Input
+                  placeholder="搜索功能名称或描述"
+                  prefix={<SearchOutlined />}
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  style={{ width: 240 }}
+                  allowClear
+                />
+                <Select
+                  value={filterStatus}
+                  onChange={setFilterStatus}
+                  style={{ width: 120 }}
+                >
+                  <Option value="all">全部状态</Option>
+                  <Option value="active">已启用</Option>
+                  <Option value="inactive">已禁用</Option>
+                </Select>
+              </div>
+              
+              <div className="action-controls">
+                <Space>
+                  <Dropdown overlay={sortMenu} trigger={['click']}>
+                    <Button icon={<SortAscendingOutlined />}>
+                      排序 
+                    </Button>
+                  </Dropdown>
+                  <Button 
+                    icon={<DownloadOutlined />}
+                    onClick={exportFeatureConfig}
+                  >
+                    导出配置
+                  </Button>
+                  <Button 
+                    icon={<ReloadOutlined />}
+                    onClick={fetchFeatures}
+                    loading={loading}
+                  >
+                    刷新
+                  </Button>
+                  {(searchText || filterStatus !== 'all') && (
+                    <Button 
+                      icon={<ClearOutlined />}
+                      onClick={() => {
+                        setSearchText('');
+                        setFilterStatus('all');
+                      }}
+                    >
+                      清除筛选
+                    </Button>
+                  )}
+                </Space>
+              </div>
+            </div>
+            
+            <div className="result-info">
+              <Space>
+                <span>
+                  共 {mockFeatures.length} 个功能模块
+                  {filteredData.length !== mockFeatures.length && (
+                    <span>，筛选后 {filteredData.length} 个</span>
+                  )}
+                </span>
+                <Badge 
+                  count={mockFeatures.filter(f => f.active !== false).length} 
+                  style={{ backgroundColor: '#52c41a' }} 
+                  title="启用的功能数量"
+                />
+                <Badge 
+                  count={mockFeatures.filter(f => f.active === false).length} 
+                  style={{ backgroundColor: '#ff4d4f' }} 
+                  title="禁用的功能数量"
+                />
+              </Space>
+            </div>
+          </Card>
+        )}
+
+        {/* 功能模块列表 */}
+        <div className="feature-list-container">
+          {loading ? (
+            <div className="loading-container">
+              <Row gutter={[16, 16]}>
+                {[1, 2, 3, 4].map(i => (
+                  <Col xs={24} sm={12} md={8} lg={6} key={i}>
+                    <Card loading style={{ height: 200 }} />
+                  </Col>
+                ))}
+              </Row>
+            </div>
+          ) : 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' }}
+            />
+          ) : (
+            <>
+              <Row gutter={[16, 16]} className="feature-grid">
+                {paginatedData.map(renderFeatureCard)}
+              </Row>
+              
+              {/* 分页控件 */}
+              {filteredData.length > listConfig.pageSize && (
+                <div className="pagination-container">
+                  <Pagination
+                    current={listConfig.current}
+                    pageSize={listConfig.pageSize}
+                    total={filteredData.length}
+                    showSizeChanger
+                    showQuickJumper
+                    showTotal={(total, range) => 
+                      `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
+                    }
+                    pageSizeOptions={['8', '12', '16', '24']}
+                    onChange={(current, pageSize) => {
+                      saveListConfig({ current, pageSize });
+                    }}
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* 新建/编辑功能模块弹窗 */}
+        <Modal
+          title={currentFeature ? '编辑功能模块' : '新建功能模块'}
+          open={showModal}
+          onCancel={() => setShowModal(false)}
+          footer={null}
+          destroyOnClose
+        >
+          <Form
+            form={form}
+            layout="vertical"
+            onFinish={handleSubmit}
+            initialValues={{
+              name: '',
+              description: '',
+              active: true
+            }}
+          >
+            <Form.Item
+              name="name"
+              label="功能名称"
+              rules={[
+                { required: true, message: '请输入功能名称' },
+                { max: 50, message: '功能名称不能超过50个字符' }
+              ]}
+            >
+              <Input placeholder="请输入功能名称" />
+            </Form.Item>
+            
+            <Form.Item
+              name="description"
+              label="功能描述"
+              rules={[
+                { max: 200, message: '功能描述不能超过200个字符' }
+              ]}
+            >
+              <TextArea
+                placeholder="请输入功能描述（可选）"
+                rows={3}
+                showCount
+                maxLength={200}
+              />
+            </Form.Item>
+            
+            <Form.Item
+              name="active"
+              label="启用状态"
+              valuePropName="checked"
+            >
+              <Switch checkedChildren="启用" unCheckedChildren="禁用" />
+            </Form.Item>
+            
+            <Form.Item className="form-actions">
+              <Space>
+                <Button onClick={() => setShowModal(false)}>
+                  取消
+                </Button>
+                <Button type="primary" htmlType="submit">
+                  {currentFeature ? '保存' : '创建'}
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </Modal>
+      </div>
+    </AppLayout>
+  );
+};
+
+export default MockData;