测量步骤

src/index.tsx

@@ -6,6 +6,7 @@ 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 MeasureAction from "./pages/measure/components/MeasureAction";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
 						path: "detail",
 						element: <MeasureDetail />,
 					},
+					{
+						path: "action",
+						element: <MeasureAction />,
+					},
 				],
 			},
 		],

src/pages/measure/Measure.tsx

@@ -4,7 +4,7 @@ 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 className="bg-white rounded-xl h-full ml-4 mr-6 overflow-auto">
 				<Outlet />
 			</main>
 		</div>

src/pages/measure/components/MeasureAction.tsx

@@ -0,0 +1,40 @@
+import { Button, Checkbox, CheckboxProps, Radio, RadioChangeEvent } from "antd";
+import { useState } from "react";
+
+export default function MeasureAction() {
+	const [sideVal, setSideVal] = useState<1 | 2>(1);
+    const onSideChange = (e: RadioChangeEvent) => {
+        setSideVal(e.target.value);
+      };
+      const onAfterSaveChange: CheckboxProps['onChange'] = (e) => {
+        console.log(`checked = ${e.target.checked}`);
+      };
+	return (
+		<div className="flex h-full ">
+			<div className="w-[960px] flex-none border"></div>
+			<div className="w-[300px] flex-none py-6">
+				<h1 className="font-medium text-xl text-center">测量步骤</h1>
+				<section className="flex flex-col items-center gap-4 mt-6 border-t border-[#D8D8D8] py-4">
+					<Radio.Group
+						value={sideVal}
+                        onChange={onSideChange}
+						options={[
+							{ value: 1, label: "测量左侧" },
+							{ value: 2, label: "测量右侧" },
+						]}
+					/>
+					<Button style={{ width: 200 }} size="large" type="primary">
+						开始测量
+					</Button>
+					<Button style={{ width: 200 }} size="large" type="primary">
+						分析
+					</Button>
+					<Button style={{ width: 200 }} size="large" type="primary">
+						保存
+					</Button>
+                    <Checkbox onChange={onAfterSaveChange}>保存后自动开始新测量</Checkbox>
+				</section>
+			</div>
+		</div>
+	);
+}

src/pages/measure/components/MeasureConfig.tsx

@@ -5,7 +5,7 @@ export default function MeasureConfig() {
     const navigate = useNavigate()
     const onFinish = (values: any) => {
         console.log('Received values of form: ', values);
-        navigate('../detail')
+        navigate('../action')
       };
 	return (
 		<div className="h-full flex justify-center items-center">