固定头部导航，详细页取消分页

src/stores/Reservation.js

@@ -58,6 +58,50 @@ class Reservation {
       guide: '-',
     }
   ];
+
+  customerList = [
+    {
+      title: 'Crane / Gemma Chelse',
+      description: '性别:男 生日:2002-07-02 国籍:英国 护照号:559489179 护照有效期:2029-03-11',
+    },
+    {
+      title: 'McCracken / Ryan Lee',
+      description: '性别:男 生日:1964-11-21 国籍:英国 护照号:126793728 护照有效期:2031-08-03',
+    },
+    {
+      title: 'Ramlakhan / Darryl',
+      description: '性别:男 生日:1983-04-16 国籍:特立尼达和多巴哥 护照号:TB591985 护照有效期:2027-11-12',
+    },
+    {
+      title: 'Ramlakhan / Reanne',
+      description: '性别:女 生日:1983-12-16 国籍:特立尼达和',
+    },
+    {
+      title: 'Alexander Daich',
+      description: '性别:男 国籍:以色列',
+    },
+  ];
+
+  itineraryList = [
+    {
+      key: '1',
+      name: '2',
+      age: '二',
+      address: '5月2日',
+    },
+    {
+      key: '2',
+      name: '2',
+      age: '三',
+      address: '5月3日',
+    },
+    {
+      key: '3',
+      name: '3',
+      age: '新德里（New Delhi）',
+      address: '新德里苏尔亚酒店The Surya New Delhi',
+    },
+  ];
 }
 
 export default Reservation;

src/views/App.jsx

@@ -68,7 +68,7 @@ function App() {
         style={{
           minHeight: "100vh",
         }}>
-        <Header className="header">
+        <Header className="header" style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
           <Row gutter={{ md: 24 }} justify="end">
             <Col span={22}>              
               <img src={AppLogo} className="logo" alt="App logo" />

src/views/reservation/Detail.jsx

@@ -9,22 +9,7 @@ import { useStore } from '../../stores/StoreContext.js';
 const { Title } = Typography;
 const { TextArea } = Input;
 
-const dataSource = [
-  {
-    key: '1',
-    name: '2',
-    age: '二',
-    address: '5月2日',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-];
-
-const columns = [
+const itineraryListColumns = [
   {
     title: '天数',
     dataIndex: 'name',
@@ -72,30 +57,11 @@ const columns = [
   },
 ];
 
-const customerList = [
-  {
-    title: 'Crane / Gemma Chelse',
-    description: '性别:男 生日:2002-07-02 国籍:英国 护照号:559489179 护照有效期:2029-03-11',
-  },
-  {
-    title: 'McCracken / Ryan Lee',
-    description: '性别:男 生日:1964-11-21 国籍:英国 护照号:126793728 护照有效期:2031-08-03',
-  },
-  {
-    title: 'Ramlakhan / Darryl',
-    description: '性别:男 生日:1983-04-16 国籍:特立尼达和多巴哥 护照号:TB591985 护照有效期:2027-11-12',
-  },
-  {
-    title: 'Ramlakhan / Reanne',
-    description: '性别:女 生日:1983-12-16 国籍:特立尼达和',
-  },
-];
-
 function Detail() {
   const navigate = useNavigate();
   const { reservationId } = useParams();
   const { reservationStore } = useStore();
-  const { reservationList } = reservationStore;
+  const { itineraryList, customerList } = reservationStore;
 
   useEffect(() => {
     console.info('Detail.useEffect: ' + reservationId);
@@ -124,7 +90,12 @@ function Detail() {
       </Row>
       <Row>
         <Col span={24}>
-        <Table dataSource={dataSource} columns={columns} />
+        <Table 
+          pagination={{
+            hideOnSinglePage: true
+          }}
+          dataSource={itineraryList} columns={itineraryListColumns} 
+        />
         </Col>
       </Row>
       <Row>

src/views/reservation/Newest.jsx

@@ -73,7 +73,15 @@ function Newest() {
       </Row>
       <Row>
         <Col span={24}>
-          <Table columns={reservationListColumns} dataSource={toJS(reservationList)} />
+          <Table 
+            pagination={{
+              position: ['bottomCenter'],
+              current: 1,
+              pageSize: 10,
+              total: 200
+            }}
+            columns={reservationListColumns} dataSource={toJS(reservationList)} 
+          />
         </Col>
       </Row>
     </Space>