添加测量详情页面

src/components/MeasureItem.tsx

@@ -17,12 +17,13 @@ export default function MeasureItem(props: {
   segment: string;
   direction: string;
   railType: string;
+  onDetail?: () => void;
 }) {
   return (
     <div>
       <section className="h-10 flex justify-between items-center px-2">
         <h1 className="text-base font-medium ">{props.name}</h1>
-        <div className="self-stretch flex items-center">
+        <div className="self-stretch flex items-center" onClick={props.onDetail}>
           <span className="mr-2 text-sm text-primary font-medium">查看</span>
           <img src={icon_arr} alt="arr" className="h-[10px]" />
         </div>
@@ -51,6 +52,7 @@ export function MeasureItemEx(props: {
   railType: string;
   selected: boolean;
   onSelected?: () => void;
+  onDetail?: () => void;
 }) {
   return (
     <div className="flex" onClick={props.onSelected}>
@@ -64,7 +66,7 @@ export function MeasureItemEx(props: {
       <div className="flex-1">
         <section className="h-10 flex justify-between items-center px-2">
           <h1 className="text-base font-medium ">{props.name}</h1>
-          <div className="self-stretch flex items-center">
+          <div className="self-stretch flex items-center" onClick={props.onDetail}>
             <span className="mr-2 text-sm text-primary font-medium">查看</span>
             <img src={icon_arr} alt="arr" className="h-[10px]" />
           </div>

src/pages/MeasureRecord.tsx

@@ -0,0 +1,17 @@
+import { NavBar } from 'antd-mobile';
+import { useNavigate } from 'react-router-dom';
+
+export default function MeasureRecord() {
+  const navigate = useNavigate();
+  const back = () => navigate(-1);
+  return (
+    <div>
+      <NavBar className="bg-white" onBack={back}>
+        测量详情
+      </NavBar>
+      <div className="main-page-content overflow-x-hidden overflow-y-auto">
+        
+      </div>
+    </div>
+  );
+}

src/pages/Mine.tsx

@@ -2,6 +2,7 @@ import { List, NavBar } from 'antd-mobile';
 import { useState } from 'react';
 import MeasureItem, { MeasureItemEx } from '../components/MeasureItem';
 import './Mine.scss';
+import { useNavigate } from 'react-router-dom';
 
 const dataList = [
   {
@@ -52,7 +53,8 @@ const dataList = [
 ];
 
 export default function Mine() {
-  const [tabIndex, setTabIndex] = useState(1);
+  const navigate = useNavigate();
+  const [tabIndex, setTabIndex] = useState(0);
   const [selectIds, setSelectIds] = useState<number[]>([]);
   const onItemSelected = (id: number) => {
     if (selectIds.includes(id)) {
@@ -89,7 +91,7 @@ export default function Mine() {
               <List>
                 {dataList.map(item => (
                   <List.Item key={item.id}>
-                    <MeasureItem {...item} />
+                    <MeasureItem {...item} onDetail={() => navigate('/measure/record', {})} />
                   </List.Item>
                 ))}
               </List>
@@ -97,23 +99,27 @@ export default function Mine() {
           )}
           {tabIndex === 1 && (
             <>
-            <div className='flex items-center gap-3 px-4 mb-4'>
-                <button className='btn-contained rounded-md h-9 w-[100px]' disabled={selectIds.length === 0} >上传</button>
-                <p className='text-sm text-[#AFAFAF]'>可在设置页面配置上传地址</p>
-            </div>
-            <div className="unUpload-list overflow-x-hidden overflow-y-auto">
-              <List>
-                {dataList.map(item => (
-                  <List.Item key={item.id}>
-                    <MeasureItemEx
-                      {...item}
-                      selected={selectIds.includes(item.id)}
-                      onSelected={() => onItemSelected(item.id)}
-                    />
-                  </List.Item>
-                ))}
-              </List>
-            </div>
+              <div className="flex items-center gap-3 px-4 mb-4">
+                <button
+                  className="btn-contained rounded-md h-9 w-[100px]"
+                  disabled={selectIds.length === 0}>
+                  上传
+                </button>
+                <p className="text-sm text-[#AFAFAF]">可在设置页面配置上传地址</p>
+              </div>
+              <div className="unUpload-list overflow-x-hidden overflow-y-auto">
+                <List>
+                  {dataList.map(item => (
+                    <List.Item key={item.id}>
+                      <MeasureItemEx
+                        {...item}
+                        selected={selectIds.includes(item.id)}
+                        onSelected={() => onItemSelected(item.id)}
+                      />
+                    </List.Item>
+                  ))}
+                </List>
+              </div>
             </>
           )}
         </main>