style(processing): set auto height and width for image area in image processing page

src/pages/view/ImageProcessingPageLarge.tsx

@@ -7,26 +7,24 @@ const { Content, Sider } = Layout;
 
 const ImageProcessingPageLarge = () => {
   return (
-    <Layout>
-      <Layout>
-        <Sider width={200} className="custom-sider">
-          {/**使用style注入方式修改Sider内部div的样式，使体位列表显示出体位信息 */}
-          <style>{`
+    <Layout className="h-full">
+      <Sider width={200} className="custom-sider">
+        {/**使用style注入方式修改Sider内部div的样式，使体位列表显示出体位信息 */}
+        <style>{`
             .custom-sider > .ant-layout-sider-children {
               display: flex;
               flex-direction: column;
               height: 100%;
             }
           `}</style>
-          <BodyPositionList layout="vertical" showAddButton={false} />
-        </Sider>
-        <Content>
-          <ImageControl />
-        </Content>
-        <Sider width={300}>
-          <OperationPanel />
-        </Sider>
-      </Layout>
+        <BodyPositionList layout="vertical" showAddButton={false} />
+      </Sider>
+      <Content>
+        <ImageControl />
+      </Content>
+      <Sider width={300}>
+        <OperationPanel />
+      </Sider>
     </Layout>
   );
 };

src/pages/view/components/ImageControl.tsx

@@ -1,7 +1,11 @@
 import StackViewer from './viewers/stack.image.viewer';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/states/store';
-import { getViewIconUrl, getExposedImageUrl, getDcmImageUrl } from '@/API/bodyPosition';
+import {
+  getViewIconUrl,
+  getExposedImageUrl,
+  getDcmImageUrl,
+} from '@/API/bodyPosition';
 import { Image } from 'antd';
 
 const ImageControl = () => {
@@ -19,25 +23,23 @@ const ImageControl = () => {
       ? getExposedImageUrl(selectedBodyPosition.sop_instance_uid)
       : getViewIconUrl(selectedBodyPosition.body_position_image)
     : '';
-  let dcmUrls: string[] = [];
+  const dcmUrls: string[] = [];
   if (isExposed) {
     dcmUrls.push(getDcmImageUrl(selectedBodyPosition.sop_instance_uid));
     console.log(`[ImageControl] dcmUrls:`, dcmUrls);
   }
   return (
-    <div className="image-control">
-      <div style={{ width: '800px', height: '600px' }}>
-        {isExposed ? (
-          <StackViewer imageIndex={0} imageUrls={dcmUrls} />
-        ) : (
-          <Image
-            src={imageUrl}
-            alt="Body Position"
-            style={{ width: '100%', height: '100%' }}
-          />
-        )}
-        {/* 第10张图和第30张图明显不同，可以用于测试，看效果*/}
-      </div>
+    <div className="h-full w-full">
+      {isExposed ? (
+        <StackViewer imageIndex={0} imageUrls={dcmUrls} />
+      ) : (
+        <Image
+          src={imageUrl}
+          alt="Body Position"
+          style={{ width: '100%', height: '100%' }}
+        />
+      )}
+      {/* 第10张图和第30张图明显不同，可以用于测试，看效果*/}
     </div>
   );
 };