parent
377d1b03fa
commit
d901407d10
@ -0,0 +1,38 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
|
||||
import { Layout, Menu, ConfigProvider } from 'antd';
|
||||
import { HomeOutlined, SearchOutlined, OrderedListOutlined, ScanOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import HomePage from './pages/HomePage';
|
||||
import SearchPage from './pages/SearchPage';
|
||||
import ProductDetailPage from './pages/ProductDetailPage';
|
||||
import OrderPage from './pages/OrderPage';
|
||||
import ScannerPage from './pages/ScannerPage';
|
||||
import UploadFlowerPage from './pages/UploadFlowerPage'; // 新增
|
||||
import { theme } from './theme';
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ConfigProvider theme={theme}>
|
||||
<Router>
|
||||
<Layout className="layout" style={{ minHeight: '100vh' }}>
|
||||
<Header style={{ background: theme.token.colorPrimary }}>
|
||||
<div className="logo" />
|
||||
<Menu mode="horizontal" defaultSelectedKeys={['1']} style={{ background: '#fff', borderBottom: 'none' }}>
|
||||
<Menu.Item key="1" icon={<HomeOutlined />}><Link to="/">主页面</Link></Menu.Item>
|
||||
<Menu.Item key="2" icon={<SearchOutlined />}><Link to="/search">搜索</Link></Menu.Item>
|
||||
<Menu.Item key="3" icon={<OrderedListOutlined />}><Link to="/orders">我的订单</Link></Menu.Item>
|
||||
<Menu.Item key="5" icon={<UploadOutlined />}><Link to="/upload">上传花卉</Link></Menu.Item>
|
||||
<Menu.Item key="4" icon={<ScanOutlined />}><Link to="/scanner">识别花卉</Link></Menu.Item>
|
||||
</Menu>
|
||||
</Header>
|
||||
<Content style={{ padding: '0 50px', marginTop: 64 }}>
|
||||
<div className="site-layout-content" style={{ background: '#fff', padding: 24, minHeight: 380 }}>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/search" element={<SearchPage />} />
|
||||
<Route path="/product/:id" element={<ProductDetailPage />} />
|
||||
<Route path="/order/:id" element={<OrderPage />} />
|
||||
<Route path="/orders" element={<OrderPage />} />
|
||||
<Route path="/scanner" element={<ScannerPage />} />
|
||||
<Route path="/upload" element={<UploadFlowerPage />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center', background: theme.token.colorBgBase }}>
|
||||
Flower Trading System ©2024
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Router>
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1,60 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Modal, Input, InputNumber, Button, message } from 'antd';
|
||||
import axios from 'axios';
|
||||
|
||||
const EditProductModal = ({ visible, product, onCancel, onUpdate }) => {
|
||||
const [editedProduct, setEditedProduct] = useState(product);
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
setEditedProduct({ ...editedProduct, [field]: value });
|
||||
};
|
||||
|
||||
const handleUpdate = async () => {
|
||||
try {
|
||||
const response = await axios.put(`http://localhost:5000/api/products/${product.id}`, editedProduct);
|
||||
if (response.data.message === "Product updated successfully") {
|
||||
message.success('Product updated successfully');
|
||||
onUpdate(editedProduct);
|
||||
} else {
|
||||
throw new Error('Update failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating product:', error);
|
||||
message.error('Failed to update product: ' + (error.response?.data?.error || error.message));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`Edit ${product.name}`}
|
||||
visible={visible}
|
||||
onCancel={onCancel}
|
||||
footer={null}
|
||||
>
|
||||
<div className="p-4">
|
||||
<p>Name: <Input value={editedProduct.name} onChange={(e) => handleInputChange('name', e.target.value)} /></p>
|
||||
<p>Price: $<InputNumber
|
||||
value={editedProduct.price}
|
||||
onChange={(value) => handleInputChange('price', value)}
|
||||
min={0}
|
||||
step={0.01}
|
||||
/></p>
|
||||
<p>Available: <InputNumber
|
||||
value={editedProduct.quantity}
|
||||
onChange={(value) => handleInputChange('quantity', value)}
|
||||
min={0}
|
||||
/></p>
|
||||
<p>Description: <Input.TextArea
|
||||
value={editedProduct.description}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
/></p>
|
||||
<div className="flex justify-end mt-4">
|
||||
<Button onClick={onCancel} className="mr-2">取消</Button>
|
||||
<Button type="primary" onClick={handleUpdate}>完成</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditProductModal;
|
||||
@ -0,0 +1,27 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const API_URL = 'http://localhost:5000/api';
|
||||
|
||||
export const flowerApi = {
|
||||
async getAllFlowers(query = '') {
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/flowers`, {
|
||||
params: { query }
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching flowers:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
async addFlower(flowerData) {
|
||||
try {
|
||||
const response = await axios.post(`${API_URL}/flowers`, flowerData);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Error adding flower:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
After Width: | Height: | Size: 175 KiB |
|
After Width: | Height: | Size: 644 KiB |
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,51 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
width: 300px;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,182 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Tabs, List, Card, Button, message, Modal, Form, Input, InputNumber } from 'antd';
|
||||
import axios from 'axios';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const OrderPage = () => {
|
||||
const [products, setProducts] = useState([]);
|
||||
const [orders, setOrders] = useState([]);
|
||||
const [editingProduct, setEditingProduct] = useState(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
fetchOrders();
|
||||
}, []);
|
||||
|
||||
const fetchProducts = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:5000/api/my-products');
|
||||
setProducts(response.data);
|
||||
} catch (error) {
|
||||
console.error('获取花卉信息失败:', error);
|
||||
message.error('获取花卉信息失败');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchOrders = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:5000/api/orders');
|
||||
setOrders(response.data);
|
||||
} catch (error) {
|
||||
console.error('获取订单信息失败:', error);
|
||||
message.error('获取订单信息失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditProduct = (product) => {
|
||||
console.log('Edit button clicked for product:', product);
|
||||
setEditingProduct(product);
|
||||
form.setFieldsValue(product);
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleUpdateProduct = async (values) => {
|
||||
try {
|
||||
const response = await axios.put(`http://localhost:5000/api/products/${editingProduct.id}`, values);
|
||||
if (response.data.message === "Product updated successfully") {
|
||||
message.success('Product updated successfully');
|
||||
setIsModalVisible(false);
|
||||
setEditingProduct(null);
|
||||
form.resetFields();
|
||||
fetchProducts(); // Refresh the product list
|
||||
} else {
|
||||
throw new Error('Update failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating product:', error);
|
||||
message.error('Failed to update product: ' + (error.response?.data?.error || error.message));
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleProductStatus = async (productId) => {
|
||||
try {
|
||||
const response = await axios.post(`http://localhost:5000/api/products/${productId}/toggle-status`);
|
||||
if (response.data.message.includes('successfully')) {
|
||||
message.success(response.data.message);
|
||||
fetchProducts();
|
||||
} else {
|
||||
throw new Error('Toggle status failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling product status:', error);
|
||||
message.error('Failed to update product status');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelOrder = async (orderId) => {
|
||||
try {
|
||||
const response = await axios.post(`http://localhost:5000/api/orders/${orderId}/cancel`);
|
||||
if (response.data.message === "Order cancelled successfully") {
|
||||
message.success('成功取消订单');
|
||||
fetchOrders();
|
||||
} else {
|
||||
throw new Error('取消订单失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to cancel order:', error);
|
||||
message.error('取消订单失败');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane tab="我的上架" key="1">
|
||||
<List
|
||||
grid={{ gutter: 16, column: 3 }}
|
||||
dataSource={products}
|
||||
renderItem={product => (
|
||||
<List.Item>
|
||||
<Card
|
||||
title={product.name}
|
||||
extra={<Button onClick={() => handleEditProduct(product)}>编辑</Button>}
|
||||
actions={[
|
||||
<Button onClick={() => handleToggleProductStatus(product.id)}>
|
||||
{product.is_active ? '下架' : '上架'}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<p>价格: ¥{product.price}</p>
|
||||
<p>数量: {product.quantity}</p>
|
||||
<p>状态: {product.is_active ? '上架' : '未上架'}</p>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</TabPane>
|
||||
<TabPane tab="我的订单" key="2">
|
||||
<List
|
||||
dataSource={orders}
|
||||
renderItem={order => (
|
||||
<List.Item>
|
||||
<Card
|
||||
title={`订单 #${order.id} - ${order.flowerName}`}
|
||||
extra={
|
||||
order.status === 'pending' ?
|
||||
<Button onClick={() => handleCancelOrder(order.id)}>取消订单</Button> :
|
||||
null
|
||||
}
|
||||
>
|
||||
<p>数量: {order.quantity}</p>
|
||||
<p>总价: ¥{order.totalPrice}</p>
|
||||
<p>状态: {order.status}</p>
|
||||
<p>订单日期: {new Date(order.createdAt).toLocaleString()}</p>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
|
||||
<Modal
|
||||
title="编辑花卉信息"
|
||||
visible={isModalVisible}
|
||||
onCancel={() => {
|
||||
setIsModalVisible(false);
|
||||
setEditingProduct(null);
|
||||
form.resetFields();
|
||||
}}
|
||||
footer={null}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleUpdateProduct}
|
||||
layout="vertical"
|
||||
>
|
||||
<Form.Item name="name" label="花名" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="price" label="单价" rules={[{ required: true }]}>
|
||||
<InputNumber min={0} step={0.01} />
|
||||
</Form.Item>
|
||||
<Form.Item name="quantity" label="数量" rules={[{ required: true }]}>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="描述">
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
更新花卉
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderPage;
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
|
||||
function ProductDetailPage() {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 模拟产品数据
|
||||
const product = { id, name: 'Sample Flower', price: 10, description: 'A beautiful flower' };
|
||||
|
||||
const handleOrder = () => {
|
||||
// 模拟下单过程
|
||||
const orderId = Math.floor(Math.random() * 1000);
|
||||
navigate(`/order/${orderId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2>{product.name}</h2>
|
||||
<p>单价 ¥{product.price}</p>
|
||||
<p>{product.description}</p>
|
||||
<button onClick={handleOrder}>Place Order</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductDetailPage;
|
||||
@ -0,0 +1,87 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Upload, Button, Card, Typography, Space } from 'antd';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
export default function FlowerScanner() {
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [result, setResult] = useState(null);
|
||||
|
||||
const handleUpload = async (info) => {
|
||||
const { status } = info.file;
|
||||
|
||||
if (status === 'done') {
|
||||
setScanning(true);
|
||||
const formData = new FormData();
|
||||
formData.append('image', info.file.originFileObj);
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:5000/api/identify', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
|
||||
const url = URL.createObjectURL(info.file.originFileObj);
|
||||
setImageUrl(url);
|
||||
setScanning(false);
|
||||
setResult(response.data);
|
||||
} catch (error) {
|
||||
console.error('识别期间出现问题:', error);
|
||||
setScanning(false);
|
||||
setResult({ error: '识别失败，请重新尝试' });
|
||||
}
|
||||
} else if (status === 'error') {
|
||||
setResult({ error: `${info.file.name} file upload failed.` });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size="large" style={{ display: 'flex' }}>
|
||||
<Title level={2}>花卉识别</Title>
|
||||
<Text>上传一张花卉图片以供识别:</Text>
|
||||
<Upload
|
||||
name="image"
|
||||
action="http://localhost:5000/api/identify"
|
||||
onChange={handleUpload}
|
||||
accept="image/*"
|
||||
showUploadList={false}
|
||||
>
|
||||
<Button icon={<UploadOutlined />} loading={scanning}>
|
||||
{scanning ? '识别中' : '上传图片'}
|
||||
</Button>
|
||||
</Upload>
|
||||
|
||||
{result && (
|
||||
<Card title="识别结果:" style={{ width: 300 }}>
|
||||
{result.error ? (
|
||||
<Text type="danger">{result.error}</Text>
|
||||
) : (
|
||||
<>
|
||||
<img src={imageUrl} alt="花卉识别图片" width={250} height={200}></img>
|
||||
<Text strong>花名: </Text>
|
||||
<Text>{result.name}</Text>
|
||||
<br />
|
||||
{result.probability && (
|
||||
<>
|
||||
<Text strong>识别正确概率: </Text>
|
||||
<Text>{(result.probability * 100).toFixed(2)}%</Text>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{result.description && (
|
||||
<>
|
||||
<Text strong>描述: </Text>
|
||||
<Text>{result.description}</Text>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Form, Input, InputNumber, Button, message, Upload } from 'antd';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
const UploadFlowerPage = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [imageFile, setImageFile] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onFinish = async (values) => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('name', values.name.trim());
|
||||
formData.append('description', (values.description || '').trim());
|
||||
formData.append('price', values.price.toString());
|
||||
formData.append('quantity', values.quantity.toString());
|
||||
if (imageFile) {
|
||||
formData.append('image', imageFile);
|
||||
}
|
||||
|
||||
const response = await axios.post('http://localhost:5000/api/flowers', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
|
||||
message.success('成功上传花卉!');
|
||||
form.resetFields();
|
||||
setImageFile(null);
|
||||
navigate('/search');
|
||||
} catch (error) {
|
||||
console.error('上传花卉时出现错误:', error);
|
||||
if (error.response && error.response.data && error.response.data.error) {
|
||||
message.error(`上传花卉失败: ¥{error.response.data.error}`);
|
||||
} else {
|
||||
message.error('上传失败，请重新上传');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageUpload = ({ file, onSuccess }) => {
|
||||
setImageFile(file);
|
||||
onSuccess("好");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>上传花卉</h1>
|
||||
<Form form={form} layout="vertical" onFinish={onFinish}>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="花名"
|
||||
rules={[{ required: true, message: '请输入花名!' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="描述">
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="price"
|
||||
label="单价"
|
||||
rules={[
|
||||
{ required: true, message: '请输入价格!' },
|
||||
{ type: 'number', min: 0, message: '价格需要是有效数字!' }
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="quantity"
|
||||
label="数量"
|
||||
rules={[
|
||||
{ required: true, message: '请输入花卉数量!' },
|
||||
{ type: 'number', min: 1, message: '数量应该至少为1!' }
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="图片">
|
||||
<Upload
|
||||
customRequest={handleImageUpload}
|
||||
listType="picture"
|
||||
maxCount={1}
|
||||
beforeUpload={(file) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('只能上传JPG/PNG文件!');
|
||||
}
|
||||
return isJpgOrPng;
|
||||
}}
|
||||
>
|
||||
<Button icon={<UploadOutlined />}>上传图片</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
上传花卉
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UploadFlowerPage;
|
||||
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@ -0,0 +1,12 @@
|
||||
export const theme = {
|
||||
token: {
|
||||
colorPrimary: '#FF69B4', // 热粉红色
|
||||
colorLink: '#FF1493', // 深粉红色
|
||||
colorSuccess: '#98FB98', // 淡绿色，与粉色搭配
|
||||
colorWarning: '#FFB6C1', // 浅粉红色
|
||||
colorError: '#FF69B4', // 热粉红色
|
||||
colorInfo: '#FFC0CB', // 粉红色
|
||||
colorTextBase: '#4B0082', // 靛青色，作为主要文字颜色
|
||||
colorBgBase: '#FFF0F5', // 浅粉红色，作为背景色
|
||||
},
|
||||
};
|
||||
Loading…
Reference in new issue