调整布局增加界面翻译

src/stores/Reservation.js

@@ -14,24 +14,33 @@ class Reservation {
       this.reservationList = [
         {
           key: '1',
-          name: '中华游111029-N111025076',
+          id: '1',
-          age: 32,
+          referenceNumber: '中华游111029-N111025076',
-          address: '5大1小',
+          arrivalDate: '2023-04-08',
-          tags: ['nice', 'developer'],
+          pax: '5AD 1CH',
+          status: 'Confirm',
+          reservationDate: '2023-04-08 19:31',
+          guide: 'Bill',
         },
         {
           key: '2',
-          name: '中华游111030-HY110704017',
+          id: '3',
-          age: 42,
+          referenceNumber: '中华游111029-N111025076',
-          address: '2大',
+          arrivalDate: '2023-04-08',
-          tags: ['loser'],
+          pax: '5AD 1CH',
+          status: 'Confirm',
+          reservationDate: '2023-04-08 19:31',
+          guide: 'Jim',
         },
         {
           key: '3',
-          name: '中华游111030-Y111004040',
+          id: '3',
-          age: 32,
+          referenceNumber: '中华游111029-N111025076',
-          address: '30大',
+          arrivalDate: '2023-05-08',
-          tags: ['cool', 'teacher'],
+          pax: '3AD',
+          status: 'Confirm',
+          reservationDate: '2023-01-08 19:31',
+          guide: 'Giffigan',
         },
       ];
     });
@@ -40,10 +49,13 @@ class Reservation {
   reservationList = [
     {
       key: '1',
-      name: '-',
+      id: '1',
-      age: 0,
+      referenceNumber: '-',
-      address: '-',
+      arrivalDate: '-',
-      tags: ['*'],
+      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={['1']} items={
-              <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={
                 [
                   { key: 1, label: <Link to="/reservation/newest">Reservation</Link> },
-                  { key: 3, label: <Link to="/feedback/list">Feedback</Link> },
+                  { key: 2, label: <Link to="/feedback/list">Feedback</Link> },
-                  { key: 2, label: <Link to="/invoice/list">Invoice</Link> }
+                  { key: 3, label: <Link to="/invoice/list">Invoice</Link> }
                 ]
               } />
             </Col>
@@ -83,49 +81,18 @@ export default function App() {
               </Dropdown>
             </Col>
           </Row>
-
-
         </Header>
-
+        <Content
-        <Layout>
+          style={{
-          <Sider collapsible={true} breakpoint="lg">
+            padding: 24,
-            <Menu
+            margin: 0,
-              mode="inline"
+            minHeight: 280,
-              defaultSelectedKeys={['1']}
+            background: colorBgContainer,
-              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
+          <Outlet />
-              style={{
+        </Content>
-                padding: 24,
+        <Footer>
-                margin: 0,
+        </Footer>
-                minHeight: 280,
-                background: colorBgContainer,
-              }}>
-              <Outlet />
-            </Content>
-            <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: '始发城市',
+    dataIndex: 'address',
+    key: 'address',
+  },
+  {
+    title: '抵达城市',
     dataIndex: 'address',
     key: 'address',
   },
   {
-    title: 'Tags',
+    title: '交通',
-    key: 'tags',
+    dataIndex: 'address',
-    dataIndex: 'tags',
+    key: 'address',
-    render: (_, { tags }) => (
+  },
-      <>
+  {
-        {tags.map((tag) => {
+    title: '酒店',
-          let color = tag.length > 5 ? 'geekblue' : 'green';
+    dataIndex: 'address',
-          if (tag === 'loser') {
+    key: 'address',
-            color = 'volcano';
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          );
-        })}
-      </>
-    ),
   },
   {
-    title: 'Action',
+    title: '餐饮 [午、晚]',
-    key: 'action',
+    dataIndex: 'address',
-    render: (_, record) => (
+    key: 'address',
-      <Space size="middle">
+  },
-        <a>Invite {record.name}</a>
+  {
-        <a>Delete</a>
+    title: '景点及旅游服务安排',
-      </Space>
+    dataIndex: 'address',
-    ),
+    key: 'address',
   },
 ];
 
 function Detail() {
   const { reservationId } = useParams();
-  const { plan } = useStore();
+  const { reservationStore } = useStore();
-  const { planList } = plan;
+  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 }}>
-      <Row gutter={{ md: 24 }} justify="end">
+        <Col span={20}>
-        <Col span={6}>
+      <Title level={4}>Reservation Detail 中华游111029-N111025076</Title>
-        <Space direction="horizontal" style={{ width: '100%' }}>
-        Group Date: 
-          <DatePicker.RangePicker
-            allowClear={false}
-          />
-          </Space>
         </Col>
-        <Col span={12}>
+        <Col span={4}>
-          <Button type='primary' onClick={() => plan.fetchRecent()}>Search</Button>
+      <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, Input, Typography, DatePicker, Radio } from 'antd';
-import { Row, Col, Space, Button, Table, Tag, Typography, DatePicker } from 'antd';
 import { useStore } from '../../stores/StoreContext.js';
 
 const { Title } = Typography;
 
 const reservationListColumns = [
   {
-    title: 'Name',
+    title: 'Reference number',
-    dataIndex: 'name',
+    dataIndex: 'referenceNumber',
-    key: 'name',
+    key: 'Reference number',
-    render: (text) => <a>{text}</a>,
+    render: (text, record) => <NavLink to={`/reservation/${record.id}`}>{text}</NavLink>,
   },
   {
-    title: 'Age',
+    title: 'Arrival date',
-    dataIndex: 'age',
+    dataIndex: 'arrivalDate',
-    key: 'age',
+    key: 'Arrival date',
   },
   {
-    title: 'Address',
+    title: 'Pax',
-    dataIndex: 'address',
+    key: 'Pax',
-    key: 'address',
+    dataIndex: 'pax'
   },
   {
-    title: 'Tags',
+    title: 'Status',
-    key: 'tags',
+    key: 'Status',
-    dataIndex: 'tags',
+    dataIndex: 'status'
-    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: 'Action',
+    title: 'Reservation date',
-    key: 'action',
+    key: 'Reservation date',
-    render: (_, record) => (
+    dataIndex: 'reservationDate'
-      <Space size="middle">
+  },
-        <a>Invite {record.name}</a>
+  {
-        <a>Delete</a>
+    title: 'Guide',
-      </Space>
+    key: 'Guide',
-    ),
+    dataIndex: 'guide'
   },
 ];
 
@@ -68,18 +52,41 @@ function Newest() {
 
   return (
     <Space direction="vertical" style={{ width: '100%' }}>
-      <Title level={3}>Newest Plans</Title>
+      <Title level={3}>Newest Reservations</Title>
-      <Row gutter={{ md: 24 }} justify="end">
+      <Row gutter={{ md: 24 }}>
+        <Col span={5}>
+            <Input placeholder="Reference number" />
+        </Col>
         <Col span={6}>
-        <Space direction="horizontal" style={{ width: '100%' }}>
+          <Space direction="horizontal">
-        Group Date: 
+          Arrival Date
-          <DatePicker.RangePicker
+            <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}>
+        <Col span={4}>
-          <Button type='primary' onClick={() => plan.fetchRecent()}>Search</Button>
+          <Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
         </Col>
       </Row>
       <Row>