npm - whistle.mock-plugins - Versions diffs - 1.0.0 - Mend

whistle.mock-plugins 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/API.md +247 -0
package/README.md +91 -0
package/app/cgi-bin/features.js +285 -0
package/app/cgi-bin/index.js +31 -0
package/app/cgi-bin/interfaces.js +409 -0
package/app/cgi-bin/logs.js +151 -0
package/app/cgi-bin/test-interface.js +152 -0
package/app/public/index.html +1 -0
package/app/public/js/index.js +2 -0
package/app/public/js/index.js.LICENSE.txt +150 -0
package/app/util/index.js +24 -0
package/index.html +52 -0
package/initialize.js +32 -0
package/lib/dataManager.js +500 -0
package/lib/index.js +3 -0
package/lib/models.js +64 -0
package/lib/routes/features.js +213 -0
package/lib/routes/interfaces.js +304 -0
package/lib/routes/proxy.js +239 -0
package/lib/ruleManager.js +551 -0
package/lib/rules-server.js +267 -0
package/lib/server.js +805 -0
package/lib/storage.js +16 -0
package/lib/ui-server.js +68 -0
package/package.json +51 -0
package/public/bundle.js +2 -0
package/public/bundle.js.LICENSE.txt +38 -0
package/public/index.html +1 -0
package/public/plugin.mock-plugin.html +14 -0
package/rules.txt +22 -0
package/test/rulesServer.test.js +120 -0
package/ui/src/App.css +173 -0
package/ui/src/App.js +24 -0
package/ui/src/components/AppLayout.js +149 -0
package/ui/src/components/FeatureCard.js +53 -0
package/ui/src/components/Layout.js +94 -0
package/ui/src/components/MainNav.js +42 -0
package/ui/src/components/PageContainer.js +16 -0
package/ui/src/index.html +11 -0
package/ui/src/index.js +43 -0
package/ui/src/pages/FileProxy.js +235 -0
package/ui/src/pages/FilesPage.js +292 -0
package/ui/src/pages/Home.js +128 -0
package/ui/src/pages/HomePage.js +195 -0
package/ui/src/pages/InterfaceManagement.js +829 -0
package/ui/src/pages/InterfacePage.js +342 -0
package/ui/src/pages/MockData.js +472 -0
package/ui/src/pages/Settings.js +192 -0
package/ui/src/pages/SettingsPage.js +165 -0
package/ui/src/pages/UrlRedirect.js +225 -0
package/ui/src/pages/Welcome.js +155 -0
package/ui/src/services/api.js +186 -0
package/ui/src/styles/app-layout.css +337 -0
package/ui/src/styles/feature-card.css +172 -0
package/ui/src/styles/file-proxy.css +301 -0
package/ui/src/styles/global.css +224 -0
package/ui/src/styles/home.css +123 -0
package/ui/src/styles/index.css +419 -0
package/ui/src/styles/interface-management.css +694 -0
package/ui/src/styles/layout.css +159 -0
package/ui/src/styles/logs-page.css +427 -0
package/ui/src/styles/main-nav.css +52 -0
package/ui/src/styles/mock-data.css +850 -0
package/ui/src/styles/page-container.css +11 -0
package/ui/src/styles/settings.css +208 -0
package/ui/src/styles/url-redirect.css +279 -0
package/ui/src/styles/welcome.css +282 -0
package/webpack.config.js +49 -0

package/ui/src/components/MainNav.js ADDED Viewed

@@ -0,0 +1,42 @@
+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 ADDED Viewed

@@ -0,0 +1,16 @@
+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/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Whistle Mock 数据工厂</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/ui/src/index.js ADDED Viewed

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
+// 导入样式
+import 'antd/dist/reset.css'; // 导入antd样式，使用适合的版本
+import './styles/global.css';
+import './App.css';
+// 导入页面组件
+import MockData from './pages/MockData';
+import InterfaceManagement from './pages/InterfaceManagement';
+import Settings from './pages/Settings';
+// 导入布局组件
+import AppLayout from './components/AppLayout';
+const App = () => {
+  return (
+    <Router>
+      <div className="App">
+        <Switch>
+          <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>
+      </div>
+    </Router>
+  );
+};
+// 确保使用正确的渲染方法，兼容React 18和旧版本
+const root = document.getElementById('root');
+if (ReactDOM.createRoot) {
+  // React 18+
+  const rootElement = ReactDOM.createRoot(root);
+  rootElement.render(<App />);
+} else {
+  // 旧版本React
+  ReactDOM.render(<App />, root);
+}

package/ui/src/pages/FileProxy.js ADDED Viewed

@@ -0,0 +1,235 @@
+import React, { useState } from 'react';
+import AppLayout from '../components/AppLayout';
+import '../styles/file-proxy.css';
+const FileProxy = () => {
+  const [fileProxies, setFileProxies] = useState([
+    {
+      id: 1,
+      localPath: '/path/to/local/file.json',
+      remotePath: '/api/data',
+      description: '用户数据接口',
+      active: true
+    },
+    {
+      id: 2,
+      localPath: '/path/to/local/orders.json',
+      remotePath: '/api/orders',
+      description: '订单数据接口',
+      active: false
+    },
+    {
+      id: 3,
+      localPath: '/path/to/local/products.json',
+      remotePath: '/api/products',
+      description: '商品数据接口',
+      active: true
+    }
+  ]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentProxy, setCurrentProxy] = useState(null);
+  const [localPath, setLocalPath] = useState('');
+  const [remotePath, setRemotePath] = useState('');
+  const [description, setDescription] = useState('');
+  const openModal = (proxy = null) => {
+    if (proxy) {
+      setCurrentProxy(proxy);
+      setLocalPath(proxy.localPath);
+      setRemotePath(proxy.remotePath);
+      setDescription(proxy.description);
+    } else {
+      setCurrentProxy(null);
+      setLocalPath('');
+      setRemotePath('');
+      setDescription('');
+    }
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!localPath || !remotePath) {
+      alert('请填写本地文件路径和远程路径');
+      return;
+    }
+    if (currentProxy) {
+      // 编辑现有配置
+      setFileProxies(fileProxies.map(proxy =>
+        proxy.id === currentProxy.id
+          ? { ...proxy, localPath, remotePath, description }
+          : proxy
+      ));
+    } else {
+      // 添加新配置
+      const newProxy = {
+        id: fileProxies.length > 0 ? Math.max(...fileProxies.map(p => p.id)) + 1 : 1,
+        localPath,
+        remotePath,
+        description,
+        active: true
+      };
+      setFileProxies([...fileProxies, newProxy]);
+    }
+    closeModal();
+  };
+  const toggleActive = (id) => {
+    setFileProxies(fileProxies.map(proxy =>
+      proxy.id === id ? { ...proxy, active: !proxy.active } : proxy
+    ));
+  };
+  const deleteProxy = (id) => {
+    if (window.confirm('确定要删除此条配置吗？')) {
+      setFileProxies(fileProxies.filter(proxy => proxy.id !== id));
+    }
+  };
+  return (
+    <AppLayout>
+      <div className="file-proxy-container">
+        <div className="page-title-bar">
+          <div>
+            <h1 className="page-title">文件代理配置</h1>
+            <div className="page-description">
+              配置文件代理规则，支持本地文件和远程文件
+            </div>
+          </div>
+          <div className="page-actions">
+            <button className="add-button" onClick={() => openModal()}>
+              添加文件代理
+            </button>
+          </div>
+        </div>
+        <div className="proxy-list-container">
+          {fileProxies.length === 0 ? (
+            <div className="empty-data">
+              <div className="empty-icon">📁</div>
+              <div className="empty-text">暂无文件代理配置</div>
+              <button className="add-button" onClick={() => openModal()}>
+                添加文件代理
+              </button>
+            </div>
+          ) : (
+            <table className="proxy-table">
+              <thead>
+                <tr>
+                  <th>状态</th>
+                  <th>本地文件路径</th>
+                  <th>远程路径</th>
+                  <th>描述</th>
+                  <th>操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                {fileProxies.map(proxy => (
+                  <tr key={proxy.id} className={proxy.active ? '' : 'inactive'}>
+                    <td>
+                      <label className="switch">
+                        <input
+                          type="checkbox"
+                          checked={proxy.active}
+                          onChange={() => toggleActive(proxy.id)}
+                        />
+                        <span className="slider"></span>
+                      </label>
+                    </td>
+                    <td className="local-path">{proxy.localPath}</td>
+                    <td>{proxy.remotePath}</td>
+                    <td>{proxy.description || '-'}</td>
+                    <td>
+                      <div className="action-buttons">
+                        <button
+                          className="edit-button"
+                          onClick={() => openModal(proxy)}
+                        >
+                          编辑
+                        </button>
+                        <button
+                          className="delete-button"
+                          onClick={() => deleteProxy(proxy.id)}
+                        >
+                          删除
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+        {isModalOpen && (
+          <div className="modal-overlay">
+            <div className="modal">
+              <div className="modal-header">
+                <h2>{currentProxy ? '编辑文件代理' : '添加文件代理'}</h2>
+                <button className="close-button" onClick={closeModal}>×</button>
+              </div>
+              <form className="proxy-form" onSubmit={handleSubmit}>
+                <div className="form-group">
+                  <label>本地文件路径</label>
+                  <div className="file-input-group">
+                    <input
+                      type="text"
+                      value={localPath}
+                      onChange={(e) => setLocalPath(e.target.value)}
+                      placeholder="/path/to/local/file.json"
+                      required
+                    />
+                    <button type="button" className="browse-button">浏览...</button>
+                  </div>
+                  <div className="help-text">选择本地文件作为数据源</div>
+                </div>
+                <div className="form-group">
+                  <label>远程路径</label>
+                  <input
+                    type="text"
+                    value={remotePath}
+                    onChange={(e) => setRemotePath(e.target.value)}
+                    placeholder="/api/data"
+                    required
+                  />
+                  <div className="help-text">访问此路径时将返回本地文件内容</div>
+                </div>
+                <div className="form-group">
+                  <label>描述（可选）</label>
+                  <input
+                    type="text"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="接口描述"
+                  />
+                </div>
+                <div className="form-actions">
+                  <button type="button" className="cancel-button" onClick={closeModal}>
+                    取消
+                  </button>
+                  <button type="submit" className="submit-button">
+                    {currentProxy ? '保存修改' : '添加代理'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    </AppLayout>
+  );
+};
+export default FileProxy;

package/ui/src/pages/FilesPage.js ADDED Viewed

@@ -0,0 +1,292 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Table, Button, Space, Input, Tree, Modal, message, Breadcrumb, Typography } from 'antd';
+import {
+  FileOutlined,
+  FolderOutlined,
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  SaveOutlined,
+  UploadOutlined,
+  ExclamationCircleOutlined,
+  FolderAddOutlined
+} from '@ant-design/icons';
+import { ProxyAPI } from '../services/api';
+const { Text } = Typography;
+const { DirectoryTree } = Tree;
+const { confirm } = Modal;
+const { TextArea } = Input;
+const FilesPage = () => {
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [currentPath, setCurrentPath] = useState('');
+  const [breadcrumbs, setBreadcrumbs] = useState([{ title: '根目录', path: '' }]);
+  const [fileContent, setFileContent] = useState('');
+  const [currentFile, setCurrentFile] = useState(null);
+  const [fileModalVisible, setFileModalVisible] = useState(false);
+  const [folderModalVisible, setFolderModalVisible] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  useEffect(() => {
+    fetchFiles();
+  }, [currentPath]);
+  const fetchFiles = async () => {
+    setLoading(true);
+    try {
+      const data = await ProxyAPI.listFiles(currentPath);
+      setFiles(data);
+    } catch (error) {
+      console.error("获取文件列表失败:", error);
+      message.error('获取文件列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleOpenFile = async (file) => {
+    if (file.isDirectory) {
+      navigateToFolder(file.path);
+    } else {
+      try {
+        setLoading(true);
+        const data = await ProxyAPI.getFile(file.path);
+        setCurrentFile(file);
+        setFileContent(data.content);
+        setFileModalVisible(true);
+      } catch (error) {
+        console.error("获取文件内容失败:", error);
+        message.error('获取文件内容失败');
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+  const navigateToFolder = (path) => {
+    setCurrentPath(path);
+    // 更新面包屑
+    const parts = path.split('/').filter(Boolean);
+    const crumbs = [{ title: '根目录', path: '' }];
+    let currentPathSegment = '';
+    parts.forEach(part => {
+      currentPathSegment += currentPathSegment ? `/${part}` : part;
+      crumbs.push({
+        title: part,
+        path: currentPathSegment
+      });
+    });
+    setBreadcrumbs(crumbs);
+  };
+  const handleBreadcrumbClick = (path) => {
+    navigateToFolder(path);
+  };
+  const handleSaveFile = async () => {
+    try {
+      setLoading(true);
+      await ProxyAPI.saveFile(currentFile.path, fileContent);
+      setFileModalVisible(false);
+      message.success('文件保存成功');
+      fetchFiles();
+    } catch (error) {
+      console.error("保存文件失败:", error);
+      message.error('保存文件失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDeleteFile = (file) => {
+    confirm({
+      title: '确认删除',
+      icon: <ExclamationCircleOutlined />,
+      content: `确定要删除${file.isDirectory ? '文件夹' : '文件'} "${file.name}" 吗？`,
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await ProxyAPI.deleteFile(file.path);
+          message.success('删除成功');
+          fetchFiles();
+        } catch (error) {
+          console.error("删除失败:", error);
+          message.error('删除失败');
+        }
+      },
+    });
+  };
+  const handleCreateFile = async () => {
+    const newFileName = `new-file-${Date.now()}.json`;
+    const newFilePath = currentPath ? `${currentPath}/${newFileName}` : newFileName;
+    try {
+      await ProxyAPI.saveFile(newFilePath, '{\n  "data": "新文件内容"\n}');
+      message.success('文件创建成功');
+      fetchFiles();
+      // 创建后立即打开编辑
+      const newFile = { path: newFilePath, name: newFileName, isDirectory: false };
+      handleOpenFile(newFile);
+    } catch (error) {
+      console.error("创建文件失败:", error);
+      message.error('创建文件失败');
+    }
+  };
+  const handleCreateFolder = () => {
+    setNewFolderName('');
+    setFolderModalVisible(true);
+  };
+  const handleFolderModalOk = async () => {
+    if (!newFolderName.trim()) {
+      message.error('请输入文件夹名称');
+      return;
+    }
+    const newFolderPath = currentPath ? `${currentPath}/${newFolderName}` : newFolderName;
+    try {
+      // 通过创建一个占位文件来创建文件夹
+      await ProxyAPI.saveFile(`${newFolderPath}/.placeholder`, '');
+      setFolderModalVisible(false);
+      message.success('文件夹创建成功');
+      fetchFiles();
+    } catch (error) {
+      console.error("创建文件夹失败:", error);
+      message.error('创建文件夹失败');
+    }
+  };
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      render: (text, record) => (
+        <Space>
+          {record.isDirectory ? <FolderOutlined /> : <FileOutlined />}
+          <a onClick={() => handleOpenFile(record)}>{text}</a>
+        </Space>
+      ),
+    },
+    {
+      title: '类型',
+      dataIndex: 'isDirectory',
+      key: 'type',
+      width: 100,
+      render: (isDirectory) => isDirectory ? '文件夹' : '文件',
+    },
+    {
+      title: '大小',
+      dataIndex: 'size',
+      key: 'size',
+      width: 120,
+      render: (size, record) => record.isDirectory ? '-' : `${size} 字节`,
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'mtime',
+      key: 'mtime',
+      width: 200,
+      render: (text) => text ? new Date(text).toLocaleString() : '-',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      render: (_, record) => (
+        <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDeleteFile(record)}>
+          删除
+        </Button>
+      ),
+    },
+  ];
+  return (
+    <div className="files-page">
+      <Card
+        title="文件管理"
+        extra={
+          <Space>
+            <Button type="primary" icon={<PlusOutlined />} onClick={handleCreateFile}>
+              新建文件
+            </Button>
+            <Button icon={<FolderAddOutlined />} onClick={handleCreateFolder}>
+              新建文件夹
+            </Button>
+          </Space>
+        }
+      >
+        <Breadcrumb style={{ marginBottom: '16px' }}>
+          {breadcrumbs.map((crumb, index) => (
+            <Breadcrumb.Item key={index}>
+              <a onClick={() => handleBreadcrumbClick(crumb.path)}>{crumb.title}</a>
+            </Breadcrumb.Item>
+          ))}
+        </Breadcrumb>
+        <Table
+          columns={columns}
+          dataSource={files}
+          rowKey="path"
+          loading={loading}
+          pagination={false}
+        />
+      </Card>
+      <Modal
+        title={currentFile?.name || '文件内容'}
+        open={fileModalVisible}
+        onCancel={() => setFileModalVisible(false)}
+        footer={[
+          <Button key="cancel" onClick={() => setFileModalVisible(false)}>
+            取消
+          </Button>,
+          <Button
+            key="save"
+            type="primary"
+            icon={<SaveOutlined />}
+            onClick={handleSaveFile}
+            loading={loading}
+          >
+            保存
+          </Button>,
+        ]}
+        width={800}
+      >
+        <TextArea
+          value={fileContent}
+          onChange={(e) => setFileContent(e.target.value)}
+          autoSize={{ minRows: 20, maxRows: 30 }}
+        />
+      </Modal>
+      <Modal
+        title="新建文件夹"
+        open={folderModalVisible}
+        onOk={handleFolderModalOk}
+        onCancel={() => setFolderModalVisible(false)}
+        okText="创建"
+        cancelText="取消"
+      >
+        <Input
+          placeholder="请输入文件夹名称"
+          value={newFolderName}
+          onChange={(e) => setNewFolderName(e.target.value)}
+          onPressEnter={handleFolderModalOk}
+        />
+      </Modal>
+    </div>
+  );
+};
+export default FilesPage;