whistle.mock-plugins 1.3.1 → 1.4.0-beta.2

package/ui/src/components/FeatureCard.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import '../styles/feature-card.css';
-
-const FeatureCard = ({ feature }) => {
-  const { name, description, active, interfaceCount, createdAt } = feature;
-  
-  // 生成随机的主题色（根据当前主题选择色系）
-  const getRandomColor = () => {
-    const isEarth = document.body.classList.contains('earth-theme');
-    if (isEarth) {
-      const colors = ['#b87333', '#6b8e23', '#d4a017', '#8d6e63', '#c0392b'];
-      return colors[Math.floor(Math.random() * colors.length)];
-    }
-    const colors = ['#00f0ff', '#00ff41', '#f0e800', '#ff00a0', '#bd00ff'];
-    return colors[Math.floor(Math.random() * colors.length)];
-  };
-  
-  const themeColor = getRandomColor();
-  
-  return (
-    <div className="feature-card">
-      <div className="feature-card-color-bar" style={{ backgroundColor: themeColor }}></div>
-      <div className="feature-card-header">
-        <h3 className="feature-card-title">{name}</h3>
-        <span className={`feature-card-badge ${active ? 'active' : 'inactive'}`}>
-          {active ? '已启用' : '未启用'}
-        </span>
-      </div>
-      <div className="feature-card-content">
-        <p className="feature-card-description">{description || '没有描述'}</p>
-        <div className="feature-card-stats">
-          <div className="feature-stat">
-            <span className="feature-stat-value">{interfaceCount}</span>
-            <span className="feature-stat-label">接口数量</span>
-          </div>
-          {createdAt && (
-            <div className="feature-stat">
-              <span className="feature-stat-label">创建于</span>
-              <span className="feature-stat-value feature-date">{createdAt}</span>
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="feature-card-footer">
-        <button className="card-btn edit-btn">
-          <i className="icon-edit"></i>
-          编辑
-        </button>
-        <button className="card-btn primary-btn" style={{ borderColor: themeColor, color: themeColor }}>
-          <i className="icon-manage"></i>
-          管理接口
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default FeatureCard; 

package/ui/src/components/KeyboardShortcutsHelp.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Modal, Table } from 'antd';
-import { getShortcutsList } from '../hooks/useKeyboardShortcuts';
-
-const KeyboardShortcutsHelp = ({ visible, onClose }) => {
-  const shortcuts = getShortcutsList();
-
-  const columns = [
-    {
-      title: '快捷键',
-      dataIndex: 'key',
-      key: 'key',
-      width: 180,
-      render: (text) => (
-        <kbd style={{
-          display: 'inline-block',
-          padding: '4px 8px',
-          fontSize: '12px',
-          fontFamily: 'monospace',
-          lineHeight: 1,
-          color: '#333',
-          background: '#f5f5f5',
-          border: '1px solid #d9d9d9',
-          borderRadius: '4px',
-          boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
-        }}>
-          {text}
-        </kbd>
-      ),
-    },
-    {
-      title: '功能',
-      dataIndex: 'desc',
-      key: 'desc',
-    },
-  ];
-
-  return (
-    <Modal
-      title="⌨️ 键盘快捷键"
-      open={visible}
-      onCancel={onClose}
-      footer={null}
-      width={480}
-    >
-      <Table
-        dataSource={shortcuts.map((s, i) => ({ ...s, id: i }))}
-        columns={columns}
-        rowKey="id"
-        pagination={false}
-        size="small"
-        showHeader={false}
-      />
-    </Modal>
-  );
-};
-
-export default KeyboardShortcutsHelp;

package/ui/src/components/Layout.js

@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-import '../styles/layout.css';
-
-const Layout = ({ children }) => {
-  const [activeFeature, setActiveFeature] = useState(null);
-  const [features, setFeatures] = useState([
-    { id: 1, name: '用户数据', active: true, count: 3 },
-    { id: 2, name: '订单信息', active: false, count: 2 },
-    { id: 3, name: '商品列表', active: false, count: 5 }
-  ]);
-
-  const handleFeatureClick = (id) => {
-    setActiveFeature(id);
-    // 更新功能状态
-    setFeatures(features.map(feature => ({
-      ...feature,
-      active: feature.id === id ? !feature.active : feature.active
-    })));
-  };
-
-  const handleCreateFeature = () => {
-    // 模拟创建新功能
-    const newId = features.length > 0 ? Math.max(...features.map(f => f.id)) + 1 : 1;
-    const newFeature = {
-      id: newId,
-      name: `新功能 ${newId}`,
-      active: false,
-      count: 0
-    };
-    setFeatures([...features, newFeature]);
-  };
-
-  return (
-    <div className="layout">
-      {/* 顶部导航栏 */}
-      <div className="header">
-        <div className="logo">
-          <div className="logo-icon">W</div>
-          Whistle 接口代理插件
-        </div>
-        <div className="search">
-          <input type="text" placeholder="搜索..." />
-        </div>
-        <div className="header-actions">
-          <button>
-            <i>🔄</i> 刷新
-          </button>
-          <button>
-            <i>⚙️</i> 设置
-          </button>
-        </div>
-      </div>
-      
-      {/* 主内容区域 */}
-      <div className="main-container">
-        {/* 左侧导航 */}
-        <div className="sidebar">
-          <div className="create-feature">
-            <button onClick={handleCreateFeature}>+ 创建新功能</button>
-          </div>
-          
-          <div className="feature-list">
-            {features.map(feature => (
-              <div 
-                key={feature.id}
-                className={`feature-item ${activeFeature === feature.id ? 'active' : ''}`}
-                onClick={() => handleFeatureClick(feature.id)}
-              >
-                <div className="feature-item-name">
-                  <div className={`status-icon ${feature.active ? 'active' : ''}`}>
-                    {feature.active ? '✓' : ''}
-                  </div>
-                  {feature.name}
-                </div>
-                <div className="feature-item-count">{feature.count}</div>
-              </div>
-            ))}
-          </div>
-          
-          <div className="sidebar-footer">
-            Whistle Mock Plugin v0.2.0
-          </div>
-        </div>
-        
-        {/* 内容区 */}
-        <div className="content">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Layout; 

package/ui/src/components/MainNav.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import '../styles/main-nav.css';
-
-const MainNav = () => {
-  const location = useLocation();
-  const pathname = location.pathname;
-  
-  // 检查当前路径是否匹配导航项
-  const isActive = (path) => {
-    if (path === '/' && pathname === '/') return true;
-    if (path !== '/' && pathname.startsWith(path)) return true;
-    return false;
-  };
-
-  return (
-    <div className="main-nav">
-      <div className="main-header">
-        <h1>Whistle Mock 数据工厂</h1>
-      </div>
-      <nav className="nav-tabs">
-        <Link to="/" className={`nav-tab ${isActive('/') ? 'active' : ''}`}>
-          首页
-        </Link>
-        <Link to="/mock" className={`nav-tab ${isActive('/mock') ? 'active' : ''}`}>
-          Mock数据
-        </Link>
-        <Link to="/file-proxy" className={`nav-tab ${isActive('/file-proxy') ? 'active' : ''}`}>
-          接口配置
-        </Link>
-        <Link to="/url-redirect" className={`nav-tab ${isActive('/url-redirect') ? 'active' : ''}`}>
-          规则管理
-        </Link>
-        <Link to="/settings" className={`nav-tab ${isActive('/settings') ? 'active' : ''}`}>
-          设置
-        </Link>
-      </nav>
-    </div>
-  );
-};
-
-export default MainNav; 

package/ui/src/components/PageContainer.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import MainNav from './MainNav';
-import '../styles/page-container.css';
-
-const PageContainer = ({ children }) => {
-  return (
-    <div className="page-container">
-      <MainNav />
-      <div className="page-content">
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default PageContainer; 

package/ui/src/components/VersionModal.js

@@ -1,99 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Spin, Alert } from 'antd';
-import ReactMarkdown from 'react-markdown';
-import '../styles/version-modal.css';
-
-/**
- * 获取版本信息的请求函数
- * @returns {Promise<Object>} 版本信息
- */
-const getVersionInfo = async () => {
-  const response = await fetch('/cgi-bin/version', {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  });
-  
-  const data = await response.json();
-  
-  if (!response.ok) {
-    throw new Error(data.message || '请求失败');
-  }
-  
-  return data;
-};
-
-/**
- * 版本信息模态框组件
- * @param {Object} props - 组件属性
- * @param {boolean} props.visible - 是否显示模态框
- * @param {Function} props.onCancel - 取消回调函数
- */
-const VersionModal = ({ visible, onCancel }) => {
-  const [versionContent, setVersionContent] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    if (visible) {
-      fetchVersionInfo();
-    }
-  }, [visible]);
-
-  const fetchVersionInfo = async () => {
-    setLoading(true);
-    setError(null);
-    
-    try {
-      const response = await getVersionInfo();
-      if (response.code === 0) {
-        setVersionContent(response.data.content);
-      } else {
-        setError(response.message);
-      }
-    } catch (err) {
-      setError(`获取版本信息失败: ${err.message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Modal
-      title="版本更新记录"
-      open={visible}
-      onCancel={onCancel}
-      footer={null}
-      width={800}
-      className="version-modal"
-    >
-      <div className="version-modal-content">
-        {loading && (
-          <div className="version-modal-loading">
-            <Spin size="large" />
-            <p>正在加载版本信息...</p>
-          </div>
-        )}
-        
-        {error && (
-          <Alert
-            message="加载失败"
-            description={error}
-            type="error"
-            showIcon
-          />
-        )}
-        
-        {!loading && !error && versionContent && (
-          <div className="version-markdown-content">
-            <ReactMarkdown>
-              {versionContent.replace(/^#\s*🔄?\s*版本更新记录\s*\n+/, '')}
-            </ReactMarkdown>
-          </div>
-        )}
-      </div>
-    </Modal>
-  );
-};
-
-export default VersionModal;

package/ui/src/components/interface-management/DataManagementDrawer.js

@@ -1,115 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Drawer, Form, Input, message, Button, Space } from 'antd';
-import axios from 'axios';
-import { ResponseContentEditor, PreviewModal, formatResponseContent, refreshCacheAfterUpdate } from '.';
-
-const DataManagementDrawer = ({ visible, onCancel, interfaceItem, onSaved }) => {
-  const [form] = Form.useForm();
-  const [previewVisible, setPreviewVisible] = useState(false);
-  const [previewContent, setPreviewContent] = useState(null);
-
-  useEffect(() => {
-    if (visible && interfaceItem) {
-      let responses = Array.isArray(interfaceItem.responses) ? interfaceItem.responses : [];
-      let activeResponseId = interfaceItem.activeResponseId || (responses[0] && responses[0].id) || '';
-      form.setFieldsValue({ responses, activeResponseId });
-    }
-  }, [visible, interfaceItem]);
-
-  const handlePreview = () => {
-    const values = form.getFieldsValue(true);
-    const responses = Array.isArray(values.responses) ? values.responses : [];
-    const activeResponse = responses.find(r => r.id === values.activeResponseId) || responses[0];
-    if (!activeResponse) {
-      message.error('未找到有效的响应内容');
-      return;
-    }
-    const contentType = 'application/json; charset=utf-8';
-    const formatted = formatResponseContent(activeResponse.content || '', contentType);
-    setPreviewContent({ title: `预览: ${activeResponse.name || '未命名响应'}`, content: formatted, contentType, description: '' });
-    setPreviewVisible(true);
-  };
-
-  const handleOk = async () => {
-    try {
-      await form.validateFields();
-      const values = form.getFieldsValue(true);
-      const payload = {
-        responses: Array.isArray(values.responses) ? values.responses : [],
-        activeResponseId: values.activeResponseId || (values.responses && values.responses[0] && values.responses[0].id) || ''
-      };
-      if (!interfaceItem || !interfaceItem.id) {
-        message.error('缺少接口ID，无法保存');
-        return;
-      }
-      const res = await axios.patch(`/cgi-bin/interfaces/${interfaceItem.id}`, payload);
-      if (res.data && res.data.code === 0) {
-        message.success('保存成功');
-        await refreshCacheAfterUpdate();
-        if (onSaved) onSaved();
-        if (onCancel) onCancel();
-      } else {
-        throw new Error(res.data?.message || '保存失败');
-      }
-    } catch (err) {
-      if (err && err.errorFields) return; // 表单校验错误
-      console.error('保存失败', err);
-      message.error(err.response?.data?.message || err.message || '保存失败');
-    }
-  };
-
-  return (
-    <>
-      <Drawer
-        title="数据管理"
-        placement="right"
-        width={1040}
-        open={visible}
-        onClose={onCancel}
-        destroyOnClose
-        bodyStyle={{ paddingBottom: 80 }}
-        footer={
-          <div style={{ textAlign: 'right' }}>
-            <Space>
-              <Button onClick={onCancel}>取消</Button>
-              <Button type="primary" onClick={handleOk}>保存</Button>
-            </Space>
-          </div>
-        }
-      >
-        <Form form={form} layout="vertical" initialValues={{ responses: [], activeResponseId: '' }}>
-          <Form.Item name="responses" hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item name="activeResponseId" hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item noStyle shouldUpdate>
-            {({ getFieldValue }) => {
-              const responses = getFieldValue('responses') || [];
-              const activeResponseId = getFieldValue('activeResponseId') || (responses[0] && responses[0].id) || '';
-              return (
-                <ResponseContentEditor
-                  form={form}
-                  responses={responses}
-                  activeResponseId={activeResponseId}
-                  onPreview={handlePreview}
-                  enableSorting={true}
-                />
-              );
-            }}
-          </Form.Item>
-        </Form>
-      </Drawer>
-
-      <PreviewModal
-        visible={previewVisible}
-        onCancel={() => setPreviewVisible(false)}
-        previewContent={previewContent}
-      />
-    </>
-  );
-};
-
-export default DataManagementDrawer;
-

package/ui/src/components/interface-management/DataManagementModal.js

@@ -1,110 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, message } from 'antd';
-import axios from 'axios';
-import { ResponseContentEditor, PreviewModal, formatResponseContent, refreshCacheAfterUpdate } from '.';
-
-const DataManagementModal = ({ visible, onCancel, interfaceItem, onSaved }) => {
-  const [form] = Form.useForm();
-  const [previewVisible, setPreviewVisible] = useState(false);
-  const [previewContent, setPreviewContent] = useState(null);
-
-  useEffect(() => {
-    if (visible && interfaceItem) {
-      let responses = Array.isArray(interfaceItem.responses) ? interfaceItem.responses : [];
-      let activeResponseId = interfaceItem.activeResponseId || (responses[0] && responses[0].id) || '';
-      form.setFieldsValue({ responses, activeResponseId });
-    }
-  }, [visible, interfaceItem]);
-
-  const handlePreview = () => {
-    const values = form.getFieldsValue(true);
-    const responses = Array.isArray(values.responses) ? values.responses : [];
-    const activeResponse = responses.find(r => r.id === values.activeResponseId) || responses[0];
-    if (!activeResponse) {
-      message.error('未找到有效的响应内容');
-      return;
-    }
-    const contentType = 'application/json; charset=utf-8';
-    const formatted = formatResponseContent(activeResponse.content || '', contentType);
-    setPreviewContent({ title: `预览: ${activeResponse.name || '未命名响应'}`, content: formatted, contentType, description: '' });
-    setPreviewVisible(true);
-  };
-
-  const handleOk = async () => {
-    try {
-      await form.validateFields();
-      const values = form.getFieldsValue(true);
-      const payload = {
-        responses: Array.isArray(values.responses) ? values.responses : [],
-        activeResponseId: values.activeResponseId || (values.responses && values.responses[0] && values.responses[0].id) || ''
-      };
-      if (!interfaceItem || !interfaceItem.id) {
-        message.error('缺少接口ID，无法保存');
-        return;
-      }
-      const res = await axios.patch(`/cgi-bin/interfaces/${interfaceItem.id}`, payload);
-      if (res.data && res.data.code === 0) {
-        message.success('保存成功');
-        await refreshCacheAfterUpdate();
-        if (onSaved) onSaved();
-        if (onCancel) onCancel();
-      } else {
-        throw new Error(res.data?.message || '保存失败');
-      }
-    } catch (err) {
-      if (err && err.errorFields) return; // 表单校验错误
-      console.error('保存失败', err);
-      message.error(err.response?.data?.message || err.message || '保存失败');
-    }
-  };
-
-  return (
-    <>
-      <Modal
-        title="数据管理"
-        open={visible}
-        onOk={handleOk}
-        onCancel={onCancel}
-        width={1040}
-        destroyOnClose
-        okText="保存"
-        cancelText="取消"
-        bodyStyle={{ maxHeight: '80vh', overflow: 'auto', padding: '24px' }}
-      >
-        <Form form={form} layout="vertical" initialValues={{ responses: [], activeResponseId: '' }}>
-          <Form.Item name="responses" hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item name="activeResponseId" hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item noStyle shouldUpdate>
-            {({ getFieldValue }) => {
-              const responses = getFieldValue('responses') || [];
-              const activeResponseId = getFieldValue('activeResponseId') || (responses[0] && responses[0].id) || '';
-              return (
-                <ResponseContentEditor
-                  form={form}
-                  responses={responses}
-                  activeResponseId={activeResponseId}
-                  onPreview={handlePreview}
-                  enableSorting={true}
-                />
-              );
-            }}
-          </Form.Item>
-        </Form>
-      </Modal>
-
-      <PreviewModal
-        visible={previewVisible}
-        onCancel={() => setPreviewVisible(false)}
-        previewContent={previewContent}
-      />
-    </>
-  );
-};
-
-export default DataManagementModal;
-
-