feat(register): add human body structure diagram to registration interface with adjustments needed

src/components/HumanBody.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import { message } from 'antd';
+
+// 直接 import 本地图片（推荐写法）
+import Abdomen from '../assets/imgs/VirtualHuman/Abdomen.png';
+import Abdomen_dow from '../assets/imgs/VirtualHuman/Abdomen_dow.png';
+
+import LowerLimb_Left from '../assets/imgs/VirtualHuman/LowerLimb_Left.png';
+import LowerLimb_Left_dow from '../assets/imgs/VirtualHuman/LowerLimb_Left_dow.png';
+
+import LowerLimb_Right from '../assets/imgs/VirtualHuman/LowerLimb_Right.png';
+import LowerLimb_Right_dow from '../assets/imgs/VirtualHuman/LowerLimb_Right_dow.png';
+
+import Skull from '../assets/imgs/VirtualHuman/Skull.png';
+import Skull_dow from '../assets/imgs/VirtualHuman/Skull_dow.png';
+
+import Spine from '../assets/imgs/VirtualHuman/Spine.png';
+import Spine_dow from '../assets/imgs/VirtualHuman/Spine_dow.png';
+
+import Thorax from '../assets/imgs/VirtualHuman/Thorax.png';
+import Thorax_dow from '../assets/imgs/VirtualHuman/Thorax_dow.png';
+
+import UpperLimb_Left from '../assets/imgs/VirtualHuman/UpperLimb_Left.png';
+import UpperLimb_Left_dow from '../assets/imgs/VirtualHuman/UpperLimb_Left_dow.png';
+
+import UpperLimb_Right from '../assets/imgs/VirtualHuman/UpperLimb_Right.png';
+import UpperLimb_Right_dow from '../assets/imgs/VirtualHuman/UpperLimb_Right_dow.png';
+
+// import VirtualHuman from "../assets/imgs/VirtualHuman/VirtualHuman.png";
+// import VirtualHuman_dow from "../assets/imgs/VirtualHuman/VirtualHuman_dow.png";
+
+// 建立一个映射表，方便统一管理
+// const bodyParts = {
+//   Abdomen: { normal: Abdomen, active: Abdomen_dow },
+//   LowerLimb_Left: { normal: LowerLimb_Left, active: LowerLimb_Left_dow },
+//   LowerLimb_Right: { normal: LowerLimb_Right, active: LowerLimb_Right_dow },
+//   Skull: { normal: Skull, active: Skull_dow },
+//   Spine: { normal: Spine, active: Spine_dow },
+//   Thorax: { normal: Thorax, active: Thorax_dow },
+//   UpperLimb_Left: { normal: UpperLimb_Left, active: UpperLimb_Left_dow },
+//   UpperLimb_Right: { normal: UpperLimb_Right, active: UpperLimb_Right_dow },
+//   //VirtualHuman: { normal: VirtualHuman, active: VirtualHuman_dow },
+// };
+const bodyParts = {
+  Skull: {
+    normal: Skull,
+    active: Skull_dow,
+    style: {
+      top: '0px',
+      left: '110px',
+      width: '72px',
+      height: '93px',
+      zIndex: 2,
+    },
+  },
+  Thorax: {
+    normal: Thorax,
+    active: Thorax_dow,
+    style: { top: '90px', left: '90px', width: '118px', height: '148px' },
+  },
+  Abdomen: {
+    normal: Abdomen,
+    active: Abdomen_dow,
+    style: { top: '240px', left: '95px', width: '132px', height: '116px' },
+  },
+  Spine: {
+    normal: Spine,
+    active: Spine_dow,
+    style: { top: '100px', left: '130px', width: '38px', height: '264px' },
+  },
+  UpperLimb_Left: {
+    normal: UpperLimb_Left,
+    active: UpperLimb_Left_dow,
+    style: {
+      top: '100px',
+      left: '15px',
+      width: '88px',
+      height: '280px',
+      zIndex: 1,
+    },
+  },
+  UpperLimb_Right: {
+    normal: UpperLimb_Right,
+    active: UpperLimb_Right_dow,
+    style: {
+      top: '100px',
+      left: '200px',
+      width: '88px',
+      height: '280px',
+      zIndex: 1,
+    },
+  },
+  LowerLimb_Left: {
+    normal: LowerLimb_Left,
+    active: LowerLimb_Left_dow,
+    style: { top: '355px', left: '90px', width: '68px', height: '337px' },
+  },
+  LowerLimb_Right: {
+    normal: LowerLimb_Right,
+    active: LowerLimb_Right_dow,
+    style: { top: '355px', left: '140px', width: '68px', height: '337px' },
+  },
+};
+
+export default function HumanBody() {
+  const [activePart, setActivePart] = useState(null);
+
+  const handleClick = (part) => {
+    setActivePart(part);
+    message.info(`你点击了：${part}`);
+  };
+
+  return (
+    // <div className="relative w-[300px] h-[600px] mx-auto">
+    //   {Object.entries(bodyParts).map(([part, images]) => {
+    //     const isActive = activePart === part;
+    //     return (
+    //       <img
+    //         key={part}
+    //         src={isActive ? images.active : images.normal}
+    //         alt={part}
+    //         onClick={() => handleClick(part)}
+    //         className="absolute top-0 left-0 w-full h-full cursor-pointer"
+    //       />
+    //     );
+    //   })}
+    // </div>
+    <div
+      className="relative border border-red-500"
+      style={{ width: '294px', height: '694px' }}
+    >
+      {/* <img
+                src={VirtualHuman}
+                alt="VirtualHuman"
+                style={{ position: "absolute", top: 0, left: 0, width: "294px", height: "694px", zIndex: 0 }}
+            /> */}
+      {Object.entries(bodyParts).map(([part, { normal, active, style }]) => {
+        const isActive = activePart === part;
+        return (
+          <img
+            key={part}
+            src={isActive ? active : normal}
+            alt={part}
+            onClick={() => handleClick(part)}
+            style={{ position: 'absolute', cursor: 'pointer', ...style }}
+          />
+        );
+      })}
+    </div>
+  );
+}

src/pages/patient/register.tsx

@@ -26,6 +26,7 @@ import registerToExam from '@/domain/patient/registerToExam';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { View } from '@/API/patient/viewActions';
+import HumanBody from '@/components/HumanBody';
 dayjs.extend(utc);
 
 const { useBreakpoint } = Grid;
@@ -113,7 +114,8 @@ const RegisterPage: React.FC = () => {
             <BasicInfoForm form={form} style={{ overflow: 'auto' }} />
           </Col>
           <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={9} className="h-full">
-            <RegisterAvailableList />
+            <HumanBody />
+            {/* <RegisterAvailableList /> */}
           </Col>
           <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={9} className="h-full">
             <SelectedProtocolList />