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

package/ui/src/pages/Settings.js

@@ -1,66 +1,61 @@
 import React, { useState, useEffect } from 'react';
 import AppLayout from '../components/AppLayout';
-import { Form, Input, Button, Switch, Card, message, Divider, Typography, Space, Alert, InputNumber } from 'antd';
-import { SaveOutlined, UndoOutlined } from '@ant-design/icons';
+import { Card, Switch, message, Typography, Divider } from 'antd';
 import '../styles/settings.css';
 
-const { Title, Text } = Typography;
+const { Title, Text, Paragraph } = Typography;
+
+// localStorage工具函数
+const getUIVersion = () => {
+  try {
+    return localStorage.getItem('ui-version') || 'v1';
+  } catch (error) {
+    console.error('获取UI版本设置失败:', error);
+    return 'v1';
+  }
+};
+
+const setUIVersion = (version) => {
+  try {
+    localStorage.setItem('ui-version', version);
+    return true;
+  } catch (error) {
+    console.error('保存UI版本设置失败:', error);
+    return false;
+  }
+};
 
 const Settings = () => {
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState(false);
-  const [settings, setSettings] = useState(null);
+  const [uiVersion, setUiVersionState] = useState(getUIVersion());
 
-  // 获取当前设置
+  // 页面加载时同步localStorage状态
   useEffect(() => {
-    fetchSettings();
+    const currentVersion = getUIVersion();
+    setUiVersionState(currentVersion);
   }, []);
 
-  const fetchSettings = async () => {
-    try {
-      setLoading(true);
-      // 这里假设有一个获取设置的接口
-      // 为了示例，我们使用默认设置
-      const defaultSettings = {
-        logRetention: 7,
-        enableLogging: true,
-        enableAutoRefresh: false,
-        maxLogEntries: 10000,
-        notificationEnabled: true,
-        mockjsEnabled: true,
-        responseDelay: 0
-      };
+  // 处理UI版本切换
+  const handleUIVersionChange = (checked) => {
+    const newVersion = checked ? 'v2' : 'v1';
+    
+    if (setUIVersion(newVersion)) {
+      setUiVersionState(newVersion);
       
-      setSettings(defaultSettings);
-      form.setFieldsValue(defaultSettings);
-    } catch (error) {
-      console.error('获取设置失败:', error);
-      message.error('获取设置失败');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSave = async (values) => {
-    try {
-      setLoading(true);
-      // 这里假设有一个保存设置的接口
-      // 现在只是模拟保存成功
-      await new Promise(resolve => setTimeout(resolve, 500));
+      // 提示用户刷新页面以应用更改
+      message.success({
+        content: `已切换到${checked ? '重构后' : '重构前'}版本，页面将自动刷新`,
+        duration: 2,
+        onClose: () => {
+          window.location.reload();
+        }
+      });
       
-      setSettings(values);
-      message.success('设置已保存');
-    } catch (error) {
-      console.error('保存设置失败:', error);
-      message.error('保存设置失败');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleReset = () => {
-    if (settings) {
-      form.setFieldsValue(settings);
+      // 1秒后自动刷新
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } else {
+      message.error('设置保存失败，请重试');
     }
   };
 
@@ -71,119 +66,46 @@ const Settings = () => {
           <div>
             <h1 className="page-title">系统设置</h1>
             <div className="page-description">
-              配置插件的全局设置项，这些设置将影响所有功能模块
+              配置插件的全局设置项和界面选项
             </div>
           </div>
         </div>
 
-        <Alert
-          message="设置功能正在开发中"
-          description="目前部分设置可能不生效，我们正在努力完善此功能"
-          type="info"
-          showIcon
-          style={{ marginBottom: 20 }}
-        />
-        
-        <Form
-          form={form}
-          layout="vertical"
-          onFinish={handleSave}
-          initialValues={settings || {}}
-        >
-          <Card title="日志设置" className="settings-card">
-            <Form.Item
-              name="enableLogging"
-              label="启用请求日志记录"
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-            
-            <Form.Item
-              name="logRetention"
-              label="日志保留天数"
-              rules={[{ required: true, message: '请输入日志保留天数' }]}
-              tooltip="超过设定天数的日志将被自动清理"
-            >
-              <InputNumber min={1} max={90} />
-            </Form.Item>
-            
-            <Form.Item
-              name="maxLogEntries"
-              label="最大日志条数"
-              rules={[{ required: true, message: '请输入最大日志条数' }]}
-              tooltip="超过设定条数的日志将被清理"
-            >
-              <InputNumber min={1000} max={100000} step={1000} />
-            </Form.Item>
-          </Card>
-          
-          <Card title="接口模拟设置" className="settings-card">
-            <Form.Item
-              name="mockjsEnabled"
-              label="启用 Mock.js 数据模拟"
-              valuePropName="checked"
-              tooltip="使用 Mock.js 生成随机数据"
-            >
-              <Switch />
-            </Form.Item>
-            
-            <Form.Item
-              name="responseDelay"
-              label="全局响应延迟（毫秒）"
-              tooltip="所有接口默认的响应延迟时间"
-            >
-              <InputNumber min={0} max={10000} />
-            </Form.Item>
-            
-            <Form.Item
-              name="notificationEnabled"
-              label="启用请求匹配通知"
-              valuePropName="checked"
-              tooltip="接口匹配成功时显示通知"
-            >
-              <Switch />
-            </Form.Item>
-          </Card>
+        <Card title="界面设置" className="settings-card">
+          <div className="setting-item">
+            <div className="setting-label">
+              <Text strong>UI版本切换</Text>
+              <Paragraph type="secondary" style={{ margin: '4px 0 0 0', fontSize: '12px' }}>
+                切换使用重构前后的界面版本
+              </Paragraph>
+            </div>
+            <div className="setting-control">
+              <Switch
+                checked={uiVersion === 'v2'}
+                onChange={handleUIVersionChange}
+                checkedChildren="重构后"
+                unCheckedChildren="重构前"
+              />
+            </div>
+          </div>
           
-          <Card title="界面设置" className="settings-card">
-            <Form.Item
-              name="enableAutoRefresh"
-              label="启用页面自动刷新"
-              valuePropName="checked"
-              tooltip="启用后，页面数据将定期自动刷新"
-            >
-              <Switch />
-            </Form.Item>
-            
-            <Form.Item
-              name="theme"
-              label="界面主题"
-            >
-              <Input disabled placeholder="暂不支持自定义主题" />
-            </Form.Item>
-          </Card>
+          <Divider />
           
-          <div className="settings-actions">
-            <Space>
-              <Button 
-                type="default" 
-                icon={<UndoOutlined />} 
-                onClick={handleReset}
-              >
-                重置
-              </Button>
-              <Button 
-                type="primary" 
-                icon={<SaveOutlined />} 
-                htmlType="submit" 
-                loading={loading}
-              >
-                保存设置
-              </Button>
-            </Space>
+          <div style={{ padding: '16px 0' }}>
+            <Title level={5}>版本说明</Title>
+            <div style={{ marginLeft: '16px' }}>
+              <Paragraph>
+                <Text strong>重构前版本：</Text> 当前稳定版本的功能模块管理和接口管理界面
+              </Paragraph>
+              <Paragraph>
+                <Text strong>重构后版本：</Text> 新设计的界面版本，提供更好的用户体验和功能优化
+              </Paragraph>
+              <Paragraph type="warning">
+                <Text>注意：切换版本后页面将自动刷新以应用更改</Text>
+              </Paragraph>
+            </div>
           </div>
-        </Form>
+        </Card>
       </div>
     </AppLayout>
   );

package/ui/src/del_App.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
-import MockData from './pages/MockData';
-import InterfaceManagement from './pages/InterfaceManagement';
-import Settings from './pages/Settings';
-import './App.css';
-
-function 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>
-  );
-}
-
-export default App; 

package/ui/src/pages/del_FileProxy.js

@@ -1,235 +0,0 @@
-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;