feat(filter-area): use human body diagram for available protocol filtering area

src/pages/patient/components/bodyPositionFilter.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import HumanBody from '@/components/HumanBody';
+import RegisterAvailableFilterBar from './RegisterAvailableFilterBar';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/states/store';
+import { Flex } from 'antd';
+
+const BodyPositionFilter: React.FC = () => {
+  const selected = useSelector(
+    (state: RootState) => state.viewSelection.currentSelectionType
+  );
+  const [bodyPart, setBodyPart] = useState<string | undefined>(undefined);
+  const [patientType, setPatientType] = useState<string | undefined>(undefined);
+  const [enabled, setEnabled] = useState<string | undefined>(undefined);
+  return (
+    <Flex vertical style={{ height: '100%' }} className="w-full">
+      {/* 过滤区域 */}
+      <RegisterAvailableFilterBar
+        selected={selected}
+        bodyPart={bodyPart}
+        setBodyPart={setBodyPart}
+        patientType={patientType}
+        setPatientType={setPatientType}
+        enabled={enabled}
+        setEnabled={setEnabled}
+      />
+      <Flex
+        flex={1}
+        data-testid="human-body-container"
+        justify="center"
+        align="center"
+      >
+        <HumanBody />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default BodyPositionFilter;

src/pages/patient/components/register.available.list.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Flex } from 'antd';
 import ProtocolSelectionList from './register.protocol.list';
 import RegisterViewList from './register.available.view.list';
-import RegisterAvailableFilterBar from './RegisterAvailableFilterBar';
+// import RegisterAvailableFilterBar from './RegisterAvailableFilterBar';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/states/store';
 
@@ -10,14 +10,14 @@ const RegisterAvailableList: React.FC = () => {
   const selected = useSelector(
     (state: RootState) => state.viewSelection.currentSelectionType
   );
-  const [bodyPart, setBodyPart] = useState<string | undefined>(undefined);
-  const [patientType, setPatientType] = useState<string | undefined>(undefined);
-  const [enabled, setEnabled] = useState<string | undefined>(undefined);
+  // const [bodyPart, setBodyPart] = useState<string | undefined>(undefined);
+  // const [patientType, setPatientType] = useState<string | undefined>(undefined);
+  // const [enabled, setEnabled] = useState<string | undefined>(undefined);
 
   return (
     <Flex vertical className="h-full">
       {/* 过滤区域 */}
-      <RegisterAvailableFilterBar
+      {/* <RegisterAvailableFilterBar
         selected={selected}
         bodyPart={bodyPart}
         setBodyPart={setBodyPart}
@@ -25,7 +25,7 @@ const RegisterAvailableList: React.FC = () => {
         setPatientType={setPatientType}
         enabled={enabled}
         setEnabled={setEnabled}
-      />
+      /> */}
       {/* 列表区域 */}
       <div className="border border-red-300 overflow-auto h-full">
         {selected.selected === 'protocol' ? (

src/pages/patient/register.tsx

@@ -1,15 +1,5 @@
 import React from 'react';
-import {
-  Row,
-  Col,
-  Collapse,
-  Grid,
-  Divider,
-  Button,
-  Space,
-  Form,
-  message,
-} from 'antd';
+import { Row, Col, Collapse, Grid, Button, Space, Form, message } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import BasicInfoForm from './components/register.form';
 import SelectedProtocolList from './components/register.selected.view.list';
@@ -26,7 +16,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';
+import BodyPositionFilter from './components/bodyPositionFilter';
 dayjs.extend(utc);
 
 const { useBreakpoint } = Grid;
@@ -113,12 +103,27 @@ 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">
-            <HumanBody />
+          <Col
+            xs={24}
+            sm={24}
+            md={8}
+            lg={8}
+            xl={8}
+            xxl={9}
+            className="h-full flex justify-center items-center"
+          >
+            <BodyPositionFilter />
             {/* <RegisterAvailableList /> */}
           </Col>
           <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={9} className="h-full">
-            <SelectedProtocolList />
+            <Row style={{ height: '100%' }}>
+              <Col span={24} style={{ height: '50%' }}>
+                <RegisterAvailableList />
+              </Col>
+              <Col span={24} style={{ height: '50%' }}>
+                <SelectedProtocolList />
+              </Col>
+            </Row>
           </Col>
         </Row>
       ) : screens.md || screens.lg ? (
@@ -136,12 +141,11 @@ const RegisterPage: React.FC = () => {
             />
           </Col>
           <Col xs={24} sm={24} md={12} lg={12}>
-            <Row gutter={[0, 16]}>
-              <Col span={24}>
+            <Row gutter={[0, 16]} style={{ height: '100%' }}>
+              <Col span={24} style={{ height: '50%' }}>
                 <RegisterAvailableList />
               </Col>
-              <Divider />
-              <Col span={24}>
+              <Col span={24} style={{ height: '50%' }}>
                 <SelectedProtocolList className="" />
               </Col>
             </Row>
@@ -172,6 +176,7 @@ const RegisterPage: React.FC = () => {
               />
             }
             key="2"
+            style={{ height: '50%' }}
           >
             <RegisterAvailableList />
           </Panel>
@@ -183,6 +188,7 @@ const RegisterPage: React.FC = () => {
               />
             }
             key="3"
+            style={{ height: '50%' }}
           >
             <SelectedProtocolList />
           </Panel>