调整布局增加界面翻译

src/stores/Reservation.js

@@ -14,24 +14,33 @@ class Reservation {
       this.reservationList = [
         {
           key: '1',
-          name: '中华游111029-N111025076',
-          age: 32,
-          address: '5大1小',
-          tags: ['nice', 'developer'],
+          id: '1',
+          referenceNumber: '中华游111029-N111025076',
+          arrivalDate: '2023-04-08',
+          pax: '5AD 1CH',
+          status: 'Confirm',
+          reservationDate: '2023-04-08 19:31',
+          guide: 'Bill',
         },
         {
           key: '2',
-          name: '中华游111030-HY110704017',
-          age: 42,
-          address: '2大',
-          tags: ['loser'],
+          id: '3',
+          referenceNumber: '中华游111029-N111025076',
+          arrivalDate: '2023-04-08',
+          pax: '5AD 1CH',
+          status: 'Confirm',
+          reservationDate: '2023-04-08 19:31',
+          guide: 'Jim',
         },
         {
           key: '3',
-          name: '中华游111030-Y111004040',
-          age: 32,
-          address: '30大',
-          tags: ['cool', 'teacher'],
+          id: '3',
+          referenceNumber: '中华游111029-N111025076',
+          arrivalDate: '2023-05-08',
+          pax: '3AD',
+          status: 'Confirm',
+          reservationDate: '2023-01-08 19:31',
+          guide: 'Giffigan',
         },
       ];
     });
@@ -40,10 +49,13 @@ class Reservation {
   reservationList = [
     {
       key: '1',
-      name: '-',
-      age: 0,
-      address: '-',
-      tags: ['*'],
+      id: '1',
+      referenceNumber: '-',
+      arrivalDate: '-',
+      pax: '-',
+      status: '-',
+      reservationDate: '-',
+      guide: '-',
     }
   ];
 }

src/views/App.jsx

@@ -56,15 +56,13 @@ export default function App() {
         }}>
         <Header className="header">
           <Row gutter={{ md: 24 }} justify="end">
-
             <Col span={22}>
               <div className="logo" />
-
-              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={
+              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} items={
                 [
                   { key: 1, label: <Link to="/reservation/newest">Reservation</Link> },
-                  { key: 3, label: <Link to="/feedback/list">Feedback</Link> },
-                  { key: 2, label: <Link to="/invoice/list">Invoice</Link> }
+                  { key: 2, label: <Link to="/feedback/list">Feedback</Link> },
+                  { key: 3, label: <Link to="/invoice/list">Invoice</Link> }
                 ]
               } />
             </Col>
@@ -83,36 +81,7 @@ export default function App() {
               </Dropdown>
             </Col>
           </Row>
-
-
         </Header>
-
-        <Layout>
-          <Sider collapsible={true} breakpoint="lg">
-            <Menu
-              mode="inline"
-              defaultSelectedKeys={['1']}
-              style={{
-                height: '100%',
-                borderRight: 0,
-              }}
-              items={[
-                {
-                  key: '1',
-                  icon: <UserOutlined />,
-                  label: <Link to="/plan/1">Jim</Link>,
-                },
-                {
-                  key: '2',
-                  icon: <VideoCameraOutlined />,
-                  label: <Link to="/plan/2">Bill</Link>,
-                },
-              ]}
-            />
-          </Sider>
-          <Layout style={{
-            padding: '0 24px 24px',
-          }}>
         <Content
           style={{
             padding: 24,
@@ -125,8 +94,6 @@ export default function App() {
         <Footer>
         </Footer>
       </Layout>
-        </Layout>
-      </Layout>
     </ConfigProvider>
   );
 }

src/views/reservation/Detail.jsx

@@ -8,83 +8,91 @@ import { useStore } from '../../stores/StoreContext.js';
 
 const { Title } = Typography;
 
-const planListColumns = [
+const dataSource = [
   {
-    title: 'Name',
+    key: '1',
+    name: '2',
+    age: '二',
+    address: '5月2日',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+];
+
+const columns = [
+  {
+    title: '天数',
     dataIndex: 'name',
     key: 'name',
-    render: (text) => <a>{text}</a>,
   },
   {
-    title: 'Age',
+    title: '星期',
     dataIndex: 'age',
     key: 'age',
   },
   {
-    title: 'Address',
+    title: '日期',
     dataIndex: 'address',
     key: 'address',
   },
   {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-    render: (_, { tags }) => (
-      <>
-        {tags.map((tag) => {
-          let color = tag.length > 5 ? 'geekblue' : 'green';
-          if (tag === 'loser') {
-            color = 'volcano';
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          );
-        })}
-      </>
-    ),
+    title: '始发城市',
+    dataIndex: 'address',
+    key: 'address',
   },
   {
-    title: 'Action',
-    key: 'action',
-    render: (_, record) => (
-      <Space size="middle">
-        <a>Invite {record.name}</a>
-        <a>Delete</a>
-      </Space>
-    ),
+    title: '抵达城市',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: '交通',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: '酒店',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: '餐饮 [午、晚]',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: '景点及旅游服务安排',
+    dataIndex: 'address',
+    key: 'address',
   },
 ];
 
 function Detail() {
   const { reservationId } = useParams();
-  const { plan } = useStore();
-  const { planList } = plan;
+  const { reservationStore } = useStore();
+  const { reservationList } = reservationStore;
 
   useEffect(() => {
-    console.info('Detail.useEffect: ' + planId);
-  }, []);
+    console.info('Detail.useEffect: ' + reservationId);
+  }, [reservationId]);
 
   return (
     <Space direction="vertical" style={{ width: '100%' }}>
-      <Title level={3}>Plan Detail</Title>
-      <Row gutter={{ md: 24 }} justify="end">
-        <Col span={6}>
-        <Space direction="horizontal" style={{ width: '100%' }}>
-        Group Date: 
-          <DatePicker.RangePicker
-            allowClear={false}
-          />
-          </Space>
+    <Row gutter={{ md: 24 }}>
+        <Col span={20}>
+      <Title level={4}>Reservation Detail 中华游111029-N111025076</Title>
         </Col>
-        <Col span={12}>
-          <Button type='primary' onClick={() => plan.fetchRecent()}>Search</Button>
+        <Col span={4}>
+      <Button type="link" onClick={() => plan.fetchRecent()}>Return</Button>
         </Col>
       </Row>
       <Row>
         <Col span={24}>
-          <Table columns={planListColumns} dataSource={toJS(planList)} />
+        <Table dataSource={dataSource} columns={columns} />
         </Col>
       </Row>
     </Space>

src/views/reservation/Newest.jsx

@@ -1,59 +1,43 @@
-import { useParams } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { useEffect } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
-import moment from "moment";
-import { Row, Col, Space, Button, Table, Tag, Typography, DatePicker } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio } from 'antd';
 import { useStore } from '../../stores/StoreContext.js';
 
 const { Title } = Typography;
 
 const reservationListColumns = [
   {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-    render: (text) => <a>{text}</a>,
+    title: 'Reference number',
+    dataIndex: 'referenceNumber',
+    key: 'Reference number',
+    render: (text, record) => <NavLink to={`/reservation/${record.id}`}>{text}</NavLink>,
   },
   {
-    title: 'Age',
-    dataIndex: 'age',
-    key: 'age',
+    title: 'Arrival date',
+    dataIndex: 'arrivalDate',
+    key: 'Arrival date',
   },
   {
-    title: 'Address',
-    dataIndex: 'address',
-    key: 'address',
+    title: 'Pax',
+    key: 'Pax',
+    dataIndex: 'pax'
   },
   {
-    title: 'Tags',
-    key: 'tags',
-    dataIndex: 'tags',
-    render: (_, { tags }) => (
-      <>
-        {tags.map((tag) => {
-          let color = tag.length > 5 ? 'geekblue' : 'green';
-          if (tag === 'loser') {
-            color = 'volcano';
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          );
-        })}
-      </>
-    ),
+    title: 'Status',
+    key: 'Status',
+    dataIndex: 'status'
   },
   {
-    title: 'Action',
-    key: 'action',
-    render: (_, record) => (
-      <Space size="middle">
-        <a>Invite {record.name}</a>
-        <a>Delete</a>
-      </Space>
-    ),
+    title: 'Reservation date',
+    key: 'Reservation date',
+    dataIndex: 'reservationDate'
+  },
+  {
+    title: 'Guide',
+    key: 'Guide',
+    dataIndex: 'guide'
   },
 ];
 
@@ -68,18 +52,41 @@ function Newest() {
 
   return (
     <Space direction="vertical" style={{ width: '100%' }}>
-      <Title level={3}>Newest Plans</Title>
-      <Row gutter={{ md: 24 }} justify="end">
+      <Title level={3}>Newest Reservations</Title>
+      <Row gutter={{ md: 24 }}>
+        <Col span={5}>
+            <Input placeholder="Reference number" />
+        </Col>
         <Col span={6}>
-        <Space direction="horizontal" style={{ width: '100%' }}>
-        Group Date: 
+          <Space direction="horizontal">
+          Arrival Date
             <DatePicker.RangePicker
-            allowClear={false}
+              allowClear={true}
+              inputReadOnly={true}
+              placeholder={['Arrival Date', '']}
+            />
+          </Space>
+        </Col>
+        <Col span={8}>
+          <Space direction="horizontal">
+          快速选择
+            <Radio.Group
+              options={[
+                { label: '未确认', value: '1' },
+                { label: '已确认', value: '2' },
+                { label: '未录入导游', value: '3' },
+                { label: '有变更', value: '4' },
+                { label: '已取消', value: '5' },
+                { label: '全部', value: '6' },
+              ]}
+              value={'6'}
+              optionType="button"
+              buttonStyle="solid"
             />
           </Space>
         </Col>
-        <Col span={12}>
-          <Button type='primary' onClick={() => plan.fetchRecent()}>Search</Button>
+        <Col span={4}>
+          <Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
         </Col>
       </Row>
       <Row>