测量详情基础布局

src/components/MeasureItem.tsx

@@ -23,14 +23,12 @@ export default function MeasureItem(props: {
   segment: string;
   direction: string;
   railType: string;
-  uploadState: UpdateState;
   onDetail?: () => void;
 }) {
   return (
     <div className="flex mx-2 gap-3">
       <main className="flex-1">
         <header className="flex items-center gap-2">
-          {props.uploadState === 'uploaded' && <img src={icon_uploaded} alt="icon" />}
           <h1 className="text-[15px] font-medium ">{props.name}</h1>
         </header>
         <main className="flex my-2">

src/pages/MeasureRecord.tsx

@@ -1,9 +1,12 @@
 import { NavBar } from 'antd-mobile';
+import { useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import MeasurementCanvas, { MeasurementCanvasRef } from '../components/konva/MeasurementCanvas';
 
 export default function MeasureRecord() {
   const navigate = useNavigate();
-  const params = useParams();
+  const params = useParams(); // params.recordId
+  const canvasRef = useRef<MeasurementCanvasRef>(null);
   const back = () => navigate(-1);
   return (
     <div>
@@ -11,7 +14,51 @@ export default function MeasureRecord() {
         测量详情
       </NavBar>
       <div className="main-page-content overflow-x-hidden overflow-y-auto">
-        <p>{params.recordId}</p>
+        <div className="relative h-0 p-0 pb-[70%] border-y border-[#dedede]">
+          <div className="absolute left-0 right-0 top-0 bottom-0 bg-title">
+            <MeasurementCanvas
+              width={window.innerWidth}
+              height={window.innerWidth * 0.7}
+              logicalExtent={{ minX: -45, maxX: 45, minY: -18, maxY: 52 }}
+              gridStep={3}
+              origin={{ x: 0, y: 20 }}
+              pixelPerMm={window.innerWidth / 90}
+              maxZoom={5}
+              showGrid={true}
+              showBenchmark={true}
+              showAnalysis={false}
+              showScale={false}
+              scaleInterval={1}
+              showCoordinates={false}
+              ref={canvasRef}
+            />
+          </div>
+        </div>
+        <section>
+            <h1 className='h-10 px-4 text-base font-medium leading-10'>详细信息</h1>
+            <div className='grid grid-cols-[auto_1fr] bg-white px-5 py-3 gap-x-5 gap-y-4 text-sm'>
+                <p className='text-[#818181]'>创建时间</p>
+                <span className='text-text'>2025-03-12 10:30</span>
+                
+                <p className='text-[#818181]'>测量名称</p>
+                <span className='text-text'>ABC-DEF-GHI</span>
+                
+                <p className='text-[#818181]'>轨型</p>
+                <span className='text-text'>60N轨</span>
+
+                <p className='text-[#818181]'>铁路局名称</p>
+                <span className='text-text'>北京铁路局</span>
+
+                <p className='text-[#818181]'>路段名称</p>
+                <span className='text-text'>客运段</span>
+
+                <p className='text-[#818181]'>线路名称</p>
+                <span className='text-text'>京沪线</span>
+
+                <p className='text-[#818181]'>方向</p>
+                <span className='text-text'>上行方向</span>
+            </div>
+        </section>
       </div>
     </div>
   );

src/pages/Mine.tsx

@@ -93,7 +93,6 @@ export default function Mine() {
                   <List.Item key={item.id}>
                     <MeasureItem
                       {...item}
-                      uploadState="uploaded"
                       onDetail={() => navigate(`/measure/record/${item.id}`)}
                     />
                   </List.Item>