dros/src/pages/view/ImageProcessingPageLarge.tsx

import { Layout } from 'antd';
import ImageControl from './components/ImageControl';
import OperationPanel from './components/OperationPanel';
import BodyPositionList from '../exam/components/BodyPositionList';

const { Content, Sider } = Layout;

const ImageProcessingPageLarge = () => {
  return (
    <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} className="operation-panel-sider">
        {/**使用style注入方式确保OperationPanel获得100%高度 */}
        <style>{`
            .operation-panel-sider > .ant-layout-sider-children {
              display: flex;
              flex-direction: column;
              height: 100%;
            }
          `}</style>
        <OperationPanel />
      </Sider>
    </Layout>
  );
};

export default ImageProcessingPageLarge;