whistle.mock-plugins 1.0.0

package/ui/src/pages/Home.js

@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import Layout from '../components/Layout';
+import FeatureCard from '../components/FeatureCard';
+import '../styles/home.css';
+
+const Home = () => {
+  const [viewMode, setViewMode] = useState('cards'); // 'cards' or 'list'
+  const [sortOption, setSortOption] = useState('name'); // 'name', 'status', 'date'
+  
+  const [features, setFeatures] = useState([
+    {
+      id: 1,
+      name: '用户数据',
+      description: '模拟用户信息相关接口',
+      active: true,
+      interfaceCount: 3,
+      createdAt: '2023-09-15'
+    },
+    {
+      id: 2,
+      name: '订单信息',
+      description: '模拟订单相关接口',
+      active: false,
+      interfaceCount: 2,
+      createdAt: '2023-08-20'
+    },
+    {
+      id: 3,
+      name: '商品列表',
+      description: '模拟商品数据接口',
+      active: true,
+      interfaceCount: 5,
+      createdAt: '2023-10-01'
+    }
+  ]);
+  
+  // 根据排序选项排序功能
+  const sortedFeatures = [...features].sort((a, b) => {
+    if (sortOption === 'name') {
+      return a.name.localeCompare(b.name);
+    } else if (sortOption === 'status') {
+      return (b.active ? 1 : 0) - (a.active ? 1 : 0);
+    } else if (sortOption === 'date') {
+      return new Date(b.createdAt) - new Date(a.createdAt);
+    }
+    return 0;
+  });
+  
+  return (
+    <Layout>
+      <div className="content-header">
+        <div className="content-title">功能列表</div>
+        <div className="view-controls">
+          <span>视图:</span>
+          <div className="view-toggle">
+            <button 
+              className={viewMode === 'cards' ? 'active' : ''}
+              onClick={() => setViewMode('cards')}
+            >
+              卡片
+            </button>
+            <button 
+              className={viewMode === 'list' ? 'active' : ''}
+              onClick={() => setViewMode('list')}
+            >
+              列表
+            </button>
+          </div>
+          <div className="sort-control">
+            <span>排序:</span>
+            <select 
+              value={sortOption}
+              onChange={(e) => setSortOption(e.target.value)}
+            >
+              <option value="name">名称</option>
+              <option value="status">状态</option>
+              <option value="date">创建日期</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      
+      {viewMode === 'cards' ? (
+        <div className="feature-cards">
+          {sortedFeatures.map(feature => (
+            <FeatureCard key={feature.id} feature={feature} />
+          ))}
+        </div>
+      ) : (
+        <div className="feature-list-view">
+          <table>
+            <thead>
+              <tr>
+                <th>名称</th>
+                <th>描述</th>
+                <th>状态</th>
+                <th>接口数量</th>
+                <th>创建日期</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedFeatures.map(feature => (
+                <tr key={feature.id}>
+                  <td>{feature.name}</td>
+                  <td>{feature.description}</td>
+                  <td>
+                    <span className={`status-badge ${feature.active ? 'active' : 'inactive'}`}>
+                      {feature.active ? '已启用' : '未启用'}
+                    </span>
+                  </td>
+                  <td>{feature.interfaceCount}</td>
+                  <td>{feature.createdAt}</td>
+                  <td>
+                    <button className="action-btn edit">编辑</button>
+                    <button className="action-btn">管理接口</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Layout>
+  );
+};
+
+export default Home; 

package/ui/src/pages/HomePage.js

@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Table, Button, Space, Typography, Statistic, Row, Col, Modal, Form, Input } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { FeatureAPI } from '../services/api';
+
+const { Title, Paragraph } = Typography;
+const { confirm } = Modal;
+
+const HomePage = () => {
+  const [features, setFeatures] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [form] = Form.useForm();
+  const [editFeatureId, setEditFeatureId] = useState(null);
+
+  useEffect(() => {
+    fetchFeatures();
+  }, []);
+
+  const fetchFeatures = async () => {
+    setLoading(true);
+    try {
+      const data = await FeatureAPI.getAllFeatures();
+      setFeatures(data);
+    } catch (error) {
+      console.error("获取功能列表失败:", error);
+      // 在实际项目中应添加错误提示
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAdd = () => {
+    form.resetFields();
+    setEditFeatureId(null);
+    setModalVisible(true);
+  };
+
+  const handleEdit = (record) => {
+    form.setFieldsValue({
+      name: record.name,
+      description: record.description,
+    });
+    setEditFeatureId(record.id);
+    setModalVisible(true);
+  };
+
+  const handleDelete = (record) => {
+    confirm({
+      title: '确认删除',
+      icon: <ExclamationCircleOutlined />,
+      content: `确定要删除功能 "${record.name}" 吗？`,
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          await FeatureAPI.deleteFeature(record.id);
+          fetchFeatures();
+        } catch (error) {
+          console.error("删除功能失败:", error);
+        }
+      },
+    });
+  };
+
+  const handleCancel = () => {
+    setModalVisible(false);
+  };
+
+  const handleOk = async () => {
+    try {
+      const values = await form.validateFields();
+      if (editFeatureId) {
+        await FeatureAPI.updateFeature(editFeatureId, values);
+      } else {
+        await FeatureAPI.createFeature(values);
+      }
+      setModalVisible(false);
+      fetchFeatures();
+    } catch (error) {
+      console.error("保存功能失败:", error);
+    }
+  };
+
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      key: 'description',
+      ellipsis: true,
+    },
+    {
+      title: '接口数量',
+      dataIndex: 'interfaceCount',
+      key: 'interfaceCount',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (text) => text ? new Date(text).toLocaleString() : '-',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space size="middle">
+          <Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+            编辑
+          </Button>
+          <Button type="text" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
+            删除
+          </Button>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div className="home-page">
+      <Row gutter={16} style={{ marginBottom: '24px' }}>
+        <Col span={8}>
+          <Card>
+            <Statistic title="功能总数" value={features.length} />
+          </Card>
+        </Col>
+        <Col span={8}>
+          <Card>
+            <Statistic 
+              title="接口总数" 
+              value={features.reduce((sum, feature) => sum + (feature.interfaceCount || 0), 0)} 
+            />
+          </Card>
+        </Col>
+        <Col span={8}>
+          <Card>
+            <Statistic title="今日请求次数" value={0} />
+          </Card>
+        </Col>
+      </Row>
+
+      <Card 
+        title="功能列表" 
+        extra={
+          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
+            添加功能
+          </Button>
+        }
+      >
+        <Table 
+          columns={columns} 
+          dataSource={features} 
+          rowKey="id" 
+          loading={loading}
+        />
+      </Card>
+
+      <Modal
+        title={editFeatureId ? "编辑功能" : "添加功能"}
+        open={modalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        okText="保存"
+        cancelText="取消"
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          initialValues={{ name: '', description: '' }}
+        >
+          <Form.Item
+            name="name"
+            label="功能名称"
+            rules={[{ required: true, message: '请输入功能名称!' }]}
+          >
+            <Input placeholder="请输入功能名称" />
+          </Form.Item>
+          <Form.Item
+            name="description"
+            label="功能描述"
+          >
+            <Input.TextArea placeholder="请输入功能描述" rows={4} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default HomePage;