App.jsx
3.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// 导入首页
import Home from './pages/Home';
// 导入水果页面
import KiwiPage from './pages/fruits/KiwiPage';
import ApplePage from './pages/fruits/ApplePage';
import GrapePage from './pages/fruits/GrapePage';
import StrawberryPage from './pages/fruits/StrawberryPage';
import OrangePage from './pages/fruits/OrangePage';
import WatermelonPage from './pages/fruits/WatermelonPage';
import PomegranatePage from './pages/fruits/PomegranatePage';
import RedDatePage from './pages/fruits/RedDatePage';
// 导入蔬菜页面
import TomatoPage from './pages/vegetables/TomatoPage';
// 导入通用组件
import Header from './components/Header';
import Footer from './components/Footer';
import NotFound from './pages/NotFound';
// 导入样式
import './App.css';
function App() {
return (
<Router>
<div className="App">
{/* 头部导航 */}
<Header />
{/* 主要内容区域 */}
<main style={mainStyle}>
<Routes>
{/* 首页路由 */}
<Route path="/" element={<Home />} />
{/* 水果详情页路由 */}
<Route path="/fruit/kiwi" element={<KiwiPage />} />
<Route path="/fruit/apple" element={<ApplePage />} />
<Route path="/fruit/grape" element={<GrapePage />} />
<Route path="/fruit/strawberry" element={<StrawberryPage />} />
<Route path="/fruit/orange" element={<OrangePage />} />
<Route path="/fruit/watermelon" element={<WatermelonPage />} />
<Route path="/fruit/pomegranate" element={<PomegranatePage />} />
<Route path="/fruit/red-date" element={<RedDatePage />} />
{/* 蔬菜详情页路由 */}
<Route path="/vegetable/tomato" element={<TomatoPage />} />
{/* 其他功能路由 */}
<Route path="/products" element={<ProductsPage />} />
<Route path="/cart" element={<CartPage />} />
<Route path="/checkout" element={<CheckoutPage />} />
<Route path="/order-confirmation" element={<OrderConfirmationPage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contact" element={<ContactPage />} />
{/* 404 页面 */}
<Route path="*" element={<NotFound />} />
</Routes>
</main>
{/* 底部信息 */}
<Footer />
</div>
</Router>
);
}
// 临时占位组件（实际开发时需要替换为真实组件）
const ProductsPage = () => (
<div style={placeholderStyle}>
<h2>产品搜索页面</h2>
<p>此页面正在开发中...</p>
</div>
);
const CartPage = () => (
<div style={placeholderStyle}>
<h2>购物车页面</h2>
<p>此页面正在开发中...</p>
</div>
);
const CheckoutPage = () => (
<div style={placeholderStyle}>
<h2>结算页面</h2>
<p>此页面正在开发中...</p>
</div>
);
const OrderConfirmationPage = () => (
<div style={placeholderStyle}>
<h2>订单确认页面</h2>
<p>此页面正在开发中...</p>
</div>
);
const AboutPage = () => (
<div style={placeholderStyle}>
<h2>关于我们</h2>
<p>此页面正在开发中...</p>
</div>
);
const ContactPage = () => (
<div style={placeholderStyle}>
<h2>联系我们</h2>
<p>此页面正在开发中...</p>
</div>
);
// 样式定义
const mainStyle = {
minHeight: 'calc(100vh - 160px)',
backgroundColor: '#f8f9fa'
};
const placeholderStyle = {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '60vh',
textAlign: 'center',
padding: '2rem'
};
export default App;