添加新建测量

src/index.tsx

@@ -4,6 +4,8 @@ import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Login from "./pages/login/Login";
 import Measure from "./pages/measure/Measure";
+import MeasureConfig from "./pages/measure/components/MeasureConfig";
+import MeasureDetail from "./pages/measure/components/MeasureDetail";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
@@ -13,8 +15,18 @@ const router = createBrowserRouter([
 		element: <App />,
 		children: [
 			{
-				path: "home",
+				path: "measure",
 				element: <Measure />,
+				children: [
+					{
+						path: "config",
+						element: <MeasureConfig />,
+					},
+					{
+						path: "detail",
+						element: <MeasureDetail />,
+					},
+				],
 			},
 		],
 	},

src/pages/measure/Measure.tsx

@@ -1,9 +1,12 @@
+import { Outlet } from "react-router";
 import "./Measure.scss";
 
 export default function Measure() {
 	return (
 		<div className="main-page">
-			<main className="bg-white rounded-xl h-full ml-4 mr-6"></main>
+			<main className="bg-white rounded-xl h-full ml-4 mr-6">
+				<Outlet />
+			</main>
 		</div>
 	);
 }

src/pages/measure/components/MeasureConfig.tsx

@@ -0,0 +1,57 @@
+import { Button, Form, Input, Select } from "antd";
+import { useNavigate } from "react-router";
+
+export default function MeasureConfig() {
+    const navigate = useNavigate()
+    const onFinish = (values: any) => {
+        console.log('Received values of form: ', values);
+        navigate('../detail')
+      };
+	return (
+		<div className="h-full flex justify-center items-center">
+			<Form
+				name="basic"
+				labelCol={{ span: 8 }}
+				wrapperCol={{ span: 16 }}
+				style={{ minWidth: 360, maxWidth: 600 }}
+				size="large"
+				initialValues={{ remember: true }}
+				onFinish={onFinish}
+				// onFinishFailed={onFinishFailed}
+				autoComplete="off">
+				<Form.Item label="操作员" name="username" rules={[{ required: true, message: "Please input your username!" }]}>
+					<Input />
+				</Form.Item>
+
+				<Form.Item label="轨型" name="trackType">
+					<Select>
+						<Select.Option value="demo">Demo</Select.Option>
+					</Select>
+				</Form.Item>
+				<Form.Item label="核校" name="calibrationType">
+					<Select>
+						<Select.Option value="demo">Demo</Select.Option>
+					</Select>
+				</Form.Item>
+				<Form.Item label="测量名称" name="measureName" rules={[{ required: true, message: "Please input your username!" }]}>
+					<Input />
+				</Form.Item>
+				<Form.Item label="线路名称" name="lineName" rules={[{ required: true, message: "Please input your username!" }]}>
+					<Input />
+				</Form.Item>
+				<Form.Item label="位置" name="position" rules={[{ required: true, message: "Please input your username!" }]}>
+					<Input />
+				</Form.Item>
+				<Form.Item label="方向" name="direction" rules={[{ required: true, message: "Please input your username!" }]}>
+					<Input />
+				</Form.Item>
+
+				<Form.Item label={null}>
+					<Button type="primary" size="large" style={{ width: 220 }} htmlType="submit">
+						开始测量
+					</Button>
+				</Form.Item>
+			</Form>
+		</div>
+	);
+}

src/pages/measure/components/MeasureDetail.tsx

@@ -0,0 +1,3 @@
+export default function MeasureDetail() {
+    return <div>Detail</div>
+}