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

package/ui/src/pages/del_UrlRedirect.js

@@ -1,225 +0,0 @@
-import React, { useState } from 'react';
-import AppLayout from '../components/AppLayout';
-import '../styles/url-redirect.css';
-
-const UrlRedirect = () => {
-  const [urlRedirects, setUrlRedirects] = useState([
-    {
-      id: 1,
-      sourceUrl: 'https://api.example.com/users',
-      targetUrl: 'http://localhost:3000/mock/users',
-      description: '用户API重定向到本地',
-      active: true
-    },
-    {
-      id: 2,
-      sourceUrl: 'https://api.example.com/products',
-      targetUrl: 'http://localhost:3000/mock/products',
-      description: '产品API重定向到本地',
-      active: false
-    }
-  ]);
-  
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentRedirect, setCurrentRedirect] = useState(null);
-  const [sourceUrl, setSourceUrl] = useState('');
-  const [targetUrl, setTargetUrl] = useState('');
-  const [description, setDescription] = useState('');
-  
-  const openModal = (redirect = null) => {
-    if (redirect) {
-      setCurrentRedirect(redirect);
-      setSourceUrl(redirect.sourceUrl);
-      setTargetUrl(redirect.targetUrl);
-      setDescription(redirect.description);
-    } else {
-      setCurrentRedirect(null);
-      setSourceUrl('');
-      setTargetUrl('');
-      setDescription('');
-    }
-    setIsModalOpen(true);
-  };
-  
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-  
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    
-    if (!sourceUrl || !targetUrl) {
-      alert('请填写源URL和目标URL');
-      return;
-    }
-    
-    if (currentRedirect) {
-      // 编辑现有配置
-      setUrlRedirects(urlRedirects.map(redirect => 
-        redirect.id === currentRedirect.id 
-          ? { ...redirect, sourceUrl, targetUrl, description }
-          : redirect
-      ));
-    } else {
-      // 添加新配置
-      const newRedirect = {
-        id: urlRedirects.length > 0 ? Math.max(...urlRedirects.map(r => r.id)) + 1 : 1,
-        sourceUrl,
-        targetUrl,
-        description,
-        active: true
-      };
-      setUrlRedirects([...urlRedirects, newRedirect]);
-    }
-    
-    closeModal();
-  };
-  
-  const toggleActive = (id) => {
-    setUrlRedirects(urlRedirects.map(redirect => 
-      redirect.id === id ? { ...redirect, active: !redirect.active } : redirect
-    ));
-  };
-  
-  const deleteRedirect = (id) => {
-    if (window.confirm('确定要删除此条重定向配置吗？')) {
-      setUrlRedirects(urlRedirects.filter(redirect => redirect.id !== id));
-    }
-  };
-  
-  return (
-    <AppLayout>
-      <div className="url-redirect-container">
-        <div className="page-title-bar">
-          <div>
-            <h1 className="page-title">URL重定向配置</h1>
-            <div className="page-description">
-              配置URL重定向规则，支持路径和查询参数匹配
-            </div>
-          </div>
-          <div className="page-actions">
-            <button className="add-button" onClick={() => openModal()}>
-              添加URL重定向
-            </button>
-          </div>
-        </div>
-        
-        <div className="redirect-list-container">
-          {urlRedirects.length === 0 ? (
-            <div className="empty-data">
-              <div className="empty-icon">🔄</div>
-              <div className="empty-text">暂无URL重定向配置</div>
-              <button className="add-button" onClick={() => openModal()}>
-                添加URL重定向
-              </button>
-            </div>
-          ) : (
-            <table className="redirect-table">
-              <thead>
-                <tr>
-                  <th>状态</th>
-                  <th>源URL</th>
-                  <th>目标URL</th>
-                  <th>描述</th>
-                  <th>操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                {urlRedirects.map(redirect => (
-                  <tr key={redirect.id} className={redirect.active ? '' : 'inactive'}>
-                    <td>
-                      <label className="switch">
-                        <input 
-                          type="checkbox" 
-                          checked={redirect.active} 
-                          onChange={() => toggleActive(redirect.id)} 
-                        />
-                        <span className="slider"></span>
-                      </label>
-                    </td>
-                    <td className="url-text">{redirect.sourceUrl}</td>
-                    <td className="url-text">{redirect.targetUrl}</td>
-                    <td>{redirect.description || '-'}</td>
-                    <td>
-                      <div className="action-buttons">
-                        <button 
-                          className="edit-button" 
-                          onClick={() => openModal(redirect)}
-                        >
-                          编辑
-                        </button>
-                        <button 
-                          className="delete-button" 
-                          onClick={() => deleteRedirect(redirect.id)}
-                        >
-                          删除
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-        
-        {isModalOpen && (
-          <div className="modal-overlay">
-            <div className="modal">
-              <div className="modal-header">
-                <h2>{currentRedirect ? '编辑URL重定向' : '添加URL重定向'}</h2>
-                <button className="close-button" onClick={closeModal}>×</button>
-              </div>
-              <form className="redirect-form" onSubmit={handleSubmit}>
-                <div className="form-group">
-                  <label>源URL</label>
-                  <input 
-                    type="text" 
-                    value={sourceUrl} 
-                    onChange={(e) => setSourceUrl(e.target.value)} 
-                    placeholder="https://api.example.com/endpoint"
-                    required
-                  />
-                  <div className="help-text">需要重定向的原始URL</div>
-                </div>
-                
-                <div className="form-group">
-                  <label>目标URL</label>
-                  <input 
-                    type="text" 
-                    value={targetUrl} 
-                    onChange={(e) => setTargetUrl(e.target.value)} 
-                    placeholder="http://localhost:3000/mock/endpoint"
-                    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">
-                    {currentRedirect ? '保存修改' : '添加重定向'}
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-        )}
-      </div>
-    </AppLayout>
-  );
-};
-
-export default UrlRedirect; 

package/ui/src/pages/del_Welcome.js

@@ -1,155 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import AppLayout from '../components/AppLayout';
-import '../styles/welcome.css';
-
-const Welcome = () => {
-  // 模拟统计数据
-  const stats = {
-    featuresCount: 3,
-    interfacesCount: 15,
-    activeInterfacesCount: 12,
-    requestsHandledCount: 256
-  };
-
-  // 模拟最近活动数据
-  const recentActivities = [
-    { id: 1, type: '创建', target: '功能', name: '商品列表', time: '2023-11-05 14:30' },
-    { id: 2, type: '修改', target: '接口', name: '用户登录', time: '2023-11-05 14:15' },
-    { id: 3, type: '启用', target: '接口', name: '获取用户信息', time: '2023-11-05 13:45' },
-    { id: 4, type: '创建', target: '接口', name: '商品详情', time: '2023-11-05 13:30' },
-    { id: 5, type: '禁用', target: '功能', name: '购物车', time: '2023-11-05 11:20' }
-  ];
-
-  return (
-    <AppLayout>
-      <div className="welcome-container">
-        <div className="welcome-header">
-          <h1>欢迎使用 Whistle Mock 数据工厂</h1>
-          <p>快速创建和管理模拟数据，提高前端开发效率</p>
-        </div>
-        
-        <div className="cards-container">
-          {/* 功能概览卡片 */}
-          <div className="card stats-card">
-            <div className="card-header">
-              <div className="card-icon">📊</div>
-              <h2>功能概览</h2>
-            </div>
-            <div className="card-content">
-              <div className="stat-item">
-                <div className="stat-value">{stats.featuresCount}</div>
-                <div className="stat-label">功能模块</div>
-              </div>
-              <div className="stat-item">
-                <div className="stat-value">{stats.interfacesCount}</div>
-                <div className="stat-label">接口配置</div>
-              </div>
-              <div className="stat-item">
-                <div className="stat-value">{stats.activeInterfacesCount}</div>
-                <div className="stat-label">启用接口</div>
-              </div>
-              <div className="stat-item">
-                <div className="stat-value">{stats.requestsHandledCount}</div>
-                <div className="stat-label">已处理请求</div>
-              </div>
-            </div>
-          </div>
-          
-          {/* 快速开始卡片 */}
-          <div className="card quickstart-card">
-            <div className="card-header">
-              <div className="card-icon">🚀</div>
-              <h2>快速开始</h2>
-            </div>
-            <div className="card-content">
-              <div className="steps">
-                <div className="step">
-                  <div className="step-number">1</div>
-                  <div className="step-content">
-                    <div className="step-title">创建功能模块</div>
-                    <div className="step-desc">创建一个功能模块，用于组织相关接口</div>
-                  </div>
-                </div>
-                <div className="step">
-                  <div className="step-number">2</div>
-                  <div className="step-content">
-                    <div className="step-title">添加接口配置</div>
-                    <div className="step-desc">配置API接口的URL匹配规则和响应数据</div>
-                  </div>
-                </div>
-                <div className="step">
-                  <div className="step-number">3</div>
-                  <div className="step-content">
-                    <div className="step-title">启用接口使用</div>
-                    <div className="step-desc">启用功能模块和接口，即可在Whistle中使用</div>
-                  </div>
-                </div>
-              </div>
-              <div className="quickstart-actions">
-                <Link to="/mock-data">
-                  <button className="quickstart-button">开始创建功能</button>
-                </Link>
-              </div>
-            </div>
-          </div>
-          
-          {/* 使用说明卡片 */}
-          <div className="card usage-card">
-            <div className="card-header">
-              <div className="card-icon">📘</div>
-              <h2>使用说明</h2>
-            </div>
-            <div className="card-content">
-              <div className="usage-item">
-                <div className="usage-title">添加Whistle规则</div>
-                <div className="usage-desc">
-                  在Whistle中添加如下规则：
-                  <pre className="code-block">example.com mock://</pre>
-                </div>
-              </div>
-              <div className="usage-item">
-                <div className="usage-title">匹配规则说明</div>
-                <div className="usage-desc">
-                  支持多种匹配方式：
-                  <ul className="usage-list">
-                    <li>精确匹配: <code>/api/users</code></li>
-                    <li>通配符匹配: <code>/api/users/*</code></li>
-                    <li>正则匹配: <code>/\/api\/products\/\d+/</code></li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        {/* 最近活动 */}
-        <div className="recent-activities">
-          <div className="section-header">
-            <h2>最近活动</h2>
-          </div>
-          <div className="activities-list">
-            {recentActivities.map(activity => (
-              <div key={activity.id} className="activity-item">
-                <div className="activity-icon">
-                  {activity.type === '创建' ? '➕' : 
-                   activity.type === '修改' ? '✏️' : 
-                   activity.type === '启用' ? '✅' : 
-                   activity.type === '禁用' ? '❌' : '🔄'}
-                </div>
-                <div className="activity-content">
-                  <div className="activity-title">
-                    {activity.type}了{activity.target}「{activity.name}」
-                  </div>
-                  <div className="activity-time">{activity.time}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </AppLayout>
-  );
-};
-
-export default Welcome; 

package/ui/src/styles/del_feature-card.css

@@ -1,168 +0,0 @@
-.feature-card {
-  background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  transition: all 0.3s ease;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-
-.feature-card-color-bar {
-  height: 4px;
-  width: 100%;
-}
-
-.feature-card-header {
-  padding: 16px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.feature-card-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #262626;
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 70%;
-}
-
-.feature-card-badge {
-  font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-}
-
-.feature-card-badge.active {
-  background-color: #f6ffed;
-  color: #52c41a;
-  border: 1px solid #b7eb8f;
-}
-
-.feature-card-badge.inactive {
-  background-color: #f5f5f5;
-  color: #8c8c8c;
-  border: 1px solid #d9d9d9;
-}
-
-.feature-card-content {
-  padding: 16px 20px;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.feature-card-description {
-  color: #595959;
-  font-size: 14px;
-  line-height: 1.6;
-  margin: 0 0 20px 0;
-  flex-grow: 1;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.feature-card-stats {
-  display: flex;
-  justify-content: space-between;
-  margin-top: auto;
-  padding-top: 12px;
-  border-top: 1px dashed #f0f0f0;
-}
-
-.feature-stat {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.feature-stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  color: #262626;
-}
-
-.feature-stat-label {
-  font-size: 12px;
-  color: #8c8c8c;
-  margin-top: 2px;
-}
-
-.feature-date {
-  font-size: 14px;
-}
-
-.feature-card-footer {
-  padding: 16px 20px;
-  border-top: 1px solid #f0f0f0;
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.card-btn {
-  padding: 8px 16px;
-  border-radius: 6px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-weight: 500;
-}
-
-.edit-btn {
-  background-color: #f7f7f7;
-  color: #595959;
-  border: 1px solid #d9d9d9;
-  flex: 1;
-}
-
-.edit-btn:hover {
-  background-color: #f0f0f0;
-  border-color: #bfbfbf;
-}
-
-.primary-btn {
-  background-color: transparent;
-  border: 1px solid;
-  flex: 1.5;
-}
-
-.primary-btn:hover {
-  opacity: 0.85;
-  background-color: rgba(24, 144, 255, 0.05);
-}
-
-/* 图标样式 */
-.icon-edit, .icon-manage {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.icon-edit {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23595959' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
-}
-
-.icon-manage {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231890ff' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
-}